/* Primal: marketing site Mirrors the app's design system: the Living Theme (every surface is a blend of the current arena's `deep`, accents come from the arena), clay surfaces with the four matte cues, and the v8 specular finish on actions only. */ /* ------------------------------------------------------------------ fonts */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: "Primal Serif"; src: url("../fonts/sourceserif4-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------ tokens */ :root { color-scheme: dark; --accent: #A78BFA; --deep: #1B1624; --ink: #F3F6F9; --body: #C6CDD6; --muted: #A1AAB5; --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .15); --red: #FF5C3C; --red-ink: #FF8A6E; --r-pip: 6px; --r-chip: 16px; --r-card: 18px; --r-surface: 20px; --nav-h: 68px; --wrap: 1220px; --gutter: clamp(16px, 4vw, 40px); --ease: cubic-bezier(.2, .8, .2, 1); } /* Each arena's accent and deep, from `Arena.all` in the app. A section pins its own palette, so moving between worlds never repaints the page: only the tint behind it crossfades. site.js sets the root pair for the nav and the climb. */ [data-theme-arena="1"], [data-palette="1"] { --accent: #A78BFA; --deep: #1B1624; } [data-theme-arena="2"], [data-palette="2"] { --accent: #8FCC6B; --deep: #161E19; } [data-theme-arena="3"], [data-palette="3"] { --accent: #E0A577; --deep: #221A14; } [data-theme-arena="4"], [data-palette="4"] { --accent: #FFCE6E; --deep: #201B14; } [data-theme-arena="5"], [data-palette="5"] { --accent: #52E88E; --deep: #14211A; } [data-theme-arena="6"], [data-palette="6"] { --accent: #8AD0F5; --deep: #151C24; } [data-theme-arena="7"], [data-palette="7"] { --accent: #FF7A1A; --deep: #221411; } [data-theme-arena="8"], [data-palette="8"] { --accent: #E8B84D; --deep: #1E1B13; } [data-theme-arena="9"], [data-palette="9"] { --accent: #FFD23D; --deep: #211C13; } [data-theme-arena="10"], [data-palette="10"] { --accent: #FFD76E; --deep: #201C12; } /* Derived colours are declared wherever a palette is, so they follow it. */ :root, [data-theme-arena], [data-palette] { /* Accent-coloured TEXT is lifted, like `arena.accentText` in the app. */ --accent-text: color-mix(in srgb, var(--accent), white 22%); --accent-soft: color-mix(in srgb, var(--accent), transparent 86%); --accent-border: color-mix(in srgb, var(--accent), transparent 70%); --accent-glow: color-mix(in srgb, var(--accent), transparent 50%); --on-accent: color-mix(in srgb, var(--deep), black 55%); /* The clay ladder: moulded out of the arena's own deep. */ --clay-well: color-mix(in srgb, var(--deep), white 5.5%); --clay: color-mix(in srgb, var(--deep), white 12.5%); --clay-high: color-mix(in srgb, var(--deep), white 19%); } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #15121B; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); } body { margin: 0; min-height: 100vh; /* Transparent on purpose: the page colour lives on so the fixed ambient layer (z-index -1) can show between it and the content. */ background: transparent; color: var(--body); font: 400 17px/1.6 "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, svg, canvas { display: block; max-width: 100%; } a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--ink); } b, strong { color: var(--ink); font-weight: 700; } h1, h2, h3 { color: var(--ink); margin: 0; } p { margin: 0; } button { font: inherit; } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #0B0F14; font-weight: 700; text-decoration: none; transition: top .2s; } .skip:focus { top: 12px; } main:focus { outline: none; } /* ------------------------------------------------------------------ type */ .display { font-weight: 900; font-size: clamp(44px, 5.2vw, 80px); line-height: .92; letter-spacing: -.012em; text-transform: uppercase; text-wrap: balance; } .display--md { font-size: clamp(40px, 4.8vw, 72px); } .h2 { font-weight: 900; font-size: clamp(36px, 5vw, 66px); line-height: .94; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--accent-text); font-size: 12.5px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } .lede { max-width: 60ch; margin-top: 22px; color: var(--body); font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.6; } .accent-ink { color: var(--accent-text); text-shadow: 0 0 24px var(--accent-glow); } /* ------------------------------------------------------------------ surfaces */ /* Matte clay: lit top, rim highlight, inner bottom shade, soft drop. */ .clay { position: relative; border-radius: var(--r-card); background: linear-gradient(180deg, color-mix(in srgb, var(--clay), white 4%) 0%, var(--clay) 42%, color-mix(in srgb, var(--clay), black 7%) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 -10px 16px -12px rgba(0, 0, 0, .35), 0 1px 0 rgba(0, 0, 0, .35), 0 16px 30px -18px rgba(0, 0, 0, .7); } .clay-chip { border-radius: var(--r-chip); background: color-mix(in srgb, var(--clay), transparent 12%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px var(--accent-border), 0 14px 30px -16px rgba(0, 0, 0, .8); } /* ------------------------------------------------------------------ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; font-size: 15.5px; font-weight: 800; letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .3s, background-color .3s, color .3s; } .btn:active { transform: translateY(1px) scale(.985); } .btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; } /* Specular finish: gradient body, inner glow, bottom lobe, glass edge, in the surface's own hue. Actions gloss; structure stays matte. */ .btn--gloss { color: var(--on-accent); background: radial-gradient(110% 70% at 50% 125%, color-mix(in srgb, var(--accent), white 45%) 0%, transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--accent), white 32%) 0%, var(--accent) 52%, color-mix(in srgb, var(--accent), black 16%) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 -3px 8px rgba(0, 0, 0, .14), 0 10px 28px -8px var(--accent-glow); } .btn--gloss:hover { color: var(--on-accent); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.22), inset 0 -3px 8px rgba(0,0,0,.14), 0 14px 36px -8px var(--accent-glow); } .btn--ghost { color: var(--ink); background: color-mix(in srgb, var(--clay), transparent 30%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px var(--line-strong); } .btn--ghost:hover { color: var(--ink); background: color-mix(in srgb, var(--clay-high), transparent 15%); } .btn--ghost svg { transition: transform .25s var(--ease); } .btn--ghost:hover svg { transform: translateY(2px); } .store-badge { display: inline-block; border-radius: 10px; transition: transform .2s var(--ease), filter .3s; } .store-badge img { width: auto; height: 50px; } .store-badge--lg img { height: 56px; } .store-badge:hover { transform: translateY(-1px); filter: drop-shadow(0 10px 24px var(--accent-glow)); } .store-soon { display: inline-flex; align-items: center; gap: 11px; min-height: 52px; padding: 0 22px 0 18px; border-radius: 14px; color: var(--ink); background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), 0 10px 26px -12px var(--accent-glow); } .store-soon > span { display: flex; flex-direction: column; line-height: 1.05; font-size: 19px; font-weight: 700; letter-spacing: -.01em; } .store-soon small { font-size: 11px; font-weight: 600; letter-spacing: .01em; opacity: .85; } .store-soon--lg { min-height: 58px; } /* ------------------------------------------------------------------ ambient */ /* The Living Theme's full-bleed tint: a tiny pre-blurred image of the current arena (tools/render_arenas.py) that the browser's own upscaling softens. No CSS filters, so scrolling over it costs nothing. The new world fades in on the top layer, then replaces the base. */ .ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; } .ambient__layer { position: absolute; inset: 0; background: #15121B url("../img/arenas/ambient-01.png") center / 100% 100% no-repeat; } .ambient__layer + .ambient__layer { background-image: none; opacity: 0; transition: opacity .9s ease; will-change: opacity; } .ambient__layer + .ambient__layer.is-on { opacity: 1; } .ambient__layer.is-instant { transition: none; } .page-support .ambient__layer:first-child { background-image: url("../img/arenas/ambient-05.png"); } .page-legal .ambient__layer:first-child { background-image: url("../img/arenas/ambient-06.png"); } /* ------------------------------------------------------------------ nav */ .nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 16px; pointer-events: none; } .nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h); padding-top: env(safe-area-inset-top); transition: background-color .35s, box-shadow .35s; } .nav.is-open { background: var(--deep) !important; } .nav.is-solid, .nav.is-open { background: color-mix(in srgb, var(--deep), transparent 8%); box-shadow: 0 1px 0 var(--line), 0 12px 30px -20px rgba(0, 0, 0, .8); } .nav__bar { display: flex; align-items: center; gap: 28px; height: 100%; } .nav__brand { color: var(--ink); display: block; padding: 8px 0; } .wordmark { display: block; width: auto; height: 20px; } .nav__links { display: flex; align-items: center; gap: 28px; margin-left: auto; } .nav__links a { color: var(--body); font-size: 14.5px; font-weight: 650; text-decoration: none; } .nav__links a:hover, .nav__links a[aria-current] { color: var(--ink); } .nav__toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--clay), transparent 20%); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; } .nav__sheet { max-height: calc(100svh - var(--nav-h)); overflow-y: auto; background: var(--deep); box-shadow: 0 1px 0 var(--line), 0 30px 40px -20px rgba(0, 0, 0, .8); } .nav__sheet nav { display: grid; gap: 4px; padding-top: 8px; padding-bottom: 22px; } .nav__sheet a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 18px; font-weight: 700; text-decoration: none; } .nav__sheet .btn { margin-top: 16px; } @media (max-width: 880px) { .nav__links, .nav__cta { display: none; } .nav__toggle { display: inline-flex; } } /* ------------------------------------------------------------------ stage */ /* An arena painting with Leo standing on its platform. site.js positions the frame and the lion from each painting's measured platform. Everything here that moves does so with transform or opacity only. */ .stage { position: relative; } .stage__echo { position: absolute; inset: 0; background: center 70% / cover no-repeat; } .stage__frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .stage__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 70%; /* no-JS fallback; site.js sizes the frame exactly */ opacity: 0; transition: opacity .7s ease; } .stage__art.is-on { opacity: 1; } .stage__lion { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; will-change: transform; } /* A painted contact shadow under the feet. (A drop-shadow filter on the animating canvas would be re-blurred on every frame.) */ .stage__lion::before { content: ""; position: absolute; z-index: -1; left: 50%; top: calc(var(--feet, .95) * 100%); width: calc(var(--shadow, .5) * 100%); height: 7%; transform: translate(-50%, -62%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .stage__lion.is-ready { opacity: 1; } .stage__lion.is-placed { transition: opacity .5s ease, transform .8s var(--ease); } .stage__lion.is-swapping { opacity: 0; transition-duration: .25s; } .stage__lion canvas { width: 100%; height: 100%; } /* Phones: the crisp painting runs as a band that melts into its blurred echo. */ .stage.is-band .stage__frame { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 88%, transparent 100%); } .stage.is-band .stage__echo { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%); } /* Fit: the whole painting in a card; Leo steps out over its top edge. */ .stage--fit { padding-top: 12%; } .stage--fit .stage__frame { position: relative; height: auto; aspect-ratio: 2436 / 1125; border-radius: var(--r-surface); background: var(--clay-well); box-shadow: inset 0 0 0 1px var(--accent-border), 0 22px 40px -26px rgba(0, 0, 0, .8); } .stage--fit .stage__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .06); } /* Relapse rule: the palette drops to ~40% saturation until the next check-in. Only ever applied to the slip demo, and only after a tap. */ .stage.is-dimmed .stage__frame, .stage.is-dimmed .stage__lion { filter: saturate(.4) brightness(.88); } /* ------------------------------------------------------------------ hero */ .hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: max(660px, 100svh); overflow: hidden; } .hero .stage--hero, .finale .stage--hero { position: absolute; inset: 0; z-index: -2; } .hero__scrim, .finale__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--deep), transparent 6%) 0%, color-mix(in srgb, var(--deep), transparent 30%) 30%, color-mix(in srgb, var(--deep), transparent 100%) 56%), linear-gradient(180deg, color-mix(in srgb, var(--deep), transparent 45%) 0%, transparent 20%, transparent 84%, var(--deep) 100%); } .hero__inner { padding-top: calc(var(--nav-h) + 48px); padding-bottom: 96px; } .hero__inner > * { max-width: min(590px, 52vw); } .hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; } .hero__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 30px 0 0; padding: 0; list-style: none; color: var(--body); font-size: 14px; font-weight: 600; } .hero__trust li { display: inline-flex; align-items: center; gap: 8px; } .hero__trust svg { width: 14px; height: 14px; color: var(--accent-text); } .hero__hud { position: absolute; right: var(--gutter); bottom: 28px; display: grid; grid-template-columns: auto auto; gap: 2px 14px; align-items: baseline; padding: 12px 18px; } .hud__level { grid-row: span 2; align-self: center; color: var(--accent-text); font: 900 12px/1 "Archivo", sans-serif; letter-spacing: .14em; text-transform: uppercase; } .hud__name { color: var(--ink); font-weight: 800; font-size: 15px; } .hud__form { color: var(--body); font-size: 13px; font-weight: 600; } @media (max-width: 899px) { .hero { flex-direction: column; align-items: stretch; min-height: 0; } .hero .stage--hero { position: relative; inset: auto; order: 2; z-index: 0; height: clamp(380px, 108vw, 660px); margin-top: 8px; } .hero__scrim { display: none; } .hero__inner { order: 1; padding-top: calc(var(--nav-h) + 28px); padding-bottom: 0; } .hero__inner > * { max-width: none; } .hero__hud { display: none; } } /* ------------------------------------------------------------------ sections */ .section { position: relative; padding-block: clamp(84px, 11vw, 150px); } .section__head { margin-bottom: clamp(40px, 5vw, 64px); } .section__head--center { text-align: center; } .section__head--center .lede { margin-inline: auto; text-wrap: balance; } .section__head--center .eyebrow::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } /* how */ .how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; } .how__step { padding: 30px 28px 32px; } .how__num { display: block; margin-bottom: 26px; color: var(--accent-text); font: 900 54px/1 "Primal Serif", Georgia, serif; text-shadow: 0 0 20px var(--accent-glow); } .how__step h3 { font-size: 23px; font-weight: 850; letter-spacing: -.01em; } .how__step p { margin-top: 10px; color: var(--body); } @media (max-width: 860px) { .how__steps { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ climb */ .climb__body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); } .climb__sticky { position: sticky; top: max(calc(var(--nav-h) + 12px), calc(50vh - 250px)); align-self: start; } .climb__card { margin: 0; } .climb__hud { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 18px; margin-top: 18px; padding: 16px 20px; border-radius: var(--r-card); background: color-mix(in srgb, var(--clay), transparent 10%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px var(--line); } .climb__day { grid-row: span 2; display: flex; align-items: baseline; gap: 8px; } .climb__day b { color: var(--ink); font: 900 50px/1 "Primal Serif", Georgia, serif; min-width: 1.6ch; text-align: right; font-variant-numeric: lining-nums tabular-nums; } .climb__day small { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .climb__meter { position: relative; height: 8px; border-radius: 99px; background: var(--clay-well); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); overflow: hidden; } .climb__meter i { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent), black 10%), color-mix(in srgb, var(--accent), white 25%)); transform: scaleX(.03); transform-origin: 0 50%; transition: transform .9s var(--ease); } .climb__label { color: var(--body); font-size: 14px; font-weight: 650; } .climb__label span:first-child { color: var(--ink); font-weight: 800; } .climb__steps { margin: 0; padding: 0; list-style: none; } .chapter { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; padding-block: 32px; opacity: .32; transition: opacity .6s ease; } .chapter:first-child { min-height: 46vh; justify-content: flex-start; padding-top: 6vh; } .chapter:last-child { min-height: 70vh; } .chapter.is-active { opacity: 1; } .chapter__day { color: var(--accent-text); font-size: 13px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; } .chapter h3 { margin-top: 12px; font-size: clamp(32px, 3.6vw, 48px); font-weight: 900; line-height: .98; text-transform: uppercase; letter-spacing: -.01em; } .chapter__form { margin-top: 10px; color: var(--accent-text); font: 900 22px/1.2 "Primal Serif", Georgia, serif; } .chapter p:last-child { margin-top: 14px; max-width: 44ch; color: var(--body); font-size: 18px; } @media (max-width: 979px) { .climb__body { display: block; } .climb__sticky { top: var(--nav-h); z-index: 3; margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 12px; background: var(--deep); } .climb__sticky::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 36px; pointer-events: none; background: linear-gradient(180deg, var(--deep), color-mix(in srgb, var(--deep), transparent 100%)); } .climb__hud { margin-top: 10px; padding: 10px 14px; gap: 4px 14px; background: var(--clay); } .climb__day b { font-size: 34px; } .climb__label { font-size: 13px; } .chapter { min-height: 46vh; padding-inline: 4px; } .chapter:first-child { min-height: 40vh; padding-top: 24px; } .chapter p:last-child { font-size: 17px; } } /* ------------------------------------------------------------------ fighters */ .fighters__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); max-width: 1040px; margin-inline: auto; } .fighter { padding: 16px 16px 26px; transition: transform .35s var(--ease), box-shadow .35s; } .fighter:hover { transform: translateY(-4px); } .fighter .stage--fit { padding-top: 11%; } .fighter__text { padding: 20px 10px 0; } .fighter h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; } .fighter p { margin-top: 6px; color: var(--body); } @media (max-width: 720px) { .fighters__grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ bento */ .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; grid-auto-flow: dense; } .tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 26px; overflow: hidden; } .tile h3 { font-size: 21px; font-weight: 850; line-height: 1.15; letter-spacing: -.01em; } .tile p { color: var(--body); font-size: 15.5px; line-height: 1.55; } .tile__kicker { color: var(--accent-text) !important; font-size: 12px !important; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .tile__kicker--red { color: var(--red-ink) !important; } .tile__text { display: flex; flex-direction: column; gap: 10px; } .tile--panic { grid-column: span 2; grid-row: span 2; } .tile--blocker { grid-row: span 2; } .tile--relax, .tile--wide { grid-column: span 2; } .tile--panic h3 { font-size: clamp(26px, 2.4vw, 32px); } /* panic demo */ .panic-demo { position: relative; flex: 1; display: grid; place-items: center; gap: 22px; margin-top: 14px; min-height: 290px; } .panic-demo__mirror { position: relative; width: min(100%, 360px); aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 18px; border-radius: var(--r-surface); background: radial-gradient(60% 70% at 50% 38%, rgba(255, 255, 255, .10), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--clay-high), white 6%), var(--clay-well)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 -40px 60px -30px rgba(0, 0, 0, .6); overflow: hidden; } .panic-demo__mirror::before { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .12) 50%, transparent 58%); animation: sheen 5.5s ease-in-out infinite; } .panic-demo__rec { position: absolute; left: 16px; top: 14px; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .panic-demo__rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3EE08C; box-shadow: 0 0 8px #3EE08C; } .panic-demo__reason { position: relative; min-height: 1.3em; color: var(--ink); font: 900 21px/1.25 "Primal Serif", Georgia, serif; transition: opacity .45s ease, transform .45s ease; } .panic-demo__reason.is-out { opacity: 0; transform: translateY(6px); } .panic-btn { position: relative; display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; color: #fff; font-weight: 900; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; background: radial-gradient(100% 60% at 50% 115%, #FF9A7F 0%, transparent 60%), linear-gradient(180deg, #FF8466 0%, var(--red) 50%, #D8401F 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .22), 0 16px 40px -10px rgba(255, 92, 60, .7); } .panic-btn::before, .panic-btn::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255, 92, 60, .6); animation: ring 2.6s ease-out infinite; } .panic-btn::after { animation-delay: 1.3s; } .panic-btn span { position: relative; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); } /* blocker */ .toggles { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 12px; } .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--r-chip); background: var(--clay-well); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--line); color: var(--ink); font-size: 14.5px; font-weight: 650; } .switch { position: relative; flex: none; width: 44px; height: 26px; border-radius: 99px; background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 14px var(--accent-glow); } .switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); } .shield { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--accent); } .shield svg { width: 42px; height: auto; filter: drop-shadow(0 0 16px var(--accent-glow)); } .shield b { color: var(--ink); font-size: 16px; } /* pledge */ .streak { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; } .streak__flame { width: 30px; height: 38px; align-self: center; color: #FF9A3D; filter: drop-shadow(0 0 12px rgba(255, 154, 61, .7)); animation: flicker 1.8s ease-in-out infinite; transform-origin: 50% 90%; } .streak b { color: var(--ink); font: 900 58px/1 "Primal Serif", Georgia, serif; font-variant-numeric: lining-nums tabular-nums; } .streak small { color: var(--muted); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } /* focus */ .ring { position: relative; width: 116px; height: 116px; margin: 4px 0 6px; } .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ring circle { fill: none; stroke-width: 9; stroke-linecap: round; } .ring__track { stroke: var(--clay-well); } .ring__fill { stroke: var(--accent); stroke-dasharray: 327; stroke-dashoffset: 327; filter: drop-shadow(0 0 6px var(--accent-glow)); transition: stroke-dashoffset 2.4s var(--ease); } .tile.is-in .ring__fill { stroke-dashoffset: 95; } .ring span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font-weight: 850; font-size: 22px; font-variant-numeric: tabular-nums; } /* wide tiles: copy on the left, the visual on the right */ .tile--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; } /* coach */ .chat { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; } .chat p { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14px !important; line-height: 1.4 !important; } .chat__me { align-self: flex-end; color: var(--on-accent) !important; background: var(--accent); border-bottom-right-radius: 6px !important; font-weight: 650; } .chat__leo { align-self: flex-start; color: var(--ink) !important; background: var(--clay-high); border-bottom-left-radius: 6px !important; box-shadow: inset 0 0 0 1px var(--line); } /* journal */ .tile__glyph { width: 52px; height: 52px; margin: 6px 0; color: var(--accent); filter: drop-shadow(0 0 16px var(--accent-glow)); } /* relax */ .tile--relax { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: center; } .scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .scenes li { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); } .scenes img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .scenes li:hover img { transform: scale(1.08); } .scenes li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .7)); } .scenes span { position: absolute; left: 10px; bottom: 9px; z-index: 1; color: #fff; font-size: 12.5px; font-weight: 800; } /* games */ .bubbles { position: relative; height: 84px; margin: 4px 0; } .bubbles i { position: absolute; bottom: 0; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .85), var(--accent) 38%, color-mix(in srgb, var(--accent), black 30%)); box-shadow: 0 0 16px var(--accent-glow); animation: bubble 5s ease-in-out infinite; } .bubbles i:nth-child(1) { left: 4%; width: 34px; height: 34px; } .bubbles i:nth-child(2) { left: 22%; width: 22px; height: 22px; animation-delay: -1.2s; animation-duration: 4.2s; } .bubbles i:nth-child(3) { left: 38%; width: 40px; height: 40px; animation-delay: -2.4s; animation-duration: 5.6s; } .bubbles i:nth-child(4) { left: 58%; width: 18px; height: 18px; animation-delay: -.6s; animation-duration: 3.8s; } .bubbles i:nth-child(5) { left: 70%; width: 30px; height: 30px; animation-delay: -3.1s; } .bubbles i:nth-child(6) { left: 86%; width: 24px; height: 24px; animation-delay: -1.8s; animation-duration: 4.6s; } /* analytics */ .spark { width: 100%; height: 64px; margin: 6px 0 4px; overflow: visible; } .spark__area { fill: var(--accent-soft); } .spark__line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; filter: drop-shadow(0 0 6px var(--accent-glow)); transition: stroke-dashoffset 2.2s var(--ease); vector-effect: non-scaling-stroke; } .tile.is-in .spark__line { stroke-dashoffset: 0; } @media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile--panic, .tile--relax { grid-column: span 2; } .tile--wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: 10px; } .tile--panic { grid-row: auto; } .tile--blocker { grid-row: span 2; } } @media (max-width: 680px) { .bento { grid-template-columns: minmax(0, 1fr); } .tile--panic, .tile--relax { grid-column: auto; } .tile--blocker { grid-row: auto; } .tile--relax { grid-template-columns: minmax(0, 1fr); } .tile { padding: 22px; } .panic-demo { min-height: 0; } } /* ------------------------------------------------------------------ slip */ .slip__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; } .slip__text .btn { margin-top: 30px; } .slip__card { margin: 0; } .slip__status { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 16px; border-radius: 999px; background: color-mix(in srgb, var(--clay), transparent 10%); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 14px; font-weight: 700; } .slip__status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); transition: background .6s, box-shadow .6s; } .slip.is-dimmed .slip__status::before { background: #6E7783; box-shadow: none; } @media (max-width: 860px) { .slip__grid { grid-template-columns: minmax(0, 1fr); } .slip__card { order: -1; } } /* ------------------------------------------------------------------ faq */ .faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: start; } .faq__grid .section__head { position: sticky; top: calc(var(--nav-h) + 32px); } .faq__list { display: grid; gap: 12px; } .faq details { border-radius: var(--r-card); } .faq summary { position: relative; display: block; cursor: pointer; list-style: none; padding: 22px 64px 22px 24px; color: var(--ink); font-size: 17.5px; font-weight: 800; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: linear-gradient(var(--accent-text), var(--accent-text)) center / 12px 2px no-repeat, linear-gradient(var(--accent-text), var(--accent-text)) center / 2px 12px no-repeat, var(--accent-soft); transition: transform .3s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding: 0 24px 24px; color: var(--body); } @media (max-width: 900px) { .faq__grid { grid-template-columns: minmax(0, 1fr); } .faq__grid .section__head { position: static; } } /* ------------------------------------------------------------------ finale */ .finale__scrim { background: linear-gradient(90deg, color-mix(in srgb, var(--deep), transparent 3%) 0%, color-mix(in srgb, var(--deep), transparent 12%) 34%, color-mix(in srgb, var(--deep), transparent 50%) 50%, color-mix(in srgb, var(--deep), transparent 100%) 66%), linear-gradient(180deg, color-mix(in srgb, var(--deep), transparent 30%) 0%, transparent 22%, transparent 84%, var(--deep) 100%); } .finale { position: relative; isolation: isolate; display: flex; align-items: center; min-height: max(640px, 92svh); overflow: hidden; } .finale__inner { padding-block: 120px; } .finale__inner > * { max-width: min(600px, 52vw); } .finale__cta { margin-top: 34px; } .finale__fine { margin-top: 18px; color: var(--muted); font-size: 13.5px; font-weight: 600; } @media (max-width: 899px) { .finale { flex-direction: column; align-items: stretch; min-height: 0; } .finale .stage--hero { position: relative; inset: auto; order: 2; z-index: 0; height: clamp(380px, 108vw, 660px); } .finale__scrim { display: none; } .finale__inner { order: 1; padding-block: 90px 0; } .finale__inner > * { max-width: none; } } /* ------------------------------------------------------------------ footer */ .footer { position: relative; margin-top: 0; padding: 72px 0 calc(40px + env(safe-area-inset-bottom)); background: #0A0B0F; box-shadow: 0 -1px 0 var(--line); } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; } .footer__brand a { color: var(--ink); display: inline-block; } .footer__brand .wordmark { height: 24px; } .footer__brand p { margin: 14px 0 22px; max-width: 32ch; color: var(--body); } .footer__col { display: flex; flex-direction: column; gap: 10px; } .footer__col h2 { margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .footer__col a { color: var(--body); font-size: 15px; font-weight: 600; text-decoration: none; } .footer__col a:hover { color: var(--ink); } .footer__fine { position: relative; display: grid; gap: 8px; margin-top: 56px; padding-top: 26px; color: var(--muted); font-size: 13px; line-height: 1.6; } .footer__fine::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); } @media (max-width: 860px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 420px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------------ inner pages */ .page-hero { padding: calc(var(--nav-h) + clamp(48px, 8vw, 96px)) 0 clamp(36px, 5vw, 56px); } .page-hero .display { font-size: clamp(40px, 6vw, 80px); } .page-hero .lede { margin-top: 18px; } /* legal */ .legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .legal-tabs a { padding: 9px 16px; border-radius: 999px; color: var(--body); font-size: 14px; font-weight: 700; text-decoration: none; background: color-mix(in srgb, var(--clay), transparent 30%); box-shadow: inset 0 0 0 1px var(--line); } .legal-tabs a[aria-current] { color: var(--on-accent); background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); } .legal-updated { margin-top: 18px; color: var(--muted); font-size: 14.5px; } .legal-updated strong { color: var(--body); } .legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; padding-bottom: 110px; } .legal-toc { position: sticky; top: calc(var(--nav-h) + 24px); max-height: calc(100vh - var(--nav-h) - 48px); overflow: auto; padding: 18px 16px; border-radius: var(--r-card); } .legal-toc h2 { margin: 2px 6px 10px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .legal-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; } .legal-toc a { display: block; padding: 7px 8px; border-radius: 10px; color: var(--body); font-size: 13.5px; font-weight: 600; line-height: 1.35; text-decoration: none; } .legal-toc a:hover, .legal-toc a.is-current { color: var(--ink); background: var(--accent-soft); } .prose { max-width: 76ch; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-surface); font-size: 16.5px; line-height: 1.7; } .prose > :first-child { margin-top: 0; } .prose h2 { margin: 2.2em 0 .6em; padding-top: .4em; font-size: clamp(22px, 2.2vw, 27px); font-weight: 850; line-height: 1.2; letter-spacing: -.005em; } .prose h3 { margin: 1.8em 0 .5em; font-size: 19px; font-weight: 800; } .prose p, .prose ul, .prose ol, .prose .table-wrap { margin: 0 0 1em; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin: .35em 0; } .prose li::marker { color: var(--accent-text); } .prose code { padding: .12em .4em; border-radius: 6px; background: var(--clay-well); color: var(--ink); font-size: .9em; } .prose a { word-break: break-word; } .table-wrap { overflow-x: auto; border-radius: var(--r-chip); box-shadow: inset 0 0 0 1px var(--line-strong); } .prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; } .prose th, .prose td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .prose th { color: var(--ink); background: var(--clay-high); font-weight: 800; } .prose tr:last-child td { border-bottom: 0; } @media (max-width: 980px) { .legal-layout { grid-template-columns: minmax(0, 1fr); } .legal-toc { position: static; max-height: none; } .legal-toc ol { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } } @media (max-width: 560px) { .prose { padding: 22px 18px; font-size: 16px; } } /* support */ .help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .help-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; color: var(--body); text-decoration: none; transition: transform .3s var(--ease); } a.help-card:hover { transform: translateY(-3px); color: var(--body); } .help-card h2, .help-card h3 { font-size: 19px; font-weight: 850; } .help-card p { font-size: 15px; } .help-card .tile__kicker { margin-bottom: 4px; } .contact-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: clamp(24px, 4vw, 36px); } .contact-card h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; text-transform: uppercase; } .contact-card p { margin-top: 8px; color: var(--body); max-width: 56ch; } .contact-card__actions { display: flex; flex-wrap: wrap; gap: 10px; } .help-sections { display: grid; gap: 18px; margin-top: 56px; padding-bottom: 110px; } .help-section { padding: clamp(24px, 4vw, 40px); scroll-margin-top: calc(var(--nav-h) + 20px); } .help-section > h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; text-transform: uppercase; } .help-section > .tile__kicker { margin-bottom: 10px; } .help-section .prose-lite { margin-top: 14px; max-width: 72ch; } .prose-lite p, .prose-lite ol, .prose-lite ul { margin: 0 0 .9em; } .prose-lite ol, .prose-lite ul { padding-left: 1.3em; } .prose-lite li { margin: .4em 0; } .prose-lite li::marker { color: var(--accent-text); font-weight: 800; } .path { display: inline; padding: .1em .45em; border-radius: 7px; background: var(--clay-well); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-weight: 700; font-size: .95em; white-space: normal; } .callout { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-chip); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); color: var(--ink); font-size: 15px; } .prose-lite .lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; } .lines li { padding: 14px 16px; border-radius: var(--r-chip); background: var(--clay-well); box-shadow: inset 0 0 0 1px var(--line); } .lines b { display: block; font-size: 15px; } .lines span { color: var(--body); font-size: 14.5px; } .after-lines { margin-top: 14px !important; } @media (max-width: 900px) { .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .help-grid { grid-template-columns: minmax(0, 1fr); } } /* 404 */ .lost { min-height: 100svh; display: grid; align-content: center; padding-block: calc(var(--nav-h) + 40px) 80px; text-align: center; } .lost > * { justify-self: center; } .lost .stage--fit { width: min(100%, 560px); margin: 0 auto 30px; } .lost .lede { margin-inline: auto; } .lost .btn { margin-top: 28px; } /* ------------------------------------------------------------------ live */ /* Decorative loops only run while their tile is on screen (site.js adds .is-live). Running off screen they still cost the compositor every frame. */ .panic-demo__mirror::before, .panic-btn::before, .panic-btn::after, .streak__flame, .bubbles i { animation-play-state: paused; } .is-live .panic-demo__mirror::before, .is-live .panic-btn::before, .is-live .panic-btn::after, .is-live .streak__flame, .is-live .bubbles i { animation-play-state: running; } /* ------------------------------------------------------------------ reveal */ .reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.pre { opacity: 0; transform: translateY(26px); } /* ------------------------------------------------------------------ keyframes */ @keyframes ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } } @keyframes sheen { 0%, 100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } } @keyframes flicker { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.94, 1.06); } 60% { transform: scale(1.04, .96); } } @keyframes bubble { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-34px) scale(1.06); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal.pre { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ print */ @media print { :root { --deep: #fff; } body { background: #fff; color: #111; font-size: 11pt; } .nav, .ambient, .footer, .legal-toc, .legal-tabs, .skip { display: none !important; } .clay, .prose { box-shadow: none; background: #fff; } h1, h2, h3, b, strong, .prose th { color: #000; } a { color: #000; } .page-hero { padding-top: 0; } .prose { max-width: none; padding: 0; } .prose th { background: #eee; } }