/* Hupay site theme — the palette every page shares, in light and dark. Loaded after industry.css, which it overrides. How the theme is chosen: js/theme.js runs in and stamps the resolved theme on , reading the stored preference or the system setting when that preference is "system". The prefers-color-scheme block at the bottom is the no-JS fallback only — keep it in sync with the :root[data-theme="dark"] block. */ :root { --font-heading: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Space Grotesk', system-ui, sans-serif; color-scheme: light; --color-bg: #EDEAE4; --color-text: #1A1B1E; --color-divider: color-mix(in srgb, var(--color-text) 16%, transparent); --color-neutral-100: #F7F5F0; --color-neutral-200: #EAE6DE; --color-neutral-300: #DCD7CC; --color-neutral-400: #C4BEB1; --color-neutral-500: #A5A096; --color-neutral-600: #7C7A75; --color-neutral-700: #54524D; --color-neutral-800: #33322F; --color-neutral-900: #1A1B1E; --color-accent: #A9761A; --color-accent-100: #FAF2DE; --color-accent-200: #F4E0AF; --color-accent-300: #F0BC3C; --color-accent-400: #DFA92F; --color-accent-500: #C9942A; --color-accent-600: #B07F22; --color-accent-700: #A9761A; --color-accent-800: #7A5410; --color-accent-900: #17181B; --color-accent-2: #A9761A; --color-accent-2-300: #F0BC3C; --color-accent-2-500: #C9942A; --color-accent-2-700: #A9761A; --color-accent-2-900: #17181B; /* Ink bands — the near-black full-width sections. They stay dark in both themes; in dark mode they lift slightly so they still separate from the page behind them. */ --color-band: #17181B; --color-band-text: #F2F2F3; --color-band-muted: #9C9A94; --color-band-dim: #7C7A75; --color-band-line: rgba(242, 242, 243, .18); --color-selection: rgba(240, 188, 60, .32); } :root[data-theme="dark"] { color-scheme: dark; --color-bg: #16171A; --color-text: #EDEAE4; --color-divider: color-mix(in srgb, var(--color-text) 22%, transparent); --color-neutral-100: #1D1F22; --color-neutral-200: #24262A; --color-neutral-300: #32353A; --color-neutral-400: #474B51; --color-neutral-500: #6E7178; --color-neutral-600: #9A9C9F; --color-neutral-700: #C3C3C1; --color-neutral-800: #DCDBD7; --color-neutral-900: #EDEAE4; --color-accent: #F0BC3C; --color-accent-100: #2A2517; --color-accent-200: #4A3D1C; --color-accent-300: #F4D076; --color-accent-400: #DFA92F; --color-accent-500: #DFA92F; --color-accent-600: #E8B535; --color-accent-700: #F0BC3C; --color-accent-800: #F4E0AF; --color-accent-900: #F7E3AE; --color-accent-2: #F0BC3C; --color-accent-2-300: #F4D076; --color-accent-2-500: #DFA92F; --color-accent-2-700: #F0BC3C; --color-accent-2-900: #F7E3AE; --color-band: #1E2025; --color-band-text: #F2F2F3; --color-band-muted: #A0A29F; --color-band-dim: #85888C; --color-band-line: rgba(242, 242, 243, .16); } *, *::before, *::after { box-sizing: border-box } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } a { color: var(--color-accent-700); text-decoration: none } a:hover { color: var(--color-accent-900) } ::selection { background: var(--color-selection) } .btn-primary { background: #F0BC3C; color: #1A1B1E; border-color: #F0BC3C } .btn-primary:hover { background: #DFA92F; border-color: #DFA92F } .btn-primary:active { background: #C9942A; border-color: #C9942A } /* — theme control: light / dark / follow system — */ .theme-toggle { display: inline-flex; border: 1px solid var(--color-divider) } .theme-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--color-neutral-600); cursor: pointer; -webkit-appearance: none; appearance: none; } .theme-toggle button + button { border-left: 1px solid var(--color-divider) } .theme-toggle button:hover { color: var(--color-text) } .theme-toggle button[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg) } .theme-toggle svg { width: 15px; height: 15px; display: block } /* — App Store badge: Apple's black lockup on light ground, the white one on dark ground. Height comes from the anchor's inline style. — */ .appstore-badge { display: block; line-height: 0 } .appstore-badge img { height: 100%; width: auto; display: block } .appstore-badge .badge-dark { display: none } :root[data-theme="dark"] .appstore-badge .badge-light { display: none } :root[data-theme="dark"] .appstore-badge .badge-dark { display: block } /* on an ink band the ground is dark in either theme */ .appstore-badge.on-band .badge-light { display: none } .appstore-badge.on-band .badge-dark { display: block } /* No-JS fallback — mirrors :root[data-theme="dark"] above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --color-bg: #16171A; --color-text: #EDEAE4; --color-divider: color-mix(in srgb, var(--color-text) 22%, transparent); --color-neutral-100: #1D1F22; --color-neutral-200: #24262A; --color-neutral-300: #32353A; --color-neutral-400: #474B51; --color-neutral-500: #6E7178; --color-neutral-600: #9A9C9F; --color-neutral-700: #C3C3C1; --color-neutral-800: #DCDBD7; --color-neutral-900: #EDEAE4; --color-accent: #F0BC3C; --color-accent-100: #2A2517; --color-accent-200: #4A3D1C; --color-accent-300: #F4D076; --color-accent-400: #DFA92F; --color-accent-500: #DFA92F; --color-accent-600: #E8B535; --color-accent-700: #F0BC3C; --color-accent-800: #F4E0AF; --color-accent-900: #F7E3AE; --color-accent-2: #F0BC3C; --color-accent-2-300: #F4D076; --color-accent-2-500: #DFA92F; --color-accent-2-700: #F0BC3C; --color-accent-2-900: #F7E3AE; --color-band: #1E2025; --color-band-text: #F2F2F3; --color-band-muted: #A0A29F; --color-band-dim: #85888C; --color-band-line: rgba(242, 242, 243, .16); } :root:not([data-theme]) .appstore-badge .badge-light { display: none } :root:not([data-theme]) .appstore-badge .badge-dark { display: block } }