/* ========================================================================== EarnTrump — Design Tokens Light + Dark theme via [data-theme] on . No framework, no CDN. ========================================================================== */ /* -------------------------------------------------------------------------- BRAND: official $TRUMP coin — black, gold, white. The gold is sampled from the coin artwork (#D3B259 average). Light and dark run the same gold family; only its lightness shifts so it stays legible as text on white and luminous on black. -------------------------------------------------------------------------- */ :root { /* Brand — gold. --accent is used for text and icons as well as fills, so on the light theme it is the deeper end of the gold range (4.4:1 on white). --accent-bright is the metallic tone used for fills and gradients. #9E7818 is the compromise that serves both roles: 4.1:1 as text on white, and 4.6:1 for --on-accent ink sitting on it as a fill. Bright metallic gold still reaches the eye through --accent-grad on buttons. */ --accent: #9E7818; --accent-bright: #D4AF37; --accent-2: #8A6A12; --accent-soft: rgba(212, 175, 55, 0.14); --accent-line: rgba(158, 120, 24, 0.30); --accent-grad: linear-gradient(135deg, #F0D485 0%, #D4AF37 48%, #A8801B 100%); /* Gold fills are bright, so their label is near-black — white on gold reads at 1.9:1 and fails. White type lives on the black surfaces, as on the coin. */ --on-accent: #17120A; /* Semantic. Info is graphite rather than blue so nothing competes with gold. */ --success: #16843F; --success-soft: rgba(22, 132, 63, 0.13); --danger: #C22727; --danger-soft: rgba(194, 39, 39, 0.13); --info: #5C6068; --info-soft: rgba(92, 96, 104, 0.13); /* Surfaces — LIGHT: warm neutrals, so white reads as ivory next to gold. */ --bg: #FAF8F3; --bg-2: #F2EFE6; --surface: #FFFFFF; --surface-2: #FBFAF5; --surface-3: #F4F1E8; --border: #E8E3D6; --border-strong: #D5CFBD; /* Type */ --text: #14120C; --text-2: #4C4739; --muted: #7D7768; --faint: #AEA898; /* Elevation */ --shadow-sm: 0 1px 2px rgba(30, 26, 12, .06); --shadow: 0 4px 16px rgba(30, 26, 12, .08); --shadow-lg: 0 14px 40px -12px rgba(30, 26, 12, .18); --shadow-accent: 0 12px 28px -10px rgba(158, 120, 24, .45); /* Geometry */ --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px; --container: 1180px; --nav-h: 68px; --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.22, 1, .36, 1); color-scheme: light; } /* -------------------------------------------------------------------------- DARK — true black, matching the coin face. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --bg: #000000; --bg-2: #050505; --surface: #0D0D0D; --surface-2: #141414; --surface-3: #1C1C1C; --border: #262626; --border-strong: #383838; --text: #FFFFFF; --text-2: #C8C4BA; --muted: #8E8A80; --faint: #5E5B54; /* Gold gains lightness on black so it glows rather than muddies. */ --accent: #E3C05C; --accent-bright: #E3C05C; --accent-2: #C9A227; --accent-soft: rgba(227, 192, 92, 0.14); --accent-line: rgba(227, 192, 92, 0.32); --accent-grad: linear-gradient(135deg, #F5E1A3 0%, #E3C05C 48%, #C9A227 100%); --on-accent: #17120A; --success: #2FBF63; --success-soft: rgba(47, 191, 99, 0.16); --danger: #F05252; --danger-soft: rgba(240, 82, 82, 0.16); --info: #9AA0A6; --info-soft: rgba(154, 160, 166, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6); --shadow: 0 4px 18px rgba(0, 0, 0, .65); --shadow-lg: 0 18px 44px -14px rgba(0, 0, 0, .85); --shadow-accent: 0 12px 30px -10px rgba(227, 192, 92, .38); color-scheme: dark; } /* Follow the OS until the user picks a side (no data-theme attribute yet). */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #000000; --bg-2: #050505; --surface: #0D0D0D; --surface-2: #141414; --surface-3: #1C1C1C; --border: #262626; --border-strong: #383838; --text: #FFFFFF; --text-2: #C8C4BA; --muted: #8E8A80; --faint: #5E5B54; --accent: #E3C05C; --accent-bright: #E3C05C; --accent-2: #C9A227; --accent-soft: rgba(227, 192, 92, 0.14); --accent-line: rgba(227, 192, 92, 0.32); --accent-grad: linear-gradient(135deg, #F5E1A3 0%, #E3C05C 48%, #C9A227 100%); --success: #2FBF63; --success-soft: rgba(47, 191, 99, 0.16); --danger: #F05252; --danger-soft: rgba(240, 82, 82, 0.16); --info: #9AA0A6; --info-soft: rgba(154, 160, 166, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6); --shadow: 0 4px 18px rgba(0, 0, 0, .65); --shadow-lg: 0 18px 44px -14px rgba(0, 0, 0, .85); --shadow-accent: 0 12px 30px -10px rgba(227, 192, 92, .38); color-scheme: dark; } } /* -------------------------------------------------------------------------- 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-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } 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); color: var(--on-accent); } :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; } }