/* Static replacements for behaviour the dc-runtime used to do in React.
The source Nav branched on window.innerWidth < 980 in JS, so a pre-render at a
single viewport would freeze one branch and lose the other. The build instead
bakes BOTH bars into the DOM and switches them here, in CSS. */
.kgd-desktop-bar { display: block; }
.kgd-mobile-bar { display: none; }
@media (max-width: 979px) {
.kgd-desktop-bar { display: none; }
.kgd-mobile-bar { display: block; }
}
/* Panels are in the DOM but closed until scripted open. Using [hidden] keeps them
out of the a11y tree and out of tab order with no JS required for the closed state. */
.kgd-nav [hidden] { display: none !important; }
/* The original marked the current page with a small orange dot appended inside the
link. aria-current carries the same meaning to assistive tech, and ::after draws
the dot — so the marker survives without per-page nav variants.
aria-current is set in the mobile menu too (screen readers benefit either way), but
the dot is drawn only in the desktop bar, which is the only place the design had one. */
.kgd-desktop-bar [aria-current="page"]::after,
.kgd-desktop-bar [aria-current="true"]::after {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: #E8501F;
display: inline-block;
flex: 0 0 auto;
}
/* Photos that have not been shot yet. The build emits a real for every slot;
until a file is dropped in, this keeps the layout intact instead of showing a
broken-image glyph. */
.kgd-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kgd-img-pending {
background: repeating-linear-gradient(45deg, #EDF1F5, #EDF1F5 12px, #E4EAF0 12px, #E4EAF0 24px);
}
.kgd-map { display: block; width: 100%; height: 100%; border: 0; }
/* Respect users who have asked for less motion — the hero parallax is decorative. */
@media (prefers-reduced-motion: reduce) {
[data-kgd-parallax] { transform: none !important; }
* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}
/* Keyboard focus was never styled in the source; without it a keyboard user cannot
see where they are. */
.kgd-nav a:focus-visible,
.kgd-nav button:focus-visible {
outline: 2px solid #E8501F;
outline-offset: 2px;
}
/* ---------------------------------------------------------------------------
Tap targets.
The stacked link columns (.kgd-linkcol — the footer's four, and the /sitemap page's
five) render 18px tall, and the footer's legal row 16px. That is under the 24x24 CSS px
WCAG 2.5.8 asks for, and far under the ~44px a thumb actually wants. Grow the hit area
with padding, never with font-size, so the type is untouched.
Those columns' inline `gap` is now 0 (see Footer.dc.html / Sitemap.dc.html), so this
padding supplies the spacing rather than adding to it — the desktop rhythm comes out
the same as the original 18px link + 9px gap.
Inline links inside prose ("...a broken spring...") are deliberately NOT padded.
WCAG 2.5.8 exempts targets in a sentence, and padding them would wreck the line spacing.
These rules deliberately carry no !important. The whole design is inline-styled, and
inline styles outrank a stylesheet — so any link that already sets its own padding
(the "Call Now" pill, the mobile menu rows) keeps it and is skipped automatically.
--------------------------------------------------------------------------- */
.kgd-linkcol a {
padding-block: 4.5px; /* 18 -> 27px */
}
.kgd-flegal a,
.kgd-fcontact a,
a[href^="mailto:"],
a[href^="tel:"],
nav[aria-label="Breadcrumb"] a {
padding-block: 4px;
}
@media (max-width: 979px) {
.kgd-linkcol a {
padding-block: 13px; /* 18 -> 44px, a real thumb target */
}
.kgd-flegal a,
.kgd-fcontact a,
a[href^="mailto:"],
a[href^="tel:"],
nav[aria-label="Breadcrumb"] a {
padding-block: 10px;
}
/* The legal links sit in a wrap row; once each is taller they need room to breathe. */
.kgd-flegal {
gap: 4px 22px;
}
}
/* ---------------------------------------------------------------------------
Horizontal overflow.
The site was authored without `box-sizing: border-box`, so padding ADDS to a
declared width. The footer's two cards were min-width:290px + 28px padding on each
side = 346px of box in the 280px a 320px phone actually offers — so every page on
the site scrolled sideways on a small phone. min() lets the card fall below its
preferred 290px when the screen cannot afford it; border-box makes the padding
count inside that width rather than on top of it.
Scoped to these cards on purpose. Flipping box-sizing globally would resize the 28
other elements that combine an explicit width with padding, in a design authored
for content-box.
--------------------------------------------------------------------------- */
.kgd-fcard {
box-sizing: border-box;
min-width: min(290px, 100%);
}
/* Deliberately NOT adding `overflow-x: clip` to html/body as a catch-all. It would hide
a sideways-scrolling page rather than fix it, and it would blind build/responsive.mjs,
which detects overflow by measuring scrollWidth. Fix the cause; keep the detector honest. */
/* ---------------------------------------------------------------------------
Hero floating cards — the same pre-render freeze the nav had.
The three decorative cards over the hero (job card, tech note, 24/7 pill) were gated in
React on `showFloaters = showFloatingCards && !isMobile`, where Home.dc.html:399 defines
isMobile as `window.innerWidth < 1280`. So the design only ever showed them at >= 1280px.
We pre-render at exactly 1280 — and `1280 < 1280` is false — so the runtime handed us the
floaters-visible branch and baked it into the static HTML for EVERY width. On a phone all
three then rendered at once, and the job card and the 24/7 pill (both ~250px, both pinned
to the bottom) landed on top of each other.
This restores the original rule in CSS, at the breakpoint the source actually specified.
--------------------------------------------------------------------------- */
@media (max-width: 1279px) {
.kgd-floater {
/* !important is load-bearing: the 24/7 pill sets `display:inline-flex` in its inline
style attribute, and an inline style outranks any stylesheet selector. Without this
the other two cards hide and the pill alone stays behind. */
display: none !important;
}
}
/* ---------------------------------------------------------------------------
Services dropdown (v4).
TWO constraints shaped this block, and they pull in the same direction.
1. build/verify.mjs asserts that every attribute inside .kgd-nav is on an allowlist
(class/style/href/src/alt/... + aria-* + data-*). That check exists to catch a
quote-escaping bug that once shredded the nav's style attributes. An inline