/* SplitEV ยท page styles. Tokens first; the engine's mechanism is untouched. */ /* Self-hosted (OFL-1.1, via Fontsource): same-origin, preloaded, latin subset. */ /* display face: no late swap, so the headline paints once (LCP). It is preloaded, so it is almost always in time. */ @font-face { font-family: "Archivo"; font-style: normal; font-display: optional; font-weight: 100 900; font-stretch: 62% 125%; src: url(assets/fonts/archivo.woff2) format("woff2-variations"), url(assets/fonts/archivo.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Geist"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(assets/fonts/geist.woff2) format("woff2-variations"), url(assets/fonts/geist.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Geist Mono"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(assets/fonts/geist-mono.woff2) format("woff2-variations"), url(assets/fonts/geist-mono.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root { /* Brand colour sheet: dark surfaces, text dark primary/secondary, High-Voltage Lime is "charge / CTA glow". Purple marks Host contexts only. Red is errors only. */ --sc-canvas: #0C1101; --sc-surface: #161715; --sc-ink: #FEFFFA; --sc-ink-soft: #BEC5B8; --sc-accent: #B9FF00; --sc-accent-ink: #0C1101; --ink-faint: #8E968A; --surface-2: #181A18; --host: #B983FF; --host-soft: #D1ADFF; --error: #933939; --sc-font-display: "Archivo", "Geist", system-ui, sans-serif; --sc-font-text: "Geist", system-ui, sans-serif; --sc-font-mono: "Geist Mono", ui-monospace, monospace; --sc-shadow-color: 84 70% 2%; --r: 12px; --bar-h: 4.25rem; } /* ============================================================ themes ====== Dark is the brand's native surface; light follows the brand sheet's light neutrals. The choice is set on before first paint. */ :root { --field: #1E211D; --field-host: #1E1B24; --field-hover: #262a25; --surface-host-base: #1A1522; --surface-host: color-mix(in oklab, #1A1522 70%, var(--sc-surface)); --canvas-host: #0E0C14; --ink-muted: #6E756B; --accent-text: var(--sc-accent); --host-text: var(--host-soft); --error-text: #E08C8C; --error-line: #C25B5B; --warn-text: #E8AF34; --code-bg: #111; color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; --sc-canvas: #F3F2F3; --sc-surface: #FFFFFF; --sc-ink: #0C1101; --sc-ink-soft: #454A40; --ink-faint: #5C6157; --surface-2: #E9EAE6; --field: #FFFFFF; --field-host: #FFFFFF; --field-hover: #EEF0EA; --surface-host-base: #F4EFFD; --surface-host: #F7F3FE; --canvas-host: #F1EEF6; --ink-muted: #8A9086; --accent-text: #3B6E00; --host-text: #6A3FCB; --error-text: #A12B2B; --error-line: #B33A3A; --warn-text: #8A5A00; --code-bg: #F0F1ED; --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.8); --sc-shadow-color: 84 15% 25%; --sc-hairline: color-mix(in oklab, var(--sc-ink) 11%, transparent); --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 20%, transparent); } :root[data-theme="light"] .sc-grain { opacity: 0.03; } .list { --accent-text: var(--host-text); } .hosts, .list { background: var(--canvas-host); } /* the header toggle */ .theme-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; cursor: pointer; color: var(--sc-ink); background: color-mix(in oklab, var(--sc-surface) 80%, transparent); box-shadow: var(--sc-edge), inset 0 0 0 1px var(--sc-hairline); transition: transform 120ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle svg { width: 1.15rem; height: 1.15rem; } .theme-toggle .i-sun { display: none; } :root[data-theme="light"] .theme-toggle .i-sun { display: block; } :root[data-theme="light"] .theme-toggle .i-moon { display: none; } @media (hover: hover) and (pointer: fine) { .theme-toggle:hover { background: var(--sc-surface); } } /* stills of the first 3D frame, one per theme */ .world__poster .poster-light { display: none; } :root[data-theme="light"] .world__poster .poster-dark { display: none; } :root[data-theme="light"] .world__poster .poster-light { display: block; } [hidden] { display: none !important; } main > section { position: relative; z-index: 1; } .sc-display { font-stretch: 112%; font-weight: 600; } /* ------------------------------------------------------------- the world -- */ .world { position: fixed; inset: 0; z-index: 0; background: var(--sc-canvas); } .world canvas { width: 100%; height: 100%; display: block; } .world__poster { display: block; position: absolute; inset: 0; } .world__poster picture, .world__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; } .no-webgl .world canvas { display: none; } .no-webgl .world__poster { display: block; position: absolute; inset: 0; } .world-note { position: absolute; right: var(--sc-gutter); bottom: var(--sc-5); margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; color: var(--ink-faint); } .hero .world-note { color: var(--sc-ink-soft); } /* ------------------------------------------------------------------- bar -- */ .bar { position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--sc-gutter); background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 82%, transparent), transparent); } .bar__mark { display: block; padding: var(--sc-2) 0; } .bar__mark img { height: 2.2rem; width: auto; } .bar__cta { font-size: var(--sc-t-sm); font-weight: 600; text-decoration: none; padding: 0.55rem 0.95rem; border-radius: var(--r); color: var(--sc-ink); background: color-mix(in oklab, var(--sc-surface) 86%, transparent); box-shadow: var(--sc-edge), inset 0 0 0 1px var(--sc-hairline); transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); } .bar__cta:active { transform: scale(0.97); } .bar__cta[data-mode="host"] { color: #140A22; background: var(--host); box-shadow: none; } @media (hover: hover) and (pointer: fine) { .bar__cta:hover { background: var(--surface-2); } .bar__cta[data-mode="host"]:hover { background: var(--host-soft); } } /* --------------------------------------------------------------- buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-weight: 600; font-size: var(--sc-t-base); text-decoration: none; border: 0; cursor: pointer; padding: 0.95rem 1.4rem; border-radius: var(--r); color: #0C1101; background: linear-gradient(90deg, rgb(198 238 177), rgb(224 255 187)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.75), inset 0 -1px 0 rgb(60 108 31 / 0.25), 0 2px 4px hsl(var(--sc-shadow-color) / 0.4), 0 10px 24px -8px rgb(185 255 0 / 0.28); transition: transform 140ms var(--sc-ease-out), filter 160ms var(--sc-ease-out); } .btn:active { transform: scale(0.97); } .btn--host { color: #140A22; background: linear-gradient(90deg, var(--host), var(--host-soft)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 2px 4px hsl(var(--sc-shadow-color) / 0.4), 0 10px 24px -8px rgb(185 131 255 / 0.3); } @media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); filter: brightness(1.04); } } .btn:focus-visible { outline-offset: 4px; } .btn--host:focus-visible { outline-color: var(--host); } .link-host { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--host-text); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--host) 60%, transparent); padding: 0.5rem 0.25rem; } .link-host:focus-visible { outline-color: var(--host); } /* ------------------------------------------------------------------ hero -- */ .hero { min-height: 100vh; min-height: 100svh; display: grid; align-items: end; } .hero__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top right, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 58%, transparent) 26%, transparent 56%); } .hero__copy { position: relative; padding: calc(var(--bar-h) + 1.5rem) var(--sc-gutter) clamp(3.5rem, 13vh, 8.5rem); max-width: 50rem; } .hero__eyebrow { margin: 0 0 var(--sc-4); color: var(--accent-text); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; } .hero__title { margin: 0; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 650; font-size: clamp(3rem, 1.6rem + 5.6vw, 6.6rem); line-height: 0.95; letter-spacing: -0.035em; text-wrap: balance; max-width: 15ch; } .hero__sub { margin: var(--sc-5) 0 0; max-width: 40ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; } .hero__actions { margin-top: var(--sc-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-6); } .hero__steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--sc-5) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.45; } .hero__steps span { color: var(--accent-text); } #savings { scroll-margin-top: calc(var(--bar-h) + 1.25rem); } /* ---------------------------------------------------------------- unsaid -- */ .unsaid__stage { display: grid; align-items: center; justify-items: end; padding-inline: var(--sc-gutter); } .unsaid__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, color-mix(in oklab, var(--sc-canvas) 78%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 40%, transparent 70%); } .unsaid__lines { position: relative; display: grid; width: min(38rem, 100%); } .unsaid__lines > * { grid-area: 1 / 1; align-self: center; } .unsaid__line { margin: 0; font-family: var(--sc-font-display); font-stretch: 108%; font-weight: 500; font-size: var(--sc-t-2xl); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; } .unsaid__line--turn { color: var(--sc-ink); font-weight: 600; } .unsaid__claim { margin: 0; font-family: var(--sc-font-display); font-stretch: 115%; font-weight: 700; font-size: var(--sc-t-3xl); line-height: 0.98; letter-spacing: -0.035em; color: var(--accent-text); } /* ------------------------------------------------------------------ ring -- */ .ring__stage { cursor: default; } .ring__stage.is-pickable { cursor: pointer; } .ring__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom right, color-mix(in oklab, var(--sc-canvas) 80%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 30%, transparent 52%); } .ring__copy { position: absolute; top: calc(var(--bar-h) + clamp(1rem, 5vh, 3.5rem)); left: var(--sc-gutter); max-width: 34rem; z-index: 2; } .ring__title { margin: 0; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 650; font-size: var(--sc-t-3xl); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; } .ring__body { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); max-width: 44ch; text-wrap: pretty; } .ring__panel { position: absolute; right: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 5rem); z-index: 2; width: min(21rem, 100% - 2 * var(--sc-gutter)); padding: var(--sc-5); border-radius: var(--r); background: color-mix(in oklab, var(--sc-surface) 94%, transparent); box-shadow: var(--sc-edge), inset 0 0 0 1px var(--sc-hairline), var(--sc-e3); } .ring__label { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } .ring__readout { margin: var(--sc-2) 0 0; display: flex; align-items: baseline; gap: var(--sc-2); white-space: nowrap; } .ring__min { font-family: var(--sc-font-display); font-stretch: 110%; font-weight: 650; font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: -0.03em; color: var(--accent-text); font-variant-numeric: tabular-nums; min-width: 1.4ch; } .ring__unit { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); } .ring__count { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); } .ring__count strong { color: var(--sc-ink); font-variant-numeric: tabular-nums; font-weight: 600; } .ring__try { margin-top: var(--sc-4); width: 100%; cursor: pointer; padding: 0.7rem 1rem; border-radius: var(--r); border: 0; background: var(--surface-2); color: var(--sc-ink); font-weight: 500; box-shadow: var(--sc-edge), inset 0 0 0 1px var(--sc-hairline-strong); transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); } .ring__try:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .ring__try:hover { background: var(--field-hover); } } .ring__hint { margin: var(--sc-2) 0 0; font-size: var(--sc-t-xs); color: var(--ink-faint); } .world-note--ring { z-index: 2; left: var(--sc-gutter); right: auto; } .pinlabel { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 0.55rem 0.8rem 0.6rem; border-radius: var(--r); background: color-mix(in oklab, var(--sc-surface) 95%, transparent); box-shadow: var(--sc-edge), inset 0 0 0 1px color-mix(in oklab, var(--sc-accent) 40%, transparent), var(--sc-e2); translate: -50% calc(-100% - 18px); transition: opacity 220ms var(--sc-ease-out); } .pinlabel::after { content: ""; position: absolute; left: 50%; bottom: -18px; width: 1px; height: 18px; background: color-mix(in oklab, var(--sc-accent) 70%, transparent); } .pinlabel__name { font-weight: 600; font-size: var(--sc-t-sm); white-space: nowrap; } .pinlabel__meta { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); white-space: nowrap; } /* ----------------------------------------------------------------- night -- */ .night { background: var(--sc-canvas); padding-block: clamp(3.5rem, 7vw, 7rem) var(--sc-section); } .night__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } .night__title { font-size: var(--sc-t-2xl); line-height: 1.02; max-width: 16ch; } .steps { margin: var(--sc-6) 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: var(--sc-3); max-width: 44ch; } .steps li { counter-increment: s; display: grid; grid-template-columns: 2rem 1fr; color: var(--sc-ink-soft); } .steps li::before { content: counter(s); font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); color: var(--accent-text); padding-top: 0.12em; } .steps strong { color: var(--sc-ink); font-weight: 600; } .night__safety { padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); } .listing { margin: 0; } .listing__card { padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--r); background: var(--sc-surface); box-shadow: var(--sc-edge), inset 0 0 0 1px var(--sc-hairline), var(--sc-e3); } .listing__tag { margin: 0 0 var(--sc-4); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } .listing__head { display: grid; grid-template-columns: auto 1fr; gap: var(--sc-4); align-items: center; } .listing__avatar { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #140A22; background: linear-gradient(135deg, var(--host-soft), var(--host)); } .listing__name { margin: 0; font-family: var(--sc-font-display); font-stretch: 108%; font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: -0.02em; line-height: 1.1; } .listing__meta { margin: var(--sc-1) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums; } .listing__cap { margin-top: var(--sc-3); font-size: var(--sc-t-xs); color: var(--ink-faint); } .window { margin-top: var(--sc-6); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); } .window__label { margin: 0; font-weight: 600; } .window__track { position: relative; height: 2.75rem; margin: var(--sc-4) 0 var(--sc-6); border-radius: 8px; background: var(--field); overflow: visible; } .window__avail, .window__booked { position: absolute; inset-block: 0; left: 0; width: 100%; border-radius: 8px; transform-origin: 0 50%; transform: translateX(calc(var(--a, 0) * 100%)) scaleX(var(--w, 0)); } .window__avail { background: color-mix(in oklab, var(--sc-accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-accent) 30%, transparent); } .window__booked { inset-block: 7px; background: var(--sc-accent); transition: transform 240ms var(--sc-ease-out); } .window__tick { position: absolute; top: calc(100% + 6px); left: calc(var(--at) * 100%); translate: -50% 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--ink-faint); white-space: nowrap; } .window__tick[style*="--at:0;"], .window__tick[style="--at:0"] { translate: 0 0; } .window__tick[style="--at:1"] { translate: -100% 0; } .window__pick { display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-6); } .window__pick fieldset { border: 0; padding: 0; margin: 0; } .window__pick legend { font-size: var(--sc-t-xs); color: var(--ink-faint); margin-bottom: var(--sc-2); font-family: var(--sc-font-mono); letter-spacing: 0.06em; text-transform: uppercase; } .seg { display: inline-flex; padding: 3px; border-radius: var(--r); background: var(--field); box-shadow: inset 0 0 0 1px var(--sc-hairline); } .seg button { border: 0; background: transparent; cursor: pointer; font-variant-numeric: tabular-nums; padding: 0.5rem 0.8rem; min-height: 2.5rem; border-radius: 9px; color: var(--sc-ink-soft); font-weight: 500; transition: background-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); } .seg button[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-canvas); } .seg button:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .seg button:not([aria-pressed="true"]):hover { color: var(--sc-ink); background: var(--field-hover); } } .window__summary { margin: var(--sc-5) 0 0; color: var(--sc-ink-soft); } .window__summary span { color: var(--sc-ink); font-weight: 600; } /* ----------------------------------------------------------------- hosts -- */ .hosts { background: var(--sc-canvas); --sc-accent-host: var(--host); } .hosts__stage { display: flex; align-items: center; } .hosts :focus-visible { outline-color: var(--host); } .rail { gap: clamp(1.25rem, 3vw, 3rem); padding-inline: var(--sc-gutter); align-items: stretch; } .rail__lead { flex: 0 0 clamp(18rem, 36vw, 32rem); align-self: center; } .rail__lead h2 { font-size: var(--sc-t-2xl); line-height: 1.02; color: var(--sc-ink); } .rail__lead h2::after { content: ""; display: block; width: 3rem; height: 3px; margin-top: var(--sc-5); background: var(--host); border-radius: 2px; } .rail__lead .sc-body { margin-top: var(--sc-5); } .place { flex: 0 0 clamp(16rem, 23vw, 20rem); align-self: center; padding: var(--sc-5); border-radius: var(--r); background: var(--surface-host); box-shadow: var(--sc-edge), inset 0 0 0 1px color-mix(in oklab, var(--host) 16%, transparent), var(--sc-e2); } .place__name { margin: 0; font-family: var(--sc-font-display); font-stretch: 108%; font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: -0.015em; line-height: 1.15; } .place__facts { margin: var(--sc-4) 0 0; display: grid; grid-template-columns: 3.4rem 1fr; gap: var(--sc-2) var(--sc-3); font-size: var(--sc-t-sm); } .place__facts dt { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--host-text); padding-top: 0.2em; } .place__facts dd { margin: 0; color: var(--sc-ink-soft); } .rail__end { flex: 0 0 clamp(16rem, 26vw, 22rem); align-self: center; padding-left: var(--sc-4); } .rail__note { margin: 0 0 var(--sc-5); font-size: var(--sc-t-lg); line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; } @media (prefers-reduced-motion: no-preference) { .rail > .place { transform: translateY(calc((1 - min(1, max(0, var(--sc-p, 0) * 6 - var(--i, 0) * 0.9))) * 1.25rem)); } } /* ----------------------------------------------------------------- scale -- */ .scale__stage { background: var(--sc-canvas); display: grid; align-items: center; } .scale__grid { display: grid; gap: var(--sc-6); padding-top: var(--bar-h); } .scale__title { margin: 0; max-width: 18ch; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 650; font-size: var(--sc-t-2xl); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; } .scale__figs { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--sc-6) clamp(2.5rem, 8vw, 8rem); margin-top: var(--sc-4); } .fig__num { margin: 0; font-family: var(--sc-font-display); font-stretch: 105%; font-weight: 600; font-size: clamp(2.8rem, 1.6rem + 5vw, 6rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .fig__suffix { font-size: 0.42em; letter-spacing: -0.01em; color: var(--sc-ink-soft); font-weight: 500; } .fig__label { margin: var(--sc-3) 0 0; max-width: 24ch; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); } .scale__ratio { margin: var(--sc-4) 0 0; max-width: 40ch; font-size: var(--sc-t-lg); line-height: 1.4; padding-left: var(--sc-4); box-shadow: inset 1px 0 0 var(--sc-accent); } .scale__partner { margin: 0; max-width: 60ch; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); } .scale__partner strong { color: var(--sc-ink); font-weight: 600; } .scale__partner a { color: var(--sc-ink); } sup { font-size: 0.62em; line-height: 0; margin-left: 1px; } sup a { color: var(--sc-ink-soft); text-decoration: none; padding: 0 2px; } sup a:hover { color: var(--accent-text); } /* ----------------------------------------------------------------- value -- */ .value { background: var(--sc-canvas); padding-block: clamp(3.5rem, 7vw, 7rem) var(--sc-7); } .value__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .est { padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--r); background: var(--sc-surface); box-shadow: var(--sc-edge), inset 0 0 0 1px var(--sc-hairline), var(--sc-e3); display: grid; gap: var(--sc-5); } .est__field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--sc-2) var(--sc-4); } .est__name { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); } .est__val { font-family: var(--sc-font-display); font-stretch: 105%; font-weight: 600; font-size: var(--sc-t-xl); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .est__field input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent-text); height: 2rem; cursor: pointer; } .est__result { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-5); display: grid; gap: var(--sc-3); } .est__compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sc-3); } .est__cost { display:flex; flex-direction:column; align-items:start; min-height:9.5rem; padding:clamp(1rem,2vw,1.35rem); border:1px solid var(--sc-hairline); border-radius:14px; background:var(--sc-canvas); } .est__cost--split { background:color-mix(in oklab,var(--sc-accent) 8%,var(--sc-canvas)); border-color:color-mix(in oklab,var(--sc-accent) 30%,var(--sc-hairline)); } .est__cost-label { color:var(--sc-ink-soft); font-size:var(--sc-t-sm); font-weight:650; } .est__cost-total { margin:.7rem 0 .6rem; color:var(--sc-ink); font-family:var(--sc-font-display); font-size:clamp(2rem,3.5vw,3.4rem); line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums; } .est__cost--split .est__cost-total { color:var(--accent-text); } .est__cost-detail { margin-top:auto; color:var(--sc-ink-soft); font-size:var(--sc-t-xs); line-height:1.45; } .est__cost-detail b { color:var(--sc-ink); font-weight:650; } .est__method { border-top:1px solid var(--sc-hairline); padding-top:var(--sc-3); color:var(--sc-ink-soft); font-size:var(--sc-t-xs); } .est__method summary { cursor:pointer; color:var(--sc-ink); font-weight:650; } .est__method p { margin:.7rem 0 0; line-height:1.55; } .est__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-4); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); } .est__row em { font-style: normal; color: var(--ink-faint); } .est__amt { color: var(--sc-ink); font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--sc-t-base); } .est__row--diff { margin-top: var(--sc-2); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); color: var(--sc-ink); } .est__amt--big { font-family: var(--sc-font-display); font-stretch: 108%; font-size: var(--sc-t-2xl); letter-spacing: -0.03em; color: var(--accent-text); line-height: 1; } .est__result[data-comparison="public-lower"] .est__amt--big { color:var(--sc-ink); } .est__pct { margin: 0; text-align: right; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); } .est__note { margin: 0; font-size: var(--sc-t-xs); color: var(--ink-faint); line-height: 1.55; } @media (max-width:560px) { .est__compare { grid-template-columns:1fr; }.est__cost { min-height:7.5rem; } } .sources { margin: var(--sc-8) auto 0; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); list-style: decimal inside; display: grid; gap: var(--sc-2); font-size: var(--sc-t-xs); color: var(--ink-faint); line-height: 1.55; } .sources li { max-width: 110ch; } .sources li:target { color: var(--sc-ink-soft); } /* ------------------------------------------------------------------ join -- */ .join__stage { display: grid; grid-template-rows: 1fr auto; } .join__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 55%, transparent) 38%, transparent 64%); } .join__panel { position: relative; z-index: 2; align-self: center; margin-left: var(--sc-gutter); margin-top: var(--bar-h); width: min(33rem, calc(100% - 2 * var(--sc-gutter))); } .join__kicker { margin: 0 0 var(--sc-3); display: inline-flex; align-items: center; gap: var(--sc-2); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); } .join__kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); } .join__title { margin: 0; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 650; font-size: var(--sc-t-3xl); line-height: 0.98; letter-spacing: -0.035em; } .join__body { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); max-width: 40ch; } .who { margin-top: var(--sc-6); display: inline-flex; padding: 3px; border-radius: var(--r); background: color-mix(in oklab, var(--sc-surface) 92%, transparent); box-shadow: inset 0 0 0 1px var(--sc-hairline); } .who button { border: 0; background: transparent; cursor: pointer; padding: 0.55rem 0.95rem; min-height: 2.6rem; border-radius: 9px; color: var(--sc-ink-soft); font-weight: 500; transition: background-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out); } .who button[aria-selected="true"] { background: var(--sc-ink); color: var(--sc-canvas); } .who button[data-who="host"][aria-selected="true"] { background: var(--host); color: #140A22; } .jf { margin-top: var(--sc-5); padding: var(--sc-5); border-radius: var(--r); background: color-mix(in oklab, var(--sc-surface) 94%, transparent); box-shadow: var(--sc-edge), inset 0 0 0 1px var(--sc-hairline), var(--sc-e3); display: grid; gap: var(--sc-4); } .jf[hidden] { display: none; } .jf__row { display: grid; grid-template-columns: 8rem 1fr; gap: var(--sc-3); } #form-host .jf__row { grid-template-columns: 1fr 8rem; } .jf__field { display: grid; gap: var(--sc-1); min-width: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-family: var(--sc-font-mono); letter-spacing: 0.04em; text-transform: uppercase; } .jf__field input, .jf__field select { font-family: var(--sc-font-text); text-transform: none; letter-spacing: 0; font-size: var(--sc-t-base); width: 100%; min-width: 0; min-height: 3rem; padding: 0 0.85rem; border-radius: 9px; border: 0; color: var(--sc-ink); background: var(--field); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); transition: box-shadow 150ms var(--sc-ease-out); } .jf__field input::placeholder { color: var(--ink-muted); } .jf__field input:focus-visible, .jf__field select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sc-accent); } #form-host .jf__field input:focus-visible, #form-host .jf__field select:focus-visible { box-shadow: inset 0 0 0 2px var(--host); } .jf__field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--error-line); } .jf .btn { justify-self: start; } .jf__carry { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .jf__carry:empty { display: none; } .jf__carry strong { color: var(--sc-ink); font-weight: 600; } .jf__trust { margin: 0; font-size: var(--sc-t-xs); color: var(--ink-faint); line-height: 1.5; } .jf__status { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink); } .jf__status:empty { display: none; } .jf__status[data-kind="error"] { color: var(--error-text); } /* Business gateway: clear paths before the dedicated partnership and investor pages. */ .inquiries { position: relative; z-index: 2; padding-block: clamp(4rem, 8vw, 7rem); background: var(--sc-canvas); } .inquiries__intro { max-width: 48rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .inquiries__intro h2 { margin: var(--sc-3) 0; } .inquiries__intro > p:last-child { max-width: 62ch; color: var(--sc-ink-soft); } .inquiries__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); align-items: stretch; } .inquiries__path { --path-accent: var(--sc-accent); position: relative; scroll-margin-top: calc(var(--bar-h) + 1.5rem); min-width: 0; min-height: 27rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r); overflow: hidden; background: var(--sc-surface); box-shadow: var(--sc-edge), inset 0 0 0 1px var(--sc-hairline); display: flex; flex-direction: column; align-items: flex-start; } .inquiries__path--partner { --path-accent: var(--host); } .inquiries__path-art { position: relative; align-self: stretch; height: 7.5rem; margin: calc(-1 * clamp(1.25rem, 3vw, 2rem)) calc(-1 * clamp(1.25rem, 3vw, 2rem)) var(--sc-6); background: radial-gradient(circle at 50% 100%, color-mix(in oklab, var(--path-accent) 15%, transparent), transparent 65%), var(--surface-2); overflow: hidden; } .inquiries__path-art::before { content: ""; position: absolute; inset: 0; opacity: .36; background-image: radial-gradient(var(--sc-hairline-strong) 1px, transparent 1px); background-size: 17px 17px; } .inquiries__path-art i { position: absolute; left: 16%; right: 16%; top: 57%; border-top: 2px dashed var(--path-accent); opacity: .8; } .inquiries__path-art span { position: absolute; z-index: 1; top: calc(57% - .65rem); width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--sc-surface); box-shadow: inset 0 0 0 2px var(--path-accent), 0 0 0 7px color-mix(in oklab, var(--path-accent) 13%, transparent); } .inquiries__path-art span:nth-child(1) { left: 15%; } .inquiries__path-art span:nth-child(2) { left: calc(50% - .65rem); } .inquiries__path-art span:nth-child(3) { right: 15%; background: var(--path-accent); } .inquiries__path h3 { margin: var(--sc-3) 0; max-width: 18ch; font: 650 clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem)/1.08 var(--sc-font-display); letter-spacing: -.03em; text-wrap: balance; } .inquiries__path > p:not(.inquiry__eyebrow) { margin: 0 0 var(--sc-6); max-width: 52ch; color: var(--sc-ink-soft); } .inquiries__path .btn { margin-top: auto; gap: var(--sc-3); } .inquiry__eyebrow { margin: 0; font: 500 var(--sc-t-xs)/1.4 var(--sc-font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--host-text); } .inquiries__path--investor .inquiry__eyebrow { color: var(--accent-text); } .inquiries__press { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5); margin-top: var(--sc-4); padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r); background: var(--sc-surface); box-shadow: var(--sc-edge), inset 0 0 0 1px var(--sc-hairline); } .inquiries__press h3 { margin: var(--sc-2) 0; font: 650 clamp(1.3rem, 1.1rem + .6vw, 1.7rem)/1.2 var(--sc-font-display); } .inquiries__press p:last-child { margin: 0; color: var(--sc-ink-soft); } .inquiries__press-actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-5); } .inquiries__press-actions > a:not(.btn) { color: var(--sc-ink); font-weight: 600; text-underline-offset: .25em; } @media (max-width: 860px) { .inquiries__grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .inquiries__press { align-items: start; flex-direction: column; gap: var(--sc-4); } } @media (max-width: 520px) { .inquiries__path { min-height: 0; } .inquiries__path-art { height: 5.75rem; margin-bottom: var(--sc-5); } } .foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-2) var(--sc-6); padding: var(--sc-5) var(--sc-gutter); border-top: 1px solid var(--sc-hairline); background: color-mix(in oklab, var(--sc-canvas) 88%, transparent); font-size: var(--sc-t-xs); color: var(--ink-faint); } .foot__mark { height: 1.1rem; width: auto; } .foot__lock { margin: 0; color: var(--sc-ink-soft); } .foot__lock em { font-style: normal; color: var(--ink-faint); } .foot__small { margin: 0 0 0 auto; } /* ---------------------------------------------------------------- mobile -- */ @media (max-width: 860px) { .night__grid, .value__grid { grid-template-columns: 1fr; } .unsaid__stage { justify-items: start; } .unsaid__stage::before { background: linear-gradient(0deg, color-mix(in oklab, var(--sc-canvas) 80%, transparent) 0%, transparent 70%); } .unsaid__lines { align-self: end; padding-bottom: 18vh; } .ring__copy { right: var(--sc-gutter); } .ring__title { font-size: var(--sc-t-2xl); } .ring__body { font-size: var(--sc-t-sm); } .ring__panel { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: var(--sc-5); padding: var(--sc-4); display: grid; grid-template-columns: 1fr auto; column-gap: var(--sc-4); align-items: end; } .ring__label { grid-column: 1 / -1; } .ring__readout { margin: 0; } .ring__count { grid-column: 1; margin-top: var(--sc-1); } .ring__try { grid-column: 2; grid-row: 2 / span 2; width: auto; margin-top: 0; } .ring__hint { display: none; } .ring__min { font-size: var(--sc-t-2xl); } .ring__unit { font-size: var(--sc-t-base); } .ring__count { font-size: var(--sc-t-xs); } .world-note--ring { display: none; } .rail__lead { flex-basis: 78vw; } .rail__lead h2 { font-size: var(--sc-t-xl); } .place { flex-basis: 74vw; } .rail__end { flex-basis: 74vw; } .scale__figs { grid-template-columns: 1fr; gap: var(--sc-5); } .join__stage { grid-template-rows: 1fr auto; } .join__scrim { background: linear-gradient(0deg, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 60%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 100%); } .join__panel { align-self: end; margin-inline: var(--sc-gutter); width: auto; margin-top: calc(var(--bar-h) + 0.5rem); } .join__title { font-size: var(--sc-t-2xl); } .join__body { font-size: var(--sc-t-sm); } .who { margin-top: var(--sc-4); } .jf { margin-top: var(--sc-3); padding: var(--sc-4); gap: var(--sc-3); } .foot { padding-block: var(--sc-3); } .foot__lock em, .foot__sep, .foot__small { display: none; } } @media (max-width: 480px) { .jf__row, #form-host .jf__row { grid-template-columns: 1fr; } .hero__title { font-size: clamp(2.55rem, 10.5vw, 3.25rem); } .hero__sub { font-size: var(--sc-t-base); } .hero__steps { font-size: var(--sc-t-xs); } } @media (max-height: 760px) and (max-width: 860px) { .join__body, .jf__trust { display: none; } .hero .world-note { display: none; } } /* ============================================ v2: live app, globe, about == */ .bar__nav, .bar__links { display: flex; align-items: center; gap: var(--sc-5); } .bar__menu { display: none; min-height: 2.75rem; padding: .55rem .8rem; border: 0; border-radius: var(--r); color: var(--sc-ink); background: var(--sc-surface); box-shadow: var(--sc-edge), inset 0 0 0 1px var(--sc-hairline); font: 600 var(--sc-t-sm)/1 var(--sc-font-text); cursor: pointer; } .bar__link { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-decoration: none; padding: 0.5rem 0.25rem; } @media (hover: hover) and (pointer: fine) { .bar__link:hover { color: var(--sc-ink); } } /* Official store badges, kept at or above Apple's 40px onscreen minimum. */ .stores { display: flex; flex-wrap: wrap; gap: var(--sc-3); } .store { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.25rem; border-radius: 0.5rem; text-decoration: none; transition: transform 140ms var(--sc-ease-out), filter 160ms var(--sc-ease-out); } .store:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .store:hover { transform: translateY(-1px); filter: brightness(1.04); } } .store img { display: block; width: auto; height: 2.5rem; max-width: 100%; } .btn--quiet { background: var(--surface-2); color: var(--sc-ink); box-shadow: var(--sc-edge), inset 0 0 0 1px var(--sc-hairline-strong); } .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); margin-right: 0.6em; vertical-align: 0.1em; } /* ---------------------------------------------------------------- story -- */ .story__stage { display: grid; align-items: center; padding-inline: var(--sc-gutter); } .story__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in oklab, var(--sc-canvas) 80%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 36%, transparent 60%); } .story__lines { position: relative; display: grid; width: min(36rem, 100%); } .story__lines > * { grid-area: 1 / 1; align-self: center; } .story__open, .story__big { margin: 0; font-family: var(--sc-font-display); font-stretch: 110%; font-weight: 650; font-size: var(--sc-t-3xl); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; } .story__beat--turn .story__big { color: var(--accent-text); } .story__fig { margin: var(--sc-5) 0 0; max-width: 38ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.4; } .story__fig span[data-sc-count] { color: var(--sc-ink); font-weight: 600; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------- mission -- */ .mission { position: relative; overflow: clip; background: linear-gradient(180deg, var(--sc-canvas), color-mix(in oklab, var(--sc-canvas) 84%, var(--sc-accent) 16%)); } .mission::before { content: ""; position: absolute; width: min(54rem, 80vw); aspect-ratio: 1; right: -20rem; top: 10%; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--sc-accent) 10%, transparent), transparent 66%); pointer-events: none; } .mission__layout { position: relative; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(3rem, 7vw, 8rem); align-items: center; } .mission__lead { max-width: 43rem; } .mission__title { max-width: 10ch; } .mission__lead .sc-lede { color: var(--sc-ink); max-width: 34ch; } .mission__lead .sc-body { max-width: 49ch; } .mission__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-5); margin-top: var(--sc-3); } .mission__visual { min-width: 0; } .mission__network { position: relative; min-height: clamp(28rem, 48vw, 38rem); margin: 0; border: 1px solid var(--sc-hairline); border-radius: clamp(1.25rem, 3vw, 2rem); overflow: hidden; isolation: isolate; color: #fff; background: #171d17 url('assets/posters/mission-people.jpg') 56% center / cover no-repeat; box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / .12); } .mission__network::before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgb(255 255 255 / .28) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .28) 1px, transparent 1px); background-size: 3rem 3rem; mask-image: linear-gradient(90deg, transparent 30%, #000 100%); } .mission__network::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(4 8 5 / .72), transparent 65%), linear-gradient(0deg, rgb(4 8 5 / .78), transparent 34%); z-index: 1; } .mission__network-copy { position: relative; z-index: 3; max-width: 22rem; padding: clamp(1.25rem, 3vw, 2.25rem); } .mission__network-kicker { margin: 0; color: #c7ff42; font: 600 var(--sc-t-xs)/1.2 var(--sc-font-mono); letter-spacing: .08em; text-transform: uppercase; } .mission__network-caption { margin: .65rem 0 0; color: #fff; font: 650 clamp(1.2rem, 2vw, 1.7rem)/1.08 var(--sc-font-display); letter-spacing: -.025em; text-wrap: balance; } .mission__network figcaption { position: absolute; z-index: 3; left: clamp(1.25rem, 3vw, 2.25rem); right: clamp(1.25rem, 3vw, 2.25rem); bottom: 1.1rem; color: #dce3d3; font-size: var(--sc-t-xs); } .mission__signal { position: absolute; z-index: 4; display: grid; gap: .25rem; padding: .7rem .85rem; border: 1px solid rgb(199 255 66 / .45); border-radius: .75rem; background: rgb(8 15 9 / .72); backdrop-filter: blur(8px); box-shadow: 0 1rem 2rem rgb(0 0 0 / .14); } .mission__signal span { color: #c7ff42; font: 600 var(--sc-t-xs)/1.1 var(--sc-font-mono); letter-spacing: .08em; text-transform: uppercase; } .mission__signal b { color: #fff; font-size: var(--sc-t-xs); font-weight: 600; } .mission__signal--people { left: 7%; bottom: 5.8rem; } .mission__signal--data { right: 7%; bottom: 5.8rem; } .mission__principles { display: grid; gap: 0; margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--sc-hairline); } .mission__principle { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--sc-4); padding: var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline); } .mission__principle-mark { width: .7rem; height: .7rem; margin-top: .45rem; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 .35rem color-mix(in oklab, var(--sc-accent) 10%, transparent); } .mission__principle h3 { margin: 0; font: 650 var(--sc-t-lg)/1.15 var(--sc-font-display); letter-spacing: -.02em; } .mission__principle p { margin: .35rem 0 0; max-width: 46ch; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; } .mission__premise { border-top: 1px solid var(--sc-hairline); background: var(--sc-canvas); } .mission__premise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 7vw, 7rem); } .mission__premise p { margin: 0; max-width: 48ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; } .mission__premise p:first-child { color: var(--sc-ink); } .mission__value { padding-bottom: clamp(3rem, 6vw, 6rem); background: var(--sc-surface); } .mission__value-head { max-width: 48rem; } .mission__value-head h2 { max-width: 15ch; } .mission__value-head .sc-lede { max-width: 48ch; color: var(--sc-ink-soft); } .mission__value-visual { position: relative; margin: clamp(2rem, 5vw, 4rem) 0 0; overflow: hidden; border: 1px solid var(--sc-hairline); border-radius: clamp(1.25rem, 3vw, 2rem); background: #1c271c; } .mission__value-visual img { display: block; width: 100%; height: clamp(20rem, 44vw, 35rem); object-fit: cover; object-position: center 44%; } .mission__value-visual figcaption { position: absolute; right: 1rem; bottom: 1rem; padding: .4rem .6rem; border-radius: .4rem; color: #fff; background: rgb(7 12 7 / .75); font-size: var(--sc-t-xs); } .mission__value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(1rem, 2vw, 1.5rem); background: var(--sc-hairline); border: 1px solid var(--sc-hairline); } .mission__value-card { padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--sc-surface); } .mission__value-index { color: var(--sc-accent-text); font: 600 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: .08em; } .mission__value-card h3 { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; font: 650 var(--sc-t-xl)/1.1 var(--sc-font-display); } .mission__value-card p { color: var(--sc-ink-soft); line-height: 1.55; } .mission__value-card strong { display: block; margin-top: 1.5rem; color: var(--sc-ink); font: 600 var(--sc-t-sm)/1.3 var(--sc-font-display); } .mission__value-card strong a { color: inherit; text-underline-offset: .2em; } .mission__future { background: var(--sc-canvas); border-top: 1px solid var(--sc-hairline); } .mission__future-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 8vw, 9rem); align-items: start; } .mission__future-layout h2 { max-width: 12ch; } .mission__future-copy { max-width: 52ch; color: var(--sc-ink-soft); line-height: 1.65; } .mission__future-copy p:first-child { margin-top: 0; color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.45; } .mission__future-copy .btn { margin-top: 1rem; } @media (max-width: 900px) { .mission__layout { grid-template-columns: 1fr; gap: var(--sc-8); } .mission__title { max-width: 13ch; } } @media (max-width: 900px) { .mission__premise-grid, .mission__value-grid, .mission__future-layout { grid-template-columns: 1fr; } .mission__future-layout { gap: var(--sc-6); } } @media (max-width: 560px) { .mission__value-visual img { height: 23rem; object-position: 33% center; } } @media (max-width: 560px) { .mission__network { min-height: 31rem; background-position: 62% center; } .mission__network-copy { max-width: 14rem; padding: 1.25rem; } .mission__network figcaption { left: 1.25rem; right: 1.25rem; } .mission__signal { width: calc(50% - 1.5rem); padding: .6rem; } .mission__signal--people { left: 1.25rem; bottom: 5.5rem; } .mission__signal--data { right: 1.25rem; bottom: 5.5rem; } .mission__signal b { max-width: 7rem; } } @media (max-width: 560px) { .mission-page .bar__cta { white-space: nowrap; padding-inline: .6rem; font-size: .72rem; } } /* ---------------------------------------------------------------- about -- */ .about__stage { background: var(--sc-canvas); display: grid; align-items: center; } .about__kicker { margin: 0 0 var(--sc-4); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); } .about__title { margin: 0; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 650; font-size: var(--sc-t-2xl); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; } .about__body { margin: var(--sc-5) 0 0; color: var(--sc-ink-soft); max-width: 46ch; text-wrap: pretty; } .about__halo { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); color: var(--ink-faint); } .about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-5); margin-top: var(--sc-6); } .refs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); } .ref { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sc-4); padding: 0.72rem 0; border-bottom: 1px solid var(--sc-hairline); } .ref__name { font-weight: 500; font-size: var(--sc-t-sm); line-height: 1.35; } .ref__what { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.35; } @media (prefers-reduced-motion: no-preference) { .about .ref { transform: translateX(calc((1 - min(1, max(0, var(--sc-p, 0) * 9 - var(--k) * 0.55))) * 1.5rem)); } } @media (max-width: 860px) { .bar__link { display: none; } .story__stage { align-items: end; } .story__stage::before { background: linear-gradient(0deg, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 50%, transparent) 45%, transparent 70%); } .story__lines { padding-bottom: 12vh; } .story__open, .story__big { font-size: var(--sc-t-2xl); } .story__fig { font-size: var(--sc-t-base); } .about__body { font-size: var(--sc-t-sm); } .about__halo { display: block; } .ref { padding: 0.42rem 0; gap: var(--sc-3); } .ref__name, .ref__what { font-size: var(--sc-t-xs); } .store { flex: 0 1 auto; } } .stores--close { margin-top: var(--sc-5); } /* ============================== v3: drivers / hosts, easy to read at a glance */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .kicker { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); } .kicker--host { color: var(--host-text); } /* three plain rows: one big word, one sentence. Read in two seconds. */ .pillars { margin: var(--sc-6) 0 0; display: grid; border-top: 1px solid var(--sc-hairline); } .pillar { display: grid; grid-template-columns: minmax(7.5rem, 0.36fr) 1fr; gap: var(--sc-5); align-items: baseline; padding: var(--sc-5) 0; border-bottom: 1px solid var(--sc-hairline); } .pillar dt { font-family: var(--sc-font-display); font-stretch: 110%; font-weight: 650; font-size: var(--sc-t-xl); letter-spacing: -0.025em; color: var(--accent-text); line-height: 1.1; } .pillar dd { margin: 0; color: var(--sc-ink-soft); line-height: 1.5; max-width: 44ch; } .pillars--host .pillar dt { color: var(--host-text); } .drivers { background: var(--sc-canvas); padding-block: clamp(3.5rem, 7vw, 7rem) var(--sc-section); } .drivers__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } .drivers__title { font-size: var(--sc-t-3xl); line-height: 0.98; max-width: 13ch; } .drivers__lede { font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); } .drivers__value { margin-top: clamp(4rem, 9vw, 8rem); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .list { background: var(--sc-canvas); padding-block: clamp(3.5rem, 7vw, 7rem) var(--sc-7); --sc-accent: var(--host); } .list :focus-visible { outline-color: var(--host); } .list__title { font-size: var(--sc-t-3xl); line-height: 0.98; max-width: 16ch; } .list__head .sc-body { font-size: var(--sc-t-lg); line-height: 1.45; } .list__grid { margin-top: var(--sc-7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .list__grid .pillars { margin-top: 0; } .est--host { background: var(--surface-host); box-shadow: var(--sc-edge), inset 0 0 0 1px color-mix(in oklab, var(--host) 22%, transparent), var(--sc-e3); } .est--host input[type="range"] { accent-color: var(--host); } .est__title { margin: 0; font-weight: 600; font-size: var(--sc-t-lg); } .est__row--host .est__amt--big { color: var(--host-text); } .lf { margin-top: clamp(2rem, 4vw, 3.5rem); padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--r); background: var(--sc-surface); box-shadow: var(--sc-edge), inset 0 0 0 1px color-mix(in oklab, var(--host) 28%, transparent), var(--sc-e3); } .lf__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sc-3); margin-bottom: var(--sc-5); } .lf__title { margin: 0; font-family: var(--sc-font-display); font-stretch: 110%; font-weight: 650; font-size: var(--sc-t-2xl); letter-spacing: -0.03em; line-height: 1; } .lf__steps { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--host-text); } .lf__form { display: grid; gap: var(--sc-5); } .lf__step { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sc-5); } .lf__step .btn { justify-self: start; } .jf__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lf .jf__field input, .lf .jf__field select { background: var(--field-host); } .lf .jf__field input:focus-visible, .lf .jf__field select:focus-visible { box-shadow: inset 0 0 0 2px var(--host); } .lf__hours { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sc-3); } .lf__hours legend { width: 100%; margin-bottom: var(--sc-3); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-ink-soft); } .lf__hours label { display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 2.75rem; padding: 0 0.95rem; border-radius: 9px; background: var(--field-host); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); cursor: pointer; font-size: var(--sc-t-sm); } .lf__hours input { accent-color: var(--host); width: 1.05rem; height: 1.05rem; } .lf__hours label:has(input:checked) { box-shadow: inset 0 0 0 1px var(--host); color: var(--sc-ink); } .lf__actions { display: flex; align-items: center; gap: var(--sc-5); } .lf__back { border: 0; background: none; color: var(--sc-ink-soft); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; padding: 0.5rem 0.25rem; } .lf .jf__status[data-kind="error"] { color: var(--error-text); } .list .sources { margin-top: var(--sc-8); } .join__or { margin: var(--sc-5) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); } .join__or a { color: var(--host-text); text-decoration-color: color-mix(in oklab, var(--host) 60%, transparent); } .jf__label { margin: 0; font-weight: 600; font-size: var(--sc-t-sm); } @media (max-width: 860px) { .drivers__grid, .drivers__value, .list__grid { grid-template-columns: 1fr; } .drivers__title, .list__title { font-size: var(--sc-t-2xl); } .pillar { grid-template-columns: 1fr; gap: var(--sc-2); padding: var(--sc-4) 0; } .pillar dt { font-size: var(--sc-t-lg); } .jf__row--3 { grid-template-columns: 1fr; } } .pillar { grid-template-columns: 12.5rem 1fr; } #form-host .jf__row { grid-template-columns: 1fr 1fr; } #form-host .jf__row--3 { grid-template-columns: 1.4fr 0.7fr 1.4fr; } .join__panel { width: min(38rem, calc(100% - 2 * var(--sc-gutter))); } .join__title { font-size: clamp(2.3rem, 1.5rem + 2.4vw, 3.8rem); } @media (max-width: 1100px) { .pillar { grid-template-columns: 10rem 1fr; } .pillar dt { font-size: var(--sc-t-lg); } } @media (max-width: 860px) { .pillar { grid-template-columns: 1fr; } #form-host .jf__row, #form-host .jf__row--3 { grid-template-columns: 1fr; } .join__title { font-size: var(--sc-t-2xl); } } /* ======================================== v4: plans, state-based host estimate */ .plans { width: 100%; margin-top: var(--sc-6); border-collapse: collapse; font-variant-numeric: tabular-nums; } .plans th, .plans td { text-align: left; padding: 0.8rem 0.5rem 0.8rem 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); } .plans thead th { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; } .plans tbody th { font-weight: 600; color: var(--sc-ink); } .plans td { color: var(--sc-ink-soft); } .plans tbody tr:nth-child(2) th { color: var(--accent-text); } .plans__note { margin: var(--sc-4) 0 0; font-size: var(--sc-t-xs); color: var(--ink-faint); line-height: 1.55; max-width: 52ch; } .est__name em { font-style: normal; color: var(--ink-faint); } .est__row strong { color: var(--sc-ink); font-weight: 600; } .hc__row { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sc-3); } .hc__row select { background: var(--field-host); } .hc__use { border: 0; padding: 0; margin: 0; } .hc__use legend { margin-bottom: var(--sc-2); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .seg--host { display: flex; width: 100%; background: var(--field-host); } .seg--host button { flex: 1; display: grid; gap: 1px; line-height: 1.15; padding: 0.55rem 0.5rem; } .seg--host button small { font-size: 0.7rem; opacity: 0.7; font-family: var(--sc-font-mono); } .seg--host button[aria-pressed="true"] { background: var(--host); color: #140A22; } .seg--operator button { min-width: 0; padding-inline: 0.25rem; white-space: nowrap; font-size: 0.875rem; } .ops__hours { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sc-5); } .ops__hours legend { margin-bottom: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .hc__empty { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); } .hc__out { display: grid; gap: var(--sc-3); } .hc__out[hidden] { display: none; } @media (max-width: 860px) { .hc__row { grid-template-columns: 1fr; } .plans th, .plans td { padding-right: 0.25rem; } } /* ============================================================ v5: Karma, quiet */ .listing__chips { margin: var(--sc-2) 0 0; display: flex; gap: var(--sc-2); } .chip { font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); color: var(--sc-ink-soft); } .chip--tier { color: var(--host-text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--host) 40%, transparent); } .chip--solar { color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-accent) 40%, transparent); } .karma-line { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .karma-line::before, .karma-note::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.55em; border-radius: 50%; background: var(--host-soft); vertical-align: 0.12em; } .karma-note { margin: var(--sc-4) 0 0; font-size: var(--sc-t-xs); line-height: 1.55; color: var(--ink-faint); max-width: 52ch; } .pillar { grid-template-columns: 14rem 1fr; } @media (max-width: 1100px) { .pillar { grid-template-columns: 11rem 1fr; } } @media (max-width: 860px) { .pillar { grid-template-columns: 1fr; } } /* =========================================== v6: private vs public, uncapped */ .scale-cmp { margin: var(--sc-6) 0 0; display: grid; gap: var(--sc-3); } .scale-cmp__row { display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: var(--sc-4); } .scale-cmp__label { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .scale-cmp__bar { position: relative; height: 12px; border-radius: 6px; background: var(--field); overflow: hidden; } .scale-cmp__bar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; } .scale-cmp__bar--public i { width: 11%; background: var(--ink-muted); } .scale-cmp__bar--private i { width: 100%; background: linear-gradient(90deg, var(--sc-accent) 70%, color-mix(in oklab, var(--sc-accent) 0%, transparent)); } .scale-cmp__num { font-family: var(--sc-font-display); font-stretch: 105%; font-weight: 650; font-size: var(--sc-t-lg); font-variant-numeric: tabular-nums; min-width: 5.5rem; text-align: right; } .scale-cmp__row:nth-child(2) .scale-cmp__num { color: var(--accent-text); } .scale-cmp figcaption { font-size: var(--sc-t-xs); color: var(--ink-faint); line-height: 1.5; } .hc__ceiling { margin-top: var(--sc-3); padding: var(--sc-4); border-radius: 10px; background: var(--field-host); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--host) 30%, transparent); display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sc-4); align-items: baseline; } .hc__ceiling > span:first-child { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .hc__ceiling-amt { font-family: var(--sc-font-display); font-weight: 650; font-size: var(--sc-t-xl); color: var(--sc-ink); font-variant-numeric: tabular-nums; } .hc__ceiling-sub { grid-column: 1 / -1; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--ink-faint); } @media (max-width: 860px) { .scale-cmp__row { grid-template-columns: 6.5rem 1fr auto; gap: var(--sc-3); } .scale-cmp__num { min-width: 0; font-size: var(--sc-t-base); } } /* ============================================ v7: live network, operators */ .live__stage { display: grid; } .live__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in oklab, var(--sc-canvas) 84%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 46%, transparent) 34%, transparent 58%); } .live__copy { position: absolute; left: var(--sc-gutter); top: calc(var(--bar-h) + clamp(1rem, 5vh, 3.5rem)); bottom: clamp(2rem, 8vh, 5rem); width: min(34rem, 44vw); display: grid; grid-template-rows: auto 1fr; z-index: 2; } .live__title { margin: 0; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 650; font-size: var(--sc-t-3xl); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; } .live__beats { position: relative; display: grid; align-items: end; } .live__beats > * { grid-area: 1 / 1; align-self: end; } .live__beat p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.4; max-width: 30ch; } .live__beat .live__place { color: var(--accent-text); font-family: var(--sc-font-display); font-stretch: 108%; font-weight: 650; font-size: var(--sc-t-xl); letter-spacing: -0.02em; margin-bottom: var(--sc-2); } .live__list { margin: var(--sc-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sc-2); max-width: 38ch; } .live__list li { position: relative; padding-left: 1.1rem; color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.45; } .live__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); } .live__panel { position: absolute; right: var(--sc-gutter); bottom: clamp(2rem, 8vh, 5rem); z-index: 2; width: min(20rem, 100% - 2 * var(--sc-gutter)); padding: var(--sc-5); border-radius: var(--r); background: color-mix(in oklab, var(--sc-surface) 94%, transparent); box-shadow: var(--sc-edge), inset 0 0 0 1px var(--sc-hairline), var(--sc-e3); } .live__clock { margin: var(--sc-2) 0 0; font-family: var(--sc-font-display); font-stretch: 105%; font-weight: 650; font-size: var(--sc-t-2xl); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .live__inuse { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); } .live__inuse strong { color: var(--accent-text); font-weight: 650; font-variant-numeric: tabular-nums; } .live__bars { margin: var(--sc-4) 0 0; display: grid; gap: var(--sc-2); } .live__row { display: grid; grid-template-columns: 7.5rem 1fr 2rem; align-items: center; gap: var(--sc-3); } .live__row dt { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); } .live__row dd { margin: 0; } .live__bar { height: 6px; border-radius: 3px; background: var(--field); overflow: hidden; } .live__bar span { display: block; height: 100%; background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0); transition: transform 240ms var(--sc-ease-out); } .live__n { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); text-align: right; font-variant-numeric: tabular-nums; } .window__open { float: right; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); font-weight: 400; color: var(--ink-faint); letter-spacing: 0.02em; } .seg button:disabled { opacity: 0.35; cursor: not-allowed; } .ops { margin-top: clamp(4rem, 9vw, 8rem); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .ops__line strong { color: var(--sc-ink); font-weight: 600; } .day { position: relative; height: 14px; border-radius: 7px; background: var(--field-host); overflow: hidden; } .day span { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); transition: transform 240ms var(--sc-ease-out); } .day__added { background: var(--host); z-index: 0; } .day__used { background: #8E968A; z-index: 1; } .day__key { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-2) var(--sc-3); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); } .day__k { display: inline-block; width: 10px; height: 10px; border-radius: 3px; } .day__k--used { background: #8E968A; } .day__k--added { background: var(--host); margin-left: var(--sc-3); } @media (max-width: 860px) { .live__scrim { background: linear-gradient(0deg, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 20%, transparent) 38%, transparent 55%, color-mix(in oklab, var(--sc-canvas) 78%, transparent) 88%); } .live__copy { width: auto; right: var(--sc-gutter); bottom: auto; top: calc(var(--bar-h) + 0.75rem); grid-template-rows: auto auto; gap: var(--sc-4); } .live__title { font-size: var(--sc-t-2xl); } .live__beat p { font-size: var(--sc-t-base); } .live__beat .live__place { font-size: var(--sc-t-lg); } .live__list li { font-size: var(--sc-t-sm); } .live__panel { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: var(--sc-5); padding: var(--sc-4); } .live__clock { font-size: var(--sc-t-xl); } .live__row { grid-template-columns: 6.5rem 1fr 1.75rem; } .ops { grid-template-columns: 1fr; } .window__open { float: none; display: block; margin-top: var(--sc-1); } } @media (max-width: 860px) and (max-height: 700px) { .live__bars { display: none; } } /* v9: the 3D fades in once it has drawn; before that the ground is the brand dark */ .world canvas { opacity: 0; transition: opacity 700ms var(--sc-ease-out); } .world canvas { position: relative; z-index: 1; } .city-on .world canvas { opacity: 1; } @media (prefers-reduced-motion: reduce) { .world canvas { transition: none; } } /* v9: questions */ .faq { background: var(--sc-canvas); padding-block: var(--sc-8) var(--sc-9); } .faq__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 6vw, 6rem); align-items: start; } .faq__list { border-top: 0; } .faq__group { margin: var(--sc-7) 0 0; padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-hairline); font-family: var(--sc-font-mono); font-weight: 400; font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); } .faq__group:first-child { margin-top: var(--sc-2); } .faq__item { border-bottom: 1px solid var(--sc-hairline); } .faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4); padding: 1.1rem 0; min-height: 3rem; font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: -0.01em; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; flex: none; font-family: var(--sc-font-mono); font-weight: 400; color: var(--accent-text); font-size: 1.3rem; transition: transform 200ms var(--sc-ease-out); } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item p { margin: 0 0 var(--sc-5); max-width: 62ch; color: var(--sc-ink-soft); line-height: 1.6; } @media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } .faq__item summary { font-size: var(--sc-t-base); } } .soon { display: inline-block; margin-left: 0.35em; padding: 0.05rem 0.45rem; border-radius: 6px; font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-accent) 45%, transparent); vertical-align: 0.1em; white-space: nowrap; } .plans th, .plans td { padding-right: 1.25rem; } .foot__links { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-4); font-size: var(--sc-t-xs); } .foot__links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--sc-ink-soft); text-decoration: none; padding: 0.35rem 0; } @media (hover: hover) and (pointer: fine) { .foot__links a:hover { color: var(--sc-ink); text-decoration: underline; } } .jf__trust a { color: var(--sc-ink-soft); } @media (max-width: 860px) { .foot__links { order: 3; width: 100%; } } /* ======================================================= About: copy, awards beside it, programs below */ .about { background: var(--sc-canvas); } .about__layout { display: grid; gap: clamp(3rem, 6vw, 5rem); } /* copy and awards share a row; the copy stays in view while the taller awards column passes, and stops where the row ends */ .about__lead { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .about__copy { max-width: 46rem; } @media (min-width: 1025px) { .about__copy { position: sticky; top: calc(var(--bar-h, 4rem) + 2rem); } } /* the copy stays while the taller awards column passes */ .plates__title { margin: 0 0 var(--sc-2); font-family: var(--sc-font-mono); font-weight: 400; font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } .plates__lede { margin: 0 0 var(--sc-5); max-width: 56ch; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); } .plates { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-5) var(--sc-3); } .plates--programs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plates--awards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plate { display: grid; grid-template-rows: auto 1fr; gap: var(--sc-3); min-width: 0; } /* Plates are light, so official full-colour logos sit as designed; a logo drawn for dark grounds gets the ink plate */ .plate__mark { position: relative; aspect-ratio: 5 / 2.6; border-radius: var(--r); background: var(--plate, #F3F2F3); box-shadow: var(--sc-e1), inset 0 0 0 1px var(--sc-hairline); overflow: hidden; } .plates--programs .plate__mark { aspect-ratio: 5 / 1.95; } .plate__mark--ink { background: #161715; box-shadow: var(--sc-e1), inset 0 0 0 1px rgb(255 255 255 / 0.08); } .plate__mark--pitch { background: #150438; box-shadow: var(--sc-e1), inset 0 0 0 1px rgb(255 255 255 / 0.1); } /* The Pitch's own ground */ /* The win leads the awards: one wide tile, the same height as the rest */ .plate--featured { grid-column: span 2; } .plate--featured .plate__mark { aspect-ratio: 10 / 2.6; } :root[data-theme="light"] { --plate: #FFFFFF; } /* Optical sizing: --lw (set per logo from its aspect ratio) gives wide wordmarks and compact marks the same visual weight */ .plate__mark img { position: absolute; left: 50%; top: 50%; width: var(--lw, 60%); height: auto; max-height: 64%; transform: translate(-50%, -50%); object-fit: contain; } .plate__cap { margin: 0; font-size: var(--sc-t-xs); line-height: 1.45; color: var(--sc-ink-soft); } .plate__cap strong { display: block; color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-sm); } /* Awards: the result as a badge, winner or finalist, in the host cards' badge style */ .plate__badge { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 1; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: #B9FF00; color: #0C1101; box-shadow: 0 1px 2px rgb(12 17 1 / 0.25); } :root[data-theme="light"] .plate__badge { background: #8FD400; } .plate__badge-glyph { width: 0.95rem; height: 0.95rem; } @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .plate__mark { transition: transform 200ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out); } .plate:hover .plate__mark { transform: translateY(-2px); box-shadow: var(--sc-e3), inset 0 0 0 1px var(--sc-hairline); } .plate:hover :is(.plate__mark--ink, .plate__mark--pitch) { box-shadow: var(--sc-e3), inset 0 0 0 1px rgb(255 255 255 / 0.12); } } @media (max-width: 1024px) { .about__layout { grid-template-areas: "copy" "partners" "awards"; } .about__lead { display: contents; } /* phones and tablets: copy, programs, awards, one column */ .about__copy { grid-area: copy; } .about__partners { grid-area: partners; } .about__awards { grid-area: awards; } .plates--awards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .plates--programs, .plates--awards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plates--programs .plate__mark { aspect-ratio: 5 / 2.6; } } @media (max-width: 560px) { .plates { gap: var(--sc-4) var(--sc-3); } .plates--programs .plate__mark img { width: min(84%, calc(var(--lw, 60%) * 1.2)); } .plates--awards .plate__mark img { width: min(66%, calc(var(--lw, 60%) * 1.12)); } .plate__badge { width: 1.45rem; height: 1.45rem; top: 0.4rem; right: 0.4rem; } .plate__badge-glyph { width: 0.8rem; height: 0.8rem; } } /* v11: host-card icons (Lucide, ISC) */ .place__icon { position: relative; width: 4.5rem; height: 4.5rem; margin-bottom: var(--sc-5); display: grid; place-items: center; border-radius: 16px; color: var(--host-text); background: color-mix(in oklab, var(--host) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--host) 34%, transparent), var(--sc-edge); } .place__glyph { width: 2.35rem; height: 2.35rem; } .place__badge { position: absolute; right: -0.45rem; bottom: -0.45rem; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; color: #0C1101; background: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--surface-host) 100%, transparent), var(--sc-e1); } .hosts .place__badge { background: #B9FF00; } .place__zap { width: 0.95rem; height: 0.95rem; } :root[data-theme="light"] .place__icon { background: color-mix(in oklab, var(--host) 10%, #fff); } :root[data-theme="light"] .hosts .place__badge { background: #8FD400; } @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .place__icon { transition: transform 200ms var(--sc-ease-out); } .place:hover .place__icon { transform: translateY(-2px); } } /* wordmark: lime-on-dark and a dark-letter variant for light surfaces */ .wm-light { display: none; } :root[data-theme="light"] .wm-dark { display: none; } :root[data-theme="light"] .wm-light { display: block; } /* light theme: dark type over a daylight scene needs a denser backdrop where the copy sits */ :root[data-theme="light"] .ring__scrim { background: linear-gradient(100deg, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 46%, transparent 60%); } :root[data-theme="light"] .live__scrim { background: linear-gradient(90deg, color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 36%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 50%, transparent 62%); } :root[data-theme="light"] .story__stage::before { background: linear-gradient(90deg, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 36%, transparent 58%); } :root[data-theme="light"] .hero__scrim { background: linear-gradient(to top right, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, transparent 58%); } :root[data-theme="light"] .join__scrim { background: linear-gradient(90deg, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 78%, transparent) 40%, transparent 66%); } @media (max-width: 860px) { :root[data-theme="light"] .hero__scrim { background: linear-gradient(0deg, color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 62%, color-mix(in oklab, var(--sc-canvas) 42%, transparent) 100%); } :root[data-theme="light"] .ring__scrim, :root[data-theme="light"] .live__scrim { background: linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 34%, transparent 52%, color-mix(in oklab, var(--sc-canvas) 60%, transparent) 100%); } :root[data-theme="light"] .story__stage::before { background: linear-gradient(0deg, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 45%, transparent 70%); } } /* floating panels over the 3D: explicit colour (auditable, and identical to the mixed value) */ :root { --panel: rgb(22 23 21 / 0.94); } :root[data-theme="light"] { --panel: rgb(255 255 255 / 0.96); } .ring__panel, .live__panel, .pinlabel { background: var(--panel); } /* header: enough density that content scrolling beneath never reads through the logo */ .bar { background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 62%, color-mix(in oklab, var(--sc-canvas) 0%, transparent) 100%); } /* Drivers without a home charger: a clear choice, then four useful situations. */ .fits { margin-top: clamp(4.5rem, 9vw, 8rem); display: grid; grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.8fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; } .fits__intro { min-width: 0; } .fits__title { margin: var(--sc-4) 0 0; font-family: var(--sc-font-display); font-stretch: 110%; font-weight: 650; font-size: clamp(2.1rem, 2.6vw, 3.5rem); letter-spacing: -0.035em; line-height: 1.04; max-width: 18ch; text-wrap: balance; color: var(--sc-ink); } .fits__lede { max-width: 38ch; margin: var(--sc-5) 0 0; color: var(--sc-ink-soft); line-height: 1.55; } .fits__action { margin: var(--sc-7) 0 var(--sc-2); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-text); } .fits__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); } .fit { position: relative; overflow: hidden; min-width: 0; min-height: 19rem; padding: clamp(1.15rem, 2vw, 1.75rem); border-radius: var(--r); background: var(--sc-surface); box-shadow: var(--sc-e1), inset 0 0 0 1px var(--sc-hairline); display: flex; flex-direction: column; } .fit::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--sc-accent) 7%, transparent), transparent 55%); } .fit::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--sc-accent); opacity: 0.7; } .fit__visual { position: relative; height: clamp(6rem, 8vw, 7.5rem); margin: calc(-1 * clamp(1.15rem, 2vw, 1.75rem)) calc(-1 * clamp(1.15rem, 2vw, 1.75rem)) var(--sc-5); overflow: hidden; background: linear-gradient(125deg, color-mix(in oklab, var(--sc-accent) 10%, var(--sc-surface)), color-mix(in oklab, var(--sc-accent) 2%, var(--sc-surface))); } .fit__visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(color-mix(in oklab, var(--sc-ink) 18%, transparent) 0.8px, transparent 0.8px); background-size: 18px 18px; opacity: 0.42; } .fit__route { position: absolute; width: 100%; height: 100%; inset: 0; fill: none; } .fit__road { stroke: var(--sc-hairline-strong); stroke-width: 19; stroke-linecap: round; stroke-linejoin: round; } .fit__path { stroke: var(--sc-accent); stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.74; } .fit__start { fill: var(--sc-surface); stroke: var(--sc-accent); stroke-width: 2; } .fit__end { fill: var(--sc-accent); stroke: var(--sc-surface); stroke-width: 2; } :root[data-theme="light"] .fit__path { stroke: var(--accent-text); } :root[data-theme="light"] .fit__start { stroke: var(--accent-text); } :root[data-theme="light"] .fit__end { fill: var(--accent-text); } .fit__symbol { position: absolute; z-index: 1; left: var(--sc-5); top: var(--sc-4); width: 3.3rem; height: 3.3rem; display: grid; place-items: center; border-radius: 13px; color: var(--sc-ink); background: var(--sc-surface); box-shadow: var(--sc-e2), inset 0 0 0 1px var(--sc-hairline-strong); } .fit__symbol svg { width: 1.65rem; height: 1.65rem; } .fit__point { position: absolute; z-index: 1; bottom: 0.65rem; padding: 0.25rem 0.5rem; border-radius: 999px; background: var(--sc-surface); box-shadow: var(--sc-e1), inset 0 0 0 1px var(--sc-hairline-strong); color: var(--sc-ink-soft); font-family: var(--sc-font-mono); font-size: 0.65rem; letter-spacing: 0.03em; text-transform: uppercase; } .fit__point--start { left: 1rem; } .fit__point--end { right: 1rem; color: var(--accent-text); } .fit__eyebrow { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sc-3); margin-bottom: var(--sc-2); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-text); } .fit__eyebrow span { color: var(--ink-faint); } .fit__name { margin: 0 0 var(--sc-2); font-family: var(--sc-font-display); font-stretch: 108%; font-size: var(--sc-t-lg); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; color: var(--sc-ink); } .fit p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); } .fit__link { width: 100%; margin-top: auto; padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); display: flex; align-items: center; justify-content: space-between; gap: var(--sc-3); color: var(--sc-ink); font-size: var(--sc-t-sm); font-weight: 650; text-decoration: none; } .fit__link span { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: var(--accent-text); background: color-mix(in oklab, var(--sc-accent) 12%, var(--sc-surface)); font-size: 1.1rem; } .fit__link:hover { color: var(--accent-text); } .list__guide { display: inline-block; width: fit-content; color: var(--sc-ink); font-weight: 650; text-underline-offset: .2em; } @media (min-width: 1101px) { .fits__intro { position: sticky; top: calc(var(--bar-h) + var(--sc-6)); } } @media (max-width: 1100px) { .fits { grid-template-columns: 1fr; gap: var(--sc-7); } .fits__title { max-width: 24ch; } .fits__lede { max-width: 62ch; } .fits__action { margin-top: var(--sc-5); } } @media (max-width: 620px) { .fits { gap: var(--sc-6); } .fits__list { grid-template-columns: 1fr; } .fit { min-height: 0; } .fit__visual { height: 6.25rem; } } /* Pointer light follows the visitor only on illustrative cards. Forms and data stay still. */ @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .fit, .place, .listing__card { isolation: isolate; overflow: hidden; } .fit > *, .place > *, .listing__card > * { position: relative; z-index: 1; } .pointer-glow { position: absolute !important; z-index: 0 !important; left: 0; top: 0; width: 240px; height: 240px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, color-mix(in oklab, var(--sc-accent) 14%, transparent) 0%, transparent 67%); transition: opacity 180ms var(--sc-ease-out); } .place .pointer-glow { background: radial-gradient(circle, color-mix(in oklab, var(--host) 16%, transparent) 0%, transparent 67%); } .is-pointer-active > .pointer-glow { opacity: 1; will-change: transform; } .fit__symbol { transition: transform 220ms var(--sc-ease-out); } .fit { transition: transform 220ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out); } .fit:hover, .fit:focus-within { transform: translateY(-3px); box-shadow: var(--sc-e2), inset 0 0 0 1px var(--sc-hairline-strong); } .fit:hover .fit__symbol { transform: translateY(-3px); } .fit__path { transition: stroke-dashoffset 420ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out); } .fit:hover .fit__path { stroke-dashoffset: -17; opacity: 1; } } /* Everyday places: illustrated settings connect the driver choices to the host rail. */ .fits { position:relative; margin-top:clamp(5rem,9vw,8rem); } .fits__intro { padding-top:clamp(1rem,2vw,2rem); } .fits__title { font-size:clamp(2.55rem,3.4vw,4.25rem); line-height:1.02; letter-spacing:-.045em; } .fits__lede { font-size:clamp(1rem,1.15vw,1.16rem); } .fits__list { gap:clamp(1rem,2vw,1.6rem); } .fit { min-height:29rem; border-radius:20px; box-shadow:var(--sc-e2),inset 0 0 0 1px var(--sc-hairline); } .fit::after { height:3px; } .fit__visual { height:clamp(10.5rem,14vw,13rem); margin-bottom:var(--sc-5); background:#EFDCC0; } .fit__visual::after { inset:auto 0 0; height:40%; opacity:1; background:linear-gradient(0deg,rgb(26 49 35 / .43),transparent); } .fit__scene { display:block; width:100%; height:100%; transform:scale(1.06); transform-origin:center; } .fit__visual-signal { position:absolute; z-index:2; left:1rem; bottom:.8rem; display:flex; align-items:center; gap:.6rem; padding:.4rem .55rem .4rem .75rem; border-radius:99px; background:rgb(21 41 29 / .88); color:#FBF7E8; font-size:.7rem; font-weight:650; line-height:1; backdrop-filter:blur(7px); } .fit__visual-signal span { display:grid; place-items:center; width:1.35rem; aspect-ratio:1; border-radius:50%; background:#D9F09E; color:#244328; font-size:.85rem; } .fit__eyebrow { font-size:.72rem; } .fit__name { font-size:clamp(1.5rem,1.75vw,2rem); line-height:1.1; } .fit p { font-size:clamp(.92rem,1vw,1rem); } .fit__link { margin-top:auto; } .drivers__value { position:relative; padding-top:clamp(3.25rem,5vw,5rem); border-top:1px solid var(--sc-hairline); } .value__copy .kicker { margin-bottom:var(--sc-4); } .value__copy h3 { max-width:14ch; } .plans { margin-top:var(--sc-6); border-collapse:separate; border-spacing:0 .5rem; } .plans tbody th,.plans tbody td { padding:1rem .65rem; border-block:1px solid var(--sc-hairline); background:var(--sc-surface); } .plans tbody th { padding-left:1rem; border-left:1px solid var(--sc-hairline); border-radius:12px 0 0 12px; } .plans tbody td:last-child { padding-right:1rem; border-right:1px solid var(--sc-hairline); border-radius:0 12px 12px 0; } .plans tbody td:nth-child(2) { color:var(--sc-ink); font-family:var(--sc-font-display); font-size:clamp(1.15rem,1.5vw,1.4rem); font-weight:700; } .plans tbody tr:nth-child(2) th { color:var(--sc-ink); } .est__title { margin:0; font-family:var(--sc-font-display); font-size:clamp(1.5rem,2vw,2rem); font-weight:650; letter-spacing:-.035em; line-height:1.1; } .est__intro { margin:-.5rem 0 0; color:var(--sc-ink-soft); font-size:var(--sc-t-sm); } .drivers__value .est { border-radius:22px; } .drivers__value .est__row--diff { align-items:center; padding:1rem 1.1rem; border:1px solid color-mix(in oklab,var(--sc-accent) 25%,var(--sc-hairline)); border-radius:13px; background:color-mix(in oklab,var(--sc-accent) 6%,var(--sc-canvas)); } .drivers__value .est__pct { text-align:left; } .rail__lead { position:relative; } .rail__eyebrow { margin:0 0 var(--sc-4); color:var(--host-text); font:650 var(--sc-t-xs)/1.3 var(--sc-font-mono); letter-spacing:.07em; text-transform:uppercase; } .place { min-height:28rem; padding:var(--sc-5); border-radius:20px; background:var(--sc-surface); } .place__icon { display:none; } .place__scene { position:relative; height:12rem; margin:calc(-1 * var(--sc-5)) calc(-1 * var(--sc-5)) var(--sc-5); overflow:hidden; border-radius:20px 20px 0 0; background:#EFDCC0; } .place__scene::after { content:""; position:absolute; inset:auto 0 0; height:35%; background:linear-gradient(0deg,rgb(26 49 35 / .4),transparent); } .place__art { display:block; width:100%; height:100%; transform:scale(1.08); transform-origin:center; } .place__scene-label { position:absolute; z-index:1; left:.7rem; bottom:.6rem; padding:.3rem .5rem; border-radius:99px; background:rgb(21 41 29 / .76); color:#FAF5E8; font:.6rem/1.15 var(--sc-font-mono); letter-spacing:.02em; } .place__name { font-size:clamp(1.45rem,1.7vw,1.85rem); line-height:1.1; } .place__facts { grid-template-columns:1fr; gap:.22rem; margin-top:var(--sc-4); } .place__facts dt { padding-top:0; color:var(--host-text); } .place__facts dd { margin:0 0 .7rem; line-height:1.42; } .rail__end { padding:clamp(1rem,2vw,2rem); border-left:2px solid var(--host); } @media (prefers-reduced-motion:no-preference) { .fit__scene,.place__art { transition:transform 650ms cubic-bezier(.22,1,.36,1); } .fit:hover .fit__scene,.fit:focus-within .fit__scene,.place:hover .place__art { transform:scale(1.12) translateX(1.5%); } } @supports (animation-timeline:view()) { @media (prefers-reduced-motion:no-preference) { .fit__scene { animation:place-drift linear both; animation-timeline:view(block); animation-range:entry 0% exit 100%; } @keyframes place-drift { from { transform:scale(1.08) translateX(-2%); } to { transform:scale(1.08) translateX(2%); } } } } @media (max-width:860px) { .place { min-height:27rem; }.place__scene { height:10rem; } } @media (max-width:620px) { .fits__title { max-width:18ch; }.fit { min-height:0; }.fit__visual { height:11rem; }.fit__name { font-size:1.6rem; }.drivers__value { padding-top:3rem; }.plans tbody th,.plans tbody td { padding:.8rem .4rem; }.plans tbody th { padding-left:.7rem; }.plans tbody td:last-child { padding-right:.7rem; }.place { min-height:26rem; } } @media (prefers-reduced-motion:reduce) { .fit__scene,.place__art { transform:none; animation:none; transition:none; } } /* The team is part of the same network story as drivers, hosts and partners. */ .about__team { margin:var(--sc-5) 0 0; max-width:48ch; color:var(--sc-ink-soft); font-size:var(--sc-t-sm); } .about__team a { color:var(--sc-ink); font-weight:650; text-underline-offset:.24em; } .inquiries__careers { display:flex; justify-content:space-between; align-items:center; gap:var(--sc-5); margin-top:var(--sc-4); padding:clamp(1.25rem,3vw,2rem); border:1px solid var(--sc-hairline); border-radius:var(--r); background:linear-gradient(105deg,color-mix(in oklab,var(--sc-accent) 9%,var(--sc-surface)),var(--sc-surface)); } .inquiries__careers h3 { margin:var(--sc-2) 0; font:650 clamp(1.3rem,1.1rem + .7vw,1.8rem)/1.18 var(--sc-font-display); letter-spacing:-.02em; } .inquiries__careers p:last-child { max-width:57ch; margin:0; color:var(--sc-ink-soft); } .inquiries__careers .btn { flex:none; } @media (max-width:700px) { .inquiries__careers { flex-direction:column; align-items:flex-start; } } @view-transition { navigation:auto; } ::view-transition-old(root) { animation:site-page-out 160ms ease both; } ::view-transition-new(root) { animation:site-page-in 220ms ease both; } @keyframes site-page-out { to { opacity:.75; } } @keyframes site-page-in { from { opacity:.75; } } @media (max-width:1120px) and (min-width:981px) { .bar__menu { display:inline-flex; align-items:center; }.bar__links { display:none; position:absolute; top:calc(var(--bar-h) - .1rem); right:var(--sc-gutter); width:min(19rem,calc(100vw - 2 * var(--sc-gutter))); padding:.6rem; border-radius:var(--r); background:var(--sc-surface); box-shadow:var(--sc-e2),inset 0 0 0 1px var(--sc-hairline); }.bar__links[data-open="true"] { display:grid; gap:.1rem; }.bar__links .bar__link { display:block; min-height:2.75rem; padding:.7rem .8rem; border-radius:.4rem; }.bar__link[aria-current="true"]::after { display:none; }.bar__link[aria-current="true"] { background:var(--surface-2); } } @media (prefers-reduced-motion:reduce) { ::view-transition-old(root),::view-transition-new(root) { animation:none; } } /* ======================================================= Flow: bar links, anchors, driver CTA, sources */ .bar__link { position: relative; } .bar__link[aria-current="true"] { color: var(--sc-ink); } .bar__link[aria-current="true"]::after { content: ""; position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0.2rem; height: 2px; border-radius: 2px; background: var(--accent-text); } @media (max-width: 1250px) and (min-width: 981px) { .bar__nav, .bar__links { gap: var(--sc-3); } .bar__link { padding-inline: 0.1rem; } } @media (max-width: 980px) { .bar__nav { gap: var(--sc-2); } .bar__menu { display: inline-flex; align-items: center; } .bar__links { display: none; position: absolute; top: calc(var(--bar-h) - .1rem); right: var(--sc-gutter); width: min(19rem, calc(100vw - 2 * var(--sc-gutter))); padding: .6rem; border-radius: var(--r); background: var(--sc-surface); box-shadow: var(--sc-e2), inset 0 0 0 1px var(--sc-hairline); } .bar__links[data-open="true"] { display: grid; gap: .1rem; } .bar__links .bar__link { display: block; min-height: 2.75rem; padding: .7rem .8rem; border-radius: .4rem; } .bar__link[aria-current="true"]::after { display: none; } .bar__link[aria-current="true"] { background: var(--surface-2); } } main > section[id] { scroll-margin-top: var(--bar-h); } #host-intake { scroll-margin-top: calc(var(--bar-h) + 1.5rem); } .value__cta { margin-top: var(--sc-6); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); } .value__cta-label { margin: 0 0 var(--sc-3); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); } .faq__sources { margin-top: var(--sc-8); } .sources__title { padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); margin: 0 0 var(--sc-3); font-family: var(--sc-font-mono); font-weight: 400; font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } .faq__sources .sources { margin: 0; padding: 0; border: 0; } /* Keep nested cards inside the content column on narrow phones. */ @media (max-width: 860px) { .drivers__grid, .drivers__value, .list__grid, .ops { grid-template-columns: minmax(0, 1fr); } .drivers__grid > *, .drivers__value > *, .list__grid > *, .ops > *, .listing__card { min-width: 0; } .seg { max-width: 100%; flex-wrap: wrap; } .seg button { min-height: 2.75rem; } .bar__cta { display: inline-flex; align-items: center; min-height: 2.75rem; } } @media (max-width: 360px) { .bar__mark img { height: 1.9rem; } .bar__nav { gap: var(--sc-2); } .bar__cta { font-size: 0.78rem; padding-inline: 0.6rem; } .hero__copy { padding-bottom: 3rem; } .hero__actions { gap: var(--sc-3); } .listing__card { padding: var(--sc-4); } .listing__head { gap: var(--sc-2); } .listing__name { font-size: var(--sc-t-lg); } } .skip { position: fixed; z-index: 1000; left: 1rem; top: 1rem; padding: .7rem 1rem; border-radius: .5rem; color: #0c1101; background: #c7ff42; transform: translateY(-200%); } .skip:focus { transform: translateY(0); }