/* Strata Match design system v3 (2026-09-30). Source of truth: _ops/design-system-v3-2026-09-30.md and the canvas board "Design system v2.2" (System22). Light, photo-led, teal and mint. Loaded ONLY by src/layouts/V3Layout.astro, so v4-reskin pages are untouched until each route is ported. Pages and components use var(--...) tokens only; scripts/design-lint-v3.mjs fails the build on raw hex, radii, shadows, font families or uppercase labels outside this token block. */ @font-face { font-family: "Nunito Sans Variable"; src: url("/v3/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; } /* Metric-matched fallback for Nunito Sans (performance audit 2026-10-23, item 7). Until the web font arrives, text sets in the local Arial scaled to Nunito's widths and vertical metrics, so the swap doesn't rewrap lines or move the page. Widths measured in Chromium on a 400-character sample (Nunito vs Arial: 400 1.008, 600 0.953, 700 0.972); ascent 1011, descent 353, line gap 0 per 1000 units (Nunito Sans), divided by size-adjust. Arial has no semibold, so 600 and 700 both set in Arial Bold with their own scale. Where Arial is missing (most Android phones) the stack falls through to the system sans as before; Roboto is already within 1% of Nunito's regular width. */ @font-face { font-family: "Nunito Sans Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 100.8%; ascent-override: 100.3%; descent-override: 35%; line-gap-override: 0%; } @font-face { font-family: "Nunito Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 649; size-adjust: 95.3%; ascent-override: 106.1%; descent-override: 37%; line-gap-override: 0%; } @font-face { font-family: "Nunito Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 650 1000; size-adjust: 97.2%; ascent-override: 104%; descent-override: 36.3%; line-gap-override: 0%; } @font-face { font-family: "Source Serif 4 Variable"; src: url("/v3/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4 Variable"; src: url("/v3/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; } /* ───────── Tokens (the only place raw values are allowed) ───────── */ /* Tokens: /v3/tokens.css, loaded before this file. */ /* ───────── Base ───────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } body.v3 { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.5; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; font-weight: 400; } .v3 img { max-width: 100%; display: block; } :where(.v3) a { color: inherit; } :where(.v3) a:hover { color: var(--link); } .v3 :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } /* Packet 02: serif page/section headings use 500; UI headings use 700. Zero-specificity defaults let explicit heading roles win. */ :where(.v3) :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.02em; line-height: 1.08; } :where(.v3) :where(h1, h2, h3, h4) { font-weight: 700; } .v3 p { margin: 0; } .v3-display { font-size: var(--fs-hero); font-weight: 500; letter-spacing: -0.02em; line-height: 1.02; font-family: var(--font-display); } .v3-h1 { font-size: var(--fs-h1); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; } /* Section titles: Section System reference S:40/51, serif 32/500 (base heading leading 1.08). */ .v3-h2 { font-size: var(--fs-h2); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; } .v3-h3 { font-size: var(--fs-h3); } @media (max-width: 720px) { .v3-display { font-size: var(--fs-display); } .v3-h2 { font-size: var(--fs-h2); } } .v3-title { font-size: var(--fs-title); font-weight: 700; letter-spacing: 0; font-family: var(--font-ui); } .v3-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 60ch; } .v3-muted { color: var(--muted); } .v3-meta { font-size: var(--fs-meta); color: var(--muted); } /* The briefing line by a form's submit button (implied consent, 2026-10-24): ink, not muted, and at the small size, so it reads as part of the form. */ .v3-briefing-notice { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink); } .v3-briefing-notice[hidden] { display: none; } .v3-doc { font-family: var(--font-doc); } .v3-serif { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; } .v3-wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; } .v3-wrap-wide { width: min(var(--wrap-wide), 100% - 2 * var(--gutter)); margin-inline: auto; } .v3-section { padding-block: 88px; } @media (max-width: 720px) { .v3-section { padding-block: 56px; } } /* ───────── Buttons ───────── SM Action (packet 02 section 2.3; reference SM Action.dc.html, "A" below, and the Buttons section of StrataMatch Directory System.dc.html, "D"). One component, four kinds, every value copied from A renderVals: 1. Primary .v3-btn--primary teal-900 fill, white words; hover teal-700. 2. Secondary .v3-btn--outline white, 1px teal-900 inset ring; hover pale. 3. Tertiary .v3-btn--tertiary teal-600 words, no box; hover pale. Never underlined. 4. Destructive .v3-btn--destructive clay-ink words, 1px clay ring; hover clay-bg. Sizes: md 48px (0 22px, 15/700), sm .v3-btn--sm 40px (0 16px, 14/700). States: pressed scale(.98); focus 2px white gap and 3px teal-600 ring; loading aria-busy="true" (spinner, label stays); disabled grey fill and #616464 words, never opacity. On the one dark panel (.v3-btn--on-dark or a teal band) primary turns white with teal words and tertiary turns mint. Icons: the forward arrow (.v3-btn__chip) or the external icon, nothing else. One primary per view (D:69). Buttons act, links go (D:70). */ .v3-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: auto; min-height: var(--control-h); padding: 0 22px; font: 700 var(--fs-ui)/1.2 var(--font-ui); text-align: center; text-decoration: none; background: var(--white); color: var(--teal-900); border: 0; border-radius: var(--r-control); box-shadow: none; outline: none; cursor: pointer; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } /* Retired 2026-10-23: --lg renders at the default size. Don't add it to new markup. */ .v3-btn--lg { min-height: var(--control-h); } .v3-btn--sm { min-height: var(--control-h-sm); padding: 0 16px; font-size: var(--fs-small); } .v3-btn--block { display: flex; width: 100%; justify-content: center; } .v3-btn--primary { background: var(--teal-900); color: var(--white); } .v3-btn--primary:hover { background: var(--teal-700); color: var(--white); } .v3-btn--outline { background: var(--white); color: var(--teal-900); box-shadow: var(--shadow-inset-teal); } .v3-btn--outline:hover { background: var(--pale); color: var(--teal-900); } .v3-btn--tertiary, .v3-btn--tertiary.v3-btn--sm { padding: 0 14px; background: transparent; color: var(--teal-600); } .v3-btn--tertiary:hover { background: var(--pale); color: var(--teal-600); text-decoration: none; } .v3-btn--destructive { background: transparent; color: var(--clay-ink); box-shadow: var(--shadow-inset-clay); } .v3-btn--destructive:hover { background: var(--clay-bg); color: var(--clay-ink); } /* The forward arrow: a bare 16px glyph after the label (A:20), no tile. */ .v3-btn__chip { display: inline-flex; flex: none; width: auto; height: auto; background: none; color: inherit; } .v3-btn__chip svg, .v3-btn > svg { width: 16px; height: 16px; flex: none; } .v3-btn__chip svg path { stroke-width: 2; } .v3-btn:active { transform: scale(.98); } .v3-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .v3-btn--outline:focus-visible { box-shadow: var(--shadow-inset-teal-focus); } .v3-btn--destructive:focus-visible { box-shadow: var(--shadow-inset-clay-focus); } /* Loading keeps the width, the label and the kind colours; a 14px spinner leads (A:60). */ .v3-btn[aria-busy="true"] { cursor: progress; transform: none; } .v3-btn[aria-busy="true"]::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: var(--r-pill); border: 2px solid currentColor; border-right-color: transparent; animation: v3-btn-spin var(--dur-spin) linear infinite; } @keyframes v3-btn-spin { to { transform: rotate(360deg); } } .v3-btn:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { background: var(--gray); color: var(--faint); box-shadow: none; cursor: not-allowed; transform: none; } .v3-btn--outline:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { box-shadow: var(--shadow-inset-border); } .v3-btn--tertiary:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { background: transparent; } .v3-btn--destructive:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { background: transparent; box-shadow: var(--shadow-inset-border); } .v3-btn--outline:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]):focus-visible { box-shadow: var(--shadow-inset-border-focus); } /* ───────── Links ───────── Packet 02 section 2.4; reference "Links and icon buttons" in StrataMatch Directory System.dc.html (D:76-84). Links go, buttons act (D:70). Link colour --link (teal-600), hover --teal-900, never underlined (D:16; Mike 2026-10-21). Focus is --focus-ring on every link (below). 1. Standalone .v3-textlink 15/700, gap 6, trailing 16px arrow; 44px tall when it ends a section (D:81). 2. Phone .v3-contact-action (ContactPhone.astro) phone icon 18px and the number in full, 16/600, tabular figures, gap 8, 44px (D:79). The number is the label. 3. Website .v3-weblink (WebsiteLink.astro) domain only, external icon 15px, gap 6, 16/600, 44px, new tab (D:80). */ .v3-textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-ui); color: var(--link); text-decoration: none; } .v3-textlink:hover { color: var(--teal-900); text-decoration: none; } .v3-textlink svg { width: 16px; height: 16px; flex: none; } .v3-textlink svg path { stroke-width: 2; } :where(div, li, nav, section, footer, aside, header) > .v3-textlink { min-height: 44px; } .v3-contact-action, .v3-weblink { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-body); font-weight: 600; color: var(--link); text-decoration: none; overflow-wrap: anywhere; } .v3-contact-action { gap: 8px; font-variant-numeric: tabular-nums; } .v3-weblink { gap: 6px; } .v3-contact-action:hover, .v3-weblink:hover { color: var(--teal-900); text-decoration: none; } .v3-contact-action svg { width: 18px; height: 18px; flex: none; } .v3-weblink svg { width: 15px; height: 15px; flex: none; } /* Quiet phone control in an action row beside buttons (Mike, 2026-11-01): the compact pre-2.4 values, kept until Mike picks one phone style. */ .v3-contact-action--quiet { gap: 6px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--teal-900); font: 700 var(--fs-small)/1.25 var(--font-ui); } .v3-contact-action--quiet:hover { color: var(--link); } .v3-contact-action--quiet svg { width: 16px; height: 16px; } /* Every link takes the one focus ring (2px white gap, 3px teal-600). The header keeps its own inset outline (nav stays, Mike 2026-11-01); buttons draw the same ring with their own rule. */ .v3 a:not(.v3-btn, .v3-nav a):focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ───────── Surfaces ───────── */ .v3-panel { background: var(--mist); border-radius: var(--r-panel); padding: 56px clamp(20px, 5vw, 64px); } /* A card is white paper with a --border edge and a hairline shadow; --rule is only for dividers inside it. */ .v3-card { background: var(--ui-surface); border: var(--ui-control-border-width) solid var(--ui-card-border); border-radius: var(--ui-card-radius); box-shadow: var(--shadow-hair); } a.v3-card:hover { box-shadow: var(--shadow-soft); } .v3-card--lift { border: 0; box-shadow: var(--shadow-lift); } .v3-card--soft { box-shadow: var(--shadow-soft); } .v3-gray { background: var(--gray); border-radius: var(--r-lg); } .v3-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; } .v3-mono { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--r-md); background: var(--gray); border: 1px solid var(--rule); font-weight: 700; font-size: var(--fs-body); color: var(--ink); } .v3-mono--lg { width: 80px; height: 80px; border-radius: var(--r-lg); font-size: var(--fs-h3); } /* ───────── Form controls ───────── */ /* ───────── Inputs ───────── SM Input (packet 02 section 2.6; reference SM Input.dc.html, "I" below) and SM Location Field ("L"). Label above (700 15/1.3), help under it (400 14/1.45, -4px), " (optional)" in muted 400, error words in wait-ink (600 13/1.4). Field 48px, 0 14px, 14px corners, white, 1px --field inset ring; focus 2px teal-600 ring; error 2px --wait ring. Fewer than 6 options show as choices, 6 or more as a select. One column. */ .v3-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-family: var(--font-ui); } .v3-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .v3-field__label { font: 700 var(--fs-ui)/1.3 var(--font-ui); color: var(--ink); } .v3-field__optional { font-weight: 400; color: var(--muted); } .v3-field__default { font: 600 var(--fs-micro)/1.2 var(--font-ui); color: var(--good); } .v3-field__help { margin-top: -4px; font: 400 var(--fs-small)/1.45 var(--font-ui); color: var(--muted); } .v3-field__error { font: 600 var(--fs-meta)/1.4 var(--font-ui); color: var(--wait-ink); } .v3-input, .v3-select, .v3-textarea, .v3-inputbox { width: 100%; box-sizing: border-box; height: var(--control-h); padding: 0 14px; font: 400 var(--fs-body)/1.2 var(--font-ui); color: var(--ink); background: var(--white); border: 0; border-radius: var(--r-field); box-shadow: var(--shadow-field); outline: none; transition: box-shadow var(--dur-fast) var(--ease); } .v3-textarea { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.5; resize: vertical; } .v3-input:focus, .v3-select:focus, .v3-textarea:focus, .v3-inputbox:focus-within { outline: none; box-shadow: var(--shadow-field-focus); } .v3-input[aria-invalid="true"], .v3-select[aria-invalid="true"], .v3-textarea[aria-invalid="true"], .v3-inputbox:has([aria-invalid="true"]) { box-shadow: var(--shadow-field-error); } /* Text with a unit (I:23): the unit sits after a hairline inside the field. */ .v3-inputbox { display: flex; align-items: center; } .v3-inputbox input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; font: inherit; color: inherit; } .v3-inputbox input:focus-visible { box-shadow: none; } .v3-inputbox__unit { margin-left: 8px; padding-left: 8px; box-shadow: var(--shadow-inset-rule-left); font: 600 var(--fs-small)/1 var(--font-ui); color: var(--muted); } /* Location field (L:16-31): "Where is the building?" (700 14/1.2), a 48px field (0 6px 0 14px, gap 10) with a 20px pin (#616464 until filled, then teal-900), the input, a 32px clear x, a hairline and "Use my location" as a small inline action (36px, 0 10px, 700 14/1 teal-600, spinner while finding). Under it: "Your location stays on this device." (400 13/1.4 muted), with the found or error words before it. Built first for the directory (packet 03). */ .v3-location { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-ui); } .v3-location__label { font: 700 var(--fs-small)/1.2 var(--font-ui); color: var(--ink); } .v3-location__field { display: flex; align-items: center; gap: 10px; height: var(--control-h); padding: 0 6px 0 14px; box-sizing: border-box; border-radius: var(--r-field); background: var(--white); box-shadow: var(--shadow-field-idle); color: var(--border-strong); } .v3-location__field:has(.v3-location__input:not(:placeholder-shown)) { color: var(--teal-900); } .v3-location__field:focus-within { box-shadow: var(--shadow-field-focus); } .v3-location__field.is-error { box-shadow: var(--shadow-field-error); } .v3-location__field > svg { flex: none; } .v3-location__input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; outline: none; background: transparent; font: 400 var(--fs-body)/1.2 var(--font-ui); color: var(--ink); } .v3-location__input:focus-visible { box-shadow: none; } .v3-location__clear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-compact); background: transparent; color: var(--muted); cursor: pointer; font-size: var(--fs-body); } .v3-location__clear[hidden], .v3-location__act[hidden] { display: none; } .v3-location__act { display: inline-flex; align-items: center; gap: 10px; flex: none; } .v3-location__divider { flex: none; width: 1px; height: 24px; background: var(--rule); } .v3-location__use { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-compact); background: transparent; color: var(--teal-600); font: 700 var(--fs-small)/1 var(--font-ui); white-space: nowrap; cursor: pointer; } .v3-location__use:disabled, .v3-location__use[aria-busy="true"] { cursor: progress; } .v3-location__spinner { display: none; width: 14px; height: 14px; border-radius: var(--r-circle); border: 2px solid currentColor; border-right-color: transparent; animation: v3-btn-spin var(--dur-spin) linear infinite; } .v3-location__use:is(:disabled, [aria-busy="true"]) .v3-location__icon { display: none; } .v3-location__use:is(:disabled, [aria-busy="true"]) .v3-location__spinner { display: inline-block; } .v3-location__note { display: flex; align-items: center; gap: 8px; padding-top: 4px; font: 400 var(--fs-meta)/1.4 var(--font-ui); color: var(--muted); } .v3-location__found { font-weight: 600; color: var(--good); } .v3-location__error { font-weight: 600; color: var(--wait-ink); } .v3-choice { display: flex; gap: 12px; padding: 14px 16px; cursor: pointer; border: 1px solid var(--field); border-radius: var(--r-md); background: var(--white); } .v3-choice:has(input:checked) { border: 2px solid var(--teal-900); padding: 13px 15px; background: var(--pale); } .v3-choice input { accent-color: var(--teal-900); margin-top: 3px; } /* Option tile: the one control for picking from a short list (match intake, scorecards). Radio = pick one, checkbox = pick any; both look the same. */ .v3-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .v3-opts.v3-opts--cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .v3-opts--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .v3-opts--stack { grid-template-columns: 1fr; } .v3-opts--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Choice (I:30-36, I:96-98): radio, checkbox and option card share one look. 20px indicator first (round for pick one, 5px corners for pick any), then the words (600 15/1.3) and an optional line (400 13/1.35 muted). 12px 14px (cards 16px), 14px corners, 1px --border ring; chosen: pale with a 2px teal-900 ring and a filled indicator with a white tick. */ .v3-opt { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; width: 100%; box-sizing: border-box; min-height: 45px; padding: 12px 14px 12px 46px; cursor: pointer; text-align: left; /* 45 = 12 + 1 + 20px indicator + 12 (I:28) */ border: 0; border-radius: var(--r-field); background: var(--white); box-shadow: var(--shadow-option); font: 600 var(--fs-ui)/1.3 var(--font-ui); color: var(--ink); transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .v3-opts--cards .v3-opt { padding: 16px 16px 16px 48px; } .v3-opt small { display: block; font: 400 var(--fs-meta)/1.35 var(--font-ui); color: var(--muted); } .v3-opt input { position: absolute; opacity: 0; pointer-events: none; } .v3-opt::after { content: ""; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; box-sizing: border-box; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-indicator); } .v3-opts--cards .v3-opt::after { left: 16px; top: 17px; } .v3-opt:has(input[type="checkbox"])::after { border-radius: var(--r-check); } .v3-opt:has(input:checked), .v3-opt[aria-pressed="true"] { background: var(--pale); box-shadow: var(--shadow-option-on); } .v3-opt:has(input:checked)::after, .v3-opt[aria-pressed="true"]::after { background: var(--teal-900) var(--tick-on) no-repeat center / 12px; box-shadow: none; } .v3-opt:has(input:focus-visible), .v3-opt:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } /* The company update form draws these as plain native checkboxes; keep them ringless until that form moves to the choice (its file is in PR #382). */ .cu-choices .v3-opt, .cu-choices .v3-opt:has(input:checked) { box-shadow: none; } @media (max-width: 560px) { .v3-opts, .v3-opts--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v3-opts--two, .v3-opts--stack { grid-template-columns: 1fr; } } /* "I am a" (RoleQuestion.astro / .vue, mockup Role-select-phone 2026-11-11): four tiles, two by two at every width, 48px tall. */ .v3-role { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; } .v3-role[hidden] { display: none; } .v3-role > legend { margin-bottom: 8px; padding: 0; } .v3-role:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: var(--r-field); } .v3-opts--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v3-opts--pair .v3-opt { min-height: 48px; justify-content: center; } .v3-opts--pair .v3-opt::after { top: 50%; transform: translateY(-50%); } /* "Use my location": a 44px round crosshair button beside a city or area field (home job box, /match/, /companies/; src/scripts/use-my-location.ts). It starts hidden and shows only where the browser can share a location. Its message line is a polite live region: progress and the result are read out but not shown (the filled field shows the result); errors show. */ .v3-locate { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--pale); color: var(--teal-900); cursor: pointer; } .v3-locate[hidden] { display: none; } .v3-locate:hover { background: var(--gray); } .v3-locate:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } .v3-locate[aria-busy="true"] { cursor: progress; } .v3-locate[aria-busy="true"] svg { animation: v3-locate-pulse calc(var(--dur-slow) * 2) ease-in-out infinite alternate; } @keyframes v3-locate-pulse { to { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .v3-locate[aria-busy="true"] svg { animation: none; opacity: 0.5; } } .v3-locate-msg { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--wait-ink); } .v3-locate-msg:not([data-tone="error"]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Chips (I:95): the same choice as a 40px pill sized to its words, wrapping across lines; the indicator has 5px corners. "Not sure" uses the quiet variant. RFP builders and fit forms. */ .v3-opts--wrap { display: flex; flex-wrap: wrap; gap: 8px; } /* 44px, not the reference's 40: tap targets are at least 44px at every width (DESIGN §3; rfp-services spec). */ .v3-opts--wrap .v3-opt { width: auto; flex-direction: row; align-items: center; gap: 8px; min-height: var(--hit-min); padding: 0 14px 0 10px; border-radius: var(--r-pill); } .v3-opts--wrap .v3-opt::before { content: ""; flex: none; width: 20px; height: 20px; box-sizing: border-box; border-radius: var(--r-check); background: var(--white); box-shadow: var(--shadow-indicator); } .v3-opts--wrap .v3-opt::after { content: none; } .v3-opts--wrap .v3-opt:has(input:checked)::before { background: var(--teal-900) var(--tick-on) no-repeat center / 12px; box-shadow: none; } .v3-opts--wrap .v3-opt small { display: inline; } .v3-opt--quiet { color: var(--muted); font-weight: 400; box-shadow: none; border: 1px dashed var(--border); } /* Toggle (RFP builders, 2026-10-21): a yes/no requirement that is usually on. A real checkbox with role="switch" sits over the track, 44px tall to tap. */ .v3-toggle { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; min-width: 56px; height: 44px; } .v3-toggle__state { min-width: 2ch; font-size: var(--fs-small); font-weight: 700; color: var(--muted); } .v3-toggle:has(input:checked) .v3-toggle__state { color: var(--teal-900); } .v3-toggle input, .v3 .v3-toggle input[type="checkbox"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .v3-toggle__track { position: relative; flex: 0 0 52px; width: 52px; height: 30px; border-radius: var(--r-pill); background: var(--field); transition: background-color var(--dur-fast) var(--ease); } .v3-toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-hair); transition: translate var(--dur-fast) var(--ease); } .v3-toggle input:checked + .v3-toggle__track { background: var(--teal-900); } .v3-toggle input:checked + .v3-toggle__track::after { translate: 22px 0; } .v3-toggle input:focus-visible + .v3-toggle__track { outline: 2px solid var(--link); outline-offset: 2px; } /* Stepper (RFP builders, 2026-10-21): minus and plus around a number. */ .v3-stepper { display: inline-flex; align-items: stretch; gap: 6px; } .v3-stepper button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--field); border-radius: var(--r-md); background: var(--white); color: var(--teal-900); font: 600 var(--fs-h3)/1 var(--font-ui); cursor: pointer; } .v3-stepper button:hover { border-color: var(--teal-900); } .v3-stepper button:disabled { color: var(--faint); cursor: not-allowed; } .v3-stepper input { width: 72px; height: 44px; padding: 0 8px; border: 1px solid var(--field); border-radius: var(--r-md); background: var(--white); font: 700 var(--fs-lead)/1 var(--font-ui); color: var(--ink); text-align: center; } .v3-stepper input:focus { border-color: var(--teal-900); outline: none; box-shadow: var(--shadow-focus); } /* Recommended tag (RFP builders, 2026-10-21): same shape as the Sponsored tag, in teal. Always next to a one-line reason. */ .v3-rec { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--teal-700); border-radius: var(--r-xs); background: var(--white); font-size: var(--fs-meta); font-weight: 700; line-height: 1; color: var(--teal-900); white-space: nowrap; } .v3-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--gray); border-radius: var(--r-md); } .v3-seg label, .v3-seg a { display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--r-sm); font-size: var(--fs-small); color: var(--muted); cursor: pointer; text-decoration: none; } .v3-seg input { position: absolute; opacity: 0; pointer-events: none; } .v3-seg label:has(input:checked), .v3-seg [aria-current="true"] { background: var(--white); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-hair); } .v3-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--white); font-size: var(--fs-small); color: var(--ink); text-decoration: none; } .v3-chip[aria-pressed="true"], .v3-chip:has(input:checked) { border: 1.5px solid var(--teal-900); background: var(--pale); font-weight: 700; } /* ───────── Badges ───────── SM Badge (packet 02 section 2.5; reference SM Badge.dc.html, "B" below, and the Badge section of StrataMatch Directory System.dc.html, "D"). A badge is never a button; only the filter badge holds a control (its x). No shields, ticks-as-badges or "Verified" (D:96-101). - Tag .v3-badge--tag 24px, 0 8px, 3px corners, gray, ink, 600 12/1 (B:31) - Count .v3-badge--count 22px circle, teal-900, white, 700 12/1, tabular (B:32) - Filter .v3-badge--filter + .v3-badge__remove 36px outlined pill, 600 14/1, 28px x (B:19) - Region .v3-badge--region 26px pill, 700 12/1, white with a border ring; --match teal-900 with white words; --more teal-600 words; --unlisted (not served, packet 03 profile) struck through on wash (B:41) - Evidence .v3-evidence > .v3-evidence__label--good|wait|muted (600 14/1.35) + .v3-evidence__source (400 13/1.35 muted) (B:17, B:42) - Sponsored stays the mint edge tab, .v3-sponsor-tag (Mike, 2026-11-01). Old names kept as aliases until each page moves: .v3-tag, .v3-status--*, .pp-tag, .pp-region, .pp-evidence, .fr__chip. */ .v3-badge, .v3-tag, .pp-tag, .pp-region, .fr__chip { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; font-family: var(--font-ui); white-space: nowrap; } .v3-badge--tag, .v3-tag, .pp-tag { height: 24px; padding: 0 8px; border: 0; border-radius: var(--r-xs); background: var(--gray); color: var(--ink); font: 600 var(--fs-micro)/1 var(--font-ui); } .v3-badge--count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--teal-900); color: var(--white); font: 700 var(--fs-micro)/1 var(--font-ui); font-variant-numeric: tabular-nums; } .v3-badge--count:empty { display: none; } .v3-badge--filter, .fr__chip { gap: 2px; height: 36px; white-space: normal; padding: 0 4px 0 14px; border-radius: var(--r-pill); border: 1px solid var(--teal-900); background: var(--white); color: var(--ink); font: 600 var(--fs-small)/1 var(--font-ui); } .v3-badge__remove, .fr__chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); cursor: pointer; } .v3-badge__remove svg, .fr__chip-remove svg { width: 14px; height: 14px; } .v3-badge--region, .pp-region { gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--white); color: var(--ink); box-shadow: var(--shadow-inset-border); font: 700 var(--fs-micro)/1 var(--font-ui); } .v3-badge--region svg, .pp-region svg { width: 13px; height: 13px; flex: none; } .v3-badge--match, .pp-region--matched { background: var(--teal-900); color: var(--white); box-shadow: none; } .v3-badge__match, .pp-region__match { font-weight: 600; opacity: .8; } .v3-badge--more, .pp-region--more { background: transparent; color: var(--teal-600); box-shadow: none; } .v3-badge--unlisted, .pp-region--unlisted { background: var(--wash); color: var(--faint); font-weight: 600; text-decoration: line-through; text-decoration-color: var(--border); box-shadow: var(--shadow-inset-rule); } .v3-evidence, .pp-record__evidence { display: inline-flex; flex-direction: column; gap: 2px; font-family: var(--font-ui); } .v3-evidence__label, .v3-status, .pp-evidence { font: 600 var(--fs-small)/1.35 var(--font-ui); } .v3-evidence__label--good, .v3-status--good, .pp-evidence { color: var(--good); } .v3-evidence__label--wait, .v3-status--wait, .pp-evidence--wait { color: var(--wait-ink); } .v3-evidence__label--muted, .v3-status--muted, .pp-evidence--muted { color: var(--muted); } .v3-evidence__source { font: 400 var(--fs-meta)/1.35 var(--font-ui); color: var(--muted); } /* ───────── Nav ───────── */ /* Focused partner navigation (#326). Photo panels are single full-area links; supporting links share one hover/focus surface across their entire hit area. */ .v3-nav { position: relative; z-index: 50; height: var(--nav-h); background: var(--white); border-bottom: 1px solid var(--rule); } .v3-nav--over { position: absolute; inset: 0 0 auto 0; background: var(--white); } .v3-nav__inner { height: 100%; display: flex; align-items: center; gap: 32px; width: min(var(--wrap-wide), 100% - 2 * var(--gutter)); margin-inline: auto; } .v3-nav__brand { display: inline-flex; align-items: center; flex: none; margin-right: 12px; } .v3-nav__brand img { height: 40px; width: auto; } .v3-nav a { text-decoration: none; } .v3-nav .v3-btn { border-radius: var(--r-sm); } .v3-nav__links { display: flex; align-items: center; height: 100%; margin-inline: auto; } .v3-nav__menu { display: flex; align-items: center; gap: 24px; height: 100%; margin: 0; padding: 0; list-style: none; } .v3-nav__item { position: relative; height: 100%; display: flex; align-items: center; } .v3-nav__top { position: relative; display: inline-flex; align-items: center; height: 100%; padding: 0 8px; border: 0; background: none; font: 700 var(--fs-ui)/1.4 var(--font-ui); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease); } .v3-nav__topcopy { display: grid; gap: 3px; } .v3-nav__label { display: block; } .v3-nav__subtitle { font-size: var(--fs-micro); line-height: 1.4; font-weight: 400; color: var(--muted); } .v3-nav__top::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: var(--r-sm); background: transparent; transition: background-color var(--dur-fast) var(--ease); } .v3-nav__top[data-current="true"]::after, .v3-nav__top[aria-expanded="true"]::after { background: var(--teal-900); } .v3-nav__top:hover, .v3-nav__top:focus-visible { background: var(--pale); color: var(--ink); } .v3-nav__top:focus-visible { outline: 2px solid var(--link); outline-offset: -4px; } /* Menu panel (Mike approved 2026-11-04, design-review/nav-menus-2026-11-04): columns of three links and one photo card, sized to its content. */ .v3-nav__panel { position: absolute; top: calc(100% + 1px); left: -40px; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; column-gap: 40px; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); max-height: calc(100dvh - var(--nav-h) - 24px); overflow-y: auto; padding: 24px 32px; background: var(--white); border: 1px solid var(--rule); border-top: 0; border-radius: var(--r-menu); box-shadow: var(--shadow-menu); } .v3-nav__panel[hidden] { display: none; } .v3-nav__col--2 { grid-column: span 2; } .v3-nav__head { margin: 0 0 8px; font: 700 var(--fs-meta)/16px var(--font-ui); color: var(--teal-700); } .v3-nav__col ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .v3-nav__col--2 ul { display: grid; grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 32px; } .v3-nav__link { display: flex; align-items: center; min-height: 36px; margin: 0 -8px; padding: 0 8px; border-radius: var(--r-sm); font: 600 var(--fs-ui)/1.25 var(--font-ui); color: var(--ink); white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .v3-nav__link--all { color: var(--link); font-weight: 700; } .v3-nav__link:hover, .v3-nav__link:focus-visible { background: var(--wash); color: var(--link); } .v3-nav__link:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; } .v3-nav__card { position: relative; display: block; align-self: stretch; width: 200px; min-height: 132px; overflow: hidden; border-radius: var(--r-tile); background: var(--teal-900); color: var(--white); } .v3-nav__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v3-nav__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--teal-900) 6%, transparent) 30%, color-mix(in srgb, var(--teal-900) 88%, transparent) 100%); } .v3-nav__card-copy { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; } .v3-nav__card-title { display: block; font: 600 var(--fs-nav-card)/1.2 var(--font-display); letter-spacing: -.5px; } .v3-nav__card-cta { font: 700 var(--fs-meta)/1 var(--font-ui); opacity: .95; } .v3-nav__card:hover, .v3-nav__card:focus-visible { color: var(--white); } .v3-nav__card:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } .v3-nav__actions { display: flex; align-items: center; gap: 12px; flex: none; } .v3-nav__actions .v3-btn { white-space: nowrap; } .v3-nav__mpartner { display: none; } .v3-nav__burger { display: none; width: 44px; height: 44px; flex: none; border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--white); cursor: pointer; } @media (min-width: 1101px) and (max-width: 1339px) { .v3-nav__inner { gap: 16px; } .v3-nav__brand { margin-right: 0; } .v3-nav__brand img { height: 36px; } .v3-nav__menu { gap: 12px; } .v3-nav__top { padding-inline: 4px; font-size: var(--fs-small); } .v3-nav__top::after { left: 4px; right: 4px; } .v3-nav__actions { gap: 8px; } .v3-nav__actions .v3-btn { padding-inline: 12px; font-size: var(--fs-small); } } @media (max-width: 1100px) { :root { --nav-h: 72px; } .v3-nav__links, .v3-nav__partner { display: none; } .v3-nav__brand { min-height: 44px; margin-right: 0; } .v3-nav__actions { margin-left: auto; } .v3-nav__claim.v3-btn { min-height: 44px; padding-inline: 12px; font-size: var(--fs-small); } .v3-nav__burger { display: inline-flex; align-items: center; justify-content: center; } .v3-nav__links { flex-direction: column; align-items: stretch; height: auto; margin: 0; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--white); padding: 16px var(--gutter) 32px; border-top: 1px solid var(--rule); } .v3-nav.is-open .v3-nav__links { display: flex; } .v3-nav__menu { flex-direction: column; align-items: stretch; gap: 0; height: auto; } .v3-nav__item { flex-direction: column; align-items: stretch; height: auto; border-bottom: 1px solid var(--rule); } .v3-nav__top { width: 100%; height: auto; min-height: 72px; padding: 12px 8px; font-size: var(--fs-lead); } .v3-nav__topcopy { width: 100%; } .v3-nav__subtitle { font-size: var(--fs-meta); } .v3-nav__top::after { display: none; } .v3-nav__top[data-current="true"] { color: var(--link); } .v3-nav__panel { position: static; display: block; width: auto; max-width: none; max-height: none; overflow: hidden; margin-bottom: 16px; padding: 4px 16px 12px; border: 1px solid var(--border); border-radius: var(--r-tile); box-shadow: none; } .v3-nav__col { padding-top: 12px; } .v3-nav__col--2 ul { display: flex; flex-direction: column; } .v3-nav__link { min-height: 44px; white-space: normal; } .v3-nav__card { display: flex; align-items: center; width: auto; min-height: 44px; margin: 12px -8px 0; padding: 0 8px; border-radius: var(--r-sm); background: none; color: var(--link); } .v3-nav__card img, .v3-nav__card::after, .v3-nav__card-title { display: none; } .v3-nav__card-copy { position: static; } .v3-nav__card-cta { font-size: var(--fs-ui); line-height: 1.25; opacity: 1; } .v3-nav__card:hover, .v3-nav__card:focus-visible { background: var(--wash); color: var(--link); } .v3-nav__mpartner { display: flex; align-items: center; justify-content: center; flex: none; margin-top: 24px; } .v3-nav.is-open .v3-nav__burger .ic-open, .v3-nav:not(.is-open) .v3-nav__burger .ic-close { display: none; } } @media (max-width: 420px) { .v3-nav__inner { gap: 10px; } .v3-nav__brand img { height: 32px; } .v3-nav__claim.v3-btn { font-size: var(--fs-meta); padding-inline: 10px; } } /* Narrow phones retain the approved 28px logo, compact spacing and both 44px actions. Max dimensions also constrain Logo.astro's inline size; object-fit preserves the original mark's proportions. */ @media (max-width: 360px) { .v3-nav__inner { gap: 8px; } .v3-nav__brand img { max-height: 28px; max-width: 96px; object-fit: contain; } .v3-nav__claim.v3-btn { padding-inline: 8px; } } body.v3:has(.v3-nav.is-open) { overflow: hidden; } @media (prefers-reduced-motion: no-preference) { @media (min-width: 1101px) { .v3-nav__panel { transition: opacity var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease); } @starting-style { .v3-nav__panel { opacity: 0; translate: 0 -4px; } } } @media (max-width: 1100px) { .v3-nav__links { opacity: 0; translate: 0 -8px; transition: opacity var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease), display var(--dur-fast) allow-discrete; } .v3-nav.is-open .v3-nav__links { opacity: 1; translate: none; } @starting-style { .v3-nav.is-open .v3-nav__links { opacity: 0; translate: 0 -8px; } } } } /* One major photo CTA per page. Only the background has an angled edge; text and rectangular controls stay on a solid, readable surface. */ .v3-cta-banner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); background: var(--white); } .v3-cta-banner__content { position: relative; z-index: 1; isolation: isolate; padding: clamp(32px, 5vw, 64px); } .v3-cta-banner__content::before { content: ""; position: absolute; inset: 0 -64px 0 0; z-index: -1; background: var(--teal-900); clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 100%, 0 100%); pointer-events: none; } .v3-cta-banner__title { max-width: 23ch; margin: 0; color: var(--white); font-size: var(--fs-h1); line-height: 1.12; font-weight: 500; font-family: var(--font-display); letter-spacing: -0.02em; } .v3-cta-banner__body { max-width: 42ch; margin: 20px 0 0; font-size: var(--fs-lead); line-height: 1.55; color: var(--on-teal-muted); } .v3-cta-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .v3-cta-banner__content .v3-btn { max-width: 100%; white-space: normal; text-align: center; } .v3-cta-banner__media { position: relative; min-width: 0; min-height: 320px; margin: 0; } .v3-cta-banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 700px) { .v3-cta-banner { grid-template-columns: 1fr; } .v3-cta-banner__content { padding: 28px; } .v3-cta-banner__content::before { inset: 0; clip-path: none; } .v3-cta-banner__title { max-width: 20ch; } .v3-cta-banner__body { margin-top: 16px; font-size: var(--fs-body); } .v3-cta-banner__actions { margin-top: 24px; } .v3-cta-banner__actions .v3-btn { width: 100%; } .v3-cta-banner__media { min-height: 0; aspect-ratio: 2 / 1; } } /* ───────── Footer ───────── */ .v3-foot { background: var(--teal-900); color: var(--white); padding: 72px 0 32px; font-size: var(--fs-small); } .v3-foot a { text-decoration: none; } .v3-foot__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; } .v3-foot__id { display: flex; align-items: center; gap: 14px; } .v3-foot__id > a { flex: none; } .v3-foot__brand img { height: 40px; width: auto; } .v3-foot__brand p { margin-top: 16px; max-width: 30ch; font-size: var(--fs-ui); color: var(--on-teal-muted); } .v3-foot__projects.v3-btn--outline { margin-top: 22px; background: transparent; color: var(--mint); box-shadow: var(--shadow-inset-mint); } .v3-foot__projects.v3-btn--outline:hover { background: color-mix(in srgb, var(--mint) 12%, transparent); color: var(--white); } /* Contact line under the brand (Mike, 2026-10-22, proposal D.2): a hairline, a muted question and two mint text links. Visible on phones without opening a group. */ .v3-foot__contact { max-width: 280px; margin-top: 24px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); } .v3-foot__brand .v3-foot__contact p { margin: 0 0 8px; max-width: none; font-size: var(--fs-ui); color: var(--on-teal-muted); } .v3-foot .v3-foot__contactlinks { gap: 0; } .v3-foot .v3-foot__contactlinks .v3-textlink { display: inline-flex; padding: 6px 0; font-size: var(--fs-ui); color: var(--mint); } .v3-foot .v3-foot__contactlinks .v3-textlink:hover { color: var(--white); } .v3-foot h2, .v3-foot__h { font-size: var(--fs-ui); font-weight: 700; letter-spacing: 0; margin-bottom: 14px; color: var(--mint); white-space: nowrap; } .v3-foot__group summary { display: block; list-style: none; cursor: default; pointer-events: none; } .v3-foot__group summary::-webkit-details-marker { display: none; } .v3-foot__chev { display: none; } .v3-foot__group--path + .v3-foot__group--path { padding-left: 32px; border-left: 1px solid color-mix(in srgb, var(--white) 14%, transparent); } .v3-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .v3-foot ul a { display: block; padding: 6px 0; font-size: var(--fs-ui); color: var(--on-teal-muted); } .v3-foot a:hover { color: var(--white); } .v3-foot .v3-foot__src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 48px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); color: var(--on-teal-muted); } .v3-foot__src > span:first-child { margin-right: 6px; color: var(--on-teal-muted); } .v3-foot__src a { color: var(--on-teal-muted); font-weight: 400; } .v3-foot__dot { color: color-mix(in srgb, var(--on-teal-muted) 60%, transparent); } .v3-foot__credit { white-space: nowrap; } .v3-foot__base { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 20px; color: var(--on-teal-muted); } .v3-foot .v3-foot__legal { flex-direction: row; flex-wrap: wrap; gap: 4px 24px; } .v3-foot .v3-foot__legal a { padding: 4px 0; font-size: var(--fs-small); } @media (max-width: 1180px) { .v3-foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; } .v3-foot__brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; } .v3-foot__brand p, .v3-foot__projects.v3-btn--outline { margin-top: 0; } .v3-foot__contact { margin-top: 0; padding-top: 0; border-top: 0; } .v3-foot__group--path + .v3-foot__group--path { padding-left: 28px; } } @media (max-width: 980px) { .v3-foot__grid { grid-template-columns: 1fr 1fr; gap: 36px 32px; } } @media (max-width: 640px) { .v3-foot { padding-top: 48px; } .v3-foot__grid { grid-template-columns: 1fr; gap: 0; } .v3-foot__brand { display: block; margin-bottom: 28px; } .v3-foot__brand p { margin-top: 16px; font-size: var(--fs-body); } .v3-foot__projects.v3-btn--outline { margin-top: 22px; } .v3-foot__contact { max-width: none; margin-top: 24px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); } .v3-foot .v3-foot__contactlinks .v3-textlink { min-height: 44px; padding: 0; } .v3-foot__group { border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); } .v3-foot__group:last-child { border-bottom: 1px solid color-mix(in srgb, var(--white) 14%, transparent); } .v3-foot__group--path + .v3-foot__group--path { padding-left: 0; border-left: 0; } .v3-foot__group summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin: 0; font-size: var(--fs-lead); color: var(--white); cursor: pointer; pointer-events: auto; } .v3-foot__chev { display: inline-flex; color: var(--mint); transition: transform var(--dur-base) var(--ease); } .v3-foot__chev svg { width: 18px; height: 18px; } .v3-foot__group[open] .v3-foot__chev { transform: rotate(180deg); } .v3-foot__group ul { padding-bottom: 14px; gap: 0; } .v3-foot__group ul a { padding: 11px 0; font-size: var(--fs-body); } .v3-foot .v3-foot__src { margin-top: 28px; padding-top: 0; border-top: 0; font-size: var(--fs-ui); } .v3-foot__base { flex-direction: column; align-items: flex-start; margin-top: 20px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); } .v3-foot .v3-foot__legal a { padding: 12px 0; } /* Phone tap height of at least 44px (persona review 2026-10-22, P2-7). The credit stays inline so it wraps with its sentence; inline padding still widens the tap area. */ .v3-foot__src a { display: inline-block; padding: 12px 0; } .v3-foot__credit { padding: 12px 0; } } @media (prefers-reduced-motion: reduce) { .v3-foot__chev { transition: none; } } /* ───────── Motion (subtle; never more than a 3 px lift or 3 percent zoom) ───────── */ :where(.v3) :is(a, button, label) { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .v3-zoom { overflow: clip; } .v3-zoom img { transition: transform var(--dur-slow) var(--ease); } .v3-zoom:hover img { transform: scale(1.03); } .v3-lift { transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .v3-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } @media (prefers-reduced-motion: reduce) { .v3 *, .v3 *::before, .v3 *::after { transition: none !important; animation: none !important; } /* never transform:none here: it breaks MapLibre marker positioning */ } /* ───────── Premium motion layer (v3-motion.ts adds html.js and html.lenis) ───────── */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: clip; } .v3-textlink { transition: color var(--dur-fast) var(--ease); } .v3-card-link { display: block; text-decoration: none; color: inherit; border-radius: var(--r-lg); } .v3-card-link:hover { color: inherit; } .v3-card-link .v3-zoom { border-radius: var(--r-lg); } .v3-card-link:hover .v3-card-link__title { color: var(--link); } /* Reveal on scroll (UI review 2026-10-23, M3): reading pages only, on the --dur-slow token with an 8px rise. Forms, lists and tools don't animate in. */ html.js [data-reveal] { opacity: 0; translate: 0 8px; transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease); } html.js [data-reveal].is-in { opacity: 1; translate: 0 0; } html.js [data-reveal].is-static { transition: none; } html.js [data-reveal-delay="1"] { transition-delay: var(--stagger); } html.js [data-reveal-delay="2"] { transition-delay: calc(2 * var(--stagger)); } html.js [data-reveal-delay="3"] { transition-delay: calc(3 * var(--stagger)); } html.js [data-reveal-delay="4"] { transition-delay: calc(4 * var(--stagger)); } [data-parallax] { will-change: translate; } /* ---------- Tool card (rule 22): white card, graphic, name, line, round arrow ---------- */ .v3-tool__go { display: none; } @media (min-width: 561px) { .v3-tool, .v3-band--teal a.v3-tool, .v3-band--teal a.v3-tool:hover { gap: 0; padding: 8px 8px 18px; background: var(--ui-surface); border: var(--ui-control-border-width) solid var(--ui-card-border); border-radius: var(--ui-card-radius); box-shadow: var(--shadow-hair); color: var(--ink); transition: translate var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .v3-tool { height: 100%; } .v3-tool:hover { translate: 0 -2px; box-shadow: var(--shadow-lift); } .v3-tool .v3-tool__stage--photo { height: auto; aspect-ratio: 3 / 2; border-radius: var(--r-md); } .v3-tool .v3-tool__text { padding: 16px 12px 0; } .v3-tool .v3-tool__title { font-size: var(--fs-lead); } .v3-band--teal a.v3-tool .v3-tool__desc { color: var(--muted); } .v3-band--teal a.v3-tool .v3-tool__title { color: var(--ink); } .v3-band--teal a.v3-tool .v3-tool__tag { color: var(--muted); } .v3-band--teal a.v3-tool:hover .v3-tool__title { color: var(--link); } .v3-tool__go { display: grid; place-items: center; width: 36px; height: 36px; margin: 14px 12px 0; margin-top: auto; border-radius: var(--r-pill); background: var(--gray); color: var(--teal-900); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .v3-tool .v3-tool__text { padding-bottom: 14px; } .v3-tool:hover .v3-tool__go { background: var(--teal-900); color: var(--white); } } @media (prefers-reduced-motion: reduce) { .v3-tool:hover { translate: none; } } /* ---------- Tool scene (rule 22): faded building behind, one fixed-size panel in front ---------- */ .v3-scene { position: absolute; inset: 0; display: block; overflow: clip; background: var(--good-bg); } .v3-scene__composite { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); } /* Mute the generated photo a little (Mike 2026-10-31): a pale wash over the whole image, so the building sits back and the white sheet reads first. */ .v3-scene--composite::after { content: ""; position: absolute; inset: 0; background: rgb(234 242 243 / 0.18); pointer-events: none; } .v3-scene__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--scene-pos, center bottom); opacity: 0.5; } .v3-scene--right .v3-scene__bg { -webkit-mask-image: linear-gradient(to left, black 12%, transparent 88%); mask-image: linear-gradient(to left, black 12%, transparent 88%); } .v3-scene--left .v3-scene__bg { -webkit-mask-image: linear-gradient(to right, black 12%, transparent 88%); mask-image: linear-gradient(to right, black 12%, transparent 88%); } .v3-scene__card { position: absolute; top: 8%; left: 50%; translate: -50% 0; height: 84%; aspect-ratio: 4 / 3; display: block; overflow: clip; padding: 3.5%; background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-lift); } .v3-scene__card img { display: block; width: 100%; height: 100%; object-fit: contain; } /* Wide scene (homepage service card headers, Why, Your top 5; toolScenes.ts HOME_SCENES): the same layers, fade, shadow and padding, with a 16:9 panel so a wide, short stage still shows it at a readable size. */ .v3-scene--wide .v3-scene__card { aspect-ratio: 16 / 9; } .v3-tool__stage--photo .v3-scene img { transform: none; padding: 0; } /* ---------- App shell (rule 26; mockups match-flow and rfp-builder): header, step rail, sheet, summary ---------- */ /* The header is the compact PageHero (polish mockup #1, 2026-10-23): it ends above the panels, so no photo edge runs through them. --wash keeps the body a step lighter than the header and the summary (both --pale). */ .v3-app { background: var(--wash); } .v3-app__body { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) 320px; gap: 32px; align-items: start; margin-top: 24px; padding-bottom: 32px; } .v3-app__sheet.v3-app__sheet { max-width: none; margin: 0; box-shadow: var(--shadow-lift); } .v3-app__rail { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 20px; } .v3-app__rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .v3-app__step { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 8px 6px 0; border: 0; background: none; font: inherit; font-size: var(--fs-ui); font-weight: 600; text-align: left; color: var(--teal-700); cursor: pointer; } .v3-app__step:disabled { color: var(--muted); cursor: default; } .v3-app__dot { width: 14px; height: 14px; margin-left: 3px; border-radius: var(--r-pill); background: var(--border); } .v3-app__step.is-done .v3-app__dot { background: var(--teal-700); } .v3-app__step[aria-current="step"] { color: var(--teal-900); font-weight: 700; } .v3-app__step[aria-current="step"] .v3-app__dot { width: 20px; height: 20px; margin-left: 0; background: var(--teal-900); outline: 5px solid var(--mint); } .v3-app__step:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: var(--r-sm); } .v3-app__aside { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 20px; padding: 28px 24px 24px; background: var(--good-bg); border-radius: var(--r-lg); } .v3-app__sum { margin: 0; display: grid; gap: 14px; } .v3-app__sum div { display: grid; gap: 2px; } .v3-app__sum dt { font-size: var(--fs-small); color: var(--teal-700); } .v3-app__sum dd { margin: 0; font-size: var(--fs-ui); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; } .v3-app__sum dd.is-empty { font-weight: 400; color: var(--muted); } @media (max-width: 1180px) { .v3-app__body { grid-template-columns: minmax(0, 720px); justify-content: center; } .v3-app__rail, .v3-app__aside { display: none; } } @media (max-width: 760px) { .v3-app__body { margin-top: 16px; padding-inline: 0; padding-bottom: 20px; } } /* ---------- Tool row: white row card for secondary tool lists (mockup 2026-10-02) ---------- */ .v3-toolrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .v3-toolrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; align-items: center; gap: 20px; min-height: 104px; padding: 20px 24px; background: var(--ui-surface); border: var(--ui-control-border-width) solid var(--ui-card-border); border-radius: var(--ui-card-radius); box-shadow: var(--shadow-hair); color: var(--ink); text-decoration: none; transition: translate var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .v3-toolrow:hover { color: var(--ink); translate: 0 -2px; box-shadow: var(--shadow-lift); } .v3-toolrow__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--mint); color: var(--teal-900); } .v3-toolrow__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .v3-toolrow__title { font-size: var(--fs-lead); font-weight: 700; line-height: 1.25; color: var(--ink); text-wrap: balance; } .v3-toolrow__tag { font-weight: 600; color: var(--muted); } .v3-toolrow__desc { font-size: var(--fs-ui); line-height: 1.45; color: var(--muted); } .v3-toolrow__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1.5px solid var(--teal-900); color: var(--teal-900); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .v3-toolrow:hover .v3-toolrow__go { background: var(--teal-900); color: var(--white); } .v3-toolrow:focus-visible { outline-offset: 4px; } @media (max-width: 900px) { .v3-toolrows { grid-template-columns: 1fr; } } @media (max-width: 560px) { .v3-toolrows { gap: 12px; } .v3-toolrow { grid-template-columns: 48px minmax(0, 1fr) 36px; gap: 14px; min-height: 88px; padding: 16px; } .v3-toolrow__icon { width: 48px; height: 48px; } .v3-toolrow__title { font-size: var(--fs-ui); } .v3-toolrow__desc { font-size: var(--fs-small); } .v3-toolrow__go { width: 36px; height: 36px; } } @media (prefers-reduced-motion: reduce) { .v3-toolrow:hover { translate: none; } } /* ---------- City tiles: photo, city, firm count ---------- */ .v3-cities { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 16px; } .v3-city { display: grid; gap: 2px; color: var(--ink); text-decoration: none; } .v3-city__img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: clip; background: var(--gray); margin-bottom: 8px; } .v3-city__img img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease); } .v3-city:hover .v3-city__img img { scale: 1.03; } .v3-city__name { font-weight: 700; font-size: var(--fs-ui); } .v3-city:hover .v3-city__name { color: var(--link); text-decoration: underline; } .v3-city__n { font-size: var(--fs-small); color: var(--muted); } @media (max-width: 560px) { .v3-cities { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { .v3-city__img img { transition: none; } } /* ---------- Background motif (rule 21): disc and stacked floors, from the logo ---------- */ .v3-has-motif, .v3-band { position: relative; isolation: isolate; } .v3-motif { position: absolute; inset: 0; overflow: clip; z-index: -1; pointer-events: none; --motif-a: var(--pale); --motif-b: var(--gray); --motif-c: var(--white); } .v3-band .v3-motif { --motif-a: var(--white); --motif-b: var(--white); --motif-c: var(--pale); } /* On a pale band the shapes use --wash, so they stay as faint as they were before --pale darkened (2026-10-22). */ .v3-band:is(.v3-band--pale, .v3-band--sage, .v3-band--sand, .v3-band--mint) .v3-motif { --motif-a: var(--wash); --motif-b: var(--wash); } .v3-band--teal .v3-motif { --motif-a: var(--teal-700); --motif-b: var(--teal-700); --motif-c: var(--teal-900); } .v3-motif__in { position: absolute; } .v3-motif--disc .v3-motif__in { top: 40px; width: 900px; height: 900px; border-radius: var(--r-pill); background: linear-gradient(200deg, var(--motif-a) 0%, var(--motif-b) 40%, var(--motif-c) 75%); } .v3-motif--disc.v3-motif--right .v3-motif__in { right: -180px; } .v3-motif--disc.v3-motif--left .v3-motif__in { left: -260px; } .v3-motif--floors .v3-motif__in { top: 50%; margin-top: -170px; width: 560px; display: grid; gap: 20px; } .v3-motif--floors.v3-motif--right .v3-motif__in { right: -240px; } .v3-motif--floors.v3-motif--left .v3-motif__in { left: -240px; } .v3-motif--floors i { display: block; height: 100px; border-radius: var(--r-panel); background: var(--motif-b); } .v3-motif--floors i:nth-child(1) { width: 62%; } .v3-motif--floors i:nth-child(2) { width: 82%; } .v3-motif--floors.v3-motif--right i { margin-left: auto; } .v3-has-motif .v3-motif--floors i { background: var(--motif-a); } @media (max-width: 820px) { .v3-motif { display: none; } } @media print { .v3-motif { display: none; } } /* Hero photo rotation: up to four photos, 7 s each, slow zoom within the 3% cap. */ .v3-kb { position: absolute; inset: 0; overflow: clip; } .v3-kb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform-origin: 60% 45%; animation: v3kb var(--dur-rotate) linear infinite; } .v3-kb img:nth-child(1) { animation-delay: -1.2s; } .v3-kb img:nth-child(2) { animation-delay: 5.8s; } .v3-kb img:nth-child(3) { animation-delay: 12.8s; } .v3-kb img:nth-child(4) { animation-delay: 19.8s; } @keyframes v3kb { 0% { opacity: 0; transform: scale(1); } 4% { opacity: 1; } 25% { opacity: 1; } 32% { opacity: 0; transform: scale(1.03); } 100% { opacity: 0; transform: scale(1.03); } } /* Nav over the hero becomes solid once the hero scrolls away */ .v3-nav--over { position: fixed; transition: background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .v3-nav--over .v3-logo-dark { display: none; } .v3-nav--over .v3-logo-light { display: inline-flex; } .v3-nav--over.is-solid { background: var(--white); box-shadow: var(--shadow-hair); } .v3-nav--over.is-solid .v3-logo-dark { display: none; } .v3-nav--over.is-solid .v3-logo-light { display: inline-flex; } .v3-nav--over.is-solid .v3-btn--outline { box-shadow: var(--shadow-inset-teal); } .v3-nav--over .v3-btn--outline { background: var(--white); box-shadow: none; } @media (max-width: 820px) { .v3-nav--over .v3-nav__burger { background: var(--white); } } @media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1; translate: none; } .v3-kb img { animation: none; } .v3-kb img:first-child { opacity: 1; } [data-parallax] { translate: none !important; } } /* ---------- Register rows (directory, city pages) ---------- */ .v3-reg__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 20px; padding: 12px 0 0; font-weight: 700; } .v3-reg .letter-head { display: flex; align-items: baseline; gap: 12px; margin-top: 28px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); } .v3-reg .letter-head .L { font-size: var(--fs-title); font-weight: 700; color: var(--teal-900); } .v3-reg .letter-head .ct { font-size: var(--fs-meta); color: var(--muted); } .v3-reg .reg-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); transition: background-color var(--dur-fast) var(--ease); } .v3-reg .reg-row:hover { background: linear-gradient(90deg, var(--gray), var(--white)); } .v3-reg .reg-main { display: flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; color: var(--ink); } .v3-reg .reg-firm { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .v3-reg .reg-firm-name { font-weight: 700; font-size: var(--fs-body); } .v3-reg .reg-main:hover .reg-firm-name { color: var(--link); } .v3-reg .col-svc { display: flex; flex-direction: column; gap: 6px; } .v3-reg .reg-badges { display: flex; flex-wrap: wrap; gap: 6px; } .v3-reg .reg-evidence { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; } .v3-reg .rec-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta); font-weight: 600; color: var(--ink); text-decoration: none; } .v3-reg a.rec-link:hover { color: var(--link); text-decoration: underline; } .v3-reg .rec-link--wait { color: var(--wait-ink); } .v3-reg .reg-profile { justify-self: end; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-small); font-weight: 700; color: var(--teal-900); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .v3-reg .reg-profile:hover { background: var(--pale); border-color: var(--teal-900); } .v3-reg .reg-profile svg { transition: translate var(--dur-base) var(--ease); } .v3-reg .reg-profile:hover svg { translate: 3px 0; } @media (max-width: 900px) { .v3-reg__cols { display: none; } .v3-reg .reg-row { grid-template-columns: minmax(0, 1fr) auto; } .v3-reg .col-svc, .v3-reg .reg-evidence { grid-column: 1 / -1; padding-left: 66px; } .v3-reg .reg-profile { grid-row: 1; grid-column: 2; } } /* ---------- FAQ accordion ---------- */ .v3-faq__list { margin-top: 20px; } .v3-faq__item { border-bottom: 1px solid var(--rule); } .v3-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; } .v3-faq__item summary::-webkit-details-marker { display: none; } .v3-faq__item h3 { font-size: var(--fs-lead-sm); font-weight: 700; letter-spacing: 0; line-height: 1.35; font-family: var(--font-ui); } .v3-faq__item p { padding: 0 0 20px; max-width: 70ch; color: var(--muted); font-size: var(--fs-ui); line-height: 1.55; } @media (max-width: 720px) { .v3-faq__item h3 { font-size: var(--fs-body); } .v3-faq__item p { font-size: var(--fs-body); } } .v3-faq__plus { position: relative; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--r-md); } .v3-faq__plus::before, .v3-faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--teal-900); translate: -50% -50%; transition: rotate var(--dur-base) var(--ease); } .v3-faq__plus::after { rotate: 90deg; } .v3-faq__item[open] .v3-faq__plus::after { rotate: 0deg; } /* Answers open and close over --dur-fast where the browser can animate a
body (UI review 2026-10-23, M5); elsewhere they snap as before. */ @media (prefers-reduced-motion: no-preference) { .v3-faq__item { interpolate-size: allow-keywords; } .v3-faq__item::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), content-visibility var(--dur-fast) allow-discrete; } .v3-faq__item[open]::details-content { block-size: auto; opacity: 1; } } /* ---------- Tool cards (canvas Home22 tools row) ---------- */ .v3-tool { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); } .v3-tool:hover { color: var(--ink); } .v3-tool__stage { position: relative; display: block; height: 220px; border-radius: var(--r-lg); overflow: clip; background: var(--stage); } .v3-tool__text { display: flex; flex-direction: column; gap: 4px; } .v3-tool__desc { font-size: var(--fs-small); line-height: 1.45; color: var(--muted); } .v3-tool__title { font-size: var(--fs-body); font-weight: 700; transition: color var(--dur-fast) var(--ease); } .v3-tool:hover .v3-tool__title { color: var(--link); } .v3-tool__tag { font-size: var(--fs-meta); color: var(--good); } .v3-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .v3-tools--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1000px) { .v3-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .v3-tools, .v3-tools--3 { grid-template-columns: 1fr; gap: 0; } /* On phones a tool card is a row: small still, name, line. A full-width photo per card made tool pages several screens long. */ .v3-tools > .v3-tool, .v3-tools > * > .v3-tool { flex-direction: row; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); } .v3-tools .v3-tool__stage { flex: 0 0 96px; height: 72px; border-radius: var(--r-md); } .v3-band--teal .v3-tools > .v3-tool, .v3-band--teal .v3-tools > * > .v3-tool { border-top-color: var(--teal-700); } } /* Hiring flow parts (Top 5 flow design, Mike's Claude Design project, 2026-11-01). One look for every flow step: the match ring, the need dots and the tick box. The ring reads --p (0 to 100); a page script can change it after re-ranking. */ .v3-ring { --p: 0; --ring: 128px; --ring-w: 12px; display: grid; place-items: center; flex: none; width: var(--ring); height: var(--ring); padding: var(--ring-w); border-radius: 50%; background: conic-gradient(var(--teal-900) calc(var(--p) * 1%), var(--ring-track) 0); } .v3-ring__in { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--white); } .v3-need { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; } .v3-need--met { background: var(--teal-900); } .v3-need--ask { border: 2.5px solid var(--wait); } .v3-need--sm { width: 12px; height: 12px; } .v3-need--sm.v3-need--ask { border-width: 2px; } .v3-tickbox { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--field); border-radius: var(--r-sm); background: var(--white); color: var(--white); } .v3-tickbox svg { visibility: hidden; } :checked ~ * .v3-tickbox, .is-ticked .v3-tickbox { border-color: var(--teal-900); background: var(--teal-900); } :checked ~ * .v3-tickbox svg, .is-ticked .v3-tickbox svg { visibility: visible; } /* Quiet contact and comparison controls share one target and tooltip pattern. */ [data-action-tooltip] { position: relative; display: inline-flex; align-items: center; max-width: 100%; } .cmp-tg { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--teal-900); font: 700 var(--fs-small)/1.25 var(--font-ui); text-decoration: none; cursor: pointer; } .cmp-tg:hover { color: var(--link); background: transparent; } .cmp-tg:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; } .cmp-tg { position: relative; white-space: nowrap; } .cmp-tg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .cmp-tg__off, .cmp-tg__on { display: inline-flex; align-items: center; gap: 6px; pointer-events: none; } .cmp-tg .cmp-tg__on { display: none; } .cmp-tg:has(input:checked) { color: var(--teal-900); } .cmp-tg:has(input:checked) .cmp-tg__off { display: none; } .cmp-tg:has(input:checked) .cmp-tg__on { display: inline-flex; } .cmp-tg:has(input:disabled) { opacity: .45; cursor: not-allowed; } .cmp-tg input:disabled { cursor: not-allowed; } .v3-action-tooltip { position: absolute; z-index: 80; bottom: calc(100% + 6px); left: 50%; transform: translateX(calc(-50% + var(--tooltip-shift, 0px))); width: max-content; max-width: min(240px, calc(100vw - 32px)); padding: 6px 8px; border-radius: var(--r-sm); background: var(--teal-900); color: var(--white); box-shadow: var(--shadow-soft); font: 600 var(--fs-micro)/1.4 var(--font-ui); text-align: left; white-space: normal; cursor: default; pointer-events: auto; } .v3-action-tooltip[hidden] { display: none; } .v3-action-tooltip[data-below] { bottom: auto; top: calc(100% + 6px); } /* Transparent bridge keeps the tooltip hoverable across its visual gap. */ .v3-action-tooltip::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 6px; } .v3-action-tooltip[data-below]::after { top: auto; bottom: 100%; } /* ---------- Compare tray (canvas Directory22) ---------- */ [hidden] { display: none !important; } /* Fixed to the bottom of the screen: as a sticky child of the results list it sat below the fold and never appeared after "Add to compare" (ticket T004). */ .v3-tray { position: fixed; left: 50%; translate: -50% 0; bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: min(760px, calc(100% - 32px)); z-index: 60; display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 20px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); animation: v3-tray-in var(--dur-base) var(--ease); } .v3-tray__tiles { display: flex; gap: 6px; } .v3-tray__tile { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--gray); font-size: var(--fs-micro); font-weight: 700; } .v3-tray__tile.is-empty { background: none; border: 1.5px dashed var(--border); } .v3-tray__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .v3-tray__clear { border: 0; background: none; font: 700 var(--fs-small)/1 var(--font-ui); color: var(--muted); cursor: pointer; padding: 8px; } .v3-tray__clear:hover { color: var(--ink); } .v3-tray .is-off { opacity: .45; pointer-events: none; } @keyframes v3-tray-in { from { opacity: 0; translate: -50% 8px; } to { opacity: 1; translate: -50% 0; } } /* Keep focused items clear of a floating tray (WCAG 2.4.11): keyboard focus scrolls them above it, on every page that has one. */ html:has(.v3-tray:not([hidden])), html:has(#rtTray) { scroll-padding-bottom: 120px; } /* Analytics choice. Same paper card as the compare tray, from the GOV.UK cookie banner: one short question, Allow and No thanks, no pre-ticked box. It sits above the tray until the visitor chooses. */ .v3-consent { position: fixed; left: 50%; translate: -50% 0; bottom: var(--consent-bottom, max(16px, env(safe-area-inset-bottom, 0px))); width: min(720px, calc(100% - 32px)); z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px 14px 20px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); } .v3-consent p { margin: 0; flex: 1 1 260px; font-size: var(--fs-small); line-height: 1.45; color: var(--ink); } .v3-consent p a { color: var(--link); font-weight: 700; text-decoration: none; } .v3-consent p a:hover, .v3-consent p a:focus-visible { color: var(--teal-900); } .v3-consent__actions { display: flex; flex-wrap: wrap; gap: 8px; } html:has(.v3-consent:not([hidden])) { scroll-padding-bottom: 180px; } body:has(.v3-consent:not([hidden])) main { padding-bottom: 160px; } /* Keep the last cards clear of the tray while it shows. */ body:has(#v3Tray:not([hidden])) main { padding-bottom: 104px; } /* Phones: the initials tiles go, so "3 of 4 picked" stays on one line and the hint has room (persona re-test 2026-10-22, N2 and P3-2). Clear is a 44px target. */ @media (max-width: 560px) { .v3-tray { gap: 10px; padding: 10px 10px 10px 14px; } .v3-tray__tiles, .v3-tray__n { display: none; } .v3-tray #v3TrayCount { white-space: nowrap; } .v3-tray__clear { min-height: 44px; } .v3-tray .v3-btn { padding-left: 14px; } } /* Skip link */ .v3-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 14px; background: var(--teal-900); color: var(--white); border-radius: var(--r-md); font-weight: 700; text-decoration: none; } .v3-skip:focus { top: 12px; color: var(--white); } /* Tool card photo stage + teal band (2026-10-01: break up monotone pages) */ .v3-tool__stage--photo { background: var(--gray); } .v3-tool__stage--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .v3-tool:hover .v3-tool__stage--photo img { transform: scale(1.03); } .v3-band--teal { background: var(--teal-900); color: var(--white); } .v3-band--teal :is(h2, h3, .v3-h2, .v3-h3, .v3-title) { color: var(--white); } .v3-band--teal .v3-muted, .v3-band--teal .v3-meta { color: var(--on-teal-muted); } .v3-band--teal .v3-textlink { color: var(--mint); } .v3-band--teal .v3-tool, .v3-band--teal .v3-tool:hover { color: var(--white); } .v3-band--teal .v3-tool:hover .v3-tool__title { color: var(--mint); } .v3-band--teal .v3-tool__tag { color: var(--mint); } .v3-band--mint { background: var(--mint-100); } /* Desk and paper (DESIGN.md §5, Mike 2026-10-22): working zones (lists, compare, request, projects, opportunities, home services and guides, advertise products) sit on a full-bleed pale band with white cards on it. Content goes inside .v3-wrap-wide. Reading zones stay white. A panel that was --pale on white turns white (or --wash for an inset) when it lands on this band. */ .v3-band--pale { background: var(--pale); } .v3-band--pale .v3-panel { background: var(--white); border: 1px solid var(--border); } .v3-band--pale .v3-btn--outline:hover { background: var(--wash); } /* Gray segments vanish on the desk: same treatment as the list's List/Map switch. */ .v3-band--pale .v3-seg { background: var(--wash); border: 1px solid var(--field); } .v3-band--pale .v3-seg label, .v3-band--pale .v3-seg a { border: 1px solid transparent; } .v3-band--pale .v3-seg label:has(input:checked), .v3-band--pale .v3-seg [aria-current="true"] { border-color: var(--border); } /* Directory map in v3 colours (CompaniesMap.vue keeps its v4 defaults elsewhere) */ .v3-map { --bg-elevated: var(--white); --paper: var(--white); --fg-muted: var(--muted); --fg-subtle: var(--muted); --font-mono: var(--font-ui); --font-sans: var(--font-ui); --font-serif: var(--font-ui); --font-body: var(--font-ui); --accent-eyebrow: var(--link); --color-accent-500: var(--teal-900); --color-accent-600: var(--teal-900); } .v3-map .strata-marker { background: var(--teal-900); box-shadow: none; outline: 3px solid var(--mint); } .v3-map .strata-marker-approx { background: var(--white); border: 2px solid var(--teal-900); } .v3-map .strata-cluster { background: var(--teal-900); color: var(--mint); border: 2px solid var(--white); font-family: var(--font-ui); font-weight: 700; box-shadow: var(--shadow-lift); } .v3-map .strata-marker.is-focus { background: var(--mint); outline-color: var(--teal-900); } .v3-map .strata-map-note span { color: var(--muted); } /* ---------- Rhythm: bands and components (design review 2026-10-01) ---------- */ .v3-band { padding-block: 88px; } @media (max-width: 720px) { .v3-band { padding-block: 56px; } } .v3-band--sage { background: var(--sage); } .v3-band--sand { background: var(--sand); } .v3-band--teal .v3-lead, .v3-band--teal p { color: var(--on-teal-muted); } .v3-band--teal p b, .v3-band--teal p strong { color: var(--white); } .v3-band--teal .v3-card { background: var(--teal-700); border-color: transparent; color: var(--white); } .v3-band--teal .v3-chip { background: transparent; border-color: var(--teal-700); color: var(--white); } /* On the one dark panel (teal bands, the photo CTA card, the PageHero glass; A:43-44, D:66): primary turns white with teal-900 words, hover teal-100; tertiary turns mint, hover teal-700. SM Action has no on-dark secondary; the existing mint ring stays until Mike picks one. */ :is(.v3-band--teal, .v3-photo-cta__card, .ph:not(.ph--compact) .ph__glass) .v3-btn--primary, .v3-btn--primary.v3-btn--on-dark { background: var(--white); color: var(--teal-900); } :is(.v3-band--teal, .v3-photo-cta__card, .ph:not(.ph--compact) .ph__glass) .v3-btn--primary:hover, .v3-btn--primary.v3-btn--on-dark:hover { background: var(--teal-100); color: var(--teal-900); } :is(.v3-band--teal, .v3-photo-cta__card, .ph:not(.ph--compact) .ph__glass) .v3-btn--tertiary, .v3-btn--tertiary.v3-btn--on-dark { color: var(--mint); } :is(.v3-band--teal, .v3-photo-cta__card, .ph:not(.ph--compact) .ph__glass) .v3-btn--tertiary:hover, .v3-btn--tertiary.v3-btn--on-dark:hover { background: var(--teal-700); color: var(--mint); } :is(.v3-band--teal, .v3-photo-cta__card) .v3-btn--outline { background: transparent; color: var(--mint); box-shadow: var(--shadow-inset-mint); } :is(.v3-band--teal, .v3-photo-cta__card) .v3-btn--outline:hover { background: color-mix(in srgb, var(--mint) 12%, transparent); color: var(--white); } :is(.v3-band--teal, .v3-photo-cta__card) .v3-btn--outline:focus-visible { box-shadow: var(--shadow-inset-mint-focus); } .v3-band--teal a:not(.v3-btn):not(.v3-tool):not(.v3-toolrow) { color: var(--mint); } /* Full-bleed photo band with a caption chip */ .v3-photoband { position: relative; height: clamp(320px, 42vw, 560px); overflow: clip; } .v3-photoband img { width: 100%; height: 100%; object-fit: cover; } .v3-photoband__cap { position: absolute; left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); bottom: 24px; display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: var(--r-chip); background: var(--teal-900); color: var(--white); font-size: var(--fs-meta); font-weight: 600; } .v3-photoband__cap b { color: var(--mint); } /* Photo CTA closer */ .v3-photo-cta { position: relative; border-radius: var(--r-panel); overflow: clip; min-height: 420px; display: grid; align-items: end; } .v3-photo-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v3-photo-cta__card { position: relative; margin: 0 0 32px 32px; max-width: 500px; padding: 32px; background: var(--teal-900); color: var(--white); border-radius: var(--r-angled); } .v3-photo-cta__card h2 { color: var(--white); } .v3-photo-cta__card p { margin: 10px 0 22px; color: var(--on-teal-muted); } @media (max-width: 720px) { .v3-photo-cta { min-height: 0; display: block; } .v3-photo-cta > img { position: static; height: 220px; } .v3-photo-cta__card { margin: -40px 16px 16px; } } /* Stat strip (inside .v3-band--teal) */ .v3-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .v3-stats > div { padding: 8px 24px; border-left: 1px solid var(--teal-700); } .v3-stats > div:first-child { border-left: 0; padding-left: 0; } .v3-stats b { display: block; font-size: var(--fs-display); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--mint); font-variant-numeric: tabular-nums; } .v3-stats span { display: block; margin-top: 10px; font-size: var(--fs-small); color: var(--on-teal-muted); } @media (max-width: 720px) { .v3-stats { grid-template-columns: 1fr 1fr; row-gap: 28px; } .v3-stats > div:nth-child(3) { border-left: 0; padding-left: 0; } } /* Quote band (inside .v3-band--sand) */ .v3-quote { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; } .v3-quote img { width: 100%; border-radius: var(--r-panel); aspect-ratio: 4 / 5; object-fit: cover; } .v3-quote blockquote { margin: 0; font-size: var(--fs-h2); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; } .v3-quote blockquote::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 20px; background: var(--teal-900); } @media (max-width: 820px) { .v3-quote { grid-template-columns: 1fr; gap: 24px; } .v3-quote img { aspect-ratio: 16 / 10; } } /* Step rail */ .v3-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 24px; position: relative; margin: 0; padding: 0; } .v3-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: var(--mint); } .v3-rail li { position: relative; padding-top: 48px; list-style: none; } .v3-rail li::before { content: attr(data-n); position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--teal-900); color: var(--mint); font-weight: 700; font-size: var(--fs-small); display: grid; place-items: center; } .v3-rail b { display: block; margin-bottom: 4px; font-size: var(--fs-lead); } @media (max-width: 720px) { .v3-rail { grid-auto-flow: row; gap: 20px; } .v3-rail::before { left: 15px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .v3-rail li { padding: 4px 0 0 48px; } } /* Scale bar (fee bands, score bands) */ .v3-scale { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; } .v3-scale > div { display: flex; flex-direction: column; gap: 8px; } .v3-scale i { display: block; height: 12px; border-radius: var(--r-sm); background: var(--mint-100); } .v3-scale > div:nth-child(2) i { background: var(--mint); } .v3-scale > div:nth-child(3) i { background: var(--teal-700); } .v3-scale > div:nth-child(4) i { background: var(--teal-900); } .v3-scale b { font-size: var(--fs-lead); } .v3-scale span { font-size: var(--fs-small); color: var(--muted); } .v3-band--teal .v3-scale span { color: var(--on-teal-muted); } .v3-band--teal .v3-scale > div:nth-child(3) i { background: var(--mint-100); } .v3-band--teal .v3-scale > div:nth-child(4) i { background: var(--white); } @media (max-width: 720px) { .v3-scale { grid-auto-flow: row; } } /* Product stage: a tool or form on sage */ .v3-stage { background: var(--sage); border-radius: var(--r-panel); padding: clamp(16px, 4vw, 48px); } /* Photo page header */ .v3-head--photo { position: relative; min-height: 400px; display: grid; align-items: end; color: var(--white); overflow: clip; border-radius: var(--r-hero); } .v3-head--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v3-head--photo::after { content: ""; position: absolute; inset: 0; background: var(--scrim); } @media (max-width: 640px) { .v3-head--photo::after { background: var(--scrim-full); } } .v3-head--photo > :not(img) { position: relative; z-index: 1; } .v3-head--photo :is(h1, .v3-h1, .v3-display) { color: var(--white); } .v3-head--photo .v3-lead, .v3-head--photo p { color: var(--mint-100); } .v3-head--photo a { color: var(--white); } /* Monogram tints, keyed by data-tint 1 to 4 */ .v3-mono[data-tint="1"] { background: var(--mint-100); border-color: transparent; } .v3-mono[data-tint="2"] { background: var(--pale); border-color: transparent; } .v3-mono[data-tint="3"] { background: var(--sage); border-color: transparent; } .v3-mono[data-tint="4"] { background: var(--sand); border-color: transparent; } .v3-band--teal .v3-tool__desc { color: var(--on-teal-muted); } /* PREVIEW badge (PREVIEW builds only) */ .environment-badge { position: fixed; inset: 12px auto auto 12px; z-index: 2147483647; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--teal-900); color: var(--mint); font: 700 var(--fs-micro)/1 var(--font-ui); pointer-events: none; } @media print { .environment-badge { display: none !important; } } /* ───────── Finish pass (premium review 2026-10-01, _ops/v3-premium-review-2026-10-01.md) ───────── */ /* Type: display tracking and tight leading only at display sizes. */ .v3-h3 { line-height: 1.2; letter-spacing: -0.01em; } :where(.v3) h3:not([class*="v3-h"]), :where(.v3) h4, .v3-title { line-height: 1.3; letter-spacing: 0; } .v3 :is(h1, h2, h3, h4, .v3-display, blockquote) { text-wrap: balance; } .v3 :is(p, li) { text-wrap: pretty; } /* Browser surfaces carry the brand too. */ html { scrollbar-color: var(--border-strong) transparent; scrollbar-gutter: stable; scroll-padding-top: calc(var(--nav-h) + 16px); } /* Phone layouts use their available width. Reserving a desktop scrollbar gutter narrows overlay-scrollbar browsers and adds unnecessary wrapping. */ @media (max-width: 640px) { html { scrollbar-gutter: auto; } } body.v3 { accent-color: var(--teal-900); caret-color: var(--teal-900); -webkit-tap-highlight-color: transparent; } .v3 ::selection { background: var(--mint); color: var(--teal-900); } :where(.v3) a { text-underline-offset: 3px; text-decoration-thickness: 1px; } /* No link shows an underline at rest (Mike, 2026-10-21; DESIGN.md). Links in running text are bold link-teal, the non-colour cue WCAG 1.4.1 asks for; hover and keyboard focus bring the underline back. Zero specificity, so any component style wins. */ :where(.v3 a:not([class])) { text-decoration: none; } /* Colour is inherited, so a link on a dark or mint panel keeps that panel's colour; guide and legal prose set link-teal themselves. */ :where(.v3 p a:not([class]), .v3 dd a:not([class]), .v3 main li a:not([class])) { font-weight: 700; } :where(.v3 a:not([class])):hover, :where(.v3 a:not([class])):focus-visible { text-decoration: underline; } .v3 input[type="checkbox"], .v3 input[type="radio"] { width: 18px; height: 18px; } /* Form controls from one source. 16px stops iOS zooming the page on focus. */ .v3-input, .v3-select, .v3-textarea { font-size: var(--fs-body); } .v3-select { appearance: none; padding-right: 40px; background: var(--white) var(--chevron-input) no-repeat right 14px center / 16px; } /* Focus ring follows the shape it sits on. */ .v3 a:focus-visible, .v3 summary:focus-visible { border-radius: var(--r-sm); } .v3-tool:focus-visible { outline-offset: 6px; border-radius: var(--r-lg); } /* States. */ .v3-chip:hover { border-color: var(--teal-900); } .v3-card--soft { border-color: transparent; } /* Header stays with the reader on every page (Mike, 2026-10-03). Page toolbars that stick (the directory's .fr__bar) sit under it at top: var(--nav-h). The over-photo nav is position: fixed and turns solid on scroll, so it stays too. */ body.v3 .v3-nav:not(.v3-nav--over) { position: sticky; top: 0; } /* ---------- builder shell (packet 04, 4.5: Builders.dc.html) ---------- One layout for every document tool: a pale discs header, then a steps rail, one question card and the live document on the wash desk. The RFP builder draws the rail and the document from public/reskin/rfp/rfp-app.js, so these rules are global, not scoped to a component. */ .bs-head { position: relative; overflow: hidden; background: var(--pale); padding: 26px 0 30px; } /* The builder pages use the design frame: 48px each side, content up to --wrap (Builders.dc.html). */ .bs-wrap { width: min(var(--wrap), 100% - 2 * var(--page-pad)); margin-inline: auto; } /* The photo circle and its discs sit in the same 1280 frame as the content, so on wide screens they stay beside the text instead of at the window edge; the discs may run past the frame and the band clips them. */ .bs-head__art { position: absolute; inset: 0; width: min(var(--wrap-wide), 100%); margin-inline: auto; pointer-events: none; } .bs-head .bs-head__art .fp { overflow: visible; } .bs-head__in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; max-width: 700px; } .bs-head__crumbs { margin: 0; font-size: var(--fs-meta); color: var(--muted); } .bs-head__crumbs a { color: var(--link); text-decoration: none; } .bs-head__crumbs a:hover { text-decoration: underline; } .bs-head .hs { margin: 0; } .bs-head .bs-head__title { margin: 0; text-wrap: wrap; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-builder); line-height: 1.03; letter-spacing: -0.02em; color: var(--teal-900); } .bs-head__lead { margin: 0; max-width: 640px; font-size: var(--fs-lead); line-height: 1.5; color: var(--lead-ink); } .bs-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin: 0; font-size: var(--fs-meta); line-height: 1.45; } .bs-head__meta > span { color: var(--muted); } .bs-head__meta a { font-weight: 700; color: var(--link); text-decoration: none; } .bs-head__meta a:hover { text-decoration: underline; } .bs-head__note { display: flex; gap: 12px; margin: 0; max-width: 740px; padding: 14px 16px; border-radius: var(--r-field); background: var(--wait-bg); font-size: var(--fs-meta); line-height: 1.5; color: var(--ink); } .bs-head__note svg { flex: none; margin-top: 1px; color: var(--wait-ink); } .bs-head__note strong { color: var(--wait-ink); } .bs-body { background: var(--wash); padding: 28px 0 40px; } .bs-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr) 360px; gap: 28px; align-items: start; } /* Steps rail */ .bs-rail { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 14px; min-width: 0; } .bs-progress { display: flex; flex-direction: column; gap: 6px; } .bs-progress__t { margin: 0; font-size: var(--fs-meta); font-weight: 700; color: var(--ink); } .bs-bar { display: grid; grid-template-columns: repeat(var(--bs-n, 9), 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; } .bs-bar > span { height: 6px; border-radius: var(--r-xs); background: var(--rule); } .bs-bar > .is-done { background: var(--teal-900); } .bs-bar > .is-add { background: var(--wait); } .bs-bar > .is-now { background: var(--mint); } .bs-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .bs-step { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 10px 4px 6px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .bs-step:hover { background: var(--white); } .bs-step:focus-visible { outline: none; box-shadow: var(--focus-ring); } .bs-step[aria-current="step"] { background: var(--white); box-shadow: var(--shadow-hair); } .bs-step__dot { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--r-circle); background: var(--gray); color: var(--muted); font-size: var(--fs-meta); font-weight: 700; line-height: 1; } .bs-step.is-done .bs-step__dot { background: var(--teal-100); color: var(--teal-900); } .bs-step[aria-current="step"] .bs-step__dot { background: var(--teal-900); color: var(--mint); } .bs-step__t { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; } .bs-step__l { font-size: var(--fs-meta); font-weight: 600; line-height: 1.25; } .bs-step[aria-current="step"] .bs-step__l { font-weight: 700; } .bs-step__s { font-size: var(--fs-meta); line-height: 1.3; color: var(--muted); } .bs-step__s.is-add { color: var(--wait-ink); } .bs-pick { display: none; } .bs-pick select { width: 100%; height: var(--control-h); padding: 0 40px 0 14px; border: 1px solid var(--field); border-radius: var(--r-field); background: var(--white) var(--chevron) no-repeat right 14px center; font: 700 var(--fs-ui)/1.2 var(--font-ui); color: var(--ink); appearance: none; } .bs-saved { margin: 0; font-size: var(--fs-meta); color: var(--muted); } .bs-firms { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 12px 14px; border-radius: var(--r-field); background: var(--white); box-shadow: var(--shadow-hair); font-size: var(--fs-meta); line-height: 1.45; } .bs-firms span { color: var(--muted); } .bs-firms a { font-weight: 700; color: var(--link); text-decoration: none; } .bs-firms a:hover { text-decoration: underline; } /* Question card */ .bs-card { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 28px 30px; border-radius: var(--r-panel-lg); background: var(--white); box-shadow: var(--shadow-card); } .bs-card__head { display: flex; flex-direction: column; gap: 6px; } .bs-card__count { margin: 0; font-size: var(--fs-meta); font-weight: 700; color: var(--muted); } .bs-card__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; color: var(--teal-900); } .bs-card__title:focus { outline: none; } .bs-card__sub { margin: 0; font-size: var(--fs-ui); line-height: 1.5; color: var(--muted); } .bs-from { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-control); background: var(--pale); font-size: var(--fs-meta); line-height: 1.45; } .bs-from button { flex: none; min-height: var(--hit-min); padding: 0 6px; border: 0; background: none; font: 700 var(--fs-meta)/1 var(--font-ui); color: var(--link); cursor: pointer; } .bs-from button:hover { text-decoration: underline; } .bs-nav { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--rule); } .bs-nav__next { margin-left: auto; font-size: var(--fs-meta); color: var(--muted); } .bs-nav__go { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; } .bs-nav__next + .bs-nav__go { margin-left: 0; } /* SM Action: md 48px with 22px sides, sm 16px sides; secondary is a 1px ring. */ .bs-nav .v3-btn { padding: 0 22px; } .bs-doc .v3-btn--sm { padding: 0 16px; } :is(.bs-doc, .bs-next, .bs-nav) .v3-btn--outline { border-width: 1px; } .bs-tertiary { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: 0 14px; border: 0; border-radius: var(--r-control); background: transparent; font: 700 var(--fs-ui)/1.2 var(--font-ui); color: var(--link); text-decoration: none; cursor: pointer; } .bs-tertiary:hover { background: var(--pale); } .bs-tertiary:focus-visible { outline: none; box-shadow: var(--focus-ring); } .bs-tertiary--sm { min-height: var(--control-h-sm); font-size: var(--fs-small); } /* Document */ .bs-doc { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 12px; min-width: 0; } .bs-doc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; } .bs-doc__head strong { font-size: var(--fs-ui); } .bs-doc__head span { font-size: var(--fs-meta); color: var(--muted); } .bs-paper { overflow: hidden; border-radius: var(--r-sm); background: var(--white); box-shadow: var(--shadow-lift); } .bs-paper__cover { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 3px; padding: 18px 20px; background: var(--teal-900); color: var(--white); } .bs-paper__cover > .bs-paper__floors { position: absolute; inset: 0; z-index: -1; opacity: 0.18; background: repeating-linear-gradient(0deg, transparent 0 22px, var(--teal-700) 22px 24px); } .bs-paper__kind { font-size: var(--fs-meta); font-weight: 700; color: var(--mint); } .bs-paper__name { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 500; } .bs-paper__body { display: flex; flex-direction: column; gap: 9px; padding: 14px 20px 18px; font-family: var(--font-display); font-size: var(--fs-meta); line-height: 1.5; } .bs-sec { display: block; width: calc(100% + 20px); margin: 0 -10px; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: transparent; font: inherit; color: var(--ink); text-align: left; cursor: pointer; } .bs-sec:hover { background: var(--wash); } .bs-sec:focus-visible { outline: none; box-shadow: var(--focus-ring); } .bs-sec b { display: block; font-family: var(--font-ui); font-size: var(--fs-meta); font-weight: 700; } .bs-sec.is-now { background: var(--wait-bg); box-shadow: var(--shadow-mark-wait); } .bs-sec.is-empty { color: var(--faint); } .bs-doc__actions { display: flex; flex-wrap: wrap; gap: 8px; } .bs-doc__note { margin: 0; font-size: var(--fs-meta); line-height: 1.45; color: var(--muted); } .bs-doc-m { display: none; } .bs-narrow-only { display: none !important; } /* Below the tool: questions, then one next step */ .bs-below { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-block: 44px; } .bs-faq { display: flex; flex-direction: column; gap: 14px; } .bs-faq h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; color: var(--teal-900); } .bs-faq__list { display: flex; flex-direction: column; border-top: 2px solid var(--teal-900); } .bs-faq__item { border-bottom: 1px solid var(--rule); } .bs-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--control-h); padding: 14px 0; list-style: none; cursor: pointer; } .bs-faq__item summary::-webkit-details-marker { display: none; } .bs-faq__item summary h3 { margin: 0; font-family: var(--font-ui); font-size: var(--fs-ui); font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--ink); } .bs-faq__item summary::after { content: "+"; flex: none; font-size: var(--fs-title); font-weight: 600; color: var(--teal-900); } .bs-faq__item[open] summary::after { content: "\2212"; } .bs-faq__item p { margin: 0 0 14px; font-size: var(--fs-ui); line-height: 1.55; color: var(--muted); } .bs-next { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-panel-lg); background: var(--pale); } .bs-next h2 { margin: 0; font-family: var(--font-ui); font-size: var(--fs-title); font-weight: 700; letter-spacing: 0; } .bs-next p { margin: 0; font-size: var(--fs-ui); line-height: 1.5; color: var(--muted); } .bs-next__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .bs-next__actions a:not(.v3-btn) { font-size: var(--fs-ui); font-weight: 700; color: var(--link); text-decoration: none; } @media (max-width: 1180px) { .bs-grid { grid-template-columns: 220px minmax(0, 1fr); } .bs-doc { display: none; } .bs-doc-m { display: block; } .bs-narrow-only { display: inline-flex !important; } .bs-below { grid-template-columns: minmax(0, 1fr); gap: 32px; } } @media (max-width: 860px) { .bs-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .bs-rail { position: static; } .bs-steps, .bs-firms { display: none; } .bs-pick { display: block; } .bs-card { padding: 22px 18px; gap: 18px; } .bs-nav { flex-wrap: wrap; } .bs-nav__next { order: -1; flex-basis: 100%; margin-left: 0; } .bs-nav__go, .bs-nav__next + .bs-nav__go { margin-left: auto; } /* The step picker above already says "Step N of 9". */ .bs-card__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @media (max-width: 760px) { .bs-head { padding: 20px 0 24px; } .bs-wrap { width: calc(100% - 2 * var(--page-pad-phone)); } } /* Phones: at step 4 the four labelled steps don't fit one row, so the other steps keep their number and link and only the current step keeps its label. */ @media (max-width: 560px) { .bs-head .hs.hs--profile .hs__step:not(.hs__step--now) { position: relative; padding-right: 6px; } .bs-head .hs.hs--profile .hs__step:not(.hs__step--now) [data-hs-label] { display: none; } .bs-head .hs.hs--profile .hs__step:not(.hs__step--now) a { position: absolute; inset: 0; border-radius: var(--r-pill); font-size: 0; } } /* Arrow list (2026-10-02): the one bullet style. A small chevron, no divider lines. */ .v3-arrows { list-style: none; margin: 0; padding: 0; } .v3-arrows > li { position: relative; padding: 3px 0 3px 18px; } .v3-arrows > li::before { content: ""; position: absolute; left: 1px; top: 0.72em; width: 6px; height: 6px; border: solid var(--teal-700); border-width: 1.5px 1.5px 0 0; rotate: 45deg; } /* ---------- rfp builder (builders lane, 2026-10-02): app shell variant for document builders ---------- */ .v3-app--doc .v3-app__body { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .v3-app--doc .v3-app__aside { max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; overscroll-behavior: contain; } /* Sits on the photo side of the compact header, bottom right: PageHero's "frame" slot, so the frame is its containing block (not the revealed text column). */ .v3-rfp__output { position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); z-index: 1; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 20px 10px 12px; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); font-size: var(--fs-ui); color: var(--teal-900); } .v3-rfp__output b { font-weight: 700; } .v3-rfp__output-icons { display: flex; gap: 6px; } .v3-rfp__output-icons > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--mint-100); color: var(--teal-900); } .v3-rfp__sheet { min-width: 0; padding: 32px 40px 40px; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); scroll-margin-top: 16px; } .v3-rfp__aside { padding: 28px 24px 24px; } .v3-rfp__pvm { display: none; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); } .v3-rfp__pvm summary { display: inline-flex; list-style: none; cursor: pointer; } .v3-rfp__pvm summary::-webkit-details-marker { display: none; } .v3-rfp__pvm summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } .v3-rfp__paper { margin-top: 16px; max-height: min(70vh, 720px); overflow-y: auto; overscroll-behavior: contain; padding: 28px 28px 32px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; } .v3-rfp__paper:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } .v3-rfp__paper .rfp-cover { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); } .v3-rfp__paper .rfp-cover-brand { margin: 0 0 12px; font-size: 11px; color: var(--muted); } .v3-rfp__paper .rfp-logo-tick { display: none; } .v3-rfp__paper .rfp-logo-match em { font-style: normal; } .v3-rfp__paper .rfp-logo-strata { margin-right: 4px; } .v3-rfp__paper .rfp-eyebrow { font-size: 11px; color: var(--muted); } .v3-rfp__paper .rfp-title { margin-top: 6px; font-size: var(--fs-title); font-weight: 700; line-height: 1.2; } .v3-rfp__paper .rfp-subtitle { color: var(--muted); } .v3-rfp__paper .rfp-cover-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 12px 0 0; } .v3-rfp__paper .rfp-cover-meta dt { font-size: 10px; color: var(--muted); } .v3-rfp__paper .rfp-cover-meta dd { margin: 0; } .v3-rfp__paper .rfp-toc-wrap { margin-bottom: 14px; } .v3-rfp__paper .rfp-toc-h, .v3-rfp__paper [data-h="2"] { margin: 18px 0 6px; font-size: var(--fs-meta); font-weight: 700; } .v3-rfp__paper [data-h="3"] { margin: 12px 0 4px; font-weight: 700; } .v3-rfp__paper .rfp-toc { list-style: none; margin: 0; padding: 0; } .v3-rfp__paper .rfp-toc-item { display: flex; gap: 8px; padding: 2px 0; } .v3-rfp__paper .rfp-toc-no { min-width: 72px; color: var(--muted); } .v3-rfp__paper p { margin: 6px 0; } .v3-rfp__paper ul, .v3-rfp__paper ol { margin: 6px 0; padding-left: 18px; } .v3-rfp__paper .rfp-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 11px; } /* break-word, not the paper's "anywhere": table cells keep whole words when sizing columns, so "R1" and "Points" don't split (persona review 2026-10-22, P3-4). */ .v3-rfp__paper .rfp-table th, .v3-rfp__paper .rfp-table td { border: 1px solid var(--rule); padding: 4px 6px; text-align: left; vertical-align: top; overflow-wrap: break-word; } .v3-rfp__paper .rfp-table th { background: var(--gray); } .v3-rfp__paper .rfp-closing-note { margin-top: 16px; color: var(--muted); font-style: italic; } @media (max-width: 1180px) { .v3-app--doc .v3-app__body { grid-template-columns: minmax(0, 720px); justify-content: center; } .v3-rfp__pvm { display: block; } .v3-rfp__output { display: none; } } @media (max-width: 760px) { .v3-rfp__sheet { padding: 24px 16px; border-radius: 0; box-shadow: none; } } /* ---------- branded document cover (builders lane, 2026-10-02): title page of the RFP and the fire safety plan, screen and print ---------- */ .v3-cover { margin: 0 0 32px; font-family: var(--font-ui); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .v3-cover__band { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; min-height: 420px; padding: clamp(24px, 5vw, 44px); background: var(--teal-900); border-radius: var(--r-angled); color: var(--white); } .v3-cover__band::after { content: ""; position: absolute; top: -40px; right: -60px; width: 320px; height: 320px; background: var(--teal-700); opacity: 0.55; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 82%); pointer-events: none; } .v3-cover__logo { position: relative; z-index: 1; display: block; width: 168px; height: auto; } .v3-cover__titleblock { position: relative; z-index: 1; } .v3-cover__kicker { margin: 0 0 12px; font-size: var(--fs-ui); font-weight: 700; color: var(--mint); } .v3-cover__title { margin: 0; font-size: clamp(32px, 5vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; color: var(--white); text-wrap: balance; overflow-wrap: anywhere; } .v3-cover__rule { display: block; width: 64px; height: 5px; margin: 22px 0; background: var(--mint); } .v3-cover__sub { max-width: 44ch; margin: 0; font-family: var(--font-doc); font-size: var(--fs-lead); line-height: 1.5; color: var(--on-teal-muted); font-style: normal; } .v3-cover__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin: 24px 0 0; padding: 22px 26px; background: var(--sand); border-radius: var(--r-lg); } .v3-cover__facts div { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .v3-cover__facts dt { font-size: var(--fs-micro); font-weight: 700; color: var(--teal-700); } .v3-cover__facts dd { margin: 0; font-family: var(--font-doc); font-size: var(--fs-ui); line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; } .v3-cover__foot { display: flex; justify-content: space-between; gap: 16px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--fs-meta); color: var(--muted); } @media (max-width: 560px) { .v3-cover__facts { grid-template-columns: 1fr; } .v3-cover__band { min-height: 340px; } } @media print { .v3-cover { margin: 0; break-after: page; } .v3-cover__band { min-height: 150mm; } } /* Phones: touch targets of at least 44px (DESIGN §3; UI review round 2, finding 10). Text links inside running copy are left alone. */ @media (max-width: 640px) { .v3-btn--sm { height: 44px; } /* UI review 2026-10-23, A2: segments (List / Map) and chips were 36 to 38px. */ .v3-seg label, .v3-seg a { height: 38px; } .v3-chip { height: 44px; } } /* ───────── Print (UI review 2026-10-23, D3 and M3) ───────── A council prints a profile, a guide or a fit list to take to a meeting. Paper gets the record: no header, footer, tray, feedback strip, video, closing CTAs or compare controls; white paper and ink; the address of each outside source after its link; no card split across a page. Anything still waiting to reveal prints as it would look revealed. */ @media print { @page { margin: 16mm 14mm; } html { scroll-padding-top: 0; } body.v3 { background: var(--white); color: var(--ink); font-size: 11pt; } /* The feedback strip by its own hooks, not .fb: the Fee check tool's root is also .fb and must print (ship audit follow-up, 2026-10-23). */ .v3-skip, .v3-nav, .v3-foot, .v3-tray, .v3-consent, [data-feedback-host], [data-feedback], .fb-noprint, .gbc, .v3-photo-cta, .hvd, .v3-motif, .co-simband, .cmp-tg, .v3-nav__burger, .ph__actions, [data-print="hide"] { display: none !important; } html.js [data-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; } .v3 *, .v3 *::before, .v3 *::after { animation: none !important; transition: none !important; } body.v3::before { content: "Strata Match · stratamatch.ca"; display: block; margin-bottom: 10pt; padding-bottom: 6pt; border-bottom: 1px solid var(--rule); font-size: 9pt; font-weight: 700; color: var(--muted); } .v3-band, .v3-band--pale, .v3-band--teal, .v3-app { background: var(--white) !important; color: var(--ink) !important; padding-block: 12pt !important; } .v3-band--teal :is(h2, h3, p, a, .v3-lead) { color: var(--ink) !important; } /* Photo headers print as plain titles: no photo, no glass. */ .ph__media, .ph__frame::after { display: none !important; } .ph__frame { min-height: 0 !important; background: none !important; } .ph__in { padding: 0 !important; } .ph__glass { padding: 0 !important; background: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .ph__glass :is(h1, p, b, a, span), .ph__crumbs { color: var(--ink) !important; } .v3-card, .v3-faq__item, .v3-tool, .v3-toolrow, li, tr, figure { break-inside: avoid; } :is(h1, h2, h3) { break-after: avoid; } .v3-faq__item::details-content { block-size: auto !important; opacity: 1 !important; content-visibility: visible !important; } /* Outside sources print their address so the paper copy stays checkable. */ main a[href^="http"]:not([href*="stratamatch.ca"])::after { content: " (" attr(href) ")"; font-weight: 400; font-size: 9pt; color: var(--muted); overflow-wrap: anywhere; } main .v3-btn[href^="http"]::after { content: none; } } /* Search suggestions: overlay geometry is set from the existing input, never a wrapper. */ .ui-suggestions { position: fixed; z-index: var(--ui-menu-layer); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: var(--ui-space-1); background: var(--ui-surface); color: var(--ui-text); border: var(--ui-control-border-width) solid var(--ui-control-border); border-radius: var(--ui-control-radius); box-shadow: var(--shadow-soft); font: 400 var(--ui-control-font-size)/1.4 var(--font-ui); } .ui-suggestions[hidden] { display: none; } .ui-suggestions__option { display: flex; flex-direction: column; justify-content: center; min-height: var(--ui-control-height); padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--r-sm); cursor: pointer; overflow-wrap: anywhere; } .ui-suggestions__option:hover, .ui-suggestions__option[aria-selected="true"] { background: var(--ui-surface-hover); color: var(--ui-focus-color); } .ui-suggestions__option small { color: var(--ui-text-muted); font-size: var(--fs-small); } .ui-search-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* A changing result count owns a fixed inline slot, so the neighbouring search never moves. */ .fr__count { display: grid; } .fr__count > span { grid-area: 1 / 1; } .fr__count-space { visibility: hidden; } @media (max-width: 760px) { body.v3 input:is([type="search"], [role="combobox"]), body.v3 input[list] { font-size: var(--ui-control-font-size); } } /* Sponsored placements (Mike approved option I, 2026-11-01; mockups _ops/mockups/sponsor-placements-2026-11-01/I-*.jpg). Every paid spot wears the same "Sponsored" edge tab on its top-left edge: a mint label, squared, flush with the card, never a pill and never a button. The sponsor card leads with the company's own project photo, then its logo and name, and one quiet outline "View profile" button; no other words. The profile box is the company's own section on its profile. Built by src/scripts/sponsor-placements.ts. */ .v3-sponsor-tag { position: absolute; left: 20px; bottom: 100%; z-index: 1; display: inline-flex; align-items: center; height: 26px; padding: 0 14px; border: 1px solid var(--sponsor-line); border-bottom: 0; border-radius: var(--r-tab); background: var(--sponsor); color: var(--teal-900); font-size: var(--fs-meta); font-weight: 700; line-height: 1; white-space: nowrap; } .v3-sponsor-slot { padding-top: 40px; } .v3-sponsor-chip { font-style: normal; font-size: var(--fs-micro); font-weight: 700; color: var(--teal-900); background: var(--sponsor); padding: 2px 8px; border-radius: var(--r-pill); margin-left: 8px; white-space: nowrap; } .v3-sponsor-slot[hidden] { display: none; } .v3-sponsor-slot--reserve { min-height: 168px; } .v3-sponsor-card { position: relative; border: 1px solid var(--sponsor-line); border-radius: var(--r-lg); background: var(--sponsor-bg); color: var(--ink); } .v3-sponsor-card__in { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; gap: 32px; min-height: 128px; padding-right: 32px; } .v3-sponsor-card__in:not(:has(.v3-sponsor-card__photo)) { grid-template-columns: minmax(0, 1fr) auto; padding-left: 32px; } .v3-sponsor-card__photo { display: block; width: 100%; height: 100%; min-height: 128px; object-fit: cover; border-top-left-radius: var(--r-lg); border-bottom-left-radius: var(--r-lg); } .v3-sponsor-card__who { display: flex; align-items: center; gap: 20px; min-width: 0; } .v3-sponsor-card__logo { flex: none; width: auto; height: 64px; max-width: 160px; object-fit: contain; } .v3-sponsor-card__logo.is-dark { padding: 6px; border-radius: var(--r-sm); background: var(--teal-900); } .v3-sponsor-card__name { min-width: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; color: var(--teal-900); overflow-wrap: anywhere; } .v3-sponsor-card__go { white-space: nowrap; } .v3-sponsor-card__go svg { width: 16px; height: 16px; } .v3-sponsor-card--compact .v3-sponsor-card__in { grid-template-columns: 160px minmax(0, 1fr) auto; gap: 24px; min-height: 104px; padding-right: 24px; } .v3-sponsor-card--compact .v3-sponsor-card__photo { min-height: 104px; } .v3-sponsor-card--compact .v3-sponsor-card__logo { height: 52px; } .v3-sponsor-card--compact .v3-sponsor-card__name { font-size: var(--fs-title); } .v3-sponsor-box { position: relative; display: grid; gap: 28px; margin-top: 26px; padding: 40px; border: 1px solid var(--sponsor-line); border-radius: var(--r-lg); background: var(--sponsor-bg); } .v3-sponsor-box[hidden] { display: none; } .v3-sponsor-box__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .v3-sponsor-box__head h2 { margin: 0; color: var(--ink); font-size: var(--fs-h3); line-height: 1.25; } .v3-sponsor-box__about { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 28px; } .v3-sponsor-box__about:not(:has(img)) { grid-template-columns: minmax(0, 1fr); } .v3-sponsor-box__logo { display: grid; place-items: center; width: 96px; height: 96px; padding: 10px; border-radius: var(--r-md); background: var(--white); box-shadow: var(--shadow-hair); } .v3-sponsor-box__logo img { width: 100%; height: 100%; object-fit: contain; } .v3-sponsor-box__about p { max-width: 60ch; margin: 0; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); white-space: pre-line; } .v3-sponsor-box__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .v3-sponsor-box__photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--white); } .v3-sponsor-box__areas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .v3-sponsor-box__areas li { padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); font-size: var(--fs-small); font-weight: 600; color: var(--ink); } @media (max-width: 760px) { .v3-sponsor-card__in, .v3-sponsor-card--compact .v3-sponsor-card__in { grid-template-columns: 104px minmax(0, 1fr); gap: 0 16px; padding-right: 16px; min-height: 0; } .v3-sponsor-card__photo, .v3-sponsor-card--compact .v3-sponsor-card__photo { grid-row: span 2; min-height: 132px; } .v3-sponsor-card__who { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 16px; } .v3-sponsor-card__logo, .v3-sponsor-card--compact .v3-sponsor-card__logo { height: 40px; } .v3-sponsor-card__name, .v3-sponsor-card--compact .v3-sponsor-card__name { font-size: var(--fs-body); } .v3-sponsor-card__go { justify-self: start; margin: 12px 0 16px; } .v3-sponsor-card__in:not(:has(.v3-sponsor-card__photo)) { grid-template-columns: minmax(0, 1fr); padding-left: 16px; } .v3-sponsor-box { gap: 22px; padding: 24px; } .v3-sponsor-box__about { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; } .v3-sponsor-box__logo { width: 64px; height: 64px; padding: 6px; } .v3-sponsor-box__about p { font-size: var(--fs-body); } .v3-sponsor-box__photos { gap: 8px; } } @media print { .v3-sponsor-card, .v3-sponsor-box { border-color: var(--border); background: var(--white); } .v3-sponsor-card__go { display: none; } } /* Packet 01 v2: SM Input and SM Action, copied from the runtime components. These opt-in classes do not change existing V3 controls on other pages. */ .sm-input { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; border: 0; margin: 0; padding: 0; font-family: var(--font-ui); } .sm-input__label { padding: 0; font: 700 var(--fs-ui)/1.3 var(--font-ui); color: var(--ink); } fieldset.sm-input > legend { margin: 0 0 8px; } .sm-input__label > span { font-weight: 400; color: var(--muted); } .sm-input .sm-input__help { font: 400 var(--fs-small)/1.45 var(--font-ui); color: var(--muted); margin: -4px 0 0; } .sm-field, .sm-area { width: 100%; min-width: 0; border: 0; outline: none; border-radius: var(--r-field); background: var(--white); box-shadow: var(--shadow-field); box-sizing: border-box; color: var(--ink); font: 400 var(--fs-body)/1.2 var(--font-ui); } .sm-field { height: 48px; padding: 0 14px; } select.sm-field { appearance: none; padding-right: 30px; background-image: var(--chevron-input); background-position: right 14px center; background-repeat: no-repeat; background-size: 16px 16px; } .sm-area { min-height: 110px; padding: 12px 14px; resize: vertical; font: 400 var(--fs-body)/1.5 var(--font-ui); } .sm-field:focus, .sm-area:focus { box-shadow: var(--shadow-field-focus); } .sm-field[aria-invalid="true"], .sm-area[aria-invalid="true"] { box-shadow: var(--shadow-field-error); } .sm-choices { display: grid; grid-template-columns: 1fr; gap: 8px; } .sm-input--cards .sm-choices { grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); } .sm-input--chips .sm-choices { display: flex; flex-wrap: wrap; gap: 8px; } .sm-choice { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r-field); border: 0; cursor: pointer; width: 100%; box-sizing: border-box; background: var(--white); box-shadow: var(--shadow-option); font: 600 var(--fs-ui)/1.3 var(--font-ui); color: var(--ink); text-align: left; } .sm-input--cards .sm-choice { padding: 16px 16px; } .sm-input--chips .sm-choice { display: inline-flex; align-items: center; gap: 8px; height: 40px; width: auto; padding: 0 14px 0 10px; border-radius: var(--r-pill); } .sm-choice:has(input:checked), .sm-choice[aria-pressed="true"] { background: var(--pale); box-shadow: var(--shadow-option-on); } .sm-choice-text { display: flex; flex-direction: column; gap: 2px; text-align: left; } .sm-choice small { font: 400 var(--fs-meta)/1.35 var(--font-ui); color: var(--muted); } .sm-choice input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; } .sm-indicator { position: relative; width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: var(--r-pill); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 2px solid var(--field); } .sm-input--chips .sm-indicator { margin-top: 0; border-radius: var(--r-check); } .sm-input--checks .sm-indicator, .sm-choice.mx-tog .sm-indicator { border-radius: var(--r-check); } .sm-input--checks .sm-indicator { order: -1; } .sm-choice:has(input:checked) .sm-indicator, .sm-choice[aria-pressed="true"] .sm-indicator { background: var(--teal-900); border: 0; } .sm-indicator svg { display: none; width: 12px; height: 12px; fill: none; stroke: var(--white); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .sm-choice:has(input:checked) .sm-indicator svg, .sm-choice[aria-pressed="true"] .sm-indicator svg { display: block; } .sm-choice:focus-visible, .sm-choice:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; } .sm-action { display: inline-flex; width: auto; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; font: 700 var(--fs-ui)/1.2 var(--font-ui); text-align: center; background: var(--teal-900); color: var(--white); border: 0; border-radius: var(--r-control); box-shadow: none; cursor: pointer; outline: none; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .sm-action--tertiary { padding: 0 14px; background: transparent; color: var(--link); } .sm-action:hover { background: var(--teal-700); } .sm-action--tertiary:hover { background: var(--pale); } /* SM Action.dc.html keeps the label colour on hover (fg = pal.fg) and adds no shadow; beats the older .v3-btn--primary:hover. */ .sm-action--primary:hover { color: var(--white); box-shadow: none; } .sm-action:focus-visible { outline: none; box-shadow: var(--focus-ring); } .sm-action:active { transform: scale(.98); } .sm-action:disabled { background: var(--gray); color: var(--faint); cursor: not-allowed; } .sm-action[aria-busy="true"] { cursor: progress; } /* ───────── Page header ───────── Packet 02 section 2.8: PageHeader (src/components/v3/PageHeader.astro), the T2 "mint discs" header (StrataMatch Section System.dc.html) with the geometry of Directory Results.dc.html R:58-70 (desktop) and R:156-160 (phone), the same values packet 03 built for the directory header. Shared by page and list headers; extra controls follow the header. */ .v3-pagehead { position: relative; overflow: hidden; isolation: isolate; background: var(--pale); --pagehead-inset: max(48px, calc((100% - var(--wrap)) / 2)); padding: 28px var(--pagehead-inset) 36px; } .v3-pagehead__disc { position: absolute; right: 170px; top: -190px; width: 520px; height: 520px; border-radius: var(--r-circle); background: var(--teal-100); z-index: -1; } .v3-pagehead__photo { position: absolute; right: -90px; top: -140px; width: 540px; height: 540px; border-radius: var(--r-circle); overflow: hidden; box-shadow: var(--shadow-profile-photo); z-index: -1; } .v3-pagehead__photo :is(img, picture) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 35% 60%; } /* The lead column stops before the circle (photo left edge is 450px in from the right). */ .v3-pagehead__content { position: relative; max-width: min(620px, calc(100% - 474px + var(--pagehead-inset))); min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 14px; } .v3-pagehead__crumbs { font-size: var(--fs-small); color: var(--muted); } .v3-pagehead__crumbs a { color: inherit; } /* The reference writes " › " (R:62); the gap is drawn so the text stays "Home›…". */ .v3-pagehead__sep { margin-inline: .28em; } .v3-pagehead__crumbs a:hover { color: var(--teal-900); } .v3-pagehead__crumbs b { font-weight: inherit; color: inherit; } .v3-pagehead h1 { margin: 0; font: 500 var(--fs-directory-title)/1.02 var(--font-display); letter-spacing: -.02em; color: var(--teal-900); } .v3-pagehead__lead { margin: 0; font-size: var(--fs-lead-sm); line-height: 1.5; color: var(--muted); } .v3-pagehead__lead strong { color: var(--teal-900); } .v3-pagehead__meta { margin: 0; font-size: var(--fs-meta); color: var(--muted); } .v3-pagehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } @media (max-width: 760px) { .v3-pagehead { padding: 18px 16px 14px; } .v3-pagehead__disc { display: none; } .v3-pagehead__photo { position: relative; float: right; right: auto; top: auto; width: 220px; height: 220px; margin: -88px -96px 8px 12px; shape-outside: circle() border-box; shape-margin: 12px; box-shadow: var(--shadow-profile-photo-phone); } .v3-pagehead__content { display: contents; } .v3-pagehead__crumbs { font-size: var(--fs-meta); margin-bottom: 10px; } /* R:157 starts at the section ("Building services › Roofing"). */ .v3-pagehead__crumbs > a:first-child, .v3-pagehead__crumbs > a:first-child + .v3-pagehead__sep { display: none; } .v3-pagehead h1 { font-size: var(--fs-directory-phone); line-height: 1.04; max-width: none; } .v3-pagehead .hs, .v3-pagehead__lead { display: none; } } /* Extra controls follow the header, outside the photo and its reserved column. */ .v3-pagehead__below { padding-block: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .v3-pagehead__below .v3-rfp__output { position: static; flex-wrap: wrap; } @media print { .v3-pagehead { background: none; padding: 0; } .v3-pagehead__disc { display: none; } .v3-pagehead__content, .v3-pagehead h1 { max-width: none; } } /* The one Compare checkbox (CompareCheck.astro, map popups): 22px box, 14px bold label. */ .v3-cmp { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 var(--fs-small)/1 var(--font-ui); color: var(--ink); cursor: pointer; } .v3-cmp.v3-cmp input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--field); border-radius: var(--r-sm); background: var(--white); cursor: pointer; } .v3-cmp.v3-cmp input[type=checkbox]:checked { background: var(--teal-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--teal-900); } .v3-cmp.v3-cmp:hover input { border-color: var(--teal-600); } .v3-cmp.v3-cmp input:disabled { cursor: default; opacity: .5; }