/* AUTO-GENERATED by scripts/patch-webflow-chrome.mjs — do not edit by hand.
* Re-run `npm run patch-webflow` whenever the React Navbar/Footer change. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&family=Source+Serif+4:wght@300;400;500&display=swap');
/* Kill horizontal overflow. Many Webflow pages ship decorative elements
* (hero line art, oversized background images) that intentionally bleed
* past the viewport — the live Webflow-hosted site clipped them, but the
* static export does not, so the page scrolls sideways. That sideways
* scroll drags our sticky navbar with it and pushes the right-aligned
* hamburger off-screen. overflow-x:clip removes the horizontal scroll
* WITHOUT creating a scroll container, so the sticky navbar + the fixed
* mobile drawer keep sizing to the viewport and behaving correctly.
* (Vertical scrolling is untouched — clip doesn't force overflow-y.) */
html { overflow-x: clip; }
.v3nav, .v3footer {
--v3-navy: #000b30;
--v3-text-primary: #262626;
--v3-text-body: #404040;
--v3-text-muted: #737373;
--v3-text-inverse: #ffffff;
--v3-surface: #f5f5f5;
--v3-surface-muted: #ebebeb;
--v3-surface-elevated: #ffffff;
--v3-border: #e5e5e5;
--v3-border-strong: #d4d4d4;
--v3-font-body: 'Poppins', system-ui, sans-serif;
--v3-font-display: 'Source Serif 4', 'Source Serif Pro', serif;
--v3-page-x: 4rem;
--v3-nav-h: 4.5rem;
--v3-container: 80rem; /* max-w-site (1280px) */
}
/* Reset for everything inside the chrome — Webflow's own selectors
* (e.g. body { font-family: 'Open Sans' }, element margins, box-sizing)
* otherwise leak in and corrupt the chrome's fonts + layout. This uses
* NORMAL specificity (NOT :where) so it reliably beats Webflow: chrome.css
* is injected LAST in , so on equal specificity our rules win.
*
* The ONE thing we deliberately DON'T reset here is anchor colour.
* A ".v3nav a { color: inherit }" rule (specificity 0,1,1) would out-rank
* the CTA's own ".v3nav__btn--primary { color: #fff }" (0,1,0) and wash
* the button text out. Instead color:inherit rides the universal
* selector (0,1,0); every component colour rule (also 0,1,0, defined
* later in the file) then wins cleanly by source order. */
.v3nav, .v3nav *, .v3footer, .v3footer * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--v3-font-body);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
color: inherit;
}
.v3nav ul, .v3footer ul {
list-style: none;
}
.v3nav a, .v3footer a {
text-decoration: none; /* colour intentionally NOT reset here */
}
.v3nav button, .v3footer button {
background: none;
border: 0;
font: inherit;
cursor: pointer;
}
.v3nav img, .v3footer img {
display: block;
max-width: 100%;
height: auto;
}
.v3nav svg, .v3footer svg {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
}
/* ── NAVBAR ───────────────────────────────────────────────────────────── */
.v3nav {
position: sticky;
top: 0;
z-index: 50;
background: var(--v3-surface);
border-bottom: 1px solid var(--v3-border);
color: var(--v3-text-body);
}
/* Centered max-w-site container with responsive gutters.
* Nav padding: px-4 / sm:px-8 (640) / lg:px-page-x (1024) — matches
* Navbar.tsx 'mx-auto max-w-site px-4 sm:px-8 lg:px-page-x'. */
.v3nav__container {
margin: 0 auto;
width: 100%;
max-width: var(--v3-container);
padding: 0 1rem;
}
@media (min-width: 640px) { .v3nav__container { padding: 0 2rem; } }
@media (min-width: 1024px) { .v3nav__container { padding: 0 var(--v3-page-x); } }
.v3nav__inner {
display: flex;
align-items: center;
gap: 1.5rem; /* gap-6; xl:gap-10 below */
height: calc(var(--v3-nav-h) - 1px);
}
@media (min-width: 1280px) { .v3nav__inner { gap: 2.5rem; } }
.v3nav__brand {
display: inline-flex;
align-items: center;
flex-shrink: 0;
color: var(--v3-text-primary);
}
.v3nav__brand svg {
height: 1.5rem; /* 24px — matches React TurneoLogo default */
width: auto;
}
/* Desktop nav row appears at xl (1280px) — every tablet gets the
* hamburger drawer instead (matches Navbar.tsx 'hidden xl:block'). */
.v3nav__menu {
display: none;
align-self: stretch; /* fill navbar height so child s can too */
}
@media (min-width: 1280px) {
.v3nav__menu { display: flex; align-items: stretch; }
}
.v3nav__top {
display: flex;
gap: 1.5rem;
height: 100%; /* span the full navbar height */
}
.v3nav__top-item {
position: static; /* panel uses fixed positioning anyway */
display: flex;
align-items: center; /* keep link visually centred inside the tall */
}
.v3nav__top-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.5rem 0;
font-size: 1.125rem; /* text-lg */
font-weight: 300; /* font-light */
color: var(--v3-text-body);
transition: color 0.15s ease;
}
.v3nav__top-link:hover,
.v3nav__top-item--has-panel:hover .v3nav__top-link,
.v3nav__top-item--has-panel:focus-within .v3nav__top-link {
color: var(--v3-text-primary);
}
.v3nav__top-chevron {
transition: transform 0.2s ease;
}
.v3nav__top-item--has-panel:hover .v3nav__top-chevron,
.v3nav__top-item--has-panel:focus-within .v3nav__top-chevron {
transform: rotate(180deg);
}
.v3nav__actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.75rem; /* gap-3; xl:gap-4 below */
}
@media (min-width: 1280px) { .v3nav__actions { gap: 1rem; } }
.v3nav__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.v3nav__btn--ghost {
color: var(--v3-text-primary);
background: transparent;
border: 1px solid transparent;
}
.v3nav__btn--ghost:hover {
background: var(--v3-surface-muted);
}
.v3nav__btn--primary {
color: var(--v3-text-inverse);
background: var(--v3-navy);
border: 1px solid var(--v3-navy);
}
.v3nav__btn--primary:hover {
background: #1a2557;
border-color: #1a2557;
}
/* Top-bar CTAs only at xl+; below that they live in the drawer. */
.v3nav__btn--desktop { display: none; }
@media (min-width: 1280px) { .v3nav__btn--desktop { display: inline-flex; } }
/* ── HAMBURGER ─────────────────────────────────────────────────────────── */
/* 48x48 tap target (>=44px Apple HIG), 24px icon, slight negative right
* margin so the icon's optical edge lines up with the page gutter. */
.v3nav__hamburger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-right: -0.5rem;
color: var(--v3-text-primary);
}
@media (min-width: 1280px) { .v3nav__hamburger { display: none; } }
.v3nav__hamburger-icon { display: inline-flex; }
/* Swap menu <-> close based on the drawer's open state. */
.v3nav__hamburger-icon--close { display: none; }
.v3nav__hamburger[aria-expanded="true"] .v3nav__hamburger-icon--menu { display: none; }
.v3nav__hamburger[aria-expanded="true"] .v3nav__hamburger-icon--close { display: inline-flex; }
/* ── DROPDOWN PANEL (CSS-only) ────────────────────────────────────────── */
.v3nav__panel {
position: fixed;
left: 0;
right: 0;
/* Sit flush against the navbar's bottom border (overlap the 1px) so
* there is NO dead zone between the full-height trigger and the
* panel — the cursor can travel from the link straight into the panel
* without ever leaving the :hover chain. */
top: calc(var(--v3-nav-h) - 1px);
z-index: 40;
background: var(--v3-surface);
border-bottom: 1px solid var(--v3-border);
box-shadow: 0 24px 48px -24px rgba(0,0,0,0.12);
opacity: 0;
transform: translateY(-4px);
/* CSS hover-intent: the panel CLOSES on a delay. A diagonal cursor
* move from the (narrow, text-width) trigger toward the panel briefly
* exits the trigger li x-range into the 1.5rem gap between nav items.
* Without a delay, hover drops for that instant and the panel snaps
* shut before the cursor arrives. We use visibility (NOT
* pointer-events) for the non-interactive state because visibility
* can be transition-DELAYED: the panel stays a hover target for the
* whole close window, so re-entering it (it is a DOM child of the
* trigger li) restores hover and cancels the close. */
visibility: hidden;
transition:
opacity 0.2s ease 0.2s,
transform 0.2s ease 0.2s,
visibility 0s linear 0.4s;
}
.v3nav__top-item--has-panel:hover .v3nav__panel,
.v3nav__top-item--has-panel:focus-within .v3nav__panel {
opacity: 1;
transform: translateY(0);
visibility: visible;
/* Opening is immediate — no delay. */
transition:
opacity 0.15s ease 0s,
transform 0.15s ease 0s,
visibility 0s linear 0s;
}
.v3nav__panel-inner {
padding: 2rem var(--v3-page-x);
}
.v3nav__grid {
display: grid;
align-items: start;
}
.v3nav__grid--3 {
grid-template-columns: repeat(3, 1fr);
column-gap: 5rem;
}
.v3nav__grid--card {
grid-template-columns: 1fr 1fr 400px;
column-gap: 4rem;
}
.v3nav__group-heading {
display: flex;
align-items: center;
gap: 0.625rem;
padding-bottom: 1rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--v3-border);
font-size: 0.875rem;
font-weight: 400;
color: var(--v3-text-primary);
}
.v3nav__list > li + li {
border-top: 1px solid var(--v3-border);
}
.v3nav__item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 0.75rem;
margin: 0 -0.75rem;
transition: background-color 0.15s ease;
}
.v3nav__item:hover {
background: var(--v3-surface-elevated);
}
.v3nav__item-icon {
display: inline-flex;
flex-shrink: 0;
margin-top: 0.125rem;
color: var(--v3-text-body);
transition: color 0.15s ease;
}
.v3nav__item:hover .v3nav__item-icon {
color: var(--v3-text-primary);
}
.v3nav__item-body {
display: block;
}
.v3nav__item-title {
display: block;
font-size: 1.125rem;
font-weight: 400;
line-height: 1.4;
color: var(--v3-text-primary);
transition: color 0.15s ease;
}
.v3nav__item:hover .v3nav__item-title {
color: var(--v3-navy);
}
.v3nav__item-subtitle {
display: block;
margin-top: 0.25rem;
font-size: 1rem;
font-weight: 300;
line-height: 1.4;
color: var(--v3-text-muted);
}
.v3nav__panel-cta {
margin-top: 2.5rem;
display: flex;
justify-content: center;
}
.v3nav__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border: 1px solid var(--v3-border);
font-size: 1rem;
font-weight: 500;
color: var(--v3-text-primary);
transition: background-color 0.15s ease, transform 0.15s ease;
}
.v3nav__cta:hover {
background: var(--v3-surface-muted);
}
.v3nav__cta-arrow {
transition: transform 0.15s ease;
}
.v3nav__cta:hover .v3nav__cta-arrow {
transform: translateX(2px);
}
.v3nav__card {
display: block;
padding: 1.5rem;
background: var(--v3-surface);
border: 1px solid var(--v3-border);
transition: background-color 0.15s ease;
}
.v3nav__card:hover {
background: var(--v3-surface-muted);
}
.v3nav__card-img {
display: block;
width: 100%;
height: auto;
margin-bottom: 1.25rem;
border: 1px solid var(--v3-border);
}
.v3nav__card-eyebrow {
margin-bottom: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--v3-text-muted);
}
.v3nav__card-title {
font-size: 1.25rem;
font-weight: 500;
line-height: 1.4;
color: var(--v3-text-primary);
}
.v3nav__card-body {
margin-top: 0.5rem;
font-size: 1rem;
font-weight: 300;
line-height: 1.4;
color: var(--v3-text-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.v3nav__card-link {
margin-top: 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--v3-text-primary);
text-decoration: underline;
text-underline-offset: 4px;
}
/* ── MOBILE DRAWER (