/* ========================================================================== ListingMind design system v2 -------------------------------------------------------------------------- GENERATED FILE -- do not hand-edit above the "Shared chrome" section. Source: modules/public-website/prototype/commercial-redesign-v1/prototype.css Regenerate: node tools/build-design-system.mjs Every rule is scoped to `.lm-v2`, so this file is strictly additive: a page opts in with and every page that does not is unaffected. Two token names (--ink, --line) exist in both systems with different values. Scoping the token layer to body.lm-v2 is what keeps un-migrated pages on the old values while a migrated page gets the new ones. Load order matters: this file must come AFTER styles.css so the six shared class names (.actions .brand .eyebrow .hero .trust .footer-social) resolve to v2 on migrated pages. ========================================================================== */ /* ========================================================================== ListingMind — commercial site restyle prototype (v2) Pain-led copy, contemporary SaaS surface treatment. Prototype only. Nothing here is wired into public-website/runtime. ========================================================================== */ /* --- 1. Tokens ----------------------------------------------------------- */ body.lm-v2 { color-scheme: light; --paper: #ffffff; --wash: #f5f8f8; /* alternating band, cool green-grey */ --sunk: #eef3f2; --ink: #08191d; --ink-2: #465f64; --ink-3: #587074; --line: #e4ecea; --line-2: #cfdcd9; /* Confidence taxonomy — these three mean exactly what they mean inside a ListingMind report, and are used nowhere else in the design. */ --verified: #00795f; --verified-bg: #e4f4ef; --held: #545a7d; --held-bg: #ecedf6; --idea: #8e5c17; --idea-bg: #fbf1dd; --flag: #b23c25; /* Dark surfaces */ --night: #06171b; --night-2: #0d262b; --night-ink: #eaf3f0; --night-ink-2: #93b0b0; --night-line: rgba(226, 244, 238, .14); --night-verified: #3ad9ab; --night-held: #b0b4dd; --night-idea: #eab55c; --brand: #00a88a; --brand-deep: #00775f; --chart-line: #00795f; --chart-warn: #b23c25; --chart-grid: #e2eae8; --chart-fill: rgba(0, 121, 95, .13); --shadow-sm: 0 1px 2px rgba(8, 32, 36, .05); --shadow-md: 0 1px 2px rgba(8, 32, 36, .05), 0 10px 24px -14px rgba(8, 32, 36, .22); --shadow-lg: 0 2px 4px rgba(8, 32, 36, .04), 0 28px 60px -28px rgba(8, 32, 36, .34); --r-sm: 10px; --r: 14px; --r-lg: 20px; --display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --measure: 1200px; --gutter: clamp(20px, 4.5vw, 48px); --band: clamp(64px, 6.6vw, 96px); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.lm-v2 { color-scheme: dark; --paper: #06171b; --wash: #0a2126; --sunk: #0e272c; --ink: #e9f2ef; --ink-2: #a4bdbc; --ink-3: #7b9698; --line: #17383d; --line-2: #245055; --verified: #3ad9ab; --verified-bg: #0a332c; --held: #b0b4dd; --held-bg: #1c2033; --idea: #eab55c; --idea-bg: #33270f; --flag: #f08469; --chart-line: #1bad83; --chart-warn: #d96f55; --chart-grid: #1a3d42; --chart-fill: rgba(27, 173, 131, .16); --night: #0b2429; --night-2: #103036; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -14px rgba(0, 0, 0, .6); --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 28px 60px -28px rgba(0, 0, 0, .8); } } :root[data-theme="dark"] body.lm-v2 { color-scheme: dark; --paper: #06171b; --wash: #0a2126; --sunk: #0e272c; --ink: #e9f2ef; --ink-2: #a4bdbc; --ink-3: #7b9698; --line: #17383d; --line-2: #245055; --verified: #3ad9ab; --verified-bg: #0a332c; --held: #b0b4dd; --held-bg: #1c2033; --idea: #eab55c; --idea-bg: #33270f; --flag: #f08469; --chart-line: #1bad83; --chart-warn: #d96f55; --chart-grid: #1a3d42; --chart-fill: rgba(27, 173, 131, .16); --night: #0b2429; --night-2: #103036; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -14px rgba(0, 0, 0, .6); --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 28px 60px -28px rgba(0, 0, 0, .8); } /* --- 2. Base ------------------------------------------------------------- */ .lm-v2 * { box-sizing: border-box; } body.lm-v2 { margin: 0; background: var(--paper); color: var(--ink); font: 400 16.5px/1.6 var(--display); letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; } .lm-v2 h1, .lm-v2 h2, .lm-v2 h3, .lm-v2 h4 { margin: 0; font-weight: 600; text-wrap: balance; } .lm-v2 h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.038em; } .lm-v2 h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -0.032em; } .lm-v2 h3 { font-size: 21px; line-height: 1.22; letter-spacing: -0.021em; } .lm-v2 h4 { font-size: 16px; line-height: 1.3; letter-spacing: -0.012em; } .lm-v2 p { margin: 0; } .lm-v2 a { color: inherit; } .lm-v2 img { max-width: 100%; height: auto; display: block; } .lm-v2 :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; } .lm-v2 .wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } .lm-v2 .band { padding-block: var(--band); } .lm-v2 .band-wash { background: var(--wash); } .lm-v2 .lede { color: var(--ink-2); font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; letter-spacing: -0.01em; max-width: 60ch; } .lm-v2 .eyebrow { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0; } .lm-v2 .eyebrow::before { content: ""; width: 14px; height: 1px; background: var(--line-2); } .lm-v2 .section-head { display: grid; gap: 18px; max-width: 24ch; margin-bottom: 52px; } .lm-v2 .section-head .lede { max-width: 54ch; } .lm-v2 .section-head h2 { max-width: 17ch; } .lm-v2 .section-head.wide { max-width: none; } .lm-v2 .section-head.wide h2 { max-width: 22ch; } /* --- 3. Confidence tags -------------------------------------------------- */ .lm-v2 .tag { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 500 10.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; padding: 6px 9px; border-radius: 100px; white-space: nowrap; } .lm-v2 .tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .lm-v2 .tag-verified { color: var(--verified); background: var(--verified-bg); } .lm-v2 .tag-held { color: var(--held); background: var(--held-bg); } .lm-v2 .tag-idea { color: var(--idea); background: var(--idea-bg); } /* --- 4. Buttons ---------------------------------------------------------- */ .lm-v2 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 14px 24px; border: 1px solid transparent; border-radius: 100px; font: 500 15.5px/1 var(--display); letter-spacing: -0.012em; text-decoration: none; cursor: pointer; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease, border-color .18s ease; } .lm-v2 .btn-primary { background: var(--brand-deep); color: #fff; box-shadow: 0 1px 2px rgba(0,70,56,.28), 0 10px 22px -12px rgba(0,120,95,.7); } .lm-v2 .btn-primary:hover { background: #00604c; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,70,56,.3), 0 16px 30px -14px rgba(0,120,95,.8); } .lm-v2 .btn-ghost { border-color: var(--line-2); color: var(--ink); background: var(--paper); box-shadow: var(--shadow-sm); } .lm-v2 .btn-ghost:hover { transform: translateY(-1px); border-color: var(--ink-3); } .lm-v2 .btn-night { background: #fff; color: #06171b; } .lm-v2 .btn-night:hover { transform: translateY(-1px); background: #eafaf5; } .lm-v2 .btn-night-ghost { border-color: var(--night-line); color: var(--night-ink); } .lm-v2 .btn-night-ghost:hover { border-color: var(--night-ink); } .lm-v2 .btn-sm { min-height: 40px; padding: 10px 17px; font-size: 14px; } .lm-v2 .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .lm-v2 .arrow-link { display: inline-flex; align-items: center; gap: 7px; font: 500 15px/1 var(--display); letter-spacing: -0.012em; color: var(--verified); text-decoration: none; } .lm-v2 .arrow-link span { transition: transform .18s ease; } .lm-v2 .arrow-link:hover span { transform: translateX(3px); } /* --- 5. Masthead --------------------------------------------------------- */ .lm-v2 .masthead { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); } .lm-v2 .masthead-inner { display: flex; align-items: center; gap: 28px; min-height: 70px; } .lm-v2 .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); margin-inline-end: auto; } .lm-v2 .brand-mark { width: 34px; height: 34px; flex: none; border-radius: 9px; display: block; box-shadow: 0 3px 12px -5px rgba(0, 140, 112, .75); } .lm-v2 .brand-name { font: 600 19.5px/1 var(--display); letter-spacing: -.03em; } .lm-v2 .mainnav { display: flex; align-items: center; gap: 26px; } .lm-v2 .mainnav a { font: 450 15px/1 var(--display); letter-spacing: -.012em; color: var(--ink-2); text-decoration: none; transition: color .16s ease; } .lm-v2 .mainnav a:hover { color: var(--ink); } .lm-v2 .chip { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--verified); background: var(--verified-bg); border-radius: 100px; padding: 6px 10px; white-space: nowrap; } /* --- 6. Hero ------------------------------------------------------------- */ .lm-v2 .hero-band { position: relative; overflow: hidden; padding-block: clamp(44px, 5vw, 72px) clamp(20px, 2.5vw, 34px); } /* Ambient wash rather than a hard gradient hero — depth without shouting. */ .lm-v2 .hero-band::before { content: ""; position: absolute; inset: -30% -10% auto 30%; height: 780px; background: radial-gradient(46% 46% at 60% 40%, rgba(0, 168, 138, .16), transparent 70%); pointer-events: none; } .lm-v2 .hero-band::after { content: ""; position: absolute; inset: auto auto -40% -18%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(84, 90, 125, .12), transparent 68%); pointer-events: none; } .lm-v2 .hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(36px, 5vw, 72px); align-items: center; } .lm-v2 .hero-copy { display: grid; gap: 24px; align-content: start; } .lm-v2 .hero-copy h1 { max-width: 12ch; } .lm-v2 .hero-copy h1 em { font-style: normal; color: var(--verified); } .lm-v2 .hero-copy .lede { max-width: 46ch; } .lm-v2 .reassure { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 400 13.5px/1.5 var(--display); color: var(--ink-3); margin-top: 26px; } .lm-v2 .reassure span { display: inline-flex; align-items: center; gap: 7px; } .lm-v2 .reassure span::before { content: "\2713"; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--verified-bg); color: var(--verified); font: 700 10px/18px var(--display); text-align: center; } /* --- 7. Hero readout ----------------------------------------------------- */ .lm-v2 .readout { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .lm-v2 .readout-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--sunk), transparent); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .lm-v2 .readout-head b { color: var(--ink-2); font-weight: 500; } .lm-v2 .readout-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; padding: 24px 20px; border-bottom: 1px solid var(--line); } .lm-v2 .score-value { font: 400 62px/0.84 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.05em; color: var(--ink); } .lm-v2 .score-value small { display: block; margin-top: 10px; font-size: 11.5px; line-height: 1; letter-spacing: .1em; color: var(--ink-3); } .lm-v2 .meters { display: grid; gap: 12px; } .lm-v2 .meter { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 12px; font: 400 12.5px/1 var(--mono); color: var(--ink-2); } .lm-v2 .meter-label { display: grid; gap: 7px; } .lm-v2 .meter-track { height: 6px; border-radius: 100px; background: var(--sunk); overflow: hidden; } .lm-v2 .meter-fill { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--chart-line), color-mix(in srgb, var(--chart-line) 72%, #ffffff)); transform-origin: left center; animation: meter-in .8s cubic-bezier(.2,.7,.3,1) both; } .lm-v2 .meter-fill.is-low { background: linear-gradient(90deg, var(--chart-warn), color-mix(in srgb, var(--chart-warn) 74%, #ffffff)); } .lm-v2 .meter-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); } @keyframes meter-in { from { transform: scaleX(.06); } to { transform: scaleX(1); } } .lm-v2 .findings { display: grid; } .lm-v2 .finding { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); animation: rise .5s ease both; } .lm-v2 .finding:nth-child(1) { animation-delay: .08s; } .lm-v2 .finding:nth-child(2) { animation-delay: .16s; } .lm-v2 .finding:nth-child(3) { animation-delay: .24s; } .lm-v2 .finding:nth-child(4) { animation-delay: .32s; } .lm-v2 .finding em { font-style: normal; color: var(--ink); font-weight: 550; } @keyframes rise { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } } .lm-v2 .readout-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; padding: 14px 20px; background: var(--sunk); font: 400 12px/1.4 var(--mono); color: var(--ink-3); } @media (prefers-reduced-motion: reduce) { .lm-v2 .meter-fill, .lm-v2 .finding { animation: none; } .lm-v2 .btn, .lm-v2 .arrow-link span, .lm-v2 .bento-card { transition: none; } } /* --- 8. Marketplace rail ------------------------------------------------- */ .lm-v2 .logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding-block: 26px 0; border-top: 1px solid var(--line); } .lm-v2 .logos-label { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .lm-v2 .logos-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; } .lm-v2 .logos-marks span { font: 600 19px/1 var(--display); letter-spacing: -.03em; color: var(--ink-2); opacity: .8; } .lm-v2 .logos-more { margin-inline-start: auto; font: 400 14px/1 var(--display); color: var(--ink-3); text-decoration: none; } .lm-v2 .logos-more:hover { color: var(--verified); } /* --- 9. Bento: the four tools, led by the pain --------------------------- */ .lm-v2 .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } .lm-v2 .bento-card { display: flex; flex-direction: column; gap: 14px; grid-column: span 3; padding: 32px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); text-decoration: none; color: inherit; transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease; } .lm-v2 .bento-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-2); } .lm-v2 .bento-wide { grid-column: span 4; } .lm-v2 .bento-narrow { grid-column: span 2; } /* The pain is the headline; the product name is the footnote. */ .lm-v2 .pain { font-size: clamp(23px, 2.1vw, 29px); line-height: 1.1; letter-spacing: -.03em; } .lm-v2 .promise { color: var(--ink-2); font-size: 16.5px; line-height: 1.5; max-width: 40ch; } .lm-v2 .bento-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: auto; padding-top: 6px; } .lm-v2 .tool-name { font: 500 11.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); } /* Small in-card visuals: real report fragments, drawn in CSS. */ .lm-v2 .mini { border: 1px solid var(--line); border-radius: var(--r); background: var(--wash); overflow: hidden; margin-top: 4px; } .lm-v2 .mini-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); font: 400 13px/1.3 var(--mono); color: var(--ink-2); } .lm-v2 .mini-row:last-child { border-bottom: 0; } .lm-v2 .mini-row b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; } .lm-v2 .mini-row .best { color: var(--verified); } .lm-v2 .mini-place { display: inline-flex; align-items: center; gap: 9px; } .lm-v2 .mini-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--line-2); flex: none; } /* --- 10. Night band: the three labels ------------------------------------ */ .lm-v2 .night { background: radial-gradient(60% 70% at 78% 8%, rgba(0, 168, 138, .17), transparent 62%), var(--night); color: var(--night-ink); } .lm-v2 .night h2, .lm-v2 .night h3 { color: var(--night-ink); } .lm-v2 .night .lede { color: var(--night-ink-2); } .lm-v2 .night .eyebrow { color: var(--night-ink-2); } .lm-v2 .night .eyebrow::before { background: var(--night-line); } .lm-v2 .lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .lm-v2 .lane { display: grid; gap: 12px; align-content: start; padding: 28px; border: 1px solid var(--night-line); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); } .lm-v2 .lane-key { display: inline-flex; align-items: center; gap: 9px; font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; } .lm-v2 .lane-key::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: currentColor; } .lm-v2 .lane-verified .lane-key { color: var(--night-verified); } .lm-v2 .lane-held .lane-key { color: var(--night-held); } .lm-v2 .lane-idea .lane-key { color: var(--night-idea); } .lm-v2 .lane p { color: var(--night-ink-2); font-size: 16px; line-height: 1.55; } .lm-v2 .lane h3 { font-size: 19px; } .lm-v2 .night-note { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--night-line); color: var(--night-ink-2); font-size: 16px; max-width: 68ch; } .lm-v2 .night-note strong { color: var(--night-ink); font-weight: 550; } /* --- 11. Value ledger ---------------------------------------------------- */ .lm-v2 .value { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 68px); align-items: center; } .lm-v2 .value-copy { display: grid; gap: 20px; align-content: start; } .lm-v2 .ledger { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .lm-v2 .ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 15px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--sunk), transparent); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .lm-v2 .ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); } .lm-v2 .ledger-row span:last-child { font: 400 16px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; } .lm-v2 .ledger-row.is-total { background: var(--sunk); border-bottom: 0; color: var(--ink); font-weight: 550; } .lm-v2 .ledger-row.is-total span:last-child { color: var(--flag); font-size: 22px; } .lm-v2 .ledger-row.is-credit { background: var(--verified-bg); border-bottom: 0; color: var(--verified); font-weight: 550; } .lm-v2 .ledger-row.is-credit span:last-child { color: var(--verified); font-size: 22px; } .lm-v2 .ledger-foot { padding: 14px 22px 16px; border-top: 1px solid var(--line); font: 400 12.5px/1.55 var(--display); color: var(--ink-3); } /* --- 12. Workflow rail --------------------------------------------------- */ .lm-v2 .steps { list-style: none; margin: 0; padding: 0 0 20px; display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 78vw); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; } .lm-v2 .step { scroll-snap-align: start; display: grid; gap: 0; align-content: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; } .lm-v2 .step-shot { aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; width: 100%; background: var(--sunk); border-bottom: 1px solid var(--line); } .lm-v2 .step-body { display: grid; gap: 10px; padding: 22px 24px 26px; } .lm-v2 .step-n { font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--verified); } .lm-v2 .step p { color: var(--ink-2); font-size: 15.5px; } .lm-v2 .rail-hint { font: 400 13px/1 var(--display); color: var(--ink-3); margin-bottom: 20px; } /* --- 13. Proof ----------------------------------------------------------- */ .lm-v2 .proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .lm-v2 .proof-item { display: grid; gap: 10px; align-content: start; padding: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease; } .lm-v2 .proof-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .lm-v2 .proof-kind { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .lm-v2 .proof-item p { color: var(--ink-2); font-size: 15px; } .lm-v2 .proof-go { font: 500 14px/1 var(--display); color: var(--verified); margin-top: 2px; } /* --- 14. Trust ----------------------------------------------------------- */ .lm-v2 .trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 40px; } .lm-v2 .trust-item { display: grid; gap: 9px; align-content: start; } .lm-v2 .trust-item h3 { font-size: 17.5px; } .lm-v2 .trust-item p { color: var(--ink-2); font-size: 15.5px; } .lm-v2 .trust-item .tick { width: 26px; height: 26px; border-radius: 8px; background: var(--verified-bg); color: var(--verified); display: grid; place-items: center; margin-bottom: 3px; } /* --- 15. Pricing --------------------------------------------------------- */ .lm-v2 .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .lm-v2 .plan { display: grid; gap: 14px; align-content: start; padding: 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); } .lm-v2 .plan-featured { border-color: transparent; box-shadow: var(--shadow-lg), 0 0 0 2px var(--verified); } .lm-v2 .plan-name { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .lm-v2 .plan-price { font: 400 40px/1 var(--mono); letter-spacing: -.05em; color: var(--ink); } .lm-v2 .plan-price small { font-size: 14px; letter-spacing: 0; color: var(--ink-3); } .lm-v2 .plan-price.tbd { font-size: 24px; color: var(--ink-3); } .lm-v2 .plan p { color: var(--ink-2); font-size: 15.5px; } .lm-v2 .plan .btn { margin-top: 6px; } .lm-v2 .credits { width: 100%; border-collapse: collapse; margin-top: 32px; font-size: 15px; } .lm-v2 .credits caption { text-align: start; padding-bottom: 14px; font-size: 13.5px; color: var(--ink-3); } .lm-v2 .credits th, .lm-v2 .credits td { text-align: start; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); } .lm-v2 .credits th { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .lm-v2 .credits td { color: var(--ink-2); } .lm-v2 .credits td:first-child { color: var(--ink); font-weight: 500; } .lm-v2 .credits td:last-child, .lm-v2 .credits th:last-child { text-align: end; padding-inline-end: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; } .lm-v2 .table-scroll { overflow-x: auto; } /* --- 16. FAQ ------------------------------------------------------------- */ .lm-v2 .faq { border-top: 1px solid var(--line); max-width: 900px; } .lm-v2 .faq details { border-bottom: 1px solid var(--line); } .lm-v2 .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font: 500 18px/1.35 var(--display); letter-spacing: -.018em; color: var(--ink); } .lm-v2 .faq summary::-webkit-details-marker { display: none; } .lm-v2 .faq summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease; } .lm-v2 .faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); } .lm-v2 .faq details p { color: var(--ink-2); font-size: 16.5px; max-width: 70ch; padding-bottom: 24px; } /* --- 17. Closing + footer ------------------------------------------------ */ .lm-v2 .close { display: grid; gap: 24px; justify-items: center; text-align: center; } .lm-v2 .close h2 { max-width: 18ch; } .lm-v2 .close .lede { max-width: 50ch; } .lm-v2 .site-footer { background: var(--night-2); color: var(--night-ink-2); } .lm-v2 .footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px; padding-block: 60px 40px; } .lm-v2 .footer-grid h4 { margin: 0 0 16px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--night-ink); } .lm-v2 .footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .lm-v2 .footer-grid a { color: var(--night-ink-2); text-decoration: none; font-size: 15px; } .lm-v2 .footer-grid a:hover { color: var(--night-verified); } .lm-v2 .footer-about { max-width: 32ch; font-size: 15px; line-height: 1.6; } .lm-v2 .footer-about .brand { color: var(--night-ink); margin-bottom: 16px; } .lm-v2 .footer-bar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; border-top: 1px solid var(--night-line); padding-block: 22px 30px; font-size: 13.5px; color: var(--night-ink-2); } .lm-v2 .footer-social { display: flex; gap: 16px; } .lm-v2 .footer-social a { color: var(--night-ink-2); } .lm-v2 .footer-social a:hover { color: var(--night-verified); } /* --- 18. Prototype banner ------------------------------------------------ */ .lm-v2 .proto-note { background: var(--idea-bg); color: var(--idea); border-bottom: 1px solid var(--line); font: 400 13px/1.5 var(--display); } .lm-v2 .proto-note div { padding-block: 11px; } .lm-v2 .proto-note b { font-weight: 600; } /* --- 19. Responsive ------------------------------------------------------ */ .lm-v2 @media (max-width: 1040px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero-copy h1 { max-width: 16ch; } .bento-wide, .bento-narrow, .bento-card { grid-column: span 3; } .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } .value { grid-template-columns: minmax(0, 1fr); } .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .lm-v2 .mainnav { display: none; } .lm-v2 .bento { grid-template-columns: minmax(0, 1fr); } .lm-v2 .bento-wide, .lm-v2 .bento-narrow, .lm-v2 .bento-card { grid-column: auto; } .lm-v2 .bento-card { padding: 26px; } .lm-v2 .lanes { grid-template-columns: minmax(0, 1fr); } .lm-v2 .plans { grid-template-columns: minmax(0, 1fr); } .lm-v2 .proof { grid-template-columns: minmax(0, 1fr); } .lm-v2 .trust-grid { grid-template-columns: minmax(0, 1fr); } .lm-v2 .footer-grid { grid-template-columns: minmax(0, 1fr); } .lm-v2 .readout-score { grid-template-columns: minmax(0, 1fr); gap: 18px; } .lm-v2 .finding { grid-template-columns: minmax(0, 1fr); gap: 7px; } .lm-v2 .section-head { max-width: none; margin-bottom: 36px; } } /* --- 20. The deck: one seller problem per slide -------------------------- */ .lm-v2 .deck { display: grid; gap: 22px; } .lm-v2 .deck-nav { display: flex; flex-wrap: wrap; gap: 8px; } .lm-v2 .deck-pill { border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); border-radius: 100px; padding: 9px 16px; font: 500 14px/1 var(--display); letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: color .16s ease, border-color .16s ease, background .16s ease; } .lm-v2 .deck-pill:hover { color: var(--ink); border-color: var(--line-2); } .lm-v2 .deck-pill[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .lm-v2 .deck-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: var(--r-lg); } .lm-v2 .deck-track::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { .lm-v2 .deck-track { scroll-behavior: auto; } } .lm-v2 .slide { scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(28px, 3.6vw, 48px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); } .lm-v2 .slide-copy { display: grid; gap: 16px; align-content: center; } .lm-v2 .slide-count { font: 400 12px/1 var(--mono); letter-spacing: .12em; color: var(--ink-3); } .lm-v2 .slide-copy .pain { font-size: clamp(27px, 2.7vw, 38px); line-height: 1.06; letter-spacing: -.032em; } .lm-v2 .slide-copy .promise { font-size: 17.5px; max-width: 38ch; } .lm-v2 .slide-tool { display: inline-flex; align-items: center; gap: 9px; font: 500 11.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--verified); background: var(--verified-bg); border-radius: 100px; padding: 7px 12px; width: fit-content; } .lm-v2 .slide-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; } .lm-v2 .slide-visual { max-width: 100%; border: 1px solid var(--line); border-radius: var(--r); background: var(--wash); overflow: hidden; box-shadow: var(--shadow-sm); } .lm-v2 .slide-visual img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; } .lm-v2 .visual-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper); font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .lm-v2 .visual-body { padding: 6px 0; } .lm-v2 .deck-controls { display: flex; align-items: center; gap: 14px; } .lm-v2 .deck-arrow { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .16s ease, transform .16s ease; } .lm-v2 .deck-arrow:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); } .lm-v2 .deck-arrow:disabled { opacity: .38; cursor: default; } .lm-v2 .deck-progress { font: 400 13px/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; } /* --- 21. Trend chart ----------------------------------------------------- */ .lm-v2 .spark { display: block; width: 100%; height: auto; padding: 16px 14px 6px; } .lm-v2 .spark-grid { stroke: var(--chart-grid); stroke-width: 1; } .lm-v2 .spark-axis { fill: var(--ink-3); font: 400 9.5px var(--mono); } .lm-v2 .spark-area { fill: var(--chart-fill); } .lm-v2 .spark-line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .lm-v2 .spark-end { fill: var(--chart-line); stroke: var(--paper); stroke-width: 2; } .lm-v2 .spark-value { fill: var(--ink); font: 500 13px var(--mono); } @media (max-width: 860px) { .lm-v2 .slide { grid-template-columns: minmax(0, 1fr); padding: 26px; } .lm-v2 .deck-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .lm-v2 .deck-nav::-webkit-scrollbar { display: none; } } /* --- 22. Process strip --------------------------------------------------- */ .lm-v2 .process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); } .lm-v2 .proc-step { display: grid; gap: 10px; align-content: start; padding: 26px 24px 4px 0; border-inline-end: 1px solid var(--line); } .lm-v2 .proc-step:last-child { border-inline-end: 0; padding-inline-end: 0; } .lm-v2 .proc-step:not(:first-child) { padding-inline-start: 24px; } .lm-v2 .proc-n { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--verified-bg); color: var(--verified); font: 500 13px/1 var(--mono); } .lm-v2 .proc-step h3 { font-size: 17px; } .lm-v2 .proc-step p { color: var(--ink-2); font-size: 15px; } @media (max-width: 1040px) { .lm-v2 .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lm-v2 .proc-step { padding-inline: 0 24px; border-bottom: 1px solid var(--line); padding-bottom: 22px; } .lm-v2 .proc-step:nth-child(even) { border-inline-end: 0; padding-inline-start: 24px; } .lm-v2 .proc-step:last-child { border-bottom: 0; } } @media (max-width: 620px) { .lm-v2 .process { grid-template-columns: minmax(0, 1fr); } .lm-v2 .proc-step, .lm-v2 .proc-step:nth-child(even) { padding-inline: 0; border-inline-end: 0; } } /* --- 23. Hero deck ------------------------------------------------------- */ /* The deck IS the hero: the five problems are the message, so they open the page rather than sitting under a hero that repeats the first one. */ .lm-v2 .hero-deck { display: grid; gap: 26px; position: relative; } .lm-v2 .hero-slide { scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(30px, 4.5vw, 64px); align-items: center; /* No card here — the hero stays open; only the visual is a surface. */ background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; min-height: 440px; } .lm-v2 .hero-slide .slide-copy { gap: 20px; } .lm-v2 .hero-slide .pain { font-size: clamp(36px, 4.7vw, 60px); line-height: 1.02; letter-spacing: -.038em; max-width: 15ch; } .lm-v2 .hero-slide .pain em { font-style: normal; color: var(--verified); } .lm-v2 .hero-slide .promise { font-size: clamp(17px, 1.5vw, 19.5px); max-width: 44ch; color: var(--ink-2); } .lm-v2 .hero-slide .slide-visual { background: var(--paper); box-shadow: var(--shadow-lg); border-radius: var(--r-lg); } .lm-v2 .hero-slide .slide-visual .readout { border: 0; box-shadow: none; border-radius: 0; } .lm-v2 .hero-slide .slide-visual > img { aspect-ratio: 16 / 11; } .lm-v2 .deck-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 4px; border-top: 1px solid var(--line); } .lm-v2 .deck-foot .deck-nav { flex: 1 1 auto; padding-top: 18px; } .lm-v2 .deck-foot .deck-controls { padding-top: 18px; } .lm-v2 .deck-toggle { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--paper); color: var(--ink-2); cursor: pointer; transition: border-color .16s ease, color .16s ease; } .lm-v2 .deck-toggle:hover { border-color: var(--ink); color: var(--ink); } /* Stacks well before the two-column grid actually breaks: minmax(0, ...) columns never overflow on their own, but between roughly 1040-1180px the text and visual squeeze into an uncomfortably narrow strip each, so this switches to a single column early enough that neither ever has to fight the other for space on a narrower desktop/laptop screen. */ @media (max-width: 1180px) { .lm-v2 .hero-slide { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3.5vw, 32px); min-height: 0; } .lm-v2 .hero-slide .pain { max-width: 18ch; } } /* ========================================================================== Shared chrome, reskinned -------------------------------------------------------------------------- The header and footer markup comes from _partials/ and is synced by tools/build-netlify-alpha.mjs into EVERY page, so v2 cannot change that markup without changing it for all of them. It reskins it instead: same elements, v2 surface. account-status.js appends the signed-in badge to `.topbar`, so that hook is preserved exactly. ========================================================================== */ .lm-v2 .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 70px; padding: 10px max(var(--gutter), calc((100vw - var(--measure)) / 2)); background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); } .lm-v2 .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; } .lm-v2 .brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 3px 12px -5px rgba(0, 140, 112, .75); } .lm-v2 .brand strong { display: block; font: 600 19.5px/1 var(--display); letter-spacing: -.03em; } /* The tagline is in the footer, the and the Organization schema; in the masthead it only crowds the wordmark. */ .lm-v2 .brand small { display: none; } .lm-v2 .nav { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; } .lm-v2 .nav a { font: 450 15px/1 var(--display); letter-spacing: -.012em; color: var(--ink-2); text-decoration: none; transition: color .16s ease; } .lm-v2 .nav a:hover { color: var(--ink); } .lm-v2 .nav-dropdown-trigger { border: 0; background: none; cursor: pointer; font: 450 15px/1 var(--display); letter-spacing: -.012em; color: var(--ink-2); padding: 0; display: inline-flex; align-items: center; gap: 6px; } .lm-v2 .nav-dropdown-trigger:hover { color: var(--ink); } .lm-v2 .nav-dropdown-menu { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-lg); padding: 8px; } .lm-v2 .nav-dropdown-menu a { display: block; padding: 9px 12px; border-radius: var(--r-sm); font-size: 14.5px; color: var(--ink-2); } .lm-v2 .nav-dropdown-menu a:hover { background: var(--wash); color: var(--ink); } /* Hamburger toggle for the mobile nav (nav-dropdown.js) -- hidden above the breakpoint below, where .nav-links lays out exactly as .nav always did. */ .lm-v2 .nav-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; flex: none; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; } .lm-v2 .nav-toggle-bars, .lm-v2 .nav-toggle-bars::before, .lm-v2 .nav-toggle-bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .16s ease, opacity .16s ease, top .16s ease; } .lm-v2 .nav-toggle-bars { position: relative; } .lm-v2 .nav-toggle-bars::before, .lm-v2 .nav-toggle-bars::after { content: ""; position: absolute; inset-inline-start: 0; } .lm-v2 .nav-toggle-bars::before { top: -6px; } .lm-v2 .nav-toggle-bars::after { top: 6px; } .lm-v2 .nav.is-open .nav-toggle-bars { background: transparent; } .lm-v2 .nav.is-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); } .lm-v2 .nav.is-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); } .lm-v2 .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; } /* The partials use .button, not .btn — same treatment, mapped across. */ .lm-v2 .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 20px; border: 1px solid transparent; border-radius: 100px; font: 500 14.5px/1 var(--display); letter-spacing: -.012em; text-decoration: none; cursor: pointer; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease, border-color .18s ease; } .lm-v2 .button.primary { background: var(--brand-deep); color: #fff; box-shadow: 0 1px 2px rgba(0,70,56,.28), 0 10px 22px -12px rgba(0,120,95,.7); } .lm-v2 .button.primary:hover { background: #00604c; transform: translateY(-1px); } .lm-v2 .button.secondary { border-color: var(--line-2); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); } .lm-v2 .button.secondary:hover { transform: translateY(-1px); border-color: var(--ink-3); } .lm-v2 .topbar .button { min-height: 40px; padding: 10px 17px; font-size: 14px; } .lm-v2 .lang-switch-link { font: 450 14.5px/1 var(--display); color: var(--ink-2); text-decoration: none; } .lm-v2 .lang-switch-link:hover { color: var(--verified); } .lm-v2 .website-account-badge { display: inline-flex; align-items: center; gap: 10px; } .lm-v2 .account-summary strong { font-weight: 550; font-size: 14px; color: var(--ink); } .lm-v2 .account-summary small { color: var(--ink-3); font-size: 12px; } .lm-v2 .shell { max-width: none; margin: 0; padding: 0; } .lm-v2 .alpha-banner { width: min(var(--measure), 100% - (2 * var(--gutter))); margin: 22px auto 0; border: 1px solid var(--verified-bg); border-left: 0; border-radius: var(--r); background: var(--verified-bg); color: var(--verified); padding: 13px 18px; font-size: 14.5px; } .lm-v2 .alpha-banner strong { font-weight: 600; } /* Same footer markup as every other page, v2 surface. */ .lm-v2 .footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 34px max(var(--gutter), calc((100vw - var(--measure)) / 2)); background: var(--night-2); color: var(--night-ink-2); border-top: 0; font-size: 14.5px; } .lm-v2 .footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; } .lm-v2 .footer a { color: var(--night-ink-2); text-decoration: none; } .lm-v2 .footer a:hover { color: var(--night-verified); } .lm-v2 .footer-social { display: flex; gap: 16px; } @media (max-width: 860px) { /* Below this width the nav no longer sits inline -- it collapses into a hamburger-triggered dropdown instead, so the sticky header stays a single tidy row (brand, account badge, toggle) instead of wrapping the whole link list into several extra rows underneath it. */ /* styles.css (v1) forces the whole topbar into a column with every child at 100% width below 980px -- undo that here so brand/badge/toggle stay one tidy row (wrapping only the account badge onto its own line if a narrow phone genuinely has no room for it) instead of three stacked full-width rows. */ .lm-v2 .topbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; } .lm-v2 .nav, .lm-v2 .website-account-badge { width: auto; margin-inline-start: 0; } .lm-v2 .nav { position: relative; margin-inline-start: auto; } .lm-v2 .nav-toggle { display: flex; } .lm-v2 .nav-links { display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: 45; min-width: 240px; max-width: calc(100vw - (2 * var(--gutter))); flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-lg); } .lm-v2 .nav.is-open .nav-links { display: flex; } .lm-v2 .nav-links > a, .lm-v2 .nav-links .nav-dropdown-trigger { width: 100%; padding: 10px 12px; border-radius: var(--r-sm); } .lm-v2 .nav-links > a:hover, .lm-v2 .nav-links .nav-dropdown-trigger:hover { background: var(--wash); } .lm-v2 .nav-links .nav-dropdown { width: 100%; } .lm-v2 .nav-links .nav-dropdown-menu { position: static; box-shadow: none; border: 0; border-inline-start: 2px solid var(--line); border-radius: 0; margin-inline-start: 12px; padding: 4px 0 4px 10px; } .lm-v2 .nav-links .button { width: 100%; } .lm-v2 .nav-links .lang-switch-link { align-self: flex-start; } } /* video-lightbox.js binds to `.video-card`, so the walkthrough buttons keep that class as a behaviour hook. Strip the v1 card styling it also carries; the v2 surface comes from .proof-item. */ .lm-v2 .proof-item.video-card { display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 26px; text-align: start; font: inherit; color: inherit; cursor: pointer; } /* styles.css gives .actions a 24px top margin. v2 lays out with gap, so the inherited margin double-spaces every button row on a migrated page. */ .lm-v2 .actions { margin-top: 0; } /* ========================================================================== v1 markup, v2 surface -------------------------------------------------------------------------- The interior pages (tool pages, pricing, legal, about) all share one structure: <main class="shell legal-layout"> wrapping .legal-card, .section/.section-header and card grids. Rather than rewrite that markup on every page -- which risks the visible FAQ text drifting out of sync with the FAQPage JSON-LD that mirrors it -- v2 reskins it in place. A page migrates by adding `lm-v2` to <body> and the stylesheet link; nothing else changes. `.legal-layout` is the discriminator: the homepage is `.shell` alone and carries its own full-bleed bands, so none of this touches it. ========================================================================== */ .lm-v2 .legal-layout { display: block; padding-block: 0 0; } /* Every top-level block gets the measure. The homepage opts out with `full-bleed` because its sections carry their own .wrap and paint edge-to-edge bands; every other page has bare sections that would otherwise sit flush against the viewport. */ .lm-v2 .shell:not(.full-bleed) > * { width: min(var(--measure), 100% - (2 * var(--gutter))); margin-inline: auto; } /* Page hero. In v1 this is a white card; in v2 it is open page, like the homepage hero. */ .lm-v2 .legal-layout .panel.legal-card, .lm-v2 .legal-card { background: none; border: 0; box-shadow: none; border-radius: 0; padding: clamp(40px, 5vw, 68px) 0 clamp(24px, 2.6vw, 36px); display: grid; gap: 18px; justify-items: start; } .lm-v2 .legal-card h1 { /* Interior pages sit below the homepage in the hierarchy; the hero headline should read as a page title, not compete with the homepage's. */ font-size: clamp(34px, 3.9vw, 50px); max-width: 20ch; } .lm-v2 .legal-card > p { color: var(--ink-2); font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; letter-spacing: -0.01em; max-width: 60ch; } /* Legal prose (privacy, terms) keeps a readable measure and normal body size. */ .lm-v2 .legal-card h2 { font-size: 26px; margin-top: 18px; } .lm-v2 .legal-card h3 { margin-top: 10px; } .lm-v2 .legal-card ul, .lm-v2 .legal-card ol { color: var(--ink-2); max-width: 68ch; line-height: 1.65; } .lm-v2 .legal-layout .section { padding-block: clamp(40px, 4.6vw, 68px); } .lm-v2 .legal-layout .section:last-child { padding-bottom: clamp(56px, 6.6vw, 96px); } .lm-v2 .section-header { display: grid; gap: 16px; max-width: 62ch; margin-bottom: 34px; } .lm-v2 .section-header h2 { max-width: 20ch; } .lm-v2 .section-header p { color: var(--ink-2); font-size: 17px; line-height: 1.55; } /* Card grids. v1 hard-codes three columns; auto-fit lets a four-card grid fill its last row instead of leaving a gap. */ .lm-v2 .problem-grid, .lm-v2 .report-grid, .lm-v2 .pricing-grid, .lm-v2 .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .lm-v2 .problem-card, .lm-v2 .report-card, .lm-v2 .pricing-card, .lm-v2 .faq-card, .lm-v2 .step-card, .lm-v2 .product-card { display: grid; gap: 10px; align-content: start; padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .lm-v2 .problem-card h3, .lm-v2 .report-card h3, .lm-v2 .pricing-card h3, .lm-v2 .faq-card h3, .lm-v2 .step-card h3, .lm-v2 .product-card h3 { font-size: 18px; } .lm-v2 .problem-card p, .lm-v2 .report-card p, .lm-v2 .pricing-card p, .lm-v2 .faq-card p, .lm-v2 .step-card p, .lm-v2 .product-card > p { color: var(--ink-2); font-size: 15.5px; } /* A bare .panel is a plain surface; .panel.trust is the dark statement block. */ .lm-v2 .legal-layout .panel { display: grid; gap: 16px; justify-items: start; padding: clamp(30px, 3.4vw, 44px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .lm-v2 .legal-layout .panel > p { color: var(--ink-2); font-size: 17px; max-width: 62ch; } .lm-v2 .legal-layout .panel.trust-grid, .lm-v2 .legal-layout .panel.trust { background: radial-gradient(60% 70% at 78% 8%, rgba(0, 168, 138, .17), transparent 62%), var(--night); border-color: transparent; box-shadow: var(--shadow-md); color: var(--night-ink); } .lm-v2 .legal-layout .panel.trust h2, .lm-v2 .legal-layout .panel.trust h3 { color: var(--night-ink); } .lm-v2 .legal-layout .panel.trust > p, .lm-v2 .legal-layout .panel.trust li { color: var(--night-ink-2); } .lm-v2 .legal-layout .panel.trust .eyebrow { color: var(--night-ink-2); } .lm-v2 .legal-layout .panel.trust .eyebrow::before { background: var(--night-line); } .lm-v2 .legal-layout .panel.trust ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; width: 100%; } .lm-v2 .legal-layout .panel.trust li { border: 1px solid var(--night-line); border-radius: var(--r); padding: 14px 16px; font-size: 15px; } .lm-v2 .legal-layout .panel.trust .button.primary { background: #fff; color: #06171b; box-shadow: none; } .lm-v2 .note { border-left: 0; border-inline-start: 3px solid var(--verified); border-radius: var(--r-sm); background: var(--verified-bg); color: var(--ink-2); font-size: 14.5px; padding: 12px 16px; } .lm-v2 .note a { color: var(--verified); font-weight: 500; } .lm-v2 .compact-actions { margin-top: 4px; } .lm-v2 .legal-layout img { border-radius: var(--r); } @media (max-width: 620px) { .lm-v2 .problem-grid, .lm-v2 .report-grid, .lm-v2 .pricing-grid, .lm-v2 .faq-grid { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Legacy token remap -------------------------------------------------------------------------- styles.css components that v2 does not restyle individually still resolve their colours through the v1 token names, which are inherited from :root and would keep their v1 values on a migrated page -- old greens and greys sitting on the new ground. Remapping the names here means every v1 component adapts to v2 automatically, which is what makes the long tail of pages (help, download, the legal set) cheap to migrate. ========================================================================== */ body.lm-v2 { --green: #00795f; --green-dark: #00604c; --muted: var(--ink-3); --soft: var(--wash); --teal-soft: var(--verified-bg); --card: var(--paper); --navy: var(--night); } /* -------------------------------------------------------------------------- Forms and auth (login, signup, reset-password) -------------------------------------------------------------------------- */ .lm-v2 .legal-layout .panel.auth-card, .lm-v2 .auth-card, .lm-v2 .account-form, .lm-v2 .panel > form { display: grid; gap: 14px; justify-items: stretch; /* .panel sets `start`, which shrink-wraps the form */ } .lm-v2 .auth-card { max-width: 440px; margin-inline: auto; } .lm-v2 .auth-card form { display: grid; gap: 12px; justify-items: stretch; } .lm-v2 .auth-card label, .lm-v2 .account-form label { display: grid; gap: 7px; color: var(--ink-2); font-weight: 500; font-size: 14.5px; letter-spacing: -.01em; } .lm-v2 .auth-card input, .lm-v2 .account-form input { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; /* under 16px iOS zooms the page on focus */ min-height: 48px; padding: 12px 14px; transition: border-color .16s ease, box-shadow .16s ease; } .lm-v2 .auth-card input:focus, .lm-v2 .account-form input:focus { outline: none; border-color: var(--verified); box-shadow: 0 0 0 3px var(--verified-bg); } .lm-v2 .auth-card input::placeholder, .lm-v2 .account-form input::placeholder { color: var(--ink-3); } .lm-v2 .auth-divider { color: var(--ink-3); font-size: 13.5px; margin: 6px 0; } .lm-v2 .auth-divider::before, .lm-v2 .auth-divider::after { background: var(--line); } .lm-v2 .google-button { min-height: 48px; } .lm-v2 .auth-card .button.primary { width: 100%; min-height: 48px; } .lm-v2 .auth-switch, .lm-v2 .form-note { color: var(--ink-3); font-size: 14.5px; } .lm-v2 .auth-switch a { color: var(--verified); font-weight: 500; } /* -------------------------------------------------------------------------- Two-column bodies: legal prose (about, privacy, terms) and help -------------------------------------------------------------------------- */ .lm-v2 .legal-grid { display: grid; gap: 14px; max-width: 72ch; } .lm-v2 .legal-grid h2 { font-size: 24px; margin-top: 14px; } .lm-v2 .legal-grid h3 { font-size: 18px; margin-top: 8px; } .lm-v2 .legal-grid p, .lm-v2 .legal-grid li { color: var(--ink-2); font-size: 16.5px; line-height: 1.65; } .lm-v2 .legal-grid ul, .lm-v2 .legal-grid ol { padding-inline-start: 22px; display: grid; gap: 8px; } .lm-v2 .help-layout { gap: 40px; align-items: start; } .lm-v2 .help-nav { position: sticky; top: 90px; display: grid; gap: 4px; align-content: start; padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .lm-v2 .help-nav a { display: block; padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-size: 14.5px; } .lm-v2 .help-nav a:hover { background: var(--wash); color: var(--ink); } .lm-v2 .help-nav strong { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px 4px; display: block; } .lm-v2 .step-list, .lm-v2 .check-list, .lm-v2 .numbered-steps { color: var(--ink-2); line-height: 1.65; } .lm-v2 .marketplace-badge { border: 1px solid var(--line); border-radius: 100px; background: var(--paper); color: var(--ink-2); padding: 7px 13px; font-size: 14px; } .lm-v2 .status-pill { border-radius: 100px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; } /* -------------------------------------------------------------------------- Download and walkthrough pages -------------------------------------------------------------------------- */ .lm-v2 .install-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .lm-v2 .install-card, .lm-v2 .hero-card, .lm-v2 .walkthrough-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 28px; } .lm-v2 .warning { border: 1px solid var(--idea-bg); background: var(--idea-bg); color: var(--idea); border-radius: var(--r); padding: 14px 18px; } .lm-v2 .walkthrough-preview { border-radius: var(--r-lg); overflow: hidden; display: block; } .lm-v2 .play-badge { border-radius: 100px; } .lm-v2 .video-embed { border-radius: var(--r-lg); overflow: hidden; } @media (max-width: 900px) { .lm-v2 .help-nav { position: static; } } /* styles.css .hero is a two-column marketing grid with a fixed 390px second column. v2 has no .hero component (the homepage uses .hero-band/.hero-slide), and reset-password.html reuses .hero for a single-column card, so it would otherwise render against 390px of empty track. */ .lm-v2 .hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(24px, 3vw, 44px); align-items: center; padding-block: 0; } /* The submit sits inside <div class="actions"> (a flex row), so v1's `.auth-card .button.primary { width: 100% }` resolves against the row rather than the card. On a single-action auth form the button should fill. */ .lm-v2 .auth-card .actions { display: grid; gap: 10px; } .lm-v2 .auth-card .actions .button { width: 100%; } /* ========================================================================== RTL / Arabic -------------------------------------------------------------------------- The /ar/ pages are <html lang="ar" dir="rtl">. Flex and grid mirror on their own; what does not survive the switch is typography. ========================================================================== */ /* styles.css sets the Arabic face via `html[dir="rtl"] body { font-family }` (0,1,1). v2's `body.lm-v2 { font: ... }` shorthand is also (0,1,1) and loads later, so it would win and drop Arabic text to a system fallback. Setting the token instead keeps one source of truth for the stack. Latin runs (the wordmark, digits, marketplace names) keep the brand faces; Arabic falls through to Cairo, which is what the report renderer already uses. */ html[dir="rtl"] body.lm-v2 { --display: "Instrument Sans", "Cairo", "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; --mono: "JetBrains Mono", "Cairo", "IBM Plex Sans Arabic", Tahoma, monospace; } /* Arabic is cursive: letters join, and letter-spacing pulls those joins apart. v2 tracks headings tight (-0.038em) and labels loose (+0.1em), both of which are typographic errors in Arabic, so tracking is reset across the board. */ html[dir="rtl"] body.lm-v2, html[dir="rtl"] body.lm-v2 * { letter-spacing: normal; } /* The four physical properties v2 uses, mirrored. */ html[dir="rtl"] body.lm-v2 .meter-num { text-align: left; } html[dir="rtl"] body.lm-v2 .faq summary::after { border-right: 0; border-left: 1.8px solid var(--ink-3); transform: rotate(-45deg) translate(-3px, -3px); } html[dir="rtl"] body.lm-v2 .faq details[open] summary::after { transform: rotate(-225deg) translate(-2px, -2px); } /* styles.css already flips .note's rule to the right for RTL; v2 uses a logical border, so clear the physical one it leaves behind. */ html[dir="rtl"] body.lm-v2 .note { border-right: 0; border-inline-start: 3px solid var(--verified); } /* The eyebrow's leading rule is drawn with ::before, which sits on the correct side automatically, but the mono label above it reads better without the uppercase transform in Arabic. */ html[dir="rtl"] body.lm-v2 .eyebrow { text-transform: none; } /* .trust-strip is the v1 marketplace rail, still used on ar/index.html. Its wordmarks are set in each marketplace's brand colour, which reads as a row of real logos; v2 renders them as plain text, matching the English .logos rail. */ .lm-v2 .trust-strip { background: none; border: 0; box-shadow: none; border-radius: 0; border-top: 1px solid var(--line); padding: 26px 0 0; gap: 16px 34px; } .lm-v2 .trust-strip-label { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; color: var(--ink-3); } .lm-v2 .trust-logo, .lm-v2 .trust-logo-amazon, .lm-v2 .trust-logo-ebay, .lm-v2 .trust-logo-etsy, .lm-v2 .trust-logo-alibaba, .lm-v2 .trust-logo-aliexpress { font: 600 19px/1 var(--display); color: var(--ink-2); opacity: .8; text-transform: none; } .lm-v2 .trust-strip-more { color: var(--ink-3); font-weight: 400; }