/*
WebGuy IT — New Site (rewrite)
Brand design layer on top of Bootstrap 5.
Ported from the Astro site's src/styles/global.css (@theme tokens + component
classes). Bootstrap provides the grid, navbar, accordion, and base utilities;
this file provides the brand tokens, typography, buttons, and the custom
section/card/hero/CTA components. Load AFTER Bootstrap so these win.
*/
:root {
/* Brand tokens (single source of truth) — greens match the logo olive */
--wg-primary: #32620e;
--wg-primary-deep: #264d0a; /* AA-safe green for fills / small text */
--wg-navy: #032841;
--wg-gold: #d8ac2f;
--wg-darkgreen: #202d10;
--wg-lightgreen: #97ba66;
--wg-offwhite: #e6e7e2;
--wg-accent-green: #34904A; /* How We Run page: value card accents */
/* Hand-drawn marker swipe (nav mega panel + case study headings) */
--wg-marker: linear-gradient(transparent 62%, rgba(151, 186, 102, 0.5) 62%, rgba(151, 186, 102, 0.5) 96%, transparent 96%);
--wg-font-display: "Expletus Sans", ui-sans-serif, system-ui, sans-serif;
--wg-font-body: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
/* Map Bootstrap's primary onto the brand green */
--bs-primary: #32620e;
--bs-primary-rgb: 50, 98, 14;
--bs-body-color: #032841;
--bs-body-bg: #e6e7e2;
--bs-body-font-family: var(--wg-font-body);
--bs-link-color: #32620e;
--bs-link-hover-color: #202d10;
--bs-border-color: rgba(3, 40, 65, 0.1);
}
/* ── Base ─────────────────────────────────────────────── */
html {
scroll-behavior: smooth;
}
body {
background-color: var(--wg-offwhite);
color: var(--wg-navy);
font-family: var(--wg-font-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
font-family: var(--wg-font-display);
font-weight: 700;
color: var(--wg-navy);
text-wrap: balance;
}
p { text-wrap: pretty; }
:focus-visible {
outline: 3px solid var(--wg-navy);
outline-offset: 2px;
border-radius: 2px;
}
::selection {
background-color: var(--wg-lightgreen);
color: var(--wg-darkgreen);
}
/* ── Color helpers (mirror the Astro utility intent) ──── */
.text-navy { color: var(--wg-navy) !important; }
.text-navy-85 { color: rgba(3, 40, 65, 0.85) !important; }
.text-navy-70 { color: rgba(3, 40, 65, 0.7) !important; }
.text-navy-60 { color: rgba(3, 40, 65, 0.6) !important; }
.text-primary-deep { color: var(--wg-primary-deep) !important; }
.text-darkgreen { color: var(--wg-darkgreen) !important; }
.text-lightgreen { color: var(--wg-lightgreen) !important; }
.text-gold { color: var(--wg-gold) !important; }
.text-offwhite { color: var(--wg-offwhite) !important; }
.text-offwhite-85 { color: rgba(230, 231, 226, 0.85) !important; }
.text-offwhite-70 { color: rgba(230, 231, 226, 0.7) !important; }
.text-offwhite-60 { color: rgba(230, 231, 226, 0.6) !important; }
.bg-navy { background-color: var(--wg-navy) !important; }
.bg-offwhite { background-color: var(--wg-offwhite) !important; }
.bg-white-panel { background-color: #fff !important; }
.bg-gold { background-color: var(--wg-gold) !important; }
.font-display { font-family: var(--wg-font-display) !important; }
/* ── Layout scaffolding ───────────────────────────────── */
.wg-container {
width: 100%;
max-width: 80rem; /* ~ max-w-7xl */
margin-inline: auto;
padding-inline: 1rem;
}
@media (min-width: 640px) {
.wg-container { padding-inline: 1.5rem; }
}
.wg-narrow { max-width: 60rem; } /* max-w-3xl */
.wg-measure { max-width: 42rem; } /* max-w-2xl */
/* .wg-narrow plus the how-we-work timeline's arrow gutter. The gutter is
additive rather than carved out of the measure, so the step text keeps the
same 48rem reading width it would have had without the arrows. Below 768px
there is no gutter (see .timeline), so this collapses back to .wg-narrow. */
.wg-narrow-gutter { max-width: 48rem; }
@media (min-width: 768px) {
.wg-narrow-gutter { max-width: 55.5rem; } /* 48rem + 7.5rem */
}
.section { padding-block: 4rem; }
@media (min-width: 768px) { .section { padding-block: 5rem; } }
.section-tight { }
/* Cuts just the top padding on an otherwise normal .section — used where the
section above already ends with its own bottom margin/whitespace, so the
combined gap doesn't need a full .section top padding on both sides. */
.section-top-tight { padding-top: 1.5rem; }
@media (min-width: 768px) { .section-top-tight { padding-top: 2rem; } }
/* Gold hairline top and bottom separates the white section from whatever
comes before/after it. .border-y-navy (below) is defined later, so on the
trust strip — the one section that opts into it — it wins the cascade tie
and keeps that section's subtler navy border instead of gold. */
.section-white {
background-color: #fff;
border-top: 3px solid var(--wg-gold);
border-bottom: 3px solid var(--wg-gold);
}
/* Modifier: drop the top hairline only, for a section-white that follows
directly after another white/light section (e.g. About's origin story
hero into "Meet the team"), where the extra rule just adds visual noise. */
.section-white-no-top-border { border-top: 0; }
/* Modifier: drop the bottom hairline, for a section-white immediately
followed by another white section — same reasoning as the top variant,
for the seam below instead of above. Combine both on a section-white
sandwiched between two other white sections. */
.section-white-no-bottom-border { border-bottom: 0; }
.section-greygreen {
background-color: #4f585e;
background-image: url('../images/GreyGreenBackground.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* The grey photo texture back as this section's own background (painted
at the very back automatically), with a semi-transparent gradient tint
layered over it (::before, z-index:-2) instead of a flat opaque one —
#55583d is the hero photo's own sampled bottom-edge color, fading to
the brand's darkest green, so the texture shows through softly rather
than being fully covered like .section-greygreen's opaque tiles use it. */
.section-brand-green {
position: relative;
z-index: 0;
background-color: #4f585e;
background-image: url('../images/GreyGreenBackground.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.section-brand-green::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: linear-gradient(180deg, rgba(100, 102, 98, 0.4) 0%, rgba(60, 64, 56, 0.65) 100%);
}
/* Per-industry photo, swapped in behind the base photo when a "Who we
serve" tile is hovered or focused (see site.js). z-index:-1, placed
after the base layers in the DOM so it paints on top of them within
that same negative stacking level. */
.who-serve-photo {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
opacity: 0;
transition: opacity 400ms ease;
}
.who-serve-photo.is-visible { opacity: 1; }
/* Two stacked layers instead of one, so switching from one tile's
photo to another's crossfades between them (site.js toggles
.is-active on whichever layer just got the new src) instead of the
image hard-cutting from one industry photo straight to the next. */
.who-serve-photo-img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transition: opacity 500ms ease;
}
.who-serve-photo-img.is-active { opacity: 1; }
/* Same top-to-bottom colors as .section-brand-green's own gradient
(sampled from the hero photo), so an industry photo tints toward the
same palette as the rest of the section instead of a mismatched navy. */
.who-serve-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(100, 102, 98, 0.55) 0%, rgba(60, 64, 56, 0.75) 100%);
}
/* Same offwhite scrim treatment as .hero-media-scrim, laid over the
base/hover photo layers (all negative z-index, this paints last so it
sits on top) to soften the section the same way the hero photo is
softened, instead of the flat saturated gradient underneath. */
.section-brand-green::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: rgba(230, 231, 226, 0.18);
}
.border-y-navy {
border-top: 3px solid rgba(3, 40, 65, 0.1);
border-bottom: 3px solid rgba(3, 40, 65, 0.1);
}
/* ── Eyebrow ──────────────────────────────────────────── */
.eyebrow {
display: block;
font-family: var(--wg-font-body);
font-weight: 700;
font-size: 0.8125rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wg-primary-deep);
margin-bottom: 0.75rem;
}
.eyebrow.eyebrow-tight { margin-bottom: 0.5rem; }
.eyebrow.eyebrow-gold { color: var(--wg-gold); }
.eyebrow.eyebrow-dark { color: var(--wg-darkgreen); }
/* Decorative Font Awesome icon next to a page-intro heading (wg_page_intro's
optional icon arg): a padlock on Privacy Policy, scales of justice on Terms.
Purely decorative (the function marks it aria-hidden), so it is just a
large brand-gold glyph, not an interactive element. */
.page-intro-icon {
font-size: 5rem;
color: var(--wg-gold);
opacity: 0.9;
}
/* ── Buttons (built on Bootstrap .btn) ────────────────── */
.btn-brand {
background-color: var(--wg-primary-deep);
color: #fff;
border: 2px solid var(--wg-primary-deep);
font-weight: 700;
}
.btn-brand:hover, .btn-brand:focus {
background-color: var(--wg-darkgreen);
border-color: var(--wg-darkgreen);
color: #fff;
}
.btn-outline-navy {
background-color: transparent;
color: var(--wg-navy);
border: 2px solid var(--wg-navy);
font-weight: 700;
}
.btn-outline-navy:hover, .btn-outline-navy:focus {
background-color: var(--wg-navy);
color: var(--wg-offwhite);
}
.btn-on-dark {
background-color: var(--wg-offwhite);
color: var(--wg-navy);
border: 2px solid var(--wg-offwhite);
font-weight: 700;
}
.btn-on-dark:hover, .btn-on-dark:focus {
background-color: var(--wg-lightgreen);
border-color: var(--wg-lightgreen);
color: var(--wg-darkgreen);
}
.btn-brand, .btn-outline-navy, .btn-on-dark {
padding: 0.875rem 1.75rem;
border-radius: 0.375rem;
}
.btn-sm-brand { padding: 0.55rem 1.15rem; font-size: 0.9rem; }
/* ── Cards / tiles ────────────────────────────────────── */
.tile {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid rgba(3, 40, 65, 0.1);
background-color: #fff;
border-radius: 0.5rem;
padding: 1.5rem;
transition: box-shadow 150ms ease, opacity 200ms ease;
text-decoration: none;
color: inherit;
}
a.tile:hover { box-shadow: 0 8px 24px rgba(3, 40, 65, 0.1); }
/* Who we serve: dim the other industry tiles on hover/focus so more of
the per-industry photo underneath (see .who-serve-photo in site.js)
shows through, and grow the active one so it stands out against them.
The trigger is the unscaled .who-serve-cell wrapper, not the .tile
itself: scaling .tile up would grow its own hit box into the next
cell, so a mouse moving tile-to-tile would clip the edge of the
still-enlarging neighbor and cause the hover state to stick or
flicker between the two. Keeping the hover source fixed to the
original grid cell means the pointer crosses a clean, stable
boundary no matter how big the tile visually grows.
Hover-capable pointers only, so touch doesn't get stuck with a faded
or scaled tile after a tap. */
@media (hover: hover) and (pointer: fine) {
.who-serve-grid .tile {
/* position/z-index are set unconditionally (not just on :hover) so
hovering never toggles them mid-transition: since neither property
can animate, flipping them only while :hover is active means a
quick tile-to-tile move could pop the outgoing tile's stacking
order instantly while its scale/opacity were still easing back,
a visible snap layered on top of the animation. Fixing them in
place leaves only transform/opacity to animate, so an interrupted
transition just reverses smoothly instead of jumping. A short
120ms is used instead of the fade's 200ms so a fast tile-to-tile
pass settles before the next hover fires. */
position: relative;
z-index: 0;
transition: box-shadow 150ms ease, opacity 200ms ease, transform 120ms ease-out;
}
.who-serve-grid:has(.who-serve-cell:hover) .who-serve-cell:not(:hover) .tile,
.who-serve-grid:has(.who-serve-cell:focus-within) .who-serve-cell:not(:focus-within) .tile {
opacity: 0.45;
}
.who-serve-cell:hover .tile,
.who-serve-cell:focus-within .tile {
z-index: 1;
transform: scale(1.05);
}
}
.tile-navy { background-color: var(--wg-navy); border-color: var(--wg-navy); }
.tile-soft { background-color: rgba(230, 231, 226, 0.5); }
.tile-lightgreen { background-color: rgba(151, 186, 102, 0.25); }
.tile-offwhite { background-color: var(--wg-offwhite); border-color: var(--wg-offwhite); }
.tile-arrow { margin-top: 1rem; font-size: 0.875rem; font-weight: 700; color: var(--wg-primary-deep); }
a.tile:hover .tile-heading { color: var(--wg-primary-deep); }
.check-item { display: flex; gap: 0.75rem; color: rgba(3, 40, 65, 0.85); }
.check-item svg { margin-top: 0.35rem; flex-shrink: 0; color: var(--wg-primary-deep); }
.border-left-green { border-left: 4px solid var(--wg-lightgreen); padding-left: 1.25rem; }
.border-left-gold { border-left: 4px solid var(--wg-gold); padding-left: 1.5rem; }
/* ── Icon-badge list (Managed IT "What managed IT includes",
industry pages "What we do about it") ──────────────────── */
/* A spine connecting every icon top-to-bottom reads as one continuous,
strung-together checklist rather than a stack of identical feature
cards, without needing a number on each row to say so. */
.included-list { position: relative; }
.included-item {
position: relative;
display: flex;
gap: 1.25rem;
align-items: flex-start;
padding: 1.75rem 0;
}
.included-item + .included-item { border-top: 1px solid rgba(3, 40, 65, 0.1); }
.included-icon {
position: relative;
z-index: 1;
flex: none;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--wg-primary-deep);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
transition: background-color 0.2s ease;
}
.included-item:hover .included-icon { background: var(--wg-gold); color: var(--wg-darkgreen); }
.included-body { min-width: 0; }
/* Spine: runs through every icon's own center, top icon to bottom icon,
so the row of circles reads as one strung-together checklist. */
.included-list::before {
content: "";
position: absolute;
top: 1.75rem;
bottom: 1.75rem;
left: 1.5rem;
width: 2px;
background: var(--wg-gold);
opacity: 0.3;
}
/* ── "Who this is for / not for" panels (Managed IT page) ──── */
.fit-panel { height: 100%; border-radius: 0.75rem; padding: 1.75rem; }
.fit-panel-yes { background: rgba(151, 186, 102, 0.2); }
.fit-panel-no { background: rgba(230, 231, 226, 0.6); }
.fit-icon {
flex: none;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.15rem;
display: flex;
align-items: center;
justify-content: center;
}
.fit-icon-yes { color: var(--wg-primary-deep); }
.fit-icon-yes svg { width: 100%; height: 100%; }
.fit-icon-no { color: rgba(3, 40, 65, 0.45); font-size: 0.9rem; }
/* ── Hand-drawn circle around a word or phrase ────────── */
/* Two users with different triggers: the pricing tier names draw on card
hover, the How We Work guarantee line draws once on scroll reveal. Geometry
and stroke are shared; the trigger rules are kept separate so the two cannot
fight over stroke-dashoffset. */
.tier-name,
.wg-circled {
position: relative;
display: inline-block;
}
.tier-name {
/* .tile is a column flexbox, so every direct child defaults to
align-items:stretch and fills its full width no matter what its own
display is set to; align-self overrides that so this shrinks to its
own text instead of stretching the circle across the whole card. */
align-self: flex-start;
margin-top: -0.6875rem;
margin-bottom: calc(1.125rem - 0.6875rem);
margin-left: -1.125rem;
padding: 0.6875rem 1.125rem;
}
.wg-circled {
/* Sits inline inside a sentence, so it needs far less padding than the
tier-name block and must not add height to the line box. */
padding: 0.15rem 0.7rem;
}
.tier-name-label,
.wg-circled-label { position: relative; z-index: 1; }
.tier-name-circle,
.wg-circled-svg {
/* The padding above already reserves breathing room around the text;
this is just a small extra allowance for the stroke itself. */
position: absolute;
top: -3px;
left: -3px;
width: calc(100% + 6px);
height: calc(100% + 6px);
overflow: visible;
pointer-events: none;
}
.tier-name-circle path,
.wg-circled-svg path {
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 101;
}
/* Pricing: hover-driven, un-draws on leave */
.tier-name-circle path {
stroke: var(--wg-primary);
stroke-dashoffset: -101;
transition: stroke-dashoffset 260ms ease-in;
}
.tile:hover .tier-name-circle path {
stroke-dashoffset: 0;
transition: stroke-dashoffset 420ms ease-out;
}
/* Guarantee line: gold, drawn once when the section scrolls into view.
Default is fully drawn, so it still reads with JS off or reduced motion
(site.js only adds .reveal-ready when it is going to animate). */
.wg-circled-svg path {
stroke: var(--wg-gold);
stroke-dashoffset: 0;
}
.reveal-ready .wg-circled-svg path { stroke-dashoffset: -101; }
.reveal-ready [data-reveal].is-revealed .wg-circled-svg path {
animation: wg-arrow-draw 620ms ease-out 380ms forwards;
}
.badge-pill-solid { background: var(--wg-primary-deep); color: #fff; border-color: var(--wg-primary-deep); }
.pricing-tier-elevated { margin-top: 0; }
/* padding-top used to be a 19% inline style on .pricing-tiers-wrap at every
width — that space exists only to give the desktop arrow SVG (drawn from
the headline down to the cards) somewhere to paint. Mobile hides that
SVG's job entirely (see .pricing-tier-elevated below), so it doesn't
need the reserved space either; keeping it just pushed the now-first
MSA card down for no reason. */
.pricing-tiers-wrap { padding-top: 4%; }
@media (min-width: 768px) {
.pricing-tiers-wrap { padding-top: 19%; }
/* Bootstrap's .row is flexbox, not grid: percentage margins resolve against
the row's full width, not this column's own track, so this is ~1/3 of the
mockup's original 29% (which assumed a CSS Grid column-width basis). */
.pricing-tier-elevated { margin-top: 9%; }
}
@media (max-width: 767.98px) {
/* The connecting arrows are hand-drawn SVG paths at fixed pixel
coordinates assuming card 1 = Break/Fix, card 2 = MSA (featured,
middle), card 3 = Pre-Paid — they don't hold up once the cards stack
single-column on mobile, so the mobile variant doesn't render
usefully. Rather than redraw it, put the featured MSA card first in
source order here (only here — .row is flex, so this doesn't touch
desktop's left-to-right order the arrows are still drawn for). */
.pricing-tier-elevated { order: -1; }
/* Requested independently of the arrow issue above: Pre-Paid before
Break/Fix on mobile. MSA (the middle child) is untouched by these
first/last selectors, so this only swaps the other two. */
.pricing-tiers-wrap .row > .col:first-child { order: 1; }
.pricing-tiers-wrap .row > .col:last-child { order: 0; }
}
/* Arrows draw from the path's start point (up by the headline) down toward the
tier card, so the stroke travels the way the arrow points. A positive
dashoffset holds the dash off the front of the path; animating it to 0 walks
the visible run forward from t=0. (A negative offset reverses that and draws
tail-first, from the arrowhead back up.) */
@keyframes wg-arrow-draw { to { stroke-dashoffset: 0; } }
.pricing-arrows path,
.pricing-arrow-mobile path {
stroke-dasharray: 101;
stroke-dashoffset: 101;
animation: wg-arrow-draw 900ms ease-out 1000ms forwards;
}
/* The two head strokes start at the tip, so they hold until the shaft lands. */
.pricing-arrows .wg-arrowhead,
.pricing-arrow-mobile .wg-arrowhead {
animation-duration: 300ms;
animation-delay: 1800ms;
}
/* ── Hero + contour ───────────────────────────────────── */
.hero { position: relative; overflow: hidden; background-color: var(--wg-offwhite); }
.hero .wg-container { position: relative; }
.contour {
pointer-events: none;
position: absolute;
inset: 0;
height: 100%;
width: 100%;
}
/* Photo hero (home). The headline stays navy on the page's off-white, so the
photo sits under a scrim that is near-opaque behind the text and clears
toward the right, where the valley view is. */
.hero-media { min-height: clamp(22rem, 38vw, 32rem); display: flex; align-items: center; }
.hero-media-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 55%;
}
.hero-media-scrim {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
100deg,
rgba(230, 231, 226, 0.86) 0%,
rgba(230, 231, 226, 0.78) 34%,
rgba(230, 231, 226, 0.5) 62%,
rgba(230, 231, 226, 0.18) 100%
);
}
/* Narrow screens: the text spans the full width, so the scrim has to as well */
@media (max-width: 767.98px) {
.hero-media-scrim {
background: linear-gradient(
180deg,
rgba(230, 231, 226, 0.95) 0%,
rgba(230, 231, 226, 0.88) 60%,
rgba(230, 231, 226, 0.6) 100%
);
}
}
/* Home hero mascot: the frog-in-circle mark tucked into the bottom-right
corner of the photo, clear of the headline/buttons column. d-none d-lg-block
on the hides it on phones AND tablets (at md width, the headline
still spans nearly the full container and collides with it); this just
handles placement once it's shown. */
.hero-mascot {
position: absolute;
right: 1.5rem;
bottom: 1.5rem;
height: auto;
z-index: 1;
pointer-events: none;
}
@media (min-width: 640px) {
.hero-mascot { right: 8rem; bottom: 4rem; }
}
/* Photo hero for interior pages (breadcrumb + page intro). Same scrim idea as
the home hero, but the block sizes to its content instead of a min-height,
and the scrim closes back to solid off-white at the bottom so the photo
hands off cleanly to the section below. */
/* The photo carries on past the intro text and behind the gold arrows, ending
just below the arrowheads. The overhang is added as padding here and taken
back off the next section, so only the photo box grows — nothing below it
moves. It tracks the arrows because both scale with the container: the middle
arrowhead sits 292/1200 (~24%) of the container's width below the arrow
origin, and the clamp caps out once .wg-container hits its 80rem max. Below
768px the desktop arrows are hidden, so there is nothing to reach and the
overhang drops to zero.
--hero-page-gap is the breathing room between the intro copy and where the
arrows start. It is tight on desktop so the arrows read as coming off the
headline; with the arrows hidden below 768px it opens back up to a normal
section gap. */
:root { --hero-page-overhang: 0rem; --hero-page-gap: 2.5rem; }
@media (min-width: 768px) {
:root { --hero-page-overhang: clamp(11rem, 24vw, 15rem); --hero-page-gap: 0.5rem; }
}
.hero-page {
/* The colour the hero resolves to, as an "r, g, b" triplet so the scrim can
build rgba() from it. The negative margin on .hero-page + * pulls every
later section up too, so whatever follows paints over the hero's bottom
edge — this has to match that section's background or the overlap shows as
a hard line. Defaults to the body offwhite; pages whose next band is white
add .hero-page-white. */
--hero-page-bg: 230, 231, 226;
position: relative;
overflow: hidden;
background-color: rgb(var(--hero-page-bg));
padding-bottom: calc(var(--hero-page-gap) + var(--hero-page-overhang));
}
.hero-page-white { --hero-page-bg: 255, 255, 255; }
/* Compact hero: no arrow overhang, just a normal section gap below the intro.
The matching ".hero-page-compact + * { margin-top: 0; }" override lives
further down, after the general ".hero-page + *" rule it needs to beat in
the cascade (equal specificity, later source order wins) — see the note
there for why. */
.hero-page-compact { --hero-page-overhang: 0rem; --hero-page-gap: 2rem; }
/* Industry pages: the photo/scrim now sits behind the whole hero — breadcrumb,
headline, and the "operational reality" body copy — as one section, instead
of bleeding into a separate section below via the overhang/negative-margin
trick the other hero variants use. Body length varies per industry, so
there's nothing to bleed into predictably; the image's own mask (below)
fades it out to flat background well before the text runs out. No overhang,
no extra gap: the section's height comes from its own content. */
.hero-page-industry {
--hero-page-overhang: 0rem;
--hero-page-gap: 0rem;
/* .hero-page relies on overflow:hidden + its absolutely positioned img/scrim
resolving inset:0 against a definite height. With no explicit height and
body-copy length varying per industry, that definite-height requirement
was previously satisfied by a min-height alone; without it, some browsers
fall back to a much shorter height for that positioning calculation, and
overflow:hidden then clips the real (taller) in-flow text at that shorter
height — cutting paragraphs off mid-sentence. Since the mask already fades
the photo out well before the text runs out, nothing needs clipping here,
so overflow stays visible and the section is always exactly as tall as
its own content, however long that industry's copy is. */
overflow: visible;
min-height: clamp(20rem, 32vw, 26rem);
}
.hero-page > .wg-container { position: relative; }
/* The hero's photo and scrim are position:absolute with the default z-index:
auto, so per the CSS painting order they paint in the positioned-descendant
bucket, which comes after normal in-flow content regardless of DOM order.
Without an explicit stacking context here, the negative margin above would
pull this section's own text up underneath the hero image/scrim and the
photo would paint over it. position:relative + z-index:1 puts this section
in its own stacking context above the hero's, so the overlap only ever
shows the photo fading behind the text, never the text getting covered.
This only targets the arrow-overhang hero variants (home/interior pages
that use plain .hero-page or .hero-page-compact). The industry hero does
NOT use this sibling-based bleed trick at all — see .hero-page-industry-next
below, which is applied directly via its own class instead of relying on
a generic "+ *" selector picking up --hero-page-overhang from :root. That
combination of an inherited custom property plus a same-specificity sibling
selector was fragile (source order decided which rule won) and had already
caused the industry hero's next section to get pulled up 11–15rem and bury
the tail of the body copy underneath it. */
.hero-page + * { position: relative; z-index: 1; margin-top: calc(-1 * var(--hero-page-overhang)); }
.hero-page-compact + * { margin-top: 0; }
/* Section that follows the industry hero. Applied as an explicit class on
that section in the template (not a "+ *" sibling selector) so it can
never be affected by --hero-page-overhang or by cascade/source-order ties
with the rules above — it simply always has zero extra top margin. */
.hero-page-industry-next { margin-top: 0; }
.hero-page-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 58%;
/* Dissolve the photo into the section's own background before the bottom
edge, instead of leaving the scrim to bury it in the last few percent.
Without this the image is still faintly visible where the next section
starts painting over the hero, and gets clipped mid-frame. Finishing at
92% leaves a clean strip of --hero-page-bg for that overlap to land on. */
-webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.45) 74%, transparent 92%);
mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.45) 74%, transparent 92%);
}
/* Industry pages: a fixed-length mask (e.g. "transparent at 24rem") was tried
here, but the section's actual height is set by its own content — the img
is absolutely positioned with inset:0 and stretches to whatever height the
in-flow breadcrumb/headline/body copy give the section, which for a
four-paragraph industry runs well past 24rem. A mask measured in a fixed
length finishes dissolving to background at that same absolute depth on
every page regardless of how tall the section actually is, so on longer
pages the photo was fading out around the section's vertical midpoint and
leaving a large flat, image-less gap below it. Using percentages instead
ties the fade to the section's own resolved height (the same box the img
is stretched to fill), so it always finishes dissolving into flat
background right near the bottom of that page's hero, however tall the
copy makes it — matching the plain .hero-page-img mask below, just tuned
to fade a little earlier since the industry hero has no arrow overhang to
land the last bit of photo behind. */
.hero-page-industry .hero-page-img {
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, rgba(0, 0, 0, 0.45) 60%, transparent 85%);
mask-image: linear-gradient(180deg, #000 0%, #000 35%, rgba(0, 0, 0, 0.45) 60%, transparent 85%);
}
/* Only the horizontal wash lives here now: it keeps the navy breadcrumb and
headline legible over the left of the photo. The vertical fade that used to
sit on top of it was doing the bottom blend-out, which the image's own mask
now handles — running both just washed out the middle of the photo twice. */
.hero-page-scrim {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
100deg,
rgba(var(--hero-page-bg), 0.9) 0%,
rgba(var(--hero-page-bg), 0.82) 40%,
rgba(var(--hero-page-bg), 0.55) 70%,
rgba(var(--hero-page-bg), 0.28) 100%
);
}
/* Narrow screens: the text spans the full width, so the scrim has to as well */
@media (max-width: 767.98px) {
.hero-page-scrim {
background: linear-gradient(
180deg,
rgba(var(--hero-page-bg), 0.95) 0%,
rgba(var(--hero-page-bg), 0.9) 55%,
rgba(var(--hero-page-bg), 0.98) 100%
);
}
}
/* ── Trust strip ──────────────────────────────────────── */
/* Navy band instead of the plain white strip: a subtle top hairline and
grey bottom border (not the site's usual gold hairline) set it apart as
its own accent band, and the text/dot colors switch to light variants
so they stay readable against navy instead of the near-invisible
dark-on-dark of the default .trust-strip styling. */
.trust-strip-band {
background-color: var(--wg-primary-deep);
border-top: 2px solid var(--wg-primary);
}
.trust-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem 2.5rem;
font-size: 0.875rem;
font-weight: 700;
color: var(--wg-offwhite);
padding-block: 0.2rem;
}
.trust-strip .dot { display: inline-block; height: 0.5rem; width: 0.5rem; border-radius: 999px; }
.trust-strip .dot-gold { background-color: var(--wg-gold); }
.trust-strip .dot-green { background-color: var(--wg-lightgreen); }
/* ── CTA band ─────────────────────────────────────────── */
/* Flat mid-grey: separates from both the light page above and the navy footer
below. Kept on the dark side of "medium" because the headline, body copy, and
phone link on this band are all off-white — this is about as light as the
grey can go while that text still meets contrast (5.7:1 here). */
/* Case-study vertical tab: folder-tab popout anchored to the CTA band below */
.cs-vertical-tab-wrap {
display: flex;
justify-content: center;
margin-bottom: 0;
padding-bottom: 0;
position: relative;
z-index: 1;
}
.cs-vertical-tab {
display: inline-block;
background: #000;
color: #4f585e;
font-weight: 600;
font-size: 0.875rem;
padding: 0.6rem 1.75rem;
border-radius: 1.5rem 1.5rem 0 0;
text-decoration: none;
transition: background-color 0.2s ease;
position: relative;
top: 1px; /* overlap the CTA band border so the tab feels connected */
}
.cs-vertical-tab:hover,
.cs-vertical-tab:focus {
background: #222;
color: #fff;
text-decoration: none;
}
.cta-band {
background-color: #4f585e;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.cta-band .cta-panel { background-color: var(--wg-offwhite); border-radius: 0.5rem; padding: 1.5rem; }
@media (min-width: 640px) { .cta-band .cta-panel { padding: 2rem; } }
.cta-link {
font-weight: 700;
color: var(--wg-offwhite);
text-decoration: underline;
text-decoration-color: var(--wg-lightgreen);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.cta-link:hover { color: var(--wg-lightgreen); }
.text-underline-green {
font-weight: 700;
color: var(--wg-primary-deep);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.text-underline-green:hover { color: var(--wg-darkgreen); }
/* ── Badge pill ───────────────────────────────────────── */
.badge-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.375rem;
border: 1px solid rgba(216, 172, 47, 0.6);
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.badge-pill-gold { color: var(--wg-gold); }
.badge-pill-dark { color: var(--wg-darkgreen); background: #fff; }
/* ── Prose ────────────────────────────────────────────── */
.prose-site { max-width: 65ch; }
.prose-site p + p { margin-top: 1rem; }
.prose-site.prose-legal h2 { margin-top: 2rem; font-size: 1.5rem; }
.prose-site.prose-legal ul { margin-top: 0.75rem; padding-left: 1.5rem; list-style: disc; }
.prose-site.prose-legal li { margin-top: 0.375rem; }
/* Industry pages: match the width of the hero's own headline/subhead column
(.wg-narrow, 60rem) instead of .prose-site's default 65ch reading measure,
so the body copy's right edge lines up with the intro text above it rather
than stopping well short of it. Case study pages already override this via
.case-study-body (max-width: none), so this only affects industry.php. */
.prose-body { max-width: 60rem; }
.prose-body h2 { margin-top: 2.5rem; font-size: 1.5rem; }
.prose-body ul { margin-top: 1rem; padding-left: 1.5rem; list-style: disc; }
.prose-body li { margin-top: 0.5rem; }
.prose-body p + p { margin-top: 1rem; }
/* ── Homepage "About WebGuy IT" watermark heading ─────── */
/* The tagline (WG_SITE_TAGLINE) used to sit as a normal bold
above the
copy. It's now a large, faded decorative watermark sitting behind the
paragraph text instead of acting as a visible title — the
stays in
the DOM for SEO/structure (aria-hidden, with a visually-hidden duplicate
for screen readers) but is absolutely positioned, oversized, and
low-opacity so it reads as background texture, not a heading. */
.about-watermark-wrap {
position: relative;
overflow: hidden;
padding-top: 2rem;
padding-bottom: 2.5rem;
}
@media (min-width: 768px) {
.about-watermark-wrap { padding-top: 2.5rem; padding-bottom: 3rem; }
}
.about-watermark {
position: absolute;
bottom: 1.5rem;
right: 0;
left: auto;
max-width: 90%;
margin: 0;
text-align: right;
font-family: var(--wg-font-display);
font-weight: 700;
font-size: clamp(1.5rem, 4vw, 2.75rem);
line-height: 1;
color: var(--wg-lightgreen);
opacity: 0.45;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
z-index: 0;
}
/* Gold reads better than the default lightgreen as background texture on
.section-brand-green, since green-on-green loses most of its shape. */
.about-watermark-gold {
color: var(--wg-gold);
opacity: 0.3;
}
.about-watermark-wrap > .fs-5 {
position: relative;
z-index: 1;
}
@media (max-width: 575.98px) {
/* Absolute + bottom:1.5rem assumes the watermark is short enough to
tuck below the paragraph with room to spare. At this width it wraps
and grows taller than that reserved space, so its top edge climbs
up into the "Read our full story" link above it. Static flow avoids
the problem outright: it becomes a normal block in the panel instead
of an overlay, so it can never overlap content regardless of how
tall it renders. It's first in the DOM (screen readers get the
visually-hidden duplicate right away, ahead of the body copy it
decorates), so the wrap is switched to a flex column here and the
watermark given a high `order` to move it to the visual end without
touching the DOM order. */
.about-watermark-wrap { display: flex; flex-direction: column; }
.about-watermark {
position: static;
display: block;
order: 3;
margin-top: 1.25rem;
text-align: left;
white-space: normal;
font-size: clamp(1.25rem, 6vw, 1.875rem);
max-width: 100%;
}
}
/* ── Case studies index page ─────────────────────────────── */
/* Extra breathing room below the teaser grid, on top of the row's own
Bootstrap gutter (g-4 sets --bs-gutter-y). */
.case-studies-grid { margin-bottom: calc(2 * var(--bs-gutter-y)); }
/* ── Case study page ──────────────────────────────────── */
/* The body fills the reading column (wider than the slider) rather than
stopping at the default 65ch prose measure */
.prose-site.case-study-body { max-width: none; }
.case-study-head { display: flex; align-items: flex-start; gap: 2rem; }
.case-study-head-main { flex: 1 1 auto; min-width: 0; }
.case-study-logo {
flex: none;
width: 9rem;
max-width: 100%;
height: auto;
padding: 0.5rem;
border: 1px solid rgba(3, 40, 65, 0.1);
border-radius: 0.75rem;
background: #fff;
}
/* Mobile: the logo moves above the title and is capped by HEIGHT, not width, so
a square mark (960x960) and a wide one (414x250) come out the same visual size
instead of the wide one ballooning to fill its width. */
@media (max-width: 767.98px) {
.case-study-head { flex-direction: column-reverse; gap: 1rem; }
.case-study-logo {
width: auto;
height: 3.5rem;
max-width: 60%;
padding: 0.375rem;
border-radius: 0.5rem;
}
.case-study-stats { padding: 0 1.25rem 1.25rem; }
.case-study-stats-stacked { gap: 1.25rem; padding: 1.25rem; }
}
/* Stats box. Grid fallback (no photos): no padding-top, since the row's own g-4
gutter margin supplies it and the box ends up inset evenly on all four sides. */
.case-study-stats {
margin: 0;
padding: 0 1.5rem 1.5rem;
border: 1px solid rgba(3, 40, 65, 0.1);
border-radius: 0.75rem;
background: #fff;
}
/* Beside the slider: one stat per line, filling the slider's height */
.case-study-stats-stacked {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.75rem;
height: 100%;
padding: 1.5rem;
}
.case-study-stats-header {
font-family: var(--wg-font-display);
font-size: 1.25rem;
font-weight: 700;
color: var(--wg-navy);
margin: 0 0 0.5rem 0;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--wg-lightgreen);
text-align: center;
}
/* Case study section headings carry the same marker swipe as the nav panel.
fit-content keeps the highlight on the words instead of the whole column. */
.case-study-body h2 {
width: fit-content;
max-width: 100%;
padding-inline: 0.15em;
background: var(--wg-marker);
}
/* ── Placeholder note (visible TBD markers) ───────────── */
.tbd-note {
border: 2px dashed rgba(3, 40, 65, 0.2);
background: rgba(255, 255, 255, 0.6);
border-radius: 0.375rem;
padding: 1rem;
font-size: 0.875rem;
font-weight: 700;
color: rgba(3, 40, 65, 0.6);
}
/* ── Timeline (how-we-work) ───────────────────────────── */
/* The step indent is a variable because the closing note below the list has to
line up with the step text. Widened at 768px to open the arrow lane (below). */
:root { --wg-timeline-gutter: 2rem; }
@media (min-width: 768px) {
:root { --wg-timeline-gutter: 7.5rem; }
}
.timeline {
position: relative;
border-left: 2px solid var(--wg-lightgreen);
padding-left: var(--wg-timeline-gutter);
list-style: none;
margin: 0;
}
/* Closing note under the list: indented to the step text so it reads as part of
the same block rather than a new section. */
.timeline-note { margin-left: var(--wg-timeline-gutter); }
.timeline > li { position: relative; }
.timeline > li + li { margin-top: 2.5rem; }
.timeline .step-num {
position: absolute;
left: -45px;
display: flex;
height: 2rem;
width: 2rem;
align-items: center;
justify-content: center;
border-radius: 999px;
background-color: var(--wg-primary-deep);
font-family: var(--wg-font-display);
font-size: 0.875rem;
font-weight: 700;
color: #fff;
}
/* The gold arrows take over the job of connecting the steps once there is a
margin to draw them in (--wg-timeline-gutter widens above), so the green rule
stops carrying it. Setting the colour to transparent rather than dropping the
border keeps the 2px border box, so content does not shift sideways across the
breakpoint. Narrow screens have no margin to draw in, so they keep the rule. */
@media (min-width: 768px) {
.timeline { border-left-color: transparent; }
}
/* ── Process arrows (how-we-work timeline) ─────────────── */
/* One small fixed-viewBox SVG per step, absolutely positioned inside its own
: step heights vary with copy length, so a single SVG spanning the whole
list could never land its arrowheads on the circles.
Horizontally: .timeline content starts 7.5rem (120px) past its border box and
.step-num sits at left:-45px, so the circles occupy content-relative -45..-13
(box-relative 77..109). left:-7rem puts this box at content-relative -112..-46
(box-relative 10..76) — entirely in the left margin, clear of the numbers and
still inside the container.
Vertically: the arrow lives in the step it points INTO and reaches back up
over the 2.5rem inter-step gap. Its own circle sits ~21px below the
top
(it follows the phase eyebrow), and the arrowhead is at 92% of a 100px box, so
top:-70px lands the tip right on that circle.
These offsets are tuned against rendered step heights — re-check them if the
eyebrow, the gap, .step-num's size, or the padding above changes. */
.process-arrow {
position: absolute;
left: -7rem;
top: -70px;
width: 66px;
height: 100px;
pointer-events: none;
}
/* Steps reveal one at a time on scroll: the incoming arrow draws, then that
step's content fades in behind it. The
opts out of the global
[data-reveal] fade so the arrow is not faded along with the text — an arrow
should draw, not appear. Everything here is gated on .reveal-ready, which
site.js adds only when it is going to animate (not under reduced motion, not
without IntersectionObserver), so both of those cases fall through to plain
visible content and fully drawn arrows. */
.reveal-ready .timeline > li[data-reveal] { opacity: 1; transform: none; }
/* Positive offset, unlike the pricing arrows' negative one: with dashoffset
+101 the dash is hidden past the end of the path and the visible run grows
from the path's START, so the line travels tail-to-head and arrives at the
arrowhead. A negative offset reveals from the end backwards, which reads as
the head appearing first and the tail chasing it. */
.reveal-ready .timeline > li[data-reveal] .process-arrow path {
stroke-dasharray: 101;
stroke-dashoffset: 101;
}
.reveal-ready .timeline > li[data-reveal].is-revealed .process-arrow path {
animation: wg-arrow-draw 420ms ease-out forwards;
}
/* The two barbs are separate paths starting at the tip. Holding them until the
line has nearly arrived means the head gets drawn last, instead of sitting at
the destination waiting for the line to reach it. */
.reveal-ready .timeline > li[data-reveal].is-revealed .process-arrow path + path {
animation-duration: 150ms;
animation-delay: 400ms;
}
.reveal-ready .timeline > li[data-reveal] .step-body {
opacity: 0;
transform: translateY(12px);
transition: opacity 460ms ease, transform 460ms ease;
}
.reveal-ready .timeline > li[data-reveal].is-revealed .step-body {
opacity: 1;
transform: none;
transition-delay: 580ms; /* hold until the arrow's head has finished drawing */
}
/* First step has no incoming arrow, so there is nothing to wait for. */
.reveal-ready .timeline > li[data-reveal]:first-child.is-revealed .step-body {
transition-delay: 0ms;
}
/* ── Step watermark icons (how-we-work) ───────────────── */
/* Large faded icons positioned at the top-right of each step, in line with the
title. Uses the same icons from the "at a glance" section above.
Hidden on mobile to avoid crowding the narrower layout. */
.step-body { position: relative; }
.step-watermark {
position: absolute;
right: 0;
top: 0;
font-size: 7rem;
color: var(--wg-gold);
opacity: 0.2;
pointer-events: none;
z-index: 0;
line-height: 1;
}
/* Ensure step text stays above the watermark */
.step-body > *:not(.step-watermark) { position: relative; z-index: 1; }
/* ── Guarantee tile (how-we-work) ─────────────────────── */
/* Icon on the left, content fills the remaining width */
.guarantee-tile {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1.5rem;
}
.guarantee-icon {
flex: none;
font-size: 4rem;
color: var(--wg-gold);
line-height: 1;
}
.guarantee-content {
flex: 1 1 auto;
min-width: 0;
}
/* Mobile: stack icon above content */
@media (max-width: 575.98px) {
.guarantee-tile { flex-direction: column; gap: 1rem; }
.guarantee-icon { font-size: 3rem; }
}
/* ── Team cards (About) ───────────────────────────────── */
/* Headshots arrive at assorted sizes, so the photo is cropped to one fixed
ratio and every card lines up regardless of the source file. */
.team-photo {
width: 100%;
/* height:auto is load-bearing. The carries width/height attributes for
layout stability, and that height is a presentational hint the browser
treats as a definite value — which makes aspect-ratio a no-op and renders
each photo at its full natural height. Releasing height lets the ratio win. */
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: 50% 20%; /* faces sit high in these portraits */
border-radius: 0.375rem;
border: 2px solid var(--wg-gold);
background-color: var(--wg-offwhite);
}
/* Fallback for a member with no headshot yet: same footprint, brand initials. */
.team-photo-initials {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--wg-font-display);
font-size: 2.5rem;
font-weight: 700;
color: #fff;
}
/* ── Lead form ────────────────────────────────────────── */
.lead-form .form-label { margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 700; color: var(--wg-navy); }
.lead-form .form-control,
.lead-form .form-select {
border: 1px solid rgba(3, 40, 65, 0.25);
border-radius: 0.375rem;
}
.lead-form .form-control:focus,
.lead-form .form-select:focus {
border-color: var(--wg-primary-deep);
box-shadow: 0 0 0 0.2rem rgba(50, 98, 14, 0.15);
}
.form-error {
border-radius: 0.375rem;
background: #fef2f2;
padding: 0.75rem;
font-size: 0.875rem;
font-weight: 700;
color: #991b1b;
}
.form-success {
border-radius: 0.375rem;
border: 1px solid rgba(38, 77, 10, 0.3);
background: rgba(151, 186, 102, 0.2);
padding: 1rem;
}
/* ── Booking embed ────────────────────────────────────── */
.booking-embed { scroll-margin-top: 6rem; }
.booking-live {
position: relative;
min-height: 560px;
overflow: hidden;
border-radius: 0.5rem;
border: 1px solid rgba(3, 40, 65, 0.1);
background: #fff;
}
.booking-live iframe { position: absolute; inset: 0; height: 100%; width: 100%; border: 0; }
.booking-placeholder {
display: flex;
min-height: 280px;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
border: 2px dashed rgba(3, 40, 65, 0.2);
background: rgba(255, 255, 255, 0.6);
padding: 2rem;
text-align: center;
}
.map-box-photo {
position: relative;
overflow: hidden;
border: 1px solid rgba(3, 40, 65, 0.15);
background-size: cover;
background-position: center;
}
.map-box-photo::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.85));
}
.map-box-photo > div {
position: relative;
z-index: 1;
}
/* ── Pill links (404) ─────────────────────────────────── */
.pill-link {
border-radius: 999px;
border: 1px solid rgba(3, 40, 65, 0.2);
background: #fff;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 700;
color: var(--wg-navy);
text-decoration: none;
}
.pill-link:hover { border-color: var(--wg-primary-deep); color: var(--wg-primary-deep); }
/* wg_it_guy() used to be its own white .tile card, but stacked next to the
other single-panel components around it (a case-study card, a scope
tile, wg_next_steps's tile) that reads as a wall of near-identical white
boxes rather than distinct sections. It's a plain section now, like the
FAQ intro below, so .section-tight needs the same manual padding. */
.it-guy { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 768px) {
.it-guy { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}
/* ── FAQ (Bootstrap accordion restyle) ────────────────── */
/* wg_faq() renders its section with .section-tight, which carries no vertical
padding of its own (see .section-tight above) — callers are expected to add
spacing utilities, but several FAQ call sites didn't, leaving the accordion
flush against whatever section follows it. Padding here fixes every FAQ
section sitewide from one place instead of patching each call site.
Top padding is small and fixed (not responsive) on purpose: most call
sites are preceded by a section with its own generous bottom padding
(e.g. managed-it's scope-boundary tile, a full .section), so a small top
padding here is enough to avoid ever looking flush without compounding
into a too-large gap. It only needs to fully carry the gap on its own
when the preceding section ends on a hairline border with little
padding of its own (industry pages with no case study, e.g. Non-profit,
Dining) — 1.5rem still reads as an intentional gap there. */
.faq { padding-top: 1.5rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) {
.faq { padding-bottom: 3.5rem; }
}
/* wg_next_steps() has the same .section-tight (no padding) problem as .faq
above: nothing stops its tile from sitting flush against whatever
section follows it (a cta-band, most of the time). */
.next-steps { padding-bottom: 2.5rem; }
@media (min-width: 768px) {
.next-steps { padding-bottom: 3.5rem; }
}
.faq .accordion-item { background: transparent; border: 0; border-top: 1px solid rgba(3, 40, 65, 0.1); }
.faq .accordion-item:last-child { border-bottom: 1px solid rgba(3, 40, 65, 0.1); }
.faq .accordion-button {
background: transparent;
font-family: var(--wg-font-display);
font-weight: 700;
font-size: 1.125rem;
color: var(--wg-navy);
padding: 1rem 0;
}
.faq .accordion-button:not(.collapsed) { color: var(--wg-navy); box-shadow: none; }
.faq .accordion-button:focus { box-shadow: none; }
/* Overrides .prose-site's 65ch cap: now that .faq spans the full
container (see wg_faq()), a capped answer stopped well short of the
question row's own right edge, reading as unfinished. */
.faq .accordion-body { padding: 0 0 1rem; max-width: none; color: rgba(3, 40, 65, 0.85); }
/* ── Breadcrumbs ──────────────────────────────────────── */
.wg-breadcrumb { font-size: 0.875rem; color: rgba(3, 40, 65, 0.6); }
.wg-breadcrumb a { font-weight: 700; color: rgba(3, 40, 65, 0.6); text-decoration: none; }
.wg-breadcrumb a:hover { color: var(--wg-navy); }
/* ── Site header ──────────────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 1030;
border-bottom: 1px solid rgba(3, 40, 65, 0.1);
/* Kept slightly translucent with the blur below, so content scrolling under
the sticky bar still shows through faintly instead of hard-cutting. */
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
transition: padding 200ms ease;
}
/* NOTE: the