/* ============================================================ ALTIMETER INTRO: component styles Colors are overwritten at runtime from CONFIG.colors in js/altimeter-intro.js; these are the matching defaults. ============================================================ */ :root { --ai-bg: #1c1c1e; --ai-text: #f2f2f3; --ai-muted: #7d7d84; --ai-red: #ff4b4b; } /* first paint before JS: black page (set by the snippet) */ html.intro-black, html.intro-black body { background: #000; } /* dial: fixed size, never moves, so nothing shifts around it */ #dial { width: min(92vw, 460px); max-width: 100%; aspect-ratio: 1; margin: 18px auto 8px; } #dial svg { width: 100%; height: 100%; display: block; overflow: visible; } #dial .dotc { transform-box: fill-box; transform-origin: center; } #dial .needle { transform-box: view-box; transform-origin: 160px 160px; } #dial .seg { transition: opacity .25s ease-out; } /* text reveal: hidden only while has .pre, CSS transitions bring it in */ .ch { transition: opacity .18s linear, color .26s linear; } .fade { transition: opacity .38s cubic-bezier(.2,.8,.3,1), transform .38s cubic-bezier(.2,.8,.3,1); } .pre .ch { opacity: 0; color: var(--ai-muted); } .pre .fade { opacity: 0; transform: translateY(6px); } .pre #headline:not(.is-split) { opacity: 0; } /* raw text before JS splits it */ .reset .ch, .reset .fade { transition: none !important; }