/* ============================================================ ScopeFlow marketing site — the FEATURES family. Shared by features.html (the hub) and every features/*.html page. GENERATED PAGES: edit scripts/website/features.json + build-features.mjs, not the HTML. LOAD ORDER on a feature page: site.css → guide.css → this file. * site.css owns the palette, type roles, bands, buttons and the card/list grids these pages reuse. * guide.css owns the BOOK LAYOUT — .book, the contents rail, the .chapter rhythm, .pn and . The features navigation is the same component as the user guide's on purpose (director, 13 Sep 2026: the features rail is to match the how-to pages), so it is shared rather than reimplemented here. * this file adds only what neither of those has: the hero kit strip, the ruled spec list, the drafting-sheet panel, the provenance pills, the callout and the hub's plates. ============================================================ */ /* ---------- breadcrumb ---------- */ .crumb{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); } .crumb a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--rule); } .crumb a:hover{ color:var(--navy); border-color:var(--navy); } .crumb span{ color:var(--rule); padding-inline:6px; } /* ---------- the hero ---------- guide.css's .gtop, widened: a feature headline is a sentence, and 18ch stacks it into a column of two-word lines. */ .gtop--feature h1{ max-width:22ch; } .gtop--feature .lede{ margin-top:18px; max-width:60ch; } /* The kit list under the hero: what is actually in the box. */ .kit{ display:flex; flex-wrap:wrap; gap:0; margin-top:clamp(26px,3.4vw,38px); border-top:1px solid var(--ink); border-left:1px solid var(--ink); } .kit__i{ flex:1 1 190px; min-width:0; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:14px 16px; background:rgba(246,247,243,.6); } .kit__i b{ display:block; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; } .kit__i span{ display:block; margin-top:5px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); } /* ---------- rhythm inside a generated section ---------- site.css resets p to margin:0, and the blocks are emitted as siblings, so the gaps are declared here in one place rather than inline on every block the generator writes. */ .chapter > .lede{ margin-top:clamp(16px,2vw,22px); max-width:66ch; } .chapter > h2 + .lede{ margin-top:14px; } .chapter > .rates__list{ margin-top:clamp(20px,2.6vw,28px); } .chapter > .faq{ margin-top:clamp(18px,2.2vw,26px); } /* HEADINGS INSIDE .chapter. guide.css styles a bare `.chapter h3` as the small mono uppercase kicker above its written steps ("STEPS", "THE SHAPE OF IT"). Every h3 on a feature page is a real heading instead — a section sub-head or a card title — so the display face is put back explicitly. Without this the card titles render as grey letter-spaced mono, which is how they first shipped and how they must not ship again. */ .chapter h3.fh3{ margin-top:clamp(30px,3.6vw,44px); font-family:var(--display); font-weight:800; text-transform:none; font-size:clamp(19px,2vw,23px); letter-spacing:-.02em; color:var(--ink); } .chapter .ctrl__card h3, .chapter .fcard h3{ font-family:var(--display); font-weight:800; text-transform:none; letter-spacing:-.015em; color:var(--ink); line-height:1.2; } .chapter .ctrl__card h3{ margin-top:0; font-size:18px; } .chapter .fcard h3{ margin-top:12px; font-size:clamp(19px,2.1vw,24px); } /* Three-up cards are too tight in the book's narrower content column. */ .fcards{ grid-template-columns:repeat(2,minmax(0,1fr)); } @media (max-width:640px){ .fcards{ grid-template-columns:1fr; } } /* ---------- SPEC: the workhorse ruled definition list ---------- A mono term on the left, the plain-English explanation on the right. This is where the detail that actually sells the software lives, so it has to stay readable at forty rows. */ .spec{ border-top:1px solid var(--rule); margin-top:clamp(22px,3vw,32px); } .spec__r{ display:grid; grid-template-columns:178px minmax(0,1fr); gap:clamp(12px,2.2vw,26px); padding-block:15px; border-bottom:1px solid var(--rule); align-items:start; } @media (max-width:720px){ .spec__r{ grid-template-columns:1fr; gap:5px; padding-block:13px; } } .spec__k{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--navy); padding-top:.16em; } .spec__k em{ font-style:normal; display:block; color:var(--ink-soft); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; } .spec__v{ color:var(--ink-soft); font-size:15px; line-height:1.6; } .spec__v b{ color:var(--ink); font-weight:600; } .spec__v a{ color:var(--navy); } /* ---------- PANEL: a drafting-sheet exhibit ---------- The landing page's .sheet, generalised — a bordered plate with a titled bar, used to SHOW a grid rather than describe it. */ .panel{ margin-top:clamp(22px,3vw,32px); background:#F6F7F3; border:1.5px solid var(--ink); border-radius:3px; box-shadow:6px 6px 0 rgba(21,32,41,.09); overflow:hidden; } .panel__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:9px 14px; border-bottom:1.5px solid var(--ink); background:var(--paper-deep); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; } .panel__bar b{ font-weight:500; color:var(--ink); } .panel__bar span{ color:var(--ink-soft); font-size:10.5px; letter-spacing:.06em; } .panel__scroll{ overflow-x:auto; } .panel table{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12px; white-space:nowrap; } .panel th,.panel td{ padding:8px 14px; text-align:left; } .panel thead th{ font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:500; color:var(--ink-soft); border-bottom:1px solid var(--rule); } .panel tbody tr{ border-bottom:1px solid var(--rule-faint); } .panel tbody tr:last-child{ border-bottom:0; } .panel tbody th{ font-weight:500; color:var(--ink); } .panel .r{ text-align:right; font-variant-numeric:tabular-nums; } .panel__foot{ padding:10px 14px; border-top:1.5px solid var(--ink); background:var(--paper-deep); font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); letter-spacing:.03em; white-space:normal; } /* Provenance / status pills, in panels and in prose. */ .pill{ display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.09em; padding:2px 7px; border:1px solid currentColor; border-radius:2px; vertical-align:1px; } .pill--vec{ color:var(--navy); border-color:var(--cta); background:rgba(33,145,251,.13); } .pill--ok{ color:var(--green); border-color:var(--green); background:rgba(47,125,79,.13); } .pill--gap{ color:var(--gap); border-color:var(--gap); background:rgba(178,58,38,.11); } /* ---------- the honest note ---------- */ .note{ margin-top:clamp(22px,3vw,30px); padding:15px 18px; max-width:72ch; border-left:2px solid var(--cta); background:rgba(33,145,251,.06); font-size:15px; line-height:1.62; color:var(--ink-soft); } .note > b:first-child{ display:block; margin-bottom:5px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); } .note b{ color:var(--ink); font-weight:600; } /* ---------- the FAQ inside a section ---------- site.css owns .faq; it only needs to sit tighter here, because in a content column it follows a heading rather than opening a band. */ .chapter .faq summary{ font-size:clamp(16px,1.8vw,18.5px); padding-block:17px; } .chapter .faq p{ font-size:15px; padding-bottom:20px; } /* ---------- the hub's four plates ---------- ONE COLUMN, deliberately. The hub sits in the book layout beside the rail, so its content column is never wider than about 840px; two columns of ~380px wrapped every plate title onto three lines and left no room for the description that does the selling. Stacked, each plate gets the full measure and the page reads as a contents list with substance rather than four cramped tiles. */ .fhub{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--ink); border-left:1px solid var(--ink); margin-top:clamp(26px,3.4vw,40px); } .fcard{ border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:clamp(20px,2.6vw,30px); background:rgba(246,247,243,.6); display:flex; flex-direction:column; text-decoration:none; color:var(--ink); transition:background .16s ease; } .fcard:hover{ background:rgba(33,145,251,.06); } .fcard__n{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); } .fcard h3{ margin-top:12px; font-size:clamp(19px,2.1vw,24px); } .fcard__d{ margin-top:12px; color:var(--ink-soft); font-size:14.5px; line-height:1.55; } .fcard__pts{ margin:16px 0 0; padding:0; list-style:none; } .fcard__pts li{ font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--ink-soft); padding:5px 0 5px 15px; position:relative; border-top:1px solid var(--rule-faint); } .fcard__pts li::before{ content:"\203A"; position:absolute; left:0; color:var(--cta); } .fcard__go{ margin-top:auto; padding-top:18px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); } .fcard:hover .fcard__go{ color:var(--cta); } .fcard__go i{ font-style:normal; display:inline-block; transition:transform .16s ease; } .fcard:hover .fcard__go i{ transform:translateX(4px); } /* ---------- the closing band ---------- .btn--ghost is ink-on-paper; on the dark CTA it has to invert. */ .cta__ghost{ margin-left:10px; color:var(--paper); border-color:var(--paper); } .cta__ghost:hover{ box-shadow:3px 3px 0 var(--cta); } .cta__fine a{ color:#A9B7BE; }