/* ============================================================ THE DROP — Design System (static export) The exact tokens, type, and motion from the approved prototype. Dark-first; light via [data-theme="light"]; system via media query. Set data-theme on (or ). Default = dark. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Space+Mono:wght@400;700&display=swap'); /* ---- DARK (default) ------------------------------------------------ */ :root { /* surfaces */ --page: #050507; --bg: #0B0C0E; --edge: #15171B; --surface: #181A20; --surfaceBorder: #262931; --seg: #1E2127; --segBorder: #2A2D35; --hairline: #16181C; --line3: #24262C; /* text */ --text: #F4F5F7; --text2: #C8CDD5; --text3: #7E848F; --meta: #6B7280; --meta2: #5A616B; --tickHead: #E4E7EC; /* accent (ritual orange) */ --accent: #FF6A2B; --accent-hover: #E85A1E; --onAccent: #0B0C0E; --avatarText: #0B0C0E; --accentTint: rgba(255,106,43,.12); --accentBorder: rgba(255,106,43,.32); --accentSeg: rgba(255,106,43,.30); --undInk: #FF6A2B; /* nav (glass) */ --navBg: rgba(22,24,28,.55); --navBorder: rgba(255,255,255,.12); --navHi: rgba(255,255,255,.14); --navIdle: #5A616B; --navFade0: rgba(11,12,14,0); --navFade1: rgba(11,12,14,.35); --navFade2: rgba(11,12,14,.72); /* pills */ --pillBg: rgba(255,255,255,.05); --pillBorder: rgba(255,255,255,.13); --pillHi: rgba(255,255,255,.1); /* category colors (keys are stable; labels are dynamic) */ --cWorld: #6FA8FF; /* world */ --cNation: #4BE3A7; /* nation / India */ --cSport: #F4C04E; /* sports */ --cPeople: #FF8FA0; /* people */ --cTech: #B79BFF; /* science_tech */ --cWorldBg: rgba(111,168,255,.14); --cNationBg: rgba(52,211,153,.13); --cSportBg: rgba(244,183,64,.14); --cPeopleBg: rgba(255,143,160,.14); --cTechBg: rgba(167,139,250,.14); /* breaking / red */ --red: #FF3B30; --redText: #FF6A6A; --redMeta: #8A6B6B; --tickBorder: rgba(255,59,48,.52); /* Two Takes A/B (vibrant — Electric Blue / Hot Coral) */ --ttA: #4D9BFF; --ttA-tint: rgba(77,155,255,.15); --ttA-border: rgba(77,155,255,.42); --ttB: #FF5C82; --ttB-tint: rgba(255,92,130,.15); --ttB-border: rgba(255,92,130,.42); /* fonts */ --font: 'Archivo', system-ui, -apple-system, sans-serif; --font-heading: 'Archivo', system-ui, -apple-system, sans-serif; --font-body: 'Newsreader', Georgia, serif; --font-mono: 'Space Mono', ui-monospace, monospace; /* radii + spacing */ --radius-card: 22px; --radius-pill: 999px; --radius-btn: 12px; --gutter: 22px; --phone-max: 440px; } /* ---- LIGHT --------------------------------------------------------- */ [data-theme="light"] { --page: #EDECE8; --bg: #FBFAF8; --edge: #E6E4DF; --surface: #FFFFFF; --surfaceBorder: #E6E4DF; --seg: #EFEDE9; --segBorder: #E0DDD7; --hairline: #E6E4DF; --line3: rgba(0,0,0,.10); --text: #16181C; --text2: #3A3E45; --text3: #6E727A; --meta: #9AA0A8; --meta2: #9AA0A8; --tickHead: #2A2C30; --accent: #FF6A2B; --accent-hover: #E85A1E; --onAccent: #FFFFFF; --avatarText: #FFFFFF; --accentTint: rgba(255,106,43,.12); --accentBorder: rgba(255,106,43,.34); --accentSeg: rgba(255,106,43,.32); --undInk: #E0561F; --navBg: rgba(255,255,255,.62); --navBorder: rgba(0,0,0,.07); --navHi: rgba(255,255,255,.7); --navIdle: #8A8F98; --navFade0: rgba(251,250,248,0); --navFade1: rgba(251,250,248,.55); --navFade2: rgba(251,250,248,.85); --pillBg: rgba(0,0,0,.04); --pillBorder: rgba(0,0,0,.09); --pillHi: rgba(255,255,255,.5); --cWorld: #2E6FE0; --cNation: #0E9D63; --cSport: #B5840C; --cPeople: #D94B66; --cTech: #6D4FD0; --cWorldBg: rgba(46,111,224,.12); --cNationBg: rgba(14,157,99,.12); --cSportBg: rgba(181,132,12,.12); --cPeopleBg: rgba(217,75,102,.12); --red: #E0241B; --redText: #E0241B; --redMeta: #A06A66; --tickBorder: rgba(224,36,27,.66); --ttA: #1F6FEB; --ttA-tint: rgba(31,111,235,.12); --ttA-border: rgba(31,111,235,.40); --ttB: #FF3B6B; --ttB-tint: rgba(255,59,107,.12); --ttB-border: rgba(255,59,107,.40); } /* ---- SYSTEM: follow OS when data-theme="system" -------------------- */ @media (prefers-color-scheme: light) { [data-theme="system"] { --page: #EDECE8; --bg: #FBFAF8; --edge: #E6E4DF; --surface: #FFFFFF; --surfaceBorder: #E6E4DF; --seg: #EFEDE9; --segBorder: #E0DDD7; --hairline: #E6E4DF; --line3: rgba(0,0,0,.10); --text: #16181C; --text2: #3A3E45; --text3: #6E727A; --meta: #9AA0A8; --meta2: #9AA0A8; --tickHead: #2A2C30; --onAccent: #FFFFFF; --avatarText: #FFFFFF; --undInk: #E0561F; --navBg: rgba(255,255,255,.62); --navBorder: rgba(0,0,0,.07); --navHi: rgba(255,255,255,.7); --navIdle: #8A8F98; --navFade0: rgba(251,250,248,0); --navFade1: rgba(251,250,248,.55); --navFade2: rgba(251,250,248,.85); --pillBg: rgba(0,0,0,.04); --pillBorder: rgba(0,0,0,.09); --cWorld: #2E6FE0; --cNation: #0E9D63; --cSport: #B5840C; --cPeople: #D94B66; --cTech: #6D4FD0; --red: #E0241B; --redText: #E0241B; --redMeta: #A06A66; --tickBorder: rgba(224,36,27,.66); --ttA: #1F6FEB; --ttA-tint: rgba(31,111,235,.12); --ttA-border: rgba(31,111,235,.40); --ttB: #FF3B6B; --ttB-tint: rgba(255,59,107,.12); --ttB-border: rgba(255,59,107,.40); } } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; background: var(--page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .25s ease; } body { font-family: var(--font); color: var(--text); } ::-webkit-scrollbar { width: 0; height: 0; } * { -ms-overflow-style: none; scrollbar-width: none; } a { color: inherit; text-decoration: none; } button { font-family: var(--font); } [hidden] { display: none !important; } /* ---- App shell: centered phone column ------------------------------ */ .app { width: 100%; max-width: var(--phone-max); min-height: 100vh; margin: 0 auto; position: relative; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--edge); border-right: 1px solid var(--edge); } /* Pages with a fixed bottom nav add this to clear it */ .app--has-nav { padding-bottom: 76px; } /* ---- Status bar (in-flow) ------------------------------------------ */ .statusbar { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 8px var(--gutter) 0; font-size: 14px; font-weight: 700; flex: 0 0 auto; position: sticky; top: 0; z-index: 90; background: var(--bg); } .statusbar--over { /* white overlay on a hero image */ position: absolute; left: 0; right: 0; top: 0; z-index: 3; color: #fff; background: none; } .statusbar__icons { display: inline-flex; gap: 7px; align-items: center; opacity: .9; } /* ---- Section header (shared) --------------------------------------- */ .section { padding: 12px var(--gutter) 0; flex: 0 0 auto; } .section__h2 { font-size: 25px; font-weight: 900; letter-spacing: -.02em; margin: 0; line-height: 1; } .section__h2 .accent { color: var(--accent); } .section__sub { font-size: 12.5px; color: var(--text3); margin-top: 6px; } /* ---- Keyframes ----------------------------------------------------- */ @keyframes dropPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } } @keyframes tickIn { 0% { opacity: 0; transform: translateY(7px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes sheetUp { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes pushIn { 0% { transform: translateX(70%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes pushOut { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(70%); opacity: 0; } } @keyframes goalPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } } @keyframes dropDown { 0% { transform: translate(-50%, -100%); } 100% { transform: translate(-50%, 0); } } @keyframes fadeBack { 0% { opacity: 0; transform: scale(1.015); } 100% { opacity: 1; transform: scale(1); } } @keyframes fadeBackOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.992); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }