/* ═══════════════════════════════════════════════════ Rewardtactix — Theme System Include this FIRST in every page. Apply data-theme="dark" | "light" on . ═══════════════════════════════════════════════════ */ /* ── Dark (default) ─────────────────────────────── */ :root, :root[data-theme="dark"] { --bg: #0B0B0B; --surface: #111111; --surface-2: #171717; --border: rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.14); --gold: #C8A84C; --gold-dim: rgba(200,168,76,0.18); --gold-glow: rgba(200,168,76,0.35); --white: #FFFFFF; --text: rgba(255,255,255,0.88); --text-rgb: 255,255,255; --muted: rgba(255,255,255,0.42); --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'DM Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --radius: 12px; --transition: 200ms ease; /* Nav */ --nav-bg: rgba(11,11,11,0.80); --nav-border: rgba(255,255,255,0.06); --brand-reward: #FFFFFF; /* Hero overlay */ --hero-overlay: linear-gradient( to right, rgba(11,11,11,0.82) 0%, rgba(11,11,11,0.52) 55%, rgba(11,11,11,0.22) 100% ), linear-gradient( to bottom, rgba(11,11,11,0.28) 0%, transparent 40%, rgba(11,11,11,0.60) 100% ); /* Theme toggle */ --toggle-bg: rgba(255,255,255,0.08); --toggle-knob: #C8A84C; --toggle-icon: '☀'; /* Input / chip backgrounds */ --input-bg: rgba(255,255,255,0.04); --input-bg-hover: rgba(255,255,255,0.07); --slider-track: rgba(255,255,255,0.10); --dot-idle: rgba(255,255,255,0.18); } /* ── Light ───────────────────────────────────────── */ :root[data-theme="light"] { --bg: #F4F1EB; --surface: #FFFFFF; --surface-2: #EDE9E1; --border: rgba(0,0,0,0.09); --border-strong:rgba(0,0,0,0.16); --gold: #A07820; --gold-dim: rgba(160,120,32,0.12); --gold-glow: rgba(160,120,32,0.28); --white: #0B0B0B; --text: rgba(0,0,0,0.85); --text-rgb: 0,0,0; --muted: rgba(0,0,0,0.42); /* Nav */ --nav-bg: rgba(244,241,235,0.88); --nav-border: rgba(0,0,0,0.07); --brand-reward: #0B0B0B; /* Hero overlay */ --hero-overlay: linear-gradient( to right, rgba(244,241,235,0.78) 0%, rgba(244,241,235,0.45) 55%, rgba(244,241,235,0.12) 100% ), linear-gradient( to bottom, rgba(244,241,235,0.22) 0%, transparent 40%, rgba(244,241,235,0.55) 100% ); /* Theme toggle */ --toggle-bg: rgba(0,0,0,0.08); --toggle-knob: #A07820; --toggle-icon: '☽'; /* Input / chip backgrounds */ --input-bg: rgba(0,0,0,0.05); --input-bg-hover: rgba(0,0,0,0.08); --slider-track: rgba(0,0,0,0.12); --dot-idle: rgba(0,0,0,0.18); /* Keep hero overlay DARK in light mode — video should stay cinematic */ --hero-overlay: linear-gradient( to right, rgba(11,11,11,0.80) 0%, rgba(11,11,11,0.50) 55%, rgba(11,11,11,0.20) 100% ), linear-gradient( to bottom, rgba(11,11,11,0.26) 0%, transparent 40%, rgba(11,11,11,0.58) 100% ); } /* ── Shared typography ───────────────────────────── */ html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background 300ms ease, color 300ms ease; } /* ── Top Nav ─────────────────────────────────────── */ .topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background 300ms ease, border-color 300ms ease; } /* Brand */ .topnav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } /* Right-side nav group (back link + toggle) */ .topnav__right { display: flex; align-items: center; gap: 12px; } .topnav__back { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; color: var(--muted); text-decoration: none; letter-spacing: 0.02em; transition: color var(--transition); white-space: nowrap; } .topnav__back:hover { color: var(--gold); } .brand__mark { width: 30px; height: 30px; border-radius: 7px; background: var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1rem; font-weight: 700; color: #0B0B0B; flex-shrink: 0; letter-spacing: -0.02em; } .brand__name { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; } .brand__reward { color: var(--brand-reward); transition: color 300ms ease; } .brand__tactix { color: var(--gold); font-style: italic; } /* Theme toggle pill */ .theme-toggle { display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--toggle-bg); border: 1px solid var(--border); border-radius: 50px; cursor: pointer; transition: all var(--transition); color: var(--muted); font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; } .theme-toggle:hover { border-color: var(--gold); color: var(--gold); } .theme-toggle__icon { font-size: 0.9rem; line-height: 1; transition: transform 300ms ease; } /* Icon: dark mode shows sun (to switch to light), light mode shows moon */ :root[data-theme="dark"] .theme-toggle__icon::before { content: '☀'; } :root[data-theme="light"] .theme-toggle__icon::before { content: '☽'; } :root[data-theme="dark"] .theme-toggle__label::after { content: 'Light'; } :root[data-theme="light"] .theme-toggle__label::after { content: 'Dark'; } .rtx-feedback-root { position: fixed; top: 76px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); } .rtx-feedback { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .rtx-feedback--info { border-color: rgba(0, 229, 255, 0.28); } .rtx-feedback--success { border-color: rgba(34, 197, 94, 0.28); } .rtx-feedback--warning { border-color: rgba(200, 168, 76, 0.35); } .rtx-feedback--error { border-color: rgba(255, 77, 109, 0.35); } .rtx-feedback__body { display: grid; gap: 3px; } .rtx-feedback__label { font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); } .rtx-feedback__message { color: var(--text); font-size: 0.92rem; line-height: 1.45; } .rtx-feedback__close { border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; padding: 0; } .rtx-feedback__close:hover { color: var(--text); } @media (max-width: 720px) { .rtx-feedback-root { right: 12px; left: 12px; width: auto; } } @media (max-width: 480px) { .brand__name { font-size: 1rem; } .topnav { padding: 0 12px; } .theme-toggle__label { display: none; } .topnav__right { gap: 8px; } }