/* ───────────────────────────────────────────────────────────────────── extras.css — additional utilities for the redesigned landing. Loaded alongside styles.css. After `npm run build:css`, you can delete this file (its rules will be in styles.css from src/tailwind.css). ────────────────────────────────────────────────────────────────────── */ /* Prevent horizontal page overflow without breaking vertical scroll. `overflow-x: hidden` on would establish a scrolling container on the root, which on some desktop browsers broke page scrolling and `position: sticky`. `overflow-x: clip` clips horizontally without creating a scroll container — vertical scroll stays on the viewport. */ html, body { overflow-x: clip; } /* ════════════════════════════════════════════════════════════════════ tailwind utility fills (classes used in HTML that the deployed styles.css doesn't carry yet) ════════════════════════════════════════════════════════════════════ */ .gap-12 { gap: 3rem; } .gap-14 { gap: 3.5rem; } .gap-16 { gap: 4rem; } .gap-20 { gap: 5rem; } .gap-x-5 { column-gap: 1.25rem; } .gap-x-6 { column-gap: 1.5rem; } .gap-y-3 { row-gap: 0.75rem; } .gap-y-5 { row-gap: 1.25rem; } .p-7 { padding: 1.75rem; } .h-7 { height: 1.75rem; } .w-7 { width: 1.75rem; } .h-11 { height: 2.75rem; } .w-11 { width: 2.75rem; } .h-14 { height: 3.5rem; } .w-14 { width: 3.5rem; } .mt-2\.5 { margin-top: 0.625rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-12 { margin-bottom: 3rem; } .divide-y > * + * { border-top-width: 1px; } .divide-line > * + * { border-color: var(--color-line, rgba(0, 0, 0, 0.07)); } .border-y { border-block-style: solid; border-block-width: 1px; } .border-t { border-top-style: solid; border-top-width: 1px; } .pt-6 { padding-top: 1.5rem; } .text-\[19px\] { font-size: 19px; } .text-\[24px\] { font-size: 24px; } .text-\[28px\] { font-size: 28px; } .text-\[34px\] { font-size: 34px; } .text-\[40px\] { font-size: 40px; } .text-\[clamp\(34px\,5\.2vw\,58px\)\] { font-size: clamp(34px, 5.2vw, 58px); } .text-\[clamp\(40px\,6vw\,72px\)\] { font-size: clamp(40px, 6vw, 72px); } .rounded-\[10px\] { border-radius: 10px; } .text-amber { color: #f59e0b; } .text-cat-blue { color: #2563eb; } .text-cat-pink { color: #db2777; } .text-cat-green { color: #16a34a; } .text-cat-orange { color: #ea580c; } .text-grad-rose { background: linear-gradient(135deg, #e11d48 0%, #f43f5e 55%, #f59e0b 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @media (min-width: 48rem) { .md\:flex-row { flex-direction: row; } .md\:items-end { align-items: flex-end; } .md\:justify-between { justify-content: space-between; } .md\:w-24 { width: 6rem; } .md\:flex { display: flex; } .md\:hidden { display: none; } .md\:p-7 { padding: 1.75rem; } .md\:p-14 { padding: 3.5rem; } .md\:mb-16 { margin-bottom: 4rem; } } @media (min-width: 40rem) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 64rem) { .lg\:gap-16 { gap: 4rem; } .lg\:gap-20 { gap: 5rem; } .lg\:p-20 { padding: 5rem; } .lg\:right-\[2\%\] { right: 2%; } .lg\:inset-\[60px\] { inset: 60px; } .lg\:inset-\[120px\] { inset: 120px; } .lg\:h-\[660px\] { height: 660px; } .lg\:w-\[660px\] { width: 660px; } .lg\:max-w-\[640px\] { max-width: 640px; } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-\[minmax\(0\,1\.05fr\)_minmax\(420px\,500px\)\] { grid-template-columns: minmax(0, 1.05fr) minmax(420px, 500px); } .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,0\.85fr\)\] { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); } .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,0\.9fr\)\] { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } } @media (min-width: 80rem) { .xl\:gap-20 { gap: 5rem; } } /* ════════════════════════════════════════════════════════════════════ eyebrow & gradient text — varied per section to break repetition ════════════════════════════════════════════════════════════════════ */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-primary, #e11d48); } .eyebrow .dash { display: inline-block; height: 2px; width: 26px; background: var(--color-primary, #e11d48); border-radius: 2px; } .eyebrow-blue { color: #2563eb; } .eyebrow-blue .dash { background: #2563eb; } .eyebrow-amber { color: #d97706; } .eyebrow-amber .dash { background: #d97706; } .eyebrow-green { color: #16a34a; } .eyebrow-green .dash { background: #16a34a; } .eyebrow-pink { color: #db2777; } .eyebrow-pink .dash { background: #db2777; } /* ════════════════════════════════════════════════════════════════════ live dot (overrides for size) ════════════════════════════════════════════════════════════════════ */ .live-dot { width: 8px; height: 8px; } /* ════════════════════════════════════════════════════════════════════ category dots (used in hero trust strip) ════════════════════════════════════════════════════════════════════ */ .cat-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; } .cat-dot-blue { background: #2563eb; } .cat-dot-pink { background: #db2777; } .cat-dot-green { background: #16a34a; } .cat-dot-orange { background: #ea580c; } .hero-cats { flex-wrap: wrap; } @media (max-width: 33.74rem) { .hero-cats { gap: 8px 14px; letter-spacing: 0.16em; } } .orbit-dot-blue { background: #2563eb; box-shadow: 0 0 14px rgba(37, 99, 235, 0.5); } /* ════════════════════════════════════════════════════════════════════ hero subtle grid pattern (desktop) ════════════════════════════════════════════════════════════════════ */ .bg-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(60% 60% at 50% 30%, #000 30%, transparent 80%); mask-image: radial-gradient(60% 60% at 50% 30%, #000 30%, transparent 80%); } /* ════════════════════════════════════════════════════════════════════ ticker — replace inline color styles with color-class variants ════════════════════════════════════════════════════════════════════ */ .ticker-fade-l { background: linear-gradient(to right, var(--color-page, #fafafa), transparent); } .ticker-fade-r { background: linear-gradient(to left, var(--color-page, #fafafa), transparent); } .ticker-cat-blue { background: #2563eb; } .ticker-cat-pink { background: #db2777; } .ticker-cat-green { background: #16a34a; } .ticker-cat-orange { background: #ea580c; } /* ════════════════════════════════════════════════════════════════════ PREVIEW SECTION — bento grid + tilted phone with overlapping UI cards ════════════════════════════════════════════════════════════════════ */ .preview-section { isolation: isolate; /* allow floats to overlap into the text column without being clipped */ } /* MOBILE-FIRST: head → phone → bento. DESKTOP: head+bento on left, phone right. */ .preview-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "head" "phone" "bento"; align-items: start; gap: 2.25rem; } .preview-head { grid-area: head; } .preview-grid > .phone-stage { grid-area: phone; } .preview-bento { grid-area: bento; } @media (min-width: 48rem) { .preview-grid { gap: 3rem; } } @media (min-width: 64rem) { .preview-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "head phone" "bento phone"; gap: 2rem 3rem; align-items: start; } .preview-grid > .phone-stage { /* center the phone vertically inside its 2-row span */ align-self: center; } } @media (min-width: 80rem) { .preview-grid { gap: 2rem 4.5rem; } } /* Round blobs whose own circular shape (border-radius: 999px) AND radial gradient both fade to 0 alpha at 70% before reaching the wrap edges. The wrap doesn't clip — the gradient itself does the fade work, so there's no hard rectangular cut anywhere. html { overflow-x: hidden } above keeps the blobs from causing a horizontal scrollbar on mobile. */ .preview-blob-wrap { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .preview-blob-1 { position: absolute; top: -8%; right: -12%; width: 720px; height: 720px; border-radius: 999px; background: radial-gradient(circle, rgba(225, 29, 72, 0.22) 0%, rgba(225, 29, 72, 0) 70%); } .preview-blob-2 { position: absolute; bottom: -8%; left: -12%; width: 540px; height: 540px; border-radius: 999px; background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0) 70%); } /* ──────────────────────────────────────────────────────────────────── BENTO GRID — varied tile sizes replace the flat 4-row list ──────────────────────────────────────────────────────────────────── */ .preview-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (min-width: 48rem) { .preview-bento { gap: 12px; } } @media (max-width: 26rem) { .preview-bento { grid-template-columns: 1fr; } } .preview-bento .bento { position: relative; border-radius: 18px; border: 1px solid var(--color-line); background: white; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; overflow: hidden; } @media (hover: hover) { .preview-bento .bento:hover { transform: translateY(-3px); border-color: var(--color-line-strong); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.18); } } .bento-num { font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in oklab, var(--color-primary) 80%, white); margin-bottom: 4px; } .bento-glyph { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; font-family: var(--font-display, system-ui, sans-serif); font-size: 18px; font-weight: 700; margin-bottom: 6px; background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%); color: var(--color-primary, #e11d48); } .bento-glyph-blue { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #2563eb; } .bento-title { margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--color-ink, #09090b); } .bento-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-ink-dim, #71717a); } /* feature card — spans full width (top of grid) */ .preview-bento .bento.bento-feature { grid-column: 1 / -1; background: linear-gradient(135deg, #ffffff 0%, color-mix(in oklab, #e11d48 8%, white) 100%); border-color: color-mix(in oklab, #e11d48 18%, transparent); } .bento-feature .bento-title { font-size: 19px; } .diff-row { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .diff-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 12px; font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; background: white; color: var(--color-ink-dim, #71717a); border: 1px solid var(--color-line); } .diff-pill.is-active { background: var(--color-ink, #09090b); color: white; border-color: var(--color-ink, #09090b); } /* proof card — blue tinted */ .preview-bento .bento.bento-proof { background: linear-gradient(135deg, #ffffff 0%, color-mix(in oklab, #2563eb 5%, white) 100%); border-color: color-mix(in oklab, #2563eb 14%, transparent); } /* streak card — flame badge */ .preview-bento .bento.bento-streak { background: linear-gradient(135deg, #ffffff 0%, color-mix(in oklab, #f59e0b 6%, white) 100%); border-color: color-mix(in oklab, #f59e0b 18%, transparent); } .streak-flame { align-self: flex-start; display: inline-flex; align-items: baseline; gap: 1px; border-radius: 12px; padding: 4px 10px; margin-bottom: 4px; background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #ea580c; font-family: var(--font-display, system-ui, sans-serif); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; border: 1px solid color-mix(in oklab, #ea580c 18%, transparent); } .streak-flame small { font-size: 12px; font-weight: 700; letter-spacing: 0; margin-left: 1px; } /* duel card — spans full width, horizontal layout */ .preview-bento .bento.bento-duel { grid-column: 1 / -1; background: linear-gradient(135deg, #ffffff 0%, color-mix(in oklab, #16a34a 5%, white) 100%); border-color: color-mix(in oklab, #16a34a 16%, transparent); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 16px; padding: 16px 20px; } .bento-duel .bento-duel-text { min-width: 0; } .bento-duel .bento-title { font-size: 17px; } .duel-avatars { display: flex; flex-shrink: 0; } .duel-avatars .ava { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display, system-ui, sans-serif); font-weight: 800; font-size: 14px; color: white; border: 2px solid white; margin-left: -10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } .duel-avatars .ava:first-child { margin-left: 0; } .ava-1 { background: linear-gradient(135deg, #2563eb, #7c3aed); } .ava-2 { background: linear-gradient(135deg, #e11d48, #f59e0b); } .ava-3 { background: white; color: var(--color-ink-dim); border-color: var(--color-line); } .bento-arrow { flex-shrink: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: 20px; font-weight: 700; color: var(--color-ink-muted, #a1a1aa); transition: transform 0.22s ease, color 0.22s ease; } @media (hover: hover) { .bento-duel:hover .bento-arrow { color: #16a34a; transform: translateX(4px); } } /* ──────────────────────────────────────────────────────────────────── PHONE STAGE — tilted phone with cards that overflow into bento area ──────────────────────────────────────────────────────────────────── */ .phone-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 520px; } @media (min-width: 64rem) { .phone-stage { min-height: 700px; /* lift the phone column a bit so it visually breaks above the row */ margin-top: -32px; margin-bottom: -40px; } } .phone-frame { position: relative; width: 100%; max-width: 280px; aspect-ratio: 9 / 19; border-radius: 44px; background: linear-gradient(180deg, #0a0a0c 0%, #1c1c20 100%); padding: 9px; box-shadow: 0 56px 110px -34px rgba(225, 29, 72, 0.32), 0 32px 70px -22px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.07); z-index: 1; } @media (min-width: 64rem) { .phone-frame { max-width: 296px; transform: rotate(-4deg); } } .phone-screen { /* absolute + inset matching the frame's 9px padding guarantees the screen always sits exactly inside the bezel. width/height auto is critical — the duplicate rule in styles.css sets width/height 100% which would push the screen 9px past the frame on right + bottom. */ position: absolute; inset: 9px; width: auto; height: auto; border-radius: 35px; overflow: hidden; background: radial-gradient(120% 60% at 50% 0%, #ffe4e6 0%, transparent 55%), linear-gradient(180deg, #ffffff 0%, #fafafa 100%); } .phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 100px; height: 24px; border-radius: 999px; background: #0a0a0c; z-index: 3; } /* PHONE UI MOCKUP — looks like a real running app */ .phone-ui { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 14px 16px; z-index: 1; } .phone-ui-status { display: flex; justify-content: space-between; align-items: center; padding: 6px 14px 0; font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 700; color: var(--color-ink, #09090b); margin-bottom: 28px; } .phone-ui-status-icons { display: inline-flex; align-items: center; gap: 3px; } .phone-ui-status-icons .ui-bar { width: 3px; border-radius: 1px; background: var(--color-ink, #09090b); display: inline-block; } .ui-bar-1 { height: 4px; } .ui-bar-2 { height: 6px; } .ui-bar-3 { height: 8px; } .phone-ui-status-icons .ui-batt { margin-left: 4px; width: 14px; height: 7px; border: 1px solid var(--color-ink, #09090b); border-radius: 2px; background: linear-gradient(to right, var(--color-ink, #09090b) 70%, transparent 70%); background-clip: padding-box; position: relative; } .phone-ui-status-icons .ui-batt::after { content: ""; position: absolute; right: -3px; top: 1.5px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: var(--color-ink, #09090b); } .phone-ui-greeting { padding: 0 12px 10px; } .phone-ui-greeting .phone-ui-hello { margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-ink, #09090b); } .phone-ui-greeting .phone-ui-sub { margin: 1px 0 0; font-size: 10px; color: var(--color-ink-dim, #71717a); } .phone-ui-card { flex: 1; margin: 4px 4px 12px; border-radius: 22px; background: white; border: 1px solid var(--color-line, rgba(0,0,0,0.07)); padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.12); } .phone-ui-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono, monospace); font-size: 8px; font-weight: 700; letter-spacing: 0.18em; color: #2563eb; } .phone-ui-cat-dot { width: 6px; height: 6px; border-radius: 999px; background: #2563eb; box-shadow: 0 0 8px rgba(37, 99, 235, 0.5); } .phone-ui-title { margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-ink, #09090b); } .phone-ui-timer { margin: 4px 0; display: flex; flex-direction: column; align-items: center; padding: 10px 0; border-top: 1px dashed var(--color-line, rgba(0,0,0,0.08)); border-bottom: 1px dashed var(--color-line, rgba(0,0,0,0.08)); } .phone-ui-timer-num { font-family: var(--font-display, system-ui, sans-serif); font-size: 30px; font-weight: 800; letter-spacing: -0.04em; color: var(--color-ink, #09090b); line-height: 1; font-variant-numeric: tabular-nums; } .phone-ui-timer-label { margin-top: 4px; font-family: var(--font-mono, monospace); font-size: 7px; font-weight: 700; letter-spacing: 0.22em; color: var(--color-ink-muted, #a1a1aa); } .phone-ui-cta { border: 0; border-radius: 12px; background: var(--color-ink, #09090b); color: white; font-family: var(--font-display, system-ui, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: -0.005em; padding: 10px 0; cursor: default; display: flex; align-items: center; justify-content: center; gap: 6px; } .phone-ui-foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono, monospace); font-size: 7.5px; font-weight: 600; letter-spacing: 0.15em; color: var(--color-ink-muted, #a1a1aa); text-transform: uppercase; margin-top: 2px; } .phone-ui-foot-xp { color: #ea580c; font-weight: 800; } .phone-ui-tabs { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 4px 0 6px; } .phone-ui-tab { width: 6px; height: 6px; border-radius: 999px; background: var(--color-soft-2, #eeeef1); } .phone-ui-tab.is-active { background: var(--color-primary, #e11d48); width: 18px; border-radius: 999px; } /* ──────────────────────────────────────────────────────────────────── FLOATING UI CARDS — overlap into the text column / bento grid ──────────────────────────────────────────────────────────────────── */ @keyframes phone-float { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--rot, 0deg)); } } .phone-float { position: absolute; z-index: 2; border-radius: 16px; background: white; border: 1px solid var(--color-line); box-shadow: 0 28px 60px -22px rgba(0, 0, 0, 0.28), 0 4px 12px -4px rgba(0, 0, 0, 0.06); padding: 12px 14px; pointer-events: none; backdrop-filter: blur(8px); } /* mission card — leans left into bento "One-tap missions" tile. top% is tuned so the card sits in the bento row (lower) and never pokes up into the headline copy in the head row. */ .phone-float-mission { --rot: -4deg; top: 56%; left: -32%; width: 232px; transform: rotate(var(--rot)); animation: phone-float 9s ease-in-out infinite; } .float-eyebrow { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; color: #2563eb; } .float-dot { width: 6px; height: 6px; border-radius: 999px; } .float-dot-blue { background: #2563eb; box-shadow: 0 0 8px rgba(37, 99, 235, 0.5); } .float-mission-title { margin: 7px 0 9px; font-family: var(--font-display, system-ui, sans-serif); font-size: 13.5px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-ink, #09090b); } .float-mission-meta { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono, monospace); font-size: 10px; } .float-timer { color: var(--color-ink-dim, #71717a); } .float-xp-pill { background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #ea580c; font-weight: 800; border-radius: 999px; padding: 3px 8px; border: 1px solid color-mix(in oklab, #ea580c 18%, transparent); } /* XP burst — right edge, breaks out right */ .phone-float-xp { --rot: 6deg; top: 30%; right: -8%; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; background: var(--color-ink, #09090b); color: white; border: 0; box-shadow: 0 24px 50px -18px rgba(225, 29, 72, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.3); transform: rotate(var(--rot)); animation: phone-float 7s ease-in-out infinite; animation-delay: -2.4s; } .float-xp-icon { font-size: 16px; color: #f59e0b; line-height: 1; } .float-xp-num { font-family: var(--font-display, system-ui, sans-serif); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; } .float-xp-label { font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.7); margin-left: 2px; } /* mini leaderboard — bottom-left, overlaps into bento area */ .phone-float-board { --rot: 3deg; bottom: 6%; left: -22%; width: 220px; transform: rotate(var(--rot)); animation: phone-float 11s ease-in-out infinite; animation-delay: -4.5s; } .float-board-title { margin: 0 0 6px; font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ink-muted, #a1a1aa); } .float-board-row { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 12px; border-top: 1px solid var(--color-line); } .float-board-row:first-of-type { border-top: 0; padding-top: 2px; } .float-board-row .rk { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; color: var(--color-ink-muted, #a1a1aa); } .float-board-row .nm { font-family: var(--font-display, system-ui, sans-serif); font-size: 12px; font-weight: 600; color: var(--color-ink, #09090b); } .float-board-row .xp { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; color: var(--color-ink-dim, #71717a); } .float-board-row.is-you .nm { color: var(--color-primary, #e11d48); } .float-board-row.is-you .xp { color: var(--color-primary, #e11d48); } .float-board-row.is-you .rk { color: var(--color-primary, #e11d48); } /* responsive: hide floats below 64rem (1024px) — that's where the 2-col preview-grid kicks in and the floats have somewhere to break out into. Below that, the layout is single-column and the floats would overlap stacked content. Tighten sizes between 64rem and 80rem so they don't blow into the bento copy on small laptops. */ @media (max-width: 63.9999rem) { .phone-float { display: none; } } @media (min-width: 64rem) and (max-width: 79.9999rem) { .phone-float-mission { left: -22%; width: 210px; } .phone-float-xp { right: -4%; padding: 8px 12px; } .phone-float-board { left: -14%; width: 200px; } } @media (prefers-reduced-motion: reduce) { .phone-float { animation: none; } } /* ════════════════════════════════════════════════════════════════════ MODE CARDS — color-tinted backgrounds, distinct per accent ════════════════════════════════════════════════════════════════════ */ .mode-card { --mode-accent: var(--color-primary, #e11d48); position: relative; background: white; border-color: var(--color-line, rgba(0, 0, 0, 0.07)); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .mode-card .mode-glyph { color: var(--mode-accent); background: color-mix(in oklab, var(--mode-accent) 9%, white); transition: background 0.22s ease, transform 0.22s ease; } .mode-card .mode-dot { background: var(--mode-accent); } .mode-card .mode-num { color: var(--mode-accent); } .mode-card .mode-tagline { color: var(--mode-accent); background: color-mix(in oklab, var(--mode-accent) 8%, white); border: 1px solid color-mix(in oklab, var(--mode-accent) 24%, transparent); } .mode-blue { --mode-accent: #2563eb; background: linear-gradient(160deg, #ffffff 0%, color-mix(in oklab, #2563eb 5%, white) 100%); } .mode-rose { --mode-accent: #e11d48; background: linear-gradient(160deg, #ffffff 0%, color-mix(in oklab, #e11d48 5%, white) 100%); } .mode-amber { --mode-accent: #f59e0b; background: linear-gradient(160deg, #ffffff 0%, color-mix(in oklab, #f59e0b 6%, white) 100%); } @media (hover: hover) { .mode-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--mode-accent) 35%, transparent); box-shadow: 0 24px 50px -22px color-mix(in oklab, var(--mode-accent) 45%, transparent), 0 2px 6px rgba(0, 0, 0, 0.04); } .mode-card:hover .mode-glyph { background: color-mix(in oklab, var(--mode-accent) 18%, white); transform: rotate(-4deg) scale(1.06); } } /* ════════════════════════════════════════════════════════════════════ CATEGORY TILES — bigger, with example missions inline ════════════════════════════════════════════════════════════════════ */ .cat-tile { --c: var(--color-primary, #e11d48); position: relative; overflow: hidden; border: 1px solid color-mix(in oklab, var(--c) 24%, transparent); background: color-mix(in oklab, var(--c) 7%, white); border-radius: 20px; padding: 22px 22px 24px; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; } .cat-tile-blue { --c: #2563eb; } .cat-tile-pink { --c: #db2777; } .cat-tile-green { --c: #16a34a; } .cat-tile-orange { --c: #ea580c; } .cat-tile .cat-glyph { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in oklab, var(--c) 16%, white); color: var(--c); font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif); font-size: 22px; margin-bottom: 16px; } .cat-tile-title { margin: 0; font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif); font-size: 22px; font-weight: 800; letter-spacing: -0.015em; color: var(--color-ink, #09090b); } .cat-tile-text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--color-ink-body, #3f3f46); } .cat-tile-example { margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed color-mix(in oklab, var(--c) 30%, transparent); font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; line-height: 1.45; color: color-mix(in oklab, var(--c) 75%, var(--color-ink-body, #3f3f46)); } .cat-tile::after { content: ""; position: absolute; inset: -50% -50% auto auto; width: 180px; height: 180px; border-radius: 999px; background: radial-gradient(circle, color-mix(in oklab, var(--c) 30%, transparent) 0%, transparent 70%); opacity: 0; transition: opacity 0.32s ease, transform 0.32s ease; pointer-events: none; } @media (hover: hover) { .cat-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -18px color-mix(in oklab, var(--c) 45%, transparent); } .cat-tile:hover::after { opacity: 1; transform: translate(-12px, 12px); } } /* ════════════════════════════════════════════════════════════════════ FLOW STEPS — rose-tinted backgrounds, gradient step badge ════════════════════════════════════════════════════════════════════ */ .flow-list { position: relative; } @media (min-width: 768px) { .flow-list::before { content: ""; position: absolute; left: 8%; right: 8%; top: 80px; height: 0; border-top: 2px dashed color-mix(in oklab, #e11d48 30%, transparent); z-index: 0; pointer-events: none; } } .flow-list > li { position: relative; z-index: 1; } .flow-step { background: linear-gradient(180deg, #ffffff 0%, color-mix(in oklab, #e11d48 4%, white) 100%); border: 1px solid color-mix(in oklab, #e11d48 14%, transparent); } .flow-step-num { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, #e11d48 0%, #be123c 100%); color: white; font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; box-shadow: 0 14px 28px -10px rgba(225, 29, 72, 0.5); } /* ════════════════════════════════════════════════════════════════════ CLOSING CTA — gradient blobs ════════════════════════════════════════════════════════════════════ */ /* Anchor blobs AT the card corner (top:0/right:0 or bottom:0/left:0) with the gradient origin at that same corner. The brightest pixels sit at the rounded corner and fade to 0 alpha well before reaching the opposite edge — so there's nothing for the corner clip to chop. */ .cta-blob-1 { position: absolute; top: 0; right: 0; width: 70%; max-width: 360px; aspect-ratio: 1 / 1; background: radial-gradient(circle at top right, rgba(225, 29, 72, 0.5) 0%, rgba(225, 29, 72, 0) 65%); pointer-events: none; } .cta-blob-2 { position: absolute; bottom: 0; left: 0; width: 60%; max-width: 320px; aspect-ratio: 1 / 1; background: radial-gradient(circle at bottom left, rgba(245, 158, 11, 0.42) 0%, rgba(245, 158, 11, 0) 65%); pointer-events: none; } /* ════════════════════════════════════════════════════════════════════ HERO — layered wordmark with stroked echo + floating XP burst ════════════════════════════════════════════════════════════════════ */ .hero-wordmark { position: relative; display: inline-block; line-height: 0.85; margin-top: 4px; } .hero-wordmark-solid, .hero-wordmark-stroke { margin: 0; font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif); font-size: clamp(72px, 15vw, 200px); font-weight: 800; line-height: 0.85; letter-spacing: -0.04em; display: block; } .hero-wordmark-solid { position: relative; color: var(--color-ink, #09090b); z-index: 2; background: linear-gradient(180deg, #09090b 0%, #1c1c20 88%, #4a4a52 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-wordmark-stroke { position: absolute; top: 0; left: 0; z-index: 1; color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--color-primary, #e11d48) 38%, transparent); text-stroke: 1.5px color-mix(in oklab, var(--color-primary, #e11d48) 38%, transparent); transform: translate(8px, 8px); pointer-events: none; opacity: 0.85; } @media (min-width: 64rem) { .hero-wordmark-stroke { transform: translate(14px, 14px); } } .hero-wordmark-burst { position: absolute; z-index: 3; top: 6%; right: -2%; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: 999px; background: var(--color-ink, #09090b); color: white; font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; box-shadow: 0 14px 30px -10px rgba(225, 29, 72, 0.45); transform: rotate(-7deg); animation: hero-burst-bob 6s ease-in-out infinite; } .hero-wordmark-burst .burst-dot { width: 6px; height: 6px; border-radius: 999px; background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.8); } /* legacy: dark-pill version of burst — overridden by the white-pill rules further down. Keep no color here so .burst-text inherits the parent color set on .hero-wordmark-burst (rose at line ~2586). */ @keyframes hero-burst-bob { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-6px); } } @media (max-width: 33.74rem) { .hero-wordmark-burst { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-wordmark-burst { animation: none; } } /* hero stat strip */ .hero-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; padding: 14px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); max-width: 540px; } .hero-stat { display: flex; flex-direction: column; gap: 2px; } .hero-stat-num { font-family: var(--font-display, system-ui, sans-serif); font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.025em; color: var(--color-ink, #09090b); font-variant-numeric: tabular-nums; } .hero-stat-lbl { font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted, #a1a1aa); } .hero-stat-divider { flex-shrink: 0; width: 1px; height: 32px; background: var(--color-line); } @media (max-width: 33.74rem) { .hero-stats { gap: 10px 14px; } .hero-stat-num { font-size: 22px; } .hero-stat-divider { display: none; } } /* ════════════════════════════════════════════════════════════════════ WHAT — split layout with proof feed ════════════════════════════════════════════════════════════════════ */ .what-section { isolation: isolate; } .what-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 64rem) { .what-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; align-items: stretch; } } .what-headline { margin: 0; font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif); font-size: clamp(36px, 6vw, 68px); font-weight: 800; line-height: 0.95; letter-spacing: -0.025em; color: var(--color-ink, #09090b); } .what-headline-emph { position: relative; display: inline-block; white-space: nowrap; } .what-headline-emph-text { position: relative; z-index: 1; background: linear-gradient(135deg, #e11d48 0%, #f43f5e 55%, #f59e0b 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .what-underline { position: absolute; left: 0; right: 0; bottom: -8px; width: 100%; height: 14px; color: color-mix(in oklab, #e11d48 65%, transparent); z-index: 0; } .what-lede { margin: 24px 0 0; max-width: 56ch; font-family: var(--font-display, system-ui, sans-serif); font-size: clamp(17px, 2.2vw, 22px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--color-ink-body, #3f3f46); } .what-stat-block { margin-top: 36px; display: grid; grid-template-columns: 1fr; gap: 20px; padding: 24px 0 0; border-top: 1px solid var(--color-line); } @media (min-width: 30rem) { .what-stat-block { grid-template-columns: auto 1fr; gap: 32px; align-items: center; } } .what-stat-hero { display: flex; align-items: baseline; gap: 14px; } .what-stat-hero-num { font-family: var(--font-display, system-ui, sans-serif); font-size: clamp(80px, 11vw, 130px); font-weight: 800; line-height: 0.85; letter-spacing: -0.04em; } .what-stat-hero-lbl { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; } .what-stat-hero-line1 { color: var(--color-ink, #09090b); } .what-stat-hero-line2 { color: var(--color-ink-muted, #a1a1aa); letter-spacing: 0.05em; text-transform: none; font-weight: 600; font-family: var(--font-display, system-ui, sans-serif); font-size: 12px; } .what-microstats { display: flex; flex-direction: column; gap: 12px; } .what-micro { display: grid; grid-template-columns: 60px auto 1fr; align-items: center; gap: 12px; padding: 8px 0; } .what-micro-bar { height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--color-ink, #09090b) 6%, transparent); overflow: hidden; position: relative; } .what-micro-bar-fill { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: linear-gradient(90deg, #e11d48 0%, #f59e0b 100%); } .what-micro-bar-blue { background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%); } .what-micro-num { font-family: var(--font-display, system-ui, sans-serif); font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--color-ink, #09090b); font-variant-numeric: tabular-nums; } .what-micro-lbl { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted, #a1a1aa); } /* proof feed — framed scrolling list */ .what-proof { position: relative; border-radius: 22px; border: 1px solid var(--color-line); background: linear-gradient(180deg, #ffffff 0%, color-mix(in oklab, var(--color-primary) 4%, white) 100%); padding: 16px 18px 12px; display: flex; flex-direction: column; min-height: 360px; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.18); } .what-proof::before { content: ""; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 999px; background: radial-gradient(circle, rgba(225, 29, 72, 0.12) 0%, transparent 70%); pointer-events: none; } .what-proof-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink, #09090b); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--color-line); } .what-proof-dot { width: 8px; height: 8px; border-radius: 999px; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); animation: pulse-green 2.2s ease-in-out infinite; } @keyframes pulse-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } } @media (prefers-reduced-motion: reduce) { .what-proof-dot { animation: none; } } .what-proof-count { margin-left: auto; color: var(--color-ink-muted, #a1a1aa); font-weight: 600; letter-spacing: 0.1em; } .what-proof-track { flex: 1; position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 92%, transparent 100%); } .what-proof-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; animation: proof-scroll 28s linear infinite; } @keyframes proof-scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } @media (prefers-reduced-motion: reduce) { .what-proof-list { animation: none; } } .what-proof-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px dashed color-mix(in oklab, var(--color-line) 70%, transparent); } .what-proof-cat { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display, system-ui, sans-serif); font-size: 13px; font-weight: 700; } .what-proof-cat-blue { background: rgba(37, 99, 235, 0.10); color: #2563eb; } .what-proof-cat-pink { background: rgba(219, 39, 119, 0.10); color: #db2777; } .what-proof-cat-green { background: rgba(22, 163, 74, 0.10); color: #16a34a; } .what-proof-cat-orange { background: rgba(234, 88, 12, 0.10); color: #ea580c; } .what-proof-text { font-size: 13.5px; line-height: 1.35; color: var(--color-ink, #09090b); } .what-proof-row-win .what-proof-text { font-weight: 600; } .what-proof-time { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; color: var(--color-ink-muted, #a1a1aa); letter-spacing: 0.1em; } .what-proof-foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-muted, #a1a1aa); } .what-proof-foot-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--color-ink-muted, #a1a1aa); } /* ════════════════════════════════════════════════════════════════════ MODES — differentiated card layouts ════════════════════════════════════════════════════════════════════ */ .modes-section { position: relative; } .modes-head { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: end; margin-bottom: 2.5rem; } @media (min-width: 48rem) { .modes-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); margin-bottom: 4rem; } } .modes-headline { margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: clamp(36px, 6vw, 68px); font-weight: 800; line-height: 0.95; letter-spacing: -0.025em; color: var(--color-ink, #09090b); } .modes-head-counter { display: inline-flex; gap: 0; border: 1px solid var(--color-line); border-radius: 14px; overflow: hidden; background: white; align-self: end; width: fit-content; } .modes-counter-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 18px; border-left: 1px solid var(--color-line); } .modes-counter-cell:first-child { border-left: 0; } .modes-counter-num { font-family: var(--font-display, system-ui, sans-serif); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--color-ink, #09090b); } .modes-counter-cell:nth-child(1) .modes-counter-num { color: #2563eb; } .modes-counter-cell:nth-child(2) .modes-counter-num { color: #e11d48; } .modes-counter-cell:nth-child(3) .modes-counter-num { color: #d97706; } .modes-counter-lbl { font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-ink-muted, #a1a1aa); } @media (max-width: 33.74rem) { .modes-head-counter { display: none; } } .modes-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 48rem) { .modes-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "solo duel" "solo crew"; gap: 18px; } } @media (min-width: 64rem) { .modes-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "solo duel crew"; } } @media (min-width: 48rem) { .mode-card-solo { grid-area: solo; } .mode-card-duel { grid-area: duel; } .mode-card-crew { grid-area: crew; } } .mode-card-v2 { position: relative; display: flex; flex-direction: column; gap: 14px; border-radius: 22px; border: 1px solid var(--color-line); padding: 22px 22px 24px; overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; --mode-accent: var(--color-primary, #e11d48); } .mode-card-v2.mode-blue { --mode-accent: #2563eb; background: linear-gradient(160deg, #ffffff 0%, color-mix(in oklab, #2563eb 6%, white) 100%); } .mode-card-v2.mode-rose { --mode-accent: #e11d48; background: linear-gradient(160deg, #ffffff 0%, color-mix(in oklab, #e11d48 6%, white) 100%); } .mode-card-v2.mode-amber { --mode-accent: #d97706; background: linear-gradient(160deg, #ffffff 0%, color-mix(in oklab, #d97706 6%, white) 100%); } @media (hover: hover) { .mode-card-v2:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--mode-accent) 35%, transparent); box-shadow: 0 24px 50px -22px color-mix(in oklab, var(--mode-accent) 45%, transparent); } } .mode-num-big { position: absolute; top: 14px; right: 18px; font-family: var(--font-mono, monospace); font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: color-mix(in oklab, var(--mode-accent) 16%, transparent); pointer-events: none; z-index: 0; } .mode-content { position: relative; z-index: 1; } .mode-title { margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: 24px; font-weight: 800; letter-spacing: -0.015em; color: var(--color-ink, #09090b); } .mode-text { margin: 8px 0 12px; font-size: 14px; line-height: 1.55; color: var(--color-ink-body, #3f3f46); } .mode-tagline-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklab, var(--mode-accent) 10%, white); border: 1px solid color-mix(in oklab, var(--mode-accent) 28%, transparent); color: var(--mode-accent); font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; } .mode-tagline-pill .mode-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--mode-accent); } .mode-visual { margin-top: auto; position: relative; z-index: 1; } /* SOLO visual: mini phone screen */ .mode-visual-solo { margin-top: 18px; border-radius: 16px; background: white; border: 1px solid var(--color-line); padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.12); } .mini-screen-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.2em; color: #2563eb; } .mini-dot { width: 6px; height: 6px; border-radius: 999px; } .mini-dot-blue { background: #2563eb; box-shadow: 0 0 8px rgba(37, 99, 235, 0.5); } .mini-screen-title { font-family: var(--font-display, system-ui, sans-serif); font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-ink, #09090b); } .mini-screen-timer { display: flex; align-items: center; gap: 10px; } .mini-timer-num { font-family: var(--font-display, system-ui, sans-serif); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--color-ink, #09090b); line-height: 1; font-variant-numeric: tabular-nums; } .mini-timer-bar { flex: 1; height: 6px; border-radius: 999px; background: color-mix(in oklab, #2563eb 8%, white); overflow: hidden; } .mini-timer-fill { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%); } .mini-screen-cta { display: flex; justify-content: center; align-items: center; background: var(--color-ink, #09090b); color: white; border-radius: 10px; padding: 10px 0; font-family: var(--font-display, system-ui, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } /* DUEL visual: split versus */ .mode-visual-duel { margin-top: 18px; border-radius: 16px; background: white; border: 1px solid var(--color-line); padding: 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } .duel-side { display: flex; flex-direction: column; align-items: center; gap: 4px; } .duel-ava { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: white; font-family: var(--font-display, system-ui, sans-serif); font-weight: 800; font-size: 15px; border: 2px solid white; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); } .duel-name { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-ink-dim, #71717a); } .duel-score { font-family: var(--font-display, system-ui, sans-serif); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-ink, #09090b); font-variant-numeric: tabular-nums; } .duel-score-win { color: #e11d48; } .duel-vs { font-family: var(--font-display, system-ui, sans-serif); font-size: 18px; font-weight: 800; letter-spacing: 0.04em; color: #e11d48; padding: 8px 10px; border-radius: 10px; background: color-mix(in oklab, #e11d48 8%, white); border: 1px solid color-mix(in oklab, #e11d48 24%, transparent); } /* CREW visual: leaderboard */ .mode-visual-crew { margin-top: 18px; border-radius: 16px; background: white; border: 1px solid var(--color-line); padding: 8px 12px; display: flex; flex-direction: column; } .crew-row { display: grid; grid-template-columns: 22px 26px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--color-line); } .crew-row:first-child { border-top: 0; } .crew-rk { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; color: var(--color-ink-muted, #a1a1aa); } .crew-ava { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: white; font-family: var(--font-display, system-ui, sans-serif); font-weight: 800; font-size: 11px; border: 1.5px solid white; } .ava-4 { background: linear-gradient(135deg, #16a34a, #06b6d4); } .crew-name { font-family: var(--font-display, system-ui, sans-serif); font-size: 13px; font-weight: 600; color: var(--color-ink, #09090b); } .crew-xp { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; color: var(--color-ink-dim, #71717a); } .crew-row-you .crew-rk, .crew-row-you .crew-name, .crew-row-you .crew-xp { color: #d97706; } .crew-row-you { background: color-mix(in oklab, #d97706 7%, transparent); border-radius: 8px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; } /* ════════════════════════════════════════════════════════════════════ CATEGORIES — bento grid (1 hero + 3 supporting) ════════════════════════════════════════════════════════════════════ */ .cats-head { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: end; margin-bottom: 2.5rem; } @media (min-width: 48rem) { .cats-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); margin-bottom: 4rem; } } .cats-headline { margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: clamp(36px, 6vw, 68px); font-weight: 800; line-height: 0.95; letter-spacing: -0.025em; color: var(--color-ink, #09090b); } .cats-headline-emph { position: relative; display: inline-block; color: #16a34a; } .cats-headline-mark { position: absolute; left: -2px; right: -2px; bottom: 4px; height: 14px; background: color-mix(in oklab, #16a34a 18%, transparent); border-radius: 4px; z-index: -1; } .cats-lede { margin: 0; max-width: 44ch; font-size: 15px; line-height: 1.65; color: var(--color-ink-dim, #71717a); } @media (min-width: 64rem) { .cats-lede { font-size: 16px; justify-self: end; } } .cats-bento { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 30rem) { .cats-bento { grid-template-columns: 1fr 1fr; } } @media (min-width: 64rem) { .cats-bento { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "hero pink green" "hero orange green"; gap: 16px; } .cat-hero { grid-area: hero; } .cat-tile-pink { grid-area: pink; } .cat-tile-orange { grid-area: orange; } .cat-tile-green { grid-area: green; } } .cat-tile-v2 { --c: var(--color-primary, #e11d48); position: relative; overflow: hidden; border-radius: 22px; border: 1px solid color-mix(in oklab, var(--c) 22%, transparent); background: color-mix(in oklab, var(--c) 6%, white); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; } .cat-tile-v2.cat-tile-blue { --c: #2563eb; } .cat-tile-v2.cat-tile-pink { --c: #db2777; } .cat-tile-v2.cat-tile-green { --c: #16a34a; } .cat-tile-v2.cat-tile-orange { --c: #ea580c; } .cat-hero { padding: 26px 28px 28px; min-height: 360px; } @media (min-width: 64rem) { .cat-hero { padding: 32px 34px 34px; } } .cat-tile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .cat-glyph-v2 { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in oklab, var(--c) 16%, white); color: var(--c); font-family: var(--font-display, system-ui, sans-serif); font-size: 20px; font-weight: 700; } .cat-hero .cat-glyph-v2 { width: 52px; height: 52px; border-radius: 14px; font-size: 26px; } .cat-meta-pill { font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c); padding: 4px 10px; border-radius: 999px; background: color-mix(in oklab, var(--c) 12%, white); border: 1px solid color-mix(in oklab, var(--c) 24%, transparent); } .cat-tile-title-v2 { margin: 8px 0 4px; font-family: var(--font-display, system-ui, sans-serif); font-size: 22px; font-weight: 800; letter-spacing: -0.015em; color: var(--color-ink, #09090b); } .cat-hero .cat-tile-title-v2 { font-size: 28px; } .cat-tile-text-v2 { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--color-ink-body, #3f3f46); } .cat-tile-example-v2 { margin: auto 0 0; padding-top: 14px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; line-height: 1.5; color: color-mix(in oklab, var(--c) 70%, var(--color-ink-body, #3f3f46)); } .cat-ex-quote { color: var(--c); font-weight: 700; margin: 0 1px; } .cat-examples { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed color-mix(in oklab, var(--c) 28%, transparent); display: flex; flex-direction: column; gap: 7px; } .cat-ex-row { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-mono, monospace); font-size: 11.5px; line-height: 1.5; color: color-mix(in oklab, var(--c) 65%, var(--color-ink-body, #3f3f46)); } .cat-ex-arrow { color: var(--c); flex-shrink: 0; font-weight: 700; } /* hero tile: mini map decoration */ .cat-mini-map { position: relative; margin-top: 18px; height: 120px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, color-mix(in oklab, var(--c) 12%, white) 0%, white 100%); border: 1px solid color-mix(in oklab, var(--c) 18%, transparent); } .cat-map-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, color-mix(in oklab, var(--c) 14%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--c) 14%, transparent) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(circle at 60% 50%, black 30%, transparent 80%); mask-image: radial-gradient(circle at 60% 50%, black 30%, transparent 80%); } .cat-map-pin { position: absolute; width: 10px; height: 10px; border-radius: 999px; background: var(--c); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c) 22%, transparent); } .cat-map-pin-1 { top: 24%; left: 22%; } .cat-map-pin-2 { top: 64%; left: 80%; } .cat-map-pin-you { top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; padding: 4px 8px; border-radius: 6px; background: var(--color-ink, #09090b); color: white; font-family: var(--font-mono, monospace); font-size: 8.5px; font-weight: 800; letter-spacing: 0.14em; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); } .cat-map-radius { position: absolute; top: 50%; left: 50%; width: 130px; height: 130px; border-radius: 999px; border: 1.5px dashed color-mix(in oklab, var(--c) 50%, transparent); transform: translate(-50%, -50%); animation: map-pulse 3.4s ease-in-out infinite; } @keyframes map-pulse { 0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.05); } } @media (prefers-reduced-motion: reduce) { .cat-map-radius { animation: none; } } /* supporting tile decorations */ .cat-decor { position: absolute; pointer-events: none; opacity: 0.55; } .cat-decor-creative { bottom: -8px; right: -8px; width: 110px; height: 50px; color: var(--c); } .cat-decor-creative svg { width: 100%; height: 100%; } .cat-decor-physical { bottom: 18px; right: 22px; display: flex; align-items: flex-end; gap: 4px; height: 40px; } .phys-bar { display: block; width: 6px; border-radius: 2px; background: var(--c); opacity: 0.75; } .phys-bar-1 { height: 18%; } .phys-bar-2 { height: 38%; } .phys-bar-3 { height: 62%; } .phys-bar-4 { height: 88%; } .phys-bar-5 { height: 50%; } .cat-decor-social { bottom: 18px; right: 22px; } .social-bubble { display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: color-mix(in oklab, var(--c) 14%, white); color: var(--c); font-family: var(--font-display, system-ui, sans-serif); font-size: 12px; font-weight: 700; border: 1px solid color-mix(in oklab, var(--c) 22%, transparent); padding: 4px 10px; } .social-bubble-2 { margin-left: 4px; margin-top: 14px; padding: 4px 8px; font-size: 11px; } @media (hover: hover) { .cat-tile-v2:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -18px color-mix(in oklab, var(--c) 45%, transparent); } } /* ════════════════════════════════════════════════════════════════════ FLOW — connected steps with eyebrow + illustrations ════════════════════════════════════════════════════════════════════ */ .flow-section { position: relative; } .flow-head { max-width: 820px; margin-bottom: 3rem; } @media (min-width: 48rem) { .flow-head { margin-bottom: 4rem; } } .flow-headline { margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: clamp(36px, 6vw, 68px); font-weight: 800; line-height: 0.95; letter-spacing: -0.025em; color: var(--color-ink, #09090b); } .flow-headline-strike { position: relative; color: var(--color-ink-muted, #a1a1aa); } .flow-headline-strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: 6px; background: linear-gradient(90deg, #e11d48 0%, #f59e0b 100%); border-radius: 999px; transform: rotate(-2deg); } .flow-lede { margin: 16px 0 0; max-width: 56ch; font-size: 15px; line-height: 1.65; color: var(--color-ink-dim, #71717a); } .flow-list-v2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px; position: relative; counter-reset: flow; } @media (min-width: 64rem) { .flow-list-v2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .flow-list-v2::before { content: ""; position: absolute; top: 36px; left: 12%; right: 12%; height: 0; border-top: 2px dashed color-mix(in oklab, var(--color-ink-muted, #a1a1aa) 60%, transparent); z-index: 0; pointer-events: none; } } .flow-step-v2 { --acc: #e11d48; position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px 24px 24px; border-radius: 22px; background: linear-gradient(180deg, #ffffff 0%, color-mix(in oklab, var(--acc) 4%, white) 100%); border: 1px solid color-mix(in oklab, var(--acc) 14%, transparent); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .flow-step-1 { --acc: #2563eb; } .flow-step-2 { --acc: #16a34a; } .flow-step-3 { --acc: #f59e0b; } @media (min-width: 64rem) { .flow-step-v2 { grid-template-columns: 1fr; gap: 14px; padding: 24px 24px 28px; } } @media (hover: hover) { .flow-step-v2:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--acc) 32%, transparent); box-shadow: 0 22px 44px -22px color-mix(in oklab, var(--acc) 50%, transparent); } } .flow-step-side { display: flex; align-items: center; gap: 10px; } @media (min-width: 64rem) { .flow-step-side { justify-content: flex-start; } } .flow-step-num-v2 { --acc: #e11d48; --acc-deep: #be123c; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--acc) 0%, var(--acc-deep) 100%); color: white; font-family: var(--font-display, system-ui, sans-serif); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--acc) 70%, transparent); } .flow-step-1 .flow-step-num-v2 { --acc: #2563eb; --acc-deep: #1d4ed8; } .flow-step-2 .flow-step-num-v2 { --acc: #16a34a; --acc-deep: #15803d; } .flow-step-3 .flow-step-num-v2 { --acc: #f59e0b; --acc-deep: #d97706; } .flow-step-tick { --tick: var(--color-ink-muted, #a1a1aa); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: white; border: 2px solid color-mix(in oklab, var(--tick) 35%, transparent); position: relative; } .flow-step-tick::after { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--tick); } .flow-step-1 .flow-step-tick { --tick: #2563eb; } .flow-step-2 .flow-step-tick { --tick: #16a34a; } .flow-step-3 .flow-step-tick { --tick: #f59e0b; } .flow-step-eyebrow { display: inline-block; font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: var(--color-ink-muted, #a1a1aa); margin-bottom: 4px; } .flow-step-1 .flow-step-eyebrow { color: #2563eb; } .flow-step-2 .flow-step-eyebrow { color: #16a34a; } .flow-step-3 .flow-step-eyebrow { color: #d97706; } .flow-step-title { margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--color-ink, #09090b); } .flow-step-text { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--color-ink-body, #3f3f46); } .flow-illus { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .flow-chip { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .flow-chip-1 { background: rgba(37, 99, 235, 0.10); color: #2563eb; border: 1px solid rgba(37, 99, 235, 0.22); } .flow-chip-2 { background: rgba(22, 163, 74, 0.10); color: #16a34a; border: 1px solid rgba(22, 163, 74, 0.22); } .flow-chip-3 { background: var(--color-ink, #09090b); color: white; } .flow-camera { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 30px; border-radius: 6px; background: var(--color-ink, #09090b); border: 2px solid var(--color-ink, #09090b); } .flow-camera::before { content: ""; position: absolute; top: -5px; left: 8px; width: 10px; height: 5px; border-radius: 2px 2px 0 0; background: var(--color-ink, #09090b); } .flow-camera::after { content: ""; width: 16px; height: 16px; border-radius: 999px; background: white; border: 2px solid var(--color-ink, #09090b); } .flow-camera-flash { position: absolute; top: 4px; right: 5px; width: 4px; height: 4px; border-radius: 999px; background: #f59e0b; } .flow-verify-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: rgba(22, 163, 74, 0.10); border: 1px solid rgba(22, 163, 74, 0.30); color: #16a34a; font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; } .flow-xp-burst { display: inline-flex; align-items: baseline; padding: 6px 12px; border-radius: 999px; background: var(--color-ink, #09090b); color: white; font-family: var(--font-display, system-ui, sans-serif); font-size: 14px; font-weight: 800; letter-spacing: -0.01em; box-shadow: 0 8px 20px -6px rgba(225, 29, 72, 0.4); } .flow-xp-burst small { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; margin-left: 4px; color: #f59e0b; } .flow-streak { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #ea580c; font-family: var(--font-display, system-ui, sans-serif); font-size: 13px; font-weight: 800; border: 1px solid color-mix(in oklab, #ea580c 22%, transparent); } .flow-coin { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; border: 1px solid color-mix(in oklab, #b45309 22%, transparent); box-shadow: 0 1px 2px rgba(180, 83, 9, 0.25) inset; } .flow-coin svg { display: block; width: 14px; height: 14px; } /* ════════════════════════════════════════════════════════════════════ HERO WORDMARK — layered display: stroked echo behind, solid in front ════════════════════════════════════════════════════════════════════ */ .hero-wordmark { position: relative; display: inline-block; line-height: 0.82; margin-top: 4px; /* allow the floating burst pill to sit outside the bounds */ isolation: isolate; } .hero-wordmark-stroke, .hero-wordmark-solid { display: block; margin: 0; padding: 0; font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif); font-size: clamp(72px, 13vw, 184px); font-weight: 800; line-height: 0.82; letter-spacing: -0.045em; text-transform: uppercase; } /* stroked echo sits behind, slightly nudged so it peeks out at the edges */ .hero-wordmark-stroke { position: absolute; inset: 0; z-index: 0; -webkit-text-stroke: 1.5px rgba(9, 9, 11, 0.18); -webkit-text-fill-color: transparent; color: transparent; transform: translate(0.06em, 0.04em); pointer-events: none; user-select: none; } .hero-wordmark-solid { position: relative; z-index: 1; color: var(--color-ink, #09090b); } @media (min-width: 64rem) { .hero-wordmark-stroke, .hero-wordmark-solid { font-size: clamp(96px, 11vw, 168px); } } /* floating "+150 XP" burst pill — sits near upper-right of the wordmark */ .hero-wordmark-burst { position: absolute; top: -10px; right: -10px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: 999px; background: var(--color-card, #fff); border: 1px solid color-mix(in oklab, var(--color-primary, #e11d48) 22%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 14px -6px rgba(225, 29, 72, 0.28), 0 14px 30px -10px rgba(225, 29, 72, 0.32); transform: rotate(6deg); font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary, #e11d48); white-space: nowrap; animation: var(--animate-float-slow, gentle-float 7s ease-in-out infinite); } @media (prefers-reduced-motion: reduce) { .hero-wordmark-burst { animation: none; } } /* hide the pill on phones — it crowds the wordmark at small widths */ @media (max-width: 33.74rem) { .hero-wordmark-burst { display: none; } } @media (min-width: 48rem) { .hero-wordmark-burst { top: -16px; right: -28px; padding: 8px 13px 8px 11px; font-size: 13px; } } @media (min-width: 64rem) { .hero-wordmark-burst { top: -22px; right: -44px; padding: 9px 14px 9px 12px; font-size: 14px; } } .burst-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--color-primary, #e11d48); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary, #e11d48) 18%, transparent); flex-shrink: 0; } .burst-text { display: inline-block; } /* ════════════════════════════════════════════════════════════════════ HERO STAT STRIP — horizontal, dividers between cells ════════════════════════════════════════════════════════════════════ */ .hero-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 18px; padding: 14px 0; border-top: 1px solid var(--color-line, rgba(0, 0, 0, 0.07)); border-bottom: 1px solid var(--color-line, rgba(0, 0, 0, 0.07)); } @media (min-width: 48rem) { .hero-stats { gap: 18px 22px; } } .hero-stat { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .hero-stat-num { font-family: var(--font-display, system-ui, sans-serif); font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--color-ink, #09090b); font-variant-numeric: tabular-nums; } .hero-stat-lbl { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ink-muted, #a1a1aa); } .hero-stat-divider { width: 1px; align-self: stretch; background: var(--color-line, rgba(0, 0, 0, 0.07)); /* keep a min/max height so the divider feels balanced */ min-height: 28px; } /* on narrow screens, wrap to a tidy 2x2 grid and hide vertical dividers */ @media (max-width: 540px) { .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .hero-stat-divider { display: none; } } /* ════════════════════════════════════════════════════════════════════ WHAT SECTION — bold statement + live-proof column ════════════════════════════════════════════════════════════════════ */ .what-section { isolation: isolate; } .what-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 64rem) { .what-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; } } @media (min-width: 80rem) { .what-grid { gap: 5rem; } } .what-head { min-width: 0; } .what-headline { margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: clamp(40px, 6vw, 72px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: var(--color-ink, #09090b); } /* the emphasized "off the couch" wrapper — relative so the SVG underline can be absolutely positioned inside it, scoped to the phrase. */ .what-headline-emph { position: relative; display: inline-block; white-space: nowrap; } .what-headline-emph-text { position: relative; z-index: 1; color: var(--color-primary, #e11d48); } /* scope the SVG underline to the width of the emphasized text only */ .what-underline { position: absolute; left: 0; right: 0; bottom: -0.18em; width: 100%; height: 0.32em; color: var(--color-primary, #e11d48); pointer-events: none; display: block; overflow: visible; } .what-lede { margin-top: 1.25rem; max-width: 56ch; font-size: 16px; line-height: 1.65; color: var(--color-ink-dim, #71717a); } @media (min-width: 64rem) { .what-lede { font-size: 17px; } } /* ── anchor stat block ────────────────────────────────────────────── */ .what-stat-block { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--color-line, rgba(0, 0, 0, 0.07)); display: flex; flex-direction: column; gap: 1.5rem; } .what-stat-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .what-stat-hero-num { font-family: var(--font-display, system-ui, sans-serif); font-size: clamp(64px, 16vw, 128px); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; flex-shrink: 0; } .what-stat-hero-lbl { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } @media (min-width: 30rem) { .what-stat-hero { gap: 18px; flex-wrap: nowrap; } } .what-stat-hero-line1 { font-family: var(--font-display, system-ui, sans-serif); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-ink, #09090b); } .what-stat-hero-line2 { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink-muted, #a1a1aa); } /* ── micro-stats row ──────────────────────────────────────────────── */ .what-microstats { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 30rem) { .what-microstats { grid-template-columns: 1fr 1fr; gap: 18px; } } .what-micro { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "bar num" "lbl num"; align-items: center; column-gap: 12px; row-gap: 6px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--color-line, rgba(0, 0, 0, 0.07)); background: var(--color-card, #fff); } .what-micro-bar { grid-area: bar; position: relative; display: block; width: 100%; height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--color-ink, #09090b) 6%, transparent); overflow: hidden; } .what-micro-bar-fill { position: absolute; inset: 0; width: var(--w, 50%); border-radius: 999px; background: linear-gradient( 90deg, var(--color-primary, #e11d48) 0%, color-mix(in oklab, var(--color-primary, #e11d48) 70%, #f59e0b) 100% ); } .what-micro-bar-fill.what-micro-bar-blue { background: linear-gradient( 90deg, var(--color-blue, #2563eb) 0%, color-mix(in oklab, var(--color-blue, #2563eb) 60%, #6366f1) 100% ); } .what-micro-num { grid-area: num; font-family: var(--font-display, system-ui, sans-serif); font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--color-ink, #09090b); } .what-micro-lbl { grid-area: lbl; font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink-muted, #a1a1aa); } /* ── live-proof column (right side) ───────────────────────────────── */ .what-proof { position: relative; display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--color-line, rgba(0, 0, 0, 0.07)); background: var(--color-card, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 18px 40px -24px rgba(0, 0, 0, 0.18); overflow: hidden; } .what-proof-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--color-line, rgba(0, 0, 0, 0.07)); font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ink-muted, #a1a1aa); } .what-proof-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--color-primary, #e11d48); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary, #e11d48) 18%, transparent); animation: var(--animate-pulse-dot, pulse-dot 1.6s ease-in-out infinite); } @media (prefers-reduced-motion: reduce) { .what-proof-dot { animation: none; } } .what-proof-count { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: color-mix(in oklab, var(--color-primary, #e11d48) 10%, transparent); color: var(--color-primary, #e11d48); font-size: 9.5px; letter-spacing: 0.18em; } .what-proof-track { position: relative; height: 380px; overflow: hidden; /* fade top + bottom so the list looks scrolling */ -webkit-mask-image: linear-gradient( to bottom, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100% ); } @media (min-width: 30rem) { .what-proof-track { height: 420px; } } .what-proof-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 6px 0; } .what-proof-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid color-mix(in oklab, var(--color-ink, #09090b) 4%, transparent); } .what-proof-row:first-child { border-top: 0; } .what-proof-row-win { background: color-mix(in oklab, var(--color-primary, #e11d48) 5%, transparent); border-left: 2px solid var(--color-primary, #e11d48); padding-left: 14px; /* compensate for 2px border so content stays aligned */ } .what-proof-cat { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; font-family: var(--font-display, system-ui, sans-serif); font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; } .what-proof-cat-blue { background: #2563eb; } .what-proof-cat-green { background: #16a34a; } .what-proof-cat-pink { background: #db2777; } .what-proof-cat-orange { background: #ea580c; } .what-proof-text { font-size: 14px; line-height: 1.4; color: var(--color-ink-body, #3f3f46); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .what-proof-time { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-muted, #a1a1aa); flex-shrink: 0; } .what-proof-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--color-line, rgba(0, 0, 0, 0.07)); background: color-mix(in oklab, var(--color-ink, #09090b) 2%, transparent); font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-muted, #a1a1aa); } .what-proof-foot-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--color-primary, #e11d48) 70%, transparent); } /* ════════════════════════════════════════════════════════════════════ outside / "earn it offline" — receipt panel on dark card ════════════════════════════════════════════════════════════════════ */ .outside-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; } @media (min-width: 64rem) { .outside-grid { grid-template-columns: 1.15fr 0.85fr; gap: 56px; } } .outside-content { position: relative; z-index: 1; } .outside-receipt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(2px); font-family: var(--font-mono, monospace); max-width: 380px; margin-left: auto; width: 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 36px -16px rgba(0, 0, 0, 0.5); } .receipt-head { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); padding-bottom: 4px; border-bottom: 1px dashed rgba(255, 255, 255, 0.12); } .receipt-dot { width: 7px; height: 7px; border-radius: 999px; background: #16a34a; box-shadow: 0 0 8px rgba(22, 163, 74, 0.7); animation: receipt-pulse 1.8s ease-in-out infinite; } @keyframes receipt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .receipt-dot { animation: none; } } .receipt-label { flex: 1; } .receipt-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: rgba(255, 255, 255, 0.78); } .receipt-row > span:first-child { font-family: var(--font-mono, monospace); letter-spacing: 0.04em; } .receipt-num { font-family: var(--font-display, system-ui, sans-serif); font-size: 18px; font-weight: 800; color: white; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .receipt-num-zero { color: #f59e0b; } .receipt-divider { height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100% ); margin: 4px 0 2px; } .receipt-total > span:first-child { color: white; font-weight: 700; } .receipt-total-num { font-size: 28px; background: linear-gradient(135deg, #f43f5e 0%, #f59e0b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .receipt-foot { margin-top: 6px; text-align: center; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); } /* ════════════════════════════════════════════════════════════════════ SIGNUP CONSENT — privacy checkbox + label inside the hero form ════════════════════════════════════════════════════════════════════ */ .signup-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--color-ink-dim, #71717a); cursor: pointer; user-select: none; } .signup-consent-box { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 17px; height: 17px; margin: 1px 0 0; border-radius: 5px; border: 1.5px solid var(--color-line-strong, rgba(0, 0, 0, 0.14)); background: var(--color-card, #fff); position: relative; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .signup-consent:hover .signup-consent-box { border-color: var(--color-ink-muted, #a1a1aa); } .signup-consent-box:checked { border-color: var(--color-primary, #e11d48); background: var(--color-primary, #e11d48); } .signup-consent-box:checked::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .signup-consent-box:focus-visible { outline: 2px solid var(--color-primary, #e11d48); outline-offset: 2px; } .signup-consent-text { flex: 1; padding-top: 1px; } .signup-consent-link { color: var(--color-ink, #09090b); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-line-strong, rgba(0, 0, 0, 0.18)); text-underline-offset: 2px; transition: color 0.15s ease, text-decoration-color 0.15s ease; } .signup-consent-link:hover { color: var(--color-primary, #e11d48); text-decoration-color: var(--color-primary, #e11d48); } /* ════════════════════════════════════════════════════════════════════ SITE FOOTER — adds imprint / privacy links alongside the wordmark ════════════════════════════════════════════════════════════════════ */ .site-footer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 28px 0 36px; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink-muted, #a1a1aa); border-top: 1px solid var(--color-line, rgba(0, 0, 0, 0.07)); margin-top: 56px; } @media (min-width: 48rem) { .site-footer { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: 24px; padding: 24px 0 32px; font-size: 11px; } } .site-footer-brand { display: inline-flex; align-items: center; gap: 10px; } .site-footer-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--color-primary, #e11d48); color: #fff; font-family: var(--font-display, system-ui, sans-serif); font-size: 13px; font-weight: 800; letter-spacing: 0; } .site-footer-tag { color: var(--color-ink-dim, #71717a); letter-spacing: 0.18em; text-transform: uppercase; } .site-footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .site-footer-nav a { color: var(--color-ink-dim, #71717a); text-decoration: none; transition: color 0.15s ease; position: relative; } .site-footer-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; opacity: 0; transition: opacity 0.15s ease; } .site-footer-nav a:hover { color: var(--color-ink, #09090b); } .site-footer-nav a:hover::after { opacity: 0.4; } .site-footer-sep { width: 3px; height: 3px; border-radius: 999px; background: var(--color-line-strong, rgba(0, 0, 0, 0.18)); } /* ════════════════════════════════════════════════════════════════════ LEGAL PAGES — imprint + privacy (shared layout & typography) ════════════════════════════════════════════════════════════════════ */ .legal-shell { position: relative; margin: 0 auto; width: 100%; max-width: 760px; padding: 28px 20px 64px; } @media (min-width: 48rem) { .legal-shell { padding: 36px 32px 96px; } } @media (min-width: 64rem) { .legal-shell { padding: 44px 40px 120px; } } .legal-topbar { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(0, 0, 0, 0.5); margin-bottom: 36px; } @media (min-width: 64rem) { .legal-topbar { font-size: 11px; margin-bottom: 48px; } } .legal-back { display: inline-flex; align-items: center; gap: 8px; color: var(--color-ink-dim, #71717a); text-decoration: none; transition: color 0.15s ease, gap 0.18s ease; } .legal-back:hover { color: var(--color-ink, #09090b); gap: 11px; } .legal-back-arrow { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; } .legal-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--color-ink, #09090b); letter-spacing: 0.22em; font-weight: 700; text-decoration: none; } .legal-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--color-primary, #e11d48); color: #fff; font-family: var(--font-display, system-ui, sans-serif); font-size: 13px; font-weight: 800; letter-spacing: 0; } .legal-header { margin-bottom: 40px; } @media (min-width: 64rem) { .legal-header { margin-bottom: 56px; } } .legal-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-primary, #e11d48); margin-bottom: 16px; } .legal-eyebrow .dash { display: inline-block; width: 26px; height: 2px; border-radius: 2px; background: var(--color-primary, #e11d48); } .legal-title { margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: clamp(40px, 6.4vw, 64px); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; color: var(--color-ink, #09090b); } .legal-title-emph { background: linear-gradient(135deg, #e11d48 0%, #f43f5e 55%, #f59e0b 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .legal-lede { max-width: 56ch; margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: var(--color-ink-dim, #71717a); } .legal-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 10px; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ink-muted, #a1a1aa); } .legal-meta-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--color-line, rgba(0, 0, 0, 0.07)); background: var(--color-card, #fff); } .legal-meta-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--color-primary, #e11d48); } .legal-card { position: relative; border-radius: 24px; border: 1px solid var(--color-line, rgba(0, 0, 0, 0.07)); background: var(--color-card, #fff); padding: 26px 24px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 24px 56px -28px rgba(0, 0, 0, 0.1); } @media (min-width: 48rem) { .legal-card { padding: 36px 36px; } } @media (min-width: 64rem) { .legal-card { padding: 44px 48px; } } .legal-section + .legal-section { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--color-line, rgba(0, 0, 0, 0.07)); } .legal-section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; } .legal-section-num { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; color: var(--color-primary, #e11d48); flex-shrink: 0; } .legal-section h2 { margin: 0; font-family: var(--font-display, system-ui, sans-serif); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-ink, #09090b); } @media (min-width: 48rem) { .legal-section h2 { font-size: 26px; } } .legal-section h3 { margin: 20px 0 8px; font-family: var(--font-display, system-ui, sans-serif); font-size: 15px; font-weight: 700; letter-spacing: -0.005em; color: var(--color-ink, #09090b); } .legal-section p, .legal-section li { font-size: 15px; line-height: 1.7; color: var(--color-ink-body, #3f3f46); } .legal-section p + p { margin-top: 12px; } .legal-section ul { list-style: none; margin: 12px 0 0; padding: 0; } .legal-section ul li { position: relative; padding-left: 22px; margin-top: 8px; } .legal-section ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 1px; background: var(--color-primary, #e11d48); } .legal-section a { color: var(--color-ink, #09090b); text-decoration: underline; text-decoration-color: var(--color-line-strong, rgba(0, 0, 0, 0.18)); text-underline-offset: 3px; transition: color 0.15s ease, text-decoration-color 0.15s ease; } .legal-section a:hover { color: var(--color-primary, #e11d48); text-decoration-color: var(--color-primary, #e11d48); } .legal-contact-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; } @media (min-width: 40rem) { .legal-contact-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } .legal-contact-cell { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--color-line, rgba(0, 0, 0, 0.07)); background: var(--color-soft-1, #f5f5f7); } .legal-contact-key { display: block; font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ink-muted, #a1a1aa); margin-bottom: 4px; } .legal-contact-val { font-size: 15px; font-weight: 500; color: var(--color-ink, #09090b); line-height: 1.45; } .legal-note { margin-top: 36px; padding: 16px 18px; border-radius: 14px; background: color-mix(in oklab, var(--color-primary, #e11d48) 5%, #fff); border: 1px solid color-mix(in oklab, var(--color-primary, #e11d48) 15%, transparent); font-size: 13.5px; line-height: 1.6; color: var(--color-ink-body, #3f3f46); } .legal-note strong { color: var(--color-ink, #09090b); } .legal-toc { margin-bottom: 28px; padding: 14px 18px; border-radius: 14px; background: var(--color-soft-1, #f5f5f7); border: 1px solid var(--color-line, rgba(0, 0, 0, 0.07)); } .legal-toc-label { display: block; font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ink-muted, #a1a1aa); margin-bottom: 8px; } .legal-toc ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; counter-reset: toc; } .legal-toc li { counter-increment: toc; } .legal-toc a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-ink-body, #3f3f46); text-decoration: none; padding: 3px 0; transition: color 0.15s ease; } .legal-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.18em; color: var(--color-primary, #e11d48); } .legal-toc a:hover { color: var(--color-primary, #e11d48); }