/* Force a known starting state — light by default unless user opts in. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Dark palette overrides — applied only when [data-theme="dark"] on . */ :root[data-theme="dark"] { --wp--preset--color--background: #15151A; --wp--preset--color--foreground: #F4F4F5; --wp--preset--color--surface: #1F1F23; --wp--preset--color--muted: #8A8F98; --wp--preset--color--silver: #6B7280; --wp--preset--color--silver-soft: #2E2E33; --wp--preset--color--silver-hero: #B0B5BD; --wp--preset--color--accent: #94A3B8; } :root[data-theme="dark"] body { background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--foreground); } /* Subtle Swiss-style dot grid behind everything. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background-image: radial-gradient(circle, var(--wp--preset--color--silver-soft) 1px, transparent 1.5px); background-size: 28px 28px; opacity: 0.45; pointer-events: none; } /* Large silver ring bleeding off the top-right corner. */ body::after { content: ""; position: fixed; top: -220px; right: -220px; width: 640px; height: 640px; border: 1px solid var(--wp--preset--color--silver-soft); border-radius: 50%; z-index: -1; opacity: 0.6; pointer-events: none; } :root[data-theme="dark"] body::before { opacity: 0.7; } :root[data-theme="dark"] body::after { opacity: 0.85; } /* CTF stats — concentric halo behind the hero number. */ .eb-ctf-hero { position: relative; } .eb-ctf-hero__halo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(80%, 460px); height: auto; z-index: 0; opacity: 0.55; pointer-events: none; } .eb-ctf-hero__inner { position: relative; z-index: 1; } :root[data-theme="dark"] .eb-ctf-hero__halo { opacity: 0.85; } /* Outline button — keep transparent on hover, shift text + border to accent. Overrides the global button hover from theme.json which would otherwise fill the background and crush contrast. */ .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-element-button:hover { background-color: transparent !important; color: var(--wp--preset--color--accent) !important; border-color: var(--wp--preset--color--accent) !important; } /* Theme toggle button — minimalist square with a hairline border. */ .eb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin: 0; border: 1px solid var(--wp--preset--color--silver); background: transparent; color: var(--wp--preset--color--foreground); cursor: pointer; border-radius: 0; transition: border-color 160ms ease, color 160ms ease; -webkit-appearance: none; appearance: none; font: inherit; line-height: 0; } .eb-theme-toggle:hover { border-color: var(--wp--preset--color--foreground); } .eb-theme-toggle:focus-visible { outline: 1px solid var(--wp--preset--color--accent); outline-offset: 2px; } .eb-theme-toggle svg { width: 16px; height: 16px; display: block; } .eb-theme-toggle .eb-theme-toggle__moon { display: block; } .eb-theme-toggle .eb-theme-toggle__sun { display: none; } :root[data-theme="dark"] .eb-theme-toggle .eb-theme-toggle__moon { display: none; } :root[data-theme="dark"] .eb-theme-toggle .eb-theme-toggle__sun { display: block; } /* Drop the corner ring on small screens — too dominant on phones. */ @media (max-width: 768px) { body::after { display: none; } body::before { background-size: 22px 22px; opacity: 0.35; } :root[data-theme="dark"] body::before { opacity: 0.55; } }