/* ============================================================ Warhammer 40,000 One-Shot Kit — themed, legibility-first. ONE stylesheet, FIVE themes. Every color + font flows through a semantic token contract (25 tokens). The default — on :root — is "Imperial" (the signature grimdark dark). Each other theme is a [data-theme="…"] block overriding the same token names: · codex — light illuminated vellum (still 40k) · slate — clean, minimally-styled dark reader · paper — clean, minimally-styled light reader · high-contrast — maximum-contrast accessibility theme The active theme is chosen by the picker in the header and saved to localStorage (assets/theme.js). A tiny blocking inline script in applies it before first paint, so there is no flash. All palettes are WCAG-checked: body text clears AAA in every theme. ============================================================ */ /* ============================================================ THEME TOKENS ============================================================ */ /* ---- Imperial (default · dark · signature grimdark) ---- */ :root{ color-scheme:dark; --bg:#0e0f12; --bg-image: radial-gradient(120% 80% at 50% -10%, rgba(200,58,47,.08), transparent 55%), radial-gradient(100% 60% at 50% 120%, rgba(224,184,74,.05), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px); --surface:#191b1f; --surface-2:#121316; --text:#f0ebdd; --text-dim:#cbc2aa; --text-muted:#9aa0a9; --heading:#f4efe2; --heading-accent:#e0b84a; --accent:#e0b84a; --accent-hover:#e2564f; --accent-2:#dd4d40; --strong:#ffffff; --border:#4a4226; --border-soft:#26241d; --code-bg:#14151a; --code-text:#f0d98a; --code-border:#2a2a22; --nav-active-text:#161208; --font-body:"EB Garamond", Georgia, Cambria, "Times New Roman", serif; --font-head:"Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif; --font-ui:"Oswald", "Bebas Neue", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --maxw:min(66ch, 92vw); } /* ---- Codex (light · illuminated vellum · keeps the 40k identity) ---- */ [data-theme="codex"]{ color-scheme:light; --bg:#f3ead6; --bg-image: radial-gradient(120% 80% at 50% -10%, rgba(140,29,29,.045), transparent 55%), radial-gradient(100% 70% at 50% 120%, rgba(133,93,16,.05), transparent 60%), repeating-linear-gradient(0deg, rgba(36,29,18,.015) 0 1px, transparent 1px 3px); --surface:#fbf5e6; --surface-2:#f1e7cf; --text:#241d12; --text-dim:#4a3f2c; --text-muted:#6f6450; --heading:#1c1710; --heading-accent:#8c1d1d; --accent:#855d10; --accent-hover:#a12020; --accent-2:#a12020; --strong:#120d06; --border:#c9b48a; --border-soft:#e2d4b4; --code-bg:#ece0c6; --code-text:#5a3210; --code-border:#d8c39a; --nav-active-text:#fbf5e6; --font-body:"EB Garamond", Georgia, Cambria, "Times New Roman", serif; --font-head:"Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif; --font-ui:"Oswald", "Bebas Neue", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ---- Slate (dark · clean reader · minimal flavor) ---- */ [data-theme="slate"]{ color-scheme:dark; --bg:#16181c; --bg-image:none; --surface:#1f2227; --surface-2:#1a1d22; --text:#e7eaee; --text-dim:#b4bac2; --text-muted:#878e98; --heading:#f2f4f7; --heading-accent:#73b6dd; --accent:#7ab8e0; --accent-hover:#9ccbea; --accent-2:#e0a93f; --strong:#ffffff; --border:#343a42; --border-soft:#24282e; --code-bg:#1b1e23; --code-text:#d6dbe2; --code-border:#2c313a; --nav-active-text:#14171b; --font-body:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif; --font-head:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-ui:"Oswald", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ---- Paper (light · clean reader · maximum legibility) ---- */ [data-theme="paper"]{ color-scheme:light; --bg:#fbfbfa; --bg-image:none; --surface:#ffffff; --surface-2:#f4f5f6; --text:#1b1c1e; --text-dim:#45474c; --text-muted:#6c6f76; --heading:#111214; --heading-accent:#1f5fa8; --accent:#1f5fa8; --accent-hover:#16467d; --accent-2:#b02a1f; --strong:#0a0b0c; --border:#d6d8db; --border-soft:#ebecee; --code-bg:#f1f2f4; --code-text:#2d3038; --code-border:#dfe1e4; --nav-active-text:#ffffff; --font-body:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif; --font-head:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-ui:"Oswald", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ---- High Contrast (dark · accessibility · AAA everywhere) ---- */ [data-theme="high-contrast"]{ color-scheme:dark; --bg:#0a0a0a; --bg-image:none; --surface:#1a1a1a; --surface-2:#121212; --text:#ffffff; --text-dim:#e6e6e6; --text-muted:#c2c2c2; --heading:#ffffff; --heading-accent:#ffd24d; --accent:#ffe24a; --accent-hover:#ffffff; --accent-2:#ff7a6e; --strong:#ffffff; --border:#b0b0b0; --border-soft:#4a4a4a; --code-bg:#161616; --code-text:#f2f2f2; --code-border:#5a5a5a; --nav-active-text:#0a0a0a; --font-body:"Atkinson Hyperlegible", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-head:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-ui:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ============================================================ BASE ============================================================ */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; color:var(--text); background:var(--bg); font-family:var(--font-body); font-size:clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem); /* 17px → 19px */ line-height:1.70; -webkit-font-smoothing:antialiased; background-image:var(--bg-image); } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* Gentle cross-fade when switching themes (motion-safe only). */ @media (prefers-reduced-motion:no-preference){ html,body{transition:background-color .2s ease, color .2s ease} } /* Visible, theme-aware focus ring (clears 3:1 non-text in every theme). */ :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px} /* ---- typography ---- */ h1,h2,h3,h4{font-family:var(--font-head); color:var(--heading); line-height:1.18; font-weight:600} h1{font-size:2.2rem; letter-spacing:.02em; margin:.2em 0 .5em} h2{font-size:1.5rem; color:var(--heading-accent); margin:2.2em 0 .6em; padding-bottom:.3em; border-bottom:1px solid var(--border)} h3{font-size:1.18rem; color:var(--heading); margin:1.8em 0 .4em} h4{font-size:1rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.12em} p{margin:.7em 0} a{color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent)} a:hover{color:var(--accent-hover); border-color:var(--accent-hover)} strong{color:var(--strong); font-weight:600} em{color:var(--text)} hr{border:0; height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); margin:2.4em 0} small{color:var(--text-muted)} /* ---- layout ---- */ .wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem} main.page{padding:2.5rem 0 4rem} main.page .wrap > :first-child{margin-top:0} /* ---- site header / nav ---- */ .site-head{ position:sticky; top:0; z-index:50; backdrop-filter:blur(8px); background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 95%, transparent), color-mix(in srgb, var(--bg) 82%, transparent)); border-bottom:1px solid var(--border); } .site-head .bar{max-width:72rem; margin:0 auto; padding:.6rem 1.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem} .brand{order:1; display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:700; letter-spacing:.06em; color:var(--heading); border:0; font-size:1rem; white-space:nowrap} .brand .aq{width:26px; height:26px; flex:none; color:var(--accent)} .brand b{color:var(--accent-2); font-weight:700} nav.top{order:2; margin-left:auto; display:flex; flex-wrap:wrap; gap:.1rem .15rem; justify-content:flex-end} nav.top a{font-family:var(--font-ui); font-weight:500; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); padding:.3rem .55rem; border:0; border-radius:3px} nav.top a:hover,nav.top a.active{color:var(--nav-active-text); background:var(--accent)} /* ---- theme picker ---- */ .theme-picker{order:3; position:relative; flex:none} .no-js .theme-picker{display:none} .theme-btn{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-ui); font-weight:500; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; line-height:1; cursor:pointer; color:var(--text-dim); background:transparent; border:1px solid var(--border); border-radius:4px; padding:.36rem .55rem} .theme-btn:hover{color:var(--text); border-color:var(--accent)} .theme-btn .ico{width:16px; height:16px; flex:none} .theme-btn .caret{width:11px; height:11px; flex:none; opacity:.7} .theme-menu{position:absolute; top:calc(100% + .45rem); right:0; min-width:236px; z-index:60; display:flex; flex-direction:column; gap:.12rem; padding:.4rem; background:var(--surface); border:1px solid var(--border); border-radius:9px; box-shadow:0 14px 34px rgba(0,0,0,.38)} .theme-menu[hidden]{display:none} .theme-opt{display:flex; align-items:center; gap:.65rem; width:100%; text-align:left; cursor:pointer; background:transparent; border:0; border-radius:6px; padding:.45rem .5rem; color:var(--text)} .theme-opt:hover,.theme-opt:focus-visible{background:color-mix(in srgb, var(--accent) 15%, transparent); outline:none} .theme-opt .sw{width:36px; height:26px; flex:none; border-radius:5px; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:600; font-size:.82rem; background:var(--sw-bg); color:var(--sw-tx); border:1px solid color-mix(in srgb, var(--sw-tx) 28%, var(--sw-bg)); border-left:3px solid var(--sw-ac)} .theme-opt .sw.sys{background:linear-gradient(120deg, #0e0f12 0 50%, #fbfbfa 50% 100%); border-left-color:#888; color:transparent} .theme-opt .sw.sys svg{width:15px; height:15px; color:#cfcfcf; mix-blend-mode:difference} .theme-opt-tx{display:flex; flex-direction:column; line-height:1.2; min-width:0} .theme-opt-name{font-family:var(--font-ui); font-weight:500; font-size:.92rem; letter-spacing:.02em} .theme-opt-desc{font-size:.74rem; color:var(--text-muted); margin-top:.08rem} .theme-check{width:16px; height:16px; flex:none; margin-left:auto; color:var(--accent); opacity:0} .theme-opt[aria-checked="true"] .theme-check{opacity:1} .theme-opt[aria-checked="true"] .theme-opt-name{color:var(--accent)} /* ---- hero (home) ---- */ .hero{text-align:center; padding:4.5rem 1.25rem 2.5rem; position:relative} .hero .aq{width:74px; height:74px; color:var(--accent); opacity:.9; margin-bottom:.4rem} .hero h1{font-size:clamp(2.1rem,6vw,3.6rem); margin:.1em 0} .hero .kicker{font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.34em; color:var(--accent-2); font-size:.8rem; margin:0 0 .3rem} .hero .tagline{font-style:italic; color:var(--text-dim); font-size:1.15rem; max-width:40rem; margin:.6rem auto 0} .hero .sub{color:var(--text-muted); margin-top:.5rem} /* ---- the "one rule" callout ---- */ .creed{max-width:46rem; margin:2rem auto; padding:1.1rem 1.4rem; text-align:center; border:1px solid var(--border); border-left:3px solid var(--accent-2); border-right:3px solid var(--accent-2); background:linear-gradient(180deg,var(--surface),var(--surface-2)); border-radius:4px} .creed b{color:var(--heading-accent)} /* ---- home: section groups + cards ---- */ .group{max-width:72rem; margin:2.6rem auto 0; padding:0 1.25rem} .group > h2{font-size:1.05rem; text-transform:uppercase; letter-spacing:.18em; color:var(--text-dim); border:0; border-left:3px solid var(--heading-accent); padding:.1em 0 .1em .7em; margin:0 0 1rem} .cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem} .card{display:block; border:1px solid var(--border-soft); background:linear-gradient(180deg,var(--surface),var(--surface-2)); border-radius:6px; padding:1.1rem 1.2rem; color:var(--text); border-top:2px solid var(--accent-2); transition:transform .12s ease, border-color .12s ease} .card:hover{transform:translateY(-3px); border-color:var(--accent); border-top-color:var(--accent)} .card .t{font-family:var(--font-head); font-size:1.1rem; color:var(--text)} .card .d{color:var(--text-dim); font-size:.92rem; margin-top:.3rem; line-height:1.5} .card .tag{font-family:var(--font-ui); font-size:.65rem; text-transform:uppercase; letter-spacing:.14em; color:color-mix(in srgb, var(--heading-accent) 72%, var(--text-muted))} /* ---- prose tables (glossary / bestiary / dm-screen) ---- */ .prose table{width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.92rem} .prose th,.prose td{border:1px solid var(--border-soft); padding:.5rem .7rem; text-align:left; vertical-align:top} .prose thead th{background:color-mix(in srgb, var(--heading-accent) 12%, var(--surface)); color:var(--heading-accent); font-family:var(--font-ui); font-weight:500; text-transform:uppercase; letter-spacing:.05em; font-size:.78rem} .prose tbody tr:nth-child(even){background:color-mix(in srgb, var(--text) 4%, transparent)} .prose td code,.prose th code{white-space:nowrap} /* ---- prose blockquotes / code / lists ---- */ .prose blockquote{margin:1.1em 0; padding:.6em 1em; border-left:3px solid var(--heading-accent); background:color-mix(in srgb, var(--heading-accent) 7%, var(--surface)); color:var(--text-dim); border-radius:0 4px 4px 0} .prose blockquote strong{color:var(--heading-accent)} .prose code{font-family:var(--font-mono); font-size:.86em; background:var(--code-bg); border:1px solid var(--code-border); border-radius:3px; padding:.08em .35em; color:var(--code-text)} .prose pre{background:var(--code-bg); border:1px solid var(--code-border); border-radius:5px; padding:1rem; overflow:auto} .prose pre code{background:none; border:0; padding:0; color:var(--text)} .prose ul,.prose ol{padding-left:1.4em} .prose li{margin:.25em 0} .prose li::marker{color:color-mix(in srgb, var(--heading-accent) 72%, var(--text-muted))} .prose img{max-width:100%} /* page intro line under H1 on inner pages */ .page-kicker{font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.2em; color:var(--accent-2); font-size:.72rem; margin:0 0 -.4em} /* ---- footer ---- */ .site-foot{border-top:1px solid var(--border); margin-top:3rem; padding:2rem 1.25rem; text-align:center; color:var(--text-muted)} .site-foot .aq{width:34px; height:34px; color:var(--border); opacity:.9} .site-foot .creed-line{font-family:var(--font-head); letter-spacing:.06em; color:var(--text-dim); margin:.4rem 0 .2rem} /* prev/next */ .pager{display:flex; justify-content:space-between; gap:1rem; margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid var(--border)} .pager a{font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; border:0} .pager .nx{margin-left:auto; text-align:right} /* ---- responsive ---- */ @media (max-width:640px){ .site-head .bar{gap:.4rem} /* brand + theme picker on row 1; nav scrolls full-width on row 2 */ nav.top{order:3; width:100%; margin-left:0; justify-content:flex-start; overflow-x:auto} .theme-picker{order:2; margin-left:auto} .theme-btn .caret{display:none} .prose table{display:block; overflow-x:auto; white-space:nowrap} .hero{padding-top:3rem} }