/* Tokens */ :root { --color-bg: #0A0A0A; --color-red: #D42B2B; --color-blue: #1A3A8F; --color-yellow: #F0C030; --color-offwhite: #F5F5F0; --color-text-dim: rgba(245, 245, 240, 0.6); --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --container-max: 1280px; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; --space-6: 96px; --bp-tablet: 640px; --bp-desktop: 1024px; /* Spacing system. Heading → text uses --space-3 (24px); text → CTA and the gap between elements of one block use --block-gap; sections breathe with --section-y. Both grow at the desktop breakpoint below. */ --block-gap: var(--space-4); --section-y: 56px; --header-h: 56px; --color-header-bg: rgba(10, 10, 10, 0.82); --color-line: rgba(245, 245, 240, 0.1); --color-backdrop: rgba(10, 10, 10, 0.6); --nav-ease: 250ms cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 900px) { :root { --header-h: 64px; } } @media (min-width: 1024px) { :root { --section-y: 88px; } } /* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; } /* Smooth anchor scrolling, gated like every other animation on the page. A smooth jump animates the viewport across everything between the link and its target, which is exactly the large-field motion that triggers vestibular symptoms — so a visitor asking for reduced motion gets an instant jump. (This was previously off entirely: anchor paths crossed the scroll-driven app-screens slider and cycled four full-screen high-contrast slides at ~30Hz, inside the band WCAG 2.3.1 flags. That slider no longer exists.) */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Anchor targets land below the sticky header rather than under it. */ html { scroll-padding-top: var(--header-h); } /* Scroll lock while the mobile nav drawer is open. It goes on , not : html's overflow is what propagates to the viewport, and body must keep overflow-x: clip (see below). */ html.nav-open { overflow: hidden; } body { background: var(--color-bg); color: var(--color-offwhite); font-family: var(--font-family); font-size: 16px; line-height: 1.5; /* "clip", not "hidden". Wide decorative content (mock cards, the memories collage) must never cause sideways scroll, but overflow-x: hidden computes to "overflow: hidden auto", turning into a scroll container — which re-anchors any position: sticky descendant to the body instead of the viewport. "clip" suppresses the same overflow without that side effect. test/styles.test.mjs guards it. */ overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button, input { font: inherit; color: inherit; } ul { list-style: none; } /* Layout utility */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-3); } @media (min-width: 1024px) { .container { padding: 0 var(--space-5); } } h1, h2, h3 { font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; } /* Eyebrow label */ .eyebrow { display: flex; align-items: center; gap: var(--space-1); font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: var(--space-2); } .eyebrow::before { content: ""; width: 4px; height: 14px; background: var(--color-red); display: inline-block; flex-shrink: 0; } .eyebrow--yellow::before { background: var(--color-yellow); } /* Logo mark (the favicon glyph, shared by the header and footer wordmarks) */ .logo-mark { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; } .nav__logo .logo-mark { width: 30px; height: 30px; } /* Header / nav — sticky. Transparent at the top of the page; header.js adds .is-scrolled once the page moves, which fades in a blurred solid bar. The blur lives on ::before, not the header itself: backdrop-filter on the header would make it the containing block for the position: fixed drawer and backdrop inside it, trapping them in a 56px strip. */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; } .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-header-bg); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); opacity: 0; } .site-header.is-scrolled { border-bottom-color: var(--color-line); } .site-header.is-scrolled::before, .nav-open .site-header::before { opacity: 1; } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: var(--header-h); } .nav__logo { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: 0.1em; font-size: 15px; } /* Burger → X. The bars sit 6px apart centre to centre, so moving the outer two by 6px lands them on the middle one before they rotate. */ .nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 44px; margin-right: calc(-1 * var(--space-1)); padding: 0 11px; background: none; border: none; cursor: pointer; } .nav__toggle-bar { display: block; width: 22px; height: 2px; background: var(--color-offwhite); } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Mobile drawer: slides in from the right under the header bar, so the X stays visible where the burger was. Closed, it is visibility: hidden — off screen *and* out of the tab order. */ .nav__links { position: fixed; top: var(--header-h); right: 0; bottom: 0; z-index: 2; width: min(85vw, 360px); display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); overflow-y: auto; overscroll-behavior: contain; background: var(--color-bg); border-left: 1px solid var(--color-line); transform: translateX(100%); visibility: hidden; } .nav__links.is-open { transform: none; visibility: visible; } .nav__links .nav__link { display: block; padding: var(--space-2) 0; font-size: 18px; border-bottom: 1px solid var(--color-line); } .nav__drawer-cta { margin-top: var(--space-3); } .nav__links .nav__drawer-cta .nav__link { background: var(--color-red); border-bottom: none; padding: var(--space-2) var(--space-3); font-size: 14px; text-align: center; } .nav__backdrop { position: fixed; top: var(--header-h); right: 0; bottom: 0; left: 0; z-index: 1; background: var(--color-backdrop); opacity: 0; visibility: hidden; } .nav__backdrop.is-open { opacity: 1; visibility: visible; } @media (prefers-reduced-motion: no-preference) { .site-header::before { transition: opacity var(--nav-ease); } .site-header { transition: border-color var(--nav-ease); } .nav__toggle-bar { transition: transform var(--nav-ease), opacity var(--nav-ease); } /* visibility waits for the slide-out to finish before hiding the panel. */ .nav__links, .nav__backdrop { transition: transform var(--nav-ease), opacity var(--nav-ease), visibility 0s linear 250ms; } .nav__links.is-open, .nav__backdrop.is-open { transition-delay: 0s; } } .nav__link { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .nav__cta { display: none; background: var(--color-red); color: var(--color-offwhite); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 12px var(--space-3); white-space: nowrap; } /* Language switcher — plain links, no JS. Stays in the header bar at every width (not inside the collapsed menu) so language is always one tap away. */ .lang-switcher { display: flex; align-items: center; margin-left: auto; } .lang-switcher__link { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-text-dim); padding: var(--space-1) 6px; border-left: 1px solid rgba(245, 245, 240, 0.25); line-height: 1; } .lang-switcher__link:first-child { border-left: none; } .lang-switcher__link.is-current { color: var(--color-offwhite); box-shadow: inset 0 -2px 0 var(--color-yellow); } /* Desktop: four links fit inline, so no burger and no drawer. */ @media (min-width: 900px) { .nav__toggle, .nav__backdrop, .nav__drawer-cta { display: none; } .nav__links { position: static; width: auto; flex-direction: row; align-items: center; gap: var(--space-4); padding: 0; overflow: visible; background: none; border: none; transform: none; visibility: visible; transition: none; } .nav__links .nav__link { padding: 0; font-size: 13px; border-bottom: none; } .nav__cta { display: inline-block; order: 4; } .nav__links { order: 2; } .lang-switcher { order: 3; margin-left: 0; margin-right: 0; } } /* Hero — the first sentence explains the product; the visual is a circle, not a single person. The provocative brand line lives lower down (.brand). */ .hero { position: relative; padding: var(--space-4) 0 var(--section-y); color: var(--color-offwhite); background: var(--color-bg); } .hero__inner { position: relative; display: flex; flex-direction: column; gap: var(--block-gap); } .hero__headline { font-size: clamp(32px, 5.6vw, 56px); line-height: 1; margin-bottom: var(--space-3); } .hero__steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .hero__steps li { display: flex; align-items: center; gap: var(--space-1); } .hero__steps li + li::before { content: "→"; color: var(--color-yellow); } .hero__form { display: flex; flex-direction: column; gap: var(--space-2); max-width: 460px; margin-bottom: var(--space-1); } .hero__form input { background: transparent; border: 1px solid rgba(245, 245, 240, 0.3); padding: var(--space-2) var(--space-3); } .hero__form button { background: var(--color-red); border: none; padding: var(--space-2) var(--space-3); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; white-space: nowrap; } .hero__form-status { min-height: 1.2em; font-size: 13px; color: var(--color-yellow); margin-bottom: var(--space-1); } .hero__helper { font-size: 13px; color: var(--color-text-dim); max-width: 46ch; margin-bottom: var(--space-2); } .hero__queue { font-size: 12px; color: var(--color-text-dim); letter-spacing: 0.05em; text-transform: uppercase; } .hero__media { width: 100%; max-width: 420px; } @media (min-width: 640px) { .hero__form { flex-direction: row; } .hero__form input { flex: 1; } } @media (min-width: 1024px) { .hero__inner { flex-direction: row; align-items: center; justify-content: space-between; } .hero__copy { max-width: 620px; } } /* Mock UI — illustrative app UI rendered in markup. Every mock sits in a

with a visually-hidden caption; its avatars are aria-hidden. The cast keeps fixed colours so the same people are recognisable page-wide. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ui-card { background: rgba(245, 245, 240, 0.04); border: 1px solid rgba(245, 245, 240, 0.15); border-radius: var(--space-2); padding: var(--space-3); } .ui-label { font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-dim); } .avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--color-bg); font-size: 13px; font-weight: 900; line-height: 1; color: var(--color-offwhite); background: rgba(245, 245, 240, 0.15); } .avatar--sm { width: 28px; height: 28px; font-size: 11px; } .avatar--katya { background: var(--color-red); } .avatar--mike { background: var(--color-blue); } .avatar--anna { background: var(--color-yellow); color: var(--color-bg); } .avatar--alex { background: var(--color-offwhite); color: var(--color-bg); } .avatar--maya { background: var(--color-bg); box-shadow: inset 0 0 0 2px var(--color-yellow); } .avatar--sarah { background: var(--color-bg); box-shadow: inset 0 0 0 2px var(--color-red); } .avatar--more { background: rgba(245, 245, 240, 0.15); font-size: 11px; } .avatar-stack { display: inline-flex; } .avatar-stack .avatar + .avatar { margin-left: -10px; } .avatar-stack .avatar--sm + .avatar--sm { margin-left: -6px; } .circle-card__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .circle-card__names { font-size: 12px; color: var(--color-text-dim); } .circle-card__name { font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; } .circle-card__members { font-size: 13px; color: var(--color-text-dim); margin-bottom: var(--space-3); } .circle-card__quests { display: grid; gap: var(--space-2); margin-top: var(--space-2); } .quest-row { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2); border-radius: var(--space-1); background: rgba(245, 245, 240, 0.05); } .quest-row__title { display: block; font-weight: 700; font-size: 14px; } .quest-row__meta { display: block; font-size: 12px; color: var(--color-text-dim); } .quest-row__meta strong, .quest-card__meta strong, .activity-row__text strong { color: var(--color-offwhite); } .ui-phone { max-width: 340px; margin: 0 auto; border: 1px solid rgba(245, 245, 240, 0.25); border-radius: var(--space-4); padding: var(--space-4) var(--space-3) var(--space-3); background: var(--color-bg); box-shadow: 0 0 0 6px rgba(245, 245, 240, 0.05); } .ui-phone__head { padding-bottom: var(--space-3); margin-bottom: var(--space-2); border-bottom: 1px solid rgba(245, 245, 240, 0.1); } .ui-phone__head .circle-card__members { margin-bottom: var(--space-2); } .activity { display: grid; gap: var(--space-2); } .activity-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: start; font-size: 13px; color: var(--color-text-dim); } .activity-row__time { font-size: 11px; } .reaction-row { display: block; margin-top: 4px; font-size: 12px; color: var(--color-offwhite); } .chips { display: flex; flex-wrap: wrap; gap: var(--space-1); } .chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(245, 245, 240, 0.3); } .chip--funny { background: var(--color-yellow); color: var(--color-bg); border-color: var(--color-yellow); } .chip--useful { background: var(--color-blue); border-color: var(--color-blue); } .chip--social { background: var(--color-red); border-color: var(--color-red); } .chip--adventurous { background: var(--color-offwhite); color: var(--color-bg); border-color: var(--color-offwhite); } .chip--personal { background: transparent; } .quest-card { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; } .quest-card__title { font-size: 18px; font-weight: 900; line-height: 1.15; text-transform: uppercase; } .quest-card__meta { display: flex; align-items: center; gap: var(--space-1); font-size: 13px; color: var(--color-text-dim); } .progress { display: block; width: 100%; height: 6px; border-radius: 3px; background: rgba(245, 245, 240, 0.12); overflow: hidden; } .progress__fill { display: block; height: 100%; background: var(--color-yellow); } /* Privacy strip — the strongest differentiator, directly under the hero. */ .privacy-strip { background: var(--color-red); padding: var(--space-2) 0; } .privacy-strip__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-2); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .privacy-strip__list li + li::before { content: "◆"; color: var(--color-yellow); margin-right: var(--space-2); } /* Shared section heading */ .section-head { margin-bottom: var(--block-gap); max-width: 720px; } .section-head h2 { font-size: clamp(32px, 6vw, 56px); margin-bottom: var(--space-3); } .section-head__body { color: var(--color-text-dim); max-width: 56ch; } .section-head__body strong { color: var(--color-offwhite); } /* Your Circle */ .circle { padding: var(--section-y) 0; } .circle__steps { list-style: none; display: grid; gap: var(--space-4); margin-bottom: var(--block-gap); } .circle__step { border-top: 1px solid rgba(245, 245, 240, 0.15); padding-top: var(--space-3); } .circle__step-index { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-weight: 900; font-size: 13px; margin-bottom: var(--space-2); } .circle__step-index--red { background: var(--color-red); } .circle__step-index--yellow { background: var(--color-yellow); color: var(--color-bg); } .circle__step-index--blue { background: var(--color-blue); } .circle__step h3 { font-size: 18px; margin-bottom: var(--space-1); } .circle__step p { color: var(--color-text-dim); font-size: 14px; } .circle__quote { border-left: 4px solid var(--color-yellow); padding-left: var(--space-3); font-size: clamp(20px, 3vw, 28px); line-height: 1.3; max-width: 36ch; color: var(--color-text-dim); } .circle__quote strong { color: var(--color-offwhite); } @media (min-width: 1024px) { .circle__steps { grid-template-columns: repeat(3, 1fr); } } /* How it works — one diagram, five named moments. Vertical with a rail on mobile, a row of connected nodes on desktop. */ .how { padding: var(--section-y) 0; background: var(--color-blue); } .how .section-head__body { color: var(--color-offwhite); opacity: 0.85; } .loop-diagram { list-style: none; display: grid; gap: var(--space-3); } .loop-diagram__node { position: relative; padding: var(--space-3); background: var(--color-bg); border-radius: var(--space-2); } .loop-diagram__node .avatar, .loop-diagram__node .avatar-stack { margin-bottom: var(--space-2); } .loop-diagram__node h3 { font-size: 16px; margin-bottom: var(--space-1); } .loop-diagram__node p { font-size: 14px; color: var(--color-text-dim); } .loop-diagram__node p strong { color: var(--color-offwhite); } .loop-diagram__node::after { content: "↓"; position: absolute; left: 50%; bottom: calc(-1 * var(--space-3)); transform: translate(-50%, 2px); color: var(--color-yellow); font-weight: 900; } .loop-diagram__node--end { box-shadow: inset 0 0 0 2px var(--color-yellow); } .loop-diagram__node--end::after { content: none; } @media (min-width: 1024px) { .loop-diagram { grid-template-columns: repeat(5, 1fr); gap: var(--space-3); } .loop-diagram__node::after { content: "→"; left: auto; right: calc(-1 * var(--space-3)); top: 50%; bottom: auto; transform: translate(2px, -50%); width: var(--space-3); text-align: center; } } /* Inside the app */ .app { padding: var(--section-y) 0; } .app__inner { display: flex; flex-direction: column; gap: var(--block-gap); } .app__copy h2 { font-size: clamp(32px, 6vw, 56px); margin-bottom: var(--space-3); } .app__copy .section-head__body { margin-bottom: var(--space-4); } .app__screen { width: 100%; } .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } .features li { border-top: 2px solid var(--color-red); padding-top: var(--space-2); } .features h3 { font-size: 14px; margin-bottom: 4px; } .features p { font-size: 14px; color: var(--color-text-dim); } @media (min-width: 1024px) { .app__inner { flex-direction: row; align-items: center; justify-content: space-between; } .app__copy { max-width: 600px; } .app__screen { max-width: 380px; } } /* SideQuests */ .sidequests { padding: var(--section-y) 0; border-top: 1px solid rgba(245, 245, 240, 0.1); } .sidequests .section-head { margin-bottom: var(--space-3); } .sidequests__label { margin: var(--block-gap) 0 var(--space-2); } .quest-grid { display: grid; gap: var(--space-2); } .interactions { display: flex; flex-wrap: wrap; gap: var(--space-1); } .interactions li { font-size: 14px; padding: var(--space-1) var(--space-2); border-radius: 999px; background: rgba(245, 245, 240, 0.06); border: 1px solid rgba(245, 245, 240, 0.12); } @media (min-width: 640px) { .quest-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .quest-grid { grid-template-columns: repeat(3, 1fr); } .quest-grid--group { grid-template-columns: repeat(4, 1fr); } } /* One week — a single circle's story, day by day. */ .week { padding: var(--section-y) 0; background: var(--color-offwhite); color: var(--color-bg); } .week .eyebrow { color: rgba(10, 10, 10, 0.6); } .week__timeline { list-style: none; display: grid; gap: var(--space-3); border-left: 2px solid var(--color-bg); padding-left: var(--space-3); } .week__day { position: relative; } .week__day::before { content: ""; position: absolute; left: calc(-1 * var(--space-3) - 7px); top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-red); } .week__day--end::before { background: var(--color-yellow); box-shadow: 0 0 0 2px var(--color-bg); } .week__label { font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; } .week__day p:last-child { max-width: 60ch; } @media (min-width: 1024px) { .week__timeline { grid-template-columns: repeat(5, 1fr); border-left: none; border-top: 2px solid var(--color-bg); padding-left: 0; padding-top: var(--space-3); } .week__day::before { left: 0; top: calc(-1 * var(--space-3) - 7px); } } /* Circle Memories — what's left after the quests: the long-term value. */ .memories { padding: var(--section-y) 0; } .memories__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--block-gap); } .memories__number { font-size: clamp(40px, 7vw, 64px); font-weight: 900; line-height: 1; color: var(--color-yellow); } .memories__label { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-dim); margin-top: var(--space-1); max-width: 22ch; } .memories__collage { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; grid-auto-flow: dense; gap: var(--space-1); } .memory { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-2); border-radius: var(--space-1); } .memory__emoji { font-size: 28px; line-height: 1; } .memory__caption { font-size: 13px; font-weight: 700; } .memory--wide { grid-column: span 2; } .memory--tall { grid-row: span 2; } .memory--full { grid-column: 1 / -1; } .memory--red { background: var(--color-red); } .memory--blue { background: var(--color-blue); } .memory--yellow { background: var(--color-yellow); color: var(--color-bg); } .memory--offwhite { background: var(--color-offwhite); color: var(--color-bg); } .memory--outline { border: 1px solid rgba(245, 245, 240, 0.3); } .memories__note { margin-top: var(--space-3); font-size: 13px; color: var(--color-text-dim); } @media (min-width: 640px) { .memories__stats { grid-template-columns: repeat(4, 1fr); } .memories__collage { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; } } /* Solo — an onboarding path, not a second product. */ .solo { padding: var(--space-4) 0; border-top: 1px solid rgba(245, 245, 240, 0.1); border-bottom: 1px solid rgba(245, 245, 240, 0.1); } .solo__inner { display: flex; flex-direction: column; gap: var(--space-3); } .solo h2 { font-size: clamp(22px, 3.5vw, 32px); margin-bottom: var(--space-1); } .solo p { color: var(--color-text-dim); max-width: 60ch; } .solo__link { align-self: flex-start; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-offwhite); white-space: nowrap; } @media (min-width: 1024px) { .solo__inner { flex-direction: row; align-items: center; justify-content: space-between; } .solo__link { align-self: center; } } /* FAQ */ .faq { padding: var(--section-y) 0; } .faq__header { margin-bottom: var(--block-gap); } .faq__header h2 { font-size: clamp(28px, 5vw, 44px); margin-top: var(--space-1); } .faq__list { display: grid; gap: var(--space-4); } .faq__item { border-top: 1px solid rgba(245, 245, 240, 0.15); padding-top: var(--space-3); } .faq__item h3 { font-size: 18px; margin-bottom: var(--space-1); } .faq__item p { color: var(--color-text-dim); max-width: 60ch; } @media (min-width: 640px) { .faq__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-4); } } /* Brand line — the old hero hook, kept as brand copy with its rotating phrase. */ .brand { padding: var(--section-y) 0 var(--space-4); background: var(--color-red); } .brand__line { font-size: clamp(32px, 7vw, 72px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; } .brand__line--1 { display: block; margin-bottom: var(--space-1); } .brand__line--2 { display: block; min-height: 1.9em; } .brand .hero__highlight { background: var(--color-bg); } .hero__highlight { display: inline-block; background: var(--color-red); padding: 0 var(--space-1); } /* CTA */ .cta { background: var(--color-yellow); color: var(--color-bg); padding: var(--section-y) 0; } .cta__inner { display: flex; flex-direction: column; gap: var(--block-gap); } .cta .eyebrow { color: rgba(10, 10, 10, 0.6); } .cta .eyebrow::before { background: var(--color-bg); } .cta h2 { font-size: clamp(32px, 6vw, 56px); margin-bottom: var(--space-3); max-width: 16ch; } .cta__body { max-width: 48ch; margin-bottom: var(--space-4); } .cta__form { max-width: 460px; margin-bottom: var(--space-1); } .cta__form input { width: 100%; background: transparent; border: 1px solid rgba(10, 10, 10, 0.4); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); } .cta__form input::placeholder { color: rgba(10, 10, 10, 0.7); } .cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .cta__button { padding: var(--space-2) var(--space-3); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 13px; cursor: pointer; border: 1px solid var(--color-bg); } .cta__button--primary { background: var(--color-bg); color: var(--color-offwhite); } .cta__status { font-size: 13px; min-height: 1.2em; } .cta__secondary { font-size: 14px; margin-top: var(--space-2); } .cta__secondary a { text-decoration: underline; text-underline-offset: 3px; } /* Invite card — what receiving an invitation looks like. */ .invite-card { width: 100%; max-width: 400px; background: var(--color-bg); color: var(--color-offwhite); border-radius: var(--space-2); padding: var(--space-3); box-shadow: 0 var(--space-2) var(--space-4) rgba(10, 10, 10, 0.25); } .invite-card__top { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: start; } .invite-card__text { font-size: 15px; line-height: 1.35; } .invite-card__time { font-size: 11px; color: var(--color-text-dim); } .invite-card__circle { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; padding: var(--space-2); border-radius: var(--space-1); background: rgba(245, 245, 240, 0.06); } .invite-card__meta { font-size: 13px; color: var(--color-text-dim); } .invite-card__join { display: block; text-align: center; background: var(--color-red); padding: var(--space-2); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; } @media (min-width: 1024px) { .cta__inner { flex-direction: row; align-items: center; justify-content: space-between; } } /* Hero highlight rotation */ .hero__highlight { transition: opacity 0.2s ease, transform 0.2s ease; } .hero__highlight.is-swapping { opacity: 0; transform: translateY(-6px); } /* Hero on-load entrance (above the fold — plays immediately, not scroll-triggered) */ @media (prefers-reduced-motion: no-preference) { .hero__headline-line { display: block; opacity: 0; transform: translateY(28px); animation: hero-line-in 0.7s ease forwards; } .hero__headline-line--1 { animation-delay: 0.05s; } .hero__media { opacity: 0; transform: scale(0.96) translateY(16px); animation: hero-card-in 0.8s ease forwards; animation-delay: 0.3s; } } @keyframes hero-line-in { to { opacity: 1; transform: translateY(0); } } @keyframes hero-card-in { to { opacity: 1; transform: scale(1) translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero__highlight { transition: none; } } /* Scroll-triggered reveal system (JS toggles .is-visible via IntersectionObserver) */ @media (prefers-reduced-motion: no-preference) { [data-animate] { opacity: 0; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } [data-animate="fade-up"] { transform: translateY(16px); } [data-animate="slide-left"] { transform: translateX(-40px); } [data-animate="slide-right"] { transform: translateX(40px); } [data-animate="scale-in"] { transform: scale(0.8); } [data-animate].is-visible { opacity: 1; transform: none; } [data-animate-delay="1"] { transition-delay: 0.08s; } [data-animate-delay="2"] { transition-delay: 0.16s; } [data-animate-delay="3"] { transition-delay: 0.24s; } [data-animate-delay="4"] { transition-delay: 0.32s; } } /* Hover nudges */ @media (prefers-reduced-motion: no-preference) { .hero__form button, .cta__button, .nav__cta, .solo__link, .invite-card__join { transition: transform 0.15s ease; } .hero__form button:hover, .cta__button:hover, .nav__cta:hover, .solo__link:hover, .invite-card__join:hover { transform: translateY(-2px) scale(1.03); } } /* Footer */ .site-footer { padding: var(--space-4) 0; border-top: 1px solid rgba(245, 245, 240, 0.1); } .site-footer__inner { display: flex; flex-direction: column; gap: var(--space-2); font-size: 12px; color: var(--color-text-dim); } .site-footer__wordmark { display: flex; align-items: center; gap: var(--space-1); } .site-footer__links { display: flex; gap: var(--space-3); } @media (min-width: 640px) { .site-footer__inner { flex-direction: row; justify-content: space-between; } } /* Legal pages (Privacy / Terms) */ .legal { padding: var(--section-y) 0; } .legal h1 { font-size: clamp(32px, 6vw, 48px); margin-bottom: var(--space-2); } .legal__updated { color: var(--color-text-dim); font-size: 13px; margin-bottom: var(--block-gap); } .legal__updated:has(+ .legal__governing) { margin-bottom: var(--space-3); } .legal__governing { max-width: 70ch; margin-bottom: var(--block-gap); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-yellow); background: rgba(240, 192, 48, 0.07); color: var(--color-text-dim); font-size: 13px; } .legal__governing span { display: block; margin-top: var(--space-1); opacity: 0.75; } .legal__body { max-width: 70ch; } .legal__body h2 { font-size: 18px; margin: var(--block-gap) 0 var(--space-2); } .legal__body h2:first-child { margin-top: 0; } .legal__body p { color: var(--color-text-dim); margin-bottom: var(--space-3); } .legal__body ul { list-style: disc; padding-left: 1.2em; margin-bottom: var(--space-3); } .legal__body li { color: var(--color-text-dim); margin-bottom: var(--space-1); } .legal__body strong { color: var(--color-offwhite); } .legal__body a { text-decoration: underline; } /* Press kit */ .press-kit { padding: var(--section-y) 0; } .press-kit h1 { font-size: clamp(32px, 6vw, 48px); margin-bottom: var(--space-3); } .press-kit__intro { color: var(--color-text-dim); max-width: 60ch; margin-bottom: var(--space-5); } .press-kit__section { margin-bottom: var(--space-5); } .press-kit__section h2 { font-size: 20px; margin-bottom: var(--space-3); } .press-kit__section p { color: var(--color-text-dim); max-width: 60ch; margin-bottom: var(--space-2); } .press-kit__pitch { border-left: 3px solid var(--color-red); padding-left: var(--space-3); font-size: 18px; font-style: italic; max-width: 50ch; margin: var(--space-3) 0; } .press-kit__swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); } .press-kit__swatch { border: 1px solid rgba(245, 245, 240, 0.15); } .press-kit__swatch-color { height: 72px; } .press-kit__swatch-label { padding: var(--space-2); font-size: 12px; } .press-kit__swatch-label strong { display: block; color: var(--color-offwhite); margin-bottom: 2px; } .press-kit__assets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); } .press-kit__asset { border: 1px solid rgba(245, 245, 240, 0.15); padding: var(--space-4) var(--space-3); text-align: center; } .press-kit__asset img { margin: 0 auto var(--space-3); max-height: 40px; width: auto; } .press-kit__asset a { text-decoration: underline; font-size: 13px; } .press-kit__screens { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-1); } .press-kit__screen { flex: 0 0 auto; text-align: center; } .press-kit__screen img { width: 120px; border: 1px solid rgba(245, 245, 240, 0.15); margin-bottom: var(--space-1); } .press-kit__screen-label { font-size: 11px; color: var(--color-text-dim); }