/* ============================================
Generation Web Website - Main Stylesheet
============================================
Organization:
1. CSS Custom Properties (Design Tokens)
2. Reset & Base Styles
3. Typography
4. Layout Utilities
5. Components (buttons, forms, etc.)
6. Sections (by category)
7. Responsive Breakpoints
Approach: Mobile-first
Naming: BEM methodology (.block__element--modifier)
Design tokens sourced from existing Elementor kit at
https://generationweb.kinsta.cloud/
============================================ */
/* ============================================
1. CSS CUSTOM PROPERTIES (Design Tokens)
============================================ */
:root {
/* Brand Colors */
--color-primary: #1B4859; /* Deep teal */
--color-secondary: #EE7D21; /* Orange */
--color-accent: #E8DCC4; /* Dusty cream / sand — surface accent */
/* Supporting Brand Colors */
--color-steel-blue: #5687A6;
--color-cyan: #58D0F5;
--color-gray: #7E7E7E;
/* Brand Gradients */
--gradient-accent: linear-gradient(90deg, #5687A6 0%, #1B4859 100%);
--gradient-accent-reverse: linear-gradient(90deg, #1B4859 0%, #5687A6 100%);
--gradient-primary: linear-gradient(180deg, #1B4859 0%, #5687A6 100%);
/* Neutral Colors */
--color-white: #ffffff;
--color-black: #000000;
--color-gray-100: #f7f7f7;
--color-gray-200: #eeeeee;
--color-gray-300: #dddddd;
--color-gray-400: #cccccc;
--color-gray-500: #999999;
--color-gray-600: #666666;
--color-gray-700: #444444;
--color-gray-800: #333333;
--color-gray-900: #111111;
/* Semantic Colors */
--color-text: #202424;
--color-text-light: var(--color-gray-600);
--color-background: #F2F2F0; /* Warm off-white (brand BG) */
--color-background-alt: var(--color-white);
--color-heading: var(--color-primary);
/* Typography */
--font-heading: 'League Spartan', sans-serif;
--font-body: 'League Spartan', sans-serif;
--font-body-serif: 'Libre Baskerville', Georgia, serif; /* previous body face — kept for reference */
--font-display: 'Playfair Display', Georgia, serif;
/* Body-copy sizes. League Spartan reads optically smaller than the old Libre
Baskerville, so base/lg sit a notch up from a stock 16/18 scale to hold the
same presence on the page. UI chrome does NOT follow these — see --font-size-ui*. */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1.0625rem; /* 17px */
--font-size-lg: 1.1875rem; /* 19px */
/* UI chrome sizes — buttons, nav, FAQ summaries, testimonial captions. These
use the heading font and must stay put when body copy scales. */
--font-size-ui: 1rem; /* 16px */
--font-size-ui-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-size-5xl: 3rem; /* 48px */
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Spacing Scale */
--space-xs: 0.25rem; /* 4px */
--space-sm: 0.5rem; /* 8px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 2rem; /* 32px */
--space-2xl: 3rem; /* 48px */
--space-3xl: 4rem; /* 64px */
--space-4xl: 6rem; /* 96px */
/* Layout */
--container-max: 1200px;
--container-padding: var(--space-lg);
/* Border Radius - sharp corners */
--radius-none: 0;
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-full: 9999px; /* still available for pills/avatars */
--radius-default: 0;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 300ms ease;
--transition-slow: 500ms ease;
/* Z-index Scale */
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 300;
--z-tooltip: 400;
}
/* League Spartan sets tighter than the old serif, so running text gets a touch
of tracking to read as evenly at these sizes. */
p,
li,
blockquote {
letter-spacing: 0.01em;
}
/* ============================================
2. RESET & BASE STYLES
============================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
/* The `hidden` attribute must actually hide.
*
* The UA stylesheet implements it as `[hidden] { display: none }` — specificity
* 0,1,0, the same as a single class. Any author rule that sets `display` on a
* class therefore wins on source order and the element stays visible, even
* though `el.hidden === true` in the DOM. JS looks correct, the page is wrong,
* and assertions on the property pass right past it.
*
* That has bitten this codebase repeatedly (the testimonial nav and the team
* modal both carry their own one-off `[hidden]` patches). This is the general
* fix; `!important` is what it takes to outrank arbitrary author `display`
* rules, and is the same approach normalize.css uses.
*/
[hidden] {
display: none !important;
}
html {
scroll-behavior: smooth;
/* Keep in-page anchor targets clear of the sticky header. */
scroll-padding-top: 6rem;
}
/* Sections used as programmatic focus targets (tabindex="-1") receive focus
via in-page jumps so screen readers announce arrival — but the user didn't
tab there, so suppress the visual outline on the container itself. */
#insights-results:focus {
outline: none;
}
body {
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
color: var(--color-text);
background-color: var(--color-background);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
/* ============================================
3. TYPOGRAPHY
============================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-heading);
}
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }
p {
margin-bottom: var(--space-md);
}
a {
color: var(--color-primary);
text-decoration: underline;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-secondary);
}
/* ============================================
4. LAYOUT UTILITIES
============================================ */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.skip-link {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
padding: var(--space-sm) var(--space-md);
background: var(--color-primary);
color: var(--color-white);
text-decoration: none;
z-index: var(--z-tooltip);
border-radius: var(--radius-default);
}
.skip-link:focus {
top: var(--space-md);
}
/* ============================================
5. COMPONENTS
============================================ */
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-sm) var(--space-lg);
font-family: var(--font-heading);
font-size: var(--font-size-ui);
font-weight: var(--font-weight-semibold);
text-decoration: none;
border: 2px solid transparent;
border-radius: var(--radius-default);
cursor: pointer;
transition: all var(--transition-fast);
}
/* Hover rule (site-wide):
- White-text buttons swap to a solid dark fill (keeps white text visible).
- Dark-text buttons swap to a solid white fill (keeps dark text visible).
No transparent hovers — they vanish over photography / dark sections. */
.btn--primary {
background-color: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.btn--primary:hover {
background-color: var(--color-text);
color: var(--color-white);
border-color: var(--color-text);
}
.btn--secondary {
background-color: var(--color-secondary);
color: var(--color-white);
border-color: var(--color-secondary);
}
.btn--secondary:hover {
background-color: var(--color-text);
color: var(--color-white);
border-color: var(--color-text);
}
/* Casing opt-out. `.hero-home .btn` and `.hero-page .btn` both force uppercase
with wide tracking, which reads as a display label. This lets an individual
button opt back into sentence case where the label is a sentence rather than
a call-to-action stamp — currently just the 404 recovery button.
Scoped to the two hero blocks so it can win against their (0,2,0) rules. */
.hero-page .btn--sentence,
.hero-home .btn--sentence {
text-transform: none;
letter-spacing: normal;
}
.btn--accent {
background-color: var(--color-accent);
color: var(--color-primary);
border-color: var(--color-accent);
}
.btn--accent:hover {
background-color: var(--color-white);
color: var(--color-primary);
border-color: var(--color-white);
}
.btn--outline {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--outline:hover {
background-color: var(--color-primary);
color: var(--color-white);
}
/* Filled by default, reveals the outline on hover — the inverse of --outline.
Light/solid backgrounds only; the transparent hover would vanish over photography. */
.btn--fill {
background-color: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.btn--fill:hover {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
/* Gradient button — steel blue → deep teal. Borderless, uses the same
League Spartan label as the other buttons. Hover reverses the gradient
direction (mirrors Billey .tm-button before/after swap). */
.btn--gradient {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--gradient-accent);
color: var(--color-white);
border: 0;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: calc(var(--space-md) + 2px) var(--space-2xl);
}
.btn--gradient::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--gradient-accent-reverse);
opacity: 0;
transition: opacity var(--transition-normal);
}
.btn--gradient:hover {
color: var(--color-white);
}
.btn--gradient:hover::before {
opacity: 1;
}
/* ============================================
6. SECTIONS
============================================
Sections organized by category. Each section
follows BEM naming and lives inline with its
live example in src/sitewide-sections.njk.
- Hero sections
- Layout sections
- Card sections
- Content sections
- CTA sections
- Form sections
- Navigation (header/footer are already global)
============================================ */
/* --- HERO SECTIONS --- */
/* Home Hero — full-bleed background photo with slow Ken Burns zoom.
Title uses the H1 style from the style guide (League Spartan bold).
Aspect ratio sourced from the existing Elementor build (~2.37 : 1). */
/* Height is driven by a min-height floor (which the photo fills for the
cinematic look), NOT a fixed aspect-ratio — a fixed ratio computes a
height shorter than the copy on narrow/tablet widths and clips it top
and bottom. As a flex box with only a floor, the hero grows to fit its
content at every size, so nothing is ever cut off. The floor tracks the
panoramic 2.37:1 crop (~42vw) on wider screens, capped at the height of a
2000px-wide crop (2000 / 2.37 ≈ 844px) so the photo stops growing on very
large displays. Beyond 2000px the image is centered and the brand teal from
the header fills the sides so the hero reads as one block with the nav
above it (see __media). */
.hero-home {
position: relative;
width: 100%;
min-height: 480px;
display: flex;
overflow: hidden;
background: var(--color-primary);
color: var(--color-white);
isolation: isolate;
}
.hero-home .container {
display: flex;
align-items: center;
width: 100%;
}
@media (min-width: 768px) {
.hero-home { min-height: min(42vw, 844px, 90vh); }
}
/* Photo caps at 2000px wide and centers; past that, the brand teal hero
background shows on either side so the image doesn't keep stretching. */
.hero-home__media {
position: absolute;
inset: 0;
max-width: 2000px;
margin-inline: auto;
z-index: -2;
overflow: hidden;
}
.hero-home__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transform-origin: center top;
animation: hero-home-zoom 24s ease-in-out infinite alternate;
}
@keyframes hero-home-zoom {
from { transform: scale(1); }
to { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.hero-home__image { animation: none; }
html { scroll-behavior: auto; }
}
/* Subtle gradient so light text stays legible over bright skies. */
.hero-home__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.45) 0%,
rgba(0, 0, 0, 0.25) 55%,
rgba(0, 0, 0, 0) 80%
);
z-index: 1;
}
.hero-home__inner {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-2xl) 0;
}
.hero-home__content {
max-width: 36rem;
}
/* H1 — mirrors style-guide H1 (League Spartan bold, 5xl, tight)
but recolored white for legibility over the photo. */
.hero-home__title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: clamp(2.25rem, 4.5vw, 3rem);
line-height: 1.05;
color: var(--color-white);
margin: 0 0 var(--space-md);
}
.hero-home__description {
font-family: var(--font-body);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-relaxed);
color: var(--color-white);
margin: 0 0 var(--space-xl);
max-width: 38rem;
}
.hero-home__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
}
.hero-home .btn {
text-transform: uppercase;
letter-spacing: 0.1em;
padding: var(--space-md) var(--space-xl);
}
/* Interior / secondary page hero — solid brand color, no photo.
Shares --color-primary with the sticky header so the two read
as a single continuous brand band before content drops into
the warm off-white body background. */
.hero-page {
background: var(--color-primary);
color: var(--color-white);
padding: var(--space-3xl) 0 var(--space-4xl);
}
.hero-page__inner {
max-width: 56rem;
}
.hero-page__eyebrow {
display: block;
font-family: var(--font-heading);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-accent);
margin-bottom: var(--space-md);
}
.hero-page__title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: clamp(2.25rem, 4.5vw, 3rem);
line-height: 1.05;
color: var(--color-white);
margin: 0 0 var(--space-md);
}
.hero-page__description {
font-family: var(--font-body);
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-white);
opacity: 0.92;
margin: 0 0 var(--space-xl);
max-width: 42rem;
}
.hero-page__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
}
.hero-page .btn {
text-transform: uppercase;
letter-spacing: 0.1em;
padding: var(--space-md) var(--space-xl);
}
/* --- SHARED SECTION PRIMITIVES --- */
/* Section wrapper — vertical rhythm + optional background modifier.
Pair with .section-head and .section-actions inside. */
.section {
padding: var(--space-4xl) 0;
}
.section--flush-top { padding-top: var(--space-lg); }
.section--light { background: var(--color-background); }
.section--white { background: var(--color-white); }
.section--primary { background: var(--color-primary); color: var(--color-white); }
.section--primary .section-head__title { color: var(--color-white); }
.section--primary .section-head__lede { color: rgba(255, 255, 255, 0.9); }
/* Section header — eyebrow + title + lede block.
Default is left-aligned; --centered for centered grids. */
.section-head {
max-width: 56rem;
margin-bottom: var(--space-2xl);
}
.section-head--centered {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.section-head__eyebrow {
display: inline-block;
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-secondary);
margin-bottom: var(--space-md);
}
.section-head__title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-4xl);
line-height: 1.1;
color: var(--color-primary);
margin: 0 0 var(--space-md);
}
.section-head__lede {
font-family: var(--font-body);
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-text);
margin: 0;
max-width: 56ch;
}
.section-head--centered .section-head__lede {
margin-left: auto;
margin-right: auto;
}
/* Section actions — button row that sits below a grid/content. */
.section-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin-top: var(--space-2xl);
}
.section-actions--centered { justify-content: center; }
/* --- LAYOUT SECTIONS --- */
/* Section Split — two equal-width panels for paired offerings
(Two-Pillar intro, dual CTA footer, audience splits). Stacks on mobile.
Each panel takes a color modifier so the pair can contrast. */
.section-split {
padding: var(--space-4xl) 0;
background: var(--color-background);
}
.section-split__grid {
display: grid;
gap: var(--space-lg);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.section-split__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
}
}
/* White panel carries the accent border by default — the standard treatment
for the white box in a two-column split. Colored variants below override it. */
.section-split__panel {
padding: var(--space-2xl);
background: var(--color-white);
border: 2px solid var(--color-secondary);
display: flex;
flex-direction: column;
color: var(--color-text);
}
.section-split__panel--primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
.section-split__panel--accent {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-primary);
}
/* Gradient panel — steel-blue → deep-teal brand gradient, white text. */
.section-split__panel--gradient {
background: var(--gradient-accent);
border: 0;
color: var(--color-white);
}
.section-split__eyebrow {
display: block;
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-secondary);
margin-bottom: var(--space-sm);
}
.section-split__panel--primary .section-split__eyebrow { color: var(--color-accent); }
.section-split__panel--accent .section-split__eyebrow { color: var(--color-primary); opacity: 0.75; }
.section-split__panel--gradient .section-split__eyebrow { color: var(--color-white); opacity: 0.85; }
.section-split__title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-3xl);
line-height: 1.15;
color: var(--color-primary);
margin: 0 0 var(--space-md);
}
.section-split__panel--primary .section-split__title { color: var(--color-white); }
.section-split__panel--gradient .section-split__title { color: var(--color-white); }
.section-split__description {
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
margin: 0 0 var(--space-xl);
max-width: 38ch;
}
.section-split__action {
margin-top: auto; /* pins button to bottom — equal-height panels */
align-self: flex-start;
}
/* --- CARD SECTIONS --- */
/* Feature Grid — flexible card grid for service / step / spotlight cards.
Defaults to auto-fit; use --cols-2 or --cols-3 to lock columns. */
.feature-grid {
display: grid;
gap: var(--space-lg);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.feature-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature-grid.feature-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid.feature-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.feature-card {
background: var(--color-white);
padding: var(--space-xl);
border: 1px solid var(--color-gray-200);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
display: flex;
flex-direction: column;
gap: var(--space-sm);
color: var(--color-text);
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast),
background var(--transition-normal),
border-color var(--transition-normal),
color var(--transition-normal);
}
.feature-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
/* --link: the whole card is a click target. A stretched overlay on the
meta link covers the card while the visible link text stays put. */
.feature-card--link {
position: relative;
}
.feature-card--link .feature-card__meta a::after {
content: "";
position: absolute;
inset: 0;
}
/* Keyboard parity: when the stretched link inside a --link card is focused,
give the whole card the same lift (and, for default cards, gradient swap)
a mouse user gets on hover. Scoped to --link so non-link cards elsewhere
that happen to contain focusable content are unaffected. */
.feature-card--link:focus-within {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.feature-card--link:not([class*="--filled"]):not(.feature-card--gradient):not(.feature-card--featured):focus-within {
background: var(--gradient-primary);
border-color: transparent;
color: var(--color-white);
box-shadow: 0 12px 28px rgba(27, 72, 89, 0.25);
}
.feature-card--link:not([class*="--filled"]):not(.feature-card--gradient):not(.feature-card--featured):focus-within .feature-card__title,
.feature-card--link:not([class*="--filled"]):not(.feature-card--gradient):not(.feature-card--featured):focus-within .feature-card__description {
color: var(--color-white);
}
.feature-card--link:not([class*="--filled"]):not(.feature-card--gradient):not(.feature-card--featured):focus-within .feature-card__eyebrow {
color: var(--color-accent);
}
.feature-card--link:not([class*="--filled"]):not(.feature-card--gradient):not(.feature-card--featured):focus-within .feature-card__icon {
color: var(--color-white);
}
.feature-card--link:not([class*="--filled"]):not(.feature-card--gradient):not(.feature-card--featured):focus-within .feature-card__meta {
color: rgba(255, 255, 255, 0.7);
border-top-color: rgba(255, 255, 255, 0.15);
}
/* Default cards swap to the brand gradient on hover.
Cards with their own static look (--filled-*, --gradient, --featured)
are excluded — they keep their appearance and only lift. */
.feature-card:not([class*="--filled"]):not(.feature-card--gradient):not(.feature-card--featured):hover {
background: var(--gradient-primary);
border-color: transparent;
color: var(--color-white);
box-shadow: 0 12px 28px rgba(27, 72, 89, 0.25);
}
.feature-card:not([class*="--filled"]):not(.feature-card--gradient):not(.feature-card--featured):hover .feature-card__title,
.feature-card:not([class*="--filled"]):not(.feature-card--gradient):not(.feature-card--featured):hover .feature-card__description {
color: var(--color-white);
}
.feature-card:not([class*="--filled"]):not(.feature-card--gradient):not(.feature-card--featured):hover .feature-card__eyebrow {
color: var(--color-accent);
}
.feature-card:not([class*="--filled"]):not(.feature-card--gradient):not(.feature-card--featured):hover .feature-card__icon {
color: var(--color-white);
}
.feature-card:not([class*="--filled"]):not(.feature-card--gradient):not(.feature-card--featured):hover .feature-card__meta {
color: rgba(255, 255, 255, 0.7);
border-top-color: rgba(255, 255, 255, 0.15);
}
/* Featured variant — accented border for spotlight cards. */
.feature-card--featured {
border-color: var(--color-secondary);
border-width: 2px;
box-shadow: 0 4px 14px rgba(238, 125, 33, 0.12);
}
/* Filled variants — solid brand backgrounds. */
.feature-card--filled-primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
box-shadow: 0 6px 18px rgba(27, 72, 89, 0.18);
}
.feature-card--filled-accent {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-primary);
}
/* Gradient variant — steel-blue → deep-teal brand gradient with white text.
Matches .section-split__panel--gradient. */
.feature-card--gradient {
background: var(--gradient-accent);
border: 0;
color: var(--color-white);
box-shadow: 0 6px 18px rgba(86, 135, 166, 0.2);
}
.feature-card__eyebrow {
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-secondary);
}
.feature-card--filled-primary .feature-card__eyebrow { color: var(--color-accent); }
.feature-card--gradient .feature-card__eyebrow { color: var(--color-white); opacity: 0.85; }
.feature-card__icon {
width: 2.25rem;
height: 2.25rem;
color: var(--color-primary);
margin-bottom: var(--space-xs);
}
.feature-card--filled-primary .feature-card__icon { color: var(--color-accent); }
.feature-card--gradient .feature-card__icon { color: var(--color-white); }
.feature-card__title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-2xl);
line-height: 1.2;
color: var(--color-primary);
margin: 0;
}
.feature-card--filled-primary .feature-card__title { color: var(--color-white); }
.feature-card--gradient .feature-card__title { color: var(--color-white); }
.feature-card__description {
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
margin: 0;
flex: 1;
}
.feature-card__meta {
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--color-gray-200);
font-size: var(--font-size-sm);
color: var(--color-text-light);
font-style: italic;
}
.feature-card--filled-primary .feature-card__meta,
.feature-card--gradient .feature-card__meta {
color: rgba(255, 255, 255, 0.75);
border-top-color: rgba(255, 255, 255, 0.2);
}
/* Feature list — bulleted feature / inclusion list inside a card.
Used for "what's included" and pricing-tier cards (Ongoing Support) and
for paired comparison cards (e.g. SEO vs GEO). Text inherits the card
color, so it flips to white automatically on the default-card hover and
on the filled / gradient variants; the square marker stays accent-orange
across every background. flex:1 lets a trailing .feature-card__meta pin to
the bottom so tier cards align. */
.feature-card__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-xs);
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
flex: 1;
}
.feature-card__list li {
position: relative;
padding-left: var(--space-lg);
}
.feature-card__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 0.45rem;
height: 0.45rem;
background: var(--color-secondary);
}
/* ============================================
TEAM GRID + BIO MODAL
Clickable member cards (photo or monogram fallback) that open an
accessible bio dialog. JS: initBioModals() in main.js.
============================================ */
.team-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-lg);
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
.team-grid,
.team-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.team-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.team-member { display: flex; }
.team-member__trigger {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
padding: 0;
text-align: left;
font: inherit;
color: var(--color-text);
background: var(--color-white);
border: 1px solid var(--color-gray-200);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
cursor: pointer;
overflow: hidden;
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast),
border-color var(--transition-normal);
}
.team-member__trigger:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
border-color: var(--color-secondary);
}
.team-member__trigger:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Photo well — square; holds either an ![]()
or a monogram fallback. */
.team-member__photo,
.team-modal__photo {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--gradient-accent);
}
.team-member__photo { aspect-ratio: 1 / 1; }
.team-member__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.team-member__monogram,
.team-modal__monogram {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
color: var(--color-white);
letter-spacing: 0.05em;
line-height: 1;
}
.team-member__monogram { font-size: var(--font-size-5xl); }
.team-member__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-lg);
}
.team-member__name {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-xl);
line-height: 1.2;
color: var(--color-primary);
}
.team-member__role {
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-secondary);
}
.team-member__more {
margin-top: auto;
padding-top: var(--space-sm);
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
color: var(--color-primary);
}
.team-member__trigger:hover .team-member__more {
color: var(--color-secondary);
}
/* Bio modal — fixed, centered dialog with a teal-tinted scrim. */
.team-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-lg);
}
.team-modal[hidden] { display: none; }
.team-modal__overlay {
position: absolute;
inset: 0;
background: rgba(27, 72, 89, 0.6);
}
.team-modal__panel {
position: relative;
width: 100%;
max-width: 560px;
max-height: calc(100vh - 2 * var(--space-lg));
overflow-y: auto;
padding: var(--space-2xl);
background: var(--color-white);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.team-modal__close {
position: absolute;
top: var(--space-sm);
right: var(--space-md);
padding: 0;
background: transparent;
border: 0;
font-size: 2rem;
line-height: 1;
color: var(--color-text-light);
cursor: pointer;
}
.team-modal__close:hover,
.team-modal__close:focus-visible { color: var(--color-primary); }
.team-modal__header {
display: flex;
align-items: center;
gap: var(--space-lg);
margin-bottom: var(--space-lg);
}
.team-modal__photo {
flex-shrink: 0;
width: 96px;
height: 96px;
}
.team-modal__monogram { font-size: var(--font-size-2xl); }
.team-modal__name {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-2xl);
line-height: 1.2;
color: var(--color-primary);
margin: 0;
}
.team-modal__role {
font-family: var(--font-heading);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-secondary);
margin: var(--space-xs) 0 0;
}
.team-modal__bio {
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
margin: 0;
}
.team-modal__links { margin: var(--space-md) 0 0; }
body.modal-open { overflow: hidden; }
/* Lock scroll while the mobile nav drawer is open. */
body.nav-open { overflow: hidden; }
/* Work Grid — image-led tiles for case studies / portfolio.
Each tile has a hero image and optional caption (category + title). */
.work-grid {
display: grid;
gap: var(--space-lg);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.work-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.work-grid.work-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.work-grid.work-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.work-tile {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--color-text);
background: var(--color-white);
overflow: hidden;
transition: transform var(--transition-fast);
}
a.work-tile:hover { transform: translateY(-3px); color: var(--color-text); }
.work-tile__media {
position: relative;
aspect-ratio: 1 / 1;
background: var(--color-gray-200);
overflow: hidden;
}
.work-tile__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
a.work-tile:hover .work-tile__media img { transform: scale(1.03); }
/* Browser-frame treatment — for tiles showing a screenshot of a built page.
Adds a faux browser chrome bar so the shot reads as "a website we built,"
and top-anchors the image so the nav/hero stays visible in the square crop. */
.work-tile__media--browser {
display: flex;
flex-direction: column;
background: var(--color-white);
}
.work-tile__chrome {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--color-gray-100);
border-bottom: 1px solid var(--color-gray-200);
}
.work-tile__dots {
display: flex;
gap: 6px;
flex: 0 0 auto;
}
.work-tile__dots span {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-gray-300);
}
.work-tile__addr {
flex: 1 1 auto;
min-width: 0;
padding: 2px var(--space-sm);
background: var(--color-white);
border: 1px solid var(--color-gray-200);
font-family: var(--font-heading);
font-size: var(--font-size-xs);
color: var(--color-text-light);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.work-tile__media--browser img {
flex: 1 1 auto;
min-height: 0;
object-position: top center;
}
/* Category pill — sits on top-right of the image. */
.work-tile__category {
position: absolute;
top: var(--space-md);
right: var(--space-md);
z-index: 1;
background: var(--color-white);
color: var(--color-text);
padding: var(--space-xs) var(--space-md);
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.15em;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.work-tile__body {
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.work-tile__meta {
font-family: var(--font-body);
font-size: var(--font-size-sm);
color: var(--color-text-light);
margin: 0;
}
.work-tile__author {
font-weight: var(--font-weight-bold);
color: var(--color-text);
}
.work-tile__title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-xl);
line-height: 1.2;
color: var(--color-primary);
margin: 0;
}
/* ===================================================================
DEVICE SHOWCASE — responsive trio (desktop + tablet + phone)
Full-bleed band showing one page across three breakpoints in
self-contained CSS device frames. Screenshots are reflow-captured
per breakpoint. Composition overlaps on desktop; stacks on mobile.
Frames: browser window is sharp-cornered (on brand); physical
devices keep realistic rounded corners.
=================================================================== */
.device-showcase {
position: relative;
overflow: hidden;
background: radial-gradient(120% 120% at 75% 20%, #2c6579 0%, var(--color-primary) 45%, #12313d 100%);
color: var(--color-white);
}
.device-showcase__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2xl);
align-items: center;
padding: var(--space-3xl) 0;
}
/* Left copy column */
.device-showcase__copy { max-width: 480px; }
.device-showcase__eyebrow {
display: inline-block;
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: var(--font-size-xs);
color: var(--color-accent);
margin-bottom: var(--space-sm);
}
.device-showcase__title { color: var(--color-white); margin-bottom: var(--space-md); }
.device-showcase__lede { color: rgba(255, 255, 255, 0.82); margin-bottom: var(--space-lg); }
.device-showcase__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-sm); }
.device-showcase__list li {
position: relative;
padding-left: var(--space-lg);
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-sm);
}
.device-showcase__list li::before {
content: '';
position: absolute;
left: 0;
top: 0.5em;
width: 8px;
height: 8px;
background: var(--color-secondary);
}
/* Right stage — clustered device unit */
.device-showcase__stage {
position: relative;
min-height: 420px;
display: flex;
justify-content: center;
align-items: center;
perspective: 1900px;
perspective-origin: 50% 45%;
}
@media (min-width: 1025px) {
.device-showcase__grid { grid-template-columns: 0.82fr 1.18fr; gap: var(--space-3xl); }
}
/* Browser frame (chrome bar + viewport) */
.browser-frame {
background: var(--color-white);
overflow: hidden;
box-shadow: 0 34px 60px -20px rgba(0, 0, 0, 0.55), 0 12px 28px -14px rgba(0, 0, 0, 0.4);
}
.browser-frame__bar {
height: 34px;
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 0 var(--space-md);
background: var(--color-gray-100);
border-bottom: 1px solid var(--color-gray-200);
}
.browser-frame__dots { display: flex; gap: 6px; flex: 0 0 auto; }
.browser-frame__dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--color-gray-300); }
.browser-frame__url {
flex: 1 1 auto;
min-width: 0;
height: 20px;
background: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 10px;
font-family: var(--font-heading);
font-size: 11px;
line-height: 20px;
color: var(--color-text-light);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10px;
}
.browser-frame__view { overflow: hidden; position: relative; }
.browser-frame__view img { width: 100%; display: block; }
.browser-frame__view--fade::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 120px;
background: linear-gradient(transparent, rgba(255, 255, 255, 0.92));
pointer-events: none;
}
/* Physical device frames */
.device-frame { background: #17191d; position: relative; }
.device-frame--tablet {
border-radius: 20px;
padding: 14px;
box-shadow: 0 30px 50px -18px rgba(0, 0, 0, 0.6);
}
.device-frame--tablet::after {
content: '';
position: absolute;
top: 7px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #333;
}
.device-frame--phone {
border-radius: 26px;
padding: 8px;
box-shadow: 0 26px 44px -16px rgba(0, 0, 0, 0.65);
}
.device-frame--phone::before {
content: '';
position: absolute;
z-index: 2;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 42px;
height: 5px;
border-radius: 3px;
background: #000;
}
.device-frame__screen { overflow: hidden; background: var(--color-white); }
.device-frame--tablet .device-frame__screen { border-radius: 6px; aspect-ratio: 3 / 4; }
.device-frame--phone .device-frame__screen { border-radius: 20px; aspect-ratio: 9 / 19; }
.device-frame__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* Cluster composition — tablet back, desktop middle, phone front, with heavy
side overlap and a shared 3D tilt so the three read as one unit. */
.device-showcase__desktop,
.device-showcase__tablet,
.device-showcase__phone {
transform: rotateY(-16deg) rotateX(3deg);
transform-origin: center center;
}
.device-showcase__desktop { width: min(430px, 68%); z-index: 2; }
.device-showcase__desktop .browser-frame__view { max-height: 330px; }
/* Tablet — background, peeking up and out past the desktop's upper-right */
.device-showcase__tablet { position: absolute; right: 0; top: -7%; width: 46%; z-index: 1; }
/* Phone — foreground, crossing over the desktop's lower-left */
.device-showcase__phone { position: absolute; left: 6%; bottom: 2%; width: 27%; z-index: 3; }
@media (max-width: 1024px) {
.device-showcase__stage { min-height: 360px; margin-top: var(--space-lg); }
}
@media (max-width: 600px) {
.device-showcase__stage { perspective: none; min-height: 0; flex-direction: column; gap: var(--space-lg); }
.device-showcase__desktop,
.device-showcase__tablet,
.device-showcase__phone { position: static; width: min(360px, 84vw); transform: none; }
.device-showcase__desktop .browser-frame__view { max-height: 300px; }
}
/* Light variant — off-white background with dark text (portal showcase). */
.device-showcase--light {
background: linear-gradient(170deg, #f7f5f0 0%, var(--color-background) 100%);
color: var(--color-text);
}
.device-showcase--light .device-showcase__eyebrow { color: var(--color-secondary); }
.device-showcase--light .device-showcase__title { color: var(--color-primary); }
.device-showcase--light .device-showcase__lede { color: var(--color-text-light); }
.device-showcase--light .device-showcase__list li { color: var(--color-text); }
/* Flip variant — cluster on the left, copy on the right, tilt mirrored. */
.device-showcase--flip .device-showcase__tablet { right: auto; left: 0; }
.device-showcase--flip .device-showcase__phone { left: auto; right: 6%; }
.device-showcase--flip .device-showcase__desktop,
.device-showcase--flip .device-showcase__tablet,
.device-showcase--flip .device-showcase__phone { transform: rotateY(16deg) rotateX(3deg); }
@media (min-width: 1025px) {
.device-showcase--flip .device-showcase__grid { grid-template-columns: 1.18fr 0.82fr; }
.device-showcase--flip .device-showcase__stage { order: 1; }
.device-showcase--flip .device-showcase__copy { order: 2; }
}
/* Insights Grid — article cards (category + title + summary + meta). */
.insights-grid {
display: grid;
gap: var(--space-lg);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.insights-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.insight-card {
background: var(--color-white);
border: 1px solid var(--color-gray-200);
padding: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-sm);
text-decoration: none;
color: var(--color-text);
transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.insight-card:hover {
border-color: var(--color-primary);
transform: translateY(-2px);
color: var(--color-text);
}
.insight-card__category {
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-secondary);
}
.insight-card__title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-xl);
line-height: 1.25;
color: var(--color-primary);
margin: 0;
}
.insight-card__summary {
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
margin: 0;
flex: 1;
}
.insight-card__meta {
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--color-gray-200);
font-family: var(--font-heading);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-light);
}
/* --- CONTENT SECTIONS --- */
/* Section Callout — centered text block with CTAs.
Use for short value-prop strips like "Who we are" or "Get started today". */
.section-callout {
padding: var(--space-3xl) 0;
background: var(--color-background);
text-align: center;
}
.section-callout--white { background: var(--color-white); }
.section-callout--primary { background: var(--color-primary); color: var(--color-white); }
.section-callout__inner {
max-width: 50rem;
margin: 0 auto;
}
.section-callout__title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-4xl);
line-height: 1.1;
color: var(--color-primary);
margin: 0 0 var(--space-md);
}
.section-callout--primary .section-callout__title { color: var(--color-white); }
.section-callout__lede {
font-family: var(--font-body);
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
margin: 0 auto;
max-width: 50ch;
}
.section-callout__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-md);
margin-top: var(--space-xl);
}
/* Compact CTA band — small heading + single button (e.g. footer "get started today"). */
.section-callout--compact { padding: var(--space-2xl) 0; }
.section-callout--compact .section-callout__title {
font-size: var(--font-size-3xl);
text-transform: lowercase;
margin-bottom: var(--space-lg);
}
/* Value Statement — editorial pause strip with large title + serif body.
Sits between sections with thin rules top + bottom so it reads as a
deliberate pause in the flow. Includes an optional cards repeater
below the body for supporting points (typically 2–4 cards). */
.value-statement {
padding: var(--space-4xl) 0;
background: var(--color-background);
border-top: 1px solid var(--color-gray-300);
border-bottom: 1px solid var(--color-gray-300);
}
.value-statement--white { background: var(--color-white); }
.value-statement--primary { background: var(--color-primary); color: var(--color-white); border-color: rgba(255, 255, 255, 0.15); }
.value-statement__inner {
max-width: 70rem;
}
.value-statement__title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-4xl);
line-height: 1.1;
color: var(--color-primary);
margin: 0 0 var(--space-lg);
max-width: 60rem;
}
.value-statement--primary .value-statement__title { color: var(--color-white); }
.value-statement__body {
font-family: var(--font-body);
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-text);
margin: 0;
max-width: 56ch;
}
.value-statement--primary .value-statement__body { color: rgba(255, 255, 255, 0.92); }
/* Cards repeater — optional supporting boxes below the body.
Auto-fit grid so 2 / 3 / 4 items lay out naturally. Each card is
a bordered white panel with a heading and short body paragraph. */
.value-statement__cards {
display: grid;
gap: var(--space-md);
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
margin-top: var(--space-2xl);
}
.value-statement__card {
background: var(--color-white);
border: 1px solid var(--color-gray-300);
padding: var(--space-xl);
}
.value-statement--primary .value-statement__card {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.2);
}
.value-statement__card-title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-xl);
color: var(--color-primary);
margin: 0 0 var(--space-md);
}
.value-statement--primary .value-statement__card-title { color: var(--color-white); }
.value-statement__card-body {
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-text);
margin: 0;
}
.value-statement--primary .value-statement__card-body { color: rgba(255, 255, 255, 0.9); }
@media (min-width: 1025px) {
.value-statement__title {
font-size: var(--font-size-5xl);
}
}
/* Testimonial — single quote block, one design with two modes.
- Default (.testimonial): plain background, open layout.
- .testimonial--on-photo: full-bleed photo background; quote sits in
an off-white panel for legibility.
Same DOM, same class hooks — modifier swaps the chrome. */
.testimonial {
position: relative;
padding: var(--space-4xl) 0;
background: var(--color-white);
text-align: center;
isolation: isolate;
}
.testimonial--light { background: var(--color-background); }
.testimonial__media {
position: absolute;
inset: 0;
z-index: -1;
display: none; /* hidden in default mode */
overflow: hidden;
}
.testimonial__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial--on-photo {
background: transparent;
padding: var(--space-4xl) 0;
}
.testimonial--on-photo .testimonial__media { display: block; }
.testimonial__panel {
max-width: 56rem;
margin: 0 auto;
padding: 0;
}
.testimonial--on-photo .testimonial__panel {
background: var(--color-background);
padding: var(--space-3xl) var(--space-2xl);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.testimonial__mark {
display: block;
font-family: var(--font-display);
font-size: 4rem;
line-height: 0.6;
color: var(--color-secondary);
margin-bottom: var(--space-lg);
}
.testimonial__quote {
font-family: var(--font-display);
font-style: normal;
font-weight: var(--font-weight-medium);
font-size: var(--font-size-2xl);
line-height: 1.55;
color: var(--color-primary);
max-width: 56ch;
margin: 0 auto var(--space-xl);
padding: 0;
}
.testimonial__name {
display: block;
font-family: var(--font-heading);
font-style: normal;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-ui-lg);
color: var(--color-steel-blue);
letter-spacing: 0.02em;
}
.testimonial__slides { position: relative; }
/* JS-enhanced carousel: slides scroll horizontally and snap; swipe on touch. */
.testimonial--carousel .testimonial__slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.testimonial--carousel .testimonial__slides::-webkit-scrollbar { display: none; }
/* Each slide must fill the full track width, else the panel's 56rem cap
lets the next slide peek in on wide screens. Content stays centered via
the quote's own max-width + the section's centered text. */
.testimonial--carousel .testimonial__panel {
flex: 0 0 100%;
width: 100%;
max-width: none;
min-width: 0;
scroll-snap-align: center;
}
.testimonial__nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
max-width: 72rem;
margin-inline: auto;
display: flex;
justify-content: space-between;
padding: 0 var(--space-lg);
transform: translateY(-50%);
pointer-events: none;
}
/* Single-testimonial pages (e.g. case studies) get no carousel chrome:
initTestimonials() sets [hidden] on the nav, but the display:flex above
would otherwise override it — this makes the attribute win. */
.testimonial__nav[hidden] { display: none; }
/* Dots — swipe indicator, shown on mobile + tablet. */
.testimonial__dots {
display: flex;
justify-content: center;
gap: var(--space-sm);
margin-top: var(--space-xl);
}
.testimonial__dot {
width: 10px;
height: 10px;
padding: 0;
border-radius: 9999px;
border: 1px solid var(--color-primary);
background: transparent;
cursor: pointer;
transition: all var(--transition-fast);
}
.testimonial__dot.is-active {
background: var(--color-secondary);
border-color: var(--color-secondary);
}
/* Mobile + tablet: swipe + dots, hide the overlay arrows.
Desktop: keep arrows, hide dots. */
@media (max-width: 1024px) {
.testimonial--carousel .testimonial__nav { display: none; }
}
@media (min-width: 1025px) {
.testimonial--carousel .testimonial__dots { display: none; }
}
.testimonial__arrow {
width: 44px;
height: 44px;
border-radius: 9999px;
border: 1px solid var(--color-primary);
background: transparent;
color: var(--color-primary);
font-family: var(--font-heading);
font-size: var(--font-size-ui-lg);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
transition: all var(--transition-fast);
}
.testimonial__arrow:hover {
background: var(--color-primary);
color: var(--color-white);
}
/* Teal proof band — light text on primary; mark stays orange for pop. */
.testimonial--primary {
background: var(--color-primary);
}
.testimonial--primary .testimonial__quote {
color: var(--color-white);
}
.testimonial--primary .testimonial__name {
color: var(--color-accent);
}
.testimonial--primary .testimonial__arrow {
border-color: var(--color-accent);
color: var(--color-accent);
}
.testimonial--primary .testimonial__arrow:hover {
background: var(--color-accent);
color: var(--color-primary);
}
.testimonial--primary .testimonial__dot {
border-color: var(--color-accent);
}
.testimonial--primary .testimonial__dot.is-active {
background: var(--color-accent);
border-color: var(--color-accent);
}
/* FAQ — accordion of frequently-asked questions.
Uses native / (no JS). Custom rotating chevron via
pseudo-element. Each item is a discrete card with hairline border. */
.faq { padding: var(--space-4xl) 0; }
.faq__title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-4xl);
color: var(--color-primary);
margin: 0 0 var(--space-2xl);
}
.faq__list {
display: grid;
gap: var(--space-sm);
}
.faq__item {
background: var(--color-white);
border: 1px solid var(--color-gray-300);
padding: var(--space-md) var(--space-lg);
}
.faq__item > summary {
cursor: pointer;
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-ui-lg);
color: var(--color-text);
list-style: none;
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) 0;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 0.4em solid transparent;
border-bottom: 0.4em solid transparent;
border-left: 0.55em solid var(--color-primary);
transition: transform var(--transition-fast);
flex-shrink: 0;
}
.faq__item[open] > summary::before {
transform: rotate(90deg);
}
.faq__item[open] > summary {
color: var(--color-primary);
margin-bottom: var(--space-sm);
}
.faq__item p {
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-text);
margin: 0;
padding-left: calc(0.55em + var(--space-md));
}
/* Dark variant — teal band (matches .section-callout--primary) with orange
chevrons. Cards drop to a translucent fill so the section reads as one
continuous teal band rather than white cards floating on color. */
.faq--primary { background: var(--color-primary); }
.faq--primary .faq__title { color: var(--color-white); }
.faq--primary .faq__item {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
}
.faq--primary .faq__item > summary { color: var(--color-white); }
.faq--primary .faq__item[open] > summary { color: var(--color-secondary); }
.faq--primary .faq__item > summary::before { border-left-color: var(--color-secondary); }
.faq--primary .faq__item p { color: var(--color-white); }
/* Stats Bar — a row of headline metrics (big number + label).
Pairs naturally after a .testimonial to form a proof block, or stands alone.
Numbers use the orange accent; the row centers and wraps (max ~4 per row). */
.stats-bar {
padding: var(--space-4xl) 0;
background: var(--color-background);
}
.stats-bar--white { background: var(--color-white); }
.stats-bar--primary { background: var(--color-primary); }
.stats-bar__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2xl) var(--space-4xl);
}
.stats-bar__item {
flex: 1 1 14rem;
max-width: 18rem;
text-align: center;
}
.stats-bar__number {
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--font-size-5xl);
line-height: 1;
color: var(--color-secondary);
}
.stats-bar__label {
display: block;
margin-top: var(--space-sm);
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-text-light);
}
.stats-bar--primary .stats-bar__label { color: var(--color-accent); }
/* Article — long-form editorial body for single insight posts.
The one content type the marketing-section library doesn't cover:
flowing prose (headings, lists, pull quotes, inline callouts, byline,
author bio) set in a constrained reading measure, centered in the page.
Used by /insights// and available to any narrative page. */
.article {
padding: var(--space-3xl) 0 var(--space-4xl);
background: var(--color-white);
}
.article__inner {
max-width: 44rem; /* ~70ch reading measure */
margin: 0 auto;
}
/* Byline — author · date · read time, under the post title. */
.article__meta {
font-family: var(--font-heading);
font-size: var(--font-size-sm);
letter-spacing: 0.04em;
color: var(--color-text-light);
margin: 0 0 var(--space-2xl);
}
.article__meta a { color: var(--color-primary); }
/* Optional hero figure at the top of the article. */
.article__figure { margin: 0 0 var(--space-2xl); }
.article__figure img {
display: block;
width: 100%;
height: auto;
}
.article__figure figcaption,
.article__caption {
margin-top: var(--space-sm);
font-family: var(--font-body);
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
/* Lead paragraph — slightly larger, opens the piece. */
.article__lead {
font-family: var(--font-body);
font-size: 1.5rem; /* ~20% larger than --font-size-xl for a roomier read */
line-height: var(--line-height-relaxed);
color: var(--color-text);
margin: 0 0 var(--space-xl);
}
/* Flowing prose rhythm inside the body. */
.article__body > * + * { margin-top: var(--space-lg); }
.article__body h2 {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-3xl);
line-height: 1.15;
color: var(--color-primary);
margin-top: var(--space-2xl);
}
.article__body h3 {
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-2xl);
color: var(--color-primary);
margin-top: var(--space-xl);
}
.article__body p,
.article__body li {
font-family: var(--font-body);
font-size: 1.35rem; /* ~20% larger than --font-size-lg for a roomier read */
line-height: var(--line-height-relaxed);
color: var(--color-text);
}
.article__body ul,
.article__body ol { padding-left: var(--space-lg); }
.article__body li + li { margin-top: var(--space-sm); }
.article__body ul li::marker { color: var(--color-secondary); }
.article__body ol li::marker {
color: var(--color-secondary);
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
}
.article__body a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.article__body a:hover { color: var(--color-secondary); }
/* Pull quote — editorial emphasis mid-article (orange rule, display serif). */
.article__pullquote {
margin: var(--space-2xl) 0;
padding-left: var(--space-lg);
border-left: 4px solid var(--color-secondary);
font-family: var(--font-display);
font-style: italic;
font-size: var(--font-size-2xl);
line-height: var(--line-height-relaxed);
color: var(--color-primary);
}
/* Inline callout — boxed aside (e.g. "Why this matters"). */
.article__callout {
margin: var(--space-2xl) 0;
padding: var(--space-lg);
background: var(--color-background);
border-left: 3px solid var(--color-primary);
}
.article__callout p { margin: 0; }
.article__callout strong { color: var(--color-primary); }
/* Author bio strip — closes the article. Square avatar (sharp-corner system). */
.article__author {
display: flex;
gap: var(--space-lg);
align-items: flex-start;
margin-top: var(--space-3xl);
padding-top: var(--space-xl);
border-top: 1px solid var(--color-gray-300);
}
.article__author-avatar {
flex: 0 0 auto;
width: 72px;
height: 72px;
object-fit: cover;
background: var(--color-accent);
}
.article__author-eyebrow {
display: block;
font-family: var(--font-heading);
font-size: var(--font-size-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-secondary);
margin-bottom: var(--space-xs);
}
.article__author-name {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-xl);
color: var(--color-primary);
margin: 0 0 var(--space-xs);
}
.article__author-bio {
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
margin: 0 0 var(--space-sm);
}
@media (min-width: 768px) {
.article__body h2 { font-size: var(--font-size-4xl); }
.article__pullquote { font-size: var(--font-size-3xl); }
}
/* --- CTA SECTIONS --- */
/* CTA Band — left-aligned conversion strip with title + body + buttons.
Use when the section needs visible action buttons; for editorial pause
strips without buttons, use .value-statement instead. */
.cta-band {
padding: var(--space-4xl) 0;
background: var(--color-background);
}
.cta-band--white { background: var(--color-white); }
.cta-band--primary { background: var(--color-primary); color: var(--color-white); }
.cta-band__inner { max-width: 60rem; }
.cta-band__title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-4xl);
line-height: 1.1;
color: var(--color-primary);
margin: 0 0 var(--space-md);
}
.cta-band--primary .cta-band__title { color: var(--color-white); }
.cta-band__lede {
font-family: var(--font-body);
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-text);
margin: 0 0 var(--space-xl);
max-width: 56ch;
}
.cta-band--primary .cta-band__lede { color: rgba(255, 255, 255, 0.92); }
.cta-band__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
}
/* --- FORM SECTIONS --- */
/* CTA Form — left-aligned CTA with embedded contact form.
Eyebrow + title + lede stack above a bordered white form panel.
Submit button is full-width inside the panel. */
.cta-form { padding: var(--space-4xl) 0; }
.cta-form__intro {
max-width: 60rem;
margin-bottom: var(--space-2xl);
}
.cta-form__eyebrow {
display: inline-block;
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-primary);
margin-bottom: var(--space-md);
}
.cta-form__title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-4xl);
line-height: 1.1;
color: var(--color-primary);
margin: 0 0 var(--space-md);
}
.cta-form__lede {
font-family: var(--font-body);
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-text);
margin: 0;
max-width: 56ch;
}
.cta-form__form {
display: grid;
gap: var(--space-md);
max-width: 560px;
background: var(--color-white);
border: 1px solid var(--color-gray-300);
padding: var(--space-xl);
}
.cta-form__field { display: block; }
.cta-form__label {
display: block;
font-family: var(--font-heading);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin-bottom: var(--space-xs);
}
.cta-form__label-required { color: var(--color-secondary); }
.cta-form__input,
.cta-form__textarea,
.cta-form__select {
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-gray-400);
font-family: var(--font-body);
font-size: var(--font-size-base);
color: var(--color-text);
background: var(--color-white);
}
.cta-form__input:focus,
.cta-form__textarea:focus,
.cta-form__select:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-color: var(--color-primary);
}
.cta-form__textarea {
min-height: 120px;
resize: vertical;
font-family: var(--font-body);
}
.cta-form__submit {
width: 100%;
margin-top: var(--space-sm);
}
/* Inline checkbox row — opt-in toggles inside a form panel
(e.g. "schedule a discovery call alongside the scan"). */
.cta-form__check {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-family: var(--font-body);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
color: var(--color-text);
}
.cta-form__check input {
margin-top: 0.3em;
flex-shrink: 0;
}
@media (min-width: 1025px) {
.faq__title,
.cta-band__title,
.cta-form__title { font-size: var(--font-size-5xl); }
}
/* ============================================
7. RESPONSIVE BREAKPOINTS (mobile-first)
============================================
Mobile: 320px - 767px (base styles)
Tablet: 768px - 1024px
Desktop: 1025px+
============================================ */
/* Tablet and up */
@media (min-width: 768px) {
:root {
--container-padding: var(--space-xl);
}
h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
}
/* Desktop and up */
@media (min-width: 1025px) {
:root {
--container-padding: var(--space-2xl);
}
}
/* ============================================
8. SITE HEADER (modern megamenu)
============================================ */
.site-header {
background: var(--color-primary);
color: var(--color-white);
position: sticky;
top: 0;
z-index: var(--z-sticky);
}
.site-header__inner {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: var(--space-md) 0;
position: relative;
}
@media (min-width: 1000px) {
.site-header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
column-gap: var(--space-xl);
}
}
/* Logo — "generation" + orange "web" mark */
.site-header__logo {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: 2rem;
line-height: 1;
color: var(--color-white);
text-transform: lowercase;
letter-spacing: -0.02em;
text-decoration: none;
flex-shrink: 0;
}
.site-header__logo:hover { color: var(--color-white); }
.site-header__logo-mark {
background: var(--color-secondary);
color: var(--color-white);
padding: 0.15em 0.4em;
line-height: 1;
}
/* Mobile toggle */
.site-header__toggle {
display: inline-flex;
background: none;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: var(--space-sm);
cursor: pointer;
margin-left: auto;
}
.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
display: block;
width: 1.375rem;
height: 2px;
background: var(--color-white);
position: relative;
transition: transform var(--transition-fast), top var(--transition-fast),
background var(--transition-fast);
}
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
content: "";
position: absolute;
left: 0;
}
.site-header__toggle-icon::before { top: -7px; }
.site-header__toggle-icon::after { top: 7px; }
/* Nav (hidden on mobile) */
.site-header__nav { display: none; }
.site-header__menu {
list-style: none;
display: inline-flex;
align-items: center;
gap: var(--space-md);
margin: 0;
padding: 0;
}
.site-header__item {
position: static;
display: inline-flex;
align-items: center;
}
.site-header__sep {
color: rgba(255, 255, 255, 0.35);
font-family: var(--font-heading);
font-weight: var(--font-weight-normal);
}
.site-header__link,
.site-header__link--toggle {
position: relative;
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: var(--font-weight-semibold);
color: var(--color-white);
text-transform: lowercase;
text-decoration: none;
background: none;
border: 0;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: color var(--transition-fast);
}
/* Hover bridge — extends the toggle's hover area down to meet the dropdown,
so the menu doesn't close when the cursor crosses the header's bottom padding. */
.site-header__item--has-children .site-header__link--toggle::after {
content: "";
position: absolute;
left: -0.5rem;
right: -0.5rem;
top: 100%;
height: calc(var(--space-md) + 4px);
}
.site-header__link:hover,
.site-header__link--toggle:hover,
.site-header__link--active {
color: var(--color-accent);
}
/* Secondary link variant — smaller, lower-emphasis (used by Insights in the right-side actions) */
.site-header__link--secondary {
font-size: 1rem;
opacity: 0.85;
}
.site-header__link--secondary:hover {
opacity: 1;
}
.site-header__caret {
width: 0.75rem;
height: 0.5rem;
transition: transform var(--transition-fast);
}
.site-header__item--has-children:hover .site-header__caret,
.site-header__item--has-children:focus-within .site-header__caret {
transform: rotate(180deg);
}
/* Simple submenu (used by About) */
.site-header__submenu {
list-style: none;
background: var(--color-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
padding: var(--space-sm) 0;
min-width: 240px;
position: absolute;
top: 100%;
display: none;
z-index: var(--z-dropdown);
}
.site-header__item--has-children:hover .site-header__submenu,
.site-header__item--has-children:focus-within .site-header__submenu {
display: block;
}
.site-header__sublink {
display: block;
padding: var(--space-sm) var(--space-lg);
font-family: var(--font-heading);
font-size: var(--font-size-ui);
text-decoration: none;
color: var(--color-white);
transition: color var(--transition-fast);
}
.site-header__sublink:hover,
.site-header__sublink--active {
color: var(--color-accent);
}
/* Mega menu panel (full-width, used by What We Do) */
.site-header__megamenu {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: var(--color-primary);
border-top: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
padding: var(--space-2xl) 0;
display: none;
z-index: var(--z-dropdown);
}
.site-header__item--has-megamenu:hover .site-header__megamenu,
.site-header__item--has-megamenu:focus-within .site-header__megamenu {
display: block;
}
.site-header__megamenu-grid {
display: grid;
gap: var(--space-2xl);
grid-template-columns: repeat(2, 1fr);
}
.site-header__megamenu-group {
display: grid;
gap: var(--space-sm);
align-content: start;
padding-right: var(--space-2xl);
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
/* 2×2 layout — only the left column carries a divider; the right
column (even items) drops the border and padding. */
.site-header__megamenu-group:nth-child(even) {
border-right: 0;
padding-right: 0;
}
.site-header__megamenu-group-title {
font-family: var(--font-heading);
font-size: var(--font-size-ui-lg);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent);
margin-bottom: var(--space-md);
text-decoration: none;
display: block;
transition: color var(--transition-fast);
}
.site-header__megamenu-group-title:hover {
color: var(--color-white);
}
.site-header__megamenu-link {
display: flex;
align-items: center;
gap: var(--space-sm);
color: var(--color-white);
text-decoration: none;
font-family: var(--font-heading);
font-size: var(--font-size-ui);
font-weight: var(--font-weight-semibold);
padding: 0.2rem 0;
transition: color var(--transition-fast);
}
.site-header__megamenu-link:hover {
color: var(--color-accent);
}
.site-header__megamenu-link svg {
width: 1rem;
height: 1rem;
flex-shrink: 0;
color: var(--color-accent);
}
/* Megamenu variant: list + featured promo (Variant C) */
.site-header__megamenu--featured .site-header__megamenu-split {
display: grid;
gap: var(--space-2xl);
grid-template-columns: 1fr;
align-items: stretch;
}
@media (min-width: 768px) {
.site-header__megamenu--featured .site-header__megamenu-split {
grid-template-columns: 1.4fr 1fr;
}
}
.site-header__megamenu-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-sm) var(--space-xl);
}
@media (min-width: 768px) {
.site-header__megamenu-list {
grid-template-columns: 1fr 1fr;
}
}
.site-header__megamenu-list .site-header__megamenu-link {
font-size: var(--font-size-lg);
}
/* Impact stats block (Community megamenu left side) */
.site-header__megamenu-stats {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.site-header__megamenu-stats-eyebrow {
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--color-accent);
}
.site-header__megamenu-stats-lede {
font-family: var(--font-heading);
font-size: var(--font-size-ui-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-white);
line-height: 1.35;
margin: 0;
max-width: 32ch;
}
.site-header__megamenu-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin-top: var(--space-sm);
}
.site-header__megamenu-stat {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.site-header__megamenu-stat-number {
font-family: var(--font-heading);
font-size: clamp(2rem, 3.5vw, 2.75rem);
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
line-height: 1;
}
.site-header__megamenu-stat-label {
font-family: var(--font-heading);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-white);
line-height: 1.35;
}
.site-header__megamenu-stats-footnote {
font-size: var(--font-size-xs);
color: rgba(255, 255, 255, 0.6);
line-height: 1.5;
margin: var(--space-sm) 0 0;
max-width: 60ch;
}
.site-header__megamenu-promo {
background: var(--gradient-accent, var(--color-secondary));
padding: var(--space-xl);
color: var(--color-white);
display: flex;
flex-direction: column;
gap: var(--space-md);
min-height: 220px;
}
.site-header__megamenu-promo-eyebrow {
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.18em;
opacity: 0.85;
}
.site-header__megamenu-promo-title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-2xl);
color: var(--color-white);
margin: 0;
line-height: 1.2;
}
.site-header__megamenu-promo-desc {
font-size: var(--font-size-sm);
line-height: 1.6;
opacity: 0.9;
margin: 0;
}
.site-header__megamenu-promo-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: auto;
color: var(--color-white);
text-decoration: none;
font-family: var(--font-heading);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
transition: opacity var(--transition-fast);
}
.site-header__megamenu-promo-cta:hover {
color: var(--color-white);
opacity: 0.85;
}
/* Right-side action buttons (primary CTA + secondary CTA) */
.site-header__actions {
display: none;
}
.site-header__cta {
flex-shrink: 0;
}
@media (min-width: 1000px) {
.site-header__toggle { display: none; }
.site-header__nav {
display: flex;
align-items: center;
justify-content: center;
}
.site-header__actions {
display: inline-flex;
align-items: center;
gap: var(--space-md);
}
}
/* Drawer CTAs are mobile-only; the header keeps its own .site-header__actions
on desktop. Declared before the drawer media query so the mobile flex wins. */
.site-header__nav-actions { display: none; }
/* ---- Mobile / tablet nav: right slide-out side-card (below 1000px) ----
The desktop hover-reveal menus collapse into a right-hand card with
right-justified items. JS toggles .site-header__nav--open on the nav and
.is-open on each expandable item (see initMobileNav). The megamenu's
detailed sub-links are desktop-only — on mobile just the four category
titles remain under "what we do". */
@media (max-width: 999.98px) {
/* Toggle sits above the card so the hamburger can double as the ✕ close. */
.site-header__toggle { position: relative; z-index: 2; }
.site-header__nav {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
right: 0;
height: 100vh;
height: 100dvh;
width: min(340px, 86vw);
padding-top: 4.75rem;
background: var(--color-primary);
box-shadow: -16px 0 40px rgba(0, 0, 0, 0.3);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX(100%);
visibility: hidden;
transition: transform 0.32s ease, visibility 0.32s;
z-index: 1;
}
.site-header__nav--open {
transform: translateX(0);
visibility: visible;
}
/* Dimming scrim behind the card, kept just under the sticky header bar. */
body.nav-open::after {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: calc(var(--z-sticky) - 1);
}
.site-header__menu {
display: flex;
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0 0 var(--space-md);
}
.site-header__item {
display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header__sep { display: none; }
/* Right-justified rows. */
.site-header__link,
.site-header__link--toggle {
width: 100%;
justify-content: flex-end;
text-align: right;
padding: var(--space-md) var(--space-lg);
}
/* Sub-panels collapse by default, expand when the item is open.
Prefixing with .site-header__nav--open lifts specificity above the
desktop :hover / :focus-within reveal rules. */
.site-header__nav--open .site-header__submenu,
.site-header__nav--open .site-header__megamenu {
position: static;
display: none;
min-width: 0;
padding: 0 0 var(--space-sm);
border: 0;
box-shadow: none;
background: rgba(0, 0, 0, 0.16);
}
.site-header__nav--open .site-header__item.is-open .site-header__submenu,
.site-header__nav--open .site-header__item.is-open .site-header__megamenu {
display: block;
}
.site-header__item.is-open .site-header__caret { transform: rotate(180deg); }
.site-header__sublink {
text-align: right;
padding: var(--space-sm) var(--space-lg);
}
/* "What we do": drop the detailed mega-menu sub-links (desktop-only) and
keep the four category titles, restyled as plain right-aligned links. */
.site-header__megamenu .container { padding: 0; }
.site-header__megamenu-grid { display: block; }
.site-header__megamenu-group {
border-right: 0;
padding: 0;
}
.site-header__megamenu-link { display: none; }
.site-header__megamenu-group-title {
margin-bottom: 0;
padding: var(--space-sm) var(--space-lg);
text-align: right;
text-transform: none;
letter-spacing: normal;
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-white);
}
.site-header__megamenu-group-title:hover { color: var(--color-accent); }
/* CTAs pinned to the foot of the card. */
.site-header__nav-actions {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-top: auto;
padding: var(--space-lg);
}
.site-header__nav-actions .btn {
width: 100%;
text-align: center;
}
/* Hamburger morphs into ✕ while the card is open. */
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon {
background: transparent;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::before {
top: 0;
transform: rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::after {
top: 0;
transform: rotate(-45deg);
}
}
/* ============================================
9. SITE FOOTER
============================================ */
.site-footer {
background: var(--color-primary);
color: var(--color-white);
padding: var(--space-3xl) 0 var(--space-xl);
}
.site-footer a {
color: var(--color-white);
text-decoration: none;
}
.site-footer a:hover { color: var(--color-accent); }
.site-footer__inner {
display: grid;
gap: var(--space-2xl);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.site-footer__inner {
grid-template-columns: 1.5fr repeat(4, 1fr);
}
}
.site-footer__logo-text {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-xl);
}
.site-footer__description {
margin-top: var(--space-sm);
font-size: var(--font-size-sm);
opacity: 0.85;
}
.site-footer__heading {
font-family: var(--font-heading);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
margin-bottom: var(--space-md);
}
.site-footer__menu {
list-style: none;
display: grid;
gap: var(--space-sm);
font-size: var(--font-size-sm);
}
.site-footer__address p { margin: 0 0 var(--space-sm); font-size: var(--font-size-sm); }
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-md);
margin-top: var(--space-2xl);
padding-top: var(--space-lg);
border-top: 1px solid rgba(255,255,255,0.15);
font-size: var(--font-size-sm);
opacity: 0.85;
}
.site-footer__legal { display: flex; gap: var(--space-lg); }
/* ============================================
10. WIREFRAME MODE
============================================
Visual treatment for labeled wireframe pages.
Each section is wrapped in .wf-block with a
visible label so reviewers can refer to blocks
by name during team review.
Once a page is approved and moves to design,
remove .wf-block wrappers and the wf-* helpers
in favor of real section CSS.
============================================ */
.wf-banner {
background: var(--color-secondary);
color: var(--color-white);
padding: var(--space-sm) 0;
text-align: center;
font-family: var(--font-heading);
font-size: var(--font-size-sm);
letter-spacing: 0.05em;
}
.wf-banner a {
color: var(--color-white);
text-decoration: underline;
}
.wf-block {
padding: var(--space-3xl) 0;
border-bottom: 1px dashed var(--color-gray-400);
}
.wf-block:nth-of-type(even) {
background: var(--color-white);
}
.wf-block__label {
display: inline-block;
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-secondary);
background: var(--color-white);
padding: var(--space-xs) var(--space-md);
border: 1px dashed var(--color-secondary);
margin-bottom: var(--space-xl);
}
.wf-block:nth-of-type(even) .wf-block__label {
background: var(--color-background);
}
.wf-block__lede {
font-size: var(--font-size-xl);
max-width: 60ch;
margin-bottom: var(--space-lg);
}
.wf-block__note {
display: block;
margin-top: var(--space-lg);
padding: var(--space-md);
background: var(--color-background);
border-left: 3px solid var(--color-primary);
font-size: var(--font-size-sm);
color: var(--color-text-light);
font-style: italic;
max-width: 70ch;
}
.wf-eyebrow {
display: inline-block;
font-family: var(--font-heading);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-primary);
margin-bottom: var(--space-sm);
}
.wf-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin-top: var(--space-lg);
}
.wf-grid {
display: grid;
gap: var(--space-lg);
}
.wf-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.wf-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.wf-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wf-card {
background: var(--color-white);
border: 1px solid var(--color-gray-300);
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.wf-card--accent {
border-color: var(--color-secondary);
border-width: 2px;
}
.wf-card--muted {
background: var(--color-gray-100);
border-style: dashed;
}
.wf-card__eyebrow {
font-family: var(--font-heading);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-secondary);
}
.wf-card__title {
font-size: var(--font-size-xl);
margin: 0;
}
.wf-card__meta {
font-size: var(--font-size-sm);
color: var(--color-text-light);
margin-top: auto;
}
.wf-placeholder {
background: var(--color-gray-200);
border: 1px dashed var(--color-gray-500);
padding: var(--space-2xl);
text-align: center;
color: var(--color-gray-700);
font-family: var(--font-heading);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.wf-placeholder--tall {
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
}
.wf-list {
list-style: none;
display: grid;
gap: var(--space-sm);
font-family: var(--font-body);
}
.wf-list li {
padding-left: var(--space-lg);
position: relative;
}
.wf-list li::before {
content: "→";
position: absolute;
left: 0;
color: var(--color-secondary);
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
}
.wf-stat {
text-align: center;
padding: var(--space-lg);
}
.wf-stat__number {
font-family: var(--font-heading);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
line-height: 1;
}
.wf-stat__label {
display: block;
margin-top: var(--space-sm);
font-size: var(--font-size-sm);
color: var(--color-text-light);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.wf-form {
display: grid;
gap: var(--space-md);
max-width: 560px;
background: var(--color-white);
border: 1px solid var(--color-gray-300);
padding: var(--space-xl);
}
.wf-form label {
display: block;
font-family: var(--font-heading);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-xs);
}
.wf-form input,
.wf-form textarea,
.wf-form select {
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-gray-400);
font-family: var(--font-body);
font-size: var(--font-size-base);
}
.wf-form textarea { min-height: 100px; }
.wf-form__row {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-size: var(--font-size-sm);
}
.wf-form__row input[type="checkbox"] { width: auto; margin-top: 4px; }
.wf-split {
display: grid;
gap: var(--space-2xl);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.wf-split { grid-template-columns: 1fr 1fr; }
}
.wf-split__panel {
padding: var(--space-xl);
border: 1px solid var(--color-gray-300);
background: var(--color-white);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.wf-split__panel--primary {
background: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.wf-split__panel--primary h3,
.wf-split__panel--primary p { color: var(--color-white); }
.wf-split__panel--accent {
background: var(--color-accent);
color: var(--color-primary);
border-color: var(--color-accent);
}
.wf-split__panel--accent h3 { color: var(--color-primary); }
.wf-faq {
display: grid;
gap: var(--space-sm);
}
.wf-faq details {
background: var(--color-white);
border: 1px solid var(--color-gray-300);
padding: var(--space-md) var(--space-lg);
}
.wf-faq summary {
cursor: pointer;
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-lg);
}
.wf-faq details[open] summary { color: var(--color-primary); margin-bottom: var(--space-sm); }
/* ============================================
11. STYLE GUIDE
============================================
Visual reference page documenting brand tokens,
typography, buttons, and signature components.
Lives at /style-guide/.
============================================ */
.sg-page {
padding: var(--space-2xl) 0 var(--space-4xl);
}
.sg-page__intro {
max-width: 70ch;
margin-bottom: var(--space-3xl);
}
.sg-section {
padding: var(--space-3xl) 0;
border-top: 1px solid var(--color-gray-200);
}
.sg-section__header {
margin-bottom: var(--space-xl);
}
.sg-section__eyebrow {
display: block;
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--color-secondary);
margin-bottom: var(--space-sm);
}
.sg-section__title {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-sm);
}
.sg-section__lede {
font-size: var(--font-size-lg);
max-width: 60ch;
color: var(--color-text-light);
}
/* --- Color swatches --- */
.sg-swatches {
display: grid;
gap: var(--space-lg);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.sg-swatch {
display: flex;
flex-direction: column;
background: var(--color-white);
border: 1px solid var(--color-gray-200);
}
.sg-swatch__chip {
height: 140px;
}
.sg-swatch__meta {
padding: var(--space-md) var(--space-lg);
display: grid;
gap: 2px;
}
.sg-swatch__name {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-base);
color: var(--color-primary);
}
.sg-swatch__hex {
font-family: var(--font-heading);
font-size: var(--font-size-sm);
letter-spacing: 0.05em;
color: var(--color-text);
text-transform: uppercase;
}
.sg-swatch__role {
font-size: var(--font-size-sm);
color: var(--color-text-light);
font-style: italic;
}
.sg-swatch--gradient .sg-swatch__chip { background: var(--gradient-accent); }
.sg-swatch--gradient-reverse .sg-swatch__chip { background: var(--gradient-accent-reverse); }
.sg-swatch--gradient-primary .sg-swatch__chip { background: var(--gradient-primary); }
/* --- Type specimens --- */
.sg-type {
display: grid;
gap: var(--space-2xl);
}
.sg-type__row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
padding-bottom: var(--space-xl);
border-bottom: 1px solid var(--color-gray-200);
}
@media (min-width: 768px) {
.sg-type__row {
grid-template-columns: 220px 1fr;
gap: var(--space-2xl);
}
}
.sg-type__label {
font-family: var(--font-heading);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-secondary);
}
.sg-type__label small {
display: block;
font-weight: var(--font-weight-normal);
font-size: var(--font-size-xs);
color: var(--color-text-light);
text-transform: none;
letter-spacing: 0;
margin-top: 2px;
}
.sg-type__sample {
color: var(--color-text);
}
.sg-type__sample--h1 { font-family: var(--font-heading); font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); color: var(--color-primary); line-height: 1.05; }
.sg-type__sample--h2 { font-family: var(--font-heading); font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); color: var(--color-primary); line-height: 1.1; }
.sg-type__sample--h3 { font-family: var(--font-heading); font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.sg-type__sample--body { font-family: var(--font-body); font-size: var(--font-size-base); line-height: 1.7; max-width: 60ch; }
.sg-type__sample--quote { font-family: var(--font-display); font-style: italic; font-size: var(--font-size-2xl); color: var(--color-primary); line-height: 1.45; }
.sg-type__sample--ui { font-family: var(--font-heading); font-size: 1.35rem; font-weight: var(--font-weight-semibold); text-transform: lowercase; color: var(--color-text); }
/* --- Button grid --- */
.sg-buttons {
display: grid;
gap: var(--space-xl);
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.sg-button-card {
background: var(--color-white);
border: 1px solid var(--color-gray-200);
padding: var(--space-xl);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
}
.sg-button-card--on-dark {
background: var(--color-primary);
border-color: var(--color-primary);
}
.sg-button-card--on-dark .sg-button-card__name,
.sg-button-card--on-dark .sg-button-card__note { color: var(--color-white); }
.sg-button-card__name {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
color: var(--color-primary);
}
.sg-button-card__note {
font-size: var(--font-size-sm);
color: var(--color-text-light);
margin-top: auto;
}
/* --- Testimonial (signature look from source site) --- */
.sg-testimonial {
background: var(--color-background);
padding: var(--space-3xl) var(--space-xl);
text-align: center;
position: relative;
}
.sg-testimonial__mark {
font-family: var(--font-display);
font-size: 4rem;
color: var(--color-secondary);
line-height: 1;
margin-bottom: var(--space-md);
}
.sg-testimonial__quote {
font-family: var(--font-display);
font-style: italic;
font-size: var(--font-size-2xl);
line-height: 1.45;
color: var(--color-primary);
max-width: 60ch;
margin: 0 auto var(--space-xl);
}
.sg-testimonial__name {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
color: var(--color-steel-blue);
letter-spacing: 0.02em;
}
.sg-testimonial__nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 var(--space-lg);
transform: translateY(-50%);
pointer-events: none;
}
.sg-testimonial__arrow {
width: 44px;
height: 44px;
border-radius: 9999px;
border: 1px solid var(--color-primary);
background: transparent;
color: var(--color-primary);
font-family: var(--font-heading);
font-size: var(--font-size-lg);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
transition: all var(--transition-fast);
}
.sg-testimonial__arrow:hover {
background: var(--color-primary);
color: var(--color-white);
}
/* --- Mega menu mock --- */
.sg-megamenu {
background: var(--color-primary);
color: var(--color-white);
padding: var(--space-xl) var(--space-2xl);
}
.sg-megamenu__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-lg);
margin-bottom: var(--space-2xl);
}
.sg-megamenu__logo {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: 2.5rem;
line-height: 1;
color: var(--color-white);
text-transform: lowercase;
letter-spacing: -0.02em;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.sg-megamenu__logo-mark {
background: var(--color-secondary);
color: var(--color-white);
padding: 0.15em 0.4em;
line-height: 1;
}
.sg-megamenu__links {
display: inline-flex;
align-items: center;
gap: var(--space-lg);
margin: 0 auto;
list-style: none;
}
.sg-megamenu__link {
font-family: var(--font-heading);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-white);
text-transform: lowercase;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: none;
border: 0;
cursor: pointer;
transition: color var(--transition-fast);
padding: 0;
}
.sg-megamenu__link:hover,
.sg-megamenu__link--active {
color: var(--color-accent);
}
.sg-megamenu__chev {
width: 0.75rem;
height: 0.5rem;
transition: transform var(--transition-fast);
}
.sg-megamenu__link--active .sg-megamenu__chev {
transform: rotate(180deg);
}
.sg-megamenu__sep {
color: var(--color-white);
opacity: 0.35;
font-family: var(--font-heading);
font-weight: var(--font-weight-normal);
}
.sg-megamenu__grid {
display: grid;
gap: var(--space-xl) var(--space-2xl);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.sg-megamenu__item {
display: grid;
grid-template-columns: 32px 1fr;
gap: var(--space-md);
align-items: start;
}
.sg-megamenu__icon {
width: 1.75rem;
height: 1.75rem;
border-radius: 9999px;
border: 2px solid var(--color-accent);
color: var(--color-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
}
.sg-megamenu__item--orange .sg-megamenu__icon {
border-color: var(--color-secondary);
color: var(--color-secondary);
}
.sg-megamenu__item-title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
color: var(--color-white);
font-size: var(--font-size-lg);
}
.sg-megamenu__item-desc {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.6);
margin-top: 2px;
}
/* --- Mega menu Variant B: grouped category columns --- */
.sg-megamenu--grouped .sg-megamenu__grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-2xl);
}
.sg-megamenu__group {
display: grid;
gap: var(--space-md);
padding-right: var(--space-md);
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.sg-megamenu__group:last-child { border-right: 0; }
.sg-megamenu__group-title {
font-family: var(--font-heading);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent);
margin-bottom: var(--space-sm);
}
.sg-megamenu__link-row {
display: flex;
align-items: center;
gap: var(--space-sm);
color: var(--color-white);
text-decoration: none;
font-family: var(--font-heading);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
padding: var(--space-xs) 0;
transition: color var(--transition-fast);
}
.sg-megamenu__link-row:hover { color: var(--color-accent); }
.sg-megamenu__link-row svg {
width: 1rem;
height: 1rem;
flex-shrink: 0;
color: var(--color-accent);
}
.sg-megamenu--grouped .sg-megamenu__link-row:nth-child(even) svg {
color: var(--color-secondary);
}
/* --- Mega menu Variant C: list + featured promo --- */
.sg-megamenu--featured .sg-megamenu__split {
display: grid;
gap: var(--space-2xl);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.sg-megamenu--featured .sg-megamenu__split {
grid-template-columns: 1.4fr 1fr;
}
}
.sg-megamenu__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md) var(--space-xl);
list-style: none;
}
.sg-megamenu__promo {
background: var(--gradient-accent);
padding: var(--space-xl);
color: var(--color-white);
display: flex;
flex-direction: column;
gap: var(--space-md);
min-height: 220px;
}
.sg-megamenu__promo-eyebrow {
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.18em;
opacity: 0.85;
}
.sg-megamenu__promo-title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-2xl);
color: var(--color-white);
margin: 0;
line-height: 1.2;
}
.sg-megamenu__promo-desc {
font-size: var(--font-size-sm);
line-height: 1.6;
opacity: 0.9;
}
.sg-megamenu__promo-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: auto;
color: var(--color-white);
text-decoration: none;
font-family: var(--font-heading);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.sg-megamenu__variant-label {
display: block;
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-secondary);
margin-bottom: var(--space-md);
}
/* --- Misc helpers used on the style guide page --- */
.sg-stack { display: grid; gap: var(--space-md); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
/* ============================================
FORM: honeypot, Turnstile, status message
============================================ */
/* Honeypot. Off-screen rather than display:none — some bots skip fields that
are display:none, but will happily fill one that is merely positioned away. */
.cta-form__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.cta-form__turnstile {
margin: var(--space-md) 0;
}
.cta-form__status {
margin: var(--space-md) 0 0;
padding: var(--space-md);
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
border-left: 4px solid var(--color-primary);
background: rgba(27, 72, 89, 0.06);
color: var(--color-text);
}
.cta-form__status--success {
border-left-color: var(--color-primary);
background: rgba(27, 72, 89, 0.08);
}
/* Error uses a true red, not the brand orange — orange reads as an accent
here, and a failed submission needs to be unmistakable. */
.cta-form__status--error {
border-left-color: #9A2515;
background: rgba(154, 37, 21, 0.07);
color: #6E1A0F;
}
/* ============================================
FORM: multi-step survey
============================================
Extends .cta-form rather than replacing it — the panel, labels, inputs and
status message are all inherited. This block only adds what stepping needs:
the progress bar, step grouping, radio-scale options and the nav row. */
/* Wider than the standard 560px panel: the rating questions run long, and at
560px several of them wrap to three lines before the options even start. */
.survey-form__form { max-width: 44rem; }
.survey-form__progress {
margin-bottom: var(--space-sm);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--color-gray-300);
}
.survey-form__progress-label {
margin: 0 0 var(--space-sm);
font-family: var(--font-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-primary);
}
.survey-form__progress-track {
height: 4px;
background: var(--color-gray-300);
overflow: hidden;
}
.survey-form__progress-bar {
display: block;
height: 100%;
width: 25%;
background: var(--color-secondary);
transition: width 240ms ease;
}
.survey-form__step {
display: grid;
gap: var(--space-md);
}
/* The step wrapper is focused on advance so screen readers announce the new
step — but it should never show a focus ring, since the user didn't click it. */
.survey-form__step:focus { outline: none; }
.survey-form__step-title {
font-family: var(--font-heading);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
line-height: 1.2;
color: var(--color-primary);
margin: 0;
}
/* Fieldsets carry a default border and padding in every browser. */
.survey-form__fieldset {
border: 0;
padding: 0;
margin: 0;
min-width: 0;
}
.survey-form__fieldset legend {
padding: 0;
/* A legend is not a block box, so the label's bottom margin is ignored. */
margin-bottom: var(--space-sm);
}
.survey-form__options {
display: grid;
gap: var(--space-xs);
}
/* Full-width hit target — the whole row is clickable, not just the 16px dot. */
.survey-form__option {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-gray-400);
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-text);
cursor: pointer;
}
.survey-form__option:hover { border-color: var(--color-primary); }
.survey-form__option input {
margin-top: 0.35em;
flex-shrink: 0;
accent-color: var(--color-primary);
}
/* :has() is progressive enhancement here — without it the native radio dot
still communicates the selection, it just isn't reinforced by the row. */
.survey-form__option:has(input:checked) {
border-color: var(--color-primary);
background: rgba(27, 72, 89, 0.05);
}
.survey-form__option:has(input:focus-visible) {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.survey-form__nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-top: var(--space-sm);
}
.survey-form__nav .btn { flex: 1 1 12rem; }