/* ============================================================ landing-v2.css — WO-VIS-4 landing rebuild (DRAFT, not yet live) Written from scratch on the VISUAL-IDENTITY-RULING §9.1 concrete-light tokens (css/global.css). No new colors, no new font-families — every value below is a var(--...) reference or an explicit px number from the ruling's shape law (§4: radius cap 0/4/8/12, no pills, no gradients, no glows). Marketing/landing is LIGHT-ALWAYS (§9.1) — this file does not read html.theme-light state; the page forces it in . Superseded by this file: css/landing.css (K6), css/landing-v2-draft.css (K7) — both deleted in this commit. ============================================================ */ .lv2-page { max-width: 680px; margin: 0 auto; padding: 0 24px 96px; } /* ── Masthead — hairline bar, wordmark + one quiet Sign in link. No nav. ── */ .lv2-masthead { display: flex; align-items: center; justify-content: space-between; padding: 28px 0 22px; border-bottom: 1px solid var(--border); margin-bottom: 56px; } .lv2-wordmark { /* Fraunces = wordmark ONLY, hardcoded per-selector (VISUAL-IDENTITY §2's existing convention — not a css var; nothing else on this page uses it). */ font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-primary); text-decoration: none; } .lv2-signin { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--text-subtle); text-decoration: none; } .lv2-signin:hover { color: var(--text-primary); } .lv2-masthead-actions { display: flex; align-items: center; gap: 22px; } /* "Become a member" masthead link — hidden until js/landing-v2.js confirms pricing-state's membership_open:true (ruled 2026-07-17 §2: already-sold readers get a path from the top; the in-page argument order is untouched). Bolder than Sign in (real weight, not a footer link) but still text-only — the lime CTA budget stays reserved for the hero/closing action. */ .lv2-member-link { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); text-decoration: none; } .lv2-member-link:hover { text-decoration: underline; } /* ── Hero ── */ .lv2-hero { text-align: center; margin-bottom: 64px; } /* Live dateline eyebrow (LANDING-STRATEGY §3.2) — the page knows what day it is before it says anything else. Folio grammar: caps, tracked, quiet. */ .lv2-eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 20px; } .lv2-h1 { font-family: var(--font-display); font-weight: 400; /* Raised scale (2026-07-17 design pass — the page read small and flat). */ font-size: clamp(2.5rem, 6.5vw, 4rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 20px; text-wrap: balance; } .lv2-sub { font-family: var(--font-body); font-weight: 400; font-size: clamp(var(--text-lg), 2vw, var(--text-xl)); line-height: 1.6; color: var(--text-muted); max-width: 520px; margin: 0 auto 32px; } /* ── The ONE lime element — flat CTA fill, no lip, no glow (K2 replacement). Carries the ratified green-button faint shadow (VISUAL-IDENTITY §3a, ruled 2026-07-17): separation, not a 3D lip, not a glow-at-scale, and ACHROMATIC (§4 bans colored object-shadows) — green-on-background bleeds without it; a grey hairline outline was considered and REJECTED. ── */ .lv2-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 32px; border: none; border-radius: 8px; background: var(--accent-full); color: var(--accent-text); font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgba(22, 22, 22, 0.08), 0 3px 12px rgba(22, 22, 22, 0.14); transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .lv2-cta:hover { background: var(--accent-hover); box-shadow: 0 1px 2px rgba(22, 22, 22, 0.08), 0 4px 16px rgba(22, 22, 22, 0.16); } .lv2-cta-micro { display: block; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-subtle); margin-top: 12px; } /* Subordinate to .lv2-cta — plain link, no fill, no lime. The lime budget stays CTA-fill-only (hero + closing repeat); this is the real-account path sitting quietly under the free-read primary action. */ .lv2-cta-secondary { display: inline-block; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; margin-top: 14px; } .lv2-cta-secondary:hover { color: var(--text-primary); } /* ── Today's front page (the live almanac) ───────────────────────────── Ruled 2026-07-17 (LANDING-STRATEGY §2 as amended): a DAY, not a fact card — day furniture (date, name day, on-this-day seam) + each live culture's entry in the ratified anatomy (title → deck → source). White surface + hairlines only — no color on the card; tags are ink. */ .lv2-teaser { margin-bottom: 40px; } .lv2-almanac { background: var(--surface); /* FAINT OLIVE EDGE (§ED184) — --accent-dim-hover is the olive-of-lime wash built off --accent-ink (#586F00), not a new colour. Alpha .14 against the grey --border's .08: warmer AND fractionally stronger, so the card gains an edge rather than losing one. In dark the token pair resolves to lime by the ratified --accent-ink: var(--accent) contract. */ border: 1px solid var(--accent-dim-hover); border-radius: 12px; padding: 32px 28px; min-height: 320px; /* FLOAT (§ED184) — MIRRORS .lv2-cta's two-layer achromatic separation shadow (the ratified green-button treatment, VISUAL-IDENTITY §3a): a tight contact layer under a wider diffuse layer. Each layer resolves to its token instead of .lv2-cta's inline literals — copying those verbatim would re-introduce colour literals §ED133 swept out. No new elevation: --shadow-sm/-md are that same 2-layer ramp, already in global.css. */ box-shadow: var(--shadow-sm), var(--shadow-md); } /* Day furniture — the almanac head: date folio + name-day folio, centered over a hairline, the same publication grammar as the reader's masthead dateline (js/card.js buildMasthead). */ .lv2-alm-head { text-align: center; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 26px; } .lv2-alm-date { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-primary); margin: 0; } .lv2-alm-folio { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); margin: 10px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 8px; } .lv2-alm-folio-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); } .lv2-alm-folio-dot::before { content: '·'; color: var(--text-subtle); } .lv2-alm-folio-names { font-weight: 700; color: var(--text-primary); } /* Each live culture's entry — the ratified anatomy, three obvious tiers: title (hero, display type) → deck (fact_text, body) → source (folio). */ .lv2-alm-entries { display: flex; flex-direction: column; gap: 28px; } .lv2-alm-entry { display: flex; flex-direction: column; gap: 12px; } .lv2-alm-entry + .lv2-alm-entry { border-top: 1px solid var(--border); padding-top: 26px; } .lv2-alm-tag { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); } .lv2-alm-title { font-family: var(--font-display); font-weight: 500; /* §ED184 — ONE step up from 400. Not 600. */ font-size: clamp(1.5rem, 4.5vw, 1.875rem); line-height: 1.28; letter-spacing: -0.01em; color: var(--text-primary); margin: 0; } /* Short hero text (a real 3–8 word title, or a short fact) gets the poster treatment — mirrors the reader's is-short toggle (js/card.js). */ .lv2-alm-title.is-short { font-size: clamp(1.75rem, 5.5vw, 2.375rem); line-height: 1.18; } .lv2-alm-deck { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; /* DARKER (§ED184) — --text-muted #404040 → --text-primary #161616, the title's own ink. It is the only darker token that exists; there is no light-theme --text-secondary (it is dark-only, aliased to --text-muted). Tier separation now carries on family/size/weight, not on greyness. */ color: var(--text-primary); /* THIN OLIVE RULE (§ED184) between title and standfirst — same token as the card edge, so the card reads as one warm system. */ border-top: 1px solid var(--accent-dim-hover); padding-top: 12px; margin: 0; } .lv2-alm-source { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-subtle); } /* Skeleton (pre-fetch) state — reserves the card's shape, no shimmer motion (the kill-list bans ambient/looping motion outside the one licensed RISE entrance; a static neutral block is the compliant loading affordance). */ .lv2-almanac.is-loading { display: flex; flex-direction: column; gap: 14px; } .lv2-almanac.is-loading .lv2-skel { display: block; border-radius: 4px; background: var(--surface-3); } .lv2-almanac.is-loading .lv2-skel-date { width: 180px; height: 14px; align-self: center; } .lv2-almanac.is-loading .lv2-skel-folio { width: 130px; height: 12px; align-self: center; margin-bottom: 10px; } .lv2-almanac.is-loading .lv2-skel-tag { width: 120px; height: 12px; margin-top: 6px; } .lv2-almanac.is-loading .lv2-skel-hook { width: 100%; height: 24px; margin-top: 2px; } .lv2-almanac.is-loading .lv2-skel-hook-2 { width: 82%; height: 24px; } .lv2-almanac.is-loading .lv2-skel-src { width: 160px; height: 12px; margin-top: 4px; } .lv2-almanac:not(.is-loading) .lv2-skel { display: none; } .lv2-trust { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-subtle); line-height: 1.5; margin: 16px 0 0; } .lv2-trust a { color: var(--text-subtle); text-decoration: underline; } .lv2-trust a:hover { color: var(--text-primary); } /* ── How it adds up — three one-line beats, plain text, no feature grid ── */ .lv2-beats { display: flex; flex-direction: column; gap: 18px; padding: 36px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 56px; } .lv2-beat { font-family: var(--font-body); font-size: var(--text-lg); /* §ED184 — 1rem → 1.125rem */ line-height: 1.6; color: var(--text-muted); margin: 0; } .lv2-beat strong { color: var(--text-primary); font-weight: 700; } /* ── The belonging beat (v1's litany, kept verbatim) ── */ .lv2-belonging { margin-bottom: 56px; } .lv2-belonging-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: 1.25; color: var(--text-primary); margin: 0 0 16px; } .lv2-litany { font-family: var(--font-body); font-size: var(--text-lg); /* §ED184 — 1rem → 1.125rem */ line-height: 1.7; color: var(--text-muted); margin: 0; } /* ── What you get — the decided two-tier copy, no table, no pricing. Lime-free: the ruling's lime budget is CTA fill only (hero + closing repeat) — tier labels stay ink, same as the retired lv2-split rows. ── */ .lv2-value { display: flex; flex-direction: column; gap: 24px; padding: 32px 0; border-top: 1px solid var(--border); margin-bottom: 56px; } .lv2-value-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); /* §ED184 — one step up */ color: var(--text-primary); margin: 0 0 8px; } .lv2-value-row { display: flex; flex-direction: column; gap: 4px; } .lv2-value-label { font-family: var(--font-body); font-size: var(--text-sm); /* §ED184 — was a bare 0.75rem; now the token */ font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); } .lv2-value-line { font-family: var(--font-body); font-size: var(--text-lg); /* §ED184 — 1rem → 1.125rem */ color: var(--text-muted); } .lv2-value-status { font-family: var(--font-body); font-size: var(--text-base); /* §ED184 — one step up */ color: var(--text-subtle); margin-top: 4px; } /* "Become a member" — neutral (NOT lime; the ruling's lime budget is CTA fill only) but REAL WEIGHT (2026-07-17 design pass: free-first is ruled and free leads, but membership must not read as a footer link). Ink border, full button scale. When pricing-state reports membership open, .is-open raises it further and it navigates to the join path. */ .lv2-member-cta { align-self: flex-start; margin-top: 10px; min-height: 48px; padding: 0 24px; border: 1.5px solid var(--text-primary); border-radius: 8px; background: var(--surface); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: background var(--t-fast) var(--ease); } .lv2-member-cta:hover { background: var(--surface-3); } /* Membership OPEN (pricing-state driven) — server prices, founding strike. Same strike-through grammar as js/card.js's picker; calm, no badge chrome, no lime. */ .lv2-member-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-family: var(--font-body); margin: 10px 0 0; } .lv2-member-price-mo { font-size: var(--text-base); color: var(--text-muted); } .lv2-member-price-dot::before { content: '·'; color: var(--text-subtle); } .lv2-member-price-strike { font-size: var(--text-base); color: var(--text-subtle); text-decoration: line-through; } .lv2-member-price-yr { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); } .lv2-member-founding-note { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-subtle); margin: 2px 0 0; } .lv2-member-form { margin-top: 10px; max-width: 420px; } .lv2-member-row { display: flex; gap: 8px; } .lv2-member-email { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); } .lv2-member-email:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; } .lv2-member-submit { flex-shrink: 0; min-height: 44px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background var(--t-fast) var(--ease); } .lv2-member-submit:hover { background: var(--surface-3); } .lv2-member-submit:disabled { opacity: 0.5; cursor: not-allowed; } .lv2-member-error { font-family: var(--font-body); font-size: var(--text-sm); color: var(--error); margin: 6px 0 0; min-height: 0; } .lv2-member-sub { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-subtle); margin: 6px 0 0; } /* ── Email invite — post-value, skippable. The submit button is deliberately NOT lime: the ruling's lime budget is "CTA fill only (hero + closing repeat)" — a second/third lime action here would break the one-accent law. Neutral bordered button instead. ── */ .lv2-invite { text-align: center; padding: 32px 0; border-top: 1px solid var(--border); margin-bottom: 40px; } .lv2-invite-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); color: var(--text-primary); margin: 0 0 8px; } .lv2-invite-sub { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-subtle); margin: 0 0 20px; } .lv2-invite-form { max-width: 420px; margin: 0 auto; } .lv2-invite-row { display: flex; gap: 8px; } .lv2-invite-email { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); } .lv2-invite-email:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; } .lv2-invite-submit { flex-shrink: 0; min-height: 48px; padding: 0 20px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: background var(--t-fast) var(--ease); } .lv2-invite-submit:hover { background: var(--surface-3); } .lv2-invite-submit:disabled { opacity: 0.5; cursor: not-allowed; } .lv2-invite-error { font-family: var(--font-body); font-size: var(--text-sm); color: var(--error); margin: 8px 0 0; min-height: 0; } .lv2-invite-consent { font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-subtle); margin: 12px 0 0; } .lv2-invite-consent a { color: var(--text-subtle); text-decoration: underline; } .lv2-invite-consent a:hover { color: var(--text-primary); } /* wl-callout — the success state js/waitlist.js swaps the form for (shared, unmodified JS; class names are its contract). Achromatic, matches the concrete-light system — the checkmark glyph is already ink-colored (#1f1b12) in the existing markup, no lime here either. */ .wl-callout { display: flex; align-items: flex-start; gap: 12px; max-width: 420px; margin: 0 auto; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: left; } .wl-callout-ico { flex-shrink: 0; margin-top: 2px; } .wl-callout-txt { display: flex; flex-direction: column; gap: 4px; } .wl-callout-h { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); color: var(--text-primary); } .wl-callout-p { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; } @media (max-width: 480px) { .lv2-invite-row { flex-direction: column; } } /* ── Closing ── */ .lv2-closing { text-align: center; margin-bottom: 48px; } .lv2-email-door { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-subtle); margin-top: 16px; } /* ── Footer — landing-specific link set (note/standards/legal/AI disclosure), same hairline convention as the shared .site-footer but this page's own masthead/footer are bespoke per the ruling (§3.1/§3.8), not the generic site-header/site-footer used by about.html/note.html/standards.html. ── */ .lv2-footer { padding-top: 32px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .lv2-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; } .lv2-footer-links a { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-subtle); text-decoration: none; } .lv2-footer-links a:hover { color: var(--text-primary); } .lv2-footer-ai { font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-disabled); max-width: 480px; margin: 0; } /* ── Motion — the hero keeps the ONE licensed RISE entrance (global.css .m-rise); below-fold sections get a restrained scroll-triggered RISE-class reveal (2026-07-17 design pass): 450ms decelerate, once per section, no parallax, no bounce, no looping. The pre-hidden state exists ONLY under html.lv2-motion, which js/landing-v2.js adds only when prefers-reduced-motion is off and IntersectionObserver exists — no-JS and reduced-motion readers always see full content. ── */ html.lv2-motion .lv2-reveal { opacity: 0; transform: translateY(14px); transition: opacity 450ms var(--ease-decelerate), transform 450ms var(--ease-decelerate); } html.lv2-motion .lv2-reveal.is-inview { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.lv2-motion .lv2-reveal { opacity: 1; transform: none; transition: none; } } /* Desktop — WIDE FRAME, CAPPED PROSE (re-ruled 2026-07-13, supersedes the prior "leave 680px untouched" note below this comment's original text). The .lv2-page frame widens on desktop so the card/hero column stops reading as a narrow mobile strip, but every prose element that would otherwise stretch to the frame's full width (the fact body, the litany, the beat lines, the value lines) keeps its own explicit max-width so the reading MEASURE stays ~60–66ch regardless of how wide the frame gets. Widen the card, not the reading line. Verified in-browser 390/1440/1920. */ @media (min-width: 900px) { .lv2-page { max-width: 960px; padding-left: 40px; padding-right: 40px; } .lv2-almanac { padding: 44px 56px 48px; } /* Two editions of one date, side by side — the multi-culture signal is structural: same day, two live cultures, one publishing house. */ .lv2-alm-entries { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; } .lv2-alm-entry + .lv2-alm-entry { border-top: none; border-left: 1px solid var(--border); padding-top: 0; padding-left: 56px; } .lv2-almanac.is-single .lv2-alm-entries { grid-template-columns: 1fr; } .lv2-almanac.is-single .lv2-alm-title { max-width: 700px; } .lv2-litany, .lv2-beat, .lv2-value-line, .lv2-trust { max-width: 700px; } /* Full-bleed breakout — matches the .site-header convention used on about/note/standards (logo far-left, actions far-right, edge to edge; verified in-browser that this reads as a normal desktop nav bar, not disconnected). Standard "escape a centered container" trick: the rest of the page (hero/beats/value/invite) sits in the wide .lv2-page frame below this, prose-capped per above. */ .lv2-masthead { width: 100vw; position: relative; left: 50%; margin-left: -50vw; padding-left: 64px; padding-right: 64px; box-sizing: border-box; } } @media (min-width: 1440px) { .lv2-page { max-width: 1120px; } }