/* ═══════════════════════════════════════════════════════════════ Anonymous landing — "Find your particular." (design branch 2026-09-05) Ported from the Codex design (codex-design/notable-autos-design.zip, app/globals.css): warm paper + ink palette, Arial/Helvetica with Georgia italics for the "particular" words, square corners, hairline sections, and the index rows that slide into a card on hover. Plain CSS — no Tailwind, no Alpine; this page has its own layout (_AnonLandingLayout). Theme: [data-theme="dark"] on , shared `na-theme` preference. ═══════════════════════════════════════════════════════════════ */ :root { --type-label: .75rem; --type-ui: .875rem; --type-body: 1rem; --type-title: 1.375rem; --type-section: clamp(1.75rem, 2.6vw, 2.25rem); --type-hero: clamp(2.5rem, 4.6vw, 4rem); --background: #f3f1e9; --foreground: #282c29; --muted-foreground: #686c64; --border: #d4d6ca; --accent: #a53f2d; --card: #eae9df; --primary: #30392f; --primary-foreground: #fffdf6; --selection: #cad2ba; --selection-fg: #243120; --em-color: #667c4f; --em-era: #807455; color-scheme: light; } [data-theme="dark"] { --background: #1f1e1b; --foreground: #eeeede; --muted-foreground: #b3aea3; --border: #45443f; --accent: #e58f70; --card: #292826; --primary: #dcd8c8; --primary-foreground: #262522; --selection: #45443f; --selection-fg: #eeeede; --em-color: #b0c58c; --em-era: #d3c59f; color-scheme: dark; } * { box-sizing: border-box; } html { background: var(--background); scroll-behavior: smooth; scroll-padding-top: 30px; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; font-size: var(--type-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .index-row, .primary-button, .theme-toggle, .tour-row, .tour-next { -webkit-user-select: none; user-select: none; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; } ::selection { background: var(--selection); color: var(--selection-fg); } h1, h2, h3, p { margin: 0; } em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; } svg { flex-shrink: 0; } .site-shell { max-width: 1440px; margin: auto; padding: 0 5.5%; } /* header */ .site-header { min-height: 88px; padding: 22px 0; display: flex; align-items: center; border-bottom: 1px solid var(--border); gap: 24px; } .wordmark { font-size: 25px; letter-spacing: -1.4px; display: inline-flex; align-items: center; font-weight: 600; white-space: nowrap; } .brand-dot { width: 12px; height: 12px; background: var(--accent); border-radius: 50%; margin-right: 11px; } .brand-period { color: var(--accent); } .site-nav { display: flex; gap: 32px; margin-left: auto; font-size: var(--type-ui); font-weight: 500; } .site-nav a { padding: 10px 0; } .site-nav a:hover, .sign-in:hover { color: var(--accent); } .header-actions { display: flex; align-items: center; gap: 25px; margin-left: 40px; } .theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; background: none; border: 1px solid var(--border); border-radius: 50%; color: var(--foreground); padding: 0; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } .sign-in { display: flex; align-items: center; gap: 12px; font-size: var(--type-ui); font-weight: 500; padding: 10px 0; } /* hero */ .hero { padding-top: 42px; } .hero-topline { display: flex; justify-content: space-between; align-items: center; } .eyebrow, .edition { font-size: var(--type-label); letter-spacing: .075em; line-height: 1.5; font-weight: 500; color: var(--muted-foreground); } .eyebrow { display: flex; align-items: center; gap: 9px; } .small-dot { display: inline-block; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .hero-heading { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; padding: 38px 0 44px; } h1 { font-size: var(--type-hero); font-weight: 400; letter-spacing: -.045em; line-height: 1.12; } h1 em { color: var(--accent); } .hero-intro { justify-self: end; font-size: var(--type-body); line-height: 1.65; color: var(--muted-foreground); max-width: 390px; } .hero-intro p + p { margin-top: 10px; } .primary-button { margin-top: 23px; background: var(--primary); color: var(--primary-foreground); min-height: 48px; padding: 13px 21px; display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; font-size: var(--type-ui); font-weight: 500; transition: background .2s, transform .2s, color .2s; } @media (hover: hover) { .primary-button:hover { transform: translateY(-2px); background: var(--accent); color: #fff; } } .primary-button:active, .primary-button.is-pressed { transform: translateY(1px) scale(.98); background: var(--accent); color: #fff; transition: 0s; } .microcopy { display: block; font-size: var(--type-label); color: var(--muted-foreground); margin-top: 11px; line-height: 1.6; } /* sections */ .section { padding: 85px 0; border-bottom: 1px solid var(--border); } .section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 33px; } h2 { font-size: var(--type-section); font-weight: 400; letter-spacing: -.035em; line-height: 1.2; } .section-heading h2 { margin-top: 16px; } .section-heading > p { font-size: var(--type-body); line-height: 1.65; color: var(--muted-foreground); } /* the index — three ways in, each row slides into a card on hover */ .collections.section { padding-top: 22px; } .particular-index { padding-top: 0; } .index-row { display: grid; grid-template-columns: 145px minmax(0, 1fr) auto; align-items: center; gap: 22px; min-height: 130px; padding: 22px 0; border-top: 1px solid var(--border); transition: padding .25s, background .25s, transform .25s ease; } .index-row:last-child { border-bottom: 1px solid var(--border); } @media (hover: hover) { .index-row:hover { padding: 22px 15px; background: var(--card); } .index-row:hover .index-end svg { color: var(--accent); } } /* Press (touch + mouse): snap in, spring back over the base transition. A flick-tap on iPad is <80ms, so the JS conductor in anon-landing.js keeps .is-pressed on for a beat and navigates after the spring-back plays. */ .index-row:active, .index-row.is-pressed { padding: 22px 15px; background: var(--card); transform: scale(.985); transition: 0s; } .index-row:active .index-end svg, .index-row.is-pressed .index-end svg { color: var(--accent); } .index-row:active .index-statement em, .index-row.is-pressed .index-statement em { color: var(--accent); } .index-number { font-size: var(--type-label); letter-spacing: .075em; line-height: 1.5; color: var(--muted-foreground); } .index-statement { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.25; } .index-statement em { color: var(--accent); } .color-row em { color: var(--em-color); } .era-row em { color: var(--em-era); } .index-copy p { font-size: var(--type-body); line-height: 1.6; color: var(--muted-foreground); margin-top: 8px; } .index-end { display: flex; align-items: center; gap: 16px; color: var(--muted-foreground); } .preview-link-label { font-size: var(--type-ui); white-space: nowrap; } .paint-swatches { display: flex; gap: 6px; } .paint-swatches i { display: block; width: 20px; height: 29px; background: #657653; } .paint-swatches i:nth-child(2) { background: #ad634e; } .paint-swatches i:nth-child(3) { background: #bbac83; } .paint-swatches i:nth-child(4) { background: #8296a3; } .collection-note { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 22px; font-size: var(--type-ui); line-height: 1.6; color: var(--muted-foreground); } .collection-note > span, .collection-note > a { display: flex; gap: 9px; align-items: center; } .collection-note > a { color: var(--foreground); } .collection-note > a:hover { color: var(--accent); } /* inside */ /* #212 — "Inside your account" tour (canvas direction A, 2026-09-08): a numbered list of member surfaces (the feature list) beside one stage that shows the active surface's DESKTOP capture with its PHONE capture tucked into the corner. Under 760px the stage comes first and the pair mirrors: phone capture leads, desktop tucked in; the list is a vertical tap list — never a sideways scroll (owner). Captures: scripts/anon-preview-shots.mjs. */ .tour h2 em { color: var(--muted-foreground); } .tour-body { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 56px; align-items: start; } .tour-list { display: flex; flex-direction: column; } .tour-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 14px; align-items: start; padding: 16px 0; margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; transition: padding .25s, margin .25s, background .25s; } .tour-row:last-of-type { border-bottom: 1px solid var(--border); } .tour-row.is-active { background: var(--card); padding: 16px 14px; margin: 0 -14px; } .tour-num { font-size: var(--type-label); letter-spacing: .075em; line-height: 1.5; color: var(--muted-foreground); padding-top: 4px; } .tour-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .tour-name { font-size: 1.125rem; line-height: 1.3; } .tour-name em { color: var(--muted-foreground); } .tour-row.is-active .tour-name em { color: var(--accent); } .tour-line { font-size: var(--type-ui); line-height: 1.55; color: var(--muted-foreground); } .tour-arrow { display: inline-flex; color: var(--muted-foreground); padding-top: 4px; } .tour-row:hover .tour-name, .tour-row:hover .tour-arrow, .tour-row:active .tour-name { color: var(--accent); } .tour-row:active { transform: scale(.985); transition: 0s; } .tour-list .primary-button { align-self: flex-start; } .tour-stage { background: var(--card); padding: 24px 24px 28px; } .tour-stage-head, .tour-stage-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--type-label); letter-spacing: .075em; line-height: 1.5; color: var(--muted-foreground); } .tour-stage-head { margin-bottom: 20px; } .tour-lbl-phone { display: none; } .tour-pair { position: relative; padding-bottom: 10%; } .tour-shot { display: block; overflow: hidden; border: 1px solid var(--border); background: var(--background); } .tour-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .tour-shot .is-dark { display: none; } [data-theme="dark"] .tour-shot .is-light { display: none; } [data-theme="dark"] .tour-shot .is-dark { display: block; } .tour-shot.is-wide { width: 88%; aspect-ratio: 16 / 10; } .tour-shot.is-phone { position: absolute; right: 0; bottom: 0; width: 26%; aspect-ratio: 3 / 4; box-shadow: 0 18px 44px rgba(0, 0, 0, .18); } .tour-caption { margin-top: 18px; font-size: var(--type-ui); line-height: 1.55; color: var(--muted-foreground); } .tour-stage-foot { margin-top: 14px; } .tour-next { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none; color: var(--foreground); font: inherit; font-size: var(--type-label); letter-spacing: .075em; cursor: pointer; } .tour-next:hover, .tour-next:active { color: var(--accent); } /* membership */ .membership { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; } .membership h2 { margin: 23px 0; } .membership > div > p:not(.eyebrow) { color: var(--muted-foreground); font-size: var(--type-body); line-height: 1.65; } .membership-details { padding-top: 6px; } .membership-details ul { padding: 0; list-style: none; margin: 24px 0 0; } .membership-details li { display: flex; gap: 15px; font-size: var(--type-body); line-height: 1.65; padding: 12px 0; border-bottom: 1px solid var(--border); } .membership-details li svg { color: var(--muted-foreground); flex-shrink: 0; margin-top: 5px; } .membership-details .primary-button { width: 100%; margin-top: 25px; } .membership-details .microcopy { text-align: center; } .deep-dive-note { border-top: 1px solid var(--border); margin-top: 25px; padding-top: 20px; } .deep-dive-note > span { font-size: var(--type-label); letter-spacing: .075em; line-height: 1.5; } .deep-dive-note p { font-size: var(--type-body); line-height: 1.65; color: var(--muted-foreground); margin-top: 8px; } /* footer */ footer { padding: 34px 0 25px; } .footer-top { display: flex; gap: 22px; align-items: center; font-size: var(--type-ui); } .footer-top .wordmark { font-size: 21px; } .footer-top > span { margin-right: auto; margin-left: 10px; color: var(--muted-foreground); } .footer-top a:hover { color: var(--accent); } .footer-bottom { display: flex; gap: 20px; font-size: var(--type-label); color: var(--muted-foreground); margin-top: 27px; line-height: 1.7; } .footer-bottom > span:last-child { margin-left: auto; } /* ── responsive ── */ @media (max-width: 1100px) { .paint-swatches { display: none; } } @media (max-width: 1000px) { .hero-heading { gap: 30px; } .index-row { grid-template-columns: 125px minmax(0, 1fr) auto; } .section-heading { align-items: start; } .section-heading > p { max-width: 34ch; } } /* Tablets (iPad portrait 820, landscape 1024): two columns left the stage ~360px wide — unreadable captures, wrapped labels. Stack instead, stage first; the desktop-leads pair stays until the phone mirror at 760px. */ @media (max-width: 1100px) { .tour-body { grid-template-columns: 1fr; gap: 34px; } .tour-stage { order: -1; } } @media (max-width: 900px) { .site-shell { padding: 0 5%; } .header-actions { margin-left: 10px; gap: 15px; } .site-nav { gap: 18px; } h1 { letter-spacing: -.035em; } .primary-button { gap: 20px; } .tour-stage { padding: 17px 17px 20px; } .footer-top > span { display: none; } .footer-top .wordmark { margin-right: auto; } } @media (max-width: 760px) { .hero-heading { grid-template-columns: 1fr; gap: 24px; } .hero-intro { justify-self: start; max-width: 44ch; } .hero-intro br { display: none; } .membership { grid-template-columns: 1fr; gap: 34px; } .tour-lbl-desktop { display: none; } .tour-lbl-phone { display: inline; } .tour-pair { padding-bottom: 8%; } .tour-shot.is-phone { position: static; width: 66%; box-shadow: none; } .tour-shot.is-wide { position: absolute; right: 0; bottom: 0; width: 56%; box-shadow: 0 14px 34px rgba(0, 0, 0, .18); } .tour-list .primary-button { align-self: stretch; } /* The stage is moved into the list above the active row (anon-landing.js). */ .tour-list > .tour-stage { order: 0; margin: 10px 0 22px; } .section-heading { display: block; } .section-heading > p { margin-top: 16px; max-width: none; } .index-row { grid-template-columns: minmax(0, 1fr) auto; padding: 18px 0; gap: 12px; } .index-row:hover, .index-row:active, .index-row.is-pressed { padding: 18px 8px; } .index-number { grid-column: 1 / -1; } .index-statement { font-size: 1.5rem; } .index-copy p { font-size: var(--type-ui); } .preview-link-label { display: none; } .collections.section { padding-top: 16px; } } @media (max-width: 600px) { .site-header { padding: 16px 0; gap: 10px; } .wordmark { font-size: 22px; } .site-nav { display: none; } .header-actions { margin-left: auto; gap: 13px; } .brand-dot { width: 9px; height: 9px; margin-right: 8px; } .hero { padding-top: 27px; } .edition { display: none; } .hero-heading { padding: 28px 0 32px; } .hero-intro .primary-button { display: inline-flex; } .section { padding: 48px 0; } .index-end svg { width: 17px; height: 17px; } .footer-top { flex-wrap: wrap; gap: 15px; } .footer-top .wordmark { font-size: 21px; } .footer-bottom { flex-wrap: wrap; gap: 9px 18px; } .footer-bottom > span:last-child { margin-left: 0; width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* ── The journal (#214): the weekly post, in the landing's paper look ── */ .site-nav a.is-current { color: var(--accent); } .journal-hero { padding-top: 42px; } .journal-heading { padding-bottom: 20px; } .journal-rss { text-decoration: underline; text-underline-offset: 3px; } .journal-rss:hover { color: var(--accent); } .journal-list.section { padding-top: 22px; } .journal-empty { color: var(--muted-foreground); padding: 22px 0; } .journal-row .index-number { white-space: nowrap; } .journal-row .index-copy { min-width: 0; } .journal-row-title { font-size: clamp(1.375rem, 2.2vw, 1.875rem); } .journal-row .index-copy > p { color: var(--muted-foreground); margin-top: 6px; line-height: 1.55; } .journal-title-block { padding: 38px 0 44px; max-width: 900px; } .journal-title-block h1 { font-size: clamp(2rem, 4vw, 3.25rem); } .journal-lede { margin-top: 20px; font-size: 1.125rem; line-height: 1.65; color: var(--muted-foreground); max-width: 640px; } .journal-part.section { padding: 56px 0; } .journal-part .section-heading { margin-bottom: 26px; } .journal-item-title { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.25; } .journal-item-meta { font-size: var(--type-ui); color: var(--muted-foreground); margin-top: 4px; } .journal-item-text { margin-top: 10px; line-height: 1.6; max-width: 62ch; } .journal-row.is-gone .journal-item-title { color: var(--muted-foreground); } .journal-stat { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 40px; align-items: start; padding: 28px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .journal-stat-number { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; letter-spacing: -.03em; color: var(--accent); } .journal-stat-meta { font-size: var(--type-title); line-height: 1.3; letter-spacing: -.01em; } .journal-stat-copy .journal-item-text { margin-top: 14px; } .journal-stat-foot { margin-top: 14px; font-size: var(--type-ui); line-height: 1.55; color: var(--muted-foreground); max-width: 62ch; } .journal-stat-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: var(--type-ui); font-weight: 500; } .journal-stat-link:hover { color: var(--accent); } .journal-post-foot { padding: 28px 0 8px; } .journal-cta { padding-top: 56px; } .journal-cta .membership-details .primary-button { margin-top: 0; } .journal-draft-note { margin-top: 18px; padding: 10px 14px; background: var(--card); border: 1px dashed var(--border); font-size: var(--type-ui); color: var(--muted-foreground); } .journal-draft-note a { text-decoration: underline; text-underline-offset: 3px; } .hero-topline .eyebrow a:hover { color: var(--accent); } /* landing strip */ .journal-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .journal-strip-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 18px 0; transition: padding .25s, background .25s; } @media (hover: hover) { .journal-strip-link:hover { padding: 18px 15px; background: var(--card); } .journal-strip-link:hover .journal-strip-cta { color: var(--accent); } } .journal-strip-title { font-size: var(--type-title); letter-spacing: -.02em; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .journal-strip-cta { display: inline-flex; align-items: center; gap: 8px; font-size: var(--type-ui); font-weight: 500; white-space: nowrap; color: var(--muted-foreground); } @media (max-width: 760px) { .journal-stat { grid-template-columns: 1fr; gap: 16px; } .journal-strip-link { grid-template-columns: 1fr; gap: 8px; } .journal-strip-title { white-space: normal; } } /* journal v2 (owner feedback 2026-09-09): cars side by side, key features, the comparison image */ .journal-cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .journal-car { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; isolation: isolate; padding: 26px 24px 26px 0; border-right: 1px solid var(--border); } .journal-car + .journal-car { padding-left: 24px; } .journal-car:last-child { border-right: 0; padding-right: 0; } /* The hover fill lives on a pseudo-element so the edge cards can bleed it 24px past the text column (which stays aligned with the section rules) without covering a neighbour's divider. */ .journal-car::before { content: ""; position: absolute; inset: 0; z-index: -1; background: transparent; transition: background .25s; } .journal-car:first-child::before { left: -24px; } .journal-car:last-child::before { right: -24px; } @media (hover: hover) { .journal-car:hover::before { background: var(--card); } .journal-car:hover .journal-car-end { color: var(--accent); } } .journal-car .index-number { margin-bottom: 6px; } .journal-car .journal-item-title { font-size: clamp(1.2rem, 1.7vw, 1.5rem); } .journal-car .journal-item-meta { margin-top: 0; } .journal-car-vin { margin: 6px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .04em; color: var(--muted-foreground); } .journal-car-vin-label { font-family: Arial, Helvetica, sans-serif; font-size: 10px; letter-spacing: .12em; margin-right: 4px; } .journal-car .journal-item-text { margin-top: 6px; } .journal-car-end { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; font-size: var(--type-ui); color: var(--muted-foreground); } .journal-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .journal-chips li { font-size: var(--type-label); letter-spacing: .02em; line-height: 1.4; padding: 3px 9px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); } .journal-car:hover .journal-chips li { background: var(--background); } .journal-compare { display: grid; grid-template-columns: minmax(280px, 480px) minmax(0, 1fr); gap: 40px; align-items: start; padding: 28px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .journal-compare-shot { padding: 4px 4px 4px 0; } .journal-compare-img { display: block; width: 100%; height: auto; border: 1px solid var(--border); background: #f3f1e9; box-shadow: 0 1px 2px rgba(20, 18, 12, .10), 0 18px 40px -14px rgba(20, 18, 12, .35); } .journal-compare-img.is-dark { display: none; background: #141414; box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 44px -12px rgba(0, 0, 0, .8); } [data-theme="dark"] .journal-compare-img.is-light { display: none; } [data-theme="dark"] .journal-compare-img.is-dark { display: block; } .journal-compare-copy .journal-item-text { margin-top: 12px; } .journal-gate { margin-top: 18px; font-size: var(--type-body); line-height: 1.6; color: var(--muted-foreground); max-width: 48ch; } .journal-gate-btn { margin-top: 16px; margin-right: 18px; } .journal-compare-copy .journal-stat-link { margin-top: 16px; } @media (max-width: 1000px) { .journal-cars { grid-template-columns: 1fr; } .journal-car { border-right: 0; border-top: 1px solid var(--border); padding: 22px 0; } .journal-car + .journal-car { padding-left: 0; } .journal-car::before, .journal-car:first-child::before, .journal-car:last-child::before { left: -16px; right: -16px; } .journal-car:first-child { border-top: 0; } .journal-compare { grid-template-columns: 1fr; gap: 24px; } .journal-compare-img { max-width: 480px; } } @media (max-width: 600px) { .journal-car-end .preview-link-label { display: inline; } }