/* glossgo fund · motion direction C · money flow Tokens first, then components in page order. Static layout is the default; html.motion (set in unless prefers-reduced-motion) enables the animated layout. */ :root { --ink: #050F0A; --forest-deep: #07170F; --forest: #0B1E15; --forest-2: #0F2419; --forest-3: #143122; --hair: rgba(110, 231, 183, .14); --hair-2: rgba(110, 231, 183, .26); --glass: rgba(244, 241, 232, .045); --glass-2: rgba(244, 241, 232, .08); --text: #F4F1E8; --text-2: #B3C7BA; --text-3: #8BA697; --mint: #6EE7B7; --emerald: #34D399; --emerald-deep: #0D9268; --green: #0A7A57; --green-hover: #086548; --gold: #F2B53A; --gold-hi: #FFE3A1; --gold-deep: #B7791F; --gold-ink: #1A1405; --gold-text: #9A5B07; --gold-soft: #FDF3DC; --paper: #F7F6F2; --paper-2: #EFEDE6; --paper-line: #E4E1D8; --ptext: #14171A; --ptext-2: #52575E; --f-display: "Bricolage Grotesque", Geist, system-ui, sans-serif; --f-sans: Geist, system-ui, -apple-system, sans-serif; --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace; --ease-out: cubic-bezier(.22, 1, .36, 1); --gutter: 40px; --maxw: 1360px; --nav-h: 72px; } @media (max-width: 1023.98px) { :root { --gutter: 24px; --nav-h: 64px; } } @media (max-width: 639.98px) { :root { --gutter: 16px; } } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--forest); } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { margin: 0; background: var(--forest); color: var(--text); font: 400 16px/1.55 var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; } svg, canvas { display: block; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--gold-ink); padding: 10px 16px; border-radius: 999px; font-weight: 600; } .skip:focus { top: 12px; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; } .i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .eyebrow { font: 500 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); } .h2 { font-family: var(--f-display); font-weight: 700; font-variation-settings: "opsz" 72; font-size: clamp(34px, 2.6vw + 16px, 60px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; } .lead { font-size: clamp(16px, .4vw + 14px, 19px); line-height: 1.5; color: var(--text-2); } /* intro gate: hidden only while JS prepares the first frame (fallback timer in ) */ .motion:not(.is-ready) [data-intro], .motion:not(.is-ready) [data-split] { visibility: hidden; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; border: 0; font: 600 15px/1 var(--f-sans); text-decoration: none; white-space: nowrap; transition: transform .12s var(--ease-out), background-color .16s, box-shadow .16s; } .btn:active { transform: translateY(1px); } .btn .i { transition: transform .16s var(--ease-out); } .btn:hover .i { transform: translateX(2px); } .btn--sm { height: 40px; padding: 0 16px; font-size: 14px; } .btn--lg { height: 56px; padding: 0 28px; font-size: 16px; } .btn--mint { background: var(--emerald); color: #04150D; box-shadow: 0 0 0 1px rgba(110, 231, 183, .35) inset, 0 10px 30px -10px rgba(52, 211, 153, .65); } .btn--mint:hover { background: var(--mint); } .btn--line { background: transparent; color: var(--text); box-shadow: 0 0 0 1px var(--hair-2) inset; } .btn--line:hover { background: var(--glass-2); } .btn--ghost { background: transparent; color: var(--ptext); box-shadow: 0 0 0 1px #D3CFC3 inset; } .btn--ghost:hover { background: var(--paper-2); } /* ---------- nav ---------- */ .nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); transition: transform .45s var(--ease-out), background-color .3s, border-color .3s; border-bottom: 1px solid transparent; } .nav.is-solid { background: rgba(7, 23, 15, .72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--hair); } .nav.is-hidden { transform: translateY(-100%); } .nav__in { height: 100%; display: flex; align-items: center; gap: 32px; } .wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 18px/1 var(--f-sans); letter-spacing: -.02em; } .wordmark b { font-weight: 600; color: var(--mint); } .mark { width: 28px; height: 20px; } .mark__body { fill: var(--text); } .mark__perf { stroke: var(--forest); stroke-width: 1.4; stroke-dasharray: 2 2; } .mark__coin { fill: var(--gold); } .nav__links { display: flex; gap: 28px; margin-left: 12px; } .nav__links a { text-decoration: none; font-size: 14px; color: var(--text-2); transition: color .16s; } .nav__links a:hover { color: var(--text); } .nav__actions { margin-left: auto; display: flex; align-items: center; gap: 16px; } .lang { display: flex; padding: 3px; border-radius: 999px; box-shadow: 0 0 0 1px var(--hair) inset; } .lang button { border: 0; background: none; height: 30px; min-width: 36px; border-radius: 999px; font: 500 12px/1 var(--f-mono); color: var(--text-2); } .lang button[aria-pressed="true"] { background: var(--glass-2); color: var(--text); } .nav__login { font-size: 14px; text-decoration: none; color: var(--text-2); } @media (max-width: 959.98px) { .nav__links, .lang, .nav__login { display: none; } } /* ---------- ambient field (gradient blobs, grid, guilloche rosette) ---------- */ .field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .blob { position: absolute; border-radius: 50%; will-change: transform; } .blob--a { width: 80vw; height: 80vw; left: -28vw; top: 10%; background: radial-gradient(closest-side, rgba(13, 146, 104, .55), rgba(13, 146, 104, 0)); } .blob--b { width: 70vw; height: 70vw; right: -24vw; top: -30%; background: radial-gradient(closest-side, rgba(20, 96, 70, .7), rgba(20, 96, 70, 0)); } .blob--c { width: 42vw; height: 42vw; right: 4vw; top: 6%; background: radial-gradient(closest-side, rgba(242, 181, 58, .16), rgba(242, 181, 58, 0)); } .gridlines { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(110, 231, 183, .22) 1px, transparent 1.2px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%); } .rosette { position: absolute; width: 980px; height: 980px; right: -330px; top: -170px; opacity: .45; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); } .hero .field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, rgba(7, 23, 15, 0), var(--forest-deep)); } .grain { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: clip; background: radial-gradient(120% 90% at 20% 0%, #10281C 0%, var(--forest) 55%, var(--forest-deep) 100%); } .hero__in { position: relative; z-index: 2; padding-top: calc(var(--nav-h) + clamp(24px, 5vh, 48px)); padding-bottom: clamp(32px, 6vh, 56px); } .hero__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(110, 231, 183, .16); flex: none; } .display { font-family: var(--f-display); font-weight: 750; font-variation-settings: "opsz" 96; font-size: clamp(44px, min(8.1vw, 14vh), 124px); line-height: .94; letter-spacing: -.046em; } .display > span { display: block; } .display__muted { color: #88A897; } .display .w-mask, .final__h .w-mask { padding: 0 .02em .16em; margin: 0 -.02em -.16em; } .hero__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: end; margin-top: clamp(36px, 7vh, 64px); } .hero__left .lead { max-width: 560px; margin-bottom: 24px; } .flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; } .flow__line { fill: none; stroke: url(#flowGrad); stroke-width: 2.2; stroke-linecap: round; } .flow__glow { fill: none; stroke: url(#flowGrad); stroke-width: 9; stroke-linecap: round; opacity: .16; } .final .flow__line { stroke: url(#flowGrad2); } .final .flow__glow { stroke: url(#flowGrad2); } .flow__dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .flow__node { position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; pointer-events: none; } .flow__node i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(242, 181, 58, .18), 0 0 24px rgba(242, 181, 58, .7); } .flow__node span { position: absolute; right: -4px; top: 20px; white-space: nowrap; font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); } .flow__node[hidden] { display: none; } /* idea box */ .ideabox { position: relative; border-radius: 22px; padding: 18px 18px 14px; background: linear-gradient(180deg, rgba(244, 241, 232, .07), rgba(244, 241, 232, .035)); box-shadow: 0 0 0 1px var(--hair-2) inset, 0 30px 60px -30px rgba(0, 0, 0, .6); transition: box-shadow .2s; } .ideabox:focus-within { box-shadow: 0 0 0 1px rgba(242, 181, 58, .7) inset, 0 0 0 4px rgba(242, 181, 58, .16), 0 30px 60px -30px rgba(0, 0, 0, .6); } .ideabox textarea { width: 100%; border: 0; background: none; resize: none; font-size: 18px; line-height: 1.45; min-height: 56px; padding: 2px 4px; outline: none; } .ideabox textarea::placeholder { color: var(--text-3); } .ideabox__row { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 10px; } .country { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; box-shadow: 0 0 0 1px var(--hair) inset; color: var(--text-2); font-size: 14px; } .country select { appearance: none; border: 0; background: transparent; font-size: 14px; color: var(--text); padding-right: 4px; outline: none; } .country select option { color: #111; } .micro { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 14px; color: var(--text-2); } .micro li { display: inline-flex; align-items: center; gap: 6px; } .micro .i { color: var(--mint); width: 14px; height: 14px; } /* catalog panel: the real data */ .catalog { justify-self: end; width: 100%; max-width: 540px; position: relative; border-radius: 22px; padding: 22px 24px 20px; background: linear-gradient(160deg, rgba(22, 52, 36, .92), rgba(10, 29, 20, .92)); box-shadow: 0 0 0 1px var(--hair-2) inset, inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 90px -40px rgba(0, 0, 0, .8); } .catalog__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 12px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); } .catalog__live { display: inline-flex; align-items: center; gap: 8px; color: var(--mint); } .catalog__big { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .catalog__big b { font: 500 clamp(44px, 3.6vw, 60px)/1 var(--f-mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .catalog__big span { font-size: 15px; color: var(--text-2); } .catalog__open { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--text-2); } .catalog__open b { font: 600 14px/1 var(--f-mono); color: var(--mint); } .stack { display: flex; gap: 3px; height: 8px; margin-top: 18px; } .stack i { flex: var(--w) 1 0; border-radius: 4px; background: var(--c); } .legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 12px; font: 400 12px/1.3 var(--f-mono); color: var(--text-2); } .legend li { display: flex; align-items: center; gap: 8px; } .legend li i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; } .legend li b { margin-left: auto; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; } .c1 { --c: #6EE7B7; } .c2 { --c: #34D399; } .c3 { --c: #1FA97A; } .c4 { --c: #A9C2B4; } .c5 { --c: #6A8C7B; } .catalog__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-top: 1px solid var(--hair); } .catalog__stats div { padding: 14px 0 0; } .catalog__stats div + div { padding-left: 16px; border-left: 1px solid var(--hair); } .catalog__stats dd { font: 500 22px/1 var(--f-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .catalog__stats dt { font-size: 12px; color: var(--text-2); margin-top: 6px; } .catalog__foot { margin-top: 16px; font: 400 12px/1.3 var(--f-mono); color: var(--text-3); } @media (max-width: 1023.98px) { .hero__row { grid-template-columns: 1fr; margin-top: 48px; align-items: start; } .catalog { max-width: 560px; } } @media (max-width: 639.98px) { .hero__in { padding-top: calc(var(--nav-h) + 32px); } .hero__eyebrow .hide-sm { display: none; } .display { font-size: clamp(42px, 12.4vw, 56px); letter-spacing: -.04em; } .hero__row { margin-top: 44px; } .ideabox__row { flex-direction: column; align-items: stretch; } .ideabox__row .btn { height: 52px; } .country { align-self: flex-start; } .rosette { width: 620px; height: 620px; right: -300px; top: -120px; } .flow__node span { display: none; } } /* ---------- signature: the engine ---------- */ .sig { position: relative; background: linear-gradient(180deg, var(--forest-deep), var(--forest) 30%, var(--forest) 70%, var(--forest-deep)); overflow: clip; } .sig__in { position: relative; z-index: 1; padding-block: calc(var(--nav-h) + 24px) 48px; } @media (min-width: 1024px) { .motion .sig { height: 100vh; min-height: 620px; display: flex; align-items: center; } .motion .sig__in { padding-block: calc(var(--nav-h) + 8px) 16px; } } .pin-fit { transform-origin: 50% 0; } .sig__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px 48px; align-items: end; margin-bottom: 36px; } .sig__head .eyebrow { grid-column: 1 / -1; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; padding-bottom: 16px; } .step { display: grid; gap: 4px; } .step__n { font: 500 12px/1 var(--f-mono); color: var(--mint); letter-spacing: .06em; } .step b { font: 600 19px/1.2 var(--f-display); letter-spacing: -.015em; } .step span:last-child { font-size: 14px; line-height: 1.4; color: var(--text-2); } .steps__rail { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hair); border-radius: 2px; overflow: hidden; } .steps__rail i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--emerald), var(--mint) 70%, var(--gold)); transform-origin: 0 50%; } .stage-note { margin-top: 20px; font-size: 12px; color: var(--text-3); } .stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr) minmax(0, 1.32fr); gap: clamp(20px, 3.4vw, 56px); align-items: center; } .slot { position: relative; min-width: 0; } .slot--left { display: grid; } .slot--left > * { grid-area: 1 / 1; align-self: center; } .slot--engine { display: grid; justify-items: center; gap: 22px; } /* founder profile (a pass) */ .profile { position: relative; z-index: 2; border-radius: 20px; padding: 20px 22px; background: linear-gradient(165deg, #1A3C2A, #0C2116); box-shadow: 0 0 0 1px var(--hair-2) inset, 0 30px 70px -30px rgba(0, 0, 0, .75); will-change: transform; } .profile__head { display: flex; justify-content: space-between; align-items: center; } .tag-sample { font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); padding: 5px 8px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(242, 181, 58, .35) inset; } .profile__idea { margin-top: 14px; font: 600 21px/1.25 var(--f-display); letter-spacing: -.015em; text-wrap: balance; } .profile__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .profile__tags li { font-size: 13px; padding: 5px 10px; border-radius: 999px; background: rgba(110, 231, 183, .1); color: var(--mint); } .perf { position: relative; height: 1px; margin: 18px -22px; border-top: 1.5px dashed rgba(110, 231, 183, .22); } .perf::before, .perf::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--forest); } .perf::before { left: -8px; } .perf::after { right: -8px; } .profile__fields { display: grid; gap: 0; } .profile__fields > div { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 15px; } .profile__fields > div:last-child { border-bottom: 0; } .profile__fields dt { color: var(--text-2); } .profile__fields dd { font-weight: 500; text-align: right; } .profile__fields .sk { position: absolute; right: 0; top: 50%; width: 84px; height: 8px; margin-top: -4px; border-radius: 4px; background: rgba(244, 241, 232, .1); } .profile__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--text-2); } .profile__foot .i { color: var(--mint); } /* run log */ .log { position: relative; z-index: 1; width: 100%; border-radius: 20px; padding: 16px 20px; background: rgba(5, 15, 10, .55); box-shadow: 0 0 0 1px var(--hair) inset; font: 400 13px/1.3 var(--f-mono); } .log__title { display: flex; justify-content: space-between; padding: 2px 0 10px; color: var(--text-3); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .log li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(110, 231, 183, .08); color: var(--text-2); } .log li::before { content: "›"; color: var(--mint); } .log li.log__title { border-top: 0; padding-top: 2px; color: var(--text-3); } .log li.log__title::before { content: none; } .log li.log__title span { margin-left: auto; } .log li b { margin-left: auto; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; } .log li b.ok { display: inline-flex; align-items: center; gap: 6px; color: var(--mint); } .log li b.ok .i { width: 14px; height: 14px; } .log li.log__end { color: var(--text); } .log li.log__end b { color: var(--gold); font-size: 15px; } /* engine */ .engine { position: relative; width: min(100%, 300px); aspect-ratio: 1; } .eng-layer { position: absolute; inset: 0; } .eng-layer svg { width: 100%; height: 100%; overflow: visible; } .eng-ticks { fill: none; stroke: rgba(110, 231, 183, .34); stroke-width: 10; stroke-dasharray: 1.3 11.79; } .eng-dash { fill: none; stroke: rgba(110, 231, 183, .24); stroke-width: 1; stroke-dasharray: 3 7; } .eng-track { fill: none; stroke: rgba(244, 241, 232, .08); stroke-width: 4; } .eng-arc { fill: none; stroke: url(#arcGrad); stroke-width: 4; stroke-linecap: round; } .eng-core { stroke: rgba(110, 231, 183, .28); stroke-width: 1; } .eng-node { fill: var(--forest); stroke: rgba(110, 231, 183, .45); stroke-width: 1.5; } .eng-node-on { fill: var(--mint); } .eng-halo { fill: rgba(110, 231, 183, .22); } .engine__glow { position: absolute; left: 50%; top: 50%; width: 70%; height: 70%; margin: -35% 0 0 -35%; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 231, 183, .75), rgba(110, 231, 183, 0)); opacity: 0; } .engine__read { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 8px; } .engine__read b { font: 500 44px/1 var(--f-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .engine__labels-mask { height: 16px; overflow: hidden; } .engine__labels { display: grid; transform: translateY(-75%); } .engine__labels span { height: 16px; font: 500 12px/16px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); } .rules { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 300px); } .rules li { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; font-size: 14px; color: var(--text-2); box-shadow: 0 0 0 1px var(--hair) inset; overflow: hidden; } .rule__on { position: absolute; inset: 0; background: rgba(110, 231, 183, .12); box-shadow: 0 0 0 1px rgba(110, 231, 183, .45) inset; border-radius: inherit; } .rules li .i, .rules li span:not(.rule__on) { position: relative; } .rules li .i { color: var(--mint); width: 15px; height: 15px; } /* results + tickets */ .results { position: relative; } .results__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; } .results__head .eyebrow { white-space: nowrap; } .results__head .mono { font-size: 12px; color: var(--text-3); } .deck { display: grid; gap: 8px; } .locked { position: relative; margin-top: 8px; } .tk { position: relative; } .tk__ghost { position: absolute; inset: 0; border-radius: 14px; border: 1px dashed rgba(110, 231, 183, .22); background: rgba(110, 231, 183, .025); display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-right: 16px; overflow: hidden; color: var(--text-3); } .g-rank { justify-self: center; font: 500 13px/1 var(--f-mono); } .g-body { display: grid; gap: 7px; min-width: 0; } .g-bar { display: block; width: 46%; height: 6px; border-radius: 3px; background: rgba(244, 241, 232, .075); } .g-bar--lg { width: 64%; height: 10px; border-radius: 5px; } .g-bar--sm { width: 28%; } .g-chips { display: flex; gap: 6px; margin-top: 6px; } .g-chips i { width: 64px; height: 18px; border-radius: 999px; background: rgba(110, 231, 183, .06); } .g-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px dashed rgba(242, 181, 58, .4); } .tk__ghost--one { grid-template-columns: 92px minmax(0, 1fr) auto; align-items: start; padding-top: 18px; } .tk__ghost--one .g-rank { font: 600 30px/1 var(--f-display); letter-spacing: -.04em; color: rgba(244, 241, 232, .3); } .g-ring { width: 56px; height: 56px; border-radius: 50%; border: 1.5px dashed rgba(242, 181, 58, .4); } .g-terms { position: absolute; left: 106px; bottom: 16px; display: flex; gap: 12px; } .g-terms i { width: 64px; height: 6px; border-radius: 3px; background: rgba(244, 241, 232, .075); } .g-state { position: absolute; right: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .g-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(242, 181, 58, .18); } .motion .tk__ghost::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(110, 231, 183, .08) 50%, transparent 70%); transform: translateX(-100%); animation: gscan 2.8s linear infinite; animation-delay: calc(var(--gi, 0) * .14s); } @keyframes gscan { to { transform: translateX(100%); } } .tk__fly { position: relative; perspective: 1400px; will-change: transform; } .tk__card { position: relative; transform-style: preserve-3d; } .tk--open .tk__card { transform: rotateY(180deg); } .tk__back, .tk__face { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 14px; } .tk__back { --stub: 70px; position: relative; height: 58px; display: grid; grid-template-columns: var(--stub) minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding-right: 14px; background: linear-gradient(180deg, #153524, #0F281B); box-shadow: 0 0 0 1px rgba(110, 231, 183, .16) inset; overflow: hidden; -webkit-mask: radial-gradient(circle 7px at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7px at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 7px at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7px at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; } .tk__back::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: var(--stub); border-left: 1.5px dashed rgba(110, 231, 183, .2); } .tk__back::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-radial-gradient(circle at 115% 50%, rgba(110, 231, 183, .07) 0 1px, transparent 1.5px 7px); } .tk__rank { justify-self: center; font: 600 22px/1 var(--f-display); letter-spacing: -.03em; } .tk__rank small { font-size: .6em; color: var(--text-3); margin-right: 1px; } .band { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; } .band i { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); } .band i.off { background: rgba(244, 241, 232, .18); } .band em { font-style: normal; margin-left: 2px; } .sk-row { display: flex; gap: 6px; margin-top: 7px; } .sk-row i { height: 6px; border-radius: 3px; background: rgba(244, 241, 232, .09); } .sk-row i:first-child { width: 42%; } .sk-row i:last-child { width: 26%; } .bucket { font-size: 12px; font-weight: 500; padding: 5px 9px; border-radius: 999px; color: var(--gold); background: rgba(242, 181, 58, .1); white-space: nowrap; } .bucket--muted { color: var(--text-2); background: rgba(244, 241, 232, .07); } .tk--open .tk__back { position: absolute; inset: 0; height: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 0 0 0 28px; --stub: 96px; } .tk--open .tk__back::before { display: none; } .tk__back-rank { font: 700 72px/1 var(--f-display); letter-spacing: -.05em; } .tk__back-rank small { font-size: .5em; color: var(--text-3); } .tk__back-tag { font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); } .tk__back-mark { position: absolute; right: 24px; top: 50%; width: 84px; height: 60px; margin-top: -30px; opacity: .9; } /* #1 face: paper, the product's own ticket */ .tk__face { --stub: 92px; position: relative; transform: rotateY(180deg); display: grid; grid-template-columns: var(--stub) minmax(0, 1fr); background: var(--paper); color: var(--ptext); box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .8); -webkit-mask: radial-gradient(circle 8px at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 8px at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; } .tkf__stub { display: flex; flex-direction: column; gap: 6px; padding: 14px 10px 12px 14px; background: var(--paper-2); border-right: 1.5px dashed #CBC6B8; } .tkf__rank { font: 700 34px/1 var(--f-display); letter-spacing: -.05em; } .tkf__rank small { font-size: .55em; color: var(--ptext-2); } .tkf__type { display: grid; justify-items: start; gap: 3px; font-size: 12px; line-height: 1.2; color: var(--ptext-2); } .tkf__type .i { width: 13px; height: 13px; } .due { margin-top: auto; display: grid; padding: 6px 8px; border-radius: 8px; background: var(--gold-soft); color: var(--gold-text); } .due small { font-size: 12px; line-height: 1.2; } .due b { font: 700 19px/1.1 var(--f-display); } .due em { font: 500 12px/1.2 var(--f-mono); font-style: normal; } .tkf__body { padding: 14px 16px 14px 16px; min-width: 0; } .tkf__top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; } .tkf__title h3 { font: 600 19px/1.2 var(--f-display); letter-spacing: -.015em; } .tkf__title p { font-size: 13px; color: var(--ptext-2); margin-top: 3px; } .ring { --p: 94; flex: none; position: relative; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--p) * 1%), #E9E6DC 0); display: grid; place-items: center; } .ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; } .ring b { position: relative; font: 600 16px/1 var(--f-mono); } .ring small { font-size: 12px; font-weight: 500; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .chips li { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 999px; background: #E3F4EC; color: #0A6B4D; } .chips .i { width: 12px; height: 12px; } .terms { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; border-top: 1px dashed #D3CFC3; } .terms div { padding-top: 8px; } .terms div + div { padding-left: 12px; border-left: 1px dashed #D3CFC3; } .terms dt { font-size: 12px; color: var(--ptext-2); } .terms dd { font: 500 14px/1.3 var(--f-mono); } /* the coin and the lock */ .coin { --s: 44px; position: relative; flex: none; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: var(--gold-ink); background: radial-gradient(circle at 34% 28%, var(--gold-hi), var(--gold) 46%, var(--gold-deep) 100%); box-shadow: inset 0 -3px 0 rgba(120, 70, 10, .35), inset 0 2px 0 rgba(255, 255, 255, .5), 0 8px 22px -6px rgba(242, 181, 58, .55); } .coin .i { width: 44%; height: 44%; stroke-width: 2.4; } .coin::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .8) 50%, transparent 62%); transform: translateX(-130%); } .motion .coin::after { animation: shine 3.4s var(--ease-out) infinite; animation-delay: var(--d, 0s); } @keyframes shine { 0%, 58% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } } .coin--xs { --s: 22px; box-shadow: inset 0 -2px 0 rgba(120, 70, 10, .35), 0 4px 10px -4px rgba(242, 181, 58, .6); } .coin--xs .i { width: 12px; height: 12px; } .deck--locked .tk:nth-child(1) .coin { --d: .0s; } .deck--locked .tk:nth-child(2) .coin { --d: .14s; } .deck--locked .tk:nth-child(3) .coin { --d: .28s; } .deck--locked .tk:nth-child(4) .coin { --d: .42s; } .coinlock { position: absolute; inset: 66px 0 0 82px; display: grid; pointer-events: none; } .coinlock__card { pointer-events: auto; width: 100%; height: 100%; display: grid; justify-items: center; align-content: center; text-align: center; gap: 6px; padding: 12px 16px; border-radius: 14px; background: rgba(8, 22, 15, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(242, 181, 58, .38) inset, 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 60px -20px rgba(242, 181, 58, .35); } .coinlock__card .coin { --d: .6s; --s: 36px; margin-bottom: 2px; } .coinlock__title { font: 600 19px/1.2 var(--f-display); letter-spacing: -.02em; } .coinlock__note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); } .coinlock__note .i { width: 14px; height: 14px; color: var(--gold); } @media (max-width: 1279.98px) and (min-width: 1024px) { .tkf__title h3 { font-size: 17px; } .coinlock { left: 72px; } } @media (max-width: 1023.98px) { .sig__in { padding-block: 88px 72px; } .sig__head { grid-template-columns: 1fr; margin-bottom: 28px; } .steps { grid-template-columns: 1fr; gap: 14px; padding-bottom: 0; } .steps__rail { display: none; } .stage { grid-template-columns: 1fr; gap: 28px; max-width: 560px; margin: 0 auto; } body[data-page="landing"] .slot--left .log { display: none; } .engine { width: min(78vw, 260px); } .engine__read b { font-size: 38px; } } @media (max-width: 639.98px) { .tk__back { --stub: 56px; gap: 10px; padding-right: 10px; } .tk__back .sk-row { display: none; } .tk__face { --stub: 84px; } .tkf__stub { padding: 12px 8px 10px 10px; } .tkf__type span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .due { padding: 5px 6px; } .tk__ghost { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; padding-right: 12px; } .tk__ghost--one { grid-template-columns: 84px minmax(0, 1fr) auto; } .g-chips i { width: 44px; } .g-ring { width: 48px; height: 48px; } .g-terms { display: none; } .tkf__rank { font-size: 28px; } .tkf__body { padding: 12px; } .tkf__title h3 { font-size: 16px; } .ring { width: 50px; height: 50px; } .ring b { font-size: 14px; } .terms dd { font-size: 13px; } .chips li:nth-child(3) { display: none; } .coinlock { left: 60px; right: 0; } .coinlock__card { padding: 10px 12px; } .coinlock__title { font-size: 17px; } .tk__back-rank { font-size: 56px; } } /* ---------- 7 categories ---------- */ .cats { position: relative; background: linear-gradient(180deg, var(--forest-deep), var(--forest) 22%); overflow: clip; } .cats__pin { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 16px) 0 32px; } .cats__track { display: flex; gap: 20px; padding: 0 var(--gutter); width: max-content; will-change: transform; } .cats__intro { width: 420px; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-right: 24px; } .cats__note { font-size: 12px; color: var(--text-3); } .cats__hint { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); margin-top: 8px; } .cc { position: relative; flex: none; width: 380px; height: min(640px, calc(100vh - 170px)); min-height: 560px; display: flex; flex-direction: column; padding: 26px 26px 22px; border-radius: 24px; background: linear-gradient(165deg, rgba(24, 56, 39, .9), rgba(11, 30, 21, .9) 60%); box-shadow: 0 0 0 1px var(--hair) inset, inset 0 1px 0 rgba(255, 255, 255, .05); overflow: hidden; } .cc::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 231, 183, .12), transparent); pointer-events: none; } .cc__head { display: flex; justify-content: space-between; align-items: flex-start; min-height: 80px; } .cc__idx { font: 500 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--text-3); } .vig { width: 120px; height: 80px; overflow: visible; } .vig--big { width: 100%; height: 170px; margin-top: 16px; } .vig--big .v-faint { stroke-width: .35; } .cc__pill { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mint); padding: 7px 10px; border-radius: 999px; box-shadow: 0 0 0 1px var(--hair-2) inset; } .v-stroke { fill: none; stroke: var(--mint); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } .v-faint { fill: none; stroke: rgba(110, 231, 183, .28); stroke-width: .7; } .v-fill { fill: rgba(110, 231, 183, .16); stroke: var(--mint); stroke-width: 1; } .v-gold { fill: var(--gold); } .v-goldline { fill: rgba(242, 181, 58, .14); stroke: var(--gold); stroke-width: 1; } .v-mint { fill: var(--mint); } .v-sweep { fill: rgba(110, 231, 183, .22); } .cc__name { margin-top: 14px; font: 650 30px/1.05 var(--f-display); letter-spacing: -.03em; } .cc__desc { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--text-2); } .cc__count { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 16px; } .cc__count b { font: 500 76px/.9 var(--f-mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; } .cc__count span { font-size: 13px; color: var(--text-2); max-width: 100px; line-height: 1.3; } .cc__count--live b { font-family: var(--f-display); font-weight: 700; color: var(--mint); letter-spacing: -.04em; } .cc__dots { --max-h: 170; display: block; width: 100%; height: 170px; margin-top: 16px; } .cc__legend { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font: 400 12px/1.3 var(--f-mono); color: var(--text-2); } .cc__legend .k { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); margin-right: 8px; } .cc__scale { color: var(--text-3); white-space: nowrap; } .cc__legend b { color: var(--mint); font-weight: 500; } .cc__shows { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--text-2); } .cc__shows strong { color: var(--text); font-weight: 500; } .cats__progress { display: flex; align-items: center; gap: 14px; margin-top: 28px; font: 500 12px/1 var(--f-mono); color: var(--text-2); } .cats__rail { position: relative; width: 220px; height: 2px; background: var(--hair); border-radius: 2px; overflow: hidden; } .cats__rail i { position: absolute; inset: 0; background: var(--mint); transform-origin: 0 50%; transform: scaleX(0); } /* static and phone layout of the categories: a grid, no track */ html:not(.motion) .cats__track, .cats--stack .cats__track { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } html:not(.motion) .cats__intro, .cats--stack .cats__intro { width: auto; grid-column: 1 / -1; padding: 0 0 12px; max-width: 720px; } html:not(.motion) .cc, .cats--stack .cc { width: auto; height: auto; min-height: 0; } html:not(.motion) .cats__progress, html:not(.motion) .cats__hint, .cats--stack .cats__progress, .cats--stack .cats__hint { display: none; } html:not(.motion) .cc__name, .cats--stack .cc__name { margin-top: 18px; } @media (max-width: 1023.98px) { .cats__pin { min-height: 0; padding: 88px 0 72px; } .cats__track { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .cats__intro { width: auto; grid-column: 1 / -1; padding: 0 0 8px; } .cats__hint, .cats__progress { display: none; } .cc { width: auto; height: auto; min-height: 0; padding: 22px; } .cc__head { min-height: 75px; } .cc__head .vig { width: 112px; height: 75px; } .cc__name { margin-top: 12px; font-size: 26px; } .cc__desc { min-height: 0; } .cc__count b { font-size: 60px; } .cc__dots { --max-h: 130; } .vig--big { height: 130px; } } /* ---------- pricing (paper) ---------- */ .pricing { position: relative; background: var(--paper); color: var(--ptext); padding: clamp(80px, 9vw, 128px) 0; } .pricing__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 32px 64px; align-items: center; } .pricing .eyebrow { color: var(--ptext-2); } .pricing .h2 { margin-top: 16px; } .pricing .lead { color: var(--ptext-2); margin-top: 18px; max-width: 420px; } .pricing__foot { margin-top: 22px; font-size: 13px; line-height: 1.5; color: var(--ptext-2); max-width: 400px; } .pricing :focus-visible { outline-color: var(--green); } .plans { display: grid; grid-template-columns: 1fr 1.08fr; gap: 20px; align-items: stretch; } .plan { position: relative; border-radius: 28px; padding: 28px; display: flex; flex-direction: column; overflow: hidden; } .plan--free { background: #fff; box-shadow: 0 0 0 1px var(--paper-line) inset, 0 20px 50px -30px rgba(20, 23, 26, .25); } .plan--pro { background: radial-gradient(120% 90% at 100% 0%, #1A4430, var(--forest-2) 60%); color: var(--text); box-shadow: 0 30px 70px -30px rgba(15, 36, 25, .7); } .plan--pro canvas { position: absolute; width: 520px; height: 520px; right: -290px; top: -290px; opacity: .4; pointer-events: none; } .plan__tag { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ptext-2); } .plan--pro .plan__tag { color: var(--gold); } .plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; } .plan__price b { font: 700 clamp(56px, 4.6vw, 72px)/1 var(--f-display); letter-spacing: -.05em; } .plan--pro .plan__price b { color: var(--gold); } .plan__price span { font-size: 15px; color: var(--ptext-2); } .plan--pro .plan__price span { color: var(--text-2); } .plan__coffee { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--text-2); } .plan__coffee .i { color: var(--gold); } .plan__sub { margin-top: 8px; font-size: 14px; color: var(--ptext-2); } .checks { display: grid; gap: 10px; margin: 22px 0 26px; font-size: 15px; } .checks li { display: flex; gap: 10px; align-items: flex-start; } .checks .i { color: var(--green); margin-top: 3px; } .plan--pro .checks .i { color: var(--mint); } .plan .btn { margin-top: auto; width: 100%; position: relative; } @media (max-width: 1023.98px) { .pricing__in { grid-template-columns: 1fr; } } @media (max-width: 639.98px) { .plans { grid-template-columns: 1fr; } .plan { padding: 24px; border-radius: 24px; } } /* ---------- final CTA ---------- */ .final { position: relative; overflow: clip; background: radial-gradient(90% 80% at 50% 110%, #145238 0%, var(--forest) 55%, var(--forest-deep) 100%); padding: clamp(96px, 11vw, 160px) 0; } .final .rosette { right: auto; left: -420px; top: -300px; opacity: .28; } .final__in { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; } .final__h { margin-top: 18px; font-family: var(--f-display); font-weight: 750; font-variation-settings: "opsz" 96; font-size: clamp(40px, 6vw, 96px); line-height: .98; letter-spacing: -.045em; max-width: 12ch; text-wrap: balance; } .final .ideabox { width: min(100%, 720px); margin-top: 64px; text-align: left; } .final .micro { justify-content: center; } /* ---------- footer ---------- */ .foot { background: var(--ink); padding: 56px 0 32px; font-size: 14px; color: var(--text-2); } .foot__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; } .foot__top p { margin-top: 14px; max-width: 300px; line-height: 1.5; } .foot h3 { font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; } .foot li + li { margin-top: 8px; } .foot a { text-decoration: none; } .foot a:hover { color: var(--text); } .foot__bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--text-3); } @media (max-width: 767.98px) { .foot__top { grid-template-columns: 1fr 1fr; } .foot__top > div:first-child { grid-column: 1 / -1; } } /* ---------- moment page ---------- */ .mbar { position: relative; z-index: 5; height: 64px; display: flex; align-items: center; gap: 20px; } .mbar__title { font-size: 12px; color: var(--text-2); letter-spacing: .06em; text-transform: uppercase; } .mbar__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; } .mbar__actions a:not(.btn) { font-size: 14px; color: var(--text-2); text-decoration: none; } .moment { position: relative; min-height: calc(100svh - 64px); overflow: clip; display: flex; align-items: center; } .moment__in { position: relative; z-index: 1; padding-block: 16px 40px; } .moment__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px 48px; align-items: end; margin-bottom: 32px; } .moment__head h1 { font-size: clamp(30px, 2.4vw + 10px, 46px); } .replay.is-done { box-shadow: 0 0 0 1px rgba(242, 181, 58, .7) inset, 0 0 0 4px rgba(242, 181, 58, .14); } @media (max-width: 1023.98px) { .moment__head { grid-template-columns: 1fr; } .mbar__title { display: none; } } /* ---------- static fallback (reduced motion or no JS): everything in its end state, nothing stacked ---------- */ html:not(.motion) .slot--left { display: flex; flex-direction: column; gap: 16px; } html:not(.motion) .slot--left .log { display: block; } html:not(.motion) .tk__ghost, html:not(.motion) .sk { display: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }