/* * Brand coverage results modal. * * Everything here is namespaced .ubc- so it cannot collide with the page's own * .bcheck / .form-bar / ACSS classes. We deliberately do NOT restyle the existing * widget: that markup belongs to the page build. This file only dresses the modal * we append to . * * Restyled 2026-09-01 so the modal reads as part of the site rather than as a * plugin: every colour, radius and size is an ACSS token read off the live page * (--primary, --primary-dark, --secondary-light, --text-dark, --card-radius, * --h2/--h3, --text-m/--text-s, --space-*). Headings inherit their ACSS size and * weight, the covered list is the site's global .check-list component, and the * email-gate button is the site's real .btn--cta. */ /* * TOKEN FALLBACKS. Every ACSS custom property below is written as * var(--token, literal). Where ACSS is loaded its value wins and nothing changes; * where it is NOT loaded the literal keeps the modal legible. * * This is not belt-and-braces. The static prototype at /protos/showroom-hero/ does * not load ACSS at all, so before these fallbacks existed --white resolved to * nothing, the panel background became transparent and the whole dialog rendered * as loose text floating over the hero. The modal is injected into whatever page * hosts it, so it cannot assume the host's design tokens are present. * The literals are the live V3 values; if ACSS changes, ACSS still wins. */ /* ---- the two lines that touch the page's own markup ----------------------- Legacy form-bar support only. A text input silently flattens a pasted multi-line list, so the JS swaps it for a textarea; these repair the knock-on. */ textarea.form-bar__input { min-height: 54px; max-height: 108px; resize: vertical; overflow-y: auto; } .form-bar__form .btn--cta { white-space: nowrap; flex-shrink: 0; } /* ---- modal shell --------------------------------------------------------- */ .ubc-modal[hidden] { display: none; } .ubc-modal { /* Derived from site tokens; nothing here is a brand hex. */ --ubc-ink: var(--primary-dark, #041C39); --ubc-text: var(--text-dark, #313131); --ubc-muted: color-mix(in oklch, var(--primary-dark, #041C39) 62%, var(--white, #ffffff)); --ubc-glyph: color-mix(in oklch, var(--text-dark, #313131) 62%, var(--white, #ffffff)); --ubc-line: color-mix(in oklch, var(--primary-light, #7C95AF) 45%, var(--white, #ffffff)); --ubc-field-line: var(--neutral-light, #CBD6E2); --ubc-scrim: color-mix(in oklch, var(--primary-ultra-dark, #02101F) 78%, transparent); --ubc-shadow: 0 30px 80px -24px color-mix(in oklch, var(--primary-dark, #041C39) 55%, transparent); --ubc-pad: clamp(1.5rem, 3.4vw, 2.75rem); position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-start; justify-content: center; padding: clamp(16px, 5vh, 64px) 16px; overflow-y: auto; color: var(--ubc-text); color-scheme: light; container-type: inline-size; } .ubc-modal__backdrop { position: fixed; inset: 0; background: var(--ubc-scrim); backdrop-filter: blur(3px); } .ubc-modal__panel { position: relative; width: 100%; max-width: 820px; background: var(--white, #ffffff); border-radius: var(--card-radius, 14px); padding: var(--ubc-pad); box-shadow: var(--ubc-shadow); animation: ubc-rise .22s ease-out; } @keyframes ubc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ubc-modal__panel { animation: none; } } .ubc-modal__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ubc-line); border-radius: 50%; background: var(--white, #ffffff); color: var(--ubc-ink); cursor: pointer; padding: 0; transition: background-color .15s ease; } .ubc-modal__close:hover { background: var(--bg-ultra-light, #F5F8FC); } .ubc-modal__close:focus-visible { outline: 2px solid var(--primary, #1B3A5C); outline-offset: 2px; } .ubc-modal__body { display: grid; gap: var(--space-m, 2rem); } /* ---- headline: count first, never a percentage ---------------------------- The h2 inherits its size, weight and family from ACSS like every other h2 on the site; the count phrase is the blue span the site's headings use. */ .ubc-head { display: grid; gap: var(--space-xs, 0.75rem); padding-right: 48px; } .ubc-head__title { margin: 0; color: var(--ubc-ink); text-wrap: balance; } .ubc-head__title span { color: var(--primary, #1B3A5C); font-weight: inherit; } .ubc-head__sub { margin: 0; max-width: 62ch; font-size: var(--text-m, 1rem); line-height: var(--text-line-height, 1.6); font-weight: 400; color: var(--ubc-muted); } /* ---- groups: one white surface, hairlines between sections ---------------- */ .ubc-groups { display: grid; } .ubc-group { border-top: 1px solid var(--ubc-line); } .ubc-group__head { display: flex; align-items: center; gap: 12px; padding: var(--space-s, 1.25rem) 0; cursor: pointer; list-style: none; } .ubc-group__head::-webkit-details-marker { display: none; } .ubc-group__head:focus-visible { outline: 2px solid var(--primary, #1B3A5C); outline-offset: 2px; border-radius: var(--radius, 9px); } .ubc-group__title { margin: 0; flex: 1 1 auto; min-width: 0; color: var(--ubc-ink); } /* The count rides inside the heading so it wraps with the words on narrow panels. */ .ubc-group__pill { display: inline-block; vertical-align: middle; margin-left: .35em; font-size: var(--text-s, 0.875rem); line-height: 1; font-weight: 600; padding: .4em .8em; border-radius: var(--btn-radius, 100px); background: var(--primary-ultra-light, #EEF3F9); color: var(--ubc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .ubc-group__chev { margin-left: auto; flex-shrink: 0; width: 20px; height: 20px; color: var(--ubc-glyph); transition: transform .18s ease; } .ubc-group[open] .ubc-group__chev { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .ubc-group__chev { transition: none; } } .ubc-group__body { padding: 0 0 var(--space-m, 2rem); display: grid; gap: var(--space-s, 1.25rem); } .ubc-group:last-child .ubc-group__body { padding-bottom: var(--space-xs, 0.75rem); } .ubc-group__note { margin: 0; max-width: 62ch; font-size: var(--text-s, 0.875rem); line-height: var(--text-line-height, 1.6); font-weight: 400; color: var(--ubc-muted); } /* ---- lists ----------------------------------------------------------------- The covered list IS the site's global .check-list component, markup verbatim. Etch only compiles the styles a page uses, so the sub-element rules may be absent on a page that has no check-list of its own. These scoped rules repeat the documented global values exactly, so they agree wherever both load. */ .ubc-modal .check-list { display: flex; flex-direction: column; gap: var(--space-s, 1.25rem); list-style: none; margin: 0; padding: 0; } .ubc-modal .check-list__item { --check-color: var(--primary, #1B3A5C); display: grid; grid-template-columns: 1.5rem 1fr; align-items: start; gap: .75rem; color: var(--ubc-text); } .ubc-modal .check-list__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--check-color, #1B3A5C); } .ubc-modal .check-list__icon-svg { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; } .ubc-modal .check-list__text { font-size: var(--text-m, 1rem); line-height: var(--text-line-height, 1.6); color: inherit; } /* Confirm and gap rows share the slot and rhythm, with a neutral glyph. */ .ubc-list--ask .check-list__item, .ubc-list--gap .check-list__item { --check-color: var(--ubc-glyph); } /* Two-column wall for the lists on wide panels so 25 brands do not run tall. */ .ubc-modal .check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-m, 2rem); row-gap: var(--space-s, 1.25rem); } .ubc-item__sub { display: block; margin-top: 2px; font-size: var(--text-s, 0.875rem); line-height: var(--text-line-height, 1.6); color: var(--ubc-muted); } /* ---- the capped footer and the email gate ---------------------------------- */ .ubc-more { margin: 0; padding-top: var(--space-s, 1.25rem); border-top: 1px solid var(--ubc-line); font-size: var(--text-m, 1rem); line-height: var(--text-line-height, 1.6); color: var(--ubc-muted); } /* Scoped under .ubc-modal so it out-specifies ACSS's generic button reset. */ .ubc-modal .ubc-link { all: unset; font: inherit; letter-spacing: inherit; text-transform: none; color: var(--primary, #1B3A5C); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; } .ubc-modal .ubc-link:hover { color: var(--primary-hover, #12314f); } .ubc-modal .ubc-link:focus-visible { outline: 2px solid var(--primary, #1B3A5C); outline-offset: 2px; border-radius: var(--radius-s, 5px); } /* ---- v2: the four steps ---------------------------------------------------- 1 checking - 2 confirm - 3 aggregate + gate - 4 sent. No heading here sets a font-size: h2/h3 inherit their ACSS scale. */ /* Step 1 and the send pause. Three dots, deliberately plain - the honest signal is that something is happening, not a fake progress bar with a fake percentage. */ .ubc-progress { display: flex; gap: .5rem; margin-top: var(--space-s, 1.25rem); } .ubc-progress span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--primary, #1B3A5C); opacity: .25; animation: ubc-pulse 1.05s ease-in-out infinite; } .ubc-progress span:nth-child(2) { animation-delay: .16s; } .ubc-progress span:nth-child(3) { animation-delay: .32s; } @keyframes ubc-pulse { 0%,100% { opacity: .22; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ubc-progress span { animation: none; opacity: .5; } } /* Step 2. One question per row. */ .ubc-confirm { list-style: none; margin: var(--space-s, 1.25rem) 0 0; padding: 0; display: grid; gap: var(--space-xs, 0.75rem); } .ubc-confirm__row { padding: var(--space-s, 1.25rem); border: 1px solid var(--ubc-line); border-radius: var(--card-radius, 14px); background: var(--white, #ffffff); } .ubc-confirm__q { margin: 0 0 .75rem; font-size: var(--text-m, 1rem); line-height: var(--text-line-height, 1.6); color: var(--ubc-text); } .ubc-confirm__q b { font-weight: 600; color: var(--ubc-ink); } .ubc-confirm__btns { display: flex; gap: .5rem; flex-wrap: wrap; } /* Scoped under .ubc-modal so it out-specifies ACSS's generic button reset. */ .ubc-modal .ubc-choice { all: unset; font: inherit; font-size: var(--text-s, 0.875rem); line-height: 1; padding: .7em 1.15em; border: 1px solid var(--ubc-field-line); border-radius: var(--radius-l, 9px); background: var(--white, #ffffff); color: var(--ubc-text); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .ubc-modal .ubc-choice:hover { border-color: var(--primary, #1B3A5C); color: var(--primary, #1B3A5C); } .ubc-modal .ubc-choice:focus-visible { outline: 2px solid var(--primary, #1B3A5C); outline-offset: 2px; } .ubc-modal .ubc-choice.is-on { background: var(--primary, #1B3A5C); border-color: var(--primary, #1B3A5C); color: var(--white, #ffffff); } .ubc-confirm__site { margin-top: .85rem; } .ubc-confirm__site[hidden] { display: none; } .ubc-confirm__site label { display: block; margin-bottom: .4rem; font-size: var(--text-s, 0.875rem); line-height: var(--text-line-height, 1.6); color: var(--ubc-muted); } /* Shared field. The gate input keeps its own modifier for the inline row. */ .ubc-input { width: 100%; min-height: 3.25rem; padding-inline: 1.1em; border: 1px solid var(--ubc-field-line); border-radius: var(--radius-l, 9px); background: var(--white, #ffffff); font: inherit; font-size: var(--text-m, 1rem); color: var(--ubc-ink); } .ubc-input::placeholder { color: var(--ubc-muted); } .ubc-input:focus-visible { outline: 2px solid var(--primary, #1B3A5C); outline-offset: 1px; } .ubc-actions { display: flex; justify-content: flex-end; margin-top: var(--space-s, 1.25rem); } .ubc-modal .ubc-actions .btn--cta { cursor: pointer; white-space: nowrap; } .ubc-note { margin: var(--space-xs, 0.75rem) 0 0; font-size: var(--text-s, 0.875rem); color: var(--ubc-muted); } /* Step 3 gate. A block, not a bare row: it now carries its own heading and note. */ .ubc-gate { margin-top: var(--space-m, 2rem); padding: var(--space-s, 1.25rem); border: 1px solid var(--ubc-line); border-radius: var(--card-radius, 14px); background: color-mix(in oklch, var(--primary-ultra-light, #EEF3F9) 55%, var(--white, #ffffff)); } .ubc-gate__title { margin: 0 0 .35rem; color: var(--ubc-ink); } .ubc-gate__note { margin: 0 0 var(--space-xs, 0.75rem); font-size: var(--text-m, 1rem); line-height: var(--text-line-height, 1.6); color: var(--ubc-text); } .ubc-gate__row { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; } .ubc-gate__input { flex: 1 1 260px; width: auto; } .ubc-gate__err { margin: .6rem 0 0; font-size: var(--text-s, 0.875rem); color: var(--action-critical, #B3261E); } .ubc-gate__err[hidden] { display: none; } /* The button is the site's own .btn--cta; only the layout hooks live here. */ .ubc-gate .btn--cta { flex-shrink: 0; cursor: pointer; white-space: nowrap; } /* ---- narrow panels ---------------------------------------------------------- */ @container (max-width: 44rem) { .ubc-modal__close { top: 10px; right: 10px; width: 36px; height: 36px; } .ubc-head { padding-right: 40px; } .ubc-modal .check-list { grid-template-columns: minmax(0, 1fr); } /* At 390px the gate button must sit under the field, not squeeze beside it. */ .ubc-gate__row { flex-direction: column; } .ubc-gate__input { flex: 1 1 auto; } .ubc-modal .ubc-gate .btn--cta { width: 100%; text-align: center; } .ubc-confirm__btns { flex-direction: column; align-items: stretch; } .ubc-modal .ubc-choice { text-align: center; } .ubc-actions { justify-content: stretch; } .ubc-modal .ubc-actions .btn--cta { width: 100%; text-align: center; } } /* Website capture on brands we could not identify. Sits inside the list item so the field is unmistakably attached to ITS brand, rather than a lone box under a list of names. */ .ubc-gapsite { display: block; margin-top: 6px; } .ubc-gapsite__lab { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ubc-muted, #7E92A8); margin-bottom: 4px; } .ubc-gapsite__in { max-width: 260px; } .ubc-gapsite__in:disabled { opacity: .6; } .ubc-gapsave { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .ubc-gapsave__msg { font-size: 13px; color: var(--ubc-muted, #7E92A8); } /* ---- manufacturer pick list ------------------------------------------------ A manufacturer answer is a CHOICE among real brands, not a yes/no about one guess, so it gets checkboxes rather than the Yes / No pair. Every token carries a literal fallback for the same reason the rest of this file does: the widget is injected into pages that do not load ACSS, where a bare var() resolves empty. */ .ubc-picks { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: 2px; } .ubc-picks li { margin: 0; } .ubc-picks label { display: flex; align-items: center; gap: .5rem; padding: 7px 10px; border-radius: 6px; font-size: var(--text-s, .9375rem); line-height: 1.4; color: var(--ubc-ink, #10243A); cursor: pointer; } .ubc-picks label:hover { background: var(--ubc-tint, rgba(27, 58, 92, .05)); } .ubc-picks input { accent-color: var(--primary, #1B3A5C); width: 16px; height: 16px; flex: 0 0 auto; margin: 0; } .ubc-picks label:focus-within { outline: 2px solid var(--primary, #1B3A5C); outline-offset: 1px; } .ubc-confirm__more { margin: 0 0 .75rem; font-size: 13px; color: var(--ubc-muted, #7E92A8); } /* ---- CSV upload ------------------------------------------------------------ The native file input is replaced by its own label, which is the only way to style one; the input stays in the DOM and focusable rather than display:none, so the control keeps its keyboard behaviour and its accessible name. */ .ubc-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .ubc-file__in { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* This control is the ONE part of the widget that lives on the HOST PAGE rather than inside the modal, and the two grounds are opposites: the modal is white, while the Showroom section it is injected into is oklch(.19 0 0). Every other rule in this file may assume a light panel; these may not. The first version did, and the upload confirmation rendered #10243A on near-black - present, correct, and unreadable. So these inherit the host's own text colour instead of asserting one, which works in both directions and needs no knowledge of where the widget landed. */ .ubc-file__label { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid; border-color: color-mix(in oklch, currentColor 38%, transparent); border-radius: 6px; font-size: 13px; font-weight: 500; color: inherit; background: transparent; cursor: pointer; } .ubc-file__label:hover { border-color: currentColor; } .ubc-file__in:focus-visible + .ubc-file__label { outline: 2px solid currentColor; outline-offset: 2px; } .ubc-file__hint, .ubc-file__msg { font-size: 13px; color: inherit; opacity: .7; } .ubc-file__msg:not(:empty) { opacity: .95; } @media (max-width: 600px) { .ubc-file { gap: 6px; } .ubc-file__hint { flex-basis: 100%; } } /* ---- CTA fallback for a host page that does not style .btn--cta ------------- Values measured off the Etch/ACSS rendering so the two hosts agree rather than merely both looking acceptable. Applied only when enhance.js has measured the button and found it unstyled (see adoptCta), so this can never fight a host that does style it. Hex first for old engines, oklch second to match ACSS exactly. */ .ubc-modal--bare .btn--cta { background: #F5C15B; background: oklch(0.85 0.141 83.971); color: #2E2E2E; color: oklch(0.25 0 0); border: 1px solid #F5C15B; border-color: oklch(0.85 0.141 83.971); border-radius: 100px; padding: 14px 25px; font-weight: 600; line-height: 1.2; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .ubc-modal--bare .btn--cta:hover { filter: brightness(0.95); }