/* Indori Zameen · Explore (/explore/) — the page's own stylesheet. Written 24–25 Sep 2026 as a standalone page, moved into the site 25 Sep 2026. The header and footer are the site's own (public/site-header.css and site-header.js, mounted by scripts/build-explore.mjs's page), so nothing here styles them except where the tour needs the header held over the story. Class names the site's stylesheet also uses (.xp-rail, .xp-pin, .xp-q, .xp-belt, .xp-kicker) carry an xp- prefix here, so the site's rules never reach the tour. */ :root { --z-blue: #1F5F8B; --z-blue-600: #17475F; --z-blue-lift: #72B2DA; --z-navy: #173B4D; --z-navy-700: #102B39; --z-night: #0B1219; /* the live site's words: navy ink, blue emphasis, umber for Hindi (live release 3.01) */ --z-earth: #7A5C36; --z-earth-lift: #DDBA8A; --z-ink: #173B4D; --z-mute: #5F6E77; --z-line: #E1E8EC; --z-tile: #F5F7F8; --z-wash: #EEF4F7; --sans: 'Manrope', 'Mukta', system-ui, -apple-system, 'Segoe UI', sans-serif; --hindi: 'Mukta', 'Manrope', system-ui, sans-serif; --page: #FFFFFF; --surface: #FFFFFF; --surface-glass: rgba(255, 255, 255, .95); --fg: var(--z-ink); --fg-mute: var(--z-mute); --edge: var(--z-line); --accent: var(--z-blue); --warm: var(--z-earth); --halo: 0 1px 14px rgba(255, 255, 255, .95), 0 0 34px rgba(255, 255, 255, .8); --shadow-box: 0 12px 34px rgba(20, 30, 50, .08); --xp-header-h: 78px; } html[data-theme="dark"] { --page: #0B1219; --surface: #121B24; --surface-glass: rgba(18, 27, 36, .93); --fg: #EEF1F4; --fg-mute: #9AA6B5; --edge: rgba(255, 255, 255, .12); --accent: var(--z-blue-lift); --warm: var(--z-earth-lift); --halo: 0 2px 18px rgba(5, 10, 15, .85), 0 0 40px rgba(5, 10, 15, .6); --shadow-box: 0 14px 34px rgba(0, 0, 0, .35); } @media (max-width: 1050px) { :root { --xp-header-h: 70px; } } @media (max-width: 720px) { :root { --xp-header-h: 66px; } } * { box-sizing: border-box; } html { background: var(--page); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); color: var(--fg); background: var(--page); font-feature-settings: 'lnum'; -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background .5s, color .5s; } /* THE WINDOW SCROLLS HERE. The site's sheet sets html, body { height: 100% } for the map's fixed shell, which makes the scrolling box; the tour (Lenis, the pinned sections, the sticky stage) scrolls the window. Released on this page only, by the class scripts/build-explore.mjs puts on its . `clip`, never `hidden`, on the body: hidden would make the body a scroll container again and unstick the stage. */ html.iz-explore-root, html.iz-explore-root body { height: auto; } /* The header floats over the story, as the tour was composed: the site's header box (#iz-public-header, sticky with a reserved min-height so a colony page does not jump while the header mounts) takes no room here. */ html.iz-explore-root #iz-public-header { position: fixed; top: 0; left: 0; right: 0; min-height: 0; } main p, main h1, main h2, main h3, main ol { margin: 0; padding: 0; } main a { color: inherit; text-decoration: none; } main svg:not([class]) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* the site's header, held at the top over the story. Its frosted blur is dropped here: blur over a canvas that repaints every frame is what flickered. At 97 % it reads the same. */ .iz-product .iz-site-header { position: fixed; top: 0; left: 0; right: 0; backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--canvas, #fff) 97%, transparent); } /* ---------- loader ---------- */ .loader { position: fixed; inset: 0; z-index: 3000; background: var(--page); color: var(--fg); display: grid; place-content: center; justify-items: center; gap: 8px; transition: opacity .7s ease, visibility .7s; } .loader p { margin: 0; } .loader.done { opacity: 0; visibility: hidden; } .loader-mark { width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 1px solid var(--z-line); display: grid; place-items: center; box-shadow: var(--shadow-box); margin-bottom: 10px; } .loader-mark img { width: 34px; } .loader-hi { font-family: var(--hindi); font-weight: 700; font-size: 22px; } .loader-en { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .loader-bar { width: 160px; height: 3px; background: var(--edge); border-radius: 99px; overflow: hidden; margin-top: 12px; } .loader-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; } /* ---------- cursor ---------- */ .cursor, .tip { display: none; } @media (hover: hover) and (pointer: fine) { .story, .story a, .story button { cursor: none; } .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 1300; pointer-events: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid var(--z-navy); transition: width .2s, height .2s, margin .2s, border-color .2s, background .2s, opacity .2s; } .cursor.off { opacity: 0; } .cursor i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--z-blue); } html[data-theme="dark"] .cursor { border-color: rgba(238, 241, 244, .8); } html[data-theme="dark"] .cursor i { background: var(--z-earth-lift); } .cursor.press { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: var(--accent); background: rgba(31, 95, 139, .08); } .cursor.plot { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--warm); border-style: dashed; } .tip { display: block; position: fixed; left: 0; top: 0; z-index: 1299; pointer-events: none; padding: 7px 12px; border-radius: 999px; background: var(--z-navy); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 14px 34px rgba(23, 59, 77, .38); opacity: 0; transform: translate(22px, 18px) scale(.9); transition: opacity .18s, transform .18s; } .tip.on { opacity: 1; transform: translate(22px, 18px) scale(1); } .tip small { font-family: var(--hindi); font-weight: 700; font-size: 13px; color: var(--z-earth-lift); margin-left: 6px; } .tip .tip-c { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; opacity: .72; } } .zbtn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 12px 20px; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; transition: transform .2s, background .2s, box-shadow .2s; } .zbtn:hover { transform: translateY(-1px); } .zbtn-blue { background: var(--z-blue); color: #fff !important; box-shadow: 0 10px 24px rgba(31, 95, 139, .30); } .zbtn-blue:hover { background: var(--z-blue-600); } .zbtn-quiet { background: var(--surface); color: var(--fg); border: 1px solid var(--edge); } .zbtn-quiet:hover { background: var(--z-tile); } html[data-theme="dark"] .zbtn-quiet:hover { background: #1A2531; } .zbtn-lg { padding: 17px 28px; font-size: 15px; } /* ---------- chapter rail: a dot per stop, each one a way to jump ---------- */ .xp-rail { position: fixed; z-index: 40; right: 22px; top: calc(50% + var(--xp-header-h) / 2); transform: translateY(-50%); list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; transition: opacity .4s; } .xp-rail li { display: flex; justify-content: flex-end; } .xp-rail button { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--fg-mute); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; transition: color .3s; } .xp-rail b { font-family: var(--sans); font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; opacity: .5; transition: all .3s; order: 2; background: var(--surface); } .xp-rail span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: translateX(8px); transition: all .3s; white-space: nowrap; } .xp-rail .on button { color: var(--fg); } .xp-rail .on b { opacity: 1; background: var(--z-blue); border-color: var(--z-blue); color: #fff; } html[data-theme="dark"] .xp-rail .on b { background: var(--z-earth-lift); border-color: var(--z-earth-lift); color: var(--z-navy-700); } .xp-rail:hover span, .xp-rail button:focus-visible span { opacity: .75; transform: none; } .xp-rail.gone { opacity: 0; pointer-events: none; } /* ---------- the pinned story ---------- */ .story { position: relative; } .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--page); transition: background .5s; } #gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(5, 10, 15, .55)); } html[data-theme="dark"] .vignette { opacity: 1; } .chap { position: absolute; z-index: 5; color: var(--fg); opacity: 0; visibility: hidden; pointer-events: none; text-shadow: var(--halo); } .chap a { pointer-events: auto; text-shadow: none; } .xp-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px !important; } .xp-kicker .num { color: var(--fg-mute); margin-right: 8px; } .display { font-weight: 800; font-size: clamp(54px, 8.6vw, 142px); line-height: .92; letter-spacing: -.045em; word-spacing: .04em; } .display .line { display: block; } .display-2 { font-weight: 800; font-size: clamp(38px, 5.2vw, 84px); line-height: .98; letter-spacing: -.04em; word-spacing: .04em; } .display-3 { font-weight: 800; font-size: clamp(32px, 4vw, 60px); line-height: 1; letter-spacing: -.035em; word-spacing: .04em; } .lede { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: var(--fg-mute); max-width: 460px; margin-top: 22px !important; } .dim { color: var(--fg-mute); } .warm-hi { font-family: var(--hindi); color: var(--warm); letter-spacing: 0; } /* the English→Hindi word: two words in one slot */ .swap { display: inline-grid; vertical-align: bottom; overflow: hidden; padding: .16em .04em .16em; margin: -.16em -.04em -.16em; white-space: nowrap; } .swap .en, .swap .hi { grid-area: 1 / 1; display: inline-block; white-space: nowrap; align-self: end; justify-self: start; } .swap .en { color: var(--accent); } .swap .en i { display: inline-block; font-style: normal; will-change: transform; } .swap .hi { font-family: var(--hindi); font-weight: 800; letter-spacing: -.005em; color: var(--warm); will-change: transform; line-height: 1.05; } .chap-hero { left: 6vw; right: 6vw; top: calc(50% + var(--xp-header-h) / 2); translate: 0 -50%; max-width: 900px; } .hint { margin-top: 36px !important; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; color: var(--fg-mute); } .hint-fine { display: none; } @media (hover: hover) and (pointer: fine) { .hint-fine { display: inline; } } .hi-inline { font-family: var(--hindi); font-weight: 700; font-size: 14px; color: var(--warm); } .hint-mouse { width: 18px; height: 28px; border-radius: 10px; border: 1.5px solid currentColor; position: relative; flex: none; } .hint-mouse::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--accent); animation: wheel 1.6s ease-in-out infinite; } @keyframes wheel { 0% { transform: translateY(0); opacity: 1 } 80% { transform: translateY(8px); opacity: 0 } 100% { opacity: 0 } } .chap-left { left: 6vw; top: calc(50% + var(--xp-header-h) / 2); translate: 0 -50%; max-width: 640px; } .chap-right { right: calc(6vw + 40px); top: calc(50% + var(--xp-header-h) / 2); translate: 0 -50%; max-width: 600px; text-align: right; } .chap-right .lede { margin-left: auto; } .chap-plot { top: calc(var(--xp-header-h) + 9vh); translate: none; } .chap-plot .answer { margin-top: 36px !important; opacity: 0; } .chap-city { left: 6vw; right: 6vw; top: calc(var(--xp-header-h) + 7vh); } /* the promise sits on a soft wash of the page, so it reads over the busy city */ .chap-outro::before { content: ''; position: absolute; inset: -18vh -30vw; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--page) 35%, color-mix(in srgb, var(--page) 70%, transparent) 62%, transparent); } .chap-outro { left: 16px; right: 16px; top: calc(50% + var(--xp-header-h) / 2); translate: 0 -50%; text-align: center; display: grid; justify-items: center; } /* the city's name on the stage, set like the map's own label */ .city-label { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; opacity: 0; font-size: clamp(18px, 1.8vw, 26px); font-weight: 800; letter-spacing: .08em; color: #4B5563; text-shadow: 0 0 6px #fff, 0 0 14px #fff; white-space: nowrap; display: grid; justify-items: center; line-height: 1.1; } .city-label span { font-family: var(--hindi); font-weight: 700; font-size: .62em; letter-spacing: 0; color: var(--z-earth); } html[data-theme="dark"] .city-label { color: #C9D2DC; text-shadow: 0 0 8px #0B1219, 0 0 16px #0B1219; } html[data-theme="dark"] .city-label span { color: var(--z-earth-lift); } /* labels pinned to things in 3D */ .qs { position: absolute; inset: 0; z-index: 6; pointer-events: none; } .xp-q { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: var(--surface-glass); border: 1px solid var(--edge); color: var(--fg); font-size: 14px; font-weight: 800; white-space: nowrap; opacity: 0; box-shadow: var(--shadow-box); will-change: transform, opacity; } .xp-q i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--warm); display: grid; place-items: center; font-style: normal; font-size: 13px; color: var(--warm); flex: none; transition: background .3s, color .3s; } .xp-q em { font-style: normal; font-family: var(--hindi); font-weight: 700; font-size: 15px; color: var(--warm); } .xp-pin i { width: 12px; height: 12px; border: 0; background: var(--warm); box-shadow: 0 0 0 5px rgba(181, 83, 47, .18); } html[data-theme="dark"] .xp-pin i { box-shadow: 0 0 0 5px rgba(239, 160, 126, .22); } .xp-pin { padding-left: 14px; } .xp-q.lit i { background: var(--warm); color: #fff; } html[data-theme="dark"] .xp-q.lit i { color: var(--z-navy-700); } .zstats { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .zstat { min-width: 210px; padding: 20px 22px; border-radius: 22px; color: var(--fg); text-shadow: none; background: var(--surface-glass); border: 1px solid var(--edge); box-shadow: var(--shadow-box); } .zstat b { display: block; font-size: clamp(36px, 3.6vw, 54px); font-weight: 800; letter-spacing: -.03em; line-height: 1; } .zstat span { display: block; font-size: 13px; font-weight: 600; color: var(--fg-mute); margin-top: 10px; max-width: 190px; line-height: 1.4; } .zstat em { display: block; font-style: normal; font-family: var(--hindi); font-weight: 700; font-size: 16px; color: var(--warm); margin-top: 6px; } .outro-hi { font-family: var(--hindi); font-weight: 800; font-size: clamp(46px, 7vw, 118px); line-height: 1.08; letter-spacing: -.01em; color: var(--fg); } .outro-hi span { color: var(--warm); } .translit { margin-top: 14px !important; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mute); } .outro-en { margin-top: 22px !important; font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; color: var(--fg); letter-spacing: -.01em; } .outro-en em { font-style: normal; color: var(--warm); } .ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; justify-content: center; } .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 8; } .progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--z-blue), var(--z-earth-lift)); } /* ---------- after the story ---------- */ .after { background: var(--page); padding: 0 14px 14px; position: relative; z-index: 2; transition: background .5s; } .zbox { background: var(--surface); border: 1px solid var(--edge); border-radius: 28px; box-shadow: var(--shadow-box); } .belt-band { background: var(--z-navy); border-radius: 32px; margin-bottom: 14px; } html[data-theme="dark"] .belt-band { background: #102B39; } .xp-belt { overflow: hidden; padding: 34px 0 40px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .belt-track { display: flex; gap: 44px; width: max-content; animation: belt 70s linear infinite; } .xp-belt:hover .belt-track { animation-play-state: paused; } .belt-item { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 800; font-size: 26px; white-space: nowrap; transition: color .2s; } .belt-item.hi { font-family: var(--hindi); font-weight: 700; font-size: 27px; } .belt-item::before { content: '?'; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); display: grid; place-items: center; font-size: 14px; flex: none; font-family: var(--sans); } .belt-item:hover { color: var(--z-earth-lift); } .belt-item:hover::before { background: var(--z-earth-lift); border-color: var(--z-earth-lift); color: var(--z-navy-700); } @keyframes belt { to { transform: translateX(-50%); } } .illus-note { text-align: center; font-size: 12px; color: var(--fg-mute); padding: 6px 0 0 !important; } .xp-foot { padding: 0 14px; } .noscript { position: fixed; bottom: 20px; left: 20px; padding: 12px 16px; background: var(--z-navy); color: #fff; border-radius: 14px; z-index: 200; } /* ---------- Explore: each stop's way in ---------- */ .chap-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px !important; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; background: var(--surface); color: var(--accent) !important; border: 1px solid var(--edge); box-shadow: var(--shadow-box); transition: transform .2s, background .2s; } .chap-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .chap-go:hover { transform: translateY(-1px); background: var(--z-wash); } html[data-theme="dark"] .chap-go:hover { background: #182B39; } .chap-right .chap-go { margin-left: auto; } .lede b { color: var(--fg); font-weight: 800; } .city-lede { margin-top: 18px !important; } /* ---------- the Lite version: a still picture per stop ---------- */ .posters { position: absolute; inset: 0; z-index: 0; display: none; } html.lite .posters { display: block; } html.lite #gl { display: none; } .poster { position: absolute; inset: 0; opacity: 0; visibility: hidden; } .poster img { width: 100%; height: 100%; object-fit: cover; display: block; } /* the switch between the two versions */ .mode { position: absolute; right: 22px; bottom: 18px; z-index: 8; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border-radius: 999px; background: var(--surface-glass); border: 1px solid var(--edge); color: var(--fg-mute); font-size: 12px; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-box); } .mode:hover { color: var(--accent); } .mode-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--z-earth); } html.lite .mode-dot { background: var(--accent); } @media (max-width: 860px) { .chap-go { margin-top: 16px !important; padding: 10px 16px; font-size: 13.5px; } .chap-right .chap-go { margin-left: 0; } .chap-city .lede { font-size: 14px; } .mode { right: 10px; bottom: auto; top: calc(var(--xp-header-h) + 10px); padding: 6px 11px 6px 9px; font-size: 11px; } /* on a phone the words sit in the site's own white box, clear of the busy map beneath */ .chap-left, .chap-right, .chap-city { background: var(--surface-glass); border: 1px solid var(--edge); border-radius: 22px; box-shadow: var(--shadow-box); padding: 18px 18px 20px; text-shadow: none; } .chap-left, .chap-right { left: 12px; right: 40px; } .chap-city { left: 12px; right: 12px; } .chap-city .zstat { box-shadow: none; } .chap .xp-kicker { margin-bottom: 10px !important; } .chap .lede { margin-top: 12px !important; } } @media (max-width: 860px) and (max-height: 760px) { .chap .lede { font-size: 14px; line-height: 1.5; margin-top: 14px !important; } .chap .display-2 { font-size: clamp(28px, 8vw, 34px); } } /* ---------- phone ---------- */ @media (max-width: 860px) { .xp-rail { right: 8px; gap: 8px; } .xp-rail b { width: 22px; height: 22px; font-size: 10px; } .xp-rail span { display: none; } .xp-q:nth-child(n+5) { display: none; } .chap-left, .chap-right { left: 20px; right: 40px; max-width: none; text-align: left; top: auto; bottom: 8vh; translate: none; } .chap-right .lede { margin-left: 0; } .chap-plot { top: calc(var(--xp-header-h) + 3vh); bottom: auto; } .chap-hero { left: 20px; right: 40px; top: auto; bottom: 9vh; translate: none; } .chap-city { left: 20px; right: 20px; top: calc(var(--xp-header-h) + 3vh); } .zstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; } .zstat { min-width: 0; padding: 12px; border-radius: 18px; } .zstat b { font-size: 26px; } .zstat span { font-size: 12px; margin-top: 6px; line-height: 1.3; } .zstat em { font-size: 14px; } .xp-q { font-size: 12px; padding: 7px 12px 7px 7px; } .xp-q em { display: none; } .xp-q i { width: 22px; height: 22px; } .xp-pin i { width: 10px; height: 10px; } .xp-pin em { display: inline; font-size: 13px; } .belt-item { font-size: 20px; } .belt-item.hi { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { .belt-track, .hint-mouse::after { animation: none; } } /* ========================================================================== After the tour: three sections that each hold the screen while the scroll plays them out (app.js pins them and scrubs their timelines). ========================================================================== */ :root { --z-sand: #F9F2EA; } html[data-theme="dark"] { --z-sand: #1E1B18; } .after .xp-kicker { margin-bottom: 14px !important; } .ask-pin, .gate-pin, .deck-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: grid; align-items: center; gap: clamp(24px, 4vw, 72px); padding: calc(var(--xp-header-h) + 24px) 6vw 56px; border-radius: 32px; margin-bottom: 14px; } .after .display-3 { text-wrap: balance; } /* ---------- ask: a card that types, answers, then turns over to the market ---------- */ .ask-pin { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--z-tile); } html[data-theme="dark"] .ask-pin { background: #0F1922; } .flip-word { display: inline-grid; vertical-align: bottom; overflow: hidden; padding: 0 .04em .14em; margin-bottom: -.14em; } .flip-word > span { grid-area: 1 / 1; white-space: nowrap; } .fw-hi { font-family: var(--hindi); color: var(--warm); letter-spacing: 0; } .phases { list-style: none; margin: 30px 0 0 !important; padding: 0; display: grid; gap: 18px; } .phases li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; opacity: .38; transition: opacity .45s; } .phases li.on { opacity: 1; } .phases b { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; border: 1.5px solid currentColor; transition: background .45s, color .45s, border-color .45s; } .phases li.on b { background: var(--z-blue); border-color: var(--z-blue); color: #fff; } .phases strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; } .phases span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--fg-mute); } .ask-cta { margin-top: 30px; } .ask-stage { perspective: 1800px; height: min(600px, calc(100svh - var(--xp-header-h) - 90px)); } .ask-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; } .ask-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--surface); border: 1px solid var(--edge); border-radius: 28px; box-shadow: 0 30px 70px rgba(20, 30, 50, .14); } html[data-theme="dark"] .ask-face { box-shadow: 0 30px 70px rgba(0, 0, 0, .45); } .ask-back { transform: rotateY(180deg); } .chat { display: flex; flex-direction: column; padding: 18px; overflow: hidden; } .chat-head { display: flex; align-items: center; gap: 12px; padding: 4px 6px 16px; border-bottom: 1px solid var(--edge); } .chat-mark { width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--edge); display: grid; place-items: center; flex: none; } .chat-mark img { width: 30px; height: 30px; } .chat-head b { display: block; font-size: 15px; font-weight: 800; } .chat-head span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fg-mute); margin-top: 2px; } .chat-head .live { width: 7px; height: 7px; border-radius: 50%; background: var(--z-earth); } .chat-log { list-style: none; margin: 0; padding: 16px 4px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; flex: 1; min-height: 0; overflow: hidden; } .msg { display: none; max-width: 86%; padding: 12px 15px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; flex: none; } .msg.me { align-self: flex-end; background: var(--z-blue); color: #fff; border-bottom-right-radius: 6px; font-weight: 600; } .msg.me:lang(hi) { font-family: var(--hindi); font-size: 16px; } html[data-theme="dark"] .msg.me { background: #1F4A5F; } .msg.bot { align-self: flex-start; background: var(--z-tile); color: var(--fg); border-bottom-left-radius: 6px; } html[data-theme="dark"] .msg.bot { background: #1A2531; } .msg.bot b { font-weight: 800; } .chat-cards { display: grid; gap: 6px; margin-top: 10px; } .chat-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--edge); font-size: 13px; font-weight: 700; } .chat-card em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--z-earth); white-space: nowrap; } html[data-theme="dark"] .chat-card em { color: var(--z-earth-lift); } .msg.typing { align-self: flex-start; gap: 5px; background: var(--z-tile); padding: 14px 16px; } html[data-theme="dark"] .msg.typing { background: #1A2531; } .msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-mute); animation: dots 1.2s infinite ease-in-out; } .msg.typing i:nth-child(2) { animation-delay: .15s; } .msg.typing i:nth-child(3) { animation-delay: .3s; } @keyframes dots { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } } .chat-input { display: flex; align-items: center; gap: 2px; padding: 8px 8px 8px 16px; border-radius: 999px; border: 1.5px solid var(--edge); background: var(--surface); color: var(--fg); font-size: 14.5px; min-height: 52px; transition: border-color .3s; } .chat-input.has { border-color: var(--z-blue); } .chat-input .ph { color: var(--fg-mute); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-input.has .ph { display: none; } .chat-input .typed { white-space: nowrap; overflow: hidden; text-overflow: clip; direction: ltr; font-weight: 600; } .chat-input .typed:lang(hi) { font-family: var(--hindi); font-size: 16px; } .chat-input .caret { width: 2px; height: 20px; background: var(--z-blue); animation: blink 1s steps(1) infinite; flex: none; } .chat-input:not(.has) .caret { display: none; } @keyframes blink { 50% { opacity: 0; } } .chat-input b { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--z-blue); color: #fff; display: grid; place-items: center; flex: none; transition: transform .2s; } .chat-input.send b { transform: scale(.86); } .chat-input svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .insight { padding: 28px; display: flex; flex-direction: column; } .insight h3 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; } .insight-chart { margin-top: 20px; padding: 18px; border-radius: 20px; background: var(--z-tile); flex: 1; display: flex; flex-direction: column; } html[data-theme="dark"] .insight-chart { background: #1A2531; } .chart-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; } .chart-top b { font-weight: 800; } .chart-top span { font-size: 12px; color: var(--fg-mute); font-weight: 600; } .insight-chart .ins-svg { display: block; width: 100%; height: auto; flex: 1; min-height: 110px; margin: 12px 0 10px; overflow: visible; } .insight-chart .grid { fill: none; stroke: var(--edge); stroke-width: 1; vector-effect: non-scaling-stroke; } .insight-chart .area { fill: var(--z-blue); opacity: 0; } .insight-chart .line { fill: none; stroke: var(--z-blue); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100 100; stroke-dashoffset: 100; } .insight-chart .line.two { stroke: var(--z-earth); stroke-width: 2; } .insight-chart .dot { fill: var(--z-blue); stroke: #fff; stroke-width: 2; opacity: 0; } html[data-theme="dark"] .insight-chart .line { stroke: var(--z-blue-lift); } html[data-theme="dark"] .insight-chart .line.two { stroke: var(--z-earth-lift); } .bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .bars li { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; } .bars i { display: block; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--z-blue), var(--z-earth)); transform-origin: 0 50%; transform: scaleX(calc(var(--w) * var(--grow, 0))); } .chart-note { margin-top: 12px !important; font-size: 11px; color: var(--fg-mute); } /* ---------- get in: a phone walks the three steps, then the map opens ---------- */ .gate-pin { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); background: var(--surface); border: 1px solid var(--edge); } .gate-steps { list-style: none; margin: 30px 0 0 !important; padding: 0; display: grid; gap: 0; } .gate-steps li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-bottom: 24px; opacity: .38; transition: opacity .45s; } .gate-steps li.on, .gate-steps li.done { opacity: 1; } .gate-steps i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 16px; border: 1.5px solid var(--edge); background: var(--surface); position: relative; z-index: 1; transition: background .4s, color .4s, border-color .4s; } .gate-steps li.on i { background: var(--z-navy); border-color: var(--z-navy); color: #fff; } .gate-steps li.done i { background: var(--z-earth); border-color: var(--z-earth); color: #fff; } html[data-theme="dark"] .gate-steps li.on i { background: #1F4A5F; border-color: #1F4A5F; } html[data-theme="dark"] .gate-steps li.done i { background: var(--z-earth-lift); border-color: var(--z-earth-lift); color: #26190A; } .gate-steps li:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--edge); } .gate-steps li:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--z-earth); transform-origin: 50% 0; transform: scaleY(var(--f, 0)); } .gate-steps strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin-top: 9px; } .gate-steps em { display: block; font-style: normal; font-family: var(--hindi); font-weight: 600; font-size: 16px; color: var(--warm); } .gate-steps span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--fg-mute); max-width: 460px; } .gate-phone { justify-self: center; position: relative; height: min(600px, calc(100svh - var(--xp-header-h) - 100px)); aspect-ratio: 9 / 18.5; border-radius: 46px; background: var(--z-navy); padding: 12px; box-shadow: 0 40px 80px rgba(20, 30, 50, .22); } html[data-theme="dark"] .gate-phone { background: #203544; box-shadow: 0 40px 80px rgba(0, 0, 0, .5); } .phone-notch { position: absolute; left: 50%; top: 20px; width: 70px; height: 7px; margin-left: -35px; border-radius: 99px; background: rgba(255, 255, 255, .18); z-index: 3; } .screen { position: absolute; inset: 12px; border-radius: 36px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 44px 20px 28px; text-align: center; opacity: 0; } .scr-mark { width: 60px; height: 60px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--edge); display: grid; place-items: center; margin-bottom: 6px; } .scr-mark img { width: 42px; } .scr-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; } .scr-sub { font-size: 12.5px; color: var(--fg-mute); line-height: 1.45; } .scr-sub:lang(hi) { font-family: var(--hindi); font-size: 14px; } .scr-btn { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 999px; border: 1.5px solid var(--edge); font-size: 13px; font-weight: 700; margin-top: 6px; background: var(--surface); } .scr-btn i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; background: var(--z-tile); } .scr-btn.g.pressed { border-color: var(--z-blue); background: var(--z-wash); } html[data-theme="dark"] .scr-btn.g.pressed { background: #182B39; } .tap { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--z-blue); background: rgba(31, 95, 139, .12); pointer-events: none; opacity: 0; } .otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; margin-top: 10px; } .otp i { height: 46px; border-radius: 11px; border: 1.5px solid var(--edge); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; transition: border-color .2s; } .otp i.on { border-color: var(--z-blue); } .badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 14px; border-radius: 999px; background: var(--z-sand); color: var(--z-earth); font-size: 13px; font-weight: 800; opacity: 0; } html[data-theme="dark"] .badge { color: var(--z-earth-lift); } .badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .screen.s3 { justify-content: flex-start; padding: 0; gap: 0; } .scr-map, .scr-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .scr-map img { transform: scale(calc(1.25 - .25 * var(--z, 0))); transform-origin: 40% 30%; } .scr-search { position: relative; z-index: 1; margin: 46px 14px 0; align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 999px; background: var(--surface); box-shadow: 0 6px 20px rgba(20, 30, 50, .16); font-size: 13px; text-align: left; } .scr-search svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--fg-mute); stroke-width: 2.2; stroke-linecap: round; } .scr-search .ph { color: var(--fg-mute); white-space: nowrap; overflow: hidden; } .scr-search.has .ph { display: none; } .scr-search .typed { font-weight: 700; white-space: nowrap; overflow: hidden; } .scr-result { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 14px; padding: 14px 16px; border-radius: 20px; text-align: left; background: var(--surface); box-shadow: 0 10px 30px rgba(20, 30, 50, .2); display: grid; gap: 3px; opacity: 0; } .scr-result small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); } .scr-result b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; } .scr-result span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--z-earth); } .scr-result span em { font-style: normal; margin-right: -2px; } .scr-result span i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } html[data-theme="dark"] .scr-result span { color: var(--z-earth-lift); } /* the other door: agents and developers */ .gate-pro { display: grid; grid-template-columns: 44px 1fr 36px; align-items: center; gap: 16px; margin-top: 8px; padding: 16px 18px; border: 1px dashed color-mix(in srgb, var(--z-earth) 55%, transparent); border-radius: 20px; background: var(--z-sand); color: var(--fg); text-decoration: none; max-width: 540px; transition: border-color .25s, background .25s, transform .25s; } .gate-pro:hover { border-style: solid; border-color: var(--z-earth); transform: translateY(-2px); } .gate-pro:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .gate-pro-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--z-earth); box-shadow: inset 0 0 0 1px var(--edge); } .gate-pro-ic svg, .gate-pro-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gate-pro-txt b { display: block; font-size: 16px; font-weight: 800; } .gate-pro-txt > span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--fg-mute); } .gate-pro-txt em { display: block; margin-top: 2px; font-style: normal; font-family: var(--hindi); font-weight: 600; font-size: 14px; color: var(--warm); } .gate-pro-go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); } html[data-theme="dark"] .gate-pro-ic { color: var(--z-earth-lift); } .gate-open { position: absolute; inset: 0; z-index: 6; clip-path: circle(0% at var(--cx, 72%) var(--cy, 55%)); pointer-events: none; } .gate-open.live { pointer-events: auto; } .gate-open picture, .gate-open img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gate-open::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--page) 0%, color-mix(in srgb, var(--page) 85%, transparent) 34%, transparent 62%); } .gate-open-copy { position: absolute; left: 6vw; top: 50%; translate: 0 -50%; z-index: 1; max-width: 460px; } .gate-open-copy h3 { font-size: clamp(44px, 5.4vw, 80px); font-weight: 800; letter-spacing: -.04em; line-height: 1; } .gate-open-copy h3 span { font-family: var(--hindi); color: var(--warm); letter-spacing: 0; } .gate-open-copy .zbtn { margin-top: 26px; } .gate-note { margin-top: 18px !important; font-size: 13px; line-height: 1.55; color: var(--fg-mute); } /* ---------- read: the guides are a deck the scroll turns over ---------- */ /* the reading table: warm paper, a real sanctioned layout drawn on it like a survey sheet, and a pool of light where the guides lie */ .deck-pin { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 46% 62% at 72% 52%, color-mix(in srgb, #fff 70%, transparent), transparent 70%), linear-gradient(115deg, var(--z-sand) 0%, color-mix(in srgb, var(--z-sand) 70%, #fff) 100%); } .deck-pin::before { content: ''; position: absolute; inset: -4%; z-index: -1; pointer-events: none; background: var(--z-earth); opacity: .2; -webkit-mask: url(assets/layout-sheet.svg) center / cover no-repeat; mask: url(assets/layout-sheet.svg) center / cover no-repeat; rotate: -4deg; transform: translate3d(0, calc(var(--sheet, 0) * -60px), 0); } .deck-pin::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 40% 55% at 72% 52%, var(--z-sand) 0%, transparent 75%), linear-gradient(90deg, var(--z-sand) 0%, color-mix(in srgb, var(--z-sand) 82%, transparent) 30%, transparent 55%); opacity: .9; } html[data-theme="dark"] .deck-pin { background: radial-gradient(ellipse 46% 62% at 72% 52%, #2A251F, transparent 70%), var(--z-sand); } html[data-theme="dark"] .deck-pin::before { background: var(--z-earth-lift); opacity: .14; } .deck-lede { margin-top: 18px !important; max-width: 420px; font-size: 16px; line-height: 1.6; color: var(--fg-mute); } .deck-count { display: flex; align-items: baseline; gap: 8px; margin: 28px 0 22px !important; font-weight: 800; color: var(--fg-mute); font-variant-numeric: tabular-nums; } .deck-count b { font-size: clamp(48px, 5vw, 72px); letter-spacing: -.04em; color: var(--fg); line-height: 1; } .deck-stack { position: relative; height: min(560px, calc(100svh - var(--xp-header-h) - 100px)); perspective: 1600px; } .dcard { position: absolute; left: 50%; top: 50%; width: min(420px, 100%); display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--edge); border-radius: 26px; box-shadow: 0 24px 60px rgba(20, 30, 50, .16); will-change: transform, opacity; transform-origin: 50% 100%; } html[data-theme="dark"] .dcard { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); } .dcard-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #DCE3EA; } html[data-theme="dark"] .dcard-cover { background: #1A2531; } .dcard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .dcard-cat { position: absolute; left: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--z-ink); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .dcard-cat em { font-style: normal; font-family: var(--hindi); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--z-earth); margin-left: 6px; font-size: 12.5px; } .dcard-body { padding: 18px 22px 22px; display: grid; gap: 8px; } .dcard-hi { font-family: var(--hindi); font-weight: 700; font-size: 17px; color: var(--warm); line-height: 1.3; } .dcard h3 { font-size: 21px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; } .dcard-go { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--accent); margin-top: 4px; } .dcard.end { display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 40px; min-height: 360px; border-style: dashed; } .dcard.end b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } .dcard.end em { font-style: normal; font-family: var(--hindi); color: var(--warm); font-weight: 700; font-size: 18px; } /* ---------- the next button ---------- */ .next-btn { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 45; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface-glass); color: var(--fg); box-shadow: var(--shadow-box); display: grid; place-items: center; cursor: pointer; padding: 0; transition: opacity .35s, background .2s, color .2s, border-color .2s; } .next-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: bob 2.2s ease-in-out infinite; } .next-btn:hover { background: var(--z-blue); border-color: var(--z-blue); color: #fff; } .next-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .next-btn.gone { opacity: 0; pointer-events: none; } @keyframes bob { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } } .story .progress { bottom: 0; } /* ---------- phone ---------- */ @media (max-width: 860px) { .ask-pin, .gate-pin, .deck-pin { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; align-content: stretch; gap: 14px; padding: calc(var(--xp-header-h) + 16px) 16px 78px; border-radius: 24px; } .after .display-3 { font-size: clamp(28px, 8vw, 36px); } .after .xp-kicker { margin-bottom: 8px !important; } .phases { margin-top: 14px !important; } .phases li:not(.on) { display: none; } .phases li { grid-template-columns: 32px 1fr; gap: 10px; } .phases b { width: 32px; height: 32px; font-size: 12px; } .phases strong { font-size: 16px; } .phases span { font-size: 13px; } .ask-cta { display: none; } .ask-stage { height: 100%; min-height: 0; } .chat { padding: 12px; } .msg { max-width: 92%; font-size: 13.5px; padding: 10px 12px; } .chat-head { padding: 2px 4px 10px; } .chat-input { font-size: 13.5px; min-height: 46px; } .insight { padding: 18px; } .insight h3 { font-size: 20px; } .bars li { grid-template-columns: 116px 1fr; font-size: 12px; } .gate-steps { margin-top: 14px !important; } .gate-steps li { grid-template-columns: 32px 1fr; gap: 10px; padding-bottom: 10px; } .gate-steps i { width: 32px; height: 32px; font-size: 13px; } .gate-steps li:not(:last-child)::before, .gate-steps li:not(:last-child)::after { left: 15px; top: 32px; } .gate-steps strong { font-size: 15px; margin-top: 5px; } .gate-steps em { display: none; } .gate-steps span { display: none; } .gate-steps li.on span { display: block; font-size: 12.5px; margin-top: 2px; } .gate-phone { height: 100%; max-height: 520px; width: auto; } .gate-pro { grid-template-columns: 1fr 22px; gap: 8px; padding: 9px 14px; margin-top: 0; border-radius: 999px; } .gate-pro-ic, .gate-pro-txt > span, .gate-pro-txt em { display: none; } .gate-pro-txt b { font-size: 13px; } .gate-pro-go { width: 22px; height: 22px; } .gate-steps li:last-child { padding-bottom: 8px; } .gate-open::after { background: linear-gradient(0deg, var(--page) 0%, color-mix(in srgb, var(--page) 85%, transparent) 40%, transparent 70%); } .gate-open-copy { left: 20px; right: 20px; top: auto; bottom: 90px; translate: none; } .gate-open-copy h3 { font-size: 40px; } .deck-lede { display: none; } .deck-count { margin: 10px 0 0 !important; } .deck-count b { font-size: 40px; } .deck-copy .zbtn { display: none; } .deck-stack { height: 100%; min-height: 0; } .deck-pin::after { background: linear-gradient(180deg, var(--z-sand) 0%, color-mix(in srgb, var(--z-sand) 80%, transparent) 24%, transparent 48%); } .dcard { width: min(360px, 100%); } .dcard h3 { font-size: 18px; } .dcard-body { padding: 14px 16px 16px; } .next-btn { width: 42px; height: 42px; } } @media (prefers-reduced-motion: reduce) { .next-btn svg, .msg.typing i, .chat-input .caret { animation: none; } } /* the conversation appears as the scroll reaches each line */ .msg.in { display: block; animation: msgIn .38s cubic-bezier(.2, .8, .2, 1) both; } .msg.typing.in { display: flex; } .msg.me.in { transform-origin: 100% 100%; } @keyframes msgIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } } .chat-card { opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .3s; } .chat-card.in { opacity: 1; transform: none; } .screen { transition: none; } .otp i { transition: border-color .2s, background .2s; } .otp i.on { background: var(--z-wash); } html[data-theme="dark"] .otp i.on { background: #182B39; } @media (prefers-reduced-motion: reduce) { .msg.in { animation: none; } } /* ---------- the site's scale ---------- The site can render the whole interface at a scale (globals.css: html { zoom: var(--zoom) }; 0.8 on a desktop from 2 Sep 2026, 1 today). The header, its menus and the footer follow it here as on every page. The tour is designed and measured at full size (its 3D camera, pinned sections and scroll maths read the screen directly), so it divides the scale back out: at --zoom 1 this is exactly 1 and does nothing. Checked 25 Sep 2026 at a forced 0.8: every scroll position and rectangle equal to the unscaled page. */ .xp-zoom { zoom: calc(1 / var(--zoom, 1)); }