/* ============================================================ ThreeDoors — home.css HOMEPAGE-specific sections only. Loads after the design system (tokens.css + components.css) and the shared site layout/chrome (site.css). Tokens only — no new colours, type, or spacing. Chrome (topbar / overlay / footer) lives in site.css + the injected site-chrome.js. Every future motion site is flagged in index.html. ============================================================ */ /* ------------------------------------------------------------ TEMP launch bar — thin pill of three text links for the launch email. Remove post-launch. ------------------------------------------------------------ */ .launch-bar { padding-block: var(--space-2); } .launch-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px var(--space-2); border-radius: 999px; padding: 9px var(--space-4); background: var(--color-critical); color: var(--color-critical-ink); text-decoration: none; text-align: center; font-family: var(--font-sans); font-size: var(--t-body); transition: background-color var(--motion-fast) var(--ease-out-slow); } .launch-bar__inner:hover { background: var(--color-critical-hover); } .launch-bar__label { font-weight: var(--w-bold); } .launch-bar__inner .icon { flex: none; } /* ------------------------------------------------------------ Hero — format-as-hero. Editorial two-column: copy | cinematic still. ------------------------------------------------------------ */ .hero { padding-block: var(--space-7) var(--space-6); } .hero__grid { display: grid; gap: var(--space-5); align-items: center; } @media (min-width: 920px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-6); } } .hero__copy { display: grid; gap: var(--space-3); } .hero__display { display: flex; align-items: flex-start; gap: var(--space-3); } .hero__mark { color: var(--color-text); flex: none; margin-top: 6px; } .hero__title { font-family: var(--font-serif); font-optical-sizing: auto; font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--w-regular); color: var(--color-text); text-wrap: balance; margin: 0; } .hero__title em { font-style: italic; font-weight: var(--w-regular); } .hero__ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); } .hero__still { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-surface); } /* Hero rotation — markup carries three candidate stills; CSS shows one based on the `data-hero` attribute set on by the inline head script before paint. JS-disabled clients fall through to candidate #1. */ .hero__still img { width: 100%; height: 100%; object-fit: cover; display: none; } .hero__still img[data-hero-id="1"] { display: block; } /* default + JS-disabled fallback */ :root[data-hero="1"] .hero__still img { display: none; } :root[data-hero="1"] .hero__still img[data-hero-id="1"] { display: block; } :root[data-hero="2"] .hero__still img { display: none; } :root[data-hero="2"] .hero__still img[data-hero-id="2"] { display: block; } :root[data-hero="3"] .hero__still img { display: none; } :root[data-hero="3"] .hero__still img[data-hero-id="3"] { display: block; } /* Tag row (hero meta chips) */ .tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--color-border-strong); border-radius: 999px; font-family: var(--font-sans); font-size: var(--t-caption-xs); font-weight: var(--w-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; } .tag .icon { width: 14px; height: 14px; } /* ------------------------------------------------------------ Where — Reading first, other cities pre-registering. ------------------------------------------------------------ */ .where { padding-block: var(--space-5) var(--space-4); } .where__inner { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .where__mark { color: var(--color-accent); margin-top: 6px; } .where__copy { display: grid; gap: var(--space-2); } .where__title { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); } .where__copy p { font-size: var(--t-body); color: var(--color-text-body); margin: 0; max-width: 60ch; } .where__copy a { color: var(--color-accent); text-decoration-color: var(--color-accent); } /* ------------------------------------------------------------ Persona routing — consumer vs corporate ------------------------------------------------------------ */ .persona { display: grid; gap: var(--space-3); } @media (min-width: 760px) { .persona { grid-template-columns: 1fr 1fr; } } .route { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); transition: background-color var(--motion-fast) var(--ease-out-slow), border-color var(--motion-fast) var(--ease-out-slow); } .route:hover { background: var(--color-surface-raise); border-color: var(--color-border-strong); } .route__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-bg); } .route__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .route__body { padding: var(--space-4); display: grid; gap: var(--space-2); } .route__title { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: var(--w-semibold); font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--color-text); margin: 0; } .route__cta { margin-top: var(--space-2); display: flex; } .route__link { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-sans); font-size: var(--t-body); font-weight: var(--w-semibold); color: var(--color-accent); text-decoration: none; transition: gap var(--motion-fast) var(--ease-out-slow), color var(--motion-fast) var(--ease-out-slow); } .route__link:hover { color: var(--color-text); text-decoration: none; } .route__link .icon { width: 18px; height: 18px; } /* ------------------------------------------------------------ "What it is" — three cat-claws-prefixed columns ------------------------------------------------------------ */ .claws { display: grid; gap: var(--space-5); } @media (min-width: 760px) { .claws { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } } .claw { display: grid; gap: var(--space-2); align-content: start; } .claw__mark { color: var(--color-accent); margin-bottom: var(--space-1); /* ANIM: cat-claws hover-slide — to be added in motion pass */ } .claw h3 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); } .claw p { color: var(--color-text-body); } /* ------------------------------------------------------------ "How it works" — 01 → 04 steps ------------------------------------------------------------ */ .steps { display: grid; gap: var(--space-4); counter-reset: step; } @media (min-width: 680px) { .steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-6); } } @media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-3); border-top: 1px solid var(--color-border); } .step__num { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: var(--w-regular); font-size: var(--t-h2); line-height: 1; color: var(--color-accent); letter-spacing: var(--ls-h2); } .step h3 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); } .step p { color: var(--color-text-body); font-size: var(--t-body); } /* ------------------------------------------------------------ FRINGE preview — six role cards (F R I N G E) ------------------------------------------------------------ */ .fringe__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 680px) { .fringe__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1040px) { .fringe__grid { grid-template-columns: repeat(6, 1fr); } } .role { position: relative; display: grid; gap: var(--space-1); align-content: start; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); transition: background-color var(--motion-fast) var(--ease-out-slow), border-color var(--motion-fast) var(--ease-out-slow); } .role:hover { background: var(--color-surface-raise); border-color: var(--color-border-strong); } .role__icon { position: absolute; top: var(--space-3); right: var(--space-3); width: 44px; height: 44px; color: var(--color-accent); margin: 0; } .role__letter { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: var(--w-semibold); font-size: var(--t-h2); line-height: 1; color: var(--color-text); } .role__name { font-family: var(--font-sans); font-size: var(--t-caption); font-weight: var(--w-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text); } .role__desc { font-size: var(--t-caption); color: var(--color-text-muted); line-height: var(--lh-caption); } .role__serial { margin-top: var(--space-1); } /* ------------------------------------------------------------ "What's running" — single case-file tile ------------------------------------------------------------ */ .running { display: grid; gap: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); } @media (min-width: 820px) { .running { grid-template-columns: 0.9fr 1.1fr; } } .running__media { position: relative; min-height: 280px; background: var(--color-bg); } .running__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .running__body { padding: var(--space-5); display: grid; gap: var(--space-3); align-content: center; } .running__stamp { justify-self: start; } .running__title { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); } .running__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-top: var(--space-1); } .running__price { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: var(--w-semibold); font-size: var(--t-h3); color: var(--color-text); line-height: 1; } .running__price small { display: block; font-family: var(--font-sans); font-size: var(--t-caption-xs); font-weight: var(--w-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-soft); margin-top: 4px; } /* ------------------------------------------------------------ Corporate band — teal feature → /corporate ------------------------------------------------------------ */ .corp__grid { display: grid; gap: var(--space-5); align-items: center; } @media (min-width: 880px) { .corp__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); } } .corp__copy { display: grid; gap: var(--space-3); max-width: 560px; } .corp__still { border-radius: var(--radius); overflow: hidden; aspect-ratio: 5 / 4; border: 1px solid color-mix(in oklab, var(--color-door-cream) 22%, transparent); } .corp__still img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ------------------------------------------------------------ Waitlist — WhatsApp-primary pre-launch CTA (the page's true hero CTA) ------------------------------------------------------------ */ .waitlist { border: 1px solid var(--color-border-strong); border-radius: var(--radius); padding: var(--space-7) var(--space-5); display: grid; gap: var(--space-4); justify-items: center; text-align: center; background: var(--color-surface); } .waitlist__head { display: grid; gap: var(--space-3); justify-items: center; max-width: 640px; } .waitlist__head .eyebrow { white-space: nowrap; } .waitlist__title { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } .waitlist__ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; } .btn--lg { padding: 16px 26px; min-height: 52px; font-size: var(--t-body-lg); } .waitlist__note { font-size: var(--t-caption); color: var(--color-text-soft); letter-spacing: var(--ls-caption); } /* ------------------------------------------------------------ While you wait — the world's great rooms, worth the trip ------------------------------------------------------------ */ .elsewhere { display: grid; gap: var(--space-3); } @media (min-width: 760px) { .elsewhere { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } } .elsewhere-card { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); transition: background-color var(--motion-fast) var(--ease-out-slow), border-color var(--motion-fast) var(--ease-out-slow); } .elsewhere-card:hover { background: var(--color-surface-raise); border-color: var(--color-border-strong); } .elsewhere-card__place { color: var(--color-accent); } .elsewhere-card__name { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: var(--w-semibold); font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); color: var(--color-text); margin: 0; } .elsewhere-card p { color: var(--color-text-body); font-size: var(--t-body); margin: 0; } .elsewhere__foot { margin-top: var(--space-4); max-width: 64ch; color: var(--color-text-body); font-size: var(--t-body); font-style: italic; } /* ------------------------------------------------------------ FAQ —
typographic rows ------------------------------------------------------------ */ .faq { display: grid; border-top: 1px solid var(--color-border); max-width: 860px; } .faq__item { border-bottom: 1px solid var(--color-border); } .faq__item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; color: var(--color-text); font-family: var(--font-serif); font-optical-sizing: auto; font-weight: var(--w-semibold); font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); transition: color var(--motion-fast) var(--ease-out-slow); } .faq__item > summary::-webkit-details-marker { display: none; } .faq__item > summary:hover { color: var(--color-accent); } .faq__mark { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-muted); /* ANIM: plus → x rotate on open — handled by [open] rule below */ transition: transform var(--motion-base) var(--ease-out-slow), color var(--motion-fast) var(--ease-out-slow); } .faq__item[open] .faq__mark { transform: rotate(45deg); color: var(--color-accent); } .faq__plus { width: 14px; height: 14px; } .faq__a { padding-bottom: var(--space-4); color: var(--color-text-body); max-width: 64ch; } .faq__a p { color: var(--color-text-body); }