/* ========================================================= Comeketo BEO — Glass tokens (light + dark) Clean futuristic glassmorphism. Teal/cyan hero glow. Theme is selected via (set by prefs.js). ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); :root, html[data-theme="light"] { /* ===== Surfaces (cool pearl) ===== */ --paper: #EAEEF3; --paper-2: #E1E6EC; --card: #FFFFFF; --card-2: #F3F6FA; --well: #E8ECF1; --well-2: #DCE2E9; --ink: #0F141B; --ink-2: #1B2230; /* ===== Glass ===== */ --glass-bg: rgba(255,255,255,0.55); --glass-bg-2: rgba(255,255,255,0.40); --glass-strong: rgba(255,255,255,0.74); --glass-border: rgba(255,255,255,0.70); --glass-edge: rgba(15,23,42,0.08); --glass-blur: 14px; --glow: 0 0 0 1px var(--cy-edge), 0 8px 30px rgba(14,161,146,0.12); --scrim: rgba(15,20,30,0.45); --on-cy: #04231F; /* text on a solid teal fill */ --slider-thumb: #FFFFFF; /* page backdrop the frosted glass blurs over */ --bg-grad: radial-gradient(1200px 620px at 14% -12%, rgba(14,161,146,0.10), transparent 60%), radial-gradient(980px 540px at 112% 8%, rgba(63,90,142,0.08), transparent 55%), linear-gradient(180deg, #EEF2F7, #E5EAF1); /* ===== Hairlines ===== */ --rule: rgba(15,23,42,0.11); --rule-2: rgba(15,23,42,0.17); --hair-1: rgba(15,23,42,0.05); --hair-2: rgba(15,23,42,0.09); --hair-3: rgba(15,23,42,0.16); /* ===== Text ===== */ --fg: #0F141B; --fg-dim: #44505F; --fg-mute: #69757F; --fg-faint: #95A0AC; /* ===== Teal / cyan accent (hero glow) ===== */ --cy: #0EA192; --cy-bright: #34E3D0; --cy-shade: #0A7E72; --cy-bg: rgba(14,161,146,0.08); --cy-bg-2: rgba(14,161,146,0.16); --cy-edge: rgba(14,161,146,0.30); --cy-halo: rgba(52,227,208,0.34); /* ===== 8 tones ===== */ --mint-bg: #DDEDD8; --mint-ink: #2E5A2A; --mint-dot: #4D7A47; --peach-bg: #F8DEC3; --peach-ink: #7A4A1F; --peach-dot: #B0712E; --lav-bg: #DCD3EE; --lav-ink: #4B3B7A; --lav-dot: #6F5BB0; --sky-bg: #CDD9EC; --sky-ink: #2A3F66; --sky-dot: #3F5A8E; --lemon-bg: #F0E6B5; --lemon-ink: #6B5A1A; --lemon-dot: #8E7724; --rose-bg: #F4CFCF; --rose-ink: #7A2E2E; --rose-dot: #A33F3F; --sage-bg: #DCDFC8; --sage-ink: #4A4F2A; --sage-dot: #6B7240; --blush-bg: #F2D6DA; --blush-ink: #813044; --blush-dot: #B14861; /* ===== Semantic ===== */ --ok: #4D7A47; --warn: #8E7724; --danger: #A33F3F; --attn: #B0712E; --link: #3F5A8E; --ai: #6F5BB0; /* ===== Status chips ===== */ --st-ready-bg: #DDEDD8; --st-ready-ink: #2E5A2A; --st-ready-dot: #4D7A47; --st-pending-bg: #F0E6B5; --st-pending-ink: #6B5A1A; --st-pending-dot: #8E7724; --st-locked-bg: #E2E6EC; --st-locked-ink: #44505F; --st-locked-dot: #69757F; --st-exp-bg: #DCD3EE; --st-exp-ink: #4B3B7A; --st-exp-dot: #6F5BB0; --st-needs-bg: #F8DEC3; --st-needs-ink: #7A4A1F; --st-needs-dot: #B0712E; --st-blocked-bg: #F4CFCF; --st-blocked-ink: #7A2E2E; --st-blocked-dot: #A33F3F; --st-live-bg: rgba(14,161,146,0.12); --st-live-ink: #0A7E72; --st-live-dot: #0EA192; /* ===== Shadows (cool) ===== */ --shadow-sm: 0 1px 2px rgba(15,23,42,0.05), 0 0 0 1px rgba(15,23,42,0.04); --shadow-md: 0 4px 16px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04); --shadow-lg: 0 18px 48px rgba(15,23,42,0.14), 0 0 0 1px rgba(15,23,42,0.05); } /* ===================== DARK ===================== */ html[data-theme="dark"] { --paper: #0B0E13; --paper-2: #0F141B; --card: #141A22; --card-2: #182029; --well: #11161E; --well-2: #0C1118; --ink: #05070A; --ink-2: #0D1219; --glass-bg: rgba(150,172,205,0.07); --glass-bg-2: rgba(150,172,205,0.045); --glass-strong: rgba(150,172,205,0.11); --glass-border: rgba(255,255,255,0.10); --glass-edge: rgba(255,255,255,0.07); --glass-blur: 16px; --glow: 0 0 0 1px var(--cy-edge), 0 10px 40px rgba(45,212,191,0.12); --scrim: rgba(2,4,8,0.62); --on-cy: #04231F; --slider-thumb: #E7ECF3; --bg-grad: radial-gradient(1100px 620px at 12% -10%, rgba(45,212,191,0.12), transparent 60%), radial-gradient(960px 560px at 112% 6%, rgba(99,120,200,0.12), transparent 55%), linear-gradient(180deg, #0B0E13, #080B10); --rule: rgba(255,255,255,0.10); --rule-2: rgba(255,255,255,0.16); --hair-1: rgba(255,255,255,0.05); --hair-2: rgba(255,255,255,0.09); --hair-3: rgba(255,255,255,0.15); --fg: #E7ECF3; --fg-dim: #AAB4C2; --fg-mute: #7C8696; --fg-faint: #58626F; --cy: #2DD4BF; --cy-bright: #5EEAD4; --cy-shade: #5EEAD4; --cy-bg: rgba(45,212,191,0.12); --cy-bg-2: rgba(45,212,191,0.20); --cy-edge: rgba(45,212,191,0.38); --cy-halo: rgba(94,234,212,0.30); --mint-bg: rgba(77,122,71,0.22); --mint-ink: #A7D9A1; --mint-dot: #6FBF67; --peach-bg: rgba(176,113,46,0.22); --peach-ink: #E6B27E; --peach-dot: #D49A52; --lav-bg: rgba(111,91,176,0.24); --lav-ink: #C3B6F0; --lav-dot: #9B86E6; --sky-bg: rgba(63,90,142,0.28); --sky-ink: #A9C2E8; --sky-dot: #6F92C8; --lemon-bg: rgba(142,119,36,0.22); --lemon-ink: #E6D27E; --lemon-dot: #CDB24C; --rose-bg: rgba(163,63,63,0.24); --rose-ink: #ECA6A6; --rose-dot: #D98080; --sage-bg: rgba(107,114,64,0.22); --sage-ink: #C7CB9E; --sage-dot: #9AA36A; --blush-bg: rgba(177,72,97,0.24); --blush-ink: #ECA6B6; --blush-dot: #D98098; --ok: #6FBF67; --warn: #CDB24C; --danger: #ECA6A6; --attn: #E6B27E; --link: #A9C2E8; --ai: #C3B6F0; --st-ready-bg: rgba(77,122,71,0.22); --st-ready-ink: #A7D9A1; --st-ready-dot: #6FBF67; --st-pending-bg: rgba(142,119,36,0.22); --st-pending-ink: #E6D27E; --st-pending-dot: #CDB24C; --st-locked-bg: rgba(255,255,255,0.07);--st-locked-ink: #AAB4C2; --st-locked-dot: #7C8696; --st-exp-bg: rgba(111,91,176,0.24); --st-exp-ink: #C3B6F0; --st-exp-dot: #9B86E6; --st-needs-bg: rgba(176,113,46,0.22); --st-needs-ink: #E6B27E; --st-needs-dot: #D49A52; --st-blocked-bg: rgba(163,63,63,0.24); --st-blocked-ink: #ECA6A6; --st-blocked-dot: #D98080; --st-live-bg: rgba(45,212,191,0.16); --st-live-ink: #5EEAD4; --st-live-dot: #2DD4BF; --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.04); --shadow-md: 0 6px 22px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05); --shadow-lg: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); } :root { /* ===== Type (clean futuristic — sans everywhere; serif retired) ===== */ --serif: "Geist", "Inter", system-ui, -apple-system, sans-serif; --sans: "Geist", "Inter", system-ui, -apple-system, sans-serif; --mono: "Geist Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace; --t-xs: 11px; --t-sm: 12.5px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 26px; --t-3xl: 36px; --t-4xl: 52px; --t-5xl: 72px; --tight: -0.025em; --normal: -0.005em; --wide: 0.12em; --ultra: 0.18em; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px; --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-card: 14px; --r-pill: 999px; --on-ink: #FFFFFF; /* text on a solid dark (--ink) fill — light in both themes */ } /* ===== Base ===== */ html, body { margin: 0; padding: 0; min-height: 100%; background: var(--paper); background-image: var(--bg-grad); background-attachment: fixed; color: var(--fg); font-family: var(--sans); font-size: var(--t-md); line-height: 1.5; letter-spacing: var(--normal); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01","ss02","cv11"; } * { box-sizing: border-box; } /* ===== Type helpers (now sans; tighter for a crisp display look) ===== */ .t-eyebrow { font-family: var(--sans); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ultra); text-transform: uppercase; color: var(--fg-mute); } .t-eyebrow b { color: var(--fg); font-weight: 500; } .t-num { font-family: var(--mono); font-size: var(--t-xs); color: var(--fg-faint); letter-spacing: 0.04em; } .t-display { font-family: var(--sans); font-weight: 600; font-size: var(--t-4xl); letter-spacing: var(--tight); line-height: 1.02; color: var(--fg); } .t-display .em { color: var(--cy-shade); font-style: normal; } .t-title-1 { font-family: var(--sans); font-weight: 600; font-size: var(--t-3xl); letter-spacing: var(--tight); line-height: 1.08; } .t-title-2 { font-family: var(--sans); font-weight: 600; font-size: var(--t-xl); letter-spacing: -0.015em; line-height: 1.2; } .t-title-3 { font-family: var(--sans); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.01em; line-height: 1.25; } .t-body { font-size: var(--t-md); color: var(--fg-dim); line-height: 1.55; } .t-body-sm { font-size: var(--t-sm); color: var(--fg-dim); line-height: 1.55; } .t-caption { font-size: var(--t-xs); color: var(--fg-mute); } .t-mono { font-family: var(--mono); font-size: var(--t-sm); color: var(--fg-mute); letter-spacing: 0.02em; } .t-mono-xs { font-family: var(--mono); font-size: 10.5px; color: var(--fg-mute); letter-spacing: 0.04em; } .t-stat { font-family: var(--sans); font-weight: 600; font-size: var(--t-3xl); letter-spacing: var(--tight); line-height: 1; color: var(--fg); } .t-stat-sm { font-family: var(--sans); font-weight: 600; font-size: var(--t-xl); letter-spacing: var(--tight); line-height: 1; color: var(--fg); } .t-stat .em { color: var(--cy-shade); font-style: normal; } /* utility */ .row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; } .col { display: flex; flex-direction: column; gap: var(--s-3); } .spread { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); } .grow { flex: 1 1 auto; min-width: 0; } .muted { color: var(--fg-mute); } .faint { color: var(--fg-faint); } /* scrollbars */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--cy-edge); background-clip: padding-box; }