/* ============================================================================ VHB Design-System Bridge Loads AFTER normalize.css → webflow.css → vegashb.webflow.css (precedence wf-4). Purpose: apply the approved design-system FOUNDATION globally to the migrated Webflow pages WITHOUT changing the DOM or layout: 1. Palette — navy anchor + teal primary, gold demoted to one restrained tone. 2. Type — single family (Inter), replacing Mukta / DM Sans / Bebas. 3. Controls — modern radius + accessible focus rings. Mechanism: Webflow's CSS is a variable system (semantic tokens reference `--base-color-*` primitives via var()). Redefining the primitives here recolors the entire cascade. This sheet is additive and load-order-scoped — removing the wf-4 fully reverts the site. ========================================================================== */ /* ---- 1. Palette: override Webflow primitives ------------------------------- Same specificity as Webflow's :root, but loaded later, so these win. Every semantic token that references these primitives recolors automatically. */ :root { /* Navy anchor (was #080331) — unified to the design-system navy. */ --base-color-brand--blue-dark: #0a1628; /* Teal primary — matches live exactly; re-asserted as the source of truth. */ --base-color-brand--brand-green: #6dbac2; --base-color-brand--brand-green-20: #6dbac233; --base-color-brand--sky-blue: #e1f1f3; /* Gold DEMOTED: collapse the bright bronze duplicates to one restrained tone so gold reads as a sparing accent, not a competing brand color. */ --golden: #cfa955; --new-golden: #cfa955; } /* ---- 2. Typography: single family (Inter) ---------------------------------- Inheritance from plus an explicit override on every text-bearing node. Icon-font elements (Webflow icons, FontAwesome) are excluded so glyphs survive. */ html, body, body :not([class*="w-icon"]):not([class*="fa-"]):not(.fa):not(.w-icon-dropdown-toggle):not([class*="icon"]) { font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif !important; } /* Re-assert icon fonts in case a broad match slipped through. */ [class*="w-icon"], .w-icon-dropdown-toggle { font-family: "webflow-icons" !important; } .fa, [class*=" fa-"], [class^="fa-"] { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important; } /* Display headings that used condensed Bebas: give Inter presence + tight tracking so the switch reads as intentional, not accidental. */ h1, h2, .h3-features, .display, [class*="display-heading"] { letter-spacing: -0.02em; font-weight: 700; } h1 { font-weight: 800; } .h3-features { font-weight: 800; letter-spacing: -0.01em; } /* Improve body legibility now that Inter (slightly wider) is the body face. */ body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- 3. Controls: modern radius + accessible focus ------------------------- */ .w-button, .button, button, input.w-input, select.w-select, textarea.w-textarea, .text-field, .form-input { border-radius: 0.625rem; } /* Visible keyboard focus (WCAG 2.4.7) — teal ring on every interactive control. */ a:focus-visible, button:focus-visible, .w-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #6dbac2; outline-offset: 2px; border-radius: 4px; } /* --------------------------------------------------------------------------- * Shared Places (New) autocomplete fields. * * The element replaces the original input visually, so it has to inherit the * Webflow field box exactly or the hero form visibly changes shape once Maps * finishes loading. * ------------------------------------------------------------------------- */ /* The real input stays in the DOM as the value carrier and form-serialization * source; it is only hidden while the autocomplete element stands in for it. * `display: none` would drop it from submission, so it is visually hidden but * still present and focusable-by-form. */ input.vhb-places-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .vhb-places-host { display: block; width: 100%; } gmp-place-autocomplete.vhb-places-el { display: block; width: 100%; box-sizing: border-box; /* Google derives the inner input's colours from the inherited scheme. These * forms sit on light cards, so pinning light prevents an unreadable black * input for visitors whose OS is in dark mode. */ color-scheme: light; background-color: #fff; border: 1px solid #d5dce3; border-radius: 0.625rem; font-family: inherit; } gmp-place-autocomplete.vhb-places-el:focus-within { outline: 2px solid #6dbac2; outline-offset: 2px; } /* --------------------------------------------------------------------------- * Prediction dropdown contrast + mobile usability. * * `gmp-place-autocomplete` (Places UI Kit / Places New) renders its input and * prediction list inside a shadow root. Per Google's current styling guidance * the RELIABLE, documented hooks on the element itself are the standard CSS * properties `color-scheme`, `background-color`, `color`, `border`, * `border-radius` and `font`. The Material design tokens (`--gmp-mat-*`) are * primarily a Places UI Kit theming surface and are NOT guaranteed to be honored * by the autocomplete element on every Maps channel — so they are applied here * only as progressive enhancement, never as the sole contrast guarantee. * * DESKTOP / DARK-MODE FIX (the load-bearing rule): this site runs a dark theme, * and without an explicit `color-scheme` the widget inherits `dark` and Google * renders low-contrast (grey-on-dark) predictions. Pinning `color-scheme: light` * forces Google's own readable light treatment for the input and the prediction * menu regardless of the surrounding page theme. This is the documented, * version-stable way to guarantee legible predictions and does not depend on the * `--gmp-mat-*` tokens taking effect. * ------------------------------------------------------------------------- */ gmp-place-autocomplete.vhb-places-el { /* Load-bearing: force Google's readable light rendering on our dark page. */ color-scheme: light; /* Documented standard-property hooks (reliable across channels). */ background-color: #ffffff; color: #10202b; /* ~15:1 on white */ border-radius: 8px; font: inherit; font-size: 1rem; /* Progressive enhancement: honored where the element consumes UI Kit tokens, * harmlessly ignored otherwise. Mirrors the color-scheme:light intent. */ --gmp-mat-color-surface: #ffffff; --gmp-mat-color-surface-container: #ffffff; --gmp-mat-color-on-surface: #10202b; /* primary line (street) */ --gmp-mat-color-on-surface-variant: #566470; /* secondary line, ~5.6:1 AA */ --gmp-mat-color-primary: #2f7d87; --gmp-mat-color-outline: #d5dce3; --gmp-mat-color-hover-menu-selection: #eef6f7; /* teal-tinted row hover */ --gmp-mat-font-family: inherit; } /* Explicit ::part() overrides for the prediction dropdown itself. * * `color-scheme: light` plus the `--gmp-mat-*` tokens above are the * documented, version-stable way to ask the element to render light — but * they are progressive enhancement, not a guarantee: on the render path that * actually shipped, the dropdown surface came back white while the * prediction text still inherited a dark-theme foreground color, leaving the * text effectively invisible on white. These ::part() rules set the * foreground/background directly on the exposed shadow parts so contrast * cannot depend on which token path the widget honors. */ gmp-place-autocomplete.vhb-places-el::part(prediction-list) { background-color: #ffffff; color: #111111; } gmp-place-autocomplete.vhb-places-el::part(prediction-item) { background-color: #ffffff; color: #111111; } gmp-place-autocomplete.vhb-places-el::part(prediction-item-selected) { background-color: #eef6f7; color: #111111; } gmp-place-autocomplete.vhb-places-el::part(prediction-item-main-text) { color: #111111; } gmp-place-autocomplete.vhb-places-el::part(prediction-item-secondary-text) { color: #4b5563; } gmp-place-autocomplete.vhb-places-el::part(prediction-item-match) { color: #111111; font-weight: 600; } gmp-place-autocomplete.vhb-places-el::part(prediction-item-nonmatch) { color: #111111; } /* MOBILE FIX: keep the field at >=16px so iOS Safari does not zoom on focus, and * give the tapped input a comfortable touch target. `font-size` on the host is * the reliable lever; `::part(input)` is best-effort where the element exposes * that part. */ @media (max-width: 640px) { gmp-place-autocomplete.vhb-places-el { font-size: 16px; min-height: 48px; --gmp-mat-font-body-large: 500 16px/24px inherit; --gmp-mat-font-body-medium: 400 15px/22px inherit; } gmp-place-autocomplete.vhb-places-el::part(input) { min-height: 48px; font-size: 16px; } }