/* ============================================================ SchemaCart design_v3 — PROPOSED CHANGES ONLY Loads seventh, after the six shipped stylesheets. Every rule here is a delta from today's site, so the diff is the design. Nothing in this file changes copy or page structure. Contents A. Token proposal (one new token, shown both ways) B. Type scale C. Section rhythm D. Kicker: mono variant + plain variant E. Dark proof band and its data slots F. Four classes that ship with no CSS today G. Motion (JS reveal, fallback path only) H. Small-screen corrections I. Interaction state repair ============================================================ */ /* ---------- A. TOKEN PROPOSAL ---------------------------------- ONE new token. The shipped space scale runs 4 8 12 16 20 24 32 40 48 64 80 and simply stops at --sc-20. The brief asks for section rhythm near 80-96px, so 96 is the next step on a scale that already exists rather than a new idea. DECISION NEEDED FROM BEN: add --sc-24 to brand/tokens.css. Rationale: the rhythm change is site-wide, so the value wants a name. Without it, 96px is hard-coded in three places below. Shown both ways, as asked. Token version is live. The raw version is the same three rules with the literal value, so the change can ship with no token addition at all: @media (min-width:900px){ .sc-section{padding:96px 0} .sc-hero{padding:96px var(--sc-5) var(--sc-16)} .sc-pagehead{padding-top:64px;padding-bottom:96px} } ---------------------------------------------------------------- */ :root{ --sc-24:96px; } /* ---------- B. TYPE SCALE -------------------------------------- The measured gap. Competitors run 57.6px to 96px display type; we run 48px maximum. Kaliber proves Plus Jakarta Sans carries the larger scale, because it is our own font. Tracking note for Ben: the shipped h1 is already -.04em, which is TIGHTER than the -1% to -2% the brief asks for. At 68px, -.04em closes the counters. The hero below is set to -.02em, which is a deliberate LOOSENING of today's value, matching kaliber's -1px at 57.6px. h2 and h3 are left as shipped. ---------------------------------------------------------------- */ .sc-hero h1{ font-size:clamp(40px,7vw,68px); font-weight:800; letter-spacing:-.02em; line-height:1.04; text-wrap:balance; } /* Rent-vs-own comparison rows are not a feature list. The shipped .sc-tier__feats puts a green tick on every line, which on the "join a platform network" card reads as four endorsements of the thing we are arguing against. This modifier drops the tick and lets the bold dimension label lead instead. No status meaning is lost: each row names its own dimension in words. NEW CLASS, needs a Guide entry. */ .sc-tier__feats--cmp li{display:block;line-height:1.55} .sc-tier__feats--cmp li::before{content:none} .sc-tier__feats--cmp li b{color:var(--sc-ink)} .sc-tier__feats--cmp li+li{margin-top:var(--sc-3)} .sc-card--dark .sc-tier__feats--cmp li b{color:#fff} /* Six scored checks, three to a row. The shipped auto-fit grid ran four up at wide widths and left a ragged second row. Each check gets a line icon for its meaning and its real point weight, both above the statement. The icons are drawn in the logo mark's own language: 24 viewBox, stroke currentColor, 1.6 weight, round caps, no fill. That is the only stroked-icon vocabulary the system has, so they read as part of it rather than as a borrowed icon set. NEW CLASS, needs a Guide entry. */ .sc-checkgrid{list-style:none;margin:0;padding:0;display:grid;gap:var(--sc-6);grid-template-columns:1fr} .sc-checkgrid li{display:flex;flex-direction:column;gap:var(--sc-3);align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--sc-ink-2)} .sc-checkgrid__mark{display:flex;align-items:center;gap:var(--sc-2)} .sc-checkgrid__icon{width:22px;height:22px;flex:none;color:var(--sc-ink-2)} .sc-checkgrid__pts{ flex:none;border-radius:var(--sc-r-pill); background:var(--sc-accent-soft);border:1px solid #DBEAFE; padding:2px 9px; font:700 11.5px var(--sc-font-display);letter-spacing:-.01em;color:var(--sc-accent); } @media (min-width:640px){.sc-checkgrid{grid-template-columns:repeat(2,1fr)}} @media (min-width:900px){.sc-checkgrid{grid-template-columns:repeat(3,1fr);gap:var(--sc-8) var(--sc-6)}} /* Section headings. Shipped: 26 / 30 / 34px across two breakpoints. One fluid rule replaces all three and lands higher at the top. */ h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em} /* Inner-page H1. Shipped: clamp(28px,6vw,42px). */ .sc-pagehead h1{font-size:clamp(34px,5.5vw,56px);letter-spacing:-.025em;line-height:1.06} /* Lede. Shipped 17px flat. Graphite runs 18px body; this lifts the lede only, so the 16px body rule is untouched as agreed. */ .sc-lede{font-size:clamp(17px,1.35vw,19px);line-height:1.55} /* The price is the loudest thing on a pricing card. Shipped 38px. The shipped min-height of 48px was sized for 38px text, so it needs to grow with the type or the price overflows its own row. */ .sc-tier__price{font-size:44px;line-height:1.1;min-height:56px} /* SHIPPED DEFECT, visible on /pricing today. schemacart.css styles every span inside .sc-tier__price as a 15px muted qualifier, because when it was written the only spans there were the currency script's amount wrappers, which v2 then exempted with `.sc-tier__price [data-usd]{font:inherit}`. The currency script was dropped at port (Guide 6.2) and the data-usd attributes went with it, so the exemption stopped matching and every price on /pricing now renders at 15px muted instead of 38px display. $0, $29, $99, $490 and $1,500 are all currently the same size as the caption beneath them. The amount inherits the price treatment again; only the two real qualifiers stay small. `.sc-tier__per` is a NEW CLASS on the "/mo" suffix, needed because there is no other way to tell a period suffix from an amount now that data-usd is gone. One-line markup change at port, needs a Guide entry. */ .sc-tier__price > span{font:inherit;color:inherit;letter-spacing:inherit} .sc-tier__price > .sc-tier__from, .sc-tier__price > .sc-tier__per{ font:500 15px var(--sc-font-text); color:var(--sc-muted); letter-spacing:normal; align-self:center; } .sc-tier__price > .sc-tier__from{margin-right:7px} /* Comparison table: the two options being compared must be the same width, or the wider column reads as the bigger offer before a word is read. The shipped table sizes columns by content, so self-serve came out narrower than managed. Fixed layout, 34% for the row label and an equal 33% each for the two options. `.sc-tablewrap`'s 560px min-width still drives the horizontal scroll on small screens, per §4.1. */ .sc-table--cmp{table-layout:fixed} .sc-table--cmp thead th:first-child{width:34%} .sc-table--cmp thead th:nth-child(2), .sc-table--cmp thead th:nth-child(3){width:33%} /* Report identity. Shipped clamp(20px,4.6vw,27px). */ .sc-rpt-url{font-size:clamp(24px,4.6vw,34px)} /* COMPLIANCE, not preference. §2.3 and §7 both say --sc-muted-2 must not carry normal text on white, and the Guide records the shipped .sc-micro and .sc-kicker uses as an implementation exception rather than a precedent. --sc-muted-2 is 2.85:1 on white and fails AA. --sc-muted is 4.76:1 and passes. This matters more in v3 than it did in v2, because the hero's WooCommerce qualifier line is .sc-micro and it is now load- bearing copy. Dark surfaces keep --sc-muted-2, where it passes. */ .sc-micro{color:var(--sc-muted)} .sc-kicker{color:var(--sc-muted)} /* ---------- C. SECTION RHYTHM ---------------------------------- Shipped: 48px mobile, 64px from 900px. Competitors run 72-110px. Ben's call: desktop only, 375px keeps its current rhythm so the scan form stays above the fold. ---------------------------------------------------------------- */ @media (min-width:640px){ .sc-section{padding:var(--sc-20) 0} } @media (min-width:900px){ .sc-section{padding:var(--sc-24) 0} .sc-hero{padding:var(--sc-24) var(--sc-5) var(--sc-16)} .sc-pagehead{padding-top:var(--sc-16);padding-bottom:var(--sc-24)} } /* ---------- D. KICKER ------------------------------------------ Ben approved trying a mono-set kicker. Both variants are in the mocks so the choice is visible. .sc-kicker is untouched. Accessibility note: shipped .sc-kicker uses --sc-muted-2, which the Guide (2.3) records as an implementation exception because it fails AA on white. The mono variant uses --sc-muted (4.76:1) instead, so the new device does not inherit the old defect. ---------------------------------------------------------------- */ .sc-kicker--mono{ font-family:var(--sc-font-mono); font-size:12.5px; letter-spacing:.01em; text-transform:none; color:var(--sc-muted); } .sc-kicker--mono::before{content:"// ";color:var(--sc-accent)} /* ---------- E. DARK PROOF BAND --------------------------------- One full-bleed dark band per page, approved for the proof moment. .sc-convert is a dark rounded CARD and stays that way; this is a dark SECTION, so it is a modifier on .sc-section rather than a second dark component. NEW CLASSES, both need a Guide entry before use: .sc-section--ink full-bleed dark section .sc-slot--ink the shipped .sc-slot, on a dark surface ---------------------------------------------------------------- */ .sc-section--ink{ background:var(--sc-ink); border-top:1px solid var(--sc-ink); border-bottom:1px solid var(--sc-ink); color:#fff; } .sc-section--ink h2, .sc-section--ink h3{color:#fff} .sc-section--ink p{color:var(--sc-line-2)} .sc-section--ink .sc-lede{color:var(--sc-line-2)} .sc-section--ink .sc-micro{color:var(--sc-muted-2)} .sc-section--ink .sc-kicker{color:var(--sc-muted-2)} .sc-section--ink .sc-kicker--mono{color:var(--sc-muted-2)} .sc-section--ink .sc-kicker--mono::before{color:var(--sc-pass-bright)} .sc-section--ink a{color:#fff} .sc-section--ink .sc-table{color:var(--sc-line-2)} /* the shipped dashed slot, re-surfaced for the dark band. #334155 is the existing dark-surface border value used by .sc-btn--ghost and .sc-imgslot, not a new colour. */ .sc-slot--ink{ background:transparent; border-color:#334155; color:var(--sc-muted-2); min-height:132px; flex-direction:column; gap:var(--sc-2); line-height:1.6; } /* two facts and two pending slots, side by side from 640px */ .sc-proofgrid{display:grid;gap:var(--sc-4);grid-template-columns:1fr} @media (min-width:640px){.sc-proofgrid{grid-template-columns:repeat(2,1fr)}} /* ---------- F. CLASSES THAT SHIP WITH NO CSS ------------------- scanner/views/report.mjs renders .sc-remediation, .sc-remediation__rows, .sc-remediation__row and .sc-tier-line. None of them are defined in any of the six stylesheets, so the What this means / Why it matters / Do this now block currently renders as a bare dt/dd list on every live report. Styled here to match .sc-fix exactly, so remediation reads as one system idea rather than two. Not a new visual language: the surface, border, radius and text colour are .sc-fix's own. These four names still need Guide entries. ---------------------------------------------------------------- */ .sc-remediation{ background:var(--sc-accent-soft); border:1px solid #DBEAFE; border-radius:var(--sc-r-md); padding:15px 17px; } .sc-remediation__rows{margin:0;display:flex;flex-direction:column;gap:var(--sc-4)} .sc-remediation__row dt{ font:600 11.5px var(--sc-font-text); letter-spacing:.05em; text-transform:uppercase; color:var(--sc-accent); margin-bottom:4px; } .sc-remediation__row dd{margin:0;font-size:14.5px;line-height:1.6;color:#1E3A8A} .sc-tier-line{font-size:12.5px;line-height:1.55;color:var(--sc-muted);margin-top:var(--sc-2)} /* Same family of defect. .sc-tech-toggle was written for a