/* Dispatcher.aero "Telemetry" theme layer. The core semantic tokens live in ds/tokens.css (:root = light, [data-theme="dark"] = dark). This adds the redesign-only --wx-* tokens for BOTH themes, the blueprint grid, the logo mark, the theme toggle, and the shared focus ring. data-theme is set on server-side from the da_theme cookie. */ :root, [data-theme="light"] { color-scheme: light; --wx-grid: rgba(10,22,40,0.05); --wx-shadowc: rgba(10,22,40,0.16); --wx-risk: #C13438; --wx-warn: #9A5E00; --wx-ok: #177347; --site-desk: #DCE2EB; } [data-theme="dark"] { color-scheme: dark; --wx-grid: rgba(143,160,181,0.07); --wx-shadowc: rgba(0,0,0,0.5); --wx-risk: #ff8a8d; --wx-warn: #FFB13A; --wx-ok: #4ac585; --site-desk: #0a1320; } /* Blueprint grid: faint 48px square grid over the page background. */ .blueprint { background-color: var(--color-bg); background-image: linear-gradient(var(--wx-grid) 1px, transparent 1px), linear-gradient(90deg, var(--wx-grid) 1px, transparent 1px); background-size: 48px 48px; } /* Flight-path logo mark + wordmark. */ .da-logo { display: inline-flex; align-items: center; gap: 9px; } .da-mark { height: 26px; width: auto; flex: none; } .da-logo-mark .da-mark { height: 30px; } .lg-blue-s { stroke: var(--color-primary); } .lg-blue-f { fill: var(--color-primary); } .da-wordmark { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-md); letter-spacing: 0.02em; color: var(--color-text); } .da-tld { color: var(--color-accent); } a.da-logo:hover { text-decoration: none; } /* Theme toggle (sun in dark, moon in light). */ .theme-toggle { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: color .2s var(--ease-out, ease), border-color .2s; } .theme-toggle:hover { color: var(--color-text); border-color: var(--color-primary); } .theme-toggle svg { width: 17px; height: 17px; flex: none; display: block; } .theme-toggle .ico-sun { display: none; } .theme-toggle .ico-moon { display: block; } [data-theme="dark"] .theme-toggle .ico-sun { display: block; } [data-theme="dark"] .theme-toggle .ico-moon { display: none; } /* Shared 3px blue focus ring on interactive elements. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(11,114,255,0.32); } /* Cookie notice banner (shared across landing, auth, and app shells). */ .cookie-consent { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 720px; display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); color: var(--color-text); } .cookie-text { flex: 1; min-width: 240px; } .cookie-title { font: var(--weight-medium) var(--text-sm)/1 var(--font-display); margin-bottom: 6px; } .cookie-text p { font: 400 12.5px/1.55 var(--font-sans); color: var(--color-text-muted); margin: 0; } .cookie-text a { color: var(--color-primary); } .cookie-actions { display: flex; gap: 10px; flex: none; } .cc-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid transparent; white-space: nowrap; } .cc-btn-primary { background: var(--ift-blue); color: #fff; } .cc-btn-primary:hover { background: #0961D8; } .cc-btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); } .cc-btn-ghost:hover { border-color: var(--color-primary); } /* Minimal app footer (holds the cookie-settings affordance in the gated app). */ .app-foot { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: var(--space-6) var(--gutter) var(--space-10); color: var(--color-text-faint); font: 400 var(--text-xs)/1.4 var(--font-mono); } .app-foot a { color: var(--color-text-muted); } .app-foot a:hover { color: var(--color-text); text-decoration: none; } .app-foot-sep { opacity: 0.6; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }