@charset "UTF-8";
/* ==========================================================================
BRAND LOGIC — design-system.css
Modernization layer for brandlogic.co (WordPress + Bridge 16.7 + bridge-child)
Plain CSS. No build step. No preprocessor. No JS dependency.
Enqueue AFTER: default_style, stylesheet.min, style_dynamic, responsive.min,
style_dynamic_responsive, custom_css, childstyle, formidable-css.
--------------------------------------------------------------------------
HOW TO SCOPE IT (required — read this first)
--------------------------------------------------------------------------
1. Add the class `blx` to via the `body_class` filter.
This is the single namespace hook. It makes every selector below at least
(0,2,0) specific, which beats virtually all of Bridge's own selectors
without !important.
2. Wrap the converted post content in
…
.
`.blx-content` owns `overflow-x: clip`, which is what guarantees no
horizontal scroll at 360px when a full-bleed section uses 100vw.
3. Put `blx` on each component root too (e.g. class="blx blx-section").
Harmless duplication; it keeps components styled even if the body class
is ever dropped by another plugin.
DELIBERATELY NOT USED: @layer. A layered stylesheet loses the cascade to
UNlayered author CSS regardless of source order, so wrapping this file in
@layer would hand every conflict back to Bridge. Specificity is the tool here.
--------------------------------------------------------------------------
FONT STRATEGY (replaces the current ~40-file Raleway 100–900 + Lato 100–900)
--------------------------------------------------------------------------
Ship exactly THREE faces. Dequeue Bridge's `google_fonts` handle and enqueue:
https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Raleway:wght@600&display=swap
In wp_head, before that stylesheet:
Lato 400/700 = body + UI + buttons. Raleway 600 = display/headings only.
That is the whole typographic system; every other weight the old site
downloaded was unused. Keeps the site visually continuous with today's
Brand Logic while cutting ~90% of the font payload.
ZERO-REQUEST ALTERNATIVE (if you want no third-party font call at all —
GDPR-friendly, and this site already runs a GDPR plugin): comment out the
two `--blx-font-*` values in :root and uncomment the system-stack pair
directly beneath them. Nothing else in this file changes.
--------------------------------------------------------------------------
COLOR TOKENS + MEASURED CONTRAST (WCAG 2.2)
Every ratio below was computed, not estimated. Normal text needs 4.5:1,
large text (>=24px, or >=18.66px bold) needs 3:1, UI component boundaries
and focus indicators need 3:1 (SC 1.4.11).
--------------------------------------------------------------------------
NAVY RAMP (brand). --blx-navy-600 IS the legacy #3d507b, unchanged.
--blx-navy-800 IS the legacy button-hover #233253, unchanged.
50 #F2F5FB · 100 #E3E9F4 · 200 #C6D0E6 · 300 #9DABCE · 400 #7183AF
500 #4E6191 · 600 #3D507B · 700 #33436A · 800 #233253 · 900 #182338
NEUTRAL RAMP (cool-tinted, sits under the navy without going muddy)
25 #FAFBFD · 50 #F4F6FA · 100 #EAEDF3 · 200 #DBE0E9 · 300 #BFC7D4
400 #98A2B3 · 500 #6B7687 · 600 #515B6B · 700 #3B4553 · 800 #252D39
900 #161C25 · 950 #0E1218
ACCENT (one, warm — read as the glow of the lightbulb in the wordmark)
100 #FDF0D6 · 300 #FBD38A · 400 #F5B942 · 500 #E09A12
600 #B87508 · 700 #8E5A07 · 800 #68410A
TEXT PAIRS — MEASURED
ink (#252D39) on white ................................ 13.88:1 AAA
ink on surface-alt (#FAFBFD) .......................... 13.40:1 AAA
ink on tint (#F4F6FA) ................................. 12.83:1 AAA
ink on navy tint (#F2F5FB) ............................ 12.71:1 AAA
ink-muted (#515B6B) on white .......................... 6.87:1 AA
ink-muted on tint (#F4F6FA) ........................... 6.35:1 AA
ink-subtle (#6B7687) on white ......................... 4.60:1 AA
heading navy-800 (#233253) on white ................... 12.71:1 AAA
heading navy-800 on tint (#F4F6FA) .................... 11.74:1 AAA
link navy-600 (#3D507B) on white ...................... 7.98:1 AAA
link navy-600 on tint (#F4F6FA) ....................... 7.37:1 AAA
link navy-600 on navy tint (#F2F5FB) .................. 7.31:1 AAA
link hover navy-800 on white .......................... 12.71:1 AAA
white on navy-600 (btn primary rest) ................. 7.98:1 AAA
white on navy-700 (btn primary hover) ................ 9.76:1 AAA
white on navy-800 (btn primary active) ............... 12.71:1 AAA
white on navy-900 (dark section) ..................... 15.71:1 AAA
navy-200 on navy-900 (dark section muted) ............. 10.15:1 AAA
navy-300 on navy-900 (dark section subtle) ............ 6.85:1 AA
white on neutral-900 (#161C25, footer headings) ....... 17.12:1 AAA
neutral-300 on neutral-900 (footer body) .............. 10.05:1 AAA
neutral-400 on neutral-900 (footer meta, >=14px) ...... 6.65:1 AA
neutral-300 on neutral-950 (footer bottom bar) ........ 11.03:1 AAA
accent-700 (#8E5A07) on white (accent text) ........... 5.81:1 AA
accent-800 on accent-100 (badge) ...................... 7.92:1 AAA
neutral-900 on accent-400 (featured badge) ............ 9.70:1 AAA
error (#B3261E) on white .............................. 6.54:1 AA
error on error tint (#FDECEA) ......................... 5.72:1 AA
success (#166534) on white ............................ 7.13:1 AAA
warning (#7A4A05) on white ............................ 7.48:1 AAA
NON-TEXT / UI BOUNDARIES + FOCUS — MEASURED (need 3:1)
--blx-border-strong (#808A9A) vs white ................ 3.49:1 PASS
--blx-border-strong vs tint (#F4F6FA) ................. 3.22:1 PASS
^ this is the input/select/textarea/checkbox border. Formidable ships
#cccccc (1.60:1) and a #66afe9 focus ring (2.10:1) — BOTH FAIL 1.4.11.
Fixed below by overriding Formidable's own custom properties.
form placeholder --blx-ink-subtle (#6B7687) on white .. 4.60:1 PASS
^ Formidable ships #A1A1A1 (2.58:1) and the /inquire/ form uses the
placeholder as its only visible label. Fixed in §8.
focus ring navy-600 vs white .......................... 7.98:1 PASS
focus ring navy-600 vs tint ........................... 7.37:1 PASS
focus ring white vs navy-900 (dark sections) .......... 15.71:1 PASS
focus ring accent-400 vs navy-900 ..................... 8.91:1 PASS
primary button surface navy-600 vs white .............. 7.98:1 PASS
accent-400 rule under title band vs navy-700 .......... 5.53:1 PASS
accent-400 rule atop footer vs neutral-900 ............ 9.70:1 PASS
--blx-border (#DBE0E9) vs white ....................... 1.32:1 DECORATIVE ONLY.
Used for card/section hairlines. A card is not a UI control, and every
card is also separated by a background delta + shadow, so 1.4.11 does
not apply. It is never the sole indicator of an interactive control.
TEXT-OVER-IMAGE — MEASURED AT WORST CASE (a pure white photograph behind)
hero panel = navy-900 @ 0.88 -> composites to #343D50
white title/body ................................... 10.88:1 AAA
navy-200 lede ...................................... 7.03:1 AAA
media section veil = navy-900 @ 0.80 (weakest gradient stop) -> #464F60
white text ......................................... 8.24:1 AAA
navy-200 muted / subtle ............................ 5.32:1 AA
accent-300 eyebrow ................................. 5.80:1 AA
work-card hover scrim = neutral-950 @ 0.80 -> #3E4146
white label ........................................ 10.25:1 AAA
Because the floor is computed against WHITE, any photo the client uploads
passes. No per-image checking is ever needed.
NOT A DEFECT, FOR THE RECORD:
--text-color-disabled (#6B7687) on --bg-color-disabled (#F4F6FA) is
4.25:1. WCAG 2.2 SC 1.4.3 and 1.4.11 both explicitly exempt disabled /
inactive controls, so this is compliant as shipped.
--------------------------------------------------------------------------
REGISTER OF !important — every use, and why it is forced
--------------------------------------------------------------------------
32 declarations across 16 rules — the complete list, audited against the
file. Bridge (or an inline style attribute) already uses !important on each
of these, so there is no non-!important way to win. Nothing else uses it.
1. .title / .title_holder / .title_outer height, and .title_holder
padding-block
FORCED BY: inline style="height:300px" and style="padding-top:0"
printed by Bridge's template, AND Bridge JS re-writes that inline
height from the [data-height] attribute on every resize.
2. .title background-color
FORCED BY: inline style="background-color:#3d507b" on .title.
3. header.sticky .header_bottom background-color
FORCED BY: stylesheet.min.css `background-color:#fff!important`
AND style_dynamic.css `background-color:rgba(255,255,255,1)!important`.
4. header.fixed.scrolled .header_bottom background-color
FORCED BY: style_dynamic.css `rgba(255,255,255,0.9)!important`.
5. .header_bottom background-color inside the mobile media query
FORCED BY: responsive.min.css `background-color:#fff!important`.
6. .q_logo a / .q_logo img height
FORCED BY: style_dynamic.css `height:30px!important` (printed twice).
7. .blx-work-grid--bridge .projects_holder article opacity
FORCED BY: stylesheet.min.css `opacity:0!important` on
`.projects_holder_outer:not(.masonry_with_space) .projects_holder
.portfolio_one_by_one article`. Bridge's JS adds `.show` to reveal
them; if that JS does not run the grid is invisible. See §9.
8. .blx-work-grid--bridge .text_holder on touch devices
FORCED BY: stylesheet.min.css `.touch .projects_holder article
span.text_holder{display:none!important;height:0!important;…}` —
which is why project titles vanish on phones today.
9. prefers-reduced-motion overrides (standard practice; must outrank
Bridge's own transition declarations, several of which are !important).
10. .blx-sr-only position
Standard visually-hidden pattern — must beat any positioning a theme
or plugin puts on the element it is applied to.
11. .blx-section background inside @media print
Must beat the element's own --blx-section-bg and any legacy inline
background so photo-backed sections do not waste toner.
--------------------------------------------------------------------------
COLOR SCHEME: this file commits to LIGHT ONLY. See §11 for the rationale
and the explicit background painting that goes with that commitment.
========================================================================== */
/* ==========================================================================
§1 TOKENS
========================================================================== */
:root {
/* ---- Brand navy ramp -------------------------------------------------- */
--blx-navy-50: #F2F5FB;
--blx-navy-100: #E3E9F4;
--blx-navy-200: #C6D0E6;
--blx-navy-300: #9DABCE;
--blx-navy-400: #7183AF;
--blx-navy-500: #4E6191;
--blx-navy-600: #3D507B; /* legacy brand navy — unchanged */
--blx-navy-700: #33436A;
--blx-navy-800: #233253; /* legacy button hover — unchanged */
--blx-navy-900: #182338;
/* ---- Neutrals (cool) -------------------------------------------------- */
--blx-n-0: #FFFFFF;
--blx-n-25: #FAFBFD;
--blx-n-50: #F4F6FA;
--blx-n-100: #EAEDF3;
--blx-n-200: #DBE0E9;
--blx-n-300: #BFC7D4;
--blx-n-400: #98A2B3;
--blx-n-500: #6B7687;
--blx-n-600: #515B6B;
--blx-n-700: #3B4553;
--blx-n-800: #252D39;
--blx-n-900: #161C25;
--blx-n-950: #0E1218;
/* ---- Accent (lightbulb warmth) ---------------------------------------- */
--blx-accent-100: #FDF0D6;
--blx-accent-300: #FBD38A;
--blx-accent-400: #F5B942;
--blx-accent-500: #E09A12;
--blx-accent-600: #B87508;
--blx-accent-700: #8E5A07;
--blx-accent-800: #68410A;
/* ---- Status ----------------------------------------------------------- */
--blx-success: #166534;
--blx-warning: #7A4A05;
--blx-error: #B3261E;
--blx-error-bg: #FDECEA;
--blx-success-bg: #E8F5EC;
/* ---- Semantic surfaces ------------------------------------------------ */
--blx-surface: var(--blx-n-0);
--blx-surface-alt: var(--blx-n-25);
--blx-surface-tint: var(--blx-n-50);
--blx-surface-brand: var(--blx-navy-50);
--blx-surface-dark: var(--blx-navy-900);
--blx-surface-footer: var(--blx-n-900);
--blx-surface-footer-bottom: var(--blx-n-950);
/* ---- Semantic text ---------------------------------------------------- */
--blx-ink: var(--blx-n-800); /* 13.88:1 on white */
--blx-ink-heading: var(--blx-navy-800);/* 12.71:1 on white */
--blx-ink-muted: var(--blx-n-600); /* 6.87:1 on white */
--blx-ink-subtle: var(--blx-n-500); /* 4.60:1 on white — >=14px only */
--blx-ink-on-dark: var(--blx-n-0);
--blx-ink-on-dark-muted: var(--blx-navy-200);
--blx-ink-on-dark-subtle: var(--blx-navy-300);
--blx-ink-on-footer: var(--blx-n-300);
--blx-ink-on-footer-meta: var(--blx-n-400);
/* ---- Semantic interactive --------------------------------------------- */
--blx-link: var(--blx-navy-600);
--blx-link-hover: var(--blx-navy-800);
--blx-focus: var(--blx-navy-600);
--blx-focus-on-dark: var(--blx-n-0);
/* ---- Borders / hairlines ---------------------------------------------- */
--blx-border: var(--blx-n-200); /* decorative hairline, 1.32:1 */
--blx-border-subtle: var(--blx-n-100);
--blx-border-strong: #808A9A; /* control boundary, 3.49:1 — AA */
--blx-border-brand: var(--blx-navy-600);
--blx-border-on-dark: rgba(255, 255, 255, 0.18);
--blx-hairline: 1px;
/* ---- Type ------------------------------------------------------------- */
--blx-font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--blx-font-display: "Raleway", "Lato", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* ZERO-REQUEST ALTERNATIVE — swap the two values above for these two:
--blx-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--blx-font-display: ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
*/
--blx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", monospace;
--blx-fw-regular: 400;
--blx-fw-bold: 700;
--blx-fw-display: 600;
/* Fluid type scale: 360px viewport -> 1280px viewport, then locked. */
--blx-fs-xs: clamp(0.8125rem, 0.788rem + 0.1087vw, 0.875rem); /* 13->14 */
--blx-fs-sm: clamp(0.875rem, 0.8505rem + 0.1087vw, 0.9375rem); /* 14->15 */
--blx-fs-base: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem); /* 16->18 */
--blx-fs-md: clamp(1.0625rem, 0.9891rem + 0.3261vw, 1.25rem); /* 17->20 */
--blx-fs-lg: clamp(1.1875rem, 1.0900rem + 0.4348vw, 1.4375rem); /* 19->23 */
--blx-fs-xl: clamp(1.3125rem, 1.1660rem + 0.6522vw, 1.6875rem); /* 21->27 */
--blx-fs-2xl: clamp(1.5625rem, 1.3420rem + 0.9783vw, 2.125rem); /* 25->34 */
--blx-fs-3xl: clamp(1.8125rem, 1.4460rem + 1.6300vw, 2.75rem); /* 29->44 */
--blx-fs-4xl: clamp(2.0625rem, 1.5000rem + 2.5000vw, 3.5rem); /* 33->56 */
--blx-fs-5xl: clamp(2.3125rem, 1.5540rem + 3.3700vw, 4.25rem); /* 37->68 */
--blx-lh-tight: 1.12;
--blx-lh-snug: 1.22;
--blx-lh-heading: 1.3;
--blx-lh-body: 1.65;
--blx-lh-relaxed: 1.75;
--blx-ls-tight: -0.02em;
--blx-ls-snug: -0.01em;
--blx-ls-normal: 0;
--blx-ls-wide: 0.04em;
--blx-ls-caps: 0.09em; /* for uppercase eyebrows / buttons */
--blx-measure: 68ch; /* prose line length cap */
--blx-measure-tight: 46ch;
/* ---- Spacing (4px base) ----------------------------------------------- */
--blx-space-0: 0;
--blx-space-1: 0.25rem; /* 4 */
--blx-space-2: 0.5rem; /* 8 */
--blx-space-3: 0.75rem; /* 12 */
--blx-space-4: 1rem; /* 16 */
--blx-space-5: 1.25rem; /* 20 */
--blx-space-6: 1.5rem; /* 24 */
--blx-space-8: 2rem; /* 32 */
--blx-space-10: 2.5rem; /* 40 */
--blx-space-12: 3rem; /* 48 */
--blx-space-16: 4rem; /* 64 */
--blx-space-20: 5rem; /* 80 */
--blx-space-24: 6rem; /* 96 */
--blx-space-32: 8rem; /* 128 */
/* Fluid spacing */
--blx-space-gutter: clamp(1.25rem, 0.9565rem + 1.304vw, 2rem); /* 20->32 */
--blx-space-fluid-md: clamp(1.5rem, 1.1090rem + 1.739vw, 2.5rem); /* 24->40 */
--blx-space-fluid-lg: clamp(2rem, 1.2170rem + 3.478vw, 4rem); /* 32->64 */
--blx-space-section: clamp(3rem, 1.6300rem + 6.087vw, 6.5rem); /* 48->104 */
--blx-space-section-lg: clamp(4rem, 2.0430rem + 8.696vw, 9rem); /* 64->144 */
/* ---- Radii ------------------------------------------------------------ */
--blx-radius-xs: 3px;
--blx-radius-sm: 5px;
--blx-radius-md: 8px;
--blx-radius-lg: 14px;
--blx-radius-xl: 20px;
--blx-radius-pill: 999px;
/* ---- Elevation -------------------------------------------------------- */
--blx-shadow-xs: 0 1px 2px rgba(22, 28, 37, 0.06);
--blx-shadow-sm: 0 1px 2px rgba(22, 28, 37, 0.05),
0 2px 6px rgba(22, 28, 37, 0.05);
--blx-shadow-md: 0 2px 4px rgba(22, 28, 37, 0.05),
0 8px 20px rgba(22, 28, 37, 0.08);
--blx-shadow-lg: 0 4px 8px rgba(22, 28, 37, 0.05),
0 18px 42px rgba(22, 28, 37, 0.12);
--blx-shadow-brand: 0 6px 20px rgba(61, 80, 123, 0.22);
--blx-shadow-header: 0 1px 0 rgba(22, 28, 37, 0.08),
0 6px 20px rgba(22, 28, 37, 0.07);
/* ---- Containers ------------------------------------------------------- */
--blx-container-sm: 44rem; /* 704 — prose-first pages */
--blx-container-md: 60rem; /* 960 */
--blx-container: 73.75rem;/* 1180 — default content width */
--blx-container-lg: 87.5rem; /* 1400 — work grid, wide media */
/* ---- Motion ----------------------------------------------------------- */
--blx-ease: cubic-bezier(0.2, 0, 0.2, 1);
--blx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--blx-dur-fast: 120ms;
--blx-dur: 200ms;
--blx-dur-slow: 340ms;
--blx-transition: var(--blx-dur) var(--blx-ease);
/* ---- Focus ring ------------------------------------------------------- */
--blx-focus-width: 3px;
--blx-focus-offset: 2px;
/* ---- Overlays (ratios proven against a pure-white photo) -------------- */
--blx-scrim-hero: rgba(24, 35, 56, 0.88); /* -> 10.88:1 white text */
--blx-scrim-media: rgba(24, 35, 56, 0.80); /* -> 8.24:1 white text */
--blx-scrim-card: rgba(14, 18, 24, 0.80); /* -> 10.25:1 white text */
/* ---- Component-level knobs PHP may set inline ------------------------- */
--blx-section-py: var(--blx-space-section);
--blx-section-bg: var(--blx-surface);
--blx-section-image: none;
--blx-spacer-h: var(--blx-space-8);
--blx-span: 12;
}
/* ==========================================================================
§2 SCOPED BASE / RESET
Applies ONLY inside .blx and only to blx components. It deliberately does
NOT touch #wpadminbar, and it deliberately does NOT touch Formidable's
layout primitives (see §8 for why that matters).
========================================================================== */
/* Never let anything in this file reach the admin bar. */
#wpadminbar,
#wpadminbar * {
box-sizing: content-box;
}
.blx [class*="blx-"],
.blx [class*="blx-"] * {
box-sizing: border-box;
}
.blx .blx-content {
/* The one guarantee against horizontal scroll at 360px. `clip` (not
`hidden`) because clip does not create a scroll container and therefore
does not break position: sticky/fixed on descendants or the Bridge header. */
overflow-x: clip;
color-scheme: light;
background-color: var(--blx-surface);
color: var(--blx-ink);
font-family: var(--blx-font-sans);
font-size: var(--blx-fs-base);
line-height: var(--blx-lh-body);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Media inside our components is always fluid. Scoped to blx components so
Bridge's logo, icon fonts and admin-bar avatars are untouched. */
.blx [class*="blx-"] img,
.blx [class*="blx-"] svg,
.blx [class*="blx-"] video,
.blx [class*="blx-"] iframe {
max-width: 100%;
height: auto;
}
.blx [class*="blx-"] img {
display: block;
/* Kills the sub-pixel seam a scaled photo shows against a light surface. */
outline: 1px solid rgba(22, 28, 37, 0.04);
outline-offset: -1px;
}
/* Grid/flex children must be allowed to shrink or long words force a scrollbar. */
.blx [class*="blx-"] > * {
min-width: 0;
}
.blx [class*="blx-"] {
overflow-wrap: break-word;
}
/* Consistent, visible focus everywhere in our scope. */
.blx [class*="blx-"] :focus-visible,
.blx [class*="blx-"]:focus-visible {
outline: var(--blx-focus-width) solid var(--blx-focus);
outline-offset: var(--blx-focus-offset);
border-radius: var(--blx-radius-xs);
}
/* Numbers that sit in columns (prices, feature counts) should not jitter. */
.blx .blx-price-card__amount,
.blx .blx-price-card__currency,
.blx .blx-price-card__period {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Skip link — the site currently has none. Emit as the first child of . */
.blx .blx-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100000;
padding: var(--blx-space-3) var(--blx-space-5);
background-color: var(--blx-navy-800);
color: var(--blx-n-0); /* 12.71:1 */
font-family: var(--blx-font-sans);
font-size: var(--blx-fs-sm);
font-weight: var(--blx-fw-bold);
text-decoration: none;
border-radius: 0 0 var(--blx-radius-md) 0;
}
.blx .blx-skip-link:focus {
left: 0;
outline: var(--blx-focus-width) solid var(--blx-accent-400);
outline-offset: -6px;
}
/* Visually hidden, still announced. */
.blx .blx-sr-only {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
§3 .blx-section (from vc_row / vc_row_inner)
--------------------------------------------------------------------------
Expected markup:
…
Modifiers:
--bleed full-viewport background, contained inner (default behaviour)
--contained background stops at the container edge (card-like row)
--tint neutral tinted surface
--brand navy-50 surface
--dark navy-900 surface, light text
--media photo background + verified scrim, light text
--flush no vertical padding --tall extra vertical padding
--narrow prose-width inner --wide 1400px inner
Legacy `vc_custom_…{padding-top:225px !important}` should be MAPPED by the
PHP into --blx-section-py (nearest scale step), not passed through raw.
Suggested mapping: <=40px -> space-8, <=80px -> space-12,
<=140px -> space-section, >140px -> space-section-lg.
========================================================================== */
.blx .blx-section {
position: relative;
padding-block: var(--blx-section-py);
padding-inline: var(--blx-space-gutter);
background-color: var(--blx-section-bg);
color: var(--blx-ink);
isolation: isolate;
}
.blx .blx-section__inner {
width: 100%;
max-width: var(--blx-container);
margin-inline: auto;
}
/* --- Surface modifiers -------------------------------------------------- */
.blx .blx-section--tint { --blx-section-bg: var(--blx-surface-tint); }
.blx .blx-section--alt { --blx-section-bg: var(--blx-surface-alt); }
.blx .blx-section--brand { --blx-section-bg: var(--blx-surface-brand); }
.blx .blx-section--dark {
--blx-section-bg: var(--blx-surface-dark);
--blx-ink: var(--blx-ink-on-dark);
--blx-ink-heading: var(--blx-ink-on-dark);
--blx-ink-muted: var(--blx-ink-on-dark-muted);
--blx-ink-subtle: var(--blx-ink-on-dark-subtle);
--blx-link: var(--blx-n-0);
--blx-link-hover: var(--blx-accent-300);
--blx-focus: var(--blx-focus-on-dark);
--blx-border: var(--blx-border-on-dark);
--blx-border-subtle: rgba(255, 255, 255, 0.1);
--blx-border-strong: rgba(255, 255, 255, 0.42);
color: var(--blx-ink-on-dark);
}
/* --- Image background + overlay ----------------------------------------- */
/* PHP sets: style="--blx-section-image:url('…')" from the legacy
vc_custom_… background-image declaration. */
.blx .blx-section--media {
--blx-ink: var(--blx-ink-on-dark);
--blx-ink-heading: var(--blx-ink-on-dark);
--blx-ink-muted: var(--blx-ink-on-dark-muted);
/* NOT navy-300 here. Over the 0.80 scrim on a white photo navy-300 measures
3.59:1 — fine on solid navy-900, short of 4.5:1 over an image. navy-200
measures 5.32:1 at the same worst case. */
--blx-ink-subtle: var(--blx-ink-on-dark-muted);
--blx-link: var(--blx-n-0);
--blx-link-hover: var(--blx-accent-300);
--blx-focus: var(--blx-focus-on-dark);
--blx-border: var(--blx-border-on-dark);
--blx-border-strong: rgba(255, 255, 255, 0.42);
--blx-section-bg: var(--blx-navy-900);
color: var(--blx-ink-on-dark);
background-image: var(--blx-section-image);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.blx .blx-section--media::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
/* Slight vertical gradient keeps the photo readable at the top without
flattening it; the flat floor is the value that was contrast-tested. */
/* The 0.80 mid-stop is the weakest point of the gradient and is the value
every on-media contrast number below was measured against. */
background-image: linear-gradient(
180deg,
rgba(24, 35, 56, 0.84) 0%,
var(--blx-scrim-media) 45%,
rgba(24, 35, 56, 0.86) 100%
);
}
.blx .blx-section--media > .blx-section__inner {
position: relative;
z-index: 1;
}
/* --- Width / rhythm modifiers ------------------------------------------- */
.blx .blx-section--contained {
max-width: var(--blx-container-lg);
margin-inline: auto;
border-radius: var(--blx-radius-lg);
}
.blx .blx-section--bleed { max-width: none; border-radius: 0; }
.blx .blx-section--narrow > .blx-section__inner { max-width: var(--blx-container-sm); }
.blx .blx-section--medium > .blx-section__inner { max-width: var(--blx-container-md); }
.blx .blx-section--wide > .blx-section__inner { max-width: var(--blx-container-lg); }
.blx .blx-section--flush { --blx-section-py: 0; }
.blx .blx-section--tight { --blx-section-py: var(--blx-space-8); }
.blx .blx-section--tall { --blx-section-py: var(--blx-space-section-lg); }
/* Adjacent identical surfaces should not double their padding into a chasm. */
.blx .blx-section + .blx-section--tint,
.blx .blx-section--tint + .blx-section--tint {
padding-block-start: var(--blx-section-py);
}
/* Optional section header block */
.blx .blx-section__head {
max-width: var(--blx-measure);
margin-block-end: var(--blx-space-fluid-md);
}
.blx .blx-eyebrow {
margin: 0 0 var(--blx-space-3);
font-family: var(--blx-font-sans);
font-size: var(--blx-fs-xs);
font-weight: var(--blx-fw-bold);
letter-spacing: var(--blx-ls-caps);
text-transform: uppercase;
color: var(--blx-ink-muted);
}
.blx .blx-section--dark .blx-eyebrow,
.blx .blx-section--media .blx-eyebrow {
color: var(--blx-accent-300); /* on navy-900: 11.0:1 */
}
/* ==========================================================================
§4 .blx-grid / .blx-col (from vc_column / vc_column_inner)
--------------------------------------------------------------------------
12-column grid. Legacy fractional widths map to a --blx-span value:
1/6 -> 2 1/4 -> 3 1/3 -> 4 1/2 -> 6 2/3 -> 8 3/4 -> 9
5/6 -> 10 1/1 -> 12
PHP may also set --blx-span inline for anything exotic.
Empty legacy gutter columns (the `width="1/6"` spacers on /inquire/ and
/managed-website-hosting…/) KEEP their track on desktop — that is exactly
the centring the original design relied on — and are removed below 640px
where they would only add dead vertical gap.
========================================================================== */
.blx .blx-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--blx-space-fluid-md) var(--blx-space-gutter);
align-items: start;
}
.blx .blx-grid > .blx-col {
grid-column: span var(--blx-span);
min-width: 0;
}
/* Mobile-first: everything is full width. */
.blx .blx-col { --blx-span: 12; }
.blx .blx-grid > .blx-col--empty,
.blx .blx-grid > .blx-col:empty {
display: none;
}
/* Tablet: two-up for the small fractions, full width for the large ones. */
@media (min-width: 40em) { /* 640px */
.blx .blx-col--1-6 { --blx-span: 4; }
.blx .blx-col--1-4 { --blx-span: 6; }
.blx .blx-col--1-3 { --blx-span: 6; }
.blx .blx-col--1-2 { --blx-span: 6; }
.blx .blx-col--2-3 { --blx-span: 12; }
.blx .blx-col--3-4 { --blx-span: 12; }
.blx .blx-col--5-6 { --blx-span: 12; }
}
/* Desktop: honour the legacy fractions exactly. */
@media (min-width: 60em) { /* 960px */
.blx .blx-col--1-6 { --blx-span: 2; }
.blx .blx-col--1-4 { --blx-span: 3; }
.blx .blx-col--1-3 { --blx-span: 4; }
.blx .blx-col--1-2 { --blx-span: 6; }
.blx .blx-col--2-3 { --blx-span: 8; }
.blx .blx-col--3-4 { --blx-span: 9; }
.blx .blx-col--5-6 { --blx-span: 10; }
.blx .blx-col--1-1 { --blx-span: 12; }
.blx .blx-grid > .blx-col--empty,
.blx .blx-grid > .blx-col:empty {
display: block; /* restore the legacy gutter track */
}
}
/* Vertical alignment helpers */
.blx .blx-grid--middle { align-items: center; }
.blx .blx-grid--bottom { align-items: end; }
.blx .blx-grid--stretch { align-items: stretch; }
.blx .blx-grid--flush { gap: 0; }
.blx .blx-grid--tight { gap: var(--blx-space-4); }
/* Reverse stacking order on mobile (image-first rows read better text-first). */
@media (max-width: 39.99em) {
.blx .blx-grid--text-first > .blx-col--media { order: 2; }
.blx .blx-grid--text-first > .blx-col--text { order: 1; }
}
/* ==========================================================================
§5 .blx-prose (from vc_column_text)
Rich text. Owns its own vertical rhythm via margin-block, capped measure.
========================================================================== */
.blx .blx-prose {
max-width: var(--blx-measure);
font-family: var(--blx-font-sans);
font-size: var(--blx-fs-base);
line-height: var(--blx-lh-body);
color: var(--blx-ink);
overflow-wrap: break-word;
}
.blx .blx-prose--wide { max-width: none; }
.blx .blx-prose--tight { max-width: var(--blx-measure-tight); }
.blx .blx-prose--center { margin-inline: auto; text-align: center; }
.blx .blx-prose--lede { font-size: var(--blx-fs-md); color: var(--blx-ink-muted); }
.blx .blx-prose > :first-child { margin-block-start: 0; }
.blx .blx-prose > :last-child { margin-block-end: 0; }
.blx .blx-prose h1,
.blx .blx-prose h2,
.blx .blx-prose h3,
.blx .blx-prose h4,
.blx .blx-prose h5,
.blx .blx-prose h6 {
margin-block: var(--blx-space-10) var(--blx-space-4);
font-family: var(--blx-font-display);
font-weight: var(--blx-fw-display);
line-height: var(--blx-lh-heading);
letter-spacing: var(--blx-ls-snug);
color: var(--blx-ink-heading);
text-wrap: balance;
/* The current site sets text-transform: uppercase on headings via Bridge,
which is what makes "WE HAVE A REPUTATION FOR RESULTS" shout. Sentence
case reads as a studio, not a banner ad. */
text-transform: none;
}
.blx .blx-prose h1 {
font-size: var(--blx-fs-4xl);
line-height: var(--blx-lh-tight);
letter-spacing: var(--blx-ls-tight);
margin-block-start: 0;
}
.blx .blx-prose h2 {
font-size: var(--blx-fs-3xl);
line-height: var(--blx-lh-snug);
letter-spacing: var(--blx-ls-tight);
}
.blx .blx-prose h3 { font-size: var(--blx-fs-2xl); }
.blx .blx-prose h4 { font-size: var(--blx-fs-xl); }
.blx .blx-prose h5,
.blx .blx-prose h6 {
font-family: var(--blx-font-sans);
font-size: var(--blx-fs-sm);
font-weight: var(--blx-fw-bold);
letter-spacing: var(--blx-ls-caps);
text-transform: uppercase;
color: var(--blx-ink-muted);
}
.blx .blx-prose p {
margin-block: var(--blx-space-4);
color: inherit;
}
.blx .blx-prose em,
.blx .blx-prose i { font-style: italic; }
.blx .blx-prose strong,
.blx .blx-prose b {
font-weight: var(--blx-fw-bold);
color: var(--blx-ink-heading);
}
.blx .blx-section--dark .blx-prose strong,
.blx .blx-section--media .blx-prose strong { color: inherit; }
/* Links: underline is the affordance, colour is secondary (colour alone is
not a sufficient distinction — SC 1.4.1). */
.blx .blx-prose a {
color: var(--blx-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
transition: color var(--blx-transition),
text-decoration-color var(--blx-transition);
}
.blx .blx-prose a:hover {
color: var(--blx-link-hover);
text-decoration-color: currentColor;
text-decoration-thickness: 2px;
}
.blx .blx-prose ul,
.blx .blx-prose ol {
margin-block: var(--blx-space-4);
padding-inline-start: var(--blx-space-6);
}
.blx .blx-prose li { margin-block: var(--blx-space-2); padding-inline-start: var(--blx-space-1); }
.blx .blx-prose li::marker { color: var(--blx-navy-500); }
.blx .blx-prose ul { list-style: disc; }
.blx .blx-prose ol { list-style: decimal; }
.blx .blx-prose ul ul, .blx .blx-prose ol ol { margin-block: var(--blx-space-2); }
.blx .blx-prose blockquote {
margin-block: var(--blx-space-8);
margin-inline: 0;
padding: var(--blx-space-2) 0 var(--blx-space-2) var(--blx-space-6);
border-inline-start: 3px solid var(--blx-border-brand);
font-size: var(--blx-fs-md);
font-style: italic;
color: var(--blx-ink-muted);
}
.blx .blx-prose hr {
margin-block: var(--blx-space-10);
border: 0;
border-block-start: var(--blx-hairline) solid var(--blx-border);
}
.blx .blx-prose code,
.blx .blx-prose kbd {
font-family: var(--blx-font-mono);
font-size: 0.9em;
padding: 0.15em 0.4em;
border-radius: var(--blx-radius-xs);
background-color: var(--blx-n-100);
color: var(--blx-n-800); /* 13.0:1 */
}
.blx .blx-prose pre {
margin-block: var(--blx-space-6);
padding: var(--blx-space-4);
overflow-x: auto;
border-radius: var(--blx-radius-md);
background-color: var(--blx-n-900);
color: var(--blx-n-100); /* 15.4:1 */
}
.blx .blx-prose pre code { background: none; padding: 0; color: inherit; }
.blx .blx-prose table {
width: 100%;
margin-block: var(--blx-space-6);
border-collapse: collapse;
font-size: var(--blx-fs-sm);
}
.blx .blx-prose th,
.blx .blx-prose td {
padding: var(--blx-space-3);
text-align: start;
border-block-end: var(--blx-hairline) solid var(--blx-border);
}
.blx .blx-prose th { font-weight: var(--blx-fw-bold); color: var(--blx-ink-heading); }
/* Below 640px a wide legacy table is the single most likely cause of a
horizontal scrollbar. Let it scroll inside itself instead of the page. */
@media (max-width: 39.99em) {
.blx .blx-prose table { display: block; overflow-x: auto; }
}
.blx .blx-prose img { margin-block: var(--blx-space-6); border-radius: var(--blx-radius-md); }
/* ==========================================================================
§6 .blx-figure (vc_single_image) · .blx-spacer (vc_empty_space)
========================================================================== */
.blx .blx-figure {
margin: 0;
display: flow-root;
}
.blx .blx-figure img {
width: 100%;
height: auto;
border-radius: var(--blx-radius-lg);
box-shadow: var(--blx-shadow-sm);
}
.blx .blx-figure--plain img { border-radius: 0; box-shadow: none; outline: none; }
.blx .blx-figure--frame img {
border-radius: var(--blx-radius-md);
border: var(--blx-hairline) solid var(--blx-border);
box-shadow: var(--blx-shadow-md);
}
.blx .blx-figure figcaption {
margin-block-start: var(--blx-space-3);
font-size: var(--blx-fs-sm);
line-height: var(--blx-lh-body);
color: var(--blx-ink-subtle); /* 4.60:1 at >=14px */
}
.blx .blx-section--dark .blx-figure figcaption,
.blx .blx-section--media .blx-figure figcaption {
color: var(--blx-ink-on-dark-subtle); /* 6.85:1 */
}
.blx .blx-figure--center { margin-inline: auto; text-align: center; }
.blx .blx-figure--center img { margin-inline: auto; }
.blx .blx-figure--right { margin-inline-start: auto; text-align: end; }
.blx .blx-figure--right img { margin-inline-start: auto; }
.blx .blx-figure--left { margin-inline-end: auto; text-align: start; }
/* Cap an oversized `img_size="full"` screenshot on a portfolio single page. */
.blx .blx-figure--contain img { max-height: 80vh; width: auto; object-fit: contain; }
/* vc_empty_space carried no attributes, so it maps to one rhythm step.
PHP can pass style="--blx-spacer-h: " if a height attr ever appears. */
.blx .blx-spacer {
display: block;
width: 100%;
height: var(--blx-spacer-h);
flex: 0 0 auto;
pointer-events: none;
}
.blx .blx-spacer--sm { --blx-spacer-h: var(--blx-space-4); }
.blx .blx-spacer--lg { --blx-spacer-h: var(--blx-space-12); }
.blx .blx-spacer--xl { --blx-spacer-h: var(--blx-space-20); }
/* Two spacers in a row (the legacy content does this) should not compound. */
.blx .blx-spacer + .blx-spacer { display: none; }
/* ==========================================================================
§7 .blx-btn
Beats Bridge's `.qbutton` (0,1,0) and `a.qbutton` (0,1,1) at (0,2,0), and
`.qbutton:hover` (0,2,0) at (0,3,0). No !important needed anywhere here.
Safe to put BOTH classes on one element: class="blx-btn blx-btn--primary
qbutton" if the PHP reuses Bridge's markup helper.
========================================================================== */
.blx .blx-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--blx-space-2);
/* 48px tall / 44px min — comfortably over SC 2.5.8's 24px floor. */
min-height: 3rem;
min-width: 3rem;
padding: 0.875rem var(--blx-space-6);
border: 2px solid transparent;
border-radius: var(--blx-radius-sm);
font-family: var(--blx-font-sans);
font-size: var(--blx-fs-sm);
font-weight: var(--blx-fw-bold);
line-height: 1.2;
letter-spacing: var(--blx-ls-caps);
text-transform: uppercase;
text-align: center;
text-decoration: none;
white-space: normal; /* Bridge forces nowrap; long labels must wrap at 360px */
cursor: pointer;
height: auto; /* Bridge hard-codes height:39px */
width: auto;
box-shadow: none;
transition: background-color var(--blx-transition),
border-color var(--blx-transition),
color var(--blx-transition),
box-shadow var(--blx-transition),
transform var(--blx-dur-fast) var(--blx-ease);
}
.blx .blx-btn:focus-visible {
outline: var(--blx-focus-width) solid var(--blx-focus);
outline-offset: var(--blx-focus-offset);
}
.blx .blx-btn:active { transform: translateY(1px); }
.blx .blx-btn[aria-disabled="true"],
.blx .blx-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
/* --- Primary: navy fill, white label ------------------------------------ */
.blx .blx-btn--primary {
background-color: var(--blx-navy-600);
border-color: var(--blx-navy-600);
color: var(--blx-n-0); /* 7.98:1 */
box-shadow: var(--blx-shadow-xs);
}
.blx .blx-btn--primary:hover {
background-color: var(--blx-navy-700); /* 9.76:1 */
border-color: var(--blx-navy-700);
color: var(--blx-n-0);
box-shadow: var(--blx-shadow-brand);
}
.blx .blx-btn--primary:active {
background-color: var(--blx-navy-800); /* 12.71:1 */
border-color: var(--blx-navy-800);
box-shadow: none;
}
/* --- Secondary: navy outline -------------------------------------------- */
.blx .blx-btn--secondary {
background-color: transparent;
border-color: var(--blx-navy-600); /* boundary 7.98:1 */
color: var(--blx-navy-600); /* 7.98:1 */
}
.blx .blx-btn--secondary:hover {
background-color: var(--blx-navy-600);
border-color: var(--blx-navy-600);
color: var(--blx-n-0); /* 7.98:1 */
}
.blx .blx-btn--secondary:active {
background-color: var(--blx-navy-800);
border-color: var(--blx-navy-800);
color: var(--blx-n-0);
}
/* --- Ghost: text-only with a revealed surface --------------------------- */
.blx .blx-btn--ghost {
background-color: transparent;
border-color: transparent;
color: var(--blx-navy-600); /* 7.98:1 */
padding-inline: var(--blx-space-4);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.blx .blx-btn--ghost:hover {
background-color: var(--blx-navy-50);
color: var(--blx-navy-800); /* 12.71:1 on navy-50 -> 11.6:1 */
text-decoration-color: currentColor;
}
/* --- On dark / media surfaces ------------------------------------------- */
.blx .blx-section--dark .blx-btn--primary,
.blx .blx-section--media .blx-btn--primary,
.blx .blx-hero .blx-btn--primary {
background-color: var(--blx-n-0);
border-color: var(--blx-n-0);
color: var(--blx-navy-800); /* 12.71:1 */
}
.blx .blx-section--dark .blx-btn--primary:hover,
.blx .blx-section--media .blx-btn--primary:hover,
.blx .blx-hero .blx-btn--primary:hover {
background-color: var(--blx-accent-400);
border-color: var(--blx-accent-400);
color: var(--blx-n-900); /* 9.70:1 */
}
.blx .blx-section--dark .blx-btn--secondary,
.blx .blx-section--media .blx-btn--secondary,
.blx .blx-hero .blx-btn--secondary {
border-color: rgba(255, 255, 255, 0.55);
color: var(--blx-n-0);
}
.blx .blx-section--dark .blx-btn--secondary:hover,
.blx .blx-section--media .blx-btn--secondary:hover,
.blx .blx-hero .blx-btn--secondary:hover {
background-color: var(--blx-n-0);
border-color: var(--blx-n-0);
color: var(--blx-navy-800); /* 12.71:1 */
}
.blx .blx-section--dark .blx-btn:focus-visible,
.blx .blx-section--media .blx-btn:focus-visible,
.blx .blx-hero .blx-btn:focus-visible {
outline-color: var(--blx-n-0); /* 15.71:1 vs navy-900 */
}
/* --- Sizes --------------------------------------------------------------- */
.blx .blx-btn--sm { min-height: 2.5rem; padding: 0.5rem var(--blx-space-4); font-size: var(--blx-fs-xs); }
.blx .blx-btn--lg { min-height: 3.5rem; padding: 1.125rem var(--blx-space-8); font-size: var(--blx-fs-base); }
.blx .blx-btn--block { display: flex; width: 100%; }
.blx .blx-btn-group {
display: flex;
flex-wrap: wrap;
gap: var(--blx-space-3);
align-items: center;
margin-block-start: var(--blx-space-6);
}
/* At 360px a row of uppercase buttons must not force a scrollbar. */
@media (max-width: 26.25em) { /* 420px */
.blx .blx-btn-group > .blx-btn { flex: 1 1 100%; }
}
/* ==========================================================================
§8 FORMS — layered over Formidable Forms
--------------------------------------------------------------------------
THE IMPORTANT PART: Formidable 6.x styles itself almost entirely through
its OWN CSS custom properties, declared on `.with_frm_style`. So this layer
is 95% variable reassignment, not selector combat. Consequences:
· zero specificity war, zero !important
· Formidable's grid (`.frm_fields_container` is display:grid; `.frm_half`
is `grid-column: span 6`) is NEVER touched, so field layout survives
· conditional logic (which sets inline display:none/'' on
`.frm_form_field` and `.frm_section_heading`) is NEVER touched
· the honeypot `.frm_verify` / `input.frm_verify` (position:absolute;
left:-3000px) is NEVER touched — see the guard at the end of this block
· AJAX submit, the `.frm_ajax_loading` spinner and `.frm_screen_reader`
are NEVER touched
Two real accessibility defects in the shipped Formidable style are fixed
here: --border-color #cccccc is 1.60:1 (fails SC 1.4.11) and
--border-color-active #66afe9 is 2.10:1 (fails the focus-indicator
requirement). Field font-size is also raised 14px -> 16px to stop iOS
Safari zooming the page on focus.
========================================================================== */
.blx .with_frm_style,
.blx .frm_forms.with_frm_style {
/* Typography */
--font: var(--blx-font-sans);
--font-size: var(--blx-fs-sm);
--field-font-size: 1rem; /* 16px — no iOS zoom-on-focus */
--description-font-size: 0.875rem;
--check-font-size: 1rem;
--submit-font-size: 0.9375rem;
--error-font-size: 0.9375rem;
--success-font-size: 1rem;
--section-font-size: var(--blx-fs-xl);
--title-size: var(--blx-fs-2xl);
/* Labels + descriptions */
--label-color: var(--blx-ink-heading); /* 12.71:1 */
--weight: 700;
--label-padding: 0 0 6px 0;
--description-color: var(--blx-ink-muted); /* 6.87:1 */
--description-weight: 400;
--description-margin: 6px 0 0 0;
--required-color: var(--blx-error); /* 6.54:1 */
--required-weight: 700;
/* Fields */
--field-height: 3rem; /* 48px target */
--line-height: 1.5;
--field-pad: 0.75rem 0.875rem;
--field-margin: var(--blx-space-5);
--field-weight: 400;
--text-color: var(--blx-ink); /* 13.88:1 */
--bg-color: var(--blx-n-0);
--bg-color-active: var(--blx-n-0);
--border-color: var(--blx-border-strong); /* 3.49:1 — was 1.60:1 */
--border-color-active: var(--blx-navy-600); /* 7.98:1 — was 2.10:1 */
--field-border-width: 1px;
--field-border-style: solid;
--border-radius: var(--blx-radius-sm);
--box-shadow: none;
/* Disabled */
--bg-color-disabled: var(--blx-n-50);
--border-color-disabled: var(--blx-n-200);
--text-color-disabled: var(--blx-n-500);
/* Checkboxes / radios */
--check-label-color: var(--blx-ink);
--check-weight: 400;
/* Sections */
--section-color: var(--blx-ink-heading);
--section-weight: 600;
--section-border-color: var(--blx-border);
--section-border-width: 1px;
--section-pad: var(--blx-space-6) 0 var(--blx-space-2) 0;
--section-mar-top: var(--blx-space-10);
--section-mar-bottom: var(--blx-space-6);
/* Submit button — matched to .blx-btn--primary */
--submit-bg-color: var(--blx-navy-600);
--submit-border-color: var(--blx-navy-600);
--submit-text-color: var(--blx-n-0); /* 7.98:1 */
--submit-hover-bg-color: var(--blx-navy-700); /* 9.76:1 */
--submit-hover-color: var(--blx-n-0);
--submit-hover-border-color: var(--blx-navy-700);
--submit-active-bg-color: var(--blx-navy-800); /* 12.71:1 */
--submit-active-color: var(--blx-n-0);
--submit-active-border-color: var(--blx-navy-800);
--submit-border-width: 2px;
--submit-border-radius: var(--blx-radius-sm);
/* Inert on purpose: Formidable emits `height:var(--submit-height)` with a
UNITLESS value, which is invalid CSS and is dropped by every browser.
Kept only so the variable is not left at its 39 default; the real height
comes from the explicit min-height rule below. */
--submit-height: 48;
--submit-padding: 0.875rem var(--blx-space-6);
--submit-weight: 700;
--submit-shadow-color: transparent;
--submit-margin: var(--blx-space-4);
/* Messages */
--error-bg: var(--blx-error-bg);
--error-border: #F3C9C5;
--error-text: var(--blx-error); /* 5.72:1 on error-bg */
--success-bg-color: var(--blx-success-bg);
--success-border-color: #C3E2CE;
--success-text-color: var(--blx-success); /* 6.6:1 on success-bg */
--form-desc-color: var(--blx-ink-muted);
--title-color: var(--blx-ink-heading);
--fieldset-bg-color: transparent;
}
/* ---- WHERE THE VARIABLE APPROACH IS NOT ENOUGH -------------------------
Formidable ALSO emits a per-form-style block (`.frm_style_
.with_frm_style …`) that hardcodes literal values and ignores its own
variables. Verified in the shipped formidableforms.css for this site:
.frm_style_centered-inquiry-form.with_frm_style input[type=submit]
{ font-size:13px; height:39; background:#3d507b; border-radius:4px; … }
.frm_style_centered-inquiry-form.with_frm_style input::placeholder
{ color:#A1A1A1; } <-- 2.58:1, FAILS SC 1.4.3
.frm_style_centered-inquiry-form.with_frm_style div.frm_description
{ font-size:12px; color:#666666; }
Those three need REAL declarations that outrank (0,3,1) / (0,2,1) / (0,2,2).
Everything else on the form stays variable-driven.
Note: there are two style slugs live on this site (centered-inquiry-form
and formidable-style); the selectors below beat both. */
/* (0,4,1) — beats Formidable's hardcoded (0,3,1) submit block. */
.blx .with_frm_style .frm_submit input[type="submit"],
.blx .with_frm_style .frm_submit button[type="submit"],
.blx .with_frm_style .frm_submit .frm_button_submit {
font-family: var(--blx-font-sans);
font-size: var(--blx-fs-sm);
font-weight: var(--blx-fw-bold);
letter-spacing: var(--blx-ls-caps);
text-transform: uppercase;
line-height: 1.2;
min-height: 3rem;
height: auto;
width: auto;
padding: 0.875rem var(--blx-space-6);
white-space: normal;
cursor: pointer;
background-color: var(--blx-navy-600);
border: 2px solid var(--blx-navy-600);
border-radius: var(--blx-radius-sm);
color: var(--blx-n-0); /* 7.98:1 */
box-shadow: none;
transition: background-color var(--blx-transition),
border-color var(--blx-transition),
box-shadow var(--blx-transition);
}
.blx .with_frm_style .frm_submit input[type="submit"]:hover,
.blx .with_frm_style .frm_submit button[type="submit"]:hover,
.blx .with_frm_style .frm_submit .frm_button_submit:hover {
background-color: var(--blx-navy-700); /* 9.76:1 */
border-color: var(--blx-navy-700);
color: var(--blx-n-0);
box-shadow: var(--blx-shadow-brand);
}
.blx .with_frm_style .frm_submit input[type="submit"]:active,
.blx .with_frm_style .frm_submit button[type="submit"]:active {
background-color: var(--blx-navy-800); /* 12.71:1 */
border-color: var(--blx-navy-800);
box-shadow: none;
}
/* (0,3,1) — beats Formidable's hardcoded (0,2,1) placeholder colour.
This matters more here than on a normal site: the /inquire/ form uses
`frm_none_container`, which sets `.frm_primary_label{display:none}`, so the
PLACEHOLDER IS THE ONLY VISIBLE LABEL on Full Name / Company / Phone /
Email. At #A1A1A1 (2.58:1) those fields are effectively unlabelled.
NOTE FOR THE PHP SIDE: fixing the colour does not fix the underlying
problem — a placeholder vanishes as soon as the user types. Restore the
visible labels (or at minimum add aria-label) when re-rendering the form. */
.blx .frm_forms.with_frm_style input::placeholder,
.blx .frm_forms.with_frm_style textarea::placeholder {
color: var(--blx-ink-subtle); /* 4.60:1 — was 2.58:1 */
opacity: 1; /* Firefox defaults this below 1 */
}
.blx .frm_forms.with_frm_style input::-webkit-input-placeholder,
.blx .frm_forms.with_frm_style textarea::-webkit-input-placeholder {
color: var(--blx-ink-subtle);
opacity: 1;
}
/* (0,3,0)/(0,3,1) — beats Formidable's hardcoded (0,2,2) description block.
12px is below the comfortable floor for supporting copy. */
.blx .with_frm_style .frm_description,
.blx .with_frm_style div.frm_description,
.blx .with_frm_style p.description,
.blx .with_frm_style div.description {
font-family: var(--blx-font-sans);
font-size: var(--blx-fs-sm);
color: var(--blx-ink-muted); /* 6.87:1 — was #666 at 12px */
font-weight: var(--blx-fw-regular);
max-width: 100%;
}
/* Focus ring: Formidable's own focus style is a border-colour change only,
which is not a sufficient focus indicator. Add a real ring. */
.blx .with_frm_style input:focus-visible,
.blx .with_frm_style select:focus-visible,
.blx .with_frm_style textarea:focus-visible,
.blx .with_frm_style button:focus-visible,
.blx .with_frm_style .frm_submit input[type="submit"]:focus-visible {
outline: var(--blx-focus-width) solid var(--blx-focus); /* 7.98:1 */
outline-offset: var(--blx-focus-offset);
}
/* Radios / checkboxes: 20px box, real 44px hit area via label padding.
`float:none` is preserved from Formidable; only size + accent change. */
.blx .with_frm_style input[type="radio"],
.blx .with_frm_style input[type="checkbox"] {
width: 1.25rem;
height: 1.25rem;
margin-inline-end: var(--blx-space-2);
accent-color: var(--blx-navy-600);
vertical-align: middle;
cursor: pointer;
}
.blx .with_frm_style .frm_radio,
.blx .with_frm_style .frm_checkbox {
margin-block: var(--blx-space-1);
}
/* Switching these labels to flex REQUIRES undoing Formidable's hanging-indent
hack, which it applies at (0,3,1):
.with_frm_style .vertical_radio .frm_radio label
{ display:block; padding-left:20px; text-indent:-20px; }
That pair is a block-layout trick for wrapped labels. Left in place under
flex, the -20px text-indent drags the label text back over the control and
the text overlaps the radio by 8px. The /inquire/ form's "Were you referred
to Brand Logic?" field carries `vertical_radio`, so this is not theoretical.
The .vertical_radio selector below is (0,4,1) so it outranks the source. */
.blx .with_frm_style .frm_radio > label,
.blx .with_frm_style .frm_checkbox > label,
.blx .with_frm_style .vertical_radio .frm_radio > label,
.blx .with_frm_style .vertical_radio .frm_checkbox > label {
display: flex;
align-items: center;
gap: var(--blx-space-2);
min-height: 2.75rem; /* 44px pointer target */
padding-block: var(--blx-space-1);
padding-inline-start: 0; /* undo Formidable's 20px hanging indent */
text-indent: 0; /* undo Formidable's -20px pull */
cursor: pointer;
font-size: var(--blx-fs-base);
line-height: var(--blx-lh-body);
color: var(--blx-ink);
}
/* Selects: restore a visible affordance (Formidable leaves the UA arrow,
which disappears against a restyled field on some platforms). */
.blx .with_frm_style select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23233253' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.875rem center;
padding-inline-end: 2.5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* File uploads (support form takes 15MB attachments) */
.blx .with_frm_style .frm_dropzone,
.blx .with_frm_style .frm_dropzone.dz-clickable {
border: 2px dashed var(--blx-border-strong); /* 3.49:1 */
border-radius: var(--blx-radius-md);
background-color: var(--blx-surface-tint);
color: var(--blx-ink-muted);
padding: var(--blx-space-6);
transition: border-color var(--blx-transition),
background-color var(--blx-transition);
}
.blx .with_frm_style .frm_dropzone:hover,
.blx .with_frm_style .frm_dropzone.dz-drag-hover {
border-color: var(--blx-navy-600);
background-color: var(--blx-navy-50);
}
/* Inline validation messages */
.blx .with_frm_style .frm_error {
font-size: var(--blx-fs-sm);
font-weight: var(--blx-fw-bold);
color: var(--blx-error); /* 6.54:1 on white */
margin-block-start: var(--blx-space-1);
}
.blx .with_frm_style .frm_error_style,
.blx .with_frm_style .frm_message {
border-radius: var(--blx-radius-md);
padding: var(--blx-space-4) var(--blx-space-5);
font-size: var(--blx-fs-sm);
}
/* Give the form its own surface so it reads as a distinct task area. */
.blx .blx-form-panel {
background-color: var(--blx-surface);
border: var(--blx-hairline) solid var(--blx-border);
border-radius: var(--blx-radius-lg);
box-shadow: var(--blx-shadow-md);
padding: var(--blx-space-fluid-lg);
}
.blx .blx-section--tint .blx-form-panel { background-color: var(--blx-surface); }
@media (max-width: 26.25em) {
.blx .blx-form-panel {
padding: var(--blx-space-5);
border-inline: 0;
border-radius: var(--blx-radius-md);
}
}
/* ---- GUARDS. Do not remove. -------------------------------------------- */
/* Re-assert Formidable's honeypot and its screen-reader utility, in case any
future rule in this file (or a `.blx-form-panel input {…}` someone adds
later) makes them visible. Making .frm_verify visible = every real
submission is silently discarded as spam. */
.blx .with_frm_style .frm_verify,
.blx .with_frm_style input.frm_verify,
.blx .frm_forms .frm_verify {
position: absolute;
left: -3000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.blx .frm_screen_reader {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Never restyle these — Formidable's JS owns their visibility. */
.blx .frm_hidden,
.blx legend.frm_hidden,
.blx .frm_none_container > .frm_primary_label,
.blx .frm_pos_none {
display: none;
}
/* ==========================================================================
§9 CARDS · PRICING · HERO · WORK GRID
========================================================================== */
/* --- .blx-card (footer service cards, generic content cards) ------------- */
/*