@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; :root { /* Direction B palette */ --gd-bg: #0a0a0c; --gd-bg-2: #111114; --gd-panel: #15151a; --gd-panel-2: #1c1c22; --gd-border: rgba(255, 255, 255, 0.08); --gd-border-2: rgba(255, 255, 255, 0.14); --gd-text: #f5f5f7; --gd-text-2: #a8a8b0; --gd-text-3: #6c6c75; --gd-red: #e31937; --gd-red-soft: rgba(227, 25, 55, 0.14); --gd-red-line: rgba(227, 25, 55, 0.32); --gd-green: #4ade80; --gd-amber: #fbbf24; --gd-blue: #60a5fa; --gd-purple: #c084fc; /* Legacy aliases (still referenced in a few places) */ --tesla-red: var(--gd-red); --bg: var(--gd-bg); --bg-elevated: var(--gd-bg-2); --bg-card: var(--gd-panel); --border: var(--gd-border); } html, body, #root { margin: 0; padding: 0; height: 100%; background: var(--gd-bg); color: var(--gd-text); font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; } .mono { font-family: 'Geist Mono', ui-monospace, monospace; } .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); } .leaflet-container { background: #0a0f1a !important; font-family: inherit; } /* Override Leaflet popup styling to match Direction B */ .leaflet-popup-content-wrapper { background: rgba(20, 20, 24, 0.95); color: var(--gd-text); border: 1px solid var(--gd-border-2); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .leaflet-popup-tip { background: rgba(20, 20, 24, 0.95); } .leaflet-popup-content { margin: 10px 12px; font-size: 12px; line-height: 1.5; } /* ─── In-car browser overrides ───────────────────────────────────────────── * Triggered when is set by client/src/lib/incar.ts. * Goals: bigger fonts, larger tap targets, no expensive blurs (MCU1/MCU2 * fall off a cliff with backdrop-filter), no accidental hover-only states. * Scoped to .incar so it never affects desktop builds. */ html.incar { font-size: 17px; /* baseline bump — most leaf text uses px values so this primarily affects rem-based things */ } html.incar body { /* Slightly thicker base text colour for readability at arm's length */ color: var(--gd-text); } /* Kill backdrop-filter entirely — it murders frame rate on MCU2 */ html.incar *, html.incar *::before, html.incar *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Bump every interactive control to 44px minimum tap target. */ html.incar button, html.incar [role="button"], html.incar input[type="date"], html.incar input[type="text"], html.incar input[type="number"] { min-height: 44px; font-size: 15px; } /* Scale tiny utility text up — Tailwind ships these as fixed px values so * we override them globally inside .incar. */ html.incar .text-\[10px\], html.incar .text-\[10\.5px\], html.incar .text-\[11px\] { font-size: 13px !important; } html.incar .text-\[11\.5px\], html.incar .text-\[12px\] { font-size: 14px !important; } html.incar .text-\[12\.5px\], html.incar .text-\[13px\], html.incar .text-\[13\.5px\] { font-size: 15px !important; } html.incar .text-\[14px\] { font-size: 16px !important; } html.incar .text-\[15px\] { font-size: 17px !important; } html.incar .text-\[16px\] { font-size: 18px !important; } html.incar .text-\[18px\] { font-size: 20px !important; } html.incar .text-\[20px\] { font-size: 22px !important; } /* Native date input is a tiny target on touch — fatten it. */ html.incar input[type="date"] { padding: 12px 14px; font-size: 16px; } /* Bigger scrollbars — finger-friendly */ html.incar ::-webkit-scrollbar { width: 12px; height: 12px; } /* Hover states cause flicker on touch — disable on the incar build. */ html.incar .hover\:bg-white\/\[0\.04\]:hover, html.incar .hover\:bg-white\/\[0\.03\]:hover, html.incar .hover\:bg-white\/\[0\.025\]:hover, html.incar .hover\:bg-white\/\[0\.02\]:hover { background: transparent !important; }