/* --------------------------------------------------------------------------- rb26 — core --------------------------------------------------------------------------- The shared design system for every template built on rb26: tokens, type, buttons, section furniture, cards, split panels and the scroll reveal. Loaded ONLY on those templates (see nimva_child_enqueue_rb26_assets in functions.php), so nothing here can affect the other ~70 WPBakery pages. Page-specific components live in css/rb26-.css, which depends on this handle and therefore always loads after it. Everything is scoped under .rb26. That is deliberate defensive scoping: the parent theme ships a 220 KB stylesheet full of loose element selectors, and nimva-child/style.css layers ~400 lines of !important on top of it. A single root class keeps this file from being dragged into either fight, and means a future maintainer can delete the whole homepage by deleting one directory. Colours are the official palette from BRAND.md. Do not hardcode hex values below the :root block — use the tokens, so a brand refresh is a one-line edit. --------------------------------------------------------------------------- WARNING — ALWAYS SET color EXPLICITLY ON HEADINGS --------------------------------------------------------------------------- Nimva emits dynamic CSS inline in , built from its theme options. Among it are bare element rules: h1 { color: #000000; } h3 { color: #282828; } h5 { color: #000000; } A rule that targets the element directly ALWAYS beats an inherited value, no matter how specific the ancestor's rule is. So this does not work: .rb26-hero { color: #fff; } /* h1 inside still renders #000000 */ Setting color on a container is therefore not enough for any h1–h6 inside it. Every heading in this file needs its own explicit `color`. Two were missed on the first pass and rendered near-black — the hero headline on the blue gradient, and the About Us / Investors headings over their photographs. Links are already covered: `.rb26 a { color: inherit }` near the top of this file neutralises the same problem for anchors. --------------------------------------------------------------------------- */ /* Self-hosted Inter. Deliberately NOT loaded from fonts.googleapis.com: this site runs TrustArc consent management, and a third-party font request fires before consent is collected. Serving it ourselves keeps the page a single-origin request and removes the compliance question entirely. Variable font, weights 300–900 in one file per subset. */ @font-face { font-family: "InterLocal"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "InterLocal"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } .rb26 { /* Primary palette — BRAND.md */ --rb-black: #000000; --rb-dark-blue: #00508c; --rb-medium-blue: #177cb2; --rb-light-blue: #21b8f2; /* Primary gradient */ --rb-grad-1: #2093bf; --rb-grad-2: #065896; --rb-grad-3: #041b4b; /* Secondary — brand-reference use ONLY (Ritchie Bros. orange, IAA red) */ --rb-orange: #e87511; --rb-red: #c90107; /* Sampled from the Veritread wordmark, not from BRAND.md — the brand sheet defines secondary colours for Ritchie Bros. and IAA only. Same rule applies: used solely to identify Veritread, never as a general accent. */ --rb-veritread: #ffc82d; /* Neutrals. Not in the brand sheet, which defines no grey ramp; these are derived from --rb-grad-3 so they sit in the same blue family rather than reading as a second, unrelated grey. */ --rb-ink: #0b1a2b; --rb-body: #41546a; --rb-hairline: #dde5ee; --rb-tint: #f4f8fc; --rb-white: #ffffff; --rb-max: 1280px; --rb-radius: 18px; --rb-pill: 999px; /* brand sheet: "CTA buttons should have a 999 radius" */ --rb-shadow: 0 2px 4px rgba(4, 27, 75, 0.04), 0 12px 32px rgba(4, 27, 75, 0.08); --rb-shadow-lift: 0 4px 8px rgba(4, 27, 75, 0.06), 0 24px 56px rgba(4, 27, 75, 0.16); --rb-ease: cubic-bezier(0.16, 1, 0.3, 1); font-family: "InterLocal", "Inter", "Manrope", Arial, sans-serif; color: var(--rb-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The parent theme wraps page content in #content with its own padding and emits a breadcrumb title block. A full-bleed hero needs neither. */ .rb26 * { box-sizing: border-box; } .rb26 img { max-width: 100%; height: auto; } .rb26 h1, .rb26 h2, .rb26 h3, .rb26 p, .rb26 ul { margin: 0; padding: 0; } .rb26 ul { list-style: none; } .rb26 a { text-decoration: none; color: inherit; } .rb26-shell { max-width: var(--rb-max); margin: 0 auto; /* Scales with viewport instead of a flat 24px, so the gutter keeps pace on large screens rather than looking cramped relative to --rb-max. */ padding: 0 clamp(20px, 5vw, 64px); } /* --------------------------------------------------------------------------- Scroll reveal --------------------------------------------------------------------------- Elements start translated + transparent and are released by an IntersectionObserver adding .is-in (see js/rb26.js). .rb26-reveal is applied by JS on load, NOT in the markup. If JS fails or is blocked, no element ever gets the hidden state, so the page renders fully visible. Progressive enhancement, not a dependency. --------------------------------------------------------------------------- */ .rb26-js .rb26-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--rb-ease), transform 0.7s var(--rb-ease); } .rb26-js .rb26-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rb26-js .rb26-reveal, .rb26-js .rb26-reveal.is-in { opacity: 1; transform: none; transition: none; } .rb26 *, .rb26 *::before, .rb26 *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* --------------------------------------------------------------------------- Buttons — brand sheet rules: 999 radius, sentence case, no punctuation, 19pt minimum. 19pt ≈ 25px; that is the brand's print-oriented floor and is very large for a web button, so the web interpretation used here is 19px, which is still well above the 16px default and keeps the CTA legible. --------------------------------------------------------------------------- */ .rb26-btn { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; line-height: 1; padding: 18px 34px; border-radius: var(--rb-pill); border: 2px solid transparent; cursor: pointer; transition: transform 0.3s var(--rb-ease), background-color 0.3s var(--rb-ease), color 0.3s var(--rb-ease), border-color 0.3s var(--rb-ease), box-shadow 0.3s var(--rb-ease); } .rb26-btn:hover { transform: translateY(-2px); } /* `a.` (not bare `.`) on every colour variant below is load-bearing: plain `.rb26-btn--white` is a one-class selector, specificity (0,1,0), which loses to `.rb26 a { color: inherit }` above — (0,1,1), one class plus the `a` element — regardless of which comes first in the file. Every rb26 button is always rendered as an ``, so qualifying the selector with `a` ties the specificity and this later declaration wins the tie. Drop the `a` and every button's text silently falls back to inherited section colour again (this is exactly how the hero "View all brands" CTA went white-on-white). */ a.rb26-btn--primary { background: var(--rb-dark-blue); color: var(--rb-white); box-shadow: 0 8px 24px rgba(0, 80, 140, 0.32); } a.rb26-btn--primary:hover { background: var(--rb-black); color: var(--rb-white); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); } a.rb26-btn--ghost { background: transparent; color: var(--rb-white); border-color: rgba(255, 255, 255, 0.65); } a.rb26-btn--ghost:hover { background: var(--rb-white); color: var(--rb-grad-3); border-color: var(--rb-white); } a.rb26-btn--outline { background: var(--rb-white); color: var(--rb-dark-blue); border-color: var(--rb-dark-blue); } a.rb26-btn--outline:hover { background: var(--rb-dark-blue); color: var(--rb-white); } /* * Colour variants, on top of the shape/size .rb26-btn already sets. * * Added 2026-08-24 to consolidate what had been five-plus separate, * page-scoped copies of the same two or three colour recipes — the * homepage, About, and Brand templates had each independently re-declared * "white by default, light blue on hover" (and similar) by hand, targeting * their own section's class or #id. Use ONE of these instead of --primary * when a CTA needs a different colour than the default dark-blue/black-hover * — e.g. `rb26-btn rb26-btn--white` rather than `rb26-btn rb26-btn--primary` * plus a new one-off selector somewhere. Add a new variant here — not a new * per-page override — the next time an existing one doesn't fit. */ /* White by default, light blue on hover; ink text throughout. For a primary-weight CTA sitting on a dark or coloured section, where the default dark-blue fill would disappear into the background. */ a.rb26-btn--white { background: var(--rb-white); color: var(--rb-ink); border-color: var(--rb-white); } a.rb26-btn--white:hover { background: var(--rb-light-blue); color: var(--rb-ink); border-color: var(--rb-light-blue); } /* Dark blue by default (white text), light blue on hover (ink text). For a primary-weight CTA on a section light enough that white would disappear instead, but where --primary's black hover reads as too heavy. */ a.rb26-btn--blue { background: var(--rb-dark-blue); color: var(--rb-white); border-color: var(--rb-dark-blue); } a.rb26-btn--blue:hover { background: var(--rb-light-blue); color: var(--rb-ink); border-color: var(--rb-light-blue); } /* Light blue always, white text always — no colour change on hover (only the shared .rb26-btn:hover lift still applies). For a CTA that should already read as "the accent colour" rather than needing hover to introduce it. */ a.rb26-btn--light-blue, a.rb26-btn--light-blue:hover { background: var(--rb-light-blue); color: var(--rb-white); border-color: var(--rb-light-blue); } /* Removed site-wide per edit request 2026-08-21 (was a decorative hover chevron after "Learn more" / CTA labels). The markup still emits