/* ========================================================================== EarnTrump — Design Tokens · ARCADE Light + Dark via [data-theme] on . No framework, no CDN. ========================================================================== */ /* -------------------------------------------------------------------------- DIRECTION: arcade / play. A visitor decides in about two seconds, so the page has to read as a game rather than a utility. That means one hot accent with real luminance, a violet-to-cyan energy ramp for anything that rewards the player, and deep ink surfaces that let the accents actually glow. Every token is defined on bare :root; the dark blocks override the same names and never introduce new ones. Swapping the six BRAND lines below re-skins the entire site — that is the intended way to change direction. -------------------------------------------------------------------------- */ :root { /* Brand — arcade violet. --accent doubles as text/icon colour, so it is the deeper shade (#6D28D9, 6.6:1 on white); --accent-bright is the fill. */ --accent: #6D28D9; --accent-bright: #7C3AED; --accent-2: #A855F7; --accent-soft: rgba(124, 58, 237, 0.10); --accent-line: rgba(124, 58, 237, 0.30); --accent-grad: linear-gradient(135deg, #A855F7 0%, #7C3AED 50%, #4F46E5 100%); --on-accent: #FFFFFF; /* Play accents. --xp is the reward colour (levels, streaks, XP fills); --hot is reserved for the claim action itself so nothing competes. */ --xp: #0891B2; --xp-soft: rgba(8, 145, 178, 0.12); --hot: #DB2777; --hot-soft: rgba(219, 39, 119, 0.12); --hot-grad: linear-gradient(135deg, #F472B6 0%, #DB2777 55%, #9D174D 100%); /* Semantic */ --success: #0E9F6E; --success-soft: rgba(14, 159, 110, 0.12); --danger: #DC2626; --danger-soft: rgba(220, 38, 38, 0.12); --warn: #B45309; --warn-soft: rgba(180, 83, 9, 0.12); --info: #475569; --info-soft: rgba(71, 85, 105, 0.12); /* Surfaces — LIGHT: cool violet-tinted neutrals so the accent sits in a family rather than on top of plain grey. */ --bg: #F7F6FD; --bg-2: #EFEDFA; --surface: #FFFFFF; --surface-2: #FAF9FE; --surface-3: #F1EEFB; --border: #E4E0F2; --border-strong: #C9C2E4; /* Type */ --text: #16121F; --text-2: #4A4360; --muted: #6B6383; --faint: #9A93B0; /* Elevation. --shadow-accent is the glow under a live action. */ --shadow-sm: 0 1px 2px rgba(22, 18, 31, .05); --shadow: 0 4px 14px rgba(22, 18, 31, .07); --shadow-lg: 0 16px 40px -14px rgba(22, 18, 31, .20); --shadow-accent: 0 12px 30px -8px rgba(124, 58, 237, .50); --shadow-hot: 0 12px 30px -8px rgba(219, 39, 119, .50); /* Geometry — chunkier than a dashboard; arcade UI is soft and tactile. */ --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --container: 1180px; --nav-h: 68px; /* Display face carries the arcade voice; body stays highly legible. */ --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-dis: 'Outfit', var(--font); --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.22, 1, .36, 1); /* Overshoot for anything that should feel springy on press. */ --ease-pop: cubic-bezier(.34, 1.56, .64, 1); color-scheme: light; } /* -------------------------------------------------------------------------- DARK — deep violet ink. This is the theme the design is drawn for: neon needs a dark ground to read as neon. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --bg: #0A0714; --bg-2: #0F0B1D; --surface: #16112A; --surface-2: #1D1738; --surface-3: #262046; --border: #2E2653; --border-strong: #443A73; --text: #F5F3FF; --text-2: #CFC8EA; --muted: #9990BC; --faint: #6B6390; /* Accents lighten on ink so they clear 4.5:1 against --surface. */ --accent: #C4A6FF; --accent-bright: #A855F7; --accent-2: #C084FC; --accent-soft: rgba(168, 85, 247, 0.16); --accent-line: rgba(168, 85, 247, 0.34); --accent-grad: linear-gradient(135deg, #C084FC 0%, #A855F7 50%, #6366F1 100%); --on-accent: #12081F; --xp: #22D3EE; --xp-soft: rgba(34, 211, 238, 0.16); --hot: #F472B6; --hot-soft: rgba(244, 114, 182, 0.16); --hot-grad: linear-gradient(135deg, #F9A8D4 0%, #EC4899 55%, #BE185D 100%); --success: #34D399; --success-soft: rgba(52, 211, 153, 0.16); --danger: #F87171; --danger-soft: rgba(248, 113, 113, 0.16); --warn: #FBBF24; --warn-soft: rgba(251, 191, 36, 0.16); --info: #A5A0C0; --info-soft: rgba(165, 160, 192, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .55); --shadow: 0 4px 18px rgba(0, 0, 0, .6); --shadow-lg: 0 18px 44px -14px rgba(0, 0, 0, .8); --shadow-accent: 0 14px 36px -8px rgba(168, 85, 247, .55); --shadow-hot: 0 14px 36px -8px rgba(236, 72, 153, .50); color-scheme: dark; } /* Follow the OS until the user picks a side. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0A0714; --bg-2: #0F0B1D; --surface: #16112A; --surface-2: #1D1738; --surface-3: #262046; --border: #2E2653; --border-strong: #443A73; --text: #F5F3FF; --text-2: #CFC8EA; --muted: #9990BC; --faint: #6B6390; --accent: #C4A6FF; --accent-bright: #A855F7; --accent-2: #C084FC; --accent-soft: rgba(168, 85, 247, 0.16); --accent-line: rgba(168, 85, 247, 0.34); --accent-grad: linear-gradient(135deg, #C084FC 0%, #A855F7 50%, #6366F1 100%); --on-accent: #12081F; --xp: #22D3EE; --xp-soft: rgba(34, 211, 238, 0.16); --hot: #F472B6; --hot-soft: rgba(244, 114, 182, 0.16); --hot-grad: linear-gradient(135deg, #F9A8D4 0%, #EC4899 55%, #BE185D 100%); --success: #34D399; --success-soft: rgba(52, 211, 153, 0.16); --danger: #F87171; --danger-soft: rgba(248, 113, 113, 0.16); --warn: #FBBF24; --warn-soft: rgba(251, 191, 36, 0.16); --info: #A5A0C0; --info-soft: rgba(165, 160, 192, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .55); --shadow: 0 4px 18px rgba(0, 0, 0, .6); --shadow-lg: 0 18px 44px -14px rgba(0, 0, 0, .8); --shadow-accent: 0 14px 36px -8px rgba(168, 85, 247, .55); --shadow-hot: 0 14px 36px -8px rgba(236, 72, 153, .50); color-scheme: dark; } } /* Accents printed on the always-dark hero cards, which keep a near-black ground in both themes. Defined once: the value never changes. */ :root { --accent-on-dark: #C4A6FF; } /* -------------------------------------------------------------------------- RESET / BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color .35s var(--ease), color .35s var(--ease); } h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-dis); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } ::selection { background: var(--accent-bright); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Scrollbars */ .scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .scroll-y::-webkit-scrollbar { width: 6px; } .scroll-y::-webkit-scrollbar-track { background: transparent; } .scroll-y::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); } .scroll-y::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* Layout helpers */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 18px; } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .gap-sm { gap: 8px; } .gap { gap: 14px; } .gap-lg { gap: 24px; } .grow { flex: 1 1 auto; min-width: 0; } .center { text-align: center; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hide { display: none !important; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }