/* ── Landing v2 ("Ledger") ───────────────────────────────────────────── Implements the "Landing v2 - Ledger" Claude Design page. All colour is expressed through the foundations tokens in main.css (the design's hex values are the light-mode values of those tokens), so the page follows the light/dark theme toggle without a separate dark stylesheet. The dashboard mock inside the product tour intentionally keeps fixed light colours: it is an illustration of the app, not themed UI. */ /* This page is light-only: carries data-theme-lock="light" (which theme.js honours), so a theme toggle would do nothing here — hide it. */ .landing-v2 #theme-toggle-btn { display: none; } body.landing-v2 { background: var(--color-surface-raised); color: var(--color-text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .landing-v2 main { padding-top: 64px; /* clears the fixed site header */ } /* ── Hero ── */ /* The hero scales with the viewport through an em base, per the design. */ .lv2-hero { background: var(--color-surface-raised); font-size: clamp(15px, 1.05vw, 19px); padding: 5em 7vw 4.2em; } .lv2-hero__inner { max-width: 74em; margin: 0 auto; text-align: center; } .lv2-hero__title { /* main.css puts General Sans on all headings; this design keeps the hero, product title and card titles in Inter. */ font-family: 'Inter', sans-serif; font-weight: 600; font-size: 5.1em; line-height: 1.02; letter-spacing: -0.034em; margin: 0 auto 0.17em; max-width: 13ch; text-wrap: pretty; } @media (max-width: 700px) { .lv2-hero__title { font-size: 3.4em; } } .lv2-hero__title span { color: var(--color-brand); } .lv2-hero__sub { font-size: 1.26em; line-height: 1.55; color: var(--color-text-body); max-width: 27.5em; margin: 0 auto 1.75em; } /* ── Hero search card ── */ .lv2-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.6em; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 1.5em; padding: 1.6em 1.9em; box-shadow: 0 16px 40px rgba(18, 32, 41, .07); text-align: left; } .lv2-field { display: flex; flex-direction: column; gap: 0.5em; flex: 1 1 13em; position: relative; } .lv2-field--status { flex: 1 1 15em; min-width: 14em; } .lv2-field__label { font-size: 0.82em; font-weight: 500; color: var(--color-text-secondary); } .lv2-field__inputwrap { position: relative; display: flex; align-items: center; } .lv2-field__input { border: 0; box-shadow: inset 0 -1.5px 0 var(--color-text-primary); background: transparent; padding: 0.35em 1.8em 0.35em 0; font-size: 1.06em; font-weight: 500; width: 100%; font-family: inherit; color: var(--color-text-primary); } .lv2-field__input::placeholder { font-weight: 400; color: var(--color-text-tertiary); opacity: 1; } .lv2-field__input:focus { outline: none; box-shadow: inset 0 -2.5px 0 var(--color-brand); } .lv2-field__clear { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; flex: none; width: 1.55em; height: 1.55em; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--color-text-secondary); cursor: pointer; } .lv2-field__clear:hover { background: var(--color-surface-muted); color: var(--color-text-primary); } /* display:flex above would defeat the hidden attribute's UA rule */ .lv2-field__clear[hidden] { display: none; } .lv2-field__hint { /* Overlay below the field: hints toggling must never resize the card (the whole wizard used to jump on every click that showed/hid one). */ position: absolute; top: calc(100% + 0.3em); left: 0; font-size: 0.78em; color: var(--color-text-secondary); white-space: nowrap; } .lv2-status-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; width: 100%; border: 1px solid var(--color-border-secondary); border-radius: 999px; background: var(--color-surface-raised); padding: 0.8em 1.1em; font-size: 1em; font-weight: 500; color: var(--color-text-primary); cursor: pointer; text-align: left; font-family: inherit; } .lv2-status-btn:hover { border-color: var(--color-brand); } /* Long options ("Joining family who already live there") must ellipsize like a native select, not wrap and grow the card. */ .lv2-status-btn [data-status-label] { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lv2-status-btn svg { flex: none; } .lv2-status-btn.lv2-status--empty [data-status-label] { font-weight: 400; color: var(--color-text-tertiary); } .lv2-submit { border: 0; background: var(--color-brand); color: #fff; border-radius: 999px; padding: 0.95em 2em; font-size: 1em; font-weight: 600; cursor: pointer; flex: none; font-family: inherit; } .lv2-submit:hover { background: var(--color-brand-hover); } .lv2-submit:active { background: var(--color-brand-dark); } .lv2-hero__note { margin-top: 0.9em; font-size: 0.88em; color: var(--color-text-secondary); } /* Autocomplete / status dropdown panels (rendered by landing-v2.js). The mount divs are absolutely positioned so that showing/hiding them never adds the field's flex gap to the card height. */ .lv2-field [data-panel] { position: absolute; top: 100%; left: 0; width: 100%; } .lv2-panel { position: absolute; top: 12px; left: 0; width: max(100%, 320px); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 24px; box-shadow: 0 14px 38px rgba(18, 32, 41, .08); padding: 10px; z-index: 30; } .lv2-panel--status { width: max(100%, 280px); border-radius: 18px; box-shadow: 0 20px 44px rgba(18, 32, 41, .14); padding: 8px; top: 10px; } .lv2-panel__head { font-size: 12.5px; color: var(--color-text-secondary); padding: 6px 14px 9px; } .lv2-panel__opt { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 999px; cursor: pointer; font-size: 16px; color: var(--color-text-primary); } .lv2-panel__opt--icon { padding: 8px 14px; } .lv2-panel--status .lv2-panel__opt { justify-content: space-between; gap: 10px; font-size: 15.5px; } .lv2-panel__opt.is-active { background: rgb(var(--rgb-brand) / 0.08); } .lv2-panel__icon { flex: none; width: 34px; height: 34px; border-radius: 10px; overflow: hidden; background-position: center; background-size: 112%; background-repeat: no-repeat; background-color: var(--color-surface); } .lv2-panel__via { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--color-text-secondary); margin-left: auto; } /* ── Hero city chips ── */ .lv2-chiprow { display: flex; flex-wrap: nowrap; justify-content: safe center; align-items: center; gap: 0.62em; margin: 3.2em -7vw 0; padding-left: 7vw; padding-right: 7vw; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lv2-chiprow::-webkit-scrollbar { height: 0; width: 0; } .lv2-chip { display: flex; align-items: center; gap: 0.62em; border: 1px solid var(--color-border); background: var(--color-surface-raised); border-radius: 999px; padding: 0.45em 1.4em 0.45em 0.5em; font-size: 0.94em; font-weight: 500; color: var(--color-text-primary); cursor: pointer; flex: none; white-space: nowrap; font-family: inherit; } .lv2-chip:hover { border-color: var(--color-text-primary); } .lv2-chip__icon { flex: none; width: 2.6em; height: 2.6em; border-radius: 0.8em; overflow: hidden; background-position: center; background-size: 112%; background-repeat: no-repeat; background-color: var(--color-surface); } /* ── Scroll-driven roadmap ── */ .lv2-roadmap { position: relative; padding: 140px 0 128px; overflow: hidden; background: var(--color-surface-raised); border-top: 1px solid var(--color-background-tertiary); } .lv2-roadmap__head { padding: 0 7vw; margin-bottom: 56px; min-height: 150px; } .lv2-roadmap__eyebrow { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 8px; } .lv2-roadmap__phase { font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; margin: 0; transition: opacity 260ms cubic-bezier(.16, 1, .3, 1), transform 260ms cubic-bezier(.16, 1, .3, 1); } .lv2-roadmap__sub { font-size: 16px; line-height: 1.55; color: var(--color-text-secondary); margin: 16px 0 0; max-width: 52ch; } .lv2-track { display: flex; align-items: flex-start; gap: 28px; padding: 0 7vw; width: max-content; position: relative; will-change: transform; } .lv2-track__baseline, .lv2-track__line { position: absolute; left: 0; top: 31px; height: 1.5px; } .lv2-track__baseline { background: var(--color-background-tertiary); } .lv2-track__line { background: var(--color-brand); transform: scaleX(0); transform-origin: left center; will-change: transform; } .lv2-step { width: 260px; flex: none; position: relative; opacity: .42; transition: opacity 420ms cubic-bezier(.16, 1, .3, 1); } .lv2-step svg { display: block; margin-bottom: 18px; } .lv2-step [data-ring] { transition: stroke-dashoffset 420ms cubic-bezier(.16, 1, .3, 1); } .lv2-step [data-tick] { transition: stroke-dashoffset 260ms cubic-bezier(.34, 1.4, .5, 1) 340ms, opacity 140ms linear 340ms; } .lv2-step [data-num] { transition: opacity 200ms linear 340ms; } .lv2-step__marker-bg { fill: var(--color-surface-raised); stroke: var(--color-border); } .lv2-step h3 { font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 21px; line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 8px; } .lv2-step p { font-size: 14.5px; line-height: 1.5; color: var(--color-text-secondary); margin: 0; max-width: 240px; } /* ── Product tour ── */ .lv2-product { background: var(--color-surface-raised); border-top: 1px solid var(--color-background-tertiary); } .lv2-product__inner { max-width: 1200px; margin: 0 auto; padding: 96px 24px 0; text-align: center; } .lv2-product__title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; margin: 0 auto 12px; max-width: 22ch; } .lv2-product__sub { font-size: 18px; line-height: 1.6; color: var(--color-text-secondary); margin: 0 auto 40px; max-width: 58ch; } .lv2-tour-stage { position: relative; text-align: left; padding: 84px 96px; } .lv2-tour-stage__bg { position: absolute; inset: 0; background: linear-gradient(135deg, #1E8A54 0%, #0E5A34 100%); border-radius: 28px; } /* The frame and everything inside it is a fixed-light illustration of the app; it deliberately does not follow the theme toggle. */ .lv2-tour-frame { position: relative; height: 615px; border: 1px solid #DFE5E1; border-radius: 16px; background: #fff; box-shadow: 0 40px 90px rgba(8, 42, 25, .42), 0 12px 28px rgba(8, 42, 25, .3); overflow: hidden; } [data-tour-dim] { transition: opacity .8s ease, filter .8s ease; } [data-tour-region] { position: relative; transition: transform .8s cubic-bezier(.22, 1, .36, 1), box-shadow .8s cubic-bezier(.22, 1, .36, 1), opacity .8s ease, filter .8s ease; } .lv2-callout { position: absolute; width: 250px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 14px; padding: 16px 18px; box-shadow: 0 14px 34px rgba(18, 32, 41, .15); z-index: 10; transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1); } .lv2-callout__title { font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 15px; color: var(--color-text-primary); margin-bottom: 5px; } .lv2-callout p { font-size: 12.5px; line-height: 1.55; color: var(--color-text-secondary); margin: 0; } .lv2-tour-replay { position: absolute; right: 20px; bottom: 16px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; cursor: pointer; transition: background .16s ease, border-color .16s ease; z-index: 12; } .lv2-tour-replay:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .55); } .lv2-tour-replay:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .65); } @media (max-width: 960px) { .lv2-callout { display: none; } .lv2-tour-stage { padding: 20px; } .lv2-tour-frame { height: auto; overflow-x: auto; } .lv2-dash { min-width: 660px; } } /* ── Value props ── */ .lv2-values { max-width: 1200px; margin: 0 auto; padding: 72px 24px 104px; } .lv2-values__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; } .lv2-values__grid [data-tour-value] { transition: opacity .5s cubic-bezier(.16, 1, .3, 1); } .lv2-value__icon { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; background: var(--color-surface); align-items: center; justify-content: center; margin-bottom: 14px; } .lv2-value__icon svg { stroke: var(--color-brand); } .lv2-values h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 18px; margin: 0 0 6px; } .lv2-values p { font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); margin: 0; } /* ── Shared marketing-section primitives ── */ .lv2-section-inner { max-width: 1200px; margin: 0 auto; padding: 100px 24px 108px; } .lv2-eyebrow { display: inline-block; font-size: 14px; color: var(--color-text-secondary); margin-bottom: 14px; } .lv2-headline { font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 40px; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 14px; text-wrap: pretty; } .lv2-lede { font-size: 18px; line-height: 1.6; color: var(--color-text-secondary); margin: 0; } /* ── How it works ── */ .lv2-how { background: var(--color-surface-raised); border-top: 1px solid var(--color-background-tertiary); } .lv2-how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-top: 48px; } .lv2-how__step { display: flex; flex-direction: column; align-items: center; text-align: center; } .lv2-how__markerwrap { position: relative; width: 100%; display: flex; justify-content: center; margin-bottom: 20px; } .lv2-how__connector { position: absolute; top: 50%; height: 1px; background: var(--color-border); } .lv2-how__connector--first { left: 50%; right: -14px; } .lv2-how__connector--mid { left: -14px; right: -14px; } .lv2-how__connector--last { left: -14px; right: 50%; } @media (max-width: 700px) { [data-connector] { display: none; } } .lv2-how__num { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-raised); font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--color-brand); } .lv2-how__step h3 { font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 16px; margin: 0 0 8px; } .lv2-how__step p { font-size: 15px; line-height: 1.5; color: var(--color-text-secondary); margin: 0; } /* ── City explorer ── */ .lv2-cities { background: var(--color-surface); border-top: 1px solid var(--color-background-tertiary); } .lv2-cities__layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; margin-top: 40px; } .lv2-cities__list { display: flex; flex-direction: column; gap: 10px; flex: 1 1 300px; max-width: 340px; } .lv2-city-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; cursor: pointer; border-radius: 12px; padding: 13px 16px; background: var(--color-surface-raised); border: 1px solid var(--color-border); transition: background 200ms, border-color 200ms; font-family: inherit; } .lv2-city-card.is-active { background: rgb(var(--rgb-brand) / 0.08); border-color: var(--color-brand); } .lv2-city-card__text { display: flex; flex-direction: column; gap: 3px; } .lv2-city-card__name { font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 16px; color: var(--color-text-primary); } .lv2-city-card__tag { font-size: 13.5px; color: var(--color-text-secondary); } .lv2-city-card__arrow { font-size: 16px; color: var(--color-brand); opacity: 0; transition: opacity 200ms; } .lv2-city-card.is-active .lv2-city-card__arrow { opacity: 1; } .lv2-cities__stage { position: relative; flex: 1 1 420px; min-width: 0; height: 568px; border-radius: 16px; overflow: hidden; background: #E8E8E4; } .lv2-city-panel { position: absolute; inset: 0; opacity: 0; transition: opacity 420ms ease; pointer-events: none; } .lv2-city-panel.is-active { opacity: 1; pointer-events: auto; } .lv2-city-panel__media { display: block; width: 100%; height: 100%; object-fit: cover; } .lv2-city-panel__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; background: linear-gradient(to top, rgba(10, 18, 24, .86), rgba(10, 18, 24, .45) 42%, rgba(10, 18, 24, 0)); pointer-events: none; } .lv2-city-panel__content { position: absolute; left: 32px; right: 32px; bottom: 30px; } .lv2-city-panel__tag { font-size: 14px; font-weight: 500; color: var(--color-saffron); margin: 0 0 8px; } .lv2-city-panel__name { font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 40px; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 10px; color: #fff; } .lv2-city-panel__desc { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .9); margin: 0 0 18px; max-width: 56ch; } .lv2-city-panel__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .lv2-city-panel__chips span { border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; font-weight: 500; color: #fff; } .lv2-city-panel__cta { display: inline-block; font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; } .lv2-city-panel__cta:hover { color: var(--color-saffron); } @media (max-width: 700px) { .lv2-cities__stage { height: 460px; } .lv2-city-panel__content { left: 20px; right: 20px; bottom: 20px; } .lv2-city-panel__name { font-size: 30px; } } /* ── Services ── */ .lv2-services { background: var(--color-surface-raised); border-top: 1px solid var(--color-background-tertiary); border-bottom: 1px solid var(--color-background-tertiary); } .lv2-services__intro { max-width: 60ch; margin: 0 0 40px; } .lv2-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .lv2-service-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 16px; padding: 24px; background: var(--color-surface-raised); transition: box-shadow 200ms ease; } .lv2-service-card:hover { box-shadow: 0 12px 32px rgba(18, 32, 41, .10); } .lv2-service-card__icon { display: inline-flex; width: 46px; height: 46px; border-radius: 12px; background: var(--color-surface); align-items: center; justify-content: center; margin-bottom: 16px; } .lv2-service-card h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 19px; margin: 0 0 8px; } .lv2-service-card__desc { font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); margin: 0 0 14px; } .lv2-service-card ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .lv2-service-card li { display: flex; gap: 9px; font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); } .lv2-service-card li svg { flex: none; margin-top: 2px; } .lv2-service-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--color-brand); } /* ── Trust ── */ .lv2-trust__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; } .lv2-trust__about { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border: 1px solid var(--color-text-primary); border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--color-text-primary); text-decoration: none; flex: none; } .lv2-trust__about:hover { background: var(--color-surface); color: var(--color-text-primary); } .lv2-trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .lv2-trust-card { border: 1px solid var(--color-border); border-radius: 16px; padding: 28px; } .lv2-trust-card__icon { display: inline-flex; width: 46px; height: 46px; border-radius: 12px; background: var(--color-surface); align-items: center; justify-content: center; margin-bottom: 18px; } .lv2-trust-card h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 19px; margin: 0 0 8px; } .lv2-trust-card p { font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); margin: 0; } /* ── FAQ ── */ .lv2-faq__inner { max-width: 1200px; margin: 0 auto; padding: 24px 24px 104px; } .lv2-faq__list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; } .lv2-faq details { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-raised); padding: 18px 22px; } .lv2-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-weight: 600; font-size: 16px; } .lv2-faq summary::-webkit-details-marker { display: none; } .lv2-faq summary svg { flex: none; transition: transform 200ms ease; } .lv2-faq details[open] summary svg { transform: rotate(180deg); } .lv2-faq details p { font-size: 15.5px; line-height: 1.6; color: var(--color-text-secondary); margin: 14px 0 0; max-width: 66ch; } .lv2-faq__all { display: inline-block; margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--color-brand); text-decoration: none; } .lv2-faq__all:hover { color: var(--color-brand-hover); } /* ── CTA ── */ .lv2-cta { max-width: 1200px; margin: 0 auto; padding: 0 24px 112px; } .lv2-cta__box { border-radius: 24px; background: var(--color-surface-raised); border: 1px solid var(--color-border); padding: 72px 56px; text-align: center; } @media (max-width: 700px) { .lv2-cta__box { padding: 48px 24px; } } .lv2-cta__box .lv2-headline { margin-left: auto; margin-right: auto; max-width: 20ch; } .lv2-cta__box .lv2-lede { max-width: 52ch; margin: 0 auto 28px; } .lv2-cta__btn { display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 28px; background: var(--color-brand); color: #fff; font-weight: 600; font-size: 17px; border-radius: 999px; text-decoration: none; } .lv2-cta__btn:hover { background: var(--color-brand-hover); color: #fff; } .lv2-cta__btn:active { background: var(--color-brand-dark); } /* Generic focus ring per the design */ .landing-v2 :focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 2px; }