/* ============================================ DESIGN SYSTEM — BASE Reset, Custom Properties, Typography, Utilities ============================================ */ /* Google Fonts — loaded via in HTML for parallel downloading */ /* ---- CSS Custom Properties ---- */ :root { /* Light Theme (default) */ --bg-primary: #f5f3f0; --bg-secondary: #eae8e4; --bg-tertiary: #e0ded9; --bg-card: rgba(255, 255, 255, 0.6); --bg-card-hover: rgba(255, 255, 255, 0.85); --bg-glass: rgba(245, 243, 240, 0.7); --bg-overlay: rgba(245, 243, 240, 0.95); --text-primary: #1a1a1a; --text-secondary: #4a4a4a; --text-tertiary: #636363; --text-inverse: #f5f3f0; --accent: #2a2a2a; --accent-hover: #444444; --accent-subtle: rgba(42, 42, 42, 0.08); --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.15); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12); /* Spacing Scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem; /* Typography */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem); --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem); --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem); --text-lg: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); --text-xl: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); --text-2xl: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); --text-3xl: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); --text-4xl: clamp(2.2rem, 1.6rem + 2vw, 3.5rem); --text-5xl: clamp(2.8rem, 2rem + 2.5vw, 4.5rem); --text-hero: clamp(3rem, 2rem + 3.5vw, 5.5rem); /* Border Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); --transition-theme: 600ms cubic-bezier(0.4, 0, 0.2, 1); /* Z-index Scale */ --z-base: 1; --z-dropdown: 10; --z-sticky: 50; --z-overlay: 100; --z-modal: 200; /* Container */ --container-max: 1200px; --container-padding: clamp(1.25rem, 3vw, 3rem); /* Homepage Theme — Light */ --hero-bg: #f5f3f0; --hero-text: #1a1a1a; --hero-text-secondary: rgba(0, 0, 0, 0.55); --hero-text-muted: rgba(0, 0, 0, 0.45); --hero-text-faint: rgba(0, 0, 0, 0.3); --hero-text-label: rgba(0, 0, 0, 0.7); --hero-accent: #16a34a; --hero-accent-subtle: rgba(22, 163, 74, 0.1); --hero-accent-underline: rgba(22, 163, 74, 0.3); --hero-card-bg: rgba(0, 0, 0, 0.03); --hero-card-hover: rgba(0, 0, 0, 0.06); --hero-card-icon-bg: rgba(0, 0, 0, 0.05); --hero-border: rgba(0, 0, 0, 0.08); --hero-border-hover: rgba(0, 0, 0, 0.15); --hero-ring-color: rgba(22, 163, 74, 0.06); --hero-shadow: rgba(0, 0, 0, 0.15); --hero-navbar-scrolled-bg: rgba(245, 243, 240, 0.95); --hero-social-border: rgba(0, 0, 0, 0.15); --hero-social-color: rgba(0, 0, 0, 0.5); --hero-dot-color: #16a34a; --hero-sparkle-stroke: #16a34a; } /* ---- Dark Theme ---- */ [data-theme="dark"] { --bg-primary: #0a0a0a; --bg-secondary: #141414; --bg-tertiary: #1e1e1e; --bg-card: rgba(255, 255, 255, 0.04); --bg-card-hover: rgba(255, 255, 255, 0.08); --bg-glass: rgba(10, 10, 10, 0.75); --bg-overlay: rgba(10, 10, 10, 0.95); --text-primary: #f0ede8; --text-secondary: #a8a5a0; --text-tertiary: #8a8783; --text-inverse: #0a0a0a; --accent: #e8e4df; --accent-hover: #d4d0cb; --accent-subtle: rgba(232, 228, 223, 0.06); --border: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.12); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* Homepage Theme — Dark */ --hero-bg: #0c1a1f; --hero-text: #f0ede8; --hero-text-secondary: rgba(255, 255, 255, 0.6); --hero-text-muted: rgba(255, 255, 255, 0.45); --hero-text-faint: rgba(255, 255, 255, 0.3); --hero-text-label: rgba(255, 255, 255, 0.7); --hero-accent: #4ade80; --hero-accent-subtle: rgba(74, 222, 128, 0.1); --hero-accent-underline: rgba(74, 222, 128, 0.3); --hero-card-bg: rgba(255, 255, 255, 0.03); --hero-card-hover: rgba(255, 255, 255, 0.06); --hero-card-icon-bg: rgba(255, 255, 255, 0.05); --hero-border: rgba(255, 255, 255, 0.06); --hero-border-hover: rgba(255, 255, 255, 0.12); --hero-ring-color: rgba(74, 222, 128, 0.015); --hero-shadow: rgba(0, 0, 0, 0.5); --hero-navbar-scrolled-bg: rgba(12, 26, 31, 0.95); --hero-social-border: rgba(255, 255, 255, 0.15); --hero-social-color: rgba(255, 255, 255, 0.5); --hero-dot-color: #4ade80; --hero-sparkle-stroke: #4ade80; } /* ---- CSS Reset ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--text-primary); background-color: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color var(--transition-theme); } img, video, svg { display: block; max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; transition: color var(--transition-fast); } button { border: none; background: none; cursor: pointer; font-family: inherit; font-size: inherit; color: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; border: none; outline: none; background: none; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--text-primary); transition: color var(--transition-theme); } p { color: var(--text-secondary); transition: color var(--transition-theme); } ::selection { background-color: var(--accent); color: var(--text-inverse); } /* ---- Utility Classes ---- */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } .section { padding-top: var(--space-5xl); padding-bottom: var(--space-5xl); } .section--sm { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); } .text-center { text-align: center; } .text-left { text-align: left; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip to content link */ .skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); padding: 0.75rem 1.5rem; background: var(--accent); color: var(--text-inverse); border-radius: var(--radius-md); font-weight: 600; z-index: 100002; transition: top 0.2s ease; } .skip-link:focus { top: 1rem; } /* Reveal animation classes */ .reveal { opacity: 0; transform: translateY(40px); } .reveal.active { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-40px); } .reveal-left.active { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(40px); } .reveal-right.active { opacity: 1; transform: translateX(0); } .reveal-scale { opacity: 0; transform: scale(0.9); } .reveal-scale.active { opacity: 1; transform: scale(1); } /* Stagger children */ .stagger-children > * { opacity: 0; transform: translateY(30px); } .stagger-children.active > * { opacity: 1; transform: translateY(0); }