/* static/css/request-demo.css
*
* (demo-form redesign 2026-08-26) Page-scoped skin for /request-demo. Every rule is gated on
* `.bim-demo[data-skin="modern"]`, which comes from the one attribute on the wrapper div in
* templates/request_demo.html -- delete that attribute and the page falls back to unstyled
* markup with no CSS change. That is the home skin's contract (templates/home.html:6-8,
* styles.css:8851-8856), and this is the second surface to adopt it.
* `tests/test_request_demo_skin_scope.py` fails if any rule here escapes the gate.
*
* Deliberately a separate sheet, not another block on the end of styles.css: that file is
* 9,088 lines / 261,938 bytes and is parsed on every page view, and asset_url() gives this one
* the same mtime+size cache-bust as the rest. Precedent for a page-scoped sheet in
* {% block head %}: templates/account.html:5-7, templates/business_domain_form.html:6-8.
*
* TOKENS, NOT LITERALS. Every colour that differs between themes is declared once on the gate
* below and overridden once in the dark block beneath it. The first draft of this sheet carried
* 70 colour literals and no custom property, which meant every dark value existed twice -- so a
* future token change would update the home skin and silently leave this page behind. Values are
* lifted from the home block in styles.css (radii :8952/:9011, the shadow pair :8954, the dark
* card triple :8978-8980, #163B8E :8873) so the two pages are one design.
*
* Both dark-mode conventions are carried because the app really emits both:
* static/js/theme-init.js adds `dark` to AND `dark-mode` to , and account.js's
* toggle writes the same pair. Dropping either would be the defect.
*/
.bim-demo[data-skin="modern"] {
--bim-demo-card-bg: #fff;
--bim-demo-card-border: rgba(15, 23, 42, .09);
--bim-demo-card-shadow: 0 1px 2px rgba(11, 26, 63, .05), 0 14px 34px rgba(11, 26, 63, .07);
--bim-demo-field-bg: #fff;
/* .34 rather than the .14 this sheet first shipped: at .14 the control boundary measured
1.31:1 against the card, and WCAG 2.2 SC 1.4.11 wants 3:1 for the visual boundary of a
user-interface component. */
--bim-demo-field-border: rgba(15, 23, 42, .34);
--bim-demo-field-text: #111827;
--bim-demo-label: #374151;
--bim-demo-muted: #6b7280;
--bim-demo-error: #b91c1c;
--bim-demo-notice: #4b5563;
--bim-demo-accent: #4c7ae0;
--bim-demo-accent-mid: #2f56b3;
--bim-demo-chip-bg: #fff;
--bim-demo-chip-on-bg: #dbeafe;
--bim-demo-chip-on-text: #1d4ed8;
--bim-demo-chip-on-border: #60a5fa;
--bim-demo-panel-bg: #f9fafb;
--bim-demo-panel-tint: linear-gradient(135deg, rgba(22, 59, 142, .05), rgba(143, 169, 232, .10));
--bim-demo-popup-shadow: 0 18px 44px rgba(11, 26, 63, .18);
--bim-demo-option-hover: rgba(76, 122, 224, .14);
}
.dark .bim-demo[data-skin="modern"],
body.dark-mode .bim-demo[data-skin="modern"] {
--bim-demo-card-bg: #131c2e;
--bim-demo-card-border: rgba(255, 255, 255, .10);
--bim-demo-card-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .42);
--bim-demo-field-bg: #0f172a;
--bim-demo-field-border: rgba(255, 255, 255, .34);
--bim-demo-field-text: #f3f4f6;
--bim-demo-label: #d1d5db;
--bim-demo-muted: #9ca3af;
--bim-demo-error: #f87171;
--bim-demo-notice: #9ca3af;
--bim-demo-chip-bg: #0f172a;
/* The light pair inverted rather than inherited: leaving --bim-demo-chip-on-text at #1d4ed8
over a dark surface measured 1.21:1, a WCAG 1.4.3 failure, because the .dark option rule
wins on specificity for `color` while the selected background survives. */
--bim-demo-chip-on-bg: rgba(76, 122, 224, .22);
--bim-demo-chip-on-text: #dbeafe;
--bim-demo-chip-on-border: #4c7ae0;
--bim-demo-panel-bg: #1f2937;
--bim-demo-panel-tint: linear-gradient(135deg, rgba(47, 86, 179, .14), rgba(19, 28, 46, .6));
--bim-demo-popup-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
.bim-demo[data-skin="modern"] .bim-demo__shell {
/* A deliberate departure from --bim-page-shell-max (styles.css:448-463, "single source of
truth for the body max width"): that token is min(1600px, ...) for full-bleed app pages,
and this is a two-column form that reads badly wider than ~1120px. */
max-width: 1120px;
padding-top: clamp(24px, 3.4vw, 52px);
padding-bottom: clamp(28px, 4vw, 60px);
}
.bim-demo[data-skin="modern"] .bim-demo__title {
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 650;
letter-spacing: -.022em;
line-height: 1.08;
text-align: center;
margin-bottom: clamp(18px, 2.2vw, 28px);
}
.bim-demo[data-skin="modern"] .bim-demo__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(20px, 2.4vw, 34px);
align-items: start;
}
/* One column until there is room for the panel to sit beside the form rather than under it.
1024px matches Tailwind's `lg`, which the rest of the app breaks at (tailwind.config.js
overrides only `colors`, so the default screens are in force). */
@media (min-width: 1024px) {
.bim-demo[data-skin="modern"] .bim-demo__grid {
grid-template-columns: 7fr 5fr;
}
}
/* Form card ---------------------------------------------------------------- */
.bim-demo[data-skin="modern"] .bim-demo__card {
background: var(--bim-demo-card-bg);
border: 1px solid var(--bim-demo-card-border);
border-radius: 16px;
padding: clamp(20px, 2.3vw, 30px);
box-shadow: var(--bim-demo-card-shadow);
}
.bim-demo[data-skin="modern"] .bim-demo__row {
margin-bottom: 16px;
}
.bim-demo[data-skin="modern"] .bim-demo__row--split {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 640px) {
.bim-demo[data-skin="modern"] .bim-demo__row--split {
grid-template-columns: 1fr 1fr;
}
}
/* Fields ------------------------------------------------------------------- */
.bim-demo[data-skin="modern"] .bim-demo__label {
display: block;
font-size: 13px;
font-weight: 600;
letter-spacing: -.006em;
margin-bottom: 6px;
color: var(--bim-demo-label);
}
.bim-demo[data-skin="modern"] .bim-demo__label--sub {
font-size: 12px;
font-weight: 500;
color: var(--bim-demo-muted);
}
/* No placeholders anywhere on this form: every field carries a visible label, and a grey hint
inside the box is one more thing to read past. */
.bim-demo[data-skin="modern"] .bim-demo__input {
width: 100%;
padding: 11px 13px;
font-size: 15px;
line-height: 1.4;
color: var(--bim-demo-field-text);
background: var(--bim-demo-field-bg);
border: 1px solid var(--bim-demo-field-border);
border-radius: 10px;
transition: border-color .18s ease, box-shadow .18s ease;
}
/* The ring is ADDED to the app-wide focus outline, never in place of it. An earlier draft set
`outline: none` here, which deleted the indicator styles.css:367-383 scopes to this form via
--request-demo-focus-color -- including on the submit control, which is an
and therefore still matches `.request-demo-form input:focus`. */
.bim-demo[data-skin="modern"] .bim-demo__input:focus {
border-color: var(--bim-demo-accent);
box-shadow: 0 0 0 3px rgba(76, 122, 224, .20);
}
.bim-demo[data-skin="modern"] .bim-demo__select {
/* Keeps the native chevron: the old w-1/3 appearance-none selector read as a pre-filled
text box, which is why visitors left it on the default and submitted undiallable
numbers. Anything that replaces this control must keep an equivalent affordance. */
padding-right: 10px;
}
/* The country filter sits BELOW the native