@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: optional; src: url('../assets/fonts/anton-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: optional; src: url('../assets/fonts/montserrat-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+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215; } *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; /* is the actual root scrolling element in standards mode — overflow-x needs to live here too, not just on body, or scrollWidth/clientWidth can still mismatch even when nothing is visibly scrollable */ overflow-x: hidden; } body { margin: 0; /* positioned so the ambient glow divs (direct children) have a containing block that spans the full page; overflow-x:hidden is the safety net for any negative-offset decorative element (the glows) or sub-pixel rounding — doesn't affect vertical scrolling at all */ position: relative; overflow-x: hidden; background: var(--bg); font-family: var(--font-body); font-weight: 500; color: var(--text); -webkit-font-smoothing: antialiased; } a { color: var(--accent-cyan); text-decoration: none; } a:hover { color: #8ffcff; } /* Placeholder links (href="#") are inert — no cursor change, no hover glow, so they don't feel broken when clicked. They remain visible and on-brand. */ a[href="#"][aria-disabled="true"] { cursor: default; } a[href="#"][aria-disabled="true"]:hover, a[href="#"][aria-disabled="true"]:active { color: inherit; box-shadow: none; text-shadow: none; } ::selection { background: var(--accent-magenta); color: #fff; } img { max-width: 100%; height: auto; display: block; } /* :focus-visible only shows for keyboard/non-pointer focus, so mouse clicks stay clean — this is purely an on-brand upgrade over the (still present) UA default outline, not a replacement for it. */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 3px; box-shadow: 0 0 10px 2px rgba(0, 255, 255, .5); } .anton { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; } /* pure width-capping utility — applied alongside a component's own class (.site-nav, .stats, .lootraiders, .showcase, .winners, .mosaic, .roadmap, .newsletter, .footer__inner) to align it to the page's 1440px column. Deliberately NOT applied to .hero, which must stay full-bleed. */ .wrap { max-width: var(--max-width); margin: 0 auto; } /* Accessibility utilities */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -48px; left: var(--space-5); z-index: 1000; padding: var(--space-2) var(--space-4); background: var(--bg); color: var(--accent-cyan); border: 1px solid var(--accent-cyan); border-radius: var(--radius-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; transition: top .2s ease; } .skip-link:focus { top: var(--space-3); outline: none; box-shadow: 0 0 12px var(--accent-cyan); } /* Print styles */ @media print { .glow, .hero__video, .hero__mute-btn, .hero__scroll-cue, .showcase__video, .lootraiders__video, .mosaic__video, .final-cta__video, .footer__policies-toggle { display: none !important; } body { background: #fff !important; color: #000 !important; } a { color: #000 !important; text-decoration: underline !important; } .hero, .final-cta { min-height: auto !important; height: auto !important; } .hero__bg, .final-cta__video, .final-cta__scrim { display: none !important; } .hero__inner, .wrap { max-width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; } }