/* ============================================================ SANWA METAL POWDERS — SITE LAYOUT, v1 Requires tokens.css and components.css, in that order. This file is PAGE-LEVEL LAYOUT ONLY. It positions and spaces the components; it does not restyle them, and it names no colour, type family or duration of its own. Every value is a token from tokens.css. The only literals are: · the media-query breakpoints, which CSS cannot read from a custom property — they use the documented values in tokens.css §4 (400 / 620 / 900 / 1200); · two native pixel widths of old-site photographs (750, 555), which are facts about the asset, not design values. The rule "never above native width" is enforced with them. Order: 0 page shell and the scroll lock 1 display and running-text helpers 2 hero 3 full-bleed bands and their captions 4 application panels 5 the five-family grid 6 photographs 7 the ordered steps 8 the closing enquiry band 9 the page heading (run 2) 10 the family header (run 2) 11 tabs, progressively (run 2) 12 the grade table page (run 2) 13 the family index at the foot (run 2) 14 what the laboratory measures (run 3) 15 the process flow (the guide) (run 3) 16 the ruled list (run 3) 17 the contact page (run 3) 18 common questions (copy v2) ============================================================ */ /* ============================================================ 0 · PAGE SHELL AND THE SCROLL LOCK ============================================================ */ /* The drawer is a fixed overlay, so the page behind it must not scroll. site.js adds .is-locked to and restores the scroll position on close. Both elements are locked because body carries overflow-x: hidden and so is itself a scroll container. */ html.is-locked, html.is-locked body { overflow: hidden; } /* [hidden] HAS TO WIN. The UA stylesheet's `[hidden] { display: none }` is a type-less rule, so ANY class that sets `display` beats it — and this system sets display on almost everything: .tabs__list is flex, .tabs__panel, .note, .gtools, .gtsec and a .gt row in record form are all grid, .btn is inline-flex. Every one of those is something run 2 hides with the attribute: the panels the tabs are not showing, the tablist and the search while JavaScript has not run, the empty state, the "clear the filters" button, and the rows and tables a filter has ruled out. Without this they stay on screen while reporting hidden, so the one !important in this file is load-bearing. Belongs in components.css; recorded in SITE-NOTES.md. */ [hidden] { display: none !important; } /* The header's top tier. design-system.html applies exactly this inline on .hdr__in; it is layout, so it lives here instead and every page copies the same markup. */ .hdr__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); } /* the last section before a full-bleed band or the footer */ .sec--end { padding-bottom: var(--sp-sec-lg); } /* ============================================================ 1 · DISPLAY AND RUNNING-TEXT HELPERS Chivo 900 uppercase at two steps of the token scale. The orange is only ever used here at --fs-d-hero, whose smallest value is 38 px — well above the 24 px floor the primary needs. ============================================================ */ .h-hero { margin: 0; font-family: var(--display); font-weight: var(--w-black); text-transform: uppercase; font-size: var(--fs-d-hero); line-height: var(--lh-display); letter-spacing: var(--tr-display); } .h-hero b { display: block; color: var(--pr-ink); font-weight: inherit; } /* Below --bp-xs the hero takes --fs-d-2xl instead. --fs-d-hero floors at 38 px, and at that size "One laboratory." (the run-1 H1) measured 339.5 px against the 328 px a 360 px viewport leaves inside the gutter — it wraps and strands "One" on a line of its own. --fs-d-2xl is the next display floor in the scale, 33 px, and the line measures 294.9 px there. Recorded in SITE-NOTES.md as a gap in the type scale, not patched with a new size. */ @media (max-width: 399px) { .h-hero { font-size: var(--fs-d-2xl); } } .h-stmt { margin: 0; font-family: var(--display); font-weight: var(--w-black); text-transform: uppercase; font-size: var(--fs-d-l); line-height: var(--lh-display); letter-spacing: var(--tr-display); } /* a quiet mono eyebrow with the primary drawn as a rule beside it — never as the text itself */ .eyebrow { display: flex; align-items: center; gap: var(--sp-3); margin: 0; } .eyebrow::before { content: ""; flex: none; width: var(--sp-7); height: var(--bw-marker); background: var(--pr-rule); } /* LINE BREAKING. The system sets no wrapping rule, and several of its components strand a one- or two-word last line at phone widths: .famrow span, .famcard__meta, .sec__t and the family card's benefit line all do it at 360–390 px. Balance the short blocks, where every line should carry weight, and prettify the long ones, where only the last line matters. This is a wrapping rule, not a restyle — no size, colour or family is touched. Recorded in SITE-NOTES.md as a gap in the system. */ .h-hero, .h-stmt, .h-page, .sec__t, .factline, .apanel h3, .steps h3, .flow h3, .famcard h3, .famcard__meta, .famrow span, .proof dd, .endband__c dd, .note__k, .meas dt { text-wrap: balance; } .lede, .sec__note, .txt p, .famcard p, .apanel > p, .steps p, .flow p, .meas dd, .field__hint, .props dd, .fig__cap > span, .tag--note, .note p, .photo figcaption { text-wrap: pretty; } /* running text, held to the measure */ .txt { max-width: var(--measure); } .txt > p { margin: 0 0 var(--sp-4); } .txt > :last-child { margin-bottom: 0; } /* A closing fact inside a panel, set apart by a rule above it — the .note idiom without the change of ground, because a .note's chalk ground would be invisible on a panel that is already chalk. Used for the proof line at the foot of each application panel. */ .factline { margin: 0; padding-top: var(--sp-3); border-top: var(--bw-rule) solid var(--pr-rule); font: var(--w-regular) var(--fs-mono-s) / var(--lh-mono) var(--mono); color: var(--fg); } /* A unit or a chemical symbol must never be uppercased. text-transform: uppercase turns the micro sign µ into Greek capital Mu, so "10 µm" renders "10 ΜM", and "Cu" would read "CU", which is not copper's symbol. .chip em uppercases, so any chip carrying one opts out with this. A gap in the system, recorded in SITE-NOTES.md. */ .nocase { text-transform: none; } /* holds a compound that must not break across lines — "SDT 6", "gas-atomized" */ .nobr { white-space: nowrap; } /* a row of actions under a block of text */ .actions { margin-top: var(--sp-6); } /* ============================================================ 2 · HERO The display line takes the full container, because "One laboratory." at --fs-d-hero is wider than any column of a two-column grid. The lede, the actions and the five family rows sit under it in two columns. ============================================================ */ /* The hero closes on --sp-sec-lg, not --sp-sec: the proof strip under it is a full-bleed band, which is the case .sec--end is written for. Until 5 Oct 2026 a pattern band and its caption carried that distance; the band is gone (§3) and the padding states the same interval directly. */ .hero { padding-top: var(--sp-sec); padding-bottom: var(--sp-sec-lg); } .hero__in { display: grid; gap: var(--sp-head); } .hero__cols { display: grid; gap: var(--sp-gap); align-items: start; } @media (min-width: 900px) { .hero__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-gap) var(--sp-gap); } } @media (min-width: 1200px) { .hero__cols { grid-template-columns: 1.05fr 1fr; } } /* below --bp-s the two hero actions stack, so each takes the full column rather than sitting at its own ragged width */ @media (max-width: 619px) { .hero .btnrow > .btn { width: 100%; } } .hero__side { display: grid; gap: var(--sp-2); align-content: start; } /* Between --bp-l and --bp-xl the side column is narrow enough that .famrow's auto "need" track squeezes the name track and breaks "Cobalt-chromium" at its hyphen. Hold the name on one line and let the need line wrap instead. */ .hero__side .famrow b { white-space: nowrap; } .hero__side .famrow span { min-width: 0; } /* ============================================================ 3 · THE DRUM LABEL ON THE WEBSITE This slot held the full-bleed pattern band and its caption (.band-pat, .band-cap, .pat-half / .pat-full). The client dropped the pattern from the website on 5 Oct 2026, so those rules are gone; the number is kept because SITE-NOTES.md cites the sections below it by their numbers. ============================================================ */ /* .lb__pat carried margin-top: auto and pushed the label foot onto the floor of the column. With the strip out of the markup the foot takes that job, so the address still sits on the floor of the label and the batch fields keep their own --sp-5 above. */ .lb__foot { margin-top: auto; } /* ============================================================ 4 · APPLICATION PANELS Three .panel blocks, one per audience. The heading is built exactly as .famcard h3 is — Chivo 700, uppercase, 15 px — minus the family colour, because a panel here is not one family. ============================================================ */ /* four rows — heading, line, chips, proof — with the slack in the chip row, so the proof line sits on the floor of every panel however tall the row makes them */ .apanel { display: grid; gap: var(--sp-4); grid-template-rows: auto auto 1fr auto; } .apanel h3 { margin: 0; font-size: var(--fs-body-s); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--tr-head-2); line-height: var(--lh-head); } .apanel > p { margin: 0; font-size: var(--fs-s); } .apanel > :last-child { align-self: end; } /* a panel with no proof line (About's team and values) keeps its chips under the text rather than dropping them to the floor */ .apanel > .chiprow:last-child { align-self: start; } /* ============================================================ 5 · THE FIVE-FAMILY GRID One column, then two, three and finally all five across — the range reads as one row on a desktop, the way it does in the header's family tier. ============================================================ */ .famgrid { display: grid; gap: var(--grid-gap); } @media (min-width: 620px) { .famgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .famgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .famgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* the card is a container here, not a link: the chips and the family link inside it are the targets, so the card gets room for them rather than the tighter link spacing */ /* the benefit line absorbs the slack, so the route, the chips and the family link sit on the same baselines across all five cards however long each benefit line runs */ .famgrid .famcard { height: 100%; align-content: stretch; grid-template-rows: auto 1fr; } .famgrid .famcard__in { gap: var(--sp-4); grid-template-rows: auto auto 1fr auto auto auto; } /* At five across the card is 185 px wide inside its padding, so the link has to be short and has to fit on one line — a second line pushes that card's route rule and chips off the baselines the other four share. It reads "All n grades" and carries the family in a .vh suffix, so its accessible name is "All 7 grades of cobalt-chromium" while the visible text stays inside it. --fs-body-s because the card's h3 is 15 px and nothing under a heading should be larger than it. */ .famgrid .famcard .link { font-size: var(--fs-body-s); } .famgrid .chiprow { gap: var(--sp-2); } .famgrid .chip { max-width: 100%; } .famgrid__foot { display: grid; gap: var(--sp-3); } /* A two-column row whose columns are only as tall as they need to be. .cols stretches by default, which gives a short composition panel the full height of the chart beside it. */ .cols--top { align-items: start; } /* a strip of chips across all five families */ .chipstrip { display: grid; gap: var(--sp-5); } /* ============================================================ 6 · PHOTOGRAPHS The old-site photographs are the only ones that exist, and they are never shown above their native pixel width. The two caps below are those native widths. ============================================================ */ .photo { margin: 0; display: grid; gap: var(--sp-3); } .photo img { width: 100%; height: auto; border: var(--bw-hairline) solid var(--border-quiet); border-radius: var(--r); } .photo figcaption { font: var(--w-regular) var(--fs-mono-s) / var(--lh-mono) var(--mono); color: var(--muted); max-width: var(--measure-note); } .txt > .photo { margin-top: var(--sp-8); } .photo--750 { max-width: 750px; } .photo--555 { max-width: 555px; } /* A 555 × 634 portrait beside a 750 × 375 landscape would run 260 px taller than its neighbour and dominate the section. One axis is constrained and the other left automatic — never both, and never a crop. */ .photo--tall img { width: auto; max-width: 100%; max-height: 460px; } .photorow { display: grid; gap: var(--sp-gap-s); align-items: start; } @media (min-width: 620px) { .photorow { grid-template-columns: 1fr 1fr; } } /* ============================================================ 7 · THE ORDERED STEPS A numbered procedure. The number is set the way .sec__n and .fig__n are — mono, tracked, graphite, with the primary drawn as a 2 px rule beneath it. ============================================================ */ .steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-6); counter-reset: step; } .steps > li { display: grid; gap: var(--sp-3); align-content: start; padding-top: var(--sp-4); border-top: var(--bw-hairline) solid var(--border-quiet); } .steps > li::before { counter-increment: step; content: counter(step, decimal-leading-zero); justify-self: start; font: var(--w-regular) var(--fs-mono-s) / var(--lh-flat) var(--mono); letter-spacing: var(--tr-label); color: var(--pr-text); border-bottom: var(--bw-rule) solid var(--pr-rule); padding-bottom: 3px; } /* the step title, built as .famcard h3 is: Chivo 700, uppercase, 15 px — graphite, because a step is not a family */ .steps h3 { margin: 0; font-size: var(--fs-body-s); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--tr-head-2); line-height: var(--lh-head); } .steps p { margin: 0; font-size: var(--fs-s); color: var(--muted); max-width: var(--measure); } /* three across only from --bp-xl: inside the 1.3fr column of .ordergrid, a third of the width at --bp-l is 150 px and "Quote or sample" needs 160 px */ @media (min-width: 1200px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: var(--sp-gap); } /* subgrid so the number, the title and the body share baselines across the three columns even when one title runs to two lines */ .steps > li { grid-row: span 3; grid-template-rows: subgrid; } } .ordergrid { display: grid; gap: var(--sp-gap); align-items: start; } @media (min-width: 900px) { .ordergrid { grid-template-columns: 1.3fr 1fr; } } /* ============================================================ 8 · THE CLOSING ENQUIRY BAND Full bleed on graphite, so .on-graphite carries the ground, the ghost button and the reversed focus ring. Only the radius is squared here: a full-bleed band is --r-sharp everywhere else in the system too. ============================================================ */ .endband { border-radius: var(--r-sharp); border-top: var(--bw-hairline) solid var(--band-line); } .endband__in { max-width: var(--container); margin-inline: auto; padding: var(--sp-12) var(--gutter); display: grid; gap: var(--sp-8); align-items: end; } @media (min-width: 900px) { .endband__in { grid-template-columns: 1.2fr 1fr; } } /* the band's eyebrow takes the dust the .proof strip uses on graphite — 6.86:1 — because .tag's --muted is a stone value and would drop to 2.4:1 here */ .endband .eyebrow { font: var(--w-regular) var(--fs-mono-xs) / var(--lh-flat) var(--mono); letter-spacing: var(--tr-mono-2); text-transform: uppercase; color: var(--band-muted); } .endband__c { margin: 0; font: var(--w-regular) var(--fs-mono) / 1.75 var(--mono); color: var(--band-fg); } .endband__c dt { font-size: var(--fs-mono-xs); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--band-muted); } .endband__c dd { margin: 0 0 var(--sp-3); } .endband__c dd:last-child { margin-bottom: 0; } /* ============================================================ 9 · THE PAGE HEADING One step below the hero on the display scale: the hero line is --fs-d-hero and belongs to the home page alone, so a family page and the grade table open at --fs-d-xl. 30 px at its floor, which holds "COBALT-CHROMIUM" (279 px) inside the 328 px a 360 px viewport leaves, so this one needs no phone fallback. ============================================================ */ .h-page { margin: 0; font-family: var(--display); font-weight: var(--w-black); text-transform: uppercase; font-size: var(--fs-d-xl); line-height: var(--lh-display); letter-spacing: var(--tr-display); } /* ============================================================ 10 · THE FAMILY HEADER The family marker as a band across the head of the page, then the name, the element tiles and the route in one column and the swatch photograph and the key facts in the other. ============================================================ */ /* the family marker at page scale — the .famcard__band idiom, in the family fill, bounded by the container it sits in */ .fambar { height: var(--sp-2); background: var(--cfill); border-radius: var(--r) var(--r) 0 0; } .fhead { padding-top: var(--sp-6); display: grid; gap: var(--sp-head); } .fhead__cols { display: grid; gap: var(--sp-gap); align-items: start; } @media (min-width: 900px) { .fhead__cols { grid-template-columns: 1.25fr 1fr; } } @media (min-width: 1200px) { .fhead__cols { grid-template-columns: 1.4fr 1fr; } } .fhead__main { display: grid; gap: var(--sp-5); align-content: start; } /* below --bp-s the header's two actions stack, so each takes the full column rather than sitting at its own ragged width — the rule the hero already follows */ @media (max-width: 619px) { .fhead .btnrow > .btn { width: 100%; } } /* the side column stretches, because the key-fact panel wants the whole column; .swatch holds its own 150 px native width */ .fhead__side { display: grid; gap: var(--sp-5); align-content: start; } /* the 150 px swatch photograph, at its native size and never above it, circular as the swatch is everywhere else */ .swatch { width: 150px; height: 150px; max-width: 100%; border-radius: 50%; border: var(--bw-hairline) solid var(--border-quiet); } /* A property block: the label in mono small caps, the figure under it. Two or three columns when there is room. This is the third thing .datagrid is allowed behind, after a table and a chart, so it carries the grid when it stands on its own. */ .props { margin: 0; display: grid; gap: var(--sp-5); } @media (min-width: 620px) { .props { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .props > div { display: grid; gap: var(--sp-1); align-content: start; } .props dt { font: var(--w-regular) var(--fs-mono-xs) / var(--lh-flat) var(--mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--muted); } .props dd { margin: 0; font: var(--w-regular) var(--fs-mono) / var(--lh-mono) var(--mono); font-variant-numeric: tabular-nums; color: var(--fg); } /* the proof line at the foot of a key-fact panel — .factline sets only its own 12 px above the rule, which is too tight under a property block */ .props + .factline { margin-top: var(--sp-5); } /* ============================================================ 11 · TABS, PROGRESSIVELY Every panel is in the DOM and every panel is open until the script turns the block into tabs. Without JavaScript the three panels read as three headed blocks; with it, the heading becomes the tab label and .tabs__list appears. site.js removes [hidden] from the list, hides the headings with .vh and sets [hidden] on the panels it is not showing. ============================================================ */ .tabs__panel { display: grid; gap: var(--sp-6); } .tabs__h { margin: 0; font-size: var(--fs-h-l); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--tr-head); line-height: var(--lh-head); } /* until the script runs, the panels are separate blocks and need a rule between them; once it does, only one is ever on screen */ .tabs:not(.is-tabs) .tabs__panel + .tabs__panel { padding-top: var(--sp-7); border-top: var(--bw-hairline) solid var(--border-quiet); } /* the applications of a family, stated as facts about the powder */ .applist { margin: 0; padding: 0; list-style: none; } /* ============================================================ 12 · THE GRADE TABLE PAGE A sticky family index beside five tables, with the search and the filter chips above them. ============================================================ */ .gtlayout { display: grid; gap: var(--sp-gap); align-items: start; } @media (min-width: 900px) { .gtlayout { grid-template-columns: 236px minmax(0, 1fr); } } .gindex { display: grid; gap: var(--sp-4); align-content: start; } @media (min-width: 900px) { .gindex { position: sticky; top: var(--sp-6); } } .gindex ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); } .gindex a { display: grid; grid-template-columns: var(--sp-2) minmax(0, 1fr) auto; gap: 0 var(--sp-3); align-items: center; min-height: var(--target-touch); background: var(--surface); border: var(--bw-hairline) solid var(--border-quiet); border-radius: var(--r); overflow: hidden; color: var(--fg); text-decoration: none; transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .gindex a > i { align-self: stretch; background: var(--c); font-style: normal; } .gindex a > b { font: var(--w-bold) var(--fs-label-s) / var(--lh-head) var(--display); letter-spacing: var(--tr-head-2); text-transform: uppercase; color: var(--c); padding-block: var(--sp-3); } .gindex a > span { font: var(--w-regular) var(--fs-mono-xs) / var(--lh-flat) var(--mono); letter-spacing: var(--tr-mono-2); text-transform: uppercase; color: var(--muted); padding-right: var(--sp-3); } .gindex a:hover { background: var(--pr-wash); border-color: var(--border); } .gindex a:active { background: var(--pr-wash); border-color: var(--fg); } /* the search and the filters: inert without JavaScript, so site.js is what reveals them */ .gtools { display: grid; gap: var(--sp-5); } .gtools__row { display: grid; gap: var(--sp-3); } .gtools__row > .field { max-width: 340px; } .gtools__k { font: var(--w-regular) var(--fs-mono-xs) / var(--lh-flat) var(--mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--muted); margin: 0; } /* an application filter is not one family, so its edge is graphite rather than a family colour */ .chip--app { --c: var(--fg); } .gtools__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); } .gcount { margin: 0; font: var(--w-regular) var(--fs-mono-s) / var(--lh-flat) var(--mono); font-variant-numeric: tabular-nums; color: var(--fg); } /* the column the tables live in. --sp-12 between family blocks: each one opens with its own colour bar and heading, so it needs separation without a full --sp-sec gap. */ .gtbody { display: grid; gap: var(--sp-12); align-content: start; min-width: 0; } /* the five family blocks */ .gtsec { display: grid; gap: var(--sp-5); scroll-margin-top: var(--sp-6); } .gtsec__head { display: grid; grid-template-columns: var(--sp-2) minmax(0, 1fr); gap: 0 var(--sp-4); align-items: center; } .gtsec__head > i { align-self: stretch; min-height: var(--sp-8); background: var(--c); font-style: normal; border-radius: var(--r); } .gtsec__head h2 { margin: 0; font-size: var(--fs-h-l); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--tr-head); line-height: var(--lh-head); color: var(--c); } .gtsec__head p { margin: var(--sp-1) 0 0; font: var(--w-regular) var(--fs-mono-s) / var(--lh-mono) var(--mono); color: var(--muted); } .gtsec__head > div { grid-column: 2; } /* ============================================================ 13 · THE FAMILY INDEX AT THE FOOT OF A PAGE The other four families as rows, two across from --bp-s. Two is the widest this goes: at four across each row is 290 px, and "Cobalt-chromium" plus its grade count needs 182 px of the 170 px that leaves. ============================================================ */ .famindex { display: grid; gap: var(--sp-3); } @media (min-width: 620px) { .famindex { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ 14 · WHAT THE LABORATORY MEASURES A three-column record: the test, what it is, and what the figure is for. Rows are separated by a hairline, as a .gt is, and the block sits on .datagrid because it is a property block — the third thing the grid is allowed behind. Not a .gt: that component sets white-space: nowrap on every cell, which is right for a figure and wrong for a sentence. ============================================================ */ .meas { margin: 0; display: grid; } .meas > div { display: grid; gap: var(--sp-2) var(--sp-gap); align-items: start; padding: var(--sp-4) 0; border-top: var(--bw-hairline) solid var(--border-quiet); } .meas > div:first-child { border-top: 0; padding-top: var(--sp-2); } .meas > div:last-child { padding-bottom: var(--sp-2); } .meas dt { font: var(--w-bold) var(--fs-label-s) / var(--lh-head) var(--display); letter-spacing: var(--tr-head-2); text-transform: uppercase; color: var(--fg); } .meas dd { margin: 0; font-size: var(--fs-s); } .meas .meas__w { color: var(--fg); } .meas .meas__t { color: var(--muted); } /* the column labels, which only earn their place once the three columns are actually side by side; the
carries the association, so they are hidden from the accessibility tree */ .meas__hd { display: none; } @media (min-width: 900px) { .meas > div, .meas__hd { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.15fr); } .meas__hd { display: grid; gap: var(--sp-gap); padding-bottom: var(--sp-3); border-bottom: var(--bw-rule) solid var(--pr-rule); font: var(--w-regular) var(--fs-mono-xs) / var(--lh-flat) var(--mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--muted); } .meas > div:first-child { border-top: 0; padding-top: var(--sp-4); } } /* ============================================================ 15 · THE PROCESS FLOW (the guide) A numbered system diagram at reading width: four steps down a single column, each one a number, a title and a line, with the connector drawn as a rule between them. It stays vertical at every width — inside .wrap--text four cells across would be 175 px each, and "Forming the compact" needs 150 px of that before its body line starts. ============================================================ */ .flow { margin: 0; padding: 0; list-style: none; display: grid; counter-reset: flow; } .flow > li { position: relative; display: grid; grid-template-columns: var(--sp-10) minmax(0, 1fr); gap: var(--sp-2) var(--sp-5); padding-bottom: var(--sp-8); } .flow > li:last-child { padding-bottom: var(--sp-2); } /* the number, set exactly as .steps > li::before and .sec__n are */ .flow > li::before { counter-increment: flow; content: counter(flow, decimal-leading-zero); grid-row: 1 / span 2; justify-self: start; align-self: start; font: var(--w-regular) var(--fs-mono-s) / var(--lh-flat) var(--mono); letter-spacing: var(--tr-label); color: var(--pr-text); border-bottom: var(--bw-rule) solid var(--pr-rule); padding-bottom: 3px; } /* the connector: a quiet rule, not the primary — the primary is already under every number, and one accent twice in a cell is one too many */ .flow > li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: var(--sp-7); bottom: var(--sp-3); width: var(--bw-rule); background: var(--border); } .flow h3 { margin: 0; font-size: var(--fs-body-s); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--tr-head-2); line-height: var(--lh-head); } .flow p { margin: 0; font-size: var(--fs-s); color: var(--muted); } /* ============================================================ 16 · THE RULED LIST A list of plain statements, separated by hairlines rather than bullets — the grade table's row rhythm applied to prose. Two columns from --bp-s where the items are short. ============================================================ */ .rlist { margin: 0; padding: 0; list-style: none; display: grid; column-gap: var(--sp-gap); } .rlist > li { padding: var(--sp-3) 0; border-top: var(--bw-hairline) solid var(--border-quiet); font-size: var(--fs-s); text-wrap: pretty; } .rlist > li > b { font-weight: var(--w-bold); font-family: var(--display); letter-spacing: var(--tr-head-2); text-transform: uppercase; font-size: var(--fs-label-s); } @media (min-width: 620px) { .rlist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ 17 · THE CONTACT PAGE The enquiry form beside the contact details. Two columns only from --bp-xl: .enq__pair goes two-up at --bp-s, so at --bp-l a 1.35fr column would put two 48 px selects in 240 px each. ============================================================ */ .enqgrid { display: grid; gap: var(--sp-gap); align-items: start; } @media (min-width: 1200px) { .enqgrid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } } /* a property block that stays one column — the address runs to four lines and the two-up default breaks it badly in a side column */ .props--1 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 620px) { .props--1 { grid-template-columns: minmax(0, 1fr); } } /* The Sent / Not sent notes sit directly above the form in the same panel, with no gap of their own, so the form's first line ("Fields marked with an orange tick…") touched the note's edge. Space the form off whichever note is showing. */ .note:not([hidden]) ~ .enq { margin-top: var(--sp-6); } /* the error summary's list of jumps to the fields that failed */ .enq__problems { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); } .enq__problems a { font: var(--w-regular) var(--fs-mono-s) / var(--lh-mono) var(--mono); color: var(--alarm); text-decoration: underline; text-underline-offset: 3px; } .enq__problems a:hover { text-decoration-thickness: 3px; } /* The radio inside a .radiocard is hidden from sight and not from the keyboard. design-system.html does exactly this inline on every .radiocard input; it is layout, so it lives here and the page markup stays clean. Recorded in SITE-NOTES.md as a gap. */ .vh-input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } /* …and because the control it replaces is 1 px square, the ring has to move to the card. Without this the request type is the one control on the site with no visible focus state. */ .radiocard:has(.vh-input:focus-visible) { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); } /* ============================================================ 18 · COMMON QUESTIONS Short question-and-answer pairs, always open: no accordion and no script, because an answer is only useful if it can be read (and quoted) without a click. The question is an h3 under the section's h2, in sentence case — a question in uppercase reads as a shout. Items are separated by a hairline, the .rlist and .meas rhythm. Two columns from --bp-l; one below. ============================================================ */ .faq { display: grid; column-gap: var(--sp-gap); align-items: start; } .faq__item { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5) 0; border-top: var(--bw-hairline) solid var(--border-quiet); } .faq__item h3 { margin: 0; font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-head); letter-spacing: 0; text-wrap: balance; } .faq__item p { margin: 0; max-width: var(--measure); font-size: var(--fs-body-s); line-height: var(--lh-body); text-wrap: pretty; } @media (min-width: 900px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }