/* === Red Barn Media Group - Aviation Mechanical === */
/* ========== CUSTOM PROPERTIES ========== */
:root {
/* Brand Colors — Aviation Mechanical (Figma node 40059:512).
Red + charcoal direction. Hover tints = base mixed 20% toward white.
NOTE ON THE RENAME: Aviation's palette contains NO blue. The donor shell's
blue-named tokens were RENAMED rather than merely repointed — a variable
called --color-avm-blood holding a red value is a trap for the next
maintainer, and the husk shipped exactly that confusion. Permitted by the
"fresh dealer brand swap before any new-brand HTML exists" exception; the
11 husk class references were updated in the same pass. */
--color-avm-red: #aa1f24; /* Figma Brand/Aviation Red — primary brand */
--color-avm-red-hover: #bb4c50;
--color-avm-blood: #6c1418; /* Figma Brand/Blood — deep brand tone (donor token: primary blue) */
--color-avm-blood-hover: #894346;
--color-avm-sandstone: #e9e7e7; /* Figma Brand/Sandstone — light surface token (new; not a former mid-accent descendant) */
--color-midnight: #191c20; /* dark section background (Figma Dark Mode/02dp) */
--color-midnight-hover: #47494d;
--color-light: #eeffee; /* Figma Brand/Light (unchanged) */
--color-avm-red-bright: #de2634; /* review stars — brighter than Aviation Red (donor token: accent red) */
/* Brand Gradients — Blood (Aviation Red → Blood) */
--gradient-blood-0: linear-gradient(0deg, #aa1f24, #6c1418);
--gradient-blood-45: linear-gradient(45deg, #aa1f24, #6c1418);
--gradient-blood-90: linear-gradient(90deg, #aa1f24, #6c1418);
--gradient-blood-135: linear-gradient(135deg, #aa1f24, #6c1418);
--gradient-blood-180: linear-gradient(180deg, #aa1f24, #6c1418);
/* Brand Gradients — Red vs Charcoal (Aviation Red → Midnight) */
--gradient-red-vs-dark-0: linear-gradient(0deg, #aa1f24, #191c20);
--gradient-red-vs-dark-45: linear-gradient(45deg, #aa1f24, #191c20);
--gradient-red-vs-dark-90: linear-gradient(90deg, #aa1f24, #191c20);
--gradient-red-vs-dark-135: linear-gradient(135deg, #aa1f24, #191c20);
--gradient-red-vs-dark-180: linear-gradient(180deg, #aa1f24, #191c20);
/* Brand Gradient — Steel (Figma Gradient/Steel, resolved from node 40059:757).
Used by the "Steel Bar" band in the Reviews and Maintenance sections.
The band also carries a 6px solid black top border — see .avm-steel-bar.
⚠️ DECORATIVE ONLY — NEVER put text directly on this gradient. It sweeps
from #ebe9e9 (near-white) through #32302f (near-black), so NO single text
color clears 4.5:1 across it:
white on #ebe9e9 = 1.21:1 FAIL
midnight on #32302f = 1.30:1 FAIL
In the Figma both Steel Bars sit BEHIND opaque cards (Reviews node 40059:788,
Maintenance node 40059:867) which carry their own backgrounds. Keep it that
way: content goes on an opaque surface above the band, never on the band. */
--gradient-steel: linear-gradient(180deg, #ebe9e9 15.46%, #32302f 58.74%, #757575 91.7%, #ebe9e9 148.13%);
/* Brand Gradients — Bullet Metal (charcoal → steel → charcoal) */
/* Gradient/Bullet — resolved from the Figma header Sub Nav (node I40059:1099;26001:650).
Replaces the donor's approximated 3-stop charcoal ramp with the real 4-stop values. */
--gradient-bullet: linear-gradient(180deg, #848484 13.46%, #4c4c4c 43.44%, #777777 91.7%, #a1a1a1 148.13%);
--gradient-bullet-metal-0: linear-gradient(0deg, #424242, #686868, #424242);
--gradient-bullet-metal-45: linear-gradient(45deg, #424242, #686868, #424242);
--gradient-bullet-metal-90: linear-gradient(90deg, #424242, #686868, #424242);
--gradient-bullet-metal-135: linear-gradient(135deg, #424242, #686868, #424242);
--gradient-bullet-metal-180: linear-gradient(180deg, #424242, #686868, #424242);
/* Generic */
--color-white: #ffffff;
--color-black: #000000;
/* Neutrals */
--color-gray-50: #eef0f5;
--color-gray-100: #e5e7ea;
--color-gray-200: #dddee1;
--color-gray-300: #ccced6;
--color-gray-400: #c1c3cb;
--color-gray-500: #a9abb4;
--color-gray-600: #8d919a;
--color-gray-700: #656870;
/* Dark Mode */
--color-00dp: #121212;
--color-01dp: #1e1e1e;
--color-02dp: #191c20;
--color-03dp: #252525;
--color-04dp: #272727;
--color-06dp: #2c2c2c;
--color-08dp: #2e2e2e;
--color-12dp: #333333;
--color-16dp: #353535;
--color-24dp: #383838;
/* Typography — Aviation Mechanical (Figma node 40059:512).
Headings / labels / overline = COLLIER (Adobe Fonts kit kgs3qgq), body = Inter
(Google Fonts). Both s live in doc-header.php.
Collier is what the Figma and the approved v2 comp actually use. Oswald was an
interim substitute while the kit ID was outstanding; it is a condensed SANS and
Collier is a SERIF, so this swap changes the page's voice — that is the point,
it moves the build onto the approved design rather than away from it.
⚠️ THE KIT'S CSS WEIGHTS ARE NOT THE FACES' REAL WEIGHTS. Verified by reading
the name table out of each woff2:
collier 400 -> Collier Light (real usWeightClass 300)
collier 700 -> Collier Semibold (real 600)
collier-black 600 -> Collier Black (real 800)
collier-black 700 -> Collier ExBlack (real 900)
Consequences, and why the tokens are shaped the way they are:
- The `collier` family declares ONLY 400 and 700. Per CSS font matching a
request for 600 resolves UP to 700 (Semibold) — correct. But a request for
500 resolves DOWN to 400, i.e. Collier LIGHT. Never ask this family for 500.
- Figma uses Collier 600, 700 and 800. There is no true 700 face, so Figma-600
and Figma-700 both land on Collier Semibold. That is the one weight deviation
and it replaces the old Oswald-has-no-800 deviation.
- Figma's overline is Collier 800 = Collier Black, which the kit exposes as
`collier-black` at CSS weight 600. --font-overline exists for exactly that:
it is the ONLY way to reach a real 800 without accidentally getting ExBlack.
The donor's --font-heading / --font-label names were renamed for
accuracy; both were CSS-internal (zero PHP references), so the rename is
contained to this file. */
--font-heading: 'collier', Georgia, 'Times New Roman', serif; /* headings (asks 600/700 -> Semibold) */
--font-label: 'collier', Georgia, 'Times New Roman', serif; /* labels (wt 700 -> Semibold) */
--font-overline: 'collier-black', Georgia, 'Times New Roman', serif; /* overline ONLY, at wt 600 -> Black */
--font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* body (wts 400/600/700) */
--font-weight-bold: 700;
--font-weight-semibold: 600;
--font-weight-medium: 500;
--font-weight-regular: 400;
/* Layout */
--menu-height: 7.5rem;
--menu-height-shrink: 6rem;
--hero-height: 500px;
--transition-standard: 0.25s;
/* Nav shrink-on-scroll only. 0.25s linear-ish `ease` on a height change
reads as a snap; 0.36s on a decelerating curve lets the bar settle.
Scoped to the nav so button/link hovers keep the snappier 0.25s. */
--transition-nav: 0.36s;
--ease-nav: cubic-bezier(0.22, 0.61, 0.36, 1);
--border-radius-standard: 1rem;
--box-shadow-dropdown: 0 3rem 3rem rgba(0, 0, 0, 0.175);
--overlay-opacity: 0.3;
--overlay-opacity-sub: 0.75;
}
/* ========== END CUSTOM PROPERTIES ========== */
/* ========== BASE STYLES ========== */
html,
body {
width: 100%;
height: 100%;
overflow-x: clip;
}
body {
color: var(--color-01dp); /* Figma Dark Mode/01dp #1e1e1e — body + heading default */
font-family: var(--font-body);
font-weight: var(--font-weight-regular);
font-size: 0.9375rem; /* 15px base body copy (site-wide) */
line-height: 1.6;
background-color: var(--color-white);
position: relative;
}
/* ========== END BASE STYLES ========== */
/* ========== TYPOGRAPHY ========== */
/* Fluid type scale: sizes scale with viewport width.
Reference viewport = 1600px (where 1vw = 16px = 1rem),
so each Xrem target is paired with Xvw as the clamp preferred value.
Line-heights are unitless ratios so they scale with the font-size. */
/* Heading Defaults — Collier (no uppercase) */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
}
/* Weights come from the ENCODED weight in each Figma type token, not its name —
the names are inverted (Heading/H1/Bold reports weight 600, while
Heading/H3/Semibold reports 700). Verified via get_variable_defs on 40059:512:
H1 600 · H2 600 · H3 600 · H4 600 · H5 600 (the "/Bold"-named tokens)
the "/Semibold"-named variants are 700 and are used for labels.
So headings default to Semibold; .h3/.h5 keep it explicitly. */
h1, .h1, h2, .h2, .h3, .h5 {
font-weight: var(--font-weight-semibold);
}
/* Heading Sizes — Figma H1=48/56, H2=40/48, H3=32/40, H4=24/32, H5=20/28 */
h1,
.h1 {
font-size: clamp(1.5rem, 3vw, 3rem);
line-height: 1.167;
} /* 24→48 / 56 */
h2,
.h2 {
font-size: clamp(1.5rem, 2.5vw, 2.5rem);
line-height: 1.2;
} /* 24→40 / 48 */
h3,
.h3 {
font-size: clamp(1.5rem, 2vw, 2rem);
line-height: 1.25;
} /* 24→32 / 40 */
h4,
.h4 {
font-size: clamp(1.25rem, 1.5vw, 1.5rem);
line-height: 1.333;
} /* 20→24 / 32 */
h5,
.h5 {
font-size: clamp(1.125rem, 1.25vw, 1.25rem);
line-height: 1.4;
} /* 18→20 / 28 */
h6,
.h6 {
font-size: clamp(1rem, 1vw, 1rem);
line-height: 1.5;
} /* 16/24 — inherits p-md scale */
/* Body Defaults — Inter */
p,
ul li,
ol li,
table {
font-family: var(--font-body);
font-size: clamp(0.8125rem, 0.95vw, 0.9375rem); /* 13→15 (site-wide body copy) */
line-height: 1.6;
font-weight: var(--font-weight-regular);
}
/* Display Utilities — Collier (Figma defines lg=64/72 and sm=56/64) */
.display-lg,
.display-sm {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
}
.display-lg {
font-size: clamp(2rem, 4vw, 4rem);
line-height: 1.125;
} /* 32→64 / 72 */
.display-sm {
font-size: clamp(1.75rem, 3.5vw, 3.5rem);
line-height: 1.143;
} /* 28→56 / 64 */
/* Paragraph Size Utilities — Inter */
.p-lg {
font-size: clamp(1rem, 1.125vw, 1.125rem);
line-height: 1.444;
} /* 16→18 / 26 */
.p-md {
font-size: clamp(0.875rem, 1vw, 1rem);
line-height: 1.5;
} /* 14→16 / 24 */
.p-sm {
font-size: clamp(0.8125rem, 0.875vw, 0.875rem);
line-height: 1.571;
} /* 13→14 / 22 */
.p-xs {
font-size: clamp(0.6875rem, 0.75vw, 0.75rem);
line-height: 1.667;
} /* 11→12 / 20 */
/* Legacy Size Utilities */
.fs-7 {
font-size: clamp(0.8125rem, 0.875vw, 0.875rem);
}
.fs-8 {
font-size: clamp(0.6875rem, 0.75vw, 0.75rem);
}
/* Label Utilities — Collier, Uppercase.
Weight was 500, which under Oswald (600/700 loaded) harmlessly resolved up to
600. Under Collier it would resolve DOWN to 400 = Collier Light. Set to 700 to
match Figma's Label/Small·Medium·Large = Collier 700. These four utilities have
zero markup references today, so this is a latent-trap fix, not a visual change. */
.label-lg,
.label-md,
.label-sm,
.label-xs {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}
.label-lg {
font-size: clamp(0.875rem, 1vw, 1rem);
line-height: 1.125;
} /* 14→16 / 18 */
.label-md {
font-size: clamp(0.75rem, 0.875vw, 0.875rem);
line-height: 1.143;
} /* 12→14 / 16 */
.label-sm {
font-size: clamp(0.6875rem, 0.75vw, 0.75rem);
line-height: 1.167;
} /* 11→12 / 14 */
.label-xs {
font-size: clamp(0.5625rem, 0.625vw, 0.625rem);
line-height: 1.2;
} /* 9→10 / 12 */
/* Overline Utilities — Collier (sentence case per Figma).
Same weight-500 -> Collier Light trap as the label utilities above; both are
unreferenced in markup. The live overline is .avm-overline, which uses
--font-overline (Collier Black) to hit the Figma 800 spec. */
.overline-lg,
.overline-sm {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
}
.overline-lg {
font-size: clamp(0.75rem, 0.875vw, 0.875rem);
line-height: 1.429;
} /* 12→14 / 20 */
.overline-sm {
font-size: clamp(0.6875rem, 0.75vw, 0.75rem);
line-height: 1.667;
} /* 11→12 / 20 */
/* Font Family Utilities */
.helvetica-neue {
font-family: var(--font-heading);
}
.inter {
font-family: var(--font-body);
}
/* Weight Utilities */
.bold {
font-weight: var(--font-weight-bold);
}
.semibold {
font-weight: var(--font-weight-semibold);
}
.medium {
font-weight: var(--font-weight-medium);
}
.regular {
font-weight: var(--font-weight-regular);
}
strong {
font-weight: var(--font-weight-bold);
}
/* ========== END TYPOGRAPHY ========== */
/* ========== MENU & NAVIGATION ========== */
/* Menu Container — wraps the upper nav (Phase 1) + main menu (Phase 2). */
.menu-container {
/* Figma header wrapper is Brand/Sandstone.
NO position here: Bootstrap's .fixed-top must win. Setting position:relative
overrode it (equal specificity, this sheet loads later), dropping the nav
into flow while custom.js still added its height as a margin to the hero —
the offset was applied twice. A fixed element is already a containing block,
so .avm-nav-logo positions against it without any help. */
background: var(--color-avm-sandstone);
margin-top: 0 !important;
}
/* Sandstone plate behind the centred logo — Figma "Ellipse 1"
(node I40059:1099;40018:2818). 146x121 at 724,5 against a logo at
741,13/118x106, so it is centred on the logo and extends ~17px left,
~11px right and ~8px above it.
The export is a bare — no gradient,
no stroke, no shadow — so it needs no SVG asset: border-radius:50% on a
pseudo-element reproduces it exactly. Note the fill is Brand/Sandstone,
the SAME token as the nav bar below, not white; it reads near-white only
because it sits against the dark Gradient/Bullet strip. That is the intent
— the sandstone bar bulging up into the strip so the logo sits in a notch. */
.avm-nav-logo::before {
content: '';
position: absolute;
inset: 0;
/* DOME, not a full ellipse: curved top, SQUARE bottom. The plate's flat edge
sits flush on the nav's bottom rule so it reads as the sandstone bar
bulging up into the gradient strip, not as an oval floating over it. */
border-radius: 50% 50% 0 0 / 60% 60% 0 0;
background: var(--color-avm-sandstone);
z-index: -1;
pointer-events: none;
}
/* Centred logo overlapping both bars — Figma node I40059:1099;40018:2815.
Spans from just under the strip's 4px black top rule to the bottom of the
nav, so the plate's flat edge lands flush on the nav's bottom border and the
logo is CONTAINED inside the dome rather than overhanging it. */
.avm-nav-logo {
position: absolute;
top: 4px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 5;
width: 146px;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.75rem;
}
/* The mark is wrapped in (desktop lockup / mobile vector emblem), so
— not — is the flex child. It has to pass the plate's box
through: `max-height:100%` on the resolves against its PARENT, and an
auto-height makes that percentage behave as `none`. Without this
the desktop lockup rendered 109px tall inside a 103px dome and overhung it.
Sizing the wrapper to the plate also keeps the desktop shrink-on-scroll
working, since that relies entirely on the container driving the img. */
.avm-nav-logo picture {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
}
.avm-nav-logo img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
/* Below xl the overlap stops working: the two-bar stack collapses, so a
106px logo pinned at top:13 hangs out of the header and over the hero.
Anchor it inside the single mobile bar and scale it down. */
@media (max-width: 1199.98px) {
.avm-nav-logo {
top: 50%;
transform: translate(-50%, -50%);
/* bottom:auto is the fix, not a tidy-up. The base rule sets top:4px AND
bottom:0; re-anchoring to top:50% here left `bottom:0` in force, so the
plate's height stayed pinned to 50% of the bar — 38px in a 76px bar.
The 's max-height:100% then crushed the mark to 34x30 and the
height clamp below never took effect: a tiny logo adrift in a dome with
41px of slack beside it. With bottom:auto the plate is sized by the mark
plus its padding, and width:auto lets the dome hug it. */
bottom: auto;
width: auto;
padding: 0.375rem 0.75rem;
}
.avm-nav-logo img {
/* max-height:none releases the base cap that was doing the crushing. The
ceiling is set by the bar: at 54px the mark plus 12px of padding makes a
66px plate, which clears the 76px collapsed bar. */
max-height: none;
max-width: none;
height: clamp(42px, 10vw, 54px);
width: auto;
}
}
/* ========== SHRINK ON SCROLL ==========
custom.js toggles .shrink-menu on .menu-container past 50px of scroll.
WHAT SHRINKS — and why it is the TOP BAR and the LOGO, nothing else:
- .avm-subnav CANNOT get shorter: its CTAs already sit on the 40px
tap-target floor, so there is at most ~6px in it.
- .avm-topbar CANNOT get shorter either: its white 12px text only clears
AA because it rides the dark middle band of Gradient/Bullet (see the
contrast note on .avm-topbar). Trimming the height drifts that text
toward the 3.74:1 / 4.12:1 edge stops. So on desktop it COLLAPSES
instead — hidden text carries no contrast requirement at all.
- Below xl the top bar is the ONLY bar (.avm-subnav is d-none, and the
top bar carries the hamburger + phone), so it never collapses there;
only the logo shrinks.
- The logo needs no rule of its own: .avm-nav-logo is top:4/bottom:0 and
its is max-height:100%, so its height is driven by the container.
Collapsing the top bar shrinks it for free, and it animates smoothly
because the parent's height is what is being transitioned. */
.menu-container.shrink-menu {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Suppress the shrink animation while JS measures the natural nav height
(see syncHeroMargin in custom.js) — without this, the measuring pass
flashes the collapsed bar back open for a frame. */
.avm-no-transition,
.avm-no-transition * {
transition: none !important;
}
@media (min-width: 1200px) {
.avm-topbar {
overflow: hidden;
max-height: 57px; /* 49px bar + 4px top rule + 4px bottom rule */
/* Same duration + curve as .avm-topbar-inner and .avm-nav-logo, so the bar,
the strip inside it and the logo plate all settle together. Mismatched
timings here were part of why the shrink read as jerky. */
transition: max-height var(--transition-nav) var(--ease-nav),
min-height var(--transition-nav) var(--ease-nav),
border-width var(--transition-nav) var(--ease-nav),
opacity var(--transition-nav) var(--ease-nav),
visibility 0s linear 0s;
}
/* SHRINK ON SCROLL IS KEPT — the top bar SHORTENS, it no longer COLLAPSES
(Brendan, 2026-08-14: "never collapse it", and separately "keep shrink").
It used to go max-height:0 / visibility:hidden past 50px of scroll, which
took Service Areas, Financing, Maintenance Plans and the socials out of
reach for anyone who had started reading.
49px -> 38px. RE-MEASURED, as the contrast note on .avm-topbar demands:
that note warns the white 12px links only clear AA because they are
centred on the dark middle of Gradient/Bullet, with the bar's edge stops
at 3.74:1 and 4.12:1. Shortening is SAFE because the gradient is sized to
the element, so it compresses with it and the text keeps riding the same
relative band. Measured white-on-gradient at the text span:
49px bar 35.7-64.3% 6.85:1 / 6.43:1
42px bar 33.3-66.7% 6.40:1 / 6.22:1
38px bar 31.6-68.4% 6.09:1 / 6.08:1 <- shipped
36px bar 30.6-69.4% 5.91:1 / 5.99:1 <- still passes
38px leaves real headroom over the 4.5 floor. Do NOT go below ~36px, and
re-measure again if the links ever wrap to a second line — that is what
actually breaks it, not the height on its own.
The logo shrinks for free, as it always did: the is max-height:100%
of a plate spanning the whole header, so trimming the bar trims the mark
(~87px -> ~76px). That is still roughly double the ~38px it collapsed to
before, which is the "larger on scrolled nav" ask.
`.shrink-menu .avm-nav-logo { width: 104px }` stays REMOVED — it clawed
back width during the full collapse, and with the bar merely shortening it
would squeeze the mark horizontally via max-width:100% for no reason. */
/* BOTH are needed. .avm-topbar-inner carries its own min-height:49px, so
shrinking only the outer bar does nothing — the inner holds it open. */
.shrink-menu .avm-topbar,
.shrink-menu .avm-topbar-inner {
min-height: 38px;
}
/* The inner's own transition is declared on the base .avm-topbar-inner rule
further down — it sits later in the file and would override anything set
here. Nothing to add in this block. */
.avm-nav-logo {
transition: width var(--transition-nav) var(--ease-nav),
padding var(--transition-nav) var(--ease-nav);
}
}
/* Below xl the top bar stays; the logo tightens on its own. */
@media (max-width: 1199.98px) {
.avm-nav-logo {
transition: width var(--transition-standard) ease,
padding var(--transition-standard) ease;
}
/* Below xl the carries an explicit height rather than being driven by
the container, so narrowing the plate alone would leave the logo the same
size. It has to be shrunk directly. */
.avm-nav-logo img {
transition: height var(--transition-standard) ease;
}
/* width stays AUTO in the scrolled state too. It used to re-impose
clamp(62px,15vw,88px) here, which put the fixed-width dome back the moment
you scrolled — 75px of plate around a 39px mark — and that scrolled state
is what reads as awkward, since it is where visitors spend their time. Only
the mark's height shrinks; the dome follows it. */
/* Mobile keeps a shrink, but a gentler one — 36-46px read as a small mark in
a 76px bar (Brendan, 2026-08-14: "make the logo larger on scrolled nav").
Now clamp(42px, 9.5vw, 52px) against a resting clamp(42px, 10vw, 54px), so
the mark stays substantial when scrolled. NOTE the two share a 42px floor,
so below ~440px wide there is no mobile shrink left at all — deliberate:
that is where the mark is already at its smallest readable size.
Desktop shrinks nothing at all now; see the note in the xl block above. */
.shrink-menu .avm-nav-logo {
width: auto;
padding: 0.25rem 0.625rem;
}
.shrink-menu .avm-nav-logo img {
height: clamp(42px, 9.5vw, 52px);
}
}
@media (prefers-reduced-motion: reduce) {
.avm-topbar,
.avm-nav-logo,
.menu-container {
transition: none;
}
}
/* ========== TOP NAV (upper bar) — Figma node 30154:475 ==========
White bar: logo (left) · "Father & Son…" tagline · Google/Facebook/Yelp
socials · Book Service + phone CTAs (right).
NOTE: Figma specifies Helvetica Neue *Black* (900); the Adobe kit currently
loads 500 & 700 only, so the black text renders at 700 (bold). Add a 900
weight to the kit for exact fidelity. */
.avm-topbar {
/* Figma Sub Nav (node I40059:1099;26001:650): Gradient/Bullet with 4px black
rules top and bottom, contents right-aligned.
CONTRAST — this is a vertical gradient and white text does NOT clear 4.5:1
across all of it. Measured white-on-gradient:
bar edges (0% / 100%) 3.74:1 and 4.12:1 FAIL
text band (35.7-64.3%) 6.90 -> 6.39:1 PASS
It passes because the 12px/14px links are vertically centred in a 49px bar,
so they sit entirely on the dark middle of the ramp; the failing stops carry
only padding. That safety margin depends on the bar staying ~49px and the
links staying on ONE line. If you change the height, add a second row, or
let a link wrap, RE-MEASURE — text drifting toward either edge fails AA. */
min-height: 49px;
background-image: var(--gradient-bullet);
border-top: 4px solid var(--color-black);
border-bottom: 4px solid var(--color-black);
}
.avm-topbar-link {
font-family: var(--font-label);
font-weight: var(--font-weight-bold);
font-size: 0.75rem;
line-height: 0.875rem;
text-transform: uppercase;
color: var(--color-white);
text-decoration: none;
white-space: nowrap; /* load-bearing: see the contrast note on .avm-topbar */
}
.avm-topbar-link:is(:hover, :focus-visible) {
color: var(--color-gray-100);
text-decoration: underline;
}
.avm-topbar-inner {
width: 100%;
max-width: 1600px;
margin-inline: auto;
/* 49px strip: no vertical padding, or the bar blows past the height the
contrast margin depends on (see the note on .avm-topbar). */
gap: 1.25rem; /* Figma gap: 20px */
min-height: 49px;
padding-inline: clamp(1rem, 5vw, 5rem); /* matches .avm-shell */
/* min-height MUST be listed here, not only in the xl shrink block. This rule
sits ~90 lines later than that block at equal specificity, so a
`transition: min-height` up there loses on source order and the inner
SNAPS from 49px to 38px while the outer bar eases — which is exactly what
made the shrink look jerky (Brendan, 2026-08-14). */
transition: padding var(--transition-nav) var(--ease-nav),
min-height var(--transition-nav) var(--ease-nav);
}
/* NOTE: the donor shipped a `.shrink-menu .avm-topbar-inner` rule here that
ADDED 0.5rem of vertical padding on scroll — it grew the nav from 107px to
114px instead of shrinking it. Removed 2026-08-06; the real shrink is the
top-bar collapse defined above. Do not reintroduce vertical padding here:
.avm-topbar-inner is deliberately padding-free so the 49px strip the
contrast margin depends on stays 49px. */
/* 3-part layout: left action ↔ centered logo ↔ right action */
.avm-topbar-inner > .avm-topbar-action {
flex: 1 1 0;
}
.avm-topbar-inner > .avm-topbar-action-end {
justify-content: flex-end;
}
/* CTA buttons — 8px rounded rectangles (not the global pill .btn) */
.avm-topbar-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem; /* 12px / 16px */
border-radius: 0.5rem; /* 8px */
font-family: var(--font-heading);
font-weight: var(--font-weight-bold); /* design = Black 900 */
font-size: 1rem;
line-height: 1.125;
text-transform: uppercase;
white-space: nowrap;
color: var(--color-gray-50);
text-decoration: none;
transition: background-color var(--transition-standard), color var(--transition-standard);
}
.avm-topbar-cta:is(:hover, :focus-visible) {
color: var(--color-white);
}
.avm-topbar-cta-dark {
background: var(--color-08dp);
}
.avm-topbar-cta-dark:is(:hover, :focus-visible) {
background: var(--color-12dp);
}
.avm-topbar-cta-phone {
background: var(--color-avm-red);
}
.avm-topbar-cta-phone:is(:hover, :focus-visible) {
background: var(--color-avm-red-hover);
}
/* Right cluster: social icon links + CTA buttons */
.avm-topbar-right {
flex: 1 1 0;
}
.avm-topbar-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
/* White on the dark Gradient/Bullet strip — Blood rendered ~1.5:1 here. */
color: var(--color-white);
font-size: 1.1rem;
text-decoration: none;
transition: color var(--transition-standard);
}
.avm-topbar-social:is(:hover, :focus-visible) {
color: var(--color-gray-300);
}
/* Google + Facebook sit as a tight pair (Figma 36093-1687) — shrink the box so
the two glyphs hug instead of the wide 32px hit-areas + row gap. */
.avm-topbar-socials .avm-topbar-social {
width: auto;
height: auto;
padding: 0.2rem;
}
/* Top nav responsive */
@media (max-width: 1199px) {
.avm-topbar-inner {
width: 100%;
max-width: 1600px;
margin-inline: auto;
padding: 1rem 1.5rem;
gap: 1rem;
}
}
/* Removed 2026-08-06: two dead `.avm-topbar-logo img` blocks (100px / 80px).
No PHP or JS references that class — this build's logo is .avm-nav-logo,
absolutely positioned on .menu-container. Donor leftover that the earlier
dead-class sweep could not see, because that pass only walked depth-0 rules
and these were nested inside @media. */
@media (max-width: 575px) {
.avm-topbar-inner {
width: 100%;
max-width: 1600px;
margin-inline: auto;
padding: 0.75rem 1rem;
}
.avm-topbar-cta {
padding: 0.625rem 0.75rem;
font-size: 0.875rem;
}
}
/* ========== END TOP NAV ========== */
/* Bootstrap dropdown-toggle caret reset (we use real carets) */
.dropdown-toggle.has-dropdown::after {
display: none;
}
/* ========== SUB NAV (main menu bar) — Figma node 30154:486 ==========
Full-width Superior-red bar; 7 centered uppercase links, 4 with dropdowns.
Desktop only (xl+) — below xl the links move into the offcanvas drawer.
NOTE: Figma text is Helvetica Neue Black (900); kit loads 500/700, so
rendered at 700. */
.avm-subnav {
/* Figma Nav Items row sits on Brand/Sandstone, not a dark band. */
background: var(--color-avm-sandstone);
}
.avm-subnav-ctas {
display: flex;
align-items: center;
gap: 0.5rem;
/* no margin-left:auto — .avm-subnav-logo-gap absorbs the free space instead */
}
/* Nav CTA metrics come from the comp: px-16 py-12 with 14/16 type, i.e. a
40px-tall button. Bootstrap's .btn-lg padding made the pair 346px wide
against the comp's ~304, and that 42px was coming straight out of the gaps
between nav items. */
/* (0,3,0) — must out-specify `.btn.btn-lg` (0,2,0), which is defined LATER in
this file and was winning on source order, giving 12px/24px padding and 16px
type instead of the comp's 12px/16px and 14px. */
.avm-subnav .btn.avm-subnav-cta {
/* Inline padding and type scale with the viewport between 1200 and 1440 —
see the FLUID SUBNAV FIT note on .avm-subnav-link. VERTICAL padding stays
0.75rem: 12+12 plus the 1rem line-height is exactly the 40px tap-target
floor, so it must not scale. */
padding: 0.75rem clamp(0.75rem, 1.6667vw - 8px, 1rem);
font-size: clamp(0.75rem, 0.8333vw + 2px, 0.875rem);
line-height: 1rem;
min-height: 40px;
}
/* Square edges on the nav CTAs, per Brendan's reference (2026-08-05).
Scoped through .avm-subnav so it beats the global .btn radius on
specificity (0,2,0 vs 0,1,0) rather than relying on source order —
.btn is defined later in this file and was overriding a flat rule here. */
.avm-subnav .avm-subnav-cta { border-radius: 0; }
/* The global `.btn` carries `margin-bottom: 0.5rem` (donor default, kept for
stacked buttons in body copy). In the nav that 8px landed INSIDE the flex
li, making its content box 42+8=50px — so `align-items:center` had no free
space to work with and both CTAs sat flush against the bar's top edge with
the 8px dumped underneath. The centering was never broken; the margin was.
Scoped to .menu-container so it beats `.btn` on specificity (0,2,0 vs
0,1,0) instead of source order, and so body-copy buttons keep their gap. */
.menu-container .btn {
margin-bottom: 0;
}
.avm-subnav-cta {
font-family: var(--font-label);
font-weight: var(--font-weight-bold);
font-size: 0.875rem;
line-height: 1rem;
text-transform: uppercase;
white-space: nowrap;
}
.avm-subnav-inner {
position: relative; /* offset parent for the full-width mega panel */
width: 100%;
max-width: 1600px;
margin-inline: auto;
padding-inline: clamp(1rem, 5vw, 5rem); /* matches .avm-shell */
}
/* Scoped through .avm-subnav (0,2,0) so it beats the donor's
`.avm-subnav .navbar-nav { gap: 1rem }`, which was winning on specificity
and squeezing every item to a 16px gap. The comp spreads them ~90px apart
(x = 78, 307, 546 | logo | 919, 1098), so space-between distributes the
free space instead of the logo slot swallowing all of it. */
.avm-subnav .avm-subnav-links {
justify-content: space-between;
gap: clamp(0.75rem, 2.5vw, 2.5rem);
}
.avm-subnav-links {
display: flex;
align-items: center;
margin: 0;
/* 50px, not the 36px the "Nav Items" frame reports — that frame is 36 tall
but its children overflow it: node 40061:9 spans 64–114 and the 40px CTAs
inside sit at 69–109, i.e. centred with 5px above and below. 50px is the
real band. It previously came out at 50 only by accident, via the global
`.btn` margin-bottom padding the CTA li to 42+8; with that margin removed
the bar collapsed to 42 and the buttons touched both edges. Declared on
this row because it is the element carrying align-items:center. */
min-height: 50px;
}
/* Reserved slot for the centred logo. It GROWS to absorb the free space, which
is what actually keeps the logo clear: a fixed-width slot is positioned by
flex flow and lands wherever the preceding items end, while the logo is
absolutely centred on the viewport — the two do not coincide, and the logo
sat on top of the 'Commercial' item. Growing the slot pushes the right-hand
group past centre so the logo always has room. */
.avm-subnav-logo-gap {
flex: 0 0 auto;
/* 186px at >=1440 (logo plate is 146, so 20px clearance either side),
tightening to 156px at 1200 (5px clearance). Part of the fluid fit. */
width: clamp(156px, 12.5vw + 6px, 186px);
}
.avm-subnav .navbar-nav {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between; /* links spread across the full bar (design) */
gap: clamp(0.5rem, 3.3333vw - 32px, 1rem);
width: 100%;
}
.avm-subnav .nav-item {
display: flex;
align-items: center;
}
.avm-subnav-link {
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0.8125rem 0; /* ~13px vertical (design) */
font-family: var(--font-label);
font-weight: var(--font-weight-bold);
/* ===== FLUID SUBNAV FIT (Collier) =====
Collier is a serif and runs ~16% wider than the Oswald it replaced, which
pushed this bar past its container on every common laptop width. Measured
in-browser: content needed 1250px against 1080 available at 1200 (over by
170), 1152 at 1280 (over by 98) and 1229 at 1366 (over by 21). Only 1440+
fit, so the phone CTA was being clipped on 1280x800 and 1366x768.
Rather than step at breakpoints, the four contributors interpolate
linearly from 1200 to 1440 and clamp at the design values above 1440:
type 12->14px, gap 8->16px, logo slot 156->186px, CTA inline pad 12->16px.
At 1200 that measures 1035px against 1080 available — 45px of slack.
Below 1200 the subnav is d-none, so the lower clamp is only a floor.
If you change any of these, re-measure; the four are budgeted together. */
font-size: clamp(0.75rem, 0.8333vw + 2px, 0.875rem); /* 12px -> 14px */
line-height: 1.143; /* 16px */
text-transform: uppercase;
white-space: nowrap;
}
/* Figma nav items are Dark Mode/01dp (#1e1e1e) on the Sandstone bar — node
I40059:1099;38006:3492. The donor forced WHITE here because its nav bar was
a dark Midnight band; against Sandstone that renders ~1.2:1, effectively
invisible. Brand red on hover. #1e1e1e on #e9e7e7 = 13.53:1. */
.avm-subnav .avm-subnav-link,
.avm-subnav .nav-item.show > .avm-subnav-link {
color: var(--color-01dp);
}
.avm-subnav .avm-subnav-link:is(:hover, :focus, :focus-visible, :active),
.avm-subnav .nav-item.show > .avm-subnav-link {
color: var(--color-avm-red);
}
.avm-subnav-caret {
font-size: 0.8em;
transition: transform var(--transition-standard);
}
.avm-subnav .nav-item.show > .avm-subnav-link .avm-subnav-caret {
transform: rotate(180deg);
}
/* Dropdown panels — white, elevated, rounded, dropped below the dark bar */
.avm-subnav .dropdown-menu {
min-width: 280px;
margin-top: 0.5rem;
background: var(--color-white);
border: 0;
border-radius: var(--border-radius-standard);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.18);
padding: 1.25rem 1.5rem;
}
/* Wide mega panel (Heating & Cooling) — two columns of category groups */
.avm-subnav .dropdown-menu.avm-mega-wide {
min-width: 620px;
}
/* Category group: red-icon + blue title, then its links */
.avm-mega-group + .avm-mega-group {
margin-top: 1.25rem;
}
.avm-mega-title {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--color-avm-blood);
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: 1rem;
text-transform: none;
text-decoration: none;
margin-bottom: 0.375rem;
}
.avm-mega-title i {
color: var(--color-avm-red);
}
.avm-mega-title:is(:hover, :focus-visible) {
color: var(--color-midnight);
}
/* Dropdown links — blue label + trailing chevron, red underline on hover */
.avm-subnav .dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.375rem 0;
color: var(--color-avm-blood);
font-family: var(--font-body);
font-weight: var(--font-weight-medium);
font-size: 0.9375rem;
line-height: 1.4;
background: transparent;
white-space: normal;
}
.avm-subnav .dropdown-item i {
color: var(--color-gray-400);
font-size: 0.8em;
}
.avm-subnav .dropdown-item span {
border-bottom: 2px solid transparent;
transition: border-color var(--transition-standard);
}
.avm-subnav .dropdown-item:is(:hover, :focus-visible) {
background: transparent;
color: var(--color-avm-blood);
}
.avm-subnav .dropdown-item:is(:hover, :focus-visible) span {
border-bottom-color: var(--color-avm-red);
}
/* Sub nav responsive — tighten link gap on the xl breakpoint */
@media (max-width: 1399px) {
.avm-subnav-inner {
padding: 0 2rem;
}
.avm-subnav .navbar-nav {
gap: 1rem;
}
.avm-subnav-link {
font-size: 0.8125rem;
gap: 0.375rem;
}
}
/* ========== TOP NAV — mobile actions (hamburger + icon CTAs) ========== */
.avm-topbar-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 0;
border-radius: 0.5rem;
background: var(--color-08dp);
color: var(--color-white);
font-size: 1.25rem;
transition: background-color var(--transition-standard);
}
.avm-topbar-toggle:is(:hover, :focus-visible) {
background: var(--color-12dp);
color: var(--color-white);
}
/* Icon-only CTA variant (mobile contact + phone) */
.avm-topbar-cta-icon {
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
font-size: 1.125rem;
}
/* ========== MOBILE OFFCANVAS ========== */
.avm-offcanvas {
background: var(--color-midnight);
max-width: 88vw;
width: 380px;
}
.avm-offcanvas-body {
padding: 0; /* full-bleed drawer nav (replaces the banned p-0 utility) */
}
.avm-offcanvas .offcanvas-header {
background: var(--color-white); /* white header so the color logo reads on the dark drawer */
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
padding: 1rem;
}
/* 64px -> 96px. The drawer mark is the client's vector emblem
(avm-logo.svg), so it stays sharp at any size and on any DPR — the old
237x212 raster lockup was already marginal at 64px on a 3x screen and could
not be enlarged without going soft. The header is white and the drawer is
380px, so 96px is comfortable; the emblem is portrait (958.5:1056 ≈ 0.91)
where the lockup was landscape, so it takes LESS width than before despite
being taller. */
.avm-offcanvas-logo img {
display: block;
height: 96px;
width: auto;
}
.avm-offcanvas-nav .nav-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
color: var(--color-gray-50);
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: 1rem;
line-height: 1.2;
text-transform: uppercase;
padding: 0.9rem 1.25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: background var(--transition-standard), color var(--transition-standard);
}
.avm-offcanvas-nav .nav-link:hover,
.avm-offcanvas-nav .nav-link:focus,
.avm-offcanvas-nav .nav-link[aria-expanded='true'] {
color: var(--color-avm-red);
background: rgba(255, 255, 255, 0.05);
}
.avm-oc-chevron {
font-size: 0.75rem;
transition: transform var(--transition-standard);
}
.avm-offcanvas-nav .nav-link[aria-expanded='true'] .avm-oc-chevron {
transform: rotate(180deg);
}
.avm-offcanvas-subnav {
background: rgba(0, 0, 0, 0.2);
}
.avm-offcanvas-subnav > .nav-item > .nav-link {
padding-left: 2.25rem;
font-size: 0.9rem;
}
/* Group pillar heading (red icon + bold label) */
.avm-offcanvas-subnav > .nav-item > .avm-offcanvas-group {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}
.avm-offcanvas-group i {
color: var(--color-avm-red);
margin-right: 0.35rem;
width: 1.25em;
text-align: center;
}
/* Deepest service-tier links */
.avm-offcanvas-subnav > .nav-item > .avm-offcanvas-subnav-inner {
padding-left: 3.25rem;
font-size: 0.85rem;
opacity: 0.9;
}
.avm-offcanvas-footer {
padding: 1rem;
background: var(--color-midnight-hover);
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.avm-offcanvas-footer .avm-topbar-cta {
width: 100%;
justify-content: center;
}
/* ========== END MOBILE OFFCANVAS ========== */
/* ========== END MENU & NAVIGATION ========== */
/* ========== HERO ========== */
/* Full-bleed background photo (art-directed ) with the avm-blood→dark
gradient overlaid in CSS — the gradient is intentionally NOT composited into
the webp files for this build. Centered content column sits above both.
Top margin is set to the fixed menu height at runtime by syncHeroMargin(). */
.avm-hero {
position: relative;
width: 100%;
background: var(--color-avm-blood); /* shows behind the texture while it loads */
/* Figma node 40059:515 stacks two blocks (columns, then the contact card),
so this is block flow — NOT the donor's flex/align-items:center, which
assumed a single vertically-centred child and squashed the section.
Figma padding: 65px top / 80px bottom, fluid down to mobile. */
padding: clamp(2.5rem, 4vw, 4.0625rem) 0 clamp(3rem, 5vw, 5rem);
overflow: hidden;
}
/* Full-bleed background — the Aviation grainy-red brand texture (avm-hero-bg-*).
Was the donor's photo of a van overlooking Greers Ferry Lake. */
.avm-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.avm-hero-bg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* NO overlay. The donor hero was a photograph and needed a scrim; Aviation's
hero background is a flat grainy-red texture that already carries its own
tone (Figma "Grainy BG Red"). The donor's ::after painted a hard-coded
rgba(15,40,72,…) navy — its old brand colour, which the token rename could
not reach because it was raw RGB — and it muddied the red badly.
Per the standing rule: hero backgrounds that ship with their own treatment
do not get a second CSS gradient layer. */
/* Content sits above the background image. No text-shadow: the flat red is
uniform, so the shadow only softened the type. */
.avm-hero-content {
position: relative;
z-index: 2;
}
/* Headline — left-aligned in the split hero column, sized to the Figma H1 (48px) */
.avm-hero-title {
margin: 0;
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold); /* Figma H1 = 600, not bold */
font-size: clamp(1.875rem, 3.2vw, 3rem); /* 30 → 48px */
line-height: 1.1667; /* Figma 56/48 */
}
/* Subheadline — Figma Arial Bold 24/32 (not the Arial Black display face) */
.avm-hero-subtitle {
margin: 0;
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: clamp(1.125rem, 1.6vw, 1.5rem); /* → 24px */
line-height: 1.3333; /* Figma 32/24 */
}
/* Accreditation badges (Trane Comfort Specialist, Mitsubishi Diamond Contractor) */
.avm-hero-badge {
height: 3.5rem;
width: auto;
}
/* BNI High Impact chapter badge — white plate so the logo's own red/gray
keeps its real brand colour instead of disappearing into the red hero
(unlike the Armstrong mark, this one has no white-on-transparent variant).
Height matches .avm-hero-badge (53px, see the override below) so the two
sit level in the credibility row. Review-doc action item, 2026-08-19. */
.avm-hero-bni-badge {
display: inline-flex;
align-items: center;
height: 53px;
padding: 0.5rem 0.85rem;
background: var(--color-white);
border-radius: 0.5rem;
}
.avm-hero-bni-badge img {
display: block;
height: 24px;
width: auto;
}
/* Contact-form card — Sandstone panel. Figma node 40059:563.
Repurposed from the donor's hero card: same selectors, Aviation values.
This also carries the light-surface override for the SHARED
/short-form.php include. That include is styled for dark bands
(text-white labels, bg-24dp inputs) and is used by 10+ pages, so it is
NOT edited. Labels stay VISIBLE — the include has no placeholders, so
hiding them would leave empty boxes, and the comp's placeholder-only
treatment fails WCAG 3.3.2 regardless. */
.avm-hero-form {
position: relative;
z-index: 1;
background: var(--color-avm-sandstone);
border-radius: 8px;
padding: 1.5rem 2rem;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
}
.avm-hero-form-title {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: 2rem;
line-height: 2.5rem;
color: var(--color-01dp);
margin-bottom: 0.875rem;
}
/* !important is REQUIRED here and is a deliberate, approved exception
(Brendan, 2026-08-05). /short-form.php hard-codes class="fs-7 text-white"
on every label, and Bootstrap's .text-white is `color:#fff !important` —
no selector specificity can beat it. The alternative was adding a light
variant to that shared include, which was declined to keep the 10+ pages
using it untouched. lint_diff will keep flagging this line; that is
expected, not an oversight. */
.avm-hero-form label {
color: var(--color-01dp) !important;
font-family: var(--font-label);
font-weight: var(--font-weight-bold);
font-size: 0.75rem;
line-height: 0.875rem;
text-transform: uppercase;
margin-bottom: 0.125rem;
}
/* Tighten the include's own row spacing — it is built for a full-width page
band, not a hero card. */
.avm-hero-form .row { --bs-gutter-y: 0.625rem; }
.avm-hero-form .form-group,
.avm-hero-form .mb-3 { margin-bottom: 0.625rem !important; }
/* (0,2,0) beats the include's .border-0 (0,1,0) — no !important needed. */
.avm-hero-form .form-control {
background-color: var(--color-white);
border: 1px solid var(--color-gray-100);
border-radius: 8px;
color: var(--color-01dp);
padding: 0.4375rem 0.625rem;
/* 40px floor: form controls are interactive elements under the tap-target
rule. The Figma fields are 30px, which would fail it — this is a
deliberate, documented deviation from the comp. */
min-height: 40px;
}
.avm-hero-form textarea.form-control { min-height: 80px; }
.avm-hero-form .form-control:focus {
background-color: var(--color-white);
border-color: var(--color-avm-red);
box-shadow: 0 0 0 3px rgba(170, 31, 36, 0.15);
}
.avm-hero-form .form-control::placeholder {
color: var(--color-gray-700);
opacity: 1;
}
/* Submit button — Aviation Red, auto width (not full-width) */
.avm-hero-form .btn-contact {
background: var(--color-avm-red);
border-color: var(--color-avm-red);
color: var(--color-white);
border-radius: 8px;
}
.avm-hero-form .btn-contact:is(:hover, :focus, :active) {
background: var(--color-avm-red-hover);
border-color: var(--color-avm-red-hover);
color: var(--color-white);
}
/* Hero form — the comp's compact 4-column arrangement (Figma node 40059:515):
[ First Name ][ Email Address ][ ][ ]
[ Last Name ][ Phone Number ][ Message ][ Submit Request ]
/short-form.php emits four stacked Bootstrap .row blocks and must not be
edited (10+ pages share it), so the grid is rebuilt in CSS: `display:contents`
on each .row drops the row boxes out of the box tree, which promotes the
.col children to grid items of the form itself. Each is then placed
explicitly — note the include's DOM order is fname, lname, PHONE, EMAIL,
so column 2 is deliberately assigned email(row 1) / phone(row 2) to match
the comp's reading order.
Scoped to >=1200px on purpose. The include's own stacking is correct below
that: at 992px the col-lg-7 card is only ~540px wide, and four columns there
would squeeze each field under ~120px.
Selectors lean on :nth-of-type over the include's markup. That is a coupling
to a shared file — if short-form.php's row structure ever changes, this
layout silently reverts to stacked rather than breaking. */
@media (min-width: 1200px) {
.avm-hero-form form {
display: grid;
grid-template-columns: 1fr 1fr 1.15fr auto;
grid-template-rows: auto auto;
column-gap: 0.75rem;
row-gap: 0.625rem;
/* stretch, not start: the Message and Submit cells span both rows and must
fill that height to match the comp. `start` left them hugging row 1. */
align-items: stretch;
}
/* Collapse the include's row/col boxes so the .col divs become grid items.
Bootstrap's gutters come off with them — grid gap replaces both. */
.avm-hero-form form > .row { display: contents; }
.avm-hero-form form > .row > [class*="col-"] {
width: auto;
max-width: none;
padding-inline: 0;
margin-bottom: 0 !important; /* beats the include's .mb-2 / .mb-4 utilities */
}
/* Row 1 of the include: First Name, Last Name */
.avm-hero-form form > .row:nth-of-type(1) > [class*="col-"]:nth-child(1) { grid-column: 1; grid-row: 1; }
.avm-hero-form form > .row:nth-of-type(1) > [class*="col-"]:nth-child(2) { grid-column: 1; grid-row: 2; }
/* Row 2 of the include: Phone, Email — swapped so email sits above phone */
.avm-hero-form form > .row:nth-of-type(2) > [class*="col-"]:nth-child(1) { grid-column: 2; grid-row: 2; }
.avm-hero-form form > .row:nth-of-type(2) > [class*="col-"]:nth-child(2) { grid-column: 2; grid-row: 1; }
/* Message and Submit each span both rows */
.avm-hero-form form > .row:nth-of-type(3) > [class*="col-"] {
grid-column: 3; grid-row: 1 / span 2;
display: flex; flex-direction: column;
}
.avm-hero-form form > .row:nth-of-type(4) > [class*="col-"] {
grid-column: 4; grid-row: 1 / span 2;
display: flex;
}
/* Fill the two-row height rather than sitting at the top of it. */
.avm-hero-form form > .row:nth-of-type(3) textarea.form-control {
flex: 1 1 auto;
min-height: 0; /* release the 80px floor so it tracks the two field rows */
resize: vertical;
}
.avm-hero-form form > .row:nth-of-type(4) .btn {
align-self: stretch;
white-space: normal;
padding-inline: 1.25rem;
}
}
/* Hero layout — Figma node 40059:515 ("Primary Content").
The comp's structure, read off the node:
Columns (40059:517) flex, gap 50, h-478 -> Main Content 798w + Image
Image (40059:561) h-671 -> OVERFLOWS that row by 193px
Form (40059:563) 798w, ~192 tall -> sits AFTER Columns
478 + 192 = 670 ≈ the image's 671. That is the whole trick: the photo spans
the content row AND the form, which is why its bottom lands level with the
form's bottom rather than above it.
Rebuilt here as a 2-column grid with the image spanning both rows, so the
alignment is self-correcting — it holds at any viewport instead of depending
on a hard-coded 478/671 pair that only balances at exactly 1600px.
`display: contents` on the two Bootstrap .rows promotes their .col children
to grid items (same technique as the hero form's own grid above). Below lg
the rows are left alone and everything stacks as before. */
@media (min-width: 992px) {
.avm-hero-split {
display: grid;
grid-template-columns: 798fr 580fr; /* Figma 798 : 580 inside the 1428 Columns */
column-gap: 50px; /* Figma gap-[50px] */
align-items: start;
}
.avm-hero-split > .row { display: contents; }
.avm-hero-split > .row > [class*="col-"] {
width: auto;
max-width: none;
padding-inline: 0; /* grid column-gap replaces the Bootstrap gutters */
}
/* Row 1 col 1 — credibility, headline, CTAs */
.avm-hero-split > .row:nth-of-type(1) > [class*="col-"]:nth-child(1) { grid-column: 1; grid-row: 1; }
/* Row 1 col 2 — the AC photo, spanning down past the content into the form row */
.avm-hero-split > .row:nth-of-type(1) > [class*="col-"]:nth-child(2) {
grid-column: 2;
grid-row: 1 / span 2;
align-self: stretch;
/* The photo must FILL the rows, never SIZE them. Left in flow, the image's
intrinsic aspect ratio sets the height of the two rows it spans, so the
rows totalled the photo's natural height while the left column only
filled part of it and the surplus fell below the form — 10px on AC
Repair, 0 on the home page purely because its copy happened to fit.
Any page whose hero copy wraps to a different number of lines would
mis-align, so this had to be fixed at the cause for all 33 sub-pages.
position:relative + an absolutely positioned image removes it from row
sizing: the rows are now sized by the left column (headline + CTAs, then
the form card) and the photo stretches to exactly that. */
position: relative;
min-height: 0;
}
/* Row 2 — the contact card, directly under the CTAs */
.avm-hero-split > .row:nth-of-type(2) > [class*="col-"] { grid-column: 1; grid-row: 2; }
/* (0,2,0) on purpose. The base `.avm-hero-unit` rule — which carries
max-height:671px — lives ~1,500 lines FURTHER DOWN this file, and a media
query adds no specificity, so a plain `.avm-hero-unit` here would lose on
source order and the photo would stay capped at 671px. */
.avm-hero-split .avm-hero-unit {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-height: none; /* release the 671px cap — the grid now sets the height */
object-fit: cover;
/* The form here is taller than the comp's (visible labels + the 40px
tap-target floor on inputs), so the spanned height exceeds the photo's
natural aspect and `cover` trims the surplus width. Anchored left/top on
purpose: the 45-degree chamfer is baked into the image's TOP-LEFT corner,
so trimming from the right keeps it intact. The rounded corners survive
regardless — those come from border-radius on the element box, not the
bitmap. */
object-position: left top;
}
}
/* ========== END HERO ========== */
/* ========== SECTION OVERLINE (reusable) ========== */
/* Section overline pill — reusable across section headers (Opening, Services…).
The bullet-metal gradient fill comes from a .bg-gradient-bullet-metal-* utility. */
/* Overline — plain uppercase Arial Rounded label (white on dark bands,
avm-red on light bands via the surface-context rule below) */
.avm-overline {
display: inline-block;
margin-bottom: 0.75rem;
color: var(--color-avm-red);
/* Figma Paragraph/Overline/Large is Collier 800 = Collier Black, which the kit
exposes as `collier-black` at CSS weight 600. Weight 700 here would give
ExBlack (real 900) — too heavy. Oswald could not reach 800 at all, so this
restores the Figma spec rather than approximating it. */
font-family: var(--font-overline);
font-weight: var(--font-weight-semibold);
font-size: 1rem; /* 16px (Figma) */
line-height: 1.25;
text-transform: uppercase;
}
/* Overline sits on the dark hero photo — red-on-charcoal fails contrast/reads muddy;
force white here (light-band overlines keep the red brand accent). */
.avm-hero .avm-overline,
.avm-hero-content .avm-overline {
color: var(--color-white);
}
/* ========== SERVICES SECTION — Figma node 30154:664 ========== */
/* Dark Blue Midnight-gradient band (bg comes from the .bg-gradient-blood-180 utility).
A colored band, so it carries top + bottom padding; the contrasting bg is
what marks the boundary with the section above. */
/* Tab selector — icon + 2-line label; active tab gets a dark icon/label and a
red|blue split underline bar. */
.avm-service-tabs {
gap: 5px;
flex-wrap: wrap;
}
.avm-service-tabs .nav-item {
flex: 1 1 0;
}
.avm-service-tabs .nav-link {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem 1.25rem; /* 10 / 16 / 20 (Figma) */
border: 0;
border-radius: 10px;
background: transparent;
color: var(--color-gray-50); /* #eef0f5 on the blood band */
font-family: var(--font-label);
font-weight: var(--font-weight-bold);
font-size: 0.875rem; /* 14px */
line-height: 1.14;
text-transform: uppercase;
text-align: center;
}
.avm-service-tabs .nav-link i {
font-size: 2.25rem; /* 36px */
}
/* NO white-on-hover rule here any more. This block dates from the donor design,
where the tab strip sat on the Blood band and white-on-hover was correct.
The strip is SANDSTONE now (see the authoritative block further down), and
the hover fill is gray-100 — white on that is 1.25:1, which is what put
unreadable labels on the home page's service tabs. Hover colour is set with
the rest of the current design instead. Do not reinstate this: no tab strip
on this build sits on the red band, .avm-process-tabs included. */
/* Active tab = filled Midnight box (Figma) */
.avm-service-tabs .nav-link.active {
color: var(--color-white);
background: var(--color-midnight); /* Midnight #191c20 */
box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.avm-service-tabs .nav-link.active i {
color: var(--color-white);
}
@media (max-width: 1199.98px) {
.avm-service-pane {
padding: 16px;
gap: 0;
}
}
.avm-acc-link:is(:hover, :focus-visible) {
color: var(--color-avm-blood);
text-decoration: underline;
}
/* Pane-level "Learn More" — muted gray uppercase link (Figma) */
/* Was --color-gray-600 (#8d919a): 3.16:1 on the white card at 14px bold, which
FAILS WCAG AA (14px bold is not "large text" — that needs 18.66px bold) and
read as a disabled control. Blood is 12.2:1. Verified across 8 instances. */
.avm-learnmore {
color: var(--color-avm-blood);
font-family: var(--font-label);
font-weight: var(--font-weight-bold);
font-size: 0.875rem;
text-transform: uppercase;
text-decoration: none;
}
.avm-learnmore:is(:hover, :focus-visible) {
color: var(--color-avm-red);
}
@keyframes avm-logos-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@media (prefers-reduced-motion: reduce) {
.avm-logos-group {
animation: none;
flex-wrap: wrap;
justify-content: center;
}
}
/* Advantage-v2 tile (financing benefits) — translucent, left-aligned */
/* Credential card — Figma "Advantage-v2" (node 40059:806). Repurposed from
the donor's translucent glass card, which had zero references. */
.avm-adv-v2 {
display: flex;
flex-direction: column;
gap: 0.625rem; /* Figma gap-10 */
padding: 1.125rem 1.25rem; /* Figma py-18 px-20 */
background: var(--color-white);
border: 0;
border-radius: 8px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.05); /* Figma Drop Shadow/Light */
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Rollover to match the cards higher up the page (Brendan, 2026-08-14: these
"feel like they're missing a roll-over effect like some of the ones closer to
the top have"). Same lift, shadow, icon scale and timing as
.avm-feature-card, so the page has ONE card-hover behaviour rather than two.
NOTE these cards contain no link — they are informational, not clickable —
so this is decorative feedback only. That is also why there is no
:focus-within here: .avm-feature-card needs it because it wraps a
stretched-link, and adding it to a card with nothing focusable inside would
be dead weight. If these ever become links, add :focus-within to match. */
.avm-adv-v2:hover {
transform: translateY(-4px);
box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}
.avm-adv-v2 .avm-adv-icon {
transition: transform 0.2s ease;
}
.avm-adv-v2:hover .avm-adv-icon {
transform: scale(1.08);
}
/* Below md: shrink the icon + shorten the banner */
@media (max-width: 767.98px) {
.avm-finance-icon {
width: 64px;
height: 64px;
font-size: 1.75rem;
border-width: 4px;
box-shadow: 0 0 0 4px var(--color-white);
}
.avm-finance-banner {
height: 140px;
border-radius: 24px 24px 0 0;
}
}
/* ========== END FINANCING + MAINTENANCE SECTION ========== */
/* ========== ABOUT US SECTION — Figma node 30154:1036 ========== */
/* Light gray-50 band (bg from the .bg-gray-50 utility; distinct from the white
body). Two columns: advantages (left) + Our Story narrative & CTAs (right). */
/* Advantage row icon — white circle w/ blue glyph (bg/color from utilities) */
.avm-about-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
font-size: 1.5rem;
}
/* Stack the ribbon below lg (un-skew into full-width segments) */
@media (max-width: 991.98px) {
.avm-values-band {
flex-direction: column;
transform: none;
border-radius: 20px;
}
.avm-value-inner {
transform: none;
padding-top: 0.5rem;
}
.avm-value-icon {
margin-top: -2.5rem;
}
.avm-value-seg:first-child {
border-radius: 18px 18px 0 0;
}
.avm-value-seg:last-child {
border-radius: 0 0 18px 18px;
}
}
/* About Us advantage — gradient icon circle (black border, no white ring) +
centered Arial-Rounded title & small text (both #383838 / 24dp). */
/* Bare 36px brand-red glyph — the comp uses no circular backing here, so
.icon-stacked is deliberately NOT used. */
.avm-adv-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-avm-red);
font-size: 2.25rem; /* Figma 36px */
line-height: 1;
}
.avm-adv-title {
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
font-size: 1.25rem; /* Figma Heading/H5 20/28 */
line-height: 1.4;
text-transform: uppercase;
color: var(--color-avm-red);
margin-bottom: 0.25rem; /* Figma gap-4 */
}
.avm-adv-text {
font-size: 0.875rem; /* Figma Paragraph/Small 14/22 */
line-height: 1.571;
color: var(--color-gray-700); /* Figma Neutral/700 #656870 — 5.57:1 on white */
}
/* ========== END ABOUT US SECTION ========== */
/* ========== OPENER // CLOSER 2-COL — Figma node 36093:1001 ========== */
/* Gray-50 band. Left: overline/H2/subhead/body/CTAs + 6 advantage cards.
Right: tall photo. Below: white "Reach out to our Team" contact card. */
/* Opener — Figma node 40059:577. Section sits on Brand/Sandstone; the
advantage cards sit on the lighter Neutral/50 above it. */
.avm-opener {
background: var(--color-avm-sandstone);
/* 6px black rule across the top — Figma node 40059:577 carries
`border-black border-solid border-t-6`. It was missing, so the sandstone met
the hero's steel bar with no seam. Note this is a SECOND rule: the steel bar
has its own 6px top border (node 40059:516) higher up inside the hero. */
border-top: 6px solid var(--color-black);
padding-top: clamp(2.5rem, 4vw, 4rem);
}
.avm-opener-advbar { margin-bottom: clamp(2rem, 3.5vw, 3.5rem); }
/* Advantage cards — white, rounded, soft shadow; red icon + red label */
.avm-opener-adv {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem; /* Figma gap-10 */
height: 100%;
padding: 1.25rem; /* Figma p-20 */
background: var(--color-gray-50); /* Figma Neutral/50 #eef0f5 */
border-radius: 8px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Figma Drop Shadow/Medium */
text-align: center;
transition: background-color var(--transition-standard), box-shadow var(--transition-standard);
}
/* Hover: card fills Aviation Red, icon + label turn white (Brendan, from the
prototype, 2026-08-11). It filled --color-midnight (charcoal) before, which
read as black. White on Aviation Red is 7.17:1, so the label and icon stay
well clear of AA either way. */
.avm-opener-adv:hover {
background: var(--color-avm-red);
box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.18);
}
.avm-opener-adv-icon {
color: var(--color-avm-blood); /* Figma Brand/Blood */
font-size: 2.25rem; /* Figma 36px */
transition: color var(--transition-standard);
}
.avm-opener-adv-label {
margin: 0;
font-family: var(--font-label);
font-weight: var(--font-weight-bold);
font-size: 0.875rem; /* Figma Label/Medium 14px */
line-height: 1.143; /* Figma 16/14 */
text-transform: uppercase;
color: var(--color-avm-blood);
transition: color var(--transition-standard);
}
.avm-opener-adv:hover .avm-opener-adv-icon,
.avm-opener-adv:hover .avm-opener-adv-label {
color: var(--color-white);
}
/* Right photo — fills the column, rounded, soft shadow */
.avm-opener-img {
width: 100%;
height: 100%;
min-height: 260px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
/* Reach-out form — Figma 36093:1023: 3 field columns (names / email+phone /
message) + submit button in the right column, single row on desktop. */
.avm-reachout-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr minmax(150px, auto);
gap: 0.75rem 1rem;
align-items: stretch;
}
.avm-reachout-col {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.avm-reachout-msg { }
.avm-reachout-msg textarea {
flex: 1 1 auto;
min-height: 100%;
resize: vertical;
}
.avm-reachout-actions {
display: flex;
}
.avm-reachout-actions .btn-contact {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding-inline: 1.25rem;
white-space: nowrap;
}
@media (max-width: 991.98px) {
.avm-reachout-grid { grid-template-columns: 1fr; }
.avm-reachout-actions .btn-contact { width: 100%; }
}
/* Feature cards (Comfort / Warranty / Efficiency / Reliability) */
/* Numbered badge for step-style .avm-feature-card grids (AC Repair process).
NOT .avm-process-num — that one is white-on-translucent-white and belongs to
the donor's DARK tab/pane component; on a light card it renders invisible. */
.avm-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--color-avm-red);
color: var(--color-white);
font-family: var(--font-label);
font-weight: var(--font-weight-bold);
font-size: 0.875rem;
line-height: 1;
}
.avm-feature-card {
height: 100%;
padding: 1.5rem;
background: var(--color-white);
border-radius: 12px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
/* Positioning context for Bootstrap's .stretched-link. The card lifts and
shadows on hover, which promises a click; before this only the ~11% the
CTA link occupied actually accepted one, while the near-identical
.avm-subpage-card grid below WAS fully clickable. Using Bootstrap's own
utility keeps the accessible name as the link text rather than swallowing
the whole card into one enormous anchor. */
position: relative;
}
.avm-feature-card-icon {
color: var(--color-avm-red);
font-size: 1.25rem;
}
.avm-feature-card-title {
margin: 0;
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: 1.125rem;
text-transform: uppercase;
color: var(--color-midnight);
}
.avm-feature-card-text {
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-gray-700);
}
/* ========== END RUUD PRO PARTNER BAND ========== */
/* ========== MAINTENANCE PLANS — Figma node 36093:1129 ========== */
/* Horizontal plan card: image (left) + blood content panel (right). */
/* Plan card — Figma node 40059:865. Repurposed from the donor's version
(same selectors, Aviation values).
NOT display:flex. The donor laid the two halves out with flex:1 on
.avm-plan-media / .avm-plan-body; this build uses a Bootstrap row/col
inside the card, and display:flex on the card turned that .row into a
flex item that shrank to its content (columns collapsed 653 -> 272).
The donor body was also Blood-on-white; Aviation's is a light panel. */
/* Figma node 40059:866 ("Vector 1") is a SHAPE, not a plain image box: the
photo is its fill and its top-left corner is cut diagonally — the same cut
the Service Option cards and the commercial callout carry. Applied to the
card rather than the media because the diagonal only crosses the image half
anyway, so one mechanism covers all three placements. Px, not %, so the
angle stays constant at any width. */
.avm-plan-card {
position: relative;
z-index: 1;
border-radius: 8px;
overflow: hidden;
clip-path: polygon(0 41.25px, 68.14px 0, 100% 0, 100% 100%, 0 100%);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.05); /* Figma Drop Shadow/Light */
background: var(--color-avm-sandstone);
}
.avm-plan-media {
position: relative;
min-height: 288px; /* Figma h-288 — the card's natural band height */
}
.avm-plan-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Content panel — Figma node 40059:867: Sandstone, 6px black left rule,
pl-100 pr-60 py-28, 16px gap. The deep left inset clears the badge that
straddles the seam. */
/* Padding SCALES below the 1600 design width. The comp's fixed pl-100/pr-60
leaves 560px of content in a 720px half; in a 653px half it leaves only 493,
which wrapped 3 of the 4 checklist items and grew the card from the comp's
5:1 band to 3.1:1. The left inset still has to clear the badge, so it scales
rather than collapsing. */
.avm-plan-body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
/* Percentages, not vw: vw tracks the VIEWPORT, but this panel is half of a
card that is already inset by the page rail, so vw stayed pinned at the
100px cap and the content width never grew. % is relative to the panel
itself, so the inset scales with the card. The left value still has to
clear the badge, which overhangs 61.5px onto this side. */
padding: 1.75rem 6% 1.75rem 12%;
background: var(--color-avm-sandstone);
border-left: 6px solid var(--color-black);
color: var(--color-00dp);
}
/* Checklist type scales with it so the items stay on ONE line, which is what
holds the card at the comp's proportions. */
.avm-plan-body .avm-svc-list li { font-size: clamp(0.8125rem, 0.92vw, 1rem); }
.avm-plan-body .avm-plan-title { margin-bottom: 0; }
.avm-plan-body .avm-svc-list { margin-bottom: 0; }
.avm-plan-title {
margin: 0 0 1rem;
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
font-size: clamp(1.375rem, 2vw, 2rem);
line-height: 1.25;
text-transform: uppercase;
color: var(--color-00dp); /* Figma Dark Mode/00dp #121212 */
}
@media (max-width: 991.98px) {
.avm-plan-media { min-height: 220px; }
/* left rule becomes a top rule once the halves stack */
.avm-plan-body {
border-left: 0;
border-top: 6px solid var(--color-black);
padding: 1.75rem 1.5rem;
}
}
/* ========== END MAINTENANCE PLANS ========== */
/* ========== FINANCING — Figma node 36093:1153 ========== */
.avm-financing {
background-color: var(--color-avm-blood);
/* The comp paints these bands with the grainy-red TEXTURE (an filling
the section), not a CSS gradient — see node 40059:596. Same source file as
the hero background. Blood stays as the load-time colour underneath. */
background-image: url('/img/avm-grain-red-1600.webp');
background-size: cover;
background-position: center;
padding-top: clamp(2.5rem, 4vw, 4rem);
}
.avm-fin-card {
display: flex;
flex-direction: column;
background: var(--color-white);
border-radius: 8px;
padding: 1.25rem;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
/* Benefit-card hover: fills Blood, all copy flips white (12.09:1 — AA/AAA).
Scoped to .avm-fin-card-benefit, NOT .avm-fin-card, on purpose — the wide
card holds the Finance It logo SVG and two solid buttons, which a dark
ground would wreck. .avm-adv-icon/-title/-text are SHARED with the About
block, so the colour flip is nested under the card rather than set on the
classes themselves. Matches the .avm-opener-adv:hover pattern above. */
.avm-fin-card-benefit {
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.avm-fin-card-benefit .avm-adv-icon,
.avm-fin-card-benefit .avm-adv-title,
.avm-fin-card-benefit .avm-adv-text {
transition: color 0.2s ease;
}
.avm-fin-card-benefit:hover {
background: var(--color-avm-blood);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.avm-fin-card-benefit:hover .avm-adv-icon,
.avm-fin-card-benefit:hover .avm-adv-title,
.avm-fin-card-benefit:hover .avm-adv-text {
color: var(--color-white);
}
@media (prefers-reduced-motion: reduce) {
.avm-fin-card-benefit,
.avm-fin-card-benefit .avm-adv-icon,
.avm-fin-card-benefit .avm-adv-title,
.avm-fin-card-benefit .avm-adv-text { transition: none; }
}
/* Sized by WIDTH, not height. The mark's viewBox is 578x90 (6.42:1); with
height:44px + width:auto it resolved to the full card width (601px against
the comp's ~216). Pinning the width keeps the ratio intact. */
.avm-fin-logo {
width: 216px;
max-width: 100%;
height: auto;
}
.avm-fin-text {
font-size: 0.875rem;
line-height: 1.571;
color: var(--color-gray-700);
margin-bottom: 1.25rem;
}
.avm-closer-link:is(:hover, :focus-visible) {
color: var(--color-white);
text-decoration: underline;
text-underline-offset: 3px;
}
.avm-closer-link:is(:hover, :focus-visible) i {
transform: translateX(4px);
}
@media (max-width: 767px) {
.avm-areas-callout {
flex-direction: column;
}
.avm-areas-callout-media {
min-height: 200px;
}
}
/* ========== END CLOSER ========== */
/* ========== SERVICE AREA SECTION — Figma node 30107:1476 ========== */
/* Midnight band. Left column carries all the content (header, two-column city
list, callout); the map is a right-anchored background image that bleeds past
the container to the section's right edge, so we sidestep grid col-sizing.
It shrinks with the viewport and drops out below lg for mobile performance. */
/* Service Areas — Figma node 40059:879. Red band, full-width map, then a
half/half row of city pills and the "don't see your location" card. */
.avm-service-area {
border-top: 6px solid var(--color-black); /* Figma border-t-6 */
background-color: var(--color-avm-blood);
/* The comp paints these bands with the grainy-red TEXTURE (an filling
the section), not a CSS gradient — see node 40059:596. Same source file as
the hero background. Blood stays as the load-time colour underneath. */
background-image: url('/img/avm-grain-red-1600.webp');
background-size: cover;
background-position: center;
padding-top: clamp(2.5rem, 4vw, 4rem);
}
@media (max-width: 1199.98px) {
.avm-map {
display: none;
}
}
/* ========== END SERVICE AREA SECTION ========== */
/* ========== FAQ SECTION — Figma node 30107:1512 ========== */
/* Dark #272727 (04dp) band. Centered header + two columns of collapsible FAQ
items (Bootstrap collapse). Each row: white question + white plus icon over a
gray-700 (#656870) rule; the plus rotates 45° to an × when open, answer below. */
.avm-faq-item {
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-gray-200); /* Figma #dcdfe7 divider on the Midnight band */
}
.avm-faq-q:is(:hover, :focus-visible) {
color: var(--color-avm-red);
}
/* Answer */
.avm-faq-a {
margin: 0.75rem 0 0;
color: var(--color-gray-400);
}
/* Inline links in answers (e.g. click-to-call) — white + underline for contrast on the dark band */
.avm-faq-a a {
color: var(--color-white);
text-decoration: underline;
text-underline-offset: 2px;
}
.avm-faq-a a:is(:hover, :focus-visible) {
color: var(--color-avm-red);
}
/* ========== END FAQ SECTION ========== */
/* ========== BUTTONS ========== */
/* Figma buttons are rounded-[4px] throughout (hero, opener, services,
financing, closer). The donor shipped 8px. */
.btn {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
font-family: var(--font-label);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
border-radius: 4px;
margin-bottom: 0.5rem;
transition: color var(--transition-standard), background-color var(--transition-standard), border-color var(--transition-standard);
}
.btn.btn-lg {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
.btn.btn-xl {
padding: 1.25rem 1.75rem;
font-size: 1.5rem;
}
/* Superior Blue */
.btn-avm-blood,
.btn-252455 {
color: var(--color-white);
background: var(--color-avm-blood);
border-color: var(--color-avm-blood);
}
.btn-avm-blood:is(:hover, :focus, :active),
.btn-252455:is(:hover, :focus, :active) {
color: var(--color-avm-blood);
background: var(--color-white);
border-color: var(--color-avm-blood);
}
.btn-outline-avm-blood {
color: var(--color-avm-blood);
background: transparent;
border-color: var(--color-avm-blood);
}
.btn-outline-avm-blood:is(:hover, :focus, :active) {
color: var(--color-avm-blood-hover);
background: transparent;
border-color: var(--color-avm-blood);
}
/* Superior Red */
.btn-avm-red {
color: var(--color-white);
background: var(--color-avm-red);
border-color: var(--color-avm-red);
}
.btn-avm-red:is(:hover, :focus, :active) {
color: var(--color-avm-red);
background: var(--color-white);
border-color: var(--color-avm-red);
}
/* GUNMETAL — for buttons sitting ON the Blood bands (.avm-services, .avm-closer).
Aviation Red on Blood is only 1.67:1, so a red button on a red band barely
separates from it (Brendan, 2026-08-14). The heroes keep their red buttons on
purpose; this is for the body bands.
Fill is the brand Bullet Metal gradient, so it belongs to the existing
vocabulary rather than being a new colour — it is the same gradient as the
nav strip and the overline pills.
BORDER IS BLACK by Brendan's direction (2026-08-14), replacing the Neutral/400
border the first pass shipped.
⚠️ KNOWN, ACCEPTED CONTRAST COST — do not "fix" this silently: black is
1.75:1 against the Blood band, so the border no longer carries the 3:1
component boundary WCAG 1.4.11 asks for, and the fill cannot carry it either
(gunmetal is 1.19:1 dark / 2.15:1 light on this band; Aviation Red was
1.67:1 and a deeper red 1.29:1 — nothing on this band clears 3:1 by fill).
The button still separates in practice on hue and on the gradient's sheen,
and it was a design call made with the numbers in hand. The accessible
alternative, if it ever comes back up, is the #c1c3cb border: 6.82:1 vs the
band, 5.71:1 vs the dark fill, 3.17:1 vs the light fill.
White label on the fill IS fine: 10.05:1 at the dark end, 5.57:1 at the
light midpoint. */
.btn-avm-gunmetal {
color: var(--color-white);
background: var(--gradient-bullet-metal-180);
border: 1px solid var(--color-black);
}
/* Hover LIGHTENS the metal rather than flipping to white (Brendan: "lighten
the shade on hover dont turn it white"). The light stop is #767676, which is
the ceiling — white text hits 4.54:1 there and drops under AA at #777777, so
this is as bright as the gradient can go while the label stays legible. Any
lighter needs a dark label instead. */
.btn-avm-gunmetal:is(:hover, :focus, :active) {
color: var(--color-white);
background: linear-gradient(180deg, #5a5a5a, #767676, #5a5a5a);
border-color: var(--color-black);
}
.btn-outline-avm-red {
color: var(--color-avm-red);
background: transparent;
border-color: var(--color-avm-red);
}
.btn-outline-avm-red:is(:hover, :focus, :active) {
color: var(--color-avm-red-hover);
background: transparent;
border-color: var(--color-avm-red);
}
/* Midnight */
.btn-midnight {
color: var(--color-white);
background: var(--color-midnight);
border-color: var(--color-midnight);
}
.btn-midnight:is(:hover, :focus, :active) {
color: var(--color-midnight);
background: var(--color-white);
border-color: var(--color-midnight);
}
.btn-outline-midnight {
color: var(--color-midnight);
background: transparent;
border-color: var(--color-midnight);
}
.btn-outline-midnight:is(:hover, :focus, :active) {
color: var(--color-midnight-hover);
background: transparent;
border-color: var(--color-midnight);
}
/* Lake Blue (Figma Brand/Lake Blue — hero phone CTA, mid-blue accent) */
.btn-avm-blood {
color: var(--color-white);
background: var(--color-avm-blood);
border-color: var(--color-avm-blood);
}
.btn-avm-blood:is(:hover, :focus, :active) {
color: var(--color-avm-blood);
background: var(--color-white);
border-color: var(--color-avm-blood);
}
/* Sandstone fill with Blood label — the hero's primary CTA (Figma node
40059:559). A new member of the brand-button family, not a duplicate:
no existing sibling pairs Sandstone with Blood. Blood on Sandstone
measures 9.74:1. */
.btn-avm-sand {
color: var(--color-avm-blood);
background: var(--color-avm-sandstone);
border-color: var(--color-avm-sandstone); /* invisible at rest — same as the fill */
}
/* Hover: the fill LIGHTENS slightly and a thin red edge appears (Brendan,
2026-08-13, from Figma 40059-559). It previously changed border-colour only,
leaving the fill identical — a 1px hairline swap on a light button reads as
no hover at all, which is exactly how it was reported. The lift in the fill
is what makes the state legible; the red edge is the brand cue on top.
#f4f3f3 is Sandstone mixed halfway to white: a perceptible lift without
going fully white, which would read as a different button. Blood on it is
10.6:1. Border stays 1px so nothing reflows, and .btn already transitions
background-color and border-color, so both fade together. */
.btn-avm-sand:is(:hover, :focus, :active) {
color: var(--color-avm-blood);
background: #f4f3f3;
border-color: var(--color-avm-red);
}
/* Hero secondary CTA — white stroke / no fill so it pops on the charcoal hero photo
(blood-on-charcoal was muddy). Scoped to .avm-hero, so closer/mid-page
btn-avm-blood keeps its solid fill. #7 */
.avm-hero .btn-avm-blood {
color: var(--color-white);
background: transparent; /* white stroke, no fill — pops on the charcoal hero */
border-color: var(--color-white);
border-width: 2px;
}
.avm-hero .btn-avm-blood:is(:hover, :focus, :active) {
color: var(--color-avm-blood);
background: var(--color-white);
border-color: var(--color-white);
}
.btn-outline-blood {
color: var(--color-avm-blood);
background: transparent;
border-color: var(--color-avm-blood);
}
.btn-outline-blood:is(:hover, :focus, :active) {
color: var(--color-white);
background: var(--color-avm-blood);
border-color: var(--color-avm-blood);
}
/* White */
.btn-white {
color: var(--color-midnight);
background: var(--color-white);
border-color: var(--color-white);
}
.btn-white:is(:hover, :focus, :active) {
color: var(--color-midnight);
background: var(--color-gray-50);
border-color: var(--color-white);
}
.btn-outline-white {
color: var(--color-white);
background: transparent;
border-color: var(--color-white);
}
.btn-outline-white:is(:hover, :focus, :active) {
color: var(--color-gray-50);
background: transparent;
border-color: var(--color-white);
}
/* 00dp (Dark) */
.btn-00dp {
color: var(--color-white);
background: var(--color-00dp);
border-color: var(--color-00dp);
}
.btn-00dp:is(:hover, :focus, :active) {
color: var(--color-white);
background: color-mix(in srgb, var(--color-00dp) 90%, #fff);
border-color: color-mix(in srgb, var(--color-00dp) 90%, #fff);
}
.btn-outline-00dp {
color: var(--color-00dp);
background: transparent;
border-color: var(--color-00dp);
}
.btn-outline-00dp:is(:hover, :focus, :active) {
color: var(--color-01dp);
background: transparent;
border-color: var(--color-00dp);
}
/* ========== END BUTTONS ========== */
/* ========== COLOR UTILITIES ========== */
/* Superior Blue */
.text-avm-blood {
color: var(--color-avm-blood);
}
.text-avm-blood {
color: var(--color-avm-blood);
}
.bg-avm-blood {
background-color: var(--color-avm-blood);
}
.bg-avm-blood {
background-color: var(--color-avm-blood);
}
.bg-avm-blood-hover {
background-color: var(--color-avm-blood-hover);
}
.border-avm-blood {
border-color: var(--color-avm-blood);
}
/* Superior Red */
.text-avm-red {
color: var(--color-avm-red);
}
.bg-avm-red {
background-color: var(--color-avm-red);
}
.bg-avm-red-hover {
background-color: var(--color-avm-red-hover);
}
.border-avm-red {
border-color: var(--color-avm-red);
}
/* Midnight */
.text-midnight {
color: var(--color-midnight);
}
.text-01dp {
color: var(--color-01dp);
}
.bg-midnight {
background-color: var(--color-midnight);
}
.bg-midnight-hover {
background-color: var(--color-midnight-hover);
}
.border-midnight {
border-color: var(--color-midnight);
}
/* Brand Gradients — Blue Midnight */
.bg-gradient-blood-0 {
background: var(--gradient-blood-0);
}
.bg-gradient-blood-45 {
background: var(--gradient-blood-45);
}
.bg-gradient-blood-90 {
background: var(--gradient-blood-90);
}
.bg-gradient-blood-135 {
background: var(--gradient-blood-135);
}
.bg-gradient-blood-180 {
background: var(--gradient-blood-180);
}
/* Brand Gradients — Red vs Blue */
.bg-gradient-red-vs-dark-0 {
background: var(--gradient-red-vs-dark-0);
}
.bg-gradient-red-vs-dark-45 {
background: var(--gradient-red-vs-dark-45);
}
.bg-gradient-red-vs-dark-90 {
background: var(--gradient-red-vs-dark-90);
}
.bg-gradient-red-vs-dark-135 {
background: var(--gradient-red-vs-dark-135);
}
.bg-gradient-red-vs-dark-180 {
background: var(--gradient-red-vs-dark-180);
}
/* Brand Gradients — Bullet Metal */
.bg-gradient-bullet-metal-0 {
background: var(--gradient-bullet-metal-0);
}
.bg-gradient-bullet-metal-45 {
background: var(--gradient-bullet-metal-45);
}
.bg-gradient-bullet-metal-90 {
background: var(--gradient-bullet-metal-90);
}
.bg-gradient-bullet-metal-135 {
background: var(--gradient-bullet-metal-135);
}
.bg-gradient-bullet-metal-180 {
background: var(--gradient-bullet-metal-180);
}
/* White / Black */
.text-white {
color: var(--color-white);
}
.bg-white {
background-color: var(--color-white);
}
.border-white {
border-color: var(--color-white);
}
.text-black {
color: var(--color-black);
}
.bg-black {
background-color: var(--color-black);
}
.border-black {
border-color: var(--color-black);
}
/* Gray 50 */
.text-gray-50 {
color: var(--color-gray-50);
}
.bg-gray-50 {
background-color: var(--color-gray-50);
}
.border-gray-50 {
border-color: var(--color-gray-50);
}
/* Gray 500 */
.text-gray-500 {
color: var(--color-gray-500);
}
.bg-gray-500 {
background-color: var(--color-gray-500);
}
.border-gray-500 {
border-color: var(--color-gray-500);
}
/* Gray 600 */
.text-gray-600 {
color: var(--color-gray-600);
}
.bg-gray-600 {
background-color: var(--color-gray-600);
}
.border-gray-600 {
border-color: var(--color-gray-600);
}
/* Gray 100 */
.text-gray-100 {
color: var(--color-gray-100);
}
.bg-gray-100 {
background-color: var(--color-gray-100);
}
.bg-gray-300 {
background-color: var(--color-gray-300);
}
.border-gray-100 {
border-color: var(--color-gray-100);
}
/* Gray 700 */
.text-gray-700 {
color: var(--color-gray-700);
}
.bg-gray-700 {
background-color: var(--color-gray-700);
}
.border-gray-700 {
border-color: var(--color-gray-700);
}
/* Dark Mode */
.text-00dp {
color: var(--color-00dp);
}
.bg-00dp {
background-color: var(--color-00dp);
}
.bg-02dp {
background-color: var(--color-02dp);
}
.bg-04dp {
background-color: var(--color-04dp);
}
.border-00dp {
border-color: var(--color-00dp);
}
.text-24dp {
color: var(--color-24dp);
}
.bg-24dp {
background-color: var(--color-24dp);
}
.border-24dp {
border-color: var(--color-24dp);
}
.text-16dp {
color: var(--color-16dp);
}
.bg-16dp {
background-color: var(--color-16dp);
}
.border-16dp {
border-color: var(--color-16dp);
}
/* Misc Utilities */
.text-666 {
color: #666666;
}
/* ========== END COLOR UTILITIES ========== */
/* ========== COMPONENTS ========== */
/* Steel Bar — decorative brushed-steel band behind the Reviews and Maintenance
sections (Figma nodes 40059:757 and 40059:860). Sits BEHIND opaque cards.
NEVER place text directly on it — see the --gradient-steel token note. */
.avm-steel-bar {
background-image: var(--gradient-steel);
border-top: 6px solid var(--color-black);
}
/* ===== PAGE SHELL =====
The Figma frame is 1600 wide with 80px gutters, so content runs 80 -> 1520
(1440 wide). Bootstrap's .container maxes at 1320 and centres, which put the
hero content at x=140 while the nav (padding 0 5rem) sat at x=80 — a 60px
stagger between the nav and every section below it.
.avm-shell is the single content rail: same 80px gutters as the comp, capped
at the 1600 frame width. Use it INSTEAD OF .container on sections, and keep
.row / .col-* inside it exactly as before. */
.avm-shell {
width: 100%;
max-width: 1600px;
margin-inline: auto;
padding-inline: clamp(1rem, 5vw, 5rem); /* 16px mobile -> 80px at >=1600 */
}
/* ===== CLOSER (Figma node 40059:975) ===== */
.avm-closer {
background-color: var(--color-avm-blood);
/* The comp paints these bands with the grainy-red TEXTURE (an filling
the section), not a CSS gradient — see node 40059:596. Same source file as
the hero background. Blood stays as the load-time colour underneath. */
background-image: url('/img/avm-grain-red-1600.webp');
background-size: cover;
background-position: center;
padding-top: clamp(2.5rem, 4vw, 4rem);
}
.avm-closer-trustbar { margin-bottom: clamp(2rem, 3.5vw, 3.75rem); }
/* The closer's trust cards are NOT identical to the opener's advantage bar:
the comp fills these with Sandstone and a LIGHT shadow, where the opener
uses Neutral/50 and a medium one. */
.avm-closer-trustbar .avm-opener-adv {
background: var(--color-avm-sandstone);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
/* ...but the HOVER must still be restated here. The rule above is (0,2,0) and
sits LATER in the file than .avm-opener-adv:hover, which is also (0,2,0), so
it won the cascade and the trust cards never changed background. The white
icon/label rule is (0,3,0), so it kept firing regardless — white copy on
Sandstone, 1.23:1, effectively invisible (Brendan, 2026-08-11).
Same red fill as the opener bar: white on Aviation Red is 7.17:1. */
.avm-closer-trustbar .avm-opener-adv:hover {
background: var(--color-avm-red);
box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.18);
}
/* Three photos — Figma nodes 40059:992/994/996, each holding a 263x592 shape
("Rectangle 6/7/8") inside a 472-tall frame, so the photo overflows and is
cropped from the TOP.
Each shape carries the SAME diagonal top-left cut as the Service Option
cards, the commercial callout and the maintenance card. The flattened export
shows only an in a rounded box and says nothing about it — screenshot
node 40059:993 on its own and the cut is unmistakable. I removed this clip
at one point after reading the export literally; it belongs here. Px units,
so the angle matches the other four placements exactly. */
.avm-closer-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem; /* Figma gap-28 */
align-items: stretch;
height: clamp(320px, 30vw, 472px); /* Figma h-472 */
}
.avm-closer-gallery img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top; /* image overflows downward, cropped from the top */
border-radius: 8px;
clip-path: polygon(0 41.25px, 68.14px 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 575.98px) {
.avm-closer-gallery { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; height: 260px; }
.avm-closer-gallery img:nth-child(3) { display: none; }
}
/* ===== FAQs (Figma node 40059:926) ===== */
.avm-faq { background: var(--color-avm-sandstone); padding-top: clamp(2.5rem, 4vw, 4rem); }
/* Figma node 40059:932: 1px Aviation Red rule under each item, 8px below the
question, and the question in Inter Bold 18/26.
Both are scoped through .avm-faq-accordion (0,2,0) because the donor's
`.accordion-item { border-bottom: .25px solid var(--color-midnight-hover) }`
and `.accordion-button { font-size: 1rem }` sit LATER in this file at equal
specificity and were winning on source order — the divider rendered
#47494d and the type 16px. */
.avm-faq-accordion .avm-faq-item {
background: transparent;
border: 0;
border-bottom: 1px solid var(--color-avm-red);
}
.avm-faq-accordion .avm-faq-button { font-size: 1.125rem; }
.avm-faq-button {
min-height: 48px; /* clears the 40px tap-target floor */
/* Bootstrap's .accordion-button leaves justify-content at its initial value,
so the +/- toggle sat immediately after each question instead of at the row
end — measured across ten questions the glyph landed at ten different x
positions (379-610px), with ~670px of dead space to the right of every one.
space-between pins it to the right edge so the column reads as one control. */
justify-content: space-between;
padding: 0.875rem 0 0.5rem;
background: transparent;
box-shadow: none;
/* The question is Inter Bold 18/26 — BODY type, not the heading face. */
font-family: var(--font-body);
font-weight: var(--font-weight-bold);
font-size: 1.125rem;
line-height: 1.444;
color: var(--color-01dp);
gap: 1rem;
}
/* Plus / minus toggle, per the comp — replaces Bootstrap's chevron. */
.avm-faq-button::after { display: none; }
.avm-faq-toggle {
flex: 0 0 auto;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: var(--color-01dp);
}
.avm-faq-button .avm-faq-toggle .fa-minus,
.avm-faq-button.collapsed .avm-faq-toggle .fa-plus { display: inline-block; }
.avm-faq-button .avm-faq-toggle .fa-plus,
.avm-faq-button.collapsed .avm-faq-toggle .fa-minus { display: none; }
.avm-faq-button:not(.collapsed) {
background: transparent;
box-shadow: none;
color: var(--color-avm-red);
}
.avm-faq-button:focus { box-shadow: none; }
/* Scoped to .avm-faq-accordion (0,2,0) ON PURPOSE. The donor's bare
`.accordion-body { font-size: 0.8rem }` at ~line 3177 is the same (0,1,0)
specificity as this rule but sits LATER in the file, so it was winning and
the FAQ answers rendered at 12.8px — the smallest type on the page, on its
most-read content. Verified 2026-08-11.
max-width caps the measure: the answers ran the full 1281px (~200 characters
per line) at desktop. 70ch lands in the 65-75ch comfortable range. */
.avm-faq-accordion .avm-faq-body {
padding: 0 0 1rem;
max-width: 70ch;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-gray-700);
}
/* The open item deliberately carries NO left rule. A 3px inset red bar used to
mark the expanded question (with a matching 0.875rem indent on the question
and its answer to clear it); Brendan cut it 2026-08-13. The indent went with
it — on its own it read as the row jogging sideways on open rather than as a
deliberate offset. Do not reinstate the bar.
⚠️ Open state is now carried ONLY by the +/- toggle flipping to a minus (plus
the answer itself appearing). `.avm-faq-button:not(.collapsed)` above sets
color: var(--color-avm-red), but that rule IS DEAD — the donor's
`.accordion-button:not(.collapsed) { color: var(--color-midnight) }` later in
this file is the same (0,2,0) specificity and wins on source order, so open
questions compute #191c20, not red. Same donor-source-order trap as the
divider colour and the 16px type documented at .avm-faq-accordion above.
Scoping it through .avm-faq-accordion (0,3,0) would make it fire — left dead
on purpose, since the point of this change was LESS red, not more. */
/* ===== SERVICE AREAS (Figma node 40059:879) ===== */
.avm-area-map {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.avm-area-pills { margin: 0; }
/* Location item — Figma nodes 40059:894-900: Sandstone fill, 10px padding,
4px radius, 12px gap, Drop Shadow/Light, Label/Large 16/18 in Blood with an
18px location-dot. The primary (home-base) item is Aviation Red with white
content and a star. */
.avm-area-pill {
display: flex;
align-items: center;
gap: 0.75rem; /* Figma gap-12 */
min-height: 40px; /* tap-target floor */
padding: 0.625rem; /* Figma p-10 */
border-radius: 4px;
background: var(--color-avm-sandstone);
color: var(--color-avm-blood);
font-family: var(--font-label);
font-weight: var(--font-weight-bold);
font-size: 1rem; /* Figma Label/Large 16/18 */
line-height: 1.125;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
transition: background-color var(--transition-standard), color var(--transition-standard);
}
.avm-area-pill i { color: var(--color-avm-blood); font-size: 1.125rem; } /* Figma 18px, Blood */
.avm-area-pill:is(:hover, :focus-visible) {
background: var(--color-avm-red);
color: var(--color-white);
}
.avm-area-pill:is(:hover, :focus-visible) i { color: var(--color-white); }
/* Primary (home base) pill — filled by default */
.avm-area-pill-primary {
background: var(--color-avm-red);
color: var(--color-white);
}
.avm-area-pill-primary i { color: var(--color-white); }
.avm-area-pill-primary:is(:hover, :focus-visible) {
background: var(--color-avm-blood);
color: var(--color-white);
}
/* Figma node 40059:901: the callout is a Sandstone card with an even 20px pad
on all four sides — the image is INSET at the card top, not flush to its
edge — and a 12px gap between the image, the text, and the CTA row. */
.avm-area-card {
background: var(--color-avm-sandstone);
border-radius: 8px;
padding: 20px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
/* Callout image — Figma node 40059:902: photo + dark-red scrim + white
skyline vector, all inside a rounded, clipped box. */
.avm-area-city {
position: relative;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 690 / 275;
}
.avm-area-city > img:first-child {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.avm-area-city::after {
content: '';
position: absolute;
inset: 0;
background: rgba(54, 9, 10, 0.49); /* Figma scrim */
pointer-events: none;
}
/* Skyline + pin are placed in percentages taken straight off the 687x229 Figma
image frame, so they hold their relationship at every card width. */
.avm-area-skyline {
position: absolute;
left: 3.05%; /* 21 / 687 */
bottom: 10.04%; /* 23 / 229 */
width: 93.89%; /* 645 / 687 */
height: auto;
z-index: 1;
pointer-events: none;
}
/* Node 40059:905. Offsets are for the SHADOW-PADDED 59x70 box (the 43x54 pin
sits at 207,70 and the filter adds 8px on every side). */
.avm-area-pin {
position: absolute;
left: 28.97%; /* (207 - 8) / 687 */
top: 27.07%; /* (70 - 8) / 229 */
width: 8.59%; /* 59 / 687 */
height: auto;
z-index: 2;
pointer-events: none;
}
/* The card itself carries the padding now, so the body only owns the 12px gap
that separates it from the image above. */
.avm-area-card-body { padding: 0; margin-top: 12px; }
.avm-area-card-body .avm-plan-title { margin-bottom: 0.5rem; } /* Figma text gap 8 */
.avm-area-card-body .avm-fin-text { margin-bottom: 12px; } /* Figma gap to CTAs */
/* ===== MAINTENANCE (Figma node 40059:859) ===== */
/* Band is Neutral/400 (#c1c3cb) — same grey as the Reviews band, NOT
Sandstone — and it closes with an 8px black rule (Figma border-b-8). */
.avm-maintenance {
position: relative;
background: var(--color-gray-400);
padding-top: clamp(2.5rem, 4vw, 5rem);
border-bottom: 8px solid var(--color-black);
}
/* H2 emphasis: the comp runs the heading at Semibold with the quoted
programme name at Bold. */
.avm-maintenance h2 strong { font-weight: var(--font-weight-bold); }
/* Steel Bar starts ~70% down the band (comp: top 502 of 720), not flush. */
.avm-maintenance-steel {
position: absolute;
left: 0; right: 0;
top: 69.7%;
bottom: 0;
z-index: 0;
pointer-events: none;
}
/* ===== REVIEWS (Figma node 40059:756) ===== */
/* Band is Neutral/400 (#c1c3cb), NOT white — the comp puts this grey between
the Brands row above and About below. */
.avm-reviews {
position: relative;
background: var(--color-gray-400);
padding-top: clamp(2.5rem, 4vw, 5rem);
}
/* Steel Bar sits across the LOWER portion (comp: top 455 of a 736 band, so
~62% down) rather than flush to the bottom. */
.avm-reviews-steel {
position: absolute;
left: 0;
right: 0;
top: 62%;
bottom: 0;
z-index: 0;
pointer-events: none;
}
.avm-reviews > .avm-shell { position: relative; z-index: 1; }
/* CONTRAST DEVIATION FROM THE COMP (deliberate, guardrail wins).
The comp sets the overline in Aviation Red on the Neutral/400 bands, which
measures 4.07:1 — under the 4.5:1 floor, and 16px bold does NOT qualify as
large text. Using Blood instead: 6.82:1, nearest brand colour that passes.
Applies to EVERY Neutral/400 band (Reviews and Maintenance both use it), so
any future section on this grey inherits the fix rather than repeating the
failure. Star icons stay Aviation Red — as non-text they need only 3:1 and
4.07 clears it. */
.avm-reviews .avm-overline,
.avm-maintenance .avm-overline { color: var(--color-avm-blood); }
/* Google rating strip — Figma node 40059:761 */
.avm-reviews-rating {
display: inline-flex;
align-items: center;
gap: 0.25rem;
min-height: 40px; /* tap-target floor */
margin-top: 0.5rem;
}
.avm-reviews-rating img { display: block; width: 19px; height: 19px; }
.avm-reviews-stars {
display: inline-flex;
gap: 0.25rem;
color: var(--color-avm-red); /* Figma stars are Aviation Red, not gold */
font-size: 0.9375rem; /* 15px */
line-height: 1;
}
.avm-reviews-tag {
display: inline-flex;
align-items: center;
gap: 0.5625rem; /* Figma gap-9 */
margin-left: 0.5rem;
font-family: var(--font-body);
font-weight: var(--font-weight-bold);
font-size: 0.75rem; /* Figma Paragraph/XSmall/Semibold 12/20 */
line-height: 1.667;
color: var(--color-01dp);
}
/* Rail the Elfsight widget renders into. Holds the comp's 4-up shape so the
section keeps its proportions before the widget ID is wired. */
.avm-reviews-rail { min-height: 222px; } /* Figma card height */
/* ===== ABOUT US (Figma node 40059:796) ===== */
.avm-about { background: var(--color-avm-sandstone); padding-top: clamp(2.5rem, 4vw, 4.5rem); }
.avm-about-emblem { max-height: 740px; width: auto; } /* Figma node 40059:816 */
/* ===== BRANDS (Figma node 40059:662) ===== */
.avm-brands { background: var(--color-white); padding-top: clamp(2.5rem, 4vw, 3.75rem); }
.avm-brands-title { color: var(--color-01dp); margin-bottom: 0.5rem; }
.avm-brands-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--avm-logo-gap);
margin: 0;
--avm-logo-scale: 1;
--avm-logo-gap: 2.1875rem; /* Figma gap-35 */
}
@media (max-width: 1599.98px) { .avm-brands-row { --avm-logo-scale: 0.86; --avm-logo-gap: 1.75rem; } }
@media (max-width: 1199.98px) { .avm-brands-row { --avm-logo-scale: 0.72; --avm-logo-gap: 1.5rem; } }
@media (max-width: 767.98px) { .avm-brands-row { --avm-logo-scale: 0.62; --avm-logo-gap: 1.25rem; } }
/* Each logo sits in a fixed-height slot and scales to fit. A plain
max-height does NOT size an SVG that carries no intrinsic width/height —
both SVG marks here collapsed to 0 and, with width:auto, stretched wide
enough to wrap the row onto three lines. Giving the LI the height and the
image object-fit:contain sizes raster and vector identically. */
/* Per-logo heights from the comp (node 40059:665). A single uniform height
distorts the row: Armstrong is 478:139, so at 70px tall it renders 241px
wide against the comp's 169 and pushes the row onto a second line. */
.avm-brands-row li {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
/* Heights scale together below the 1600 design width so the row stays on
ONE line instead of wrapping: the seven logos plus gaps need 1368px, and a
1440px rail only survives at the full frame width. */
.avm-brands-row li:nth-child(1) { height: calc(70px * var(--avm-logo-scale)); } /* Napoleon */
.avm-brands-row li:nth-child(2) { height: calc(39px * var(--avm-logo-scale)); } /* Concord */
.avm-brands-row li:nth-child(3) { height: calc(67px * var(--avm-logo-scale)); } /* Broan */
.avm-brands-row li:nth-child(4) { height: calc(49px * var(--avm-logo-scale)); } /* Armstrong ProTeam */
.avm-brands-row li:nth-child(5) { height: calc(55px * var(--avm-logo-scale)); } /* Mitsubishi Electric */
.avm-brands-row li:nth-child(6) { height: calc(85px * var(--avm-logo-scale)); } /* Ecobee */
.avm-brands-row li:nth-child(7) { height: calc(59px * var(--avm-logo-scale)); } /* Lifebreath */
.avm-brands-row img {
display: block;
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* ===== SERVICES (Figma node 40059:596) ===== */
.avm-services {
background-color: var(--color-avm-blood);
/* The comp paints these bands with the grainy-red TEXTURE (an filling
the section), not a CSS gradient — see node 40059:596. Same source file as
the hero background. Blood stays as the load-time colour underneath. */
background-image: url('/img/avm-grain-red-1600.webp');
background-size: cover;
background-position: center;
padding-top: clamp(2.5rem, 4vw, 4rem);
}
/* Tab selector — 9 tabs across, equal width, icon over a two-line label */
.avm-service-tabs {
display: flex;
flex-wrap: nowrap;
/* gap was 6px. The tabs already separate with a border-right hairline, so the
gap ALSO showed as bare Sandstone either side of that line — and because a
hover/active fill stops at the tab's own edge, the fill left an obvious
unpainted strip beside every divider (Brendan, 2026-08-12). Flush tabs let
the fill run edge to edge and the border does the dividing on its own.
Shared with the home page's service tabs, so this fixes both. */
gap: 0;
overflow-x: auto;
/* overflow-x:auto alone computes overflow-y to 'auto' as well, so the strip
grew a VERTICAL scrollbar whenever its content was a hair taller than the
box — visible as a bar down the right-hand tab (Brendan, 2026-08-12).
The strip never scrolls vertically, so pin it hidden. */
overflow-y: hidden;
border-radius: 8px;
background: var(--color-avm-sandstone);
}
/* min-height lives on the ITEM, not the link. With it on the link, the link
resolved to 102px inside an
that resolved to 101px, so the strip
reported scrollHeight 102 / clientHeight 101 and grew a 1px vertical
scrollbar. The li is now the flex container and the link stretches into it. */
.avm-service-tabs .nav-item { flex: 1 1 0; min-width: 128px; display: flex; min-height: 102px; }
.avm-service-tabs .nav-link {
width: 100%;
min-height: 0; /* Figma h-102 now enforced on .nav-item */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem; /* Figma gap-8 */
padding: 0.625rem 1rem 1rem; /* Figma pt-10 px-16 pb-16 */
border: 0;
border-radius: 0;
border-right: 2px solid var(--color-gray-300); /* Figma border-r-2 #ccced6 */
background: transparent;
color: var(--color-avm-blood);
font-family: var(--font-label);
font-weight: var(--font-weight-bold);
font-size: 0.875rem; /* Figma Label/Medium 14/16 */
line-height: 1.143;
text-transform: uppercase;
text-align: center;
transition: background-color var(--transition-standard), color var(--transition-standard);
}
.avm-service-tabs .nav-item:first-child .nav-link { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.avm-service-tabs .nav-item:last-child .nav-link { border-right: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.avm-service-tabs .nav-link i { font-size: 1.5rem; } /* Figma 24px glyph */
/* Hover/focus sets the COLOUR as well as the fill. Leaving colour unset let a
legacy `:hover { color: white }` from the donor block above leak through, and
white on this gray-100 fill is 1.25:1 — the labels vanished (Brendan,
2026-08-14). Midnight on gray-100 is 13.70:1, and it reads as a deliberate
darkening against the Blood resting state rather than as a second red.
The icon carries no colour of its own, so it follows this. */
.avm-service-tabs .nav-link:is(:hover, :focus-visible) {
background: var(--color-gray-100);
color: var(--color-midnight);
}
.avm-service-tabs .nav-link.active {
background: var(--color-avm-red);
color: var(--color-avm-sandstone); /* Figma #e9e7e7, not pure white */
border-radius: 4px;
border-right-color: transparent;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
/* Pane cards */
/* The card wrapper is TRANSPARENT. In Figma the fill lives on the Content block
(node 40059:616), not on the Image container (40059:614) — which is what lets
the section's grainy red show through the photo's top-left chamfer. Painting
sandstone here instead made the chamfer reveal sandstone-on-sandstone, i.e.
the cut was invisible. The fill moved to .avm-svc-body below. */
.avm-svc-card {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.avm-svc-media { position: relative; }
.avm-svc-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Scoped to the TAB cards. The commercial callout carries its own chamfer on the
CARD (node 40059:650, the 68.14/41.25 cut) — adding this larger one to its
photo stacked a second, parallel cut over the first and widened that corner
past what the design specifies. */
.avm-svc-card:not(.avm-svc-commercial) .avm-svc-media img {
/* Diagonal top-left chamfer — Figma node 40059:614 ("Image"). Figma bakes this
into the exported PNG's alpha rather than expressing it as a shape, so the
geometry was measured off that asset: a least-squares fit to the 50%-alpha
contour gives slope dx/dy = 1.649, which matches the site's existing chamfer
ratio (68.14/41.25 = 1.652) to three decimals — same angle, larger cut.
Intercepts land at 92px across the top and 56px down the left.
Measured on the 50% contour, NOT the fully-opaque bbox: the asset carries an
8px feathered bleed, and sampling "first opaque pixel" along a shallow
diagonal inflated it to 101x51 with a wrong 1.96 ratio.
Applied to the IMG, not .avm-svc-media — the circular badge is absolutely
positioned to overflow that container (bottom: -2.5rem) and clipping the
parent would cut it in half. */
clip-path: polygon(0 56px, 92px 0, 100% 0, 100% 100%, 0 100%);
}
/* Circular icon badge — Figma "Extra Large Icon" (nodes 40059:625, 40059:661).
NOT a flat red disc. The comp specifies:
size 123px, padding 8px, border-radius 300px
border: 6px solid #ebe9e9
box-shadow: 0 0 0.3px 8px #000 <- the black outer ring
fill: the SAME grainy-red texture as the section background
icon: 64px, filled with a left-to-right gradient #ebe9e9 -> #fff
Because the treatment is entirely CSS, every tab gets the identical badge
from one rule — no per-tab image export is needed, only the FA glyph
changes. */
.avm-svc-badge {
position: absolute;
left: 1.875rem; /* Figma left-30 */
bottom: -2.5rem;
width: 123px;
height: 123px;
padding: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
/* The ring is BRUSHED STEEL, not flat sandstone: the flat #ebe9e9 the Figma
export reports is the token's fallback, but the rendered comp shows the
Gradient/Steel sweep. Painted as the element background with the red
texture inset over it, because a gradient cannot be applied to
`border-color` on a rounded element. */
background-image: var(--gradient-steel);
box-shadow: 0 0 0.3px 8px var(--color-black); /* black outer ring */
pointer-events: none;
z-index: 2;
}
/* Grainy-red face, inset by the 6px ring width */
.avm-svc-badge::before {
content: '';
position: absolute;
inset: 6px;
border-radius: 50%;
background-image: url('/img/avm-grain-red-256.webp');
background-size: cover;
background-position: center;
}
.avm-svc-badge i {
position: relative;
z-index: 1;
font-size: 4rem; /* 64px — matches the comp's glyph:badge ratio of 0.53 */
line-height: 1;
color: var(--color-white);
/* Black outline on the glyph. paint-order puts the stroke BEHIND the fill so
it reads as an outline rather than eating into the letterform.
⚠️ paint-order halves the VISIBLE weight: the stroke is centred on the glyph
path, so the fill covers its inner half and only stroke/2 shows outside.
Measured against the comp (Commercial badge, web-comps/aviation-mech-v2.pdf
at 150dpi): the comp's visible outline is ~7.3px; rendered weight here comes
out ~0.82x the declared stroke. 4px was reading as a ~3px hairline, which is
what Brendan flagged.
⚠️ 7px is a CEILING, not the comp value. A centred text-stroke also eats the
glyph's counters: past ~7px the three windows in fa-industry-windows fill in
solid and the icon stops reading as a factory. Figma uses an OUTSIDE-aligned
stroke, which CSS cannot express on text — matching the comp's full weight
would mean shipping these as inline SVG with the stroke on the outer path
only. Tested 5/6/7/8/10px in-browser before settling here. */
-webkit-text-stroke: 7px var(--color-black);
paint-order: stroke fill;
}
/* Commercial callout badge — Figma node 40059:661 puts it at top 36 on the
seam between the photo and the content panel, NOT vertically centred. */
.avm-svc-badge-end {
left: auto;
/* Half the 123px badge past the photo's right edge, so it straddles the seam
between the photo and the content panel (Figma has it at x=631 of 1440,
i.e. centred on that join). right:auto would drop it back to the media's
left edge. */
right: -61.5px;
bottom: auto;
top: 36px;
transform: none;
}
/* -lg is now a no-op: the base badge is already the comp's 123px. Kept as an
alias so existing markup does not need editing. */
.avm-svc-badge-lg { }
/* Figma node 40059:616: the content block under the photo carries an 8px
black top rule, and 64px of top padding to clear the badge. */
.avm-svc-body {
background: var(--color-avm-sandstone); /* moved off .avm-svc-card — see the note there */
border-top: 8px solid var(--color-black);
padding: 4rem 1.875rem 1.5rem;
}
/* Commercial callout — same diagonal top-left cut as the Service Option
cards, and a 6px black rule on the content side's left edge (Figma
node 40059:650 border-l-6). */
.avm-svc-commercial {
clip-path: polygon(0 41.25px, 68.14px 0, 100% 0, 100% 100%, 0 100%);
}
.avm-svc-commercial .avm-svc-body {
border-top: 0;
border-left: 6px solid var(--color-black);
padding: 1.25rem 3.75rem 1.75rem 6.25rem; /* Figma pt-20 pr-60 pb-28 pl-100 */
}
.avm-svc-title {
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
font-size: clamp(1.375rem, 2vw, 2rem);
line-height: 1.25;
color: var(--color-01dp);
margin-bottom: 0.75rem;
}
.avm-svc-text { color: var(--color-01dp); margin-bottom: 1.25rem; }
/* Right-hand detail cards — Figma "Service Option" (nodes 40059:627/634/641).
The card's background is a vector whose TOP-LEFT CORNER IS CUT:
M0 41.25 L68.1441 0 L731 0 L731 165 L0 165 Z
i.e. a diagonal 68.14px across by 41.25px down. Expressed in px (not %) so
the angle stays constant at any card width. The comp's pl-[59px] exists to
clear that diagonal — reproduced below. */
.avm-svc-detail {
background: var(--color-avm-sandstone);
border-radius: 8px;
padding: 1.75rem 2.5rem 1.6875rem 3.6875rem; /* Figma pt-28 pr-40 pb-27 pl-59 */
clip-path: polygon(0 41.25px, 68.14px 0, 100% 0, 100% 100%, 0 100%);
}
.avm-svc-detail-title {
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
font-size: 1.25rem;
line-height: 1.4;
color: var(--color-01dp);
margin-bottom: 0.5rem;
}
.avm-svc-detail-text { color: var(--color-01dp); font-size: 0.875rem; line-height: 1.571; }
/* Commercial checklist */
.avm-svc-list { margin-bottom: 1.25rem; }
.avm-svc-list li {
display: flex;
align-items: flex-start;
gap: 0.625rem;
margin-bottom: 0.5rem;
color: var(--color-00dp);
font-weight: var(--font-weight-semibold);
font-size: 1rem;
line-height: 1.5;
}
.avm-svc-list i { color: var(--color-avm-blood); margin-top: 0.2em; } /* Figma #6c1418 */
@media (max-width: 991.98px) {
.avm-svc-badge-end { right: auto; left: 1.5rem; top: auto; bottom: -2rem; transform: none; }
}
/* ===== HERO (Figma node 40059:515) ===== */
/* Steel Bar band across the hero foot. Decorative — no text sits on it. */
.avm-hero-steel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 172px;
pointer-events: none;
z-index: 0;
}
/* Google rating cluster */
/* Figma hero uses the FULL-COLOUR Google favicon (node 4004:1491,
"Google_Favicon_2025", 41x42), not a monochrome FA brand glyph. The nav
strip keeps the white FA icon — that one IS monochrome in the comp. */
.avm-hero-reviews-mark {
display: block;
width: 41px;
height: 42px;
flex: 0 0 auto;
}
.avm-hero-stars { color: var(--color-avm-sandstone); font-size: 0.9375rem; line-height: 1rem; }
.avm-hero-stars i + i { margin-left: 0.25rem; }
.avm-hero-reviews-text {
font-family: var(--font-body);
font-weight: var(--font-weight-bold);
font-size: 0.875rem;
line-height: 1.375rem;
color: var(--color-white);
}
.avm-hero-badge { height: 53px; width: auto; }
/* Residential + commercial badge — 2px white stroke, transparent fill */
.avm-hero-tag {
font-family: var(--font-label);
font-weight: var(--font-weight-bold);
font-size: 0.875rem;
line-height: 1rem;
text-transform: uppercase;
color: var(--color-white);
border: 2px solid var(--color-white);
border-radius: 4px;
padding: 0.5rem;
}
.avm-hero-unit {
display: block;
max-height: 671px;
object-fit: cover;
border-radius: 8px; /* Figma node 40059:561 */
}
/* Tap-target floor — WCAG-safe hit area for interactive elements.
Apply to icon-only controls whose content alone won't fill 40x40: icon
buttons, nav toggles, social icons, carousel arrows, accordion/tab toggles,
close buttons. Text buttons should use .btn-lg (~48px) instead — never
redefine Bootstrap's base .btn (~38px) or .btn-sm (~31px).
Do NOT stack this on an element whose own padding already clears 40px. */
.tap-target {
min-height: 40px;
min-width: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
}
ul li strong {
color: var(--color-midnight);
}
/* Accordion */
.accordion-button [class*='fa-'] {
transition: transform 0.3s ease-in-out;
}
.accordion-button:not(.collapsed) [class*='fa-'] {
transform: rotate(180deg);
}
.accordion-item,
.accordion-header,
.accordion-button {
background: transparent;
border: none;
color: var(--color-midnight);
}
.accordion-item {
border-bottom: 0.25px solid var(--color-midnight-hover);
}
.accordion-button {
font-size: 1rem;
}
.accordion-body {
font-size: 0.8rem;
}
.accordion-item:last-of-type,
.accordion-item:last-of-type .accordion-button,
.accordion-item:last-of-type .accordion-collapse {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.accordion-button:not(.collapsed) {
color: var(--color-midnight);
box-shadow: none;
}
.accordion-button::after {
display: none !important;
}
/* Accordion Icon Toggle — collapsed: show plus, hide minus */
.accordion-button .fa-circle-minus,
.accordion-button.collapsed .fa-circle-minus {
display: none !important;
}
.accordion-button .fa-circle-plus,
.accordion-button.collapsed .fa-circle-plus {
display: inline-block !important;
}
/* Accordion Icon Toggle — expanded: show minus, hide plus */
.accordion-button:not(.collapsed) .fa-circle-minus {
display: inline-block !important;
}
.accordion-button:not(.collapsed) .fa-circle-plus {
display: none !important;
}
/* Icon Stacked */
.icon-stacked {
display: inline-flex;
position: relative;
width: 2em;
height: 2em;
align-items: center;
justify-content: center;
vertical-align: middle;
border-radius: 50%;
transition: box-shadow var(--transition-standard);
/* Backdrop is a native CSS background, NOT a Font Awesome glyph. Pseudo-element
FA icons render unreliably in Safari with the SVG+JS kit, so the circle/square
is drawn here; the actual icon is the /