/* ============================================================================= Raven Tech — Global chrome (Phase 2) Top bar (node 3:30) + nav bar (node 4:83) + footer incl. certification strip (node 7:542 / 7:585). OWNED BY PHASE 2 — do not edit from other phases (page-section styles live in the sibling section files). ========================================================================== */ /* --------------------------------------------------------------- rt-header */ /* `display: contents`:

stays a real landmark element (and class selectors like `.rt-header.is-scrolled .rt-navbar` still match — contents only drops the generated box, not the element from the DOM/cascade), but stops being a containing block. Without this, .rt-navbar-wrap's sticky positioning is confined to .rt-header's own box — which is only as tall as the top bar + nav themselves — so it "runs out of parent" and scrolls away with everything else the instant you pass the top bar. With `contents`, the effective containing block becomes (spans the whole page), so the nav sticks for the entire scroll as intended. */ .rt-header { display: contents; } /* ---------------------------------------------------------------- top bar */ .rt-topbar { background: var(--rt-black); min-height: 55px; } /* Both bars run the full browser width with edge padding (no .rt-wrap cap): top bar = contact left / socials right, nav = logo+menu left / CTA right. */ .rt-topbar__inner { min-height: 55px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-top: 10px; padding-bottom: 10px; padding-left: max(20px, min(3vw, 48px)); padding-right: max(20px, min(3vw, 48px)); } .rt-topbar__contact { display: flex; align-items: center; flex-wrap: wrap; gap: 14px max(20px, min(3vw, 40px)); min-width: 0; } .rt-topbar__item { display: inline-flex; align-items: center; gap: 8px; color: var(--rt-white); font: 400 16px/1.3 var(--rt-font-body); text-decoration: none; min-width: 0; } .rt-topbar__item--address span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.rt-topbar__item:hover { color: var(--rt-white-soft); } .rt-topbar__icon { width: 16px; height: 16px; flex: none; } .rt-topbar__social { display: flex; align-items: center; gap: 16px; flex: none; } /* facebook/instagram/linkedin sprite symbols use fill="currentColor" (the phone/pin/shield icons keep their baked-in red gradient) so the same glyph can flip from white (top bar, black background) to black (footer, white background) via this `color` property — never override `fill` here. */ .rt-social__link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; line-height: 0; color: var(--rt-white); } .rt-social__icon { width: 24px; height: 24px; } /* ----------------------------------------------------------------- nav bar */ /* Sticky lives on the wrapper (not the bar itself) so the top bar — a normal block above it — scrolls away first; the nav then sticks flush at top:0. */ .rt-navbar-wrap { position: -webkit-sticky; position: sticky; top: 0; z-index: 90; } body.admin-bar .rt-navbar-wrap { top: 32px; } @media (max-width: 782px) { body.admin-bar .rt-navbar-wrap { top: 46px; } } .rt-navbar { background: var(--rt-nav-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--rt-shadow-nav); transition: box-shadow 0.2s ease; } .rt-header.is-scrolled .rt-navbar { box-shadow: 0 4px 20px 6px rgba(0, 0, 0, 0.16); } .rt-navbar__inner { display: flex; align-items: center; gap: max(12px, min(2vw, 40px)); padding-top: 22px; padding-bottom: 22px; padding-left: max(20px, min(3vw, 48px)); padding-right: max(20px, min(3vw, 48px)); } .rt-navbar__logo { flex: none; display: block; line-height: 0; } .rt-navbar__logo img { display: block; width: max(180px, min(17vw, 232px)); max-width: 38vw; height: auto; } .rt-navbar__nav { flex: 1 1 auto; min-width: 0; } .rt-navbar__menu { display: flex; align-items: center; flex-wrap: nowrap; gap: max(14px, min(2.2vw, 40px)); list-style: none; margin: 0; padding: 0; } .rt-navbar__menu a { display: inline-block; font: 400 16px/1.3 var(--rt-font-body); text-transform: uppercase; white-space: nowrap; color: var(--rt-black); text-decoration: none; padding: 4px 0; } .rt-navbar__menu a:hover, .rt-navbar__menu .current-menu-item a, .rt-navbar__menu .current_page_item a { color: var(--rt-red-mid); } .rt-navbar__cta { flex: none; margin-left: auto; /* pins the CTA to the right edge; logo + menu stay left */ white-space: nowrap; } /* Mobile hamburger toggle: hidden on desktop, shown ≤1024px. */ .rt-header__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px; margin-left: auto; cursor: pointer; flex: none; position: relative; z-index: 70; } .rt-header__toggle-bar { width: 24px; height: 2px; background: var(--rt-black); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .rt-header__toggle[aria-expanded="true"] .rt-header__toggle-bar:nth-of-type(2) { transform: translateY(7px) rotate(45deg); } .rt-header__toggle[aria-expanded="true"] .rt-header__toggle-bar:nth-of-type(3) { opacity: 0; } .rt-header__toggle[aria-expanded="true"] .rt-header__toggle-bar:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); } /* ------------------------------------------------------------ mobile drawer */ /* The [hidden] display is overridden (kept in the flex layout, just slid fully off-screen) so the open/close transform can transition; main.js still toggles the hidden attribute/aria-expanded exactly as authored. */ /* top: below the topbar + nav bar (≤1024px header height tops out around 163px at the 1024px breakpoint and shrinks to ~140px by 390px) so the panel never starts underneath the still-visible header/toggle. */ .rt-mobile-nav { position: fixed; top: 168px; right: 0; bottom: 0; width: min(86vw, 360px); z-index: 60; background: var(--rt-black); padding: 32px; display: flex; flex-direction: column; gap: 28px; overflow-y: auto; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25); transform: translateX(100%); transition: transform 0.3s ease; } /* Override the UA `[hidden]{display:none}` so the transform transition can still play (display:none can't be transitioned) — the panel just sits fully off-screen and non-interactive instead of being removed outright. */ .rt-mobile-nav[hidden] { display: flex; pointer-events: none; } .rt-mobile-nav:not([hidden]) { transform: translateX(0); } .rt-mobile-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .rt-mobile-nav__list a { display: block; padding: 12px 0; font: 400 18px/1.3 var(--rt-font-body); text-transform: uppercase; color: var(--rt-white); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .rt-mobile-nav__cta { align-self: flex-start; } /* Dim backdrop behind the open drawer. */ html.rt-nav-open body::after { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 55; background: rgba(0, 0, 0, 0.45); } html.rt-nav-open { overflow: hidden; } @media (max-width: 1024px) { .rt-navbar__nav, .rt-navbar__cta { display: none; } .rt-header__toggle { display: flex; } } @media (max-width: 768px) { .rt-topbar__item--address { display: none; } } @media (max-width: 390px) { .rt-topbar__inner { gap: 10px 16px; } .rt-topbar__social { gap: 10px; } .rt-navbar__logo img { width: 168px; } } /* ------------------------------------------------------- certification strip */ .rt-cert-strip { background: var(--rt-black); } .rt-cert-strip__inner { min-height: 63px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px max(16px, min(3vw, 32px)); padding-top: 12px; padding-bottom: 12px; text-align: center; } .rt-cert-strip__brand { display: inline-flex; align-items: center; font: 700 24px/1.1 var(--rt-font-heading); color: var(--rt-white); white-space: nowrap; } /* Real SIA badge when one is uploaded — capped to the 63px strip, whatever the source asset's dimensions are. */ .rt-cert-strip__badge { display: block; height: 38px; width: auto; max-width: 180px; object-fit: contain; } .rt-cert-strip__member { font: 400 16px/1.3 var(--rt-font-body); color: var(--rt-white); white-space: nowrap; } .rt-cert-strip__divider { display: inline-block; width: 1px; height: 29px; background: rgba(255, 255, 255, 0.35); } .rt-cert-strip__install { display: inline-flex; align-items: center; gap: 10px; font: 400 16px/1.3 var(--rt-font-body); color: var(--rt-white); white-space: nowrap; } .rt-cert-strip__shield { width: 21px; height: 22px; flex: none; } /* Award badge — homepage strip only (the footer prints the same `footer_logo` image in its own column). The seal carries fine print, so it is sized well past the SIA badge and the strip grows past its 63px design height to suit; the negative margin claws back the strip's own padding so the growth is only as much as the badge actually needs. */ .rt-cert-strip__award { display: inline-flex; align-items: center; } .rt-cert-strip__awardimg { display: block; width: 100px; height: auto; object-fit: contain; margin-top: -6px; margin-bottom: -6px; } @media (max-width: 480px) { .rt-cert-strip__divider { display: none; } } /* ------------------------------------------------------------------ footer */ .rt-footer { background: var(--rt-white); } .rt-footer__inner { display: grid; grid-template-columns: minmax(220px, 1.35fr) minmax(140px, 1fr) minmax(140px, 1fr) auto; gap: 32px max(24px, min(4vw, 64px)); padding-top: 64px; padding-bottom: 40px; } .rt-footer__brand { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .rt-footer__contact { display: flex; flex-direction: column; gap: 10px; } .rt-footer__contact-item { display: inline-flex; align-items: flex-start; gap: 10px; color: var(--rt-ink-soft); font: 400 16px/1.4 var(--rt-font-body); text-decoration: none; } a.rt-footer__contact-item:hover { color: var(--rt-black); } .rt-footer__contact-icon { width: 16px; height: 16px; flex: none; margin-top: 3px; } .rt-footer__social { display: flex; align-items: center; gap: 16px; } .rt-footer__social .rt-social__link { color: var(--rt-black); } .rt-footer__col { min-width: 0; } .rt-footer__col--company { grid-column: 2; } .rt-footer__col--touch { grid-column: 3; } .rt-footer__heading { position: relative; margin: 0 0 22px; padding-bottom: 16px; font: 700 16px/1.2 var(--rt-font-heading); color: var(--rt-black); text-transform: none; } .rt-footer__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 43px; height: 2px; background: var(--rt-gradient); } .rt-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .rt-footer__links a { font: 400 16px/1.3 var(--rt-font-body); color: var(--rt-ink-soft); text-decoration: none; } .rt-footer__links a:hover { color: var(--rt-black); } /* * Single partner logo, no box: it sits on the footer's own white, so it is * sized off the image itself. Left as a plain block (no flex) so the editor's * `.rt-edit-empty { display: none }` still hides the empty-slot placeholder. */ .rt-footer__logos { grid-column: 4; } .rt-footer__logos img { display: block; width: auto; height: auto; max-width: 100%; max-height: 110px; } .rt-footer__bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; } .rt-footer__copy { color: var(--rt-ink-soft); margin: 0; } .rt-footer__credit { display: inline-flex; align-items: center; gap: 8px; color: var(--rt-ink-soft); font: 400 14px/1 var(--rt-font-body); text-decoration: none; } .rt-footer__credit img { display: block; width: 158px; height: 20px; } .rt-footer__credit:hover { color: var(--rt-black); } @media (max-width: 1024px) { .rt-footer__inner { grid-template-columns: 1fr 1fr; } .rt-footer__brand { grid-column: 1 / -1; } .rt-footer__col--company { grid-column: 1; } .rt-footer__col--touch { grid-column: 2; } .rt-footer__logos { grid-column: 1 / -1; } } @media (max-width: 768px) { .rt-footer__inner { grid-template-columns: 1fr; } .rt-footer__col--company, .rt-footer__col--touch { grid-column: 1; } .rt-footer__logos { grid-column: 1; } .rt-footer__bottom { justify-content: flex-start; } } /* ============================================================================= LEGACY FALLBACK — flexbox `gap` `gap` only works on flex containers from Safari 14.1; before that it is ignored outright and every flex row/stack in this file collapses to zero spacing. WebKit shipped flex `gap` and the `inset` shorthand in the same release, so `@supports not (inset: 0)` is an exact probe for "this engine has no flex gap" on Safari (and only catches a few pre-2020 Chrome/Firefox builds, which get the same correct spacing anyway). Recipes below, matching each container's direction: column -> `> * + *` margin-top row, no wrap -> `> * + *` margin-left row + wrap -> margin-bottom on every child + margin-right on all but the last, with a negative margin-bottom on the container cancelling the trailing row. Containers that are themselves children of another wrapping container skip that compensation, since their parent already sets margin-bottom on them. Modern browsers never see any of this. ========================================================================== */ @supports not (inset: 0) { /* column stacks */ .rt-header__toggle > * + * { margin-top: 5px; } .rt-mobile-nav > * + * { margin-top: 28px; } .rt-mobile-nav__list > * + * { margin-top: 4px; } .rt-footer__brand > * + * { margin-top: 20px; } .rt-footer__contact > * + * { margin-top: 10px; } .rt-footer__links > * + * { margin-top: 14px; } /* single-line rows */ .rt-topbar__item > * + * { margin-left: 8px; } .rt-topbar__social > * + * { margin-left: 16px; } .rt-navbar__inner > * + * { margin-left: max(12px, min(2vw, 40px)); } .rt-navbar__menu > * + * { margin-left: max(14px, min(2.2vw, 40px)); } .rt-cert-strip__install > * + * { margin-left: 10px; } .rt-footer__contact-item > * + * { margin-left: 10px; } .rt-footer__social > * + * { margin-left: 16px; } .rt-footer__credit > * + * { margin-left: 8px; } /* wrapping rows */ .rt-topbar__inner > * { margin-bottom: 12px; } .rt-topbar__inner > *:not(:last-child) { margin-right: 24px; } .rt-topbar__inner { margin-bottom: -12px; } /* nested inside .rt-topbar__inner, which already gives it a bottom margin — compensating again here would cancel that row gap. */ .rt-topbar__contact > * { margin-bottom: 14px; } .rt-topbar__contact > *:not(:last-child) { margin-right: max(20px, min(3vw, 40px)); } .rt-cert-strip__inner > * { margin-bottom: 16px; } .rt-cert-strip__inner > *:not(:last-child) { margin-right: max(16px, min(3vw, 32px)); } .rt-cert-strip__inner { margin-bottom: -16px; } .rt-footer__bottom > * { margin-bottom: 16px; } .rt-footer__bottom > *:not(:last-child) { margin-right: 16px; } .rt-footer__bottom { margin-bottom: -16px; } @media (max-width: 390px) { .rt-topbar__inner > * { margin-bottom: 10px; } .rt-topbar__inner > *:not(:last-child) { margin-right: 16px; } .rt-topbar__inner { margin-bottom: -10px; } .rt-topbar__social > * + * { margin-left: 10px; } } }