/* intro.css — first-visit scrollytelling overlay (see dashboard/intro/). * * The overlay is a fixed, full-viewport layer with its OWN scroll container * (.ax-intro-scroll); the document behind it never scrolls (the /tool page * is overflow:hidden anyway) and overscroll-behavior keeps wheel momentum * from chaining into the Leaflet map. * * Sizing rule: no vh units inside the story (scrollama's docs warn against * them). intro.js measures the overlay and publishes --ax-intro-h (px); * every height in here derives from that. Colors/fonts reuse the --ax-* * design tokens from components/styles.py. */ .ax-intro { display: none; position: fixed; /* Sit BELOW the sticky top nav so the app chrome stays visible/usable during the tour. intro.js measures the nav and publishes --ax-intro-top; 66px is the pre-JS fallback (matches the nav height). */ top: var(--ax-intro-top, 66px); left: 0; right: 0; bottom: 0; /* High z-index so the overlay sits above the tool's live Leaflet map (its panes/controls reach z-400..1000). The top nav stays visible not by z-order but by geometry: the overlay starts BELOW the nav (top:nav-height), so the two never overlap and the nav is fully usable during the tour. */ z-index: 9000; background: var(--ax-bg, #f6f7f9); } /* Shown either on first visit (pre-paint tag from the head script) or when replayed (class toggled by intro.js). Fades in over ~250 ms via a CSS animation (no JS needed on the critical path); intro.js drives the matching fade-out with `ax-intro--closing` before removing the display gate. */ html.ax-intro-due .ax-intro, .ax-intro.ax-intro--open { display: block; animation: ax-intro-fade-in .25s ease backwards; } @keyframes ax-intro-fade-in { from { opacity: 0; } } /* Dismiss feels like diving into the tool: the overlay lifts and scales up a touch as it fades, so the map behind reads as "zoomed into". */ .ax-intro.ax-intro--closing { opacity: 0; transform: scale(1.035); transform-origin: 42% 55%; transition: opacity .34s ease, transform .34s cubic-bezier(0.4,0,0.2,1); pointer-events: none; } .ax-intro-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; scroll-behavior: smooth; } .ax-intro-inner { display: flex; align-items: flex-start; max-width: 1500px; margin: 0 auto; padding: 0 32px; } /* ── Pinned graphic (left, ~63% on desktop) ────────────────────────── */ .ax-intro-graphic { position: sticky; top: 0; align-self: flex-start; flex: 0 0 62%; width: 62%; height: var(--ax-intro-h, 640px); display: flex; align-items: center; justify-content: center; } /* The fig div sits inside a NiceGUI ui.html wrapper — size the wrapper. */ .ax-intro-graphic > * { width: 100%; } .ax-intro-fig { width: 100%; height: calc(var(--ax-intro-h, 640px) * 0.9); } /* ── SVG graphic (built by intro_graphic.js) ───────────────────────── */ .ax-ig-svg { display: block; width: 100%; height: 100%; } .ax-ig-svg text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } /* Dots morph between states on transform/opacity ONLY; the 8 ms per-dot stagger is set inline by intro_graphic.js. CSS transitions retarget mid-flight, so scrolling back up plays the inverse state change. */ .ax-ig-dot { transition: transform .45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .45s ease; will-change: transform, opacity; } /* Axes / columns / annotations fade AND drift up a touch as they arrive, so entering a new state feels composed rather than a hard swap. */ .ax-ig-group { transition: opacity .42s ease, transform .55s cubic-bezier(0.22, 0.61, 0.36, 1); pointer-events: none; } /* The ECDF staircase draws itself in (stroke-dashoffset set by the JS). */ .ax-ig-ecdf-line { transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1) .12s; } /* City dots on the impact state are repositioned every frame by the zoom animator (S.zoomImpact), so they carry NO CSS transition — the smoothness is the rAF sweep. transform-only, GPU-hinted. */ .ax-ig-city { will-change: transform; } /* Real overlay-PNG crops: keep the per-pixel climate raster crisp (same rule the Leaflet map uses) and crossfade the member frames. */ .ax-ig-map { image-rendering: pixelated; image-rendering: crisp-edges; } .ax-ig-frame { transition: opacity .4s ease; } /* Toggled around programmatic resets (replay) so they apply instantly. */ .ax-ig-instant .ax-ig-dot, .ax-ig-instant .ax-ig-group, .ax-ig-instant .ax-ig-ecdf-line, .ax-ig-instant .ax-ig-city, .ax-ig-instant .ax-ig-frame { transition: none !important; } /* ── Scrolling steps (right) ───────────────────────────────────────── */ /* The steps markup is wrapped in a NiceGUI ui.html
, which is the actual flex child — let it take the remaining track and give the steps column its full width. */ .ax-intro-inner > *:last-child { flex: 1 1 0; min-width: 0; } .ax-intro-steps { width: 100%; padding-left: 30px; padding-right: 44px; /* keep cards clear of the progress dots */ box-sizing: border-box; } .ax-intro-lead { min-height: calc(var(--ax-intro-h, 640px) * 0.9); display: flex; flex-direction: column; justify-content: center; gap: 10px; } .ax-intro-lead h1 { font-family: var(--ax-serif, Georgia, serif); font-size: 40px; font-weight: 500; letter-spacing: -0.015em; color: var(--ax-ink, #0f172a); margin: 0; line-height: 1.1; } .ax-intro-lead p { font-size: 15.5px; line-height: 1.6; color: var(--ax-ink-2, #334155); margin: 4px 0 0; max-width: 32ch; } .ax-intro-scrollhint { margin-top: 22px; font-size: 12px; color: var(--ax-ink-4, #94a3b8); letter-spacing: 0.06em; text-transform: uppercase; } /* Title-card credit + metadata masthead under the lead hook. */ .ax-intro-credits { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--ax-border, #e4e7ec); } .ax-intro-credits-col { display: flex; flex-direction: column; gap: 3px; } .ax-intro-credits-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ax-ink-4, #94a3b8); } .ax-intro-credits-name { font-size: 14.5px; font-weight: 600; color: var(--ax-ink, #0f172a); } .ax-intro-credits-sub { font-size: 12.5px; color: var(--ax-ink-3, #64748b); } .ax-intro-credits-links { display: flex; flex-direction: column; gap: 3px; } .ax-intro-credits-links a { font-size: 13px; color: var(--ax-accent, #4f46e5); text-decoration: none; width: fit-content; border-bottom: 1px solid transparent; transition: border-color .12s ease; } .ax-intro-credits-links a:hover { border-bottom-color: var(--ax-accent, #4f46e5); } .ax-intro-step { min-height: calc(var(--ax-intro-h, 640px) * 0.85); display: flex; flex-direction: column; justify-content: center; } /* Clean editorial cards — no box, in the voice of the lead-in. Scrollytelling focus: the card under the graphic is fully opaque and settled; the others recede (dim + drift down) so text and graphic emphasise the same beat. intro.js toggles `is-active` on step-enter. */ .ax-intro-card { max-width: 33rem; padding: 4px 0; opacity: 0.28; transform: translateY(18px); transition: opacity .55s ease, transform .7s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .ax-intro-step.is-active .ax-intro-card { opacity: 1; transform: none; } /* Numbered eyebrow: "01 · A warming world" — reuses the .ax-eyebrow base. */ .ax-intro-eyebrow { margin-bottom: 16px; position: relative; padding-left: 42px; } /* A short accent rule before the eyebrow text — a subtle editorial tick. */ .ax-intro-eyebrow::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 30px; height: 2px; background: var(--ax-accent, #4f46e5); } /* Editorial headline per card — same serif treatment as the lead-in. */ .ax-intro-headline { font-family: var(--ax-serif, Georgia, serif); font-size: 2.05rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.018em; color: var(--ax-ink, #0f172a); margin: 0 0 16px; } .ax-intro-card p { font-size: 1.14rem; line-height: 1.66; color: var(--ax-ink-2, #334155); margin: 0; max-width: 30rem; } /* ── Finale: a full-width closing section (breaks the sticky split) ────── */ .ax-intro-finale { max-width: 780px; margin: 0 auto; padding: clamp(56px, 12vh, 128px) 24px calc(var(--ax-intro-h, 640px) * 0.3); text-align: center; } .ax-intro-finale .ax-eyebrow { justify-content: center; display: flex; } .ax-intro-finale-title { font-family: var(--ax-serif, Georgia, serif); font-size: clamp(2.3rem, 4.4vw, 3.2rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.022em; color: var(--ax-ink, #0f172a); margin: 14px 0 22px; } .ax-intro-finale-lead { font-size: 1.22rem; line-height: 1.68; color: var(--ax-ink-2, #334155); margin: 0 auto; max-width: 40rem; } .ax-intro-finale-lead strong { color: var(--ax-ink, #0f172a); font-weight: 600; } .ax-intro-finale-grid { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin: 46px auto 4px; text-align: left; } .ax-intro-finale-item { flex: 1 1 190px; max-width: 222px; border-top: 2px solid var(--ax-border-strong, #cbd2dc); padding-top: 15px; font-size: 0.92rem; line-height: 1.5; color: var(--ax-ink-3, #64748b); } .ax-intro-finale-item span { display: block; font-family: var(--ax-serif, Georgia, serif); font-size: 2.1rem; font-weight: 500; color: var(--ax-accent, #4f46e5); margin-bottom: 6px; font-feature-settings: "tnum"; } /* Framed, clickable tool preview — a browser-window mock wrapping the hero overlay PNG. The whole thing is one big button that dives into the tool. */ .ax-intro-preview { display: block; width: 100%; max-width: 620px; margin: 44px auto 0; padding: 0; border: none; background: none; cursor: pointer; font-family: inherit; } .ax-intro-preview-frame { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--ax-border-strong, #cbd2dc); box-shadow: 0 10px 30px rgba(15,23,42,0.14); background: var(--ax-surface, #ffffff); transition: transform .16s ease, box-shadow .16s ease; } .ax-intro-preview:hover .ax-intro-preview-frame { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(15,23,42,0.22); } .ax-intro-preview-bar { display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: var(--ax-surface-2, #f1f5f9); border-bottom: 1px solid var(--ax-border, #e4e7ec); } .ax-intro-preview-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ax-border-strong, #cbd2dc); } .ax-intro-preview-tab { margin-left: 10px; font-size: 11.5px; font-weight: 600; color: var(--ax-ink-3, #64748b); letter-spacing: 0.01em; } .ax-intro-preview-body { position: relative; display: block; height: 300px; background: linear-gradient(180deg, #eaf0f6 0%, #dde7f0 100%); } .ax-intro-preview-shot { position: absolute; inset: 0; background-size: cover; background-position: center 42%; image-rendering: pixelated; opacity: 0.96; } /* A hover call-to-action that fades up over the framed map. */ .ax-intro-preview-open { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(6px); display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 9px; background: var(--ax-accent, #4f46e5); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 6px 18px rgba(79,70,229,0.4); opacity: 0.94; transition: transform .16s ease, opacity .16s ease; } .ax-intro-preview-open span { transition: transform .18s ease; display: inline-block; } .ax-intro-preview:hover .ax-intro-preview-open { transform: translateX(-50%) translateY(0); opacity: 1; } .ax-intro-preview:hover .ax-intro-preview-open span { transform: translateX(4px); } .ax-intro-finale-cta { margin-top: 34px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; } .ax-intro-enter { border: none; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600; padding: 14px 26px; border-radius: 10px; box-shadow: 0 4px 14px rgba(79,70,229,0.32); transition: background-color .14s ease, transform .14s ease, box-shadow .14s ease; } .ax-intro-enter span { transition: transform .18s ease; display: inline-block; } .ax-intro-enter:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(79,70,229,0.38); } .ax-intro-enter:hover span { transform: translateX(4px); } .ax-intro-outro-hint { font-size: 12px; color: var(--ax-ink-4, #94a3b8); } /* ── Chrome: skip button + progress dots ───────────────────────────── */ .ax-intro-skip { position: absolute; top: 14px; right: 22px; z-index: 3; margin-left: 0; background: var(--ax-surface, #ffffff); cursor: pointer; font-family: inherit; } .ax-intro-dots { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; gap: 9px; } .ax-intro-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ax-border-strong, #cbd2dc); background: var(--ax-surface, #ffffff); cursor: pointer; transition: background-color .12s ease, border-color .12s ease; } .ax-intro-dot.ax-active { background: var(--ax-accent, #4f46e5); border-color: var(--ax-accent, #4f46e5); } /* ── Toolbar replay button (lives on /tool, styled with the tabs) ───── */ .ax-intro-replay { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 8px 14px; background: var(--ax-surface, #ffffff); border: 1px solid var(--ax-border, #e4e7ec); border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ax-ink-2, #334155); cursor: pointer; line-height: 1; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s; } .ax-intro-replay:hover { border-color: var(--ax-border-strong, #cbd2dc); color: var(--ax-ink, #0f172a); } /* ── Narrow screens: stack graphic above steps (kept simple) ────────── */ @media (max-width: 900px) { .ax-intro-inner { flex-direction: column; padding: 0 16px; } .ax-intro-graphic { flex: 0 0 auto; width: 100%; height: calc(var(--ax-intro-h, 640px) * 0.46); background: var(--ax-bg, #f6f7f9); z-index: 1; } .ax-intro-fig { height: calc(var(--ax-intro-h, 640px) * 0.42); } .ax-intro-steps { width: 100%; padding-left: 0; } .ax-intro-step { min-height: calc(var(--ax-intro-h, 640px) * 0.7); } .ax-intro-dots { display: none; } } /* ── Reduced motion: bypass every animation — states jump to their end positions instantly, no stagger (intro_graphic.js also zeroes the per-dot delays), no overlay fade, no smooth scrolling. ─────────────── */ @media (prefers-reduced-motion: reduce) { .ax-intro-scroll { scroll-behavior: auto; } .ax-intro-dot, .ax-ig-dot, .ax-ig-group, .ax-ig-ecdf-line, .ax-ig-city, .ax-ig-frame, .ax-intro.ax-intro--closing { transition: none !important; } .ax-intro.ax-intro--closing { transform: none !important; } /* Every card stays fully legible — no dim, no lift, no animation. */ .ax-intro-card { transition: none !important; opacity: 1 !important; transform: none !important; } html.ax-intro-due .ax-intro, .ax-intro.ax-intro--open { animation: none !important; } }