/** * css/base.css * ───────────────────────────────────────────────────────────────── * Foundation layer: CSS custom properties (theme tokens), reset, * fonts, scrollbar, form elements, and keyframe animations. * * HOW THEMING WORKS * ----------------- * Colors are defined as CSS variables on :root (light mode). * When the user enables dark mode, JavaScript adds data-theme="dark" * to the element, which overrides the variables below. * Every component just uses var(--token) and the switch is instant. * ───────────────────────────────────────────────────────────────── */ /* ─── GOOGLE FONTS ─────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap'); /* ─── LIGHT THEME (default) ─────────────────────────────────────── */ :root { /* Backgrounds */ --bg: #F8F8F6; --bg-alt: #FFFFFF; --bg-section: #F0F0EE; --surface: #FFFFFF; --surface-hi: #F5F5F3; /* Borders */ --border: #E2E2DE; --border-hi: #CDCDC8; /* Text */ --text: #0A0A0A; --text-sub: #3A3A3A; --text-muted: #888880; /* Brand orange */ --orange: #FF6200; --orange-hi: #FF7A29; --orange-dim: rgba(255, 98, 0, 0.10); --orange-glow: rgba(255, 98, 0, 0.18); /* Misc */ --logo-bg: #111111; --shadow: rgba(0, 0, 0, 0.08); --shadow-md: rgba(0, 0, 0, 0.14); /* Typography */ --font-display: 'Syne', sans-serif; --font-body: 'DM Sans', sans-serif; } /* ─── DARK THEME ─────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0A0A0A; --bg-alt: #111111; --bg-section: #0D0D0D; --surface: #161616; --surface-hi: #1E1E1E; --border: #2A2A2A; --border-hi: #383838; --text: #F0F0EE; --text-sub: #BBBBBB; --text-muted: #777777; --orange: #FF6200; --orange-hi: #FF7A29; --orange-dim: rgba(255, 98, 0, 0.12); --orange-glow: rgba(255, 98, 0, 0.20); --logo-bg: #000000; --shadow: rgba(0, 0, 0, 0.40); --shadow-md: rgba(0, 0, 0, 0.60); } /* ─── RESET ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { overflow-x: hidden; background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; transition: background 0.35s, color 0.35s; } a { color: inherit; text-decoration: none; } ::selection { background: var(--orange); color: #fff; } img { display: block; max-width: 100%; } button { cursor: pointer; font-family: var(--font-body); } /* ─── CUSTOM SCROLLBAR ───────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 2px; } /* ─── FORM ELEMENTS ──────────────────────────────────────────────── */ input, select, textarea { font-family: var(--font-body); background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 13px 16px; font-size: 15px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; } input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; border: revert; background: revert; border-radius: revert; font-size: revert; } input:focus, select:focus, textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-dim); } input::placeholder, textarea::placeholder { color: var(--text-muted); } select option { background: var(--surface); color: var(--text); } textarea { resize: vertical; min-height: 100px; } /* ─── ANIMATIONS ─────────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes scrollDown { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(7px); opacity: 0.3; } } @keyframes auroraDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(4%, -3%) scale(1.08); } 66% { transform: translate(-3%, 2%) scale(0.96); } } @keyframes sheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(240%) skewX(-18deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ─── REVEAL ON SCROLL ───────────────────────────────────────────── */ /* JS adds .visible via IntersectionObserver (see main.js) */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Stagger delays for reveal groups */ .reveal[data-delay="1"] { transition-delay: 0.1s; } .reveal[data-delay="2"] { transition-delay: 0.2s; } .reveal[data-delay="3"] { transition-delay: 0.3s; } .reveal[data-delay="4"] { transition-delay: 0.4s; }