/* * Themes. * * style.css defines the components entirely in tokens. This file defines the tokens, three * times over, plus the small amount of per-theme character that tokens alone cannot carry * (a wordmark's typeface, whether a card has a hard border or floats on a soft shadow). * * The theme and the light/dark mode are both attributes on , set by an inline script * in the head before first paint so there is no flash: * * * * Fonts are self-hosted latin subsets — the site must look right with no network beyond * its own origin, and it is offline-first during development. */ /* ── faces ────────────────────────────────────────────────────── */ @font-face { font-family: 'Anton'; src: url('/fonts/anton-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Zen Kaku Gothic New'; src: url('/fonts/zenkaku-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Zen Kaku Gothic New'; src: url('/fonts/zenkaku-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Zen Kaku Gothic New'; src: url('/fonts/zenkaku-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/fonts/spacegrotesk-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/fonts/spacegrotesk-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/fonts/spacegrotesk-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* The wordmark can differ from body text. Defaults to body so a theme need not set it. */ :root { --font-display: var(--font); --display-transform: none; --display-spacing: -.02em; --display-weight: 700; } /* ══════════════════════════════════════════════════════════════════ SHONEN — loud. Condensed poster display, hard offset shadows, tight corners, a red that shouts. Closest to a printed comic cover. ══════════════════════════════════════════════════════════════════ */ [data-theme="shonen"] { --paper: #fffdf8; --paper-raised: #ffffff; --paper-sunk: #f4efe6; --ink: #0c0b0e; --ink-soft: #55515c; --ink-faint: #8b8794; --rule: #dcd5ca; --accent: #ff2d20; --accent-soft: #ffe6e3; --ok: #12794f; --warn: #a86a00; --r-sm: 3px; --r-md: 5px; --r-lg: 8px; --r-full: 999px; --t-xs: 12px; --t-sm: 13px; --t-md: 15px; --t-lg: 18px; --t-xl: 28px; --t-2xl: 52px; --shadow-sm: 2px 2px 0 rgb(12 11 14 / .85); --shadow-md: 5px 5px 0 rgb(12 11 14 / .85); --font: 'Inter', system-ui, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace; --font-display: 'Anton', 'Inter', sans-serif; --display-transform: uppercase; --display-spacing: .015em; --display-weight: 400; --page-max: 900px; } [data-theme="shonen"][data-mode="dark"] { --paper: #0b0a0d; --paper-raised: #17151c; --paper-sunk: #050409; --ink: #fff7ec; --ink-soft: #aaa3b2; --ink-faint: #6f6a7a; --rule: #2c2833; --accent: #ff4a3a; --accent-soft: #33110d; --ok: #46c78c; --warn: #e0a53a; /* black-on-black offsets are invisible, so the shadow carries the accent instead */ --shadow-sm: 2px 2px 0 rgb(255 74 58 / .5); --shadow-md: 5px 5px 0 rgb(255 74 58 / .5); } /* hard-edged, printed */ [data-theme="shonen"] .card, [data-theme="shonen"] .composer { border-width: 2px; border-color: var(--ink); } [data-theme="shonen"] .card:hover { transform: translate(-2px, -2px); } [data-theme="shonen"] header.hero h1 { line-height: .92; } [data-theme="shonen"] .pill-group { border-width: 2px; border-color: var(--ink); } [data-theme="shonen"] .btn { border: 2px solid var(--ink); border-radius: var(--r-sm); } [data-theme="shonen"] .tag { border-radius: var(--r-sm); text-transform: uppercase; letter-spacing: .06em; } [data-theme="shonen"] section.feed h2 { color: var(--ink); } /* ══════════════════════════════════════════════════════════════════ ZEN — calm. Japanese gothic throughout, generous air, big soft corners, one deep green. Reads as a premium product, not a poster. ══════════════════════════════════════════════════════════════════ */ [data-theme="zen"] { --paper: #f7f6f2; --paper-raised: #ffffff; --paper-sunk: #edebe3; --ink: #1b1b18; --ink-soft: #5d5b53; --ink-faint: #97948b; --rule: #e4e1d7; --accent: #0f8a72; --accent-soft: #d8f0e8; --ok: #0f8a72; --warn: #9a7112; --r-sm: 10px; --r-md: 16px; --r-lg: 26px; --r-full: 999px; --s-1: 5px; --s-2: 10px; --s-3: 14px; --s-4: 20px; --s-5: 28px; --s-6: 40px; --s-7: 56px; --s-8: 88px; --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 19px; --t-xl: 26px; --t-2xl: 40px; --shadow-sm: 0 1px 3px rgb(27 27 24 / .05); --shadow-md: 0 10px 36px rgb(27 27 24 / .10); --font: 'Zen Kaku Gothic New', system-ui, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace; --font-display: 'Zen Kaku Gothic New', sans-serif; --display-weight: 700; --display-spacing: -.01em; --page-max: 1000px; } [data-theme="zen"][data-mode="dark"] { --paper: #161613; --paper-raised: #201f1b; --paper-sunk: #0e0e0c; --ink: #f3f1e9; --ink-soft: #a9a69b; --ink-faint: #76736a; --rule: #2d2c27; --accent: #35c9a5; --accent-soft: #102c26; --ok: #35c9a5; --warn: #d9ac45; --shadow-sm: 0 1px 3px rgb(0 0 0 / .5); --shadow-md: 0 10px 40px rgb(0 0 0 / .55); } /* borderless and floating */ [data-theme="zen"] .card { border-color: transparent; box-shadow: var(--shadow-sm); } [data-theme="zen"] .card:hover { transform: translateY(-4px); } [data-theme="zen"] .composer { border-color: transparent; } [data-theme="zen"] .card .meta { padding: var(--s-4); } /* Generous, but not so generous the composer falls below the fold on a laptop — the hero was pushing the thing people came to use off the screen. */ [data-theme="zen"] header.hero { padding-block: var(--s-6) var(--s-5); } [data-theme="zen"] .btn { font-weight: 500; letter-spacing: .01em; } /* ══════════════════════════════════════════════════════════════════ NEON — dark-first. Geometric sans, violet and cyan, light that comes off the surface rather than falling on it. Modern app, not print. ══════════════════════════════════════════════════════════════════ */ [data-theme="neon"] { --paper: #f3f4fb; --paper-raised: #ffffff; --paper-sunk: #e7e9f7; --ink: #13121f; --ink-soft: #55526e; --ink-faint: #8a87a4; --rule: #dbdbee; --accent: #6d3bff; --accent-soft: #eae1ff; --ok: #0b9d7a; --warn: #9a6b00; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-full: 999px; --t-xs: 12px; --t-sm: 13px; --t-md: 15px; --t-lg: 18px; --t-xl: 26px; --t-2xl: 42px; --shadow-sm: 0 2px 6px rgb(109 59 255 / .10); --shadow-md: 0 10px 34px rgb(109 59 255 / .18); --font: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'Space Grotesk', ui-monospace, Consolas, monospace; --font-display: 'Space Grotesk', sans-serif; --display-weight: 700; --display-spacing: -.03em; --page-max: 940px; } [data-theme="neon"][data-mode="dark"] { --paper: #09090f; --paper-raised: #15142a; --paper-sunk: #050509; --ink: #ecebff; --ink-soft: #a09dc6; --ink-faint: #6d6a92; --rule: #272548; --accent: #8b5cff; --accent-soft: #241a48; --ok: #2fe0b0; --warn: #ffc148; --shadow-sm: 0 2px 10px rgb(139 92 255 / .28); --shadow-md: 0 12px 44px rgb(139 92 255 / .34); } [data-theme="neon"] header.hero h1 { background: linear-gradient(96deg, var(--accent), var(--ink) 62%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="neon"] .card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } [data-theme="neon"] .btn { box-shadow: var(--shadow-sm); } [data-theme="neon"] .pill[aria-pressed="true"] { box-shadow: none; } [data-theme="neon"][data-mode="dark"] .cover { background: #0e0d1c; } /* ── shared: the wordmark uses whatever the theme chose ──────────── */ header.hero h1 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); text-transform: var(--display-transform); } /* ══════════════════════════════════════════════════════════════════ Theme picker — a comparison tool, not a feature. Deliberately styled outside the token system so it looks identical in every theme and cannot flatter one of them. Delete this block, the markup and theme.js's picker half once a theme is chosen. ══════════════════════════════════════════════════════════════════ */ .themebar { position: fixed; z-index: 80; inset-block-end: 16px; inset-inline-end: 16px; display: flex; align-items: center; gap: 4px; padding: 5px; background: #17171c; border: 1px solid #303038; border-radius: 999px; box-shadow: 0 8px 28px rgb(0 0 0 / .35); font: 500 12px/1 'Inter', system-ui, sans-serif; } .themebar button { border: 0; cursor: pointer; border-radius: 999px; padding: 7px 13px; background: none; color: #9a97a4; font: inherit; transition: background .12s, color .12s; } .themebar button:hover { color: #fff; } .themebar button[aria-pressed="true"] { background: #2e2e37; color: #fff; } .themebar .sep { width: 1px; align-self: stretch; background: #303038; margin-inline: 3px; } .themebar #mode-toggle { font-size: 14px; padding: 7px 11px; } @media (max-width: 560px) { .themebar { inset-block-end: 10px; inset-inline-end: 10px; } .themebar button { padding: 6px 10px; } }