/* ============================================================ broadband.click — design tokens Adapter layer. This is the ONLY file permitted to mention --e-global-color-* or an Elementor V4 variable label. Plugin CSS consumes bare var(--bbc-*) with no fallbacks. Declared on `body` deliberately — see comment above. ============================================================ */ body { /* ---- 1. Brand: V4 Variable label -> V3 system colour -> literal ---- */ /* Literal brightened from #A4004B (12 Aug 2026, owner asked for a more cheerful feel): same raspberry family, one step sunnier. White text on it is 5.5:1, comfortably past AA. */ --bbc-brand-primary: var(--brand-signal, var(--e-global-color-primary, #C2185B)); --bbc-brand-secondary: var(--brand-ink, var(--e-global-color-text, #1A1917)); --bbc-brand-accent: var(--brand-signal-deep, var(--e-global-color-accent, #6E0034)); --bbc-brand-muted: var(--brand-muted, var(--e-global-color-secondary, #6F675C)); --bbc-brand-paper: var(--brand-paper, #FAF8F5); --bbc-brand-line: var(--brand-line, #847B6E); /* ---- 2. Warm neutral ramp (NOT exposed to Elementor) ---- */ --bbc-grey-100: #FAF8F5; --bbc-grey-200: #F1EDE7; --bbc-grey-300: #E7E2DA; --bbc-grey-400: #D3CBBF; --bbc-grey-500: #A79E90; /* decorative fills only — never text */ --bbc-grey-600: #847B6E; /* border-strong, >=3:1 on all light surfaces */ --bbc-grey-700: #6F675C; /* muted text, >=4.5:1 on all light surfaces */ --bbc-grey-800: #453F37; --bbc-grey-900: #1A1917; --bbc-white: #FFFFFF; /* ---- 2b. Cheer ramp — decorative accent family ---- For provider tiles, the search hero and small flourishes. Each pair is a deep fg on a pale bg, AA on its own tint and on paper. These are DECORATIVE: never the sole carrier of state (the semantic set below owns that) and never applied to the Ad label. */ --bbc-fun-rose-fg: #A31355; --bbc-fun-rose-bg: #FBE3EE; --bbc-fun-teal-fg: #0B6B66; --bbc-fun-teal-bg: #D8F3EF; --bbc-fun-amber-fg: #8A5A00; --bbc-fun-amber-bg: #FFEFCB; --bbc-fun-violet-fg: #5B3FB5; --bbc-fun-violet-bg: #E9E4FB; --bbc-fun-green-fg: #23713B; --bbc-fun-green-bg: #DEF2E0; --bbc-fun-sky-fg: #155E94; --bbc-fun-sky-bg: #DDEFFA; --bbc-hero-grad: linear-gradient(135deg, var(--bbc-fun-rose-bg), var(--bbc-fun-teal-bg)); /* ---- 3. Semantic (NOT exposed to Elementor — compliance-critical) ---- */ --bbc-avail-fg: #14622C; --bbc-avail-bg: #E6F0E7; --bbc-partial-fg: #6E4400; --bbc-partial-bg: #FBEEDA; --bbc-unavail-fg: #6F675C; --bbc-unavail-bg: #F1EDE7; --bbc-error-fg: #A11414; --bbc-error-bg: #FDECEC; --bbc-hatch: repeating-linear-gradient(45deg, transparent 0 3px, rgba(110,68,0,.14) 3px 4px); /* ---- 4. Surfaces / text / borders (light) ---- */ --bbc-bg: var(--bbc-grey-100); --bbc-surface: var(--bbc-white); --bbc-surface-2: var(--bbc-grey-200); --bbc-border: var(--bbc-grey-300); /* decorative dividers only */ --bbc-border-strong: var(--bbc-brand-line); /* anything a user must perceive */ --bbc-text: var(--bbc-brand-secondary); --bbc-text-muted: var(--bbc-grey-700); --bbc-text-invert: var(--bbc-grey-100); /* ---- 5. Component tokens (indirection = retheme grid without touching chrome) ---- */ --bbc-card-bg: var(--bbc-surface); /* Was --bbc-border-strong (#847B6E). A 3:1 border on every card at once read as heavy and muddy rather than considered — strong borders earn their contrast by being rare. Cards now sit on a light hairline plus a soft shadow; the strong value is still used where a user must perceive a boundary (inputs, the availability chips, focus). */ --bbc-card-border: var(--bbc-grey-300); --bbc-card-border-hover: var(--bbc-grey-500); /* Tint the accent into the shadow rather than using neutral black, so elevation reads as part of the palette instead of a grey wash. */ --bbc-shadow-card: 0 1px 2px rgba(58,32,42,.05), 0 2px 6px rgba(58,32,42,.04); --bbc-shadow-card-hover: 0 2px 4px rgba(58,32,42,.07), 0 8px 20px rgba(58,32,42,.07); --bbc-best-ring: 0 0 0 2px var(--bbc-brand-primary); --bbc-cta-bg: var(--bbc-brand-primary); --bbc-cta-bg-hover: var(--bbc-brand-accent); --bbc-cta-fg: #FFFFFF; --bbc-link: var(--bbc-brand-primary); --bbc-link-visited: var(--bbc-brand-accent); /* Ad label: hardcoded on purpose. NOT wired to any Elementor variable — the owner must not be able to make a legally required disclosure faint. */ --bbc-ad-bg: #1A1917; --bbc-ad-fg: #FAF8F5; /* 16.57:1 */ /* ---- 6. Type ---- */ --bbc-font-sans: "Inter var","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --bbc-font-serif: "Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif; --bbc-text-2xs: 0.75rem; --bbc-lh-2xs: 1.45; --bbc-text-xs: 0.8125rem; --bbc-lh-xs: 1.4; --bbc-text-sm: 0.875rem; --bbc-lh-sm: 1.45; --bbc-text-base:1rem; --bbc-lh-base:1.55; --bbc-text-md: 1.125rem; --bbc-lh-md: 1.7; --bbc-text-lg: 1.3125rem; --bbc-lh-lg: 1.3; --bbc-text-xl: 1.625rem; --bbc-lh-xl: 1.25; --bbc-text-2xl: 2.125rem; --bbc-lh-2xl: 1.18; --bbc-text-3xl: 2.75rem; --bbc-lh-3xl: 1.1; --bbc-price: 2rem; --bbc-lh-price: 1; --bbc-weight-regular: 400; --bbc-weight-medium: 500; --bbc-weight-semi: 600; --bbc-weight-bold: 700; --bbc-measure: 68ch; /* ---- 7. Spacing (4px base) ---- */ --bbc-space-1: 0.25rem; --bbc-space-2: 0.5rem; --bbc-space-3: 0.75rem; --bbc-space-4: 1rem; --bbc-space-5: 1.5rem; --bbc-space-6: 2rem; --bbc-space-7: 3rem; --bbc-space-8: 4rem; --bbc-space-9: 6rem; --bbc-tap-min: 2.75rem; /* 44px for primary controls; 24px is the AA floor */ /* ---- 8. Radius ---- Pills remain banned — a fully-rounded badge reads as a promo sticker. But the original 2px/4px was severe rather than restrained, and it was doing most of the work in making the page feel dated. Raised to a contemporary scale that is still visibly not a pill. */ --bbc-radius-0: 0; --bbc-radius-1: 5px; /* chips, inputs, buttons */ --bbc-radius-2: 10px; /* cards, panels */ --bbc-radius-3: 14px; /* the results container */ /* ---- 9. Elevation — borders, not shadows. Shadow for overlays only. ---- */ --bbc-shadow-0: none; --bbc-shadow-1: 0 1px 2px rgba(26,25,23,.08), 0 2px 8px rgba(26,25,23,.06); --bbc-focus-ring: 0 0 0 2px #FAF8F5, 0 0 0 5px #1A1917; /* ---- 10. Motion ---- */ --bbc-ease: cubic-bezier(.2,0,.2,1); --bbc-dur-1: 120ms; --bbc-dur-2: 200ms; } /* ============================================================ DARK THEME — tokens ship now, activation deferred. Opt-in only via [data-bbc-theme="dark"]. Do NOT enable the prefers-color-scheme block until Elementor-built heroes and city pages can follow: Elementor 4.2.2 emits zero prefers-color-scheme rules on the frontend and each V4 Variable holds exactly one value, so the page furniture would stay light while the results grid went dark. ============================================================ */ [data-bbc-theme="dark"] { color-scheme: dark; --bbc-bg: #191712; --bbc-surface: #211E18; --bbc-surface-2: #2B2820; --bbc-border: #332F27; --bbc-border-strong: #7E7565; --bbc-text: #F2EEE7; --bbc-text-muted: #B5AC9F; --bbc-text-invert: #191712; --bbc-brand-primary: #FF7FAC; --bbc-brand-accent: #FFA9C6; /* Cheer ramp, dark: same hues, inverted weight — pale fg on deep bg. */ --bbc-fun-rose-fg: #FFB1CF; --bbc-fun-rose-bg: #3C1526; --bbc-fun-teal-fg: #7ADCD3; --bbc-fun-teal-bg: #0F2C29; --bbc-fun-amber-fg: #F5C86B; --bbc-fun-amber-bg: #33260C; --bbc-fun-violet-fg: #C3B2F5; --bbc-fun-violet-bg: #241B40; --bbc-fun-green-fg: #8FD9A3; --bbc-fun-green-bg: #14301C; --bbc-fun-sky-fg: #8CC8F0; --bbc-fun-sky-bg: #10283A; --bbc-hero-grad: linear-gradient(135deg, #3C1526, #0F2C29); --bbc-cta-bg: #FF7FAC; --bbc-cta-bg-hover: #FFA9C6; --bbc-cta-fg: #191712; --bbc-link: #FF7FAC; --bbc-link-visited: #FFA9C6; --bbc-avail-fg: #79D394; --bbc-avail-bg: #17301D; --bbc-partial-fg: #F0BC61; --bbc-partial-bg: #2E2412; --bbc-unavail-fg: #B5AC9F; --bbc-unavail-bg: #26231D; --bbc-error-fg: #FF8A8A; --bbc-error-bg: #2C1616; --bbc-hatch: repeating-linear-gradient(45deg, transparent 0 3px, rgba(240,188,97,.18) 3px 4px); --bbc-ad-bg: #F2EEE7; --bbc-ad-fg: #191712; /* 15.49:1 */ /* On dark, elevation cannot come from shadow — a darker shadow on a dark ground is invisible. Separation comes from the surface step and a slightly lighter hairline instead. */ --bbc-card-border: #3A352C; --bbc-card-border-hover: #5C5446; --bbc-shadow-card: none; --bbc-shadow-card-hover: none; --bbc-best-ring: 0 0 0 2px var(--bbc-brand-primary); --bbc-shadow-1: none; /* invisible on dark; use surface-2 */ --bbc-focus-ring: 0 0 0 2px #191712, 0 0 0 5px #F2EEE7; } /* [data-bbc-theme="light"] must exist so the toggle wins in BOTH directions once the media query below is enabled. */ [data-bbc-theme="light"] { color-scheme: light; } /* @media (prefers-color-scheme: dark) { :root:not([data-bbc-theme="light"]) { … } } */ /* Cheap Ofcom win: scoped high-contrast over the results grid only. */ [data-bbc-contrast="high"] { --bbc-text-muted: var(--bbc-grey-900); --bbc-border: var(--bbc-grey-600); --bbc-border-strong: var(--bbc-grey-900); --bbc-surface-2: var(--bbc-white); } @media (prefers-reduced-motion: reduce) { body { --bbc-dur-1: 0ms; --bbc-dur-2: 0ms; } } @media (forced-colors: active) { .bbc-chip, .bbc-deal, .bbc-cta { border: 1px solid CanvasText; } .bbc-chip__icon { forced-color-adjust: auto; fill: none; stroke: CanvasText; } .bbc-chip--partial { background-image: none; } /* hatch is lost; text + shape carry it */ }