/* * FAP — Global Design Tokens & Base Styles * Task: TASK-001 (CSS tokens) + TASK-012 (typography) * Source: LEAD_REFERENCE.md * * TABLE OF CONTENTS * 1. CSS Custom Properties (Design Tokens) * 2. Dark Mode Overrides * 3. Base Reset & Typography * 4. Scrollbar * 5. Kadence Overrides — Variables * 6. Utility Classes * 7. Homepage Layout Wrapper * 8. Hero Section — TASK-003/004/005 * 9. Global Buttons * 10. Sticky Audio Player — TASK-013 * 11. Back to Top — TASK-015 * 12. Scroll Reveal — TASK-015 */ /* ============================================================ 1. CSS CUSTOM PROPERTIES (DESIGN TOKENS) Default: Light Mode ============================================================ */ :root { /* Brand */ --brand-1: #ad966c; /* gold sand */ --brand-2: #c4660e; /* burnt orange */ --brand-3: #FF7F00; /* vivid orange */ /* Semantic */ --primary: #FF7F00; --primary-600: #e57000; --primary-700: #c65f00; /* Accent */ --accent-blue: #1f6feb; /* Misc UI */ --hero-accent: #E67E22; /* hero title text */ --secondary-btn: #748b9f; /* podcast card secondary button */ --patreon: #f96854; --patreon-hover: #d84a38; /* Base */ --white: #ffffff; --black: #000000; /* Grayscale — Light Mode */ --gray-50: #fafafa; --gray-75: #f7f7f9; --gray-100: #f5f5f5; --gray-200: #eeeeee; --gray-300: #e0e0e0; --gray-700: #333333; --gray-800: #1a1a1a; --gray-900: #000000; /* Semantic text / surface tokens — use these for color/background-color. These NEVER invert to the wrong value, unlike --black / --white. */ --text-primary: #0a0a0a; /* body copy, headings */ --text-secondary: #1f1f1f; /* subtitles, meta */ --text-muted: #444444; /* descriptions, hints */ --surface: #ffffff; /* page background */ --surface-alt: #f5f5f5; /* cards, panels */ /* Layout */ --container-max-width: 1500px; --sidebar-width: 260px; --header-height: 80px; /* Shape */ --border-radius: 12px; --border-radius-pill: 24px; --border-radius-badge: 999px; /* Typography */ --font-primary: 'Roboto', system-ui, sans-serif; --font-heading: 'Montserrat', sans-serif; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); /* Transitions */ --transition: all .3s cubic-bezier(.4, 0, .2, 1); /* Overlay */ --overlay-bg: rgba(255, 255, 255, .92); } /* ============================================================ 2. DARK MODE OVERRIDES Applied via: a) @media (prefers-color-scheme: dark) — system preference b) .dark-mode — JS manual toggle (see fap-scripts.js) ============================================================ */ @media (prefers-color-scheme: dark) { :root { --white: #111111; /* main dark background */ --black: #ffffff; --gray-50: #0f0f0f; --gray-75: #141414; --gray-100: #1a1a1a; --gray-200: #222222; --gray-300: #333333; --gray-700: #bdbdbd; --gray-800: #e0e0e0; --gray-900: #f5f5f5; /* Semantic tokens — dark values */ --text-primary: #f0f0f0; --text-secondary: #bdbdbd; --text-muted: #999999; --surface: #111111; --surface-alt: #1a1a1a; --overlay-bg: rgba(17, 17, 17, .92); } } .light-mode { --white: #ffffff; --black: #000000; --gray-50: #fafafa; --gray-75: #f7f7f9; --gray-100: #f5f5f5; --gray-200: #eeeeee; --gray-300: #e0e0e0; --gray-700: #333333; --gray-800: #1a1a1a; --gray-900: #000000; /* Semantic tokens — light */ --text-primary: #0a0a0a; --text-secondary: #1f1f1f; --text-muted: #444444; --surface: #ffffff; --surface-alt: #f5f5f5; --overlay-bg: rgba(255, 255, 255, .92); } /* JS toggle — class applied to by fap-scripts.js */ .dark-mode { --white: #111111; --black: #ffffff; --gray-50: #0f0f0f; --gray-75: #141414; --gray-100: #1a1a1a; --gray-200: #222222; --gray-300: #333333; --gray-700: #bdbdbd; --gray-800: #e0e0e0; --gray-900: #f5f5f5; /* Semantic tokens — dark */ --text-primary: #f0f0f0; --text-secondary: #bdbdbd; --text-muted: #999999; --surface: #111111; --surface-alt: #1a1a1a; --overlay-bg: rgba(17, 17, 17, .92); } /* ============================================================ 3. BASE RESET & TYPOGRAPHY — TASK-012 ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-primary); font-size: 16px; line-height: 1.6; color: var(--text-primary); /* was --gray-800; now uses semantic token */ background-color: var(--surface); /* was --white; now uses semantic token */ overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--text-primary); /* was --gray-900 */ line-height: 1.2; } a { color: var(--primary); text-decoration: none; transition: var(--transition); } a:hover, a:focus { color: var(--primary-600); } img { max-width: 100%; height: auto; display: block; } /* Reduced motion — respect user preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============================================================ 4. SCROLLBAR Thin, primary-colored thumb on gray-200 track ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--gray-200); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-600); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--primary) var(--gray-200); } /* ============================================================ 5. KADENCE VARIABLE OVERRIDES Map Kadence's own CSS vars to our design tokens so that any Kadence component that uses its own variables automatically respects our brand colors. ============================================================ */ :root { /* Kadence palette vars → our brand */ --global-palette1: var(--primary); --global-palette2: var(--primary-600); --global-palette3: var(--gray-800); --global-palette4: var(--gray-700); --global-palette5: var(--gray-300); --global-palette6: var(--gray-200); --global-palette7: var(--gray-100); --global-palette8: var(--white); --global-palette9: var(--black); /* Kadence body font */ --global-body-font-family: var(--font-primary); --global-heading-font-family: var(--font-heading); /* Kadence content width */ --global-content-width: var(--container-max-width); } /* ============================================================ 5b. DARK MODE BACKGROUND OVERRIDES Kadence's Customizer writes hardcoded hex values for body background as inline