/* ===================================================================== PHOENIX — STYLES (modern dark theme) --------------------------------------------------------------------- EVERY color is a CSS variable in :root. Re-theme by editing them only. Override live from JS: document.documentElement.style.setProperty('--accent','#0af') Fonts (Rajdhani + Inter) are linked in each page ; system fonts fall back. ===================================================================== */ :root { /* ---- Surfaces (deep, warm-black) ---- */ --bg: #07060a; /* page background */ --bg-2: #0c0a10; /* alt band */ --bg-elev: #0f0d13; /* header */ --bg-card: #14111b; /* cards (cool-ash with warm tint) */ --bg-card-2: #1b1622; /* card hover */ --glass: rgba(16, 13, 20, 0.94); /* ---- Text ---- */ --text: #f1edf5; --text-muted: #a39bb0; --text-dim: #6c6478; /* ---- Phoenix fire accents ---- */ --accent: #ff6a1f; /* primary orange */ --accent-2: #ffc23d; /* gold */ --accent-3: #ff2e4d; /* ember red/pink */ --accent-soft: rgba(255, 106, 31, 0.14); --accent-line: rgba(255, 106, 31, 0.3); /* ---- Lines / glow ---- */ --border: #241d2e; --border-2: #34293f; --glow: 0 0 40px rgba(255, 106, 31, 0.3); /* ---- Status ---- */ --ok: #4ee08a; --warn: #ffc23d; /* ---- Layout tokens ---- */ --maxw: 1140px; --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --pad-page: clamp(18px, 4vw, 44px); --shadow: 0 24px 60px rgba(0, 0, 0, 0.6); --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --font-display: "Rajdhani", "Segoe UI", system-ui, sans-serif; /* ---- COD in-game color codes ^0..^9 ---- */ --cod-0: #2b2b2b; --cod-1: #ff4444; --cod-2: #7cfc55; --cod-3: #ffe400; --cod-4: #5b6bff; --cod-5: #45e6e6; --cod-6: #ff5bd0; --cod-7: #ffffff; --cod-8: #ff8a1f; --cod-9: #8a8a8a; } @media (max-width: 768px) { .hide-mobile { display: none; } } /* ===================================================================== LIGHT THEME (toggled via , saved to storage) Only surface/text colors flip — the fire accents stay the same. ===================================================================== */ :root[data-theme="light"] { --bg: #f3eee7; --bg-2: #e9e2d8; --bg-elev: #fbf8f3; --bg-card: #ffffff; --bg-card-2: #fbf5ec; --glass: rgba(251, 248, 243, 0.95); --text: #1b1620; --text-muted: #5a5360; --text-dim: #8b8390; --border: #e6ded2; --border-2: #d6cabb; /* The gold accent washes out on the cream page, so darken it. This covers ALL gold text at once: hero meta, stat numbers, countdown, donation amount, .text-accent, etc. (restored bright on dark surfaces below). */ --accent-2: #c2560a; /* COD codes that are too light to read on a light page get darkened. They're restored to their bright originals inside dark surfaces below. */ --cod-2: #3f9d2a; --cod-3: #b98900; --cod-5: #149a9a; --cod-7: #1b1620; } /* Surfaces that stay dark in BOTH themes keep bright text, gold + game-true COD colors */ :root[data-theme="light"] .topbar, :root[data-theme="light"] .marquee, :root[data-theme="light"] .codebox { --text: #f1edf5; --text-muted: #c7c0d0; --text-dim: #9b94a3; --accent-2: #ffc23d; --cod-2: #7cfc55; --cod-3: #ffe400; --cod-5: #45e6e6; --cod-7: #ffffff; } /* fire-text is a gradient (not a single var), so darken it explicitly for light mode */ :root[data-theme="light"] .fire-text { background-image: linear-gradient(100deg, #d81030, #d4530a 55%, #b07408); } /* smooth the flip on the main surfaces */ body, .site-header, .card, .panel, .band, .submenu, .codebox, .countdown__unit { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* ====================== Base ====================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.65; -webkit-font-smoothing: antialiased; /* NOTE: do NOT add overflow-x:hidden/clip here — it makes a scroll container and breaks the sticky header. The marquee clips itself, so no horizontal overflow leaks out anyway. */ min-height: 100vh; } /* layered ambient glow + fine grain texture */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(900px 520px at 78% -8%, rgba(255, 46, 77, 0.16), transparent 60%), radial-gradient(1000px 600px at 12% 4%, rgba(255, 106, 31, 0.14), transparent 60%), radial-gradient(800px 800px at 50% 120%, rgba(255, 194, 61, 0.07), transparent 60%); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color: var(--accent-2); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--accent); } img { max-width: 100%; display: block; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-page); } section { padding-block: clamp(48px, 8vw, 96px); position: relative; } /* ====================== Typography ====================== */ h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: 0.5px; } h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); text-transform: uppercase; } h2 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); text-transform: uppercase; margin-bottom: 0.5em; } h3 { font-size: 1.25rem; } .eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 4px; font-size: 0.82rem; color: var(--accent); margin-bottom: 0.6em; } .lead { color: var(--text-muted); font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 62ch; } .muted { color: var(--text-muted); } .center { text-align: center; } .center .lead { margin-inline: auto; } .fire-text { background: linear-gradient(100deg, var(--accent-3), var(--accent) 55%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); } .section-head.center { margin-inline: auto; } /* ====================== Top status bar ====================== */ .topbar { background: #050409; border-bottom: 1px solid var(--border); font-size: 0.82rem; } .topbar__row { display: flex; align-items: center; gap: 18px; min-height: 38px; flex-wrap: wrap; } .topbar__status { display: inline-flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; } .topbar__ip { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); } .topbar__ip code { color: var(--accent-2); font-family: ui-monospace, monospace; } .topbar__copy { background: none; border: 1px solid var(--border-2); color: var(--text-muted); border-radius: 6px; padding: 2px 8px; font-size: 0.74rem; cursor: pointer; transition: 0.15s; } .topbar__copy:hover { border-color: var(--accent-line); color: var(--accent); } .topbar__spacer { flex: 1; } .topbar__battle { color: var(--text-muted); } .topbar__battle strong { color: var(--accent-2); } .theme-toggle { background: none; border: 1px solid var(--border-2); border-radius: 999px; width: 34px; height: 34px; line-height: 1; padding: 0; cursor: pointer; font-size: 1.05rem; color: var(--text); display: grid; place-items: center; transition: border-color 0.15s, transform 0.15s, background 0.15s; } .theme-toggle svg { display: block; } .theme-toggle:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: scale(1.08); } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (max-width: 680px) { .topbar__battle { display: none; } } /* ====================== Header / Nav ====================== */ /* The header is injected into