/* ============================================================================ ONE FORM SYSTEM, FOR EVERY FORM ON THE SITE ============================================================================ The Press Inquiry form is the approved model. Its rules lived INLINE in press/index.html, while thirteen other public pages already used the same class names — .fi .fl .fg .frow .fsel .fta .fhead .fsub .fnote — with no rule reaching them. Measured in Chromium at 1440 before this file existed: /press/ 47px field, cream ground, ink text at 15.5px (the model) /partners/ 52px field, TRANSPARENT ground, 19px paper text /dinner/ 52px field, transparent, faint labels /contact/ no .fi at all — a third markup shape entirely Three appearances for one system, because the stylesheet was on one page. The rules are unchanged; they have simply moved somewhere every page can reach them. Whatever this file says is what every form looks like. ========================================================================= */ .pc-form{background:var(--paper);border:1px solid var(--on-rule,rgba(36,26,32,.16)); padding:clamp(22px,2.6vw,36px)} /* EVERY WORD ON THIS PANEL IS READ AGAINST CREAM, and the selector has to say so loudly enough to be heard. `.lf-article p` sets colour:var(--dim) at specificity 0-1-1; a bare `.fsub` is 0-1-0 and loses to it whatever the order. That did not matter while this panel had no background — #C3B39F on the dark page is fine — and it mattered the moment the panel became cream: the same colour measured 1.62:1, which tpress caught at all four widths. Scoped to .pc-form these are 0-2-0 and win, and the ground tokens the panel already declares do the rest. */ .pc-form p,.pc-form li,.pc-form span{color:var(--on-text,#3E3038)} .pc-form .fsub,.pc-form .fnote{color:var(--on-muted,#6B5A60)} .pc-form .fhead{color:var(--on-heading,#6E2733)} .pc-form .fl{color:var(--on-strong,#241A20)} .fhead{font-family:var(--display);font-weight:400;font-size:clamp(20px,1.8vw,26px); line-height:1.1;color:var(--on-heading,var(--oxblood))} .fsub{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--on-muted,#6B5A60)} /* One field, one stack: label above control, never overlapping it. */ .fg{display:flex;flex-direction:column;gap:6px;margin-top:18px;min-width:0} .frow{display:grid;gap:0 16px;grid-template-columns:minmax(0,1fr)} @media(min-width:560px){.frow{grid-template-columns:repeat(2,minmax(0,1fr))}} .fl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--on-strong,#241A20)} /* EVERY CONTROL THE SAME SHAPE. width:100% with border-box is what makes the textarea and the button line up with the inputs instead of each taking its own intrinsic width. */ .fi,.fsel,.fta{box-sizing:border-box;width:100%;display:block; font-family:var(--serif);font-size:15.5px;line-height:1.5;color:#241A20; background:#FFFDF8;border:1px solid rgba(36,26,32,.28);border-radius:0; padding:11px 13px;min-height:46px;-webkit-appearance:none;appearance:none; transition:border-color .2s,box-shadow .2s,background-color .2s} .fta{min-height:120px;resize:vertical} .fsel{background-image:linear-gradient(45deg,transparent 50%,#6E2733 50%), linear-gradient(135deg,#6E2733 50%,transparent 50%); background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px} .fi::placeholder,.fta::placeholder{color:#8A7A78} .fi:hover,.fsel:hover,.fta:hover{border-color:rgba(36,26,32,.45)} /* A focus state that is visible on this ground, and never the browser's blue. */ .fi:focus,.fsel:focus,.fta:focus{outline:none;border-color:var(--oxblood); background:#FFFFFF;box-shadow:0 0 0 3px rgba(110,39,51,.18)} .fi:focus-visible,.fsel:focus-visible,.fta:focus-visible{outline:2px solid var(--oxblood); outline-offset:1px} /* ERROR AND SUCCESS, declared here so they cannot be invented ad hoc later. */ .fi[aria-invalid="true"],.fsel[aria-invalid="true"],.fta[aria-invalid="true"]{ border-color:#8E2A34;background:#FFF6F5;box-shadow:0 0 0 3px rgba(142,42,52,.14)} .ferr{margin:0;font-size:18px;line-height:1.45;color:#8E2A34} .fok{margin:14px 0 0;padding:12px 14px;border:1px solid rgba(36,26,32,.2); background:rgba(110,39,51,.06);font-size:18px;line-height:1.55;color:#241A20} .fbtn{width:100%;margin-top:22px;min-height:50px} .fnote{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--on-muted,#6B5A60)} @media(min-width:560px){.frow{grid-template-columns:repeat(2,minmax(0,1fr))}} /* A FORM IS PROSE WITH BOXES, AND IT NEEDS A MEASURE. Removing the Consign page's left rail gave the form the full container: it rendered 1245px wide at 1440, which is a 100-character line for a label and a comically wide box for "Town or city". The Press panel was never this wide because its column was narrow by accident. This makes the limit deliberate and applies it to every form on the site. */ .pc-form{max-width:760px} .pc-form .frow{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:620px){.pc-form .frow{grid-template-columns:minmax(0,1fr)}} /* THE PHOTOGRAPH SLOTS LIVE ON THE FORM PANEL, SO THEY READ ON CREAM. sfv-consign-photos.js paints .cn-slot__lab #C3B39F, which is correct on the dark page and 1.62:1 once the panel behind it became cream — measured at all five widths. This is the same shape as the earlier .fsub failure: a colour that was fine until a ground moved under it. Scoped to the panel so the dark-page rendering of these controls is untouched. */ .pc-form .cn-slot__lab{color:var(--on-strong,#241A20)} .pc-form .cn-slot__hint,.pc-form .cn-note{color:var(--on-muted,#6B5A60)} /* ── A TYPOGRAPHY FLOOR, BECAUSE 10px LABELS ARE NOT READABLE ────────────── The Press system set .fl at 10px mono with .18em tracking. It looks like letterpress and it is unreadable on a laptop and an iPhone, which the owner reported directly. Tracked uppercase mono is the worst case for small type: the letterforms are already thin and the spacing breaks word shape. FLOOR: 14px for a field label, 18px for body copy and form guidance a person has to actually read to fill the form in. Applied here so every form on the site inherits it rather than each page choosing. */ .pc-form .fl,.fl{font-size:16px;letter-spacing:.1em} .pc-form .fsub,.fsub{font-size:18px;line-height:1.6} .pc-form .fnote,.fnote{font-size:18px;line-height:1.55} .pc-form .fi,.pc-form .fsel,.pc-form .fta,.fi,.fsel,.fta{font-size:18px} .pc-form .cn-slot__lab{font-size:16px} .pc-form .cn-slot__hint,.pc-form .cn-note,.pc-form p{font-size:18px;line-height:1.6} /* the panel heading keeps its display face but stops shrinking below 22px */ .pc-form .fhead{font-size:clamp(22px,1.8vw,26px)} /* THE GROUP HEADINGS INSIDE A FORM ARE ALSO TYPE A PERSON READS. "Contact", "About the piece", "Logistics" render through .sc-interp at 10px from the generated stylesheet. They divide the form into its three passes, so they are the first thing the eye lands on and the last thing that should be 10px. The floor applies to them too. */ .pc-form .sc-interp,.pc-form [data-r] > .sc-interp{font-size:16px;letter-spacing:.12em} /* the Photographs group heading, and the submit button — 11px on the one control the whole form exists to reach is the worst offender of the set */ .pc-form .cn-slots__lab{font-size:16px;letter-spacing:.12em} .pc-form [type="submit"],.pc-form button[type="submit"]{font-size:16px;letter-spacing:.14em} /* ── PROGRESSIVE DISCLOSURE, SO THE TERMS STAY AND THE PAGE CALMS DOWN ───── The consignment page ran 10,577px. The two heaviest blocks are a 120-word category list and a 108-word reduction table — both of them terms a consignor is agreeing to, so neither can be cut. They are folded instead: present, one click away, and not a wall on first read. Open by default when a person prints the page or has no JavaScript, because
degrades to open content in print and is keyboard-operable natively. */ .cn-more{margin-top:18px;border-top:1px solid var(--rule);padding-top:14px} .cn-more__s{cursor:pointer;list-style:none;font-family:var(--mono);font-size:16px; letter-spacing:.12em;text-transform:uppercase;color:var(--brass-lit);padding:6px 0} .cn-more__s::-webkit-details-marker{display:none} .cn-more__s::after{content:" +";color:var(--brass)} .cn-more[open] .cn-more__s::after{content:" \2212"} .cn-more__s:hover{color:var(--brass)} .cn-more__s:focus-visible{outline:2px solid var(--brass);outline-offset:3px} .cn-more__b{padding-top:12px} @media print{.cn-more__b{display:block!important}.cn-more__s{display:none}} /* ══ THE FLOOR — TARGETED, BECAUSE THE BLANKET VERSION WAS DESTRUCTIVE ═════ I wrote `:where(p,li,span,div,b,a,…){font-size:max(1em,14px)!important}` and measured "0 elements under 14px" and called it done. It was flattening the page to reach that number. `1em` inside a font-size declaration resolves against the PARENT, so max(1em,14px) can never preserve anything larger than its parent — it caps every child that sets its own larger size by class. Measured on /press/ with the sheet linked: the four milestone numbers 44px -> 16px, every h2 54 -> 37, the hero lede 21 -> 16 (BELOW the floor the rule exists to enforce), and the form's own .fhead 26 -> 16, defeated by my own blanket rule. A floor that lowers type is not a floor. Raise what is too small by naming it; never touch what is already large enough. */ /* WHAT THE SECOND ATTEMPT STILL GOT WRONG, MEASURED THE SAME WAY. Replacing max(1em,14px) with absolute values fixed the 44px-to-16px damage and left a quieter version of the same mistake: 523 elements across the eleven pages that link this sheet still rendered SMALLER with it than without it, at all four widths. label.fl 16px -> 14px x130 /partners/, /consign/ label.fg 16px -> 14px x 80 /consign/ label, span 16px -> 14px x 64 inherited by the words inside them .fsub .fnote .hint .gl-note .opt 16px -> 14px x 34 this file's own 18px rules, beaten by this file's own !important summary 16px -> 14px x 12 /consign/ disclosure toggles p.s-lede 21px -> 18px x 3 /contact/, /sell/ A label or a paragraph that sets no size of its own inherits the 16px page base. Writing 14px on it is not a floor, it is a 2px cut applied to every label on the site that was already fine. The 10px ones needed raising; the 16px ones needed leaving alone, and one absolute number cannot tell them apart while it is below the number they already had. So: 16px, not 14px, for a label — above the 14px floor, equal to what an uninstrumented label already inherits, and a genuine raise for the 10px and 12.48px ones. 18px for anything a person reads to fill the form in, which is what this file already said forty lines above before the blanket rule overrode it. And no !important where a page's own larger value should win. */ /* CHROME IS NOT THIS SHEET'S TO SET. .eyebrow .meta .chip .rec__k .s-burger and the rest are floored once, site-wide, in sfv-system.css. Restating them here gave the eleven pages that load this file a different header from the sixty that do not — .s-burger measured 16px on /consign/ and 14px on /, from this rule. One owner per class; they are gone from this sheet. */ /* WHY !important IS BACK, AND WHY IT IS SAFE THIS TIME. Removing it dropped the floor through the page rules underneath: .evf input[type="text"]{.95rem} in sfv-page.css put /estate-sales/ fields at 15.2px, .gl-form .evf .chk{.84rem} put a /maps/get-listed/ consent label at 13.44px, and /dinner/ reached 12px. Specificity alone cannot win against a page's own inline