/* * Full-page portal theme. data-bs-theme lives on (server-rendered from * portalTheme, kept in sync by portal-theme.js), so every page follows the * global theme. .portal-page-themed remains as a per-
sync point for * Bootstrap variables and legacy selectors. * * Canvas: purple-biased near-black (dark) / lavender-tinted paper (light). * The dark canvas carries an aurora wash — decorative and cheap (two * background layers, no extra elements). */ html[data-bs-theme="dark"] body { background-color: #0f0c19; background-image: radial-gradient(ellipse 90rem 42rem at 85% -10%, var(--portal-aurora-violet), transparent 60%), radial-gradient(ellipse 60rem 30rem at -10% 100%, var(--portal-aurora-teal), transparent 55%); background-size: 100% 100%, 100% 100%; background-attachment: fixed; color: #e6e3ef; } html[data-bs-theme="light"] body { background-color: #f5f4f8; color: #1d1a2b; } /* Touch devices and reduced-motion users: fixed background-attachment is * janky/ignored on mobile Safari and can shimmer on low-end tablets (the pit * iPads). Let the canvas scroll with the page there — the aurora still * renders, it just isn't pinned. */ @media (pointer: coarse), (prefers-reduced-motion: reduce) { html[data-bs-theme="dark"] body { background-attachment: scroll; } } body:has(.portal-page-themed[data-bs-theme="dark"]) { background-color: #0f0c19; color: #e6e3ef; } body:has(.portal-page-themed[data-bs-theme="light"]) { background-color: #f5f4f8; color: #1d1a2b; } /* Bootstrap data-bs-theme sets --bs-body-bg to #fff on themed
; match page canvas. * Surfaces must stay opaque-dark over the aurora, so bg is the canvas color. */ .portal-page-themed[data-bs-theme="dark"] { --bs-body-bg: #0f0c19; --bs-body-color: #e6e3ef; } .portal-page-themed[data-bs-theme="light"] { --bs-body-bg: #f5f4f8; --bs-body-color: #1d1a2b; } body:has(.portal-page-themed) .padding-top { display: none; } /* ── Legacy opt-out ─────────────────────────────────────────────────── * .portal-legacy-page freezes a page in the pre-redesign look: light * Bootstrap (pinned via data-bs-theme="light" on the
), the old * light canvas, no aurora, and Bootstrap's stock radii. Used by the * judges interface + prime time — live-event critical tools that get a * dedicated redesign later. The shared chrome (sidebar/topbar/footer) * still follows the global theme. */ body:has(main.portal-legacy-page) { background-color: #f4f4f4; background-image: none; color: #212529; } .portal-legacy-page { --bs-border-radius: 0.375rem; --bs-border-radius-sm: 0.25rem; --bs-border-radius-lg: 0.5rem; --bs-border-radius-xl: 1rem; --bs-border-radius-xxl: 2rem; color-scheme: light; }