/* 01 — Tokens Owns: :root custom properties only. No selectors. Depends on: nothing */ :root { /* ── Neutral ramp (shared) ────────────────────────────── Raw greys. Not used directly in components — reference the semantic tokens below instead. */ --neutral-50: #ffffff; --neutral-100: #f6f5f2; --neutral-200: #efeeea; --neutral-300: #e3e1da; --neutral-400: #9a9a94; --neutral-600: #5e5e5e; --neutral-700: #454545; --neutral-800: #2e2e2e; --neutral-900: #1c1c1c; /* ── Semantic colour ────────────────────────────────── */ --brand: #014f7f; --brand-dark: #01385b; --brand-light: #146297; --accent: #df0b29; --accent-dark: #bc0125; /* Surface ramp, lightest to darkest. Each step is a real band on the page and has a class in 10-sections.css (.rw-section--alt, --muted). CHANGED 2026-09-12: --surface-muted was var(--neutral-100), i.e. an exact duplicate of --surface-alt, carried over from the source palette which defined the two as the same colour. It is repointed to --neutral-200 because the site turns out to use THREE tints, not two: #efeeea appears on real rows and had no token at all, while a token that duplicates its neighbour can only ever be picked by accident. Safe to change: nothing in css/ referenced --surface-muted, so this deviates from the source palette on paper only. */ --surface: var(--neutral-50); /* #ffffff */ --surface-alt: var(--neutral-100); /* #f6f5f2 */ --surface-muted: var(--neutral-200); /* #efeeea */ --text: var(--neutral-800); /* Consumed: 02-base.css `body { color }` and the text/input/select/textarea color rule. */ --text-muted: var(--neutral-600); --border: var(--neutral-200); --border-strong: var(--neutral-300); /* Raw alias — kept because it reads better than --surface for text/icons sitting on dark backgrounds. */ --white: var(--neutral-50); --black: #1e1e1e; /* ── Gradients ──────────────────────────────────────── */ --rw-bg-primary-gradient: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%); --rw-bg-accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); /* ── RW Testimonials plugin tokens ───────────────────── The rw-testimonials PLUGIN registers the `rw-testimonials` style handle first (wp-content/plugins/rw-testimonials/includes/assets.php), so WordPress silently discards this theme's later enqueue of the same handle. Only the plugin's own stylesheet (wp-content/plugins/rw-testimonials/assets/css/rw-testimonials.css) is ever served, and it consumes var(--rw-*) custom properties directly. Do NOT move this block to that file — it never loads. The 17 declarations below are commented out DELIBERATELY. They were found already disabled this way (values mapped onto the semantic scale, but wrapped in this comment) and are preserved exactly as found — do not re-enable them without checking with the repo owner first; this looks like a hand-made edit, not an accident. --rw-primary: var(--brand); --rw-primary-dark: var(--brand-dark); --rw-accent: var(--accent); --rw-white: var(--surface); --rw-black: var(--neutral-900); --rw-gray: var(--text-muted); --rw-gray-dark: var(--neutral-700); --rw-gray-light: var(--neutral-400); --rw-gray-200: var(--neutral-300); --rw-gray-bg: var(--neutral-100); --rw-blue: var(--brand); --rw-blue-light: var(--brand-light); --rw-blue-dark: var(--brand-dark); --rw-navy: var(--brand-dark); --rw-orange: var(--rw-accent); --rw-star-color: var(--rw-accent); --rw-card-bg: var(--rw-gray-bg); */ --rw-small-radius: 4px; --rw-card-radius: 10px; --rw-carousel-card-radius: 20px; --rw-quote-color: rgba(1, 79, 127, 0.1); /* --brand @ 10% */ /* ── Typography ─────────────────────────────────────── */ /* Family names must match what is actually served. Both come from the Google Fonts request BB emits (fl-builder-google-fonts): Barlow at 300/400/700 and Barlow Condensed at 700. Verified against document.fonts on the live page 2026-09-05. --font-display previously read "barlow-condensed-semibold", which is not a family name anywhere on this site — it appeared only in this file. Every h1-h6, .rw-eyebrow and .rw-hero__title silently fell back to sans-serif. CAUTION: this list is generated by Beaver Builder from module and global font settings, so it changes when those change. If a future edit stops any module using Barlow Condensed, BB drops it from the URL and headings lose their font with no error. Worth moving to an explicit child-theme enqueue if that bites. */ --font-display: "Barlow Condensed", sans-serif; --font-body: "Barlow", sans-serif; /* ── Spacing ────────────────────────────────────────── */ /* ── Spacing scale ────────────────────────────────────── Five steps, and the values are the ones this codebase already used as literals rather than a scale invented from scratch: 5px (x5), 10px (x4), 20px (x17 — by far the most common), 30px (x5) and 50px (x2), counted across css/ on 2026-09-12. NOTE FOR ANYONE READING A DIFF: --spacing-md was 30px until 2026-09-12 and is now 20px. The 30px value did not change or disappear — it moved to --spacing-lg, and all nine of its consumers were migrated in the same commit. The rename happened because 20px is the workhorse value here and had no token at all, and wedging it in as a sixth name between sm and md would have left a scale nobody could order from memory. Nothing rendered differently. --gutter (16px) is deliberately NOT folded into this scale. It means the space BETWEEN things in a row — grid gaps, button rows, icon rows — and reads differently from a margin even where the numbers are close. */ --spacing-xs: 5px; --spacing-sm: 10px; --spacing-md: 20px; --spacing-lg: 30px; --spacing-xl: 50px; --gutter: 16px; /* ── Transitions ────────────────────────────────────── */ --transition-base: all 0.2s ease-in-out; --transition-slow: all 0.3s ease-in-out; /* ── Layout ─────────────────────────────────────────── */ --header-height: 120px; --header-padding: 30px; --container-padding: clamp(20px, 3vw, 40px); --content-max-width: 100%; --section-padding: clamp(40px, 8vw, 100px); /* Shared by the page-title band and the footer's copyright bar — both are short strips where the full --section-padding rhythm would be absurd. Raised 20px -> 40px 2026-09-14 on the page-title band; the footer bar takes the same step, which is the point of it being one token. */ --section-narrow-padding: 40px; --section-padding-lr: clamp(20px, 8vw, 60px); /* The width a row's content sits at. MIRRORS Beaver Builder's Global Settings -> Rows -> Content Width, which emits `.fl-row-fixed-width { max-width: 1100px }` into every layout cache. Two sources of truth, and they can drift: BB's rule only loads on pages that HAVE a builder layout, so anything the theme renders itself — the testimonials archive, any future template — needs this token instead. Change both together. */ --row-content-width: 1340px; --card-padding: clamp(15px, 3vw, 30px); --card-border-radius: 4px; /* Consumed by 12-cards.css. --card-padding was defined during the rebuild and annotated as unconsumed, deferred to "the content modules" — this is that. */ --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); /* Hover state for the card panels (12-cards.css). Deeper AND dropped further — 12px of blur at 2px down reads as a card lying on the page, 24px at 10px down reads as one held above it, which is the whole point of the lift it accompanies. Still under 0.14 alpha: the cards sit on --surface-alt and --surface-muted bands, where a heavier shadow turns into a grey smear rather than a shadow. */ --card-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.13); /* How far a card rises on hover, as a POSITIVE length — 12-cards.css negates it. 4px is deliberately small: the grid is three cards wide and anything larger reads as the row twitching rather than one card answering the pointer. */ --card-lift: 4px; /* Photo scale on hover. 1.04 over the card's ~360px width is ~14px of movement — visible as life, not as a zoom. */ --card-image-zoom: 1.04; --grid-gap: clamp(16px, 2vw, 30px); /* Video carousel (13-carousel.css). */ --video-card-bg: var(--brand-dark); --video-play-size: clamp(56px, 6vw, 76px); /* Its own step rather than --card-padding: the cards here are 340px wide and their titles are clipped to one line, so every pixel of side padding is a character lost. Tops out at 20px where a content card tops out at 30px; the floor is shared, because at phone widths neither is tight. */ --video-title-padding: clamp(15px, 3vw, 20px); /* Arrow geometry. The size is a token because the arrows are positioned BELOW the track, so every offset is measured from their own height — hard-coding it in three places is how they end up overlapping the cards at one width and floating at another. */ --video-arrow-size: 40px; --video-arrow-gap: clamp(12px, 1.25vw, 20px); /* ── Currently unconsumed (final review, Finding 2) ──── Not orphaned by accident — kept deliberately, for two different reasons. Do not delete either group without checking with the repo owner; do not "fix" this by restoring layout rules (see below). --header-height Written at runtime by rw/shared-js/header-height.js onto documentElement's inline style. No rule in css/ reads it (yet) — the fixed-header offset is currently reconciled by bb-theme/js/theme.js's own inline top/ padding-top writes instead (see 04-header.css). A future task could switch that reconciliation over to this variable. --container-padding, --content-max-width, --card-padding Design spec §4.4 planned to absorb the old _layout.css (container padding, .fl-row-content-wrap section padding) into 02-base.css; only `.fl-page { overflow-x: hidden }` landed. A ruling was made NOT to restore the rest here — it belongs with the deferred content modules, and Beaver Builder's own CSS already handles row/column padding. --transition-slow (Transitions, above) is unconsumed simply because no rule needs `all 0.3s` over --transition-base yet. (This used to cite --surface-muted as the same case. It no longer is: --surface-muted was repointed to --neutral-200 on 2026-09-12 and is consumed by .rw-section--muted.) */ /* ── Header ─────────────────────────────────────────── */ --header-shadow: 0 8px 8px rgba(0, 0, 0, 0.1); --admin-bar-mobile: 46px; --admin-bar-desktop: 32px; --page-bar-height: 40px; /* ── Navigation ─────────────────────────────────────── */ --nav-text: var(--black); --nav-hover-bg: var(--accent); /* ── Nav submenu (dropdown panel) ─────────────────────── Was a --brand-dark panel with --brand-light hover rows. Restyled 2026-09-12 to the white floating panel in the approved mockup: the panel now reads as a sheet of the page lifted above the header rather than as a block of brand colour, and --accent is the ONE colour in it — the rule that wipes in under the hovered row, the same gesture the top-level nav links already make. Keep it that way: a second coloured element here costs the underline its meaning. --nav-submenu-hover is retained (rather than deleted) as the row background, but is now a barely-there neutral wash instead of --brand-light. Rows need *some* hit feedback beyond the underline for anyone who reads shape faster than colour. */ --nav-submenu-bg: var(--surface); --nav-submenu-text: var(--text); --nav-submenu-hover: var(--surface-alt); --nav-submenu-radius: 12px; --nav-submenu-shadow: 0 12px 32px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.04); --nav-submenu-width: 230px; /* Vertical travel of the open animation, and the height of the invisible bridge that keeps :hover alive across the gap between the nav bar and the panel. The bridge must be >= the offset or the panel animates out from under the cursor and shuts itself. */ --nav-submenu-rise: 6px; --nav-submenu-gap: 10px; --nav-submenu-duration: 0.2s; /* ── Logo marquee ─────────────────────────────────────── Defaults for [rw_logo_marquee] (includes/logo-marquee.php, css/14-logos.css). The shortcode writes all three as inline custom properties on its wrapper, so these are what a marquee gets when an attribute is left off — and they are the ONLY place the defaults live. 14-logos.css deliberately uses bare var() with no fallback so there is one source of truth rather than two that can drift. --rw-logo-gap is the room each logo occupies beyond its own width. It is applied as margin-right on the item, never as `gap` on the track; see 14-logos.css for why that distinction is what makes the loop seamless. */ --rw-logo-speed: 46s; --rw-logo-height: 40px; --rw-logo-gap: 64px; /* ── Footer ───────────────────────────────────────────── The footer is its own surface, not a reuse of --brand-dark. Both values are sampled from the approved 2026-09-12 mockup and are markedly darker than --brand-dark (#01385b): the footer is meant to recede and ground the page, where --brand-dark is a mid-navy doing active work in section bands and .btn-navy. Snapping them together was considered and rejected — it would also collapse the two bands into one flat slab, since the upper/lower split is carried entirely by these two values. --footer-rule is one token for every hairline in the footer: the border between the bands, the divider under the company name, the social icon boxes and the footer menu buttons. They are all the same idea — a faint white edge on deep navy — so they move together. Expressed as translucent white rather than a mixed hex so it stays correct if either band colour is retuned. */ --footer-bg: #002136; --footer-bar-bg: #001624; --footer-text: #cad1d5; --footer-rule: rgba(255, 255, 255, 0.12); /* Sized here rather than in the rule because it is the one footer value likely to be nudged by eye. The SVG is 198px wide natively and is scaled UP — safe, it is vector. */ --footer-logo-w: 200px; /* Social icon box. 60px square with a 15px gap, measured off the mockup. */ --footer-social-size: 60px; /* ── Logo ───────────────────────────────────────────── */ /* Sized by MAX-HEIGHT, not width or height. `width: auto` + a fixed `height` does not work on this logo: the browser resolves the auto width from the SVG's intrinsic 326px rather than from the height and its ratio, so the box stayed 335px wide at 80px tall and the artwork was distorted (measured ratio 4.18 against a natural 3.23). max-height with both dimensions auto is the responsive idiom that cannot distort, and it animates cleanly for the shrink transition. */ --logo-height: 104px; --logo-height-scrolled: 80px; /* Gap under the phone number, and the tightened value used once the header shrinks so the nav column stays inside the 100px. */ --header-phone-gap: 30px; --header-phone-gap-scrolled: 8px; /* One duration for everything that moves when the header shrinks. */ --header-transition: 0.2s ease-in-out; /* ── Nav Typography ─────────────────────────────────── */ /* Stepped, not clamped. The 2026-09-05 header diagrams call for specific values at specific widths rather than a continuous ramp, and because every nav rule in 04-header.css reads these two tokens, the entire desktop half of that spec is expressible as token redefinition — see the media queries at the foot of this file. No selector in 04-header.css changes for it. */ --nav-font-size: 15px; --nav-padding-x: 20px; /* ── Header geometry (2026-09-05 diagrams) ──────────── */ /* 100px = 10px padding + an 80px logo + 10px padding. Used for the scrolled/shrunk desktop header and for the fixed header below 992px. */ --header-height-scrolled: 100px; --logo-height-scrolled: 80px; --header-pad-block: 10px; /* Full-bleed page furniture (top bar and header) sits this far from each viewport edge instead of inside the 1140px .container the page content uses — roughly 48px at 1920px and ~45px at 1024px, per the diagrams. Named --page-* rather than --header-* because both bands consume it and they must not drift apart: the top bar's text is meant to line up with the logo below it. */ --page-pad-inline: clamp(20px, 2.5vw, 48px); /* ── Body text ──────────────────────────────────────── */ --p-size: clamp(14px, 1.5vw, 17px); } /* Desktop nav steps, from the 2026-09-05 header diagrams. Ordered widest-first so the narrower query wins where they overlap. Redefining tokens rather than re-declaring rules keeps the whole spec to eight lines. */ @media (max-width: 1280px) { :root { --nav-padding-x: 15px; } } /* 1160, not the 1100 the diagrams specify. MEASURED 2026-09-15: at 15px the seven items plus the CTA need 802px, and the nav column gives them that down to exactly 1136px — 1135px is one pixel short and the menu drops onto a second line. The 10px step recovered it, but only from 1100, leaving a 35px-wide band (1101-1135) wrapped. Moved to 1160 rather than to 1136 so the step is not sitting on the edge it was added to clear: at 1136 the slack is zero, so a menu item gaining a word — or a font rendering a hair wider — would put the wrap back somewhere above it. The cost is that 1136-1160 now uses the tighter padding it did not strictly need, which is a 24px band and not visible without a ruler. */ @media (max-width: 1160px) { :root { --nav-padding-x: 10px; } } @media (max-width: 1024px) { :root { --nav-font-size: 14px; } } @media (max-width: 992px) { :root { --nav-font-size: 13px; } } /* Below the nav breakpoint the logo shares a 33.33% column, so it needs its own ceiling: the intrinsic 326px would otherwise cap against the column width and come out ~88px tall at 991px, pushing the header past the specified 100px. */ @media (max-width: 991px) { :root { --logo-height: 64px; } } /* Gravity Forms (Orbital) is themed in 07-forms.css, not here. A block of --gf-* assignments used to sit at this spot. It was moved 2026-09-14 rather than extended, for two reasons. It was a RULE, not a token definition, so it did not belong in the token layer; and at `.gform-theme--*` it scored 0-1-0, the same as Gravity Forms' own defaults, which are enqueued after every file in css/ and therefore won — the assignments here were dead. 07-forms.css restates them at 0-2-0. See the header of that file. */