/* * Salt offer-application portal — /offer-form/. Job 2648, lane F1. * * ⛔ NAMESPACE `.sapply-`, AND IT IS A HARD RULE, NOT A PREFERENCE. * * The site's existing shell component and its pop-up own their own two class prefixes, and a * collision between this file and one of them already cost this job a gate run that timed out * silently and hid two real findings for hours. Nothing in this stylesheet may match an element * the older components render, and nothing they ship may reach this one. Every selector below * begins inside `.sapply`. * * TOKENS. The values are the Salt design system's, restated here rather than inherited. They HAVE * to be restated: the older stylesheet declares them on its own root class, which this component * deliberately does not carry, so `var(--sf-marine)` would resolve to nothing on this page. Same * hexes, same names, one source of truth in the design system and two declarations of it. * * Marine #022938 · Silica #F5EFE4 · Sea Spray #BFF6E5 · Scrub #65654B * Line rgba(2,41,56,.22) · Error #a4262c * * TYPE. Kodchasan for everything; Ruthfully for the display heading. Both already load on every * page — Kodchasan from the Google Fonts link in the layout, Ruthfully from the captured * @font-face in the theme's inline head styles. Neither is re-declared here. * * ⚠ ONE BREAKPOINT, at 900px. Both sides of it are driven in tests/offer-form-portal.test.ts, at 899 * and at 900. Do not add a second without driving it the same way: a pass at one width says * nothing about the other. * * ⛔ IT USED TO BE 640px AND THAT NUMBER WAS MEASURABLY WRONG. The design system's own breakpoint * is 640, so the rail was given its 260px column the moment the viewport passed it — and the panel * that had 548px of content at 639px had 226px at 641px, NARROWER THAN A 320px PHONE. A surname * rendered as "Whitcon" and an email clipped at "…@bigpon", on the page where a buyer types the * two things the sales team has to contact them with. The rail now waits until there is genuinely * room for it beside a usable panel, and the fields that used to be laid out by viewport width are * laid out by the width they actually have (see .sapply-names and .sapply-grid). */ /* * ⚠ THE ONE EXCEPTION TO "every selector begins inside .sapply" — 4a spec §9. This targets the *
that WRAPS #salt-apply on src/pages/offer-form.astro, an ancestor no descendant selector * can reach, so it cannot be written any other way. Still `.sapply-`-prefixed for the same * collision-avoidance reason as everything else here, just not nested. * * Every other Salt page's own container caps at 1080px, and this one still does everywhere below * 1180px. Only once the third grid column opens does it need more: the panel was measuring ~360px * at 1440px viewport with the 1080px cap still in force — the .sapply-names row gave back exactly * ONE column instead of three, a worse repeat of the 226px "Whitcon" incident the 900px breakpoint * exists to prevent, one column later. Was an inline max-width on the element itself, which no * external rule — however specific — can override; moved here so a breakpoint can reach it at all. * `width: 100%` is required alongside max-width, not decorative: the theme's own * `.brxe-container{width:1100px}` is a fixed width, not auto, so raising max-width alone would * never let the box grow past 1100px to use it. */ /* * ⛔⛔ CRITICAL — THE PANEL STOPPED GROWING PAST 1440px AND WASTED THE REST OF THE VIEWPORT. * Measured: the middle grid column read 460px at 1180, 671.484px at 1440 AND at 1920 — identical, * despite .sapply-page-container itself correctly growing from 1180px to its 1500px cap over that * range (confirmed with getBoundingClientRect: 1180 / 1440 / 1500). The container was never the * ceiling. The real cause: `.brxe-container` (the theme class this element also carries) sets * `display:flex; flex-direction:column; align-items:flex-start`, which SHRINK-WRAPS every flex * child — including #salt-apply.sapply — to its own content width instead of stretching it to fill * the container. A CSS grid sized by shrink-to-fit resolves its `1fr` tracks against their own * content's max-content size, not the container's actual width, which is why the number was * IDENTICAL whether the grid had two tracks (900–1179px) or three (≥1180px): both were being sized * by content, not by the space .sapply-page-container had genuinely grown to. `align-items: stretch` * restores the normal flex behaviour so the grid fills whatever width the container below already * earns it. Verified live: with this rule, 1440px → 720px middle column, 1920px → 780px (was * 671.484px at both, unchanged). */ .sapply-page-container { max-width: 1080px; align-items: stretch; } @media (min-width: 1180px) { .sapply-page-container { width: 100%; max-width: 1500px; } } .sapply { --sf-marine: #022938; --sf-silica: #F5EFE4; --sf-spray: #BFF6E5; --sf-scrub: #65654B; --sf-line: rgba(2, 41, 56, .22); /* ⛔ The FIELD underline is not decoration — it is the only thing identifying a text field on this component, so it is held to 3:1 as a control boundary rather than to the hairline the rest of the panel uses. rgba(2,41,56,.35) measured 2.09:1 on Silica. */ --sf-line-field: rgba(2, 41, 56, .62); --sf-err: #a4262c; --sf-ok: #0C5064; /* Added for the 4a build spec, §1. Values only — the existing --sf-* names stay, a deliberate deviation from the spec's literal :root block (renaming ~630 lines of usages is pure churn). */ --sf-label: #4A4A38; /* field labels. Scrub darkened. 7.9:1 on Silica */ --sf-marine-deep: #04384c; /* busy button only */ --sf-error-bg: #fdf3f3; --sf-on-marine-muted: rgba(245, 239, 228, .28); /* meter track, not text */ font-family: 'Kodchasan', system-ui, -apple-system, sans-serif; color: var(--sf-marine); display: grid; /* Stacked BY DEFAULT. The two-column rail is the enhancement, added at 900px where it fits. */ grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; } .sapply * { box-sizing: border-box; } /* ============================================================================================ * THE STEP RAIL — the first of the three things that make this a portal rather than a form. * * It is a real