/* ───────────────────────────────────────────────────────────────────────── site-chrome.css — the ONE stylesheet every PGD page loads for shared chrome: self-hosted fonts + header/nav + footer. Installed by the F-1 sweep (pgd_test_harness/sweep-chrome.js); values match the WO-1 pages' inline styles so swept legacy pages render identically to new ones. Fonts are self-hosted (variable woff2, latin subset) so no page makes a request to fonts.googleapis.com / fonts.gstatic.com — privacy.html's third-party disclosure (the Cloudflare beacon only) stays true. Oswald: SIL OFL 1.1 · Roboto: Apache 2.0 — both permit self-hosting. ───────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap; src: url('fonts/oswald-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/roboto-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* NOTE on the url() paths above: this file sits at the web root, and CSS url()s resolve relative to the stylesheet, not the page — so 'fonts/…' is correct for every page at every depth, live AND under file:// / serve-local.py. Do not add '../'. (Same rule as game-common.css.) */ /* ── Header / nav ── */ .header { text-align: center; margin-bottom: 30px; } .site-title { margin: 0 0 10px; line-height: 0; } /* Compact-nav K♥ lockup (brand-properties §A4, K♥ ruling 2026-08-01): the card sits left of the pills on every non-hub page; the auto margin pushes the pills right. Below 560px the wordmark drops and the card stands alone (the ruling's "never nothing"). No shadow — the card is its own ground. W = 36px; type sizes are 0.707W / 0.58W so the block equals card height. */ .site-lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; } .site-lockup img { display: block; width: 36px; height: auto; } .site-lockup .words { line-height: 1; text-align: left; } .site-lockup .l1 { display: block; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 25.5px; letter-spacing: .04em; color: #fff; white-space: nowrap; } .site-lockup .l2 { display: flex; justify-content: space-between; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 20.9px; color: #fff; margin-top: 4.1px; } @media (max-width: 559px) { .site-lockup .words { display: none; } } .site-nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; } /* Compact variant: game pages — pills only, no logo block, tight to the top so rules content stays first on mobile (spec §7.3). */ .site-nav.compact { margin: 0 0 18px; } /* Pages whose nav sits directly on (learn/gear/tools/legal/marketing) have no containing element — without a cap the lockup's auto margin stretches the row across the whole viewport. Contain it like a header: 1040px matches the marketing .wrap; near enough everywhere else. */ body > .site-nav.compact { margin: 20px auto 0; width: 100%; max-width: 1040px; box-sizing: border-box; padding-left: 18px; padding-right: 18px; } /* Some tool shells lay out as a centered flex column, which zeroes auto margins on flex items — re-assert the lockup-left/pills-right split. */ body > .site-nav.compact .site-lockup { margin-right: auto; } .nav-btn { padding: 8px 20px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 20px; color: #fff; text-decoration: none; font-family: 'Oswald', sans-serif; font-size: 0.85rem; letter-spacing: 1.5px; text-transform: uppercase; transition: background 0.2s, border-color 0.2s; } .nav-btn:hover { background: rgba(255, 204, 0, 0.18); border-color: rgba(255, 204, 0, 0.85); color: #fff; } .nav-btn.active { background: rgba(255, 204, 0, 0.25); border-color: rgba(255, 204, 0, 0.85); color: #fff; } /* ── Footer (spec §8: legal links only, no family cross-links) ── */ footer.site-footer { margin-top: 50px; text-align: center; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); } .footer-links { display: flex; justify-content: center; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 14px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); } .footer-links a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.85rem; } .footer-links a:hover { color: #ffcc00; text-decoration: underline; } .footer-copy { margin: 0; font-size: 0.8rem; color: rgba(255,255,255,0.4); text-align: center; } /* Breadcrumbs — the one secondary nav layer, on every page below the hub. Literal colors (not site-common.css vars): game pages load only this file. */ .breadcrumbs { font-size: 0.82rem; color: rgba(233, 241, 236, 0.65); margin-bottom: 16px; } .breadcrumbs a { color: #e9f1ec; text-decoration: none; } .breadcrumbs a:hover { color: #ffcc00; text-decoration: underline; } .breadcrumbs span[aria-current] { color: rgba(233, 241, 236, 0.65); }