/* SMSPilot — design tokens Fintech precision (Ledger structure) × travel warmth (Daybreak palette + serif). Cream removed; page wash is now a pure cool gray. Neutrals shifted slightly cool to match. Import from any HTML: */ @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,500&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { /* ---- color · neutrals (cool-gray page, white surfaces, soft ink) ---- */ --paper: #FFFFFF; /* surfaces / cards */ --ink: #17181A; /* primary text, primary buttons */ --ink-2: #45474B; /* secondary text */ --ink-3: #7A7D82; /* tertiary / placeholder */ --ink-4: #B0B3B8; /* disabled */ --line: #DCE0E3; /* primary divider */ --line-2: #ECEEF0; /* low-contrast divider */ --tint: #E6E9EC; /* hover wash */ /* ---- color · brand triad ---- */ --sage: #6F8E7C; /* primary accent · navigation, links, KPIs */ --sage-2: #8AA999; /* hover */ --sage-tint:#E8EFEA; /* selected nav, soft fills */ --sage-ink: #41584C; /* on-tint text */ --sunrise: #DD6A40; /* CTA · grounded terracotta-orange — used sparingly */ --sunrise-2:#C85A33; /* hover */ --sunrise-tint:#FBE7DA; /* soft fills, badges */ --sunrise-ink:#7A2E13; /* on-tint text */ --sky: #2E6CFF; /* informational · chart 2, links secondary */ --sky-2: #1A56E8; /* hover */ --sky-tint: #E1ECFF; /* info fills */ --sky-ink: #103A99; /* ---- color · semantic ---- */ --success: #4F8A65; --success-tint:#E2EEE6; --warn: #C58A1C; --warn-tint: #FBEFD0; --danger: #C9483D; --danger-tint:#F8E2DE; /* ---- aliases · semantic surfaces ---- */ --bg: #F4F5F6; /* page wash · cool gray */ --surface: var(--paper); --surface-2: #EBEDEF; /* elevated chrome — tables, search pills, code */ --border: var(--line); --border-soft: var(--line-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --primary: var(--sage); --accent: var(--sunrise); --info: var(--sky); /* ---- type ---- */ --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif; --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; --font-num: "Public Sans", system-ui, sans-serif; /* type scale */ --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 24px; --t-3xl: 32px; --t-4xl: 44px; --t-display: 56px; /* ---- spacing (4px base) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* ---- radius ---- */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* ---- elevation · soft ---- */ --shadow-xs: 0 1px 0 rgba(23,24,26,0.04); --shadow-sm: 0 1px 2px rgba(23,24,26,0.06), 0 0 0 1px rgba(23,24,26,0.02); --shadow-md: 0 8px 24px -8px rgba(23,24,26,0.10), 0 2px 6px rgba(23,24,26,0.04); --shadow-lg: 0 24px 60px -20px rgba(23,24,26,0.18), 0 6px 16px rgba(23,24,26,0.06); --shadow-pop: 0 24px 60px -28px rgba(221,106,64,0.22), 0 6px 16px rgba(23,24,26,0.06); /* ---- focus ring ---- */ --ring: 0 0 0 3px rgba(111,142,124,0.28); --ring-cta: 0 0 0 3px rgba(221,106,64,0.26); /* ---- motion ---- */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --d-fast: 120ms; --d-base: 200ms; --d-slow: 320ms; } /* ============== element resets / base ============== */ html, body { background: var(--bg); color: var(--fg); } body { font-family: var(--font-sans); font-size: var(--t-base); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; } .t-display { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-display); letter-spacing: -0.025em; line-height: 1.05; } .t-hero { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-4xl); letter-spacing: -0.02em; line-height: 1.08; } h1, .t-h1 { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-3xl); letter-spacing: -0.02em; line-height: 1.1; margin: 0; } h2, .t-h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-2xl); letter-spacing: -0.015em; line-height: 1.2; margin: 0; } h3, .t-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.005em; line-height: 1.3; margin: 0; } .t-price { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .t-price .sym { font-weight: 500; color: var(--ink-3); margin-right: 1px; } .t-time { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .t-accent { font-family: var(--font-serif); font-weight: 500; font-style: italic; } .t-eyebrow { font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); } .t-meta { font-family: var(--font-sans); font-size: var(--t-sm); color: var(--fg-3); } .t-num { font-family: var(--font-num); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .t-mono { font-family: var(--font-mono); font-feature-settings: "ss01"; } a { color: var(--sage-ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--sage-ink) 30%, transparent); transition: color var(--d-fast) var(--ease); } a:hover { color: var(--ink); border-bottom-color: var(--ink); } .balance { text-wrap: balance; } .pretty { text-wrap: pretty; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Ticker must scroll regardless of reduced-motion / Energy Saver — it conveys live data */ @media (prefers-reduced-motion: reduce) { .ticker__items { animation-name: ticker-scroll !important; animation-duration: 60s !important; animation-iteration-count: infinite !important; animation-timing-function: linear !important; animation-play-state: running !important; } /* Hold the live-dot steady — the 0.01ms reset above turns it into a strobe */ .ticker__lbl::before { animation: none !important; opacity: 1 !important; } }