/* King Exterior - mobile-first stylesheet. No business facts here. No colours here. Every value reads a token from variables.css, which is generated from site.config.json. Breakpoints: 480 / 768 / 992 / 1200. */ /* ---------- fonts (self-hosted: no third-party request, no consent question) ---------- */ @font-face{font-family:'Inter';src:url('/fonts/inter-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('/fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Roboto Slab';src:url('/fonts/roboto-slab-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'DM Sans';src:url('/fonts/dm-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} /* Bodoni Moda, SIL OFL 1.1, Owen Earl / indestructible type. Verified at source before shipping: google/fonts ofl/bodonimoda/METADATA.pb reads license: "OFL". Latin subset, and it carries the VARIABLE OPTICAL-SIZE axis - which is why it is 26.7KB against the static faces' 7-12KB, and why it is the right didone for headings: opsz thickens the hairlines as the size drops, so a Bodoni set at 28px on a phone does not go spindly the way a single-master revival would. */ @font-face{font-family:'Bodoni Moda';src:url('/fonts/bodoni-moda-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg-color);color:var(--text-color); font-family:var(--body-font);font-weight:var(--body-weight); font-size:var(--body-size);line-height:var(--body-line-height); overflow-x:hidden} img{max-width:100%;height:auto;display:block} /* INTERACTION CONTRACT - every link, button and card in this sheet obeys it: :hover recolours :focus-visible draws the ring :active presses 1px :focus-visible rather than :focus is the load-bearing part. The old rules paired :hover with :focus, so a mouse click left a ring stuck on the element until you clicked elsewhere, and keyboard users got the same weak treatment as mouse users. Do not reintroduce a bare :focus here. */ a{color:var(--text-color);text-decoration:underline;text-underline-offset:2px; transition:color .15s ease} a:hover{color:var(--accent-deep)} a:active{color:var(--accent-border)} :focus-visible{outline:3px solid var(--accent-color);outline-offset:2px} h1,h2,h3,h4,h5,h6{font-family:var(--heading-font);font-weight:var(--heading-weight); line-height:var(--heading-line-height);color:var(--text-color);margin:0 0 var(--space-sm)} h1{font-size:var(--h1-size-mobile);line-height:var(--heading-tight)} h2{font-size:var(--h2-size-mobile);line-height:var(--heading-tight)} h3{font-size:var(--fs-2xl)} h4{font-size:var(--fs-xl)} p{margin:0 0 var(--space-sm)} ul,ol{margin:0 0 var(--space-sm);padding-left:1.25em} li{margin-bottom:var(--space-xs)} /* A GUARANTEED OUTER GUTTER, not just a max-width. --------------------------------------------------------------------------- max-width alone leaves the page flush against the window between roughly 1180 and 1260, where the container has hit its cap but the viewport has not yet opened a margin - at a 1250 window the content sat 35px off each edge and read as jammed into the corner rather than as a centred measure. That is the "pushed too far to the left" report, and it is a WINDOW-WIDTH band, not a left-alignment bug: everything in it is correctly aligned to a container that is itself too close to the edge. min() keeps the 1180 measure wherever there is room for it and otherwise holds a 32px gutter on each side, so the content never touches the frame at any width. --container-padding still supplies the inner padding for narrow screens; the two do not fight because min() governs the BOX and the padding governs the inset within it. */ .container{width:min(100%, var(--container-width));margin:0 auto; padding:var(--container-padding)} @media (min-width:768px){ .container{width:min(100% - 64px, var(--container-width))} } .section{padding:var(--section-y) 0} .section-alt{background:var(--bg-alt)} .section-dark{background:var(--primary-dark);color:#fff} /* :not(.btn) matters. '.section-dark a' is (0,1,1) and '.btn-accent' is (0,1,0), so without it the dark section wins and paints the gold button's label white - the same button reads black-on-gold at the top of the page and white-on-gold at the bottom. Buttons carry their own palette. */ .section-dark h1,.section-dark h2,.section-dark h3, .section-dark a:not(.btn){color:#fff} .text-center{text-align:center} .lede{font-size:var(--fs-lg);max-width:62ch} /* ONE LEFT EDGE PER PAGE. .container.measure used to cap the CONTAINER at 70ch, and because containers are margin:0 auto that re-centred the whole block: measured on a city page, .container content started at 70px and .container.measure at 345px, so headings jumped 275px sideways down the page. The typographic answer is that reading measure applies to PROSE, not to section furniture. So the container keeps its full width and one left edge, and only the text children are constrained. Headings, media and anything that is its own layout opt out. Done in CSS rather than by rewrapping ~25 sections in the templates: same result, far less to get wrong. */ .measure{max-width:70ch} .container.measure{max-width:var(--container-width)} .container.measure > p, .container.measure > ul, .container.measure > ol, .container.measure > blockquote{max-width:70ch} /* A capped block defaults to margin-left:0, so inside a CENTRED container the cap silently pins prose and button rows to the left while the heading above them is centred. That is what pushed the CTA buttons off-centre. */ .container.measure.text-center > p, .container.measure.text-center > ul, .container.measure.text-center > ol{margin-inline:auto} .eyebrow{font-family:var(--display-font);font-weight:var(--display-weight); font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase; color:var(--text-muted);margin:0 0 var(--space-xs)} .skip-link{position:absolute;left:-9999px;top:0;background:var(--accent-color); color:#000;padding:12px 20px;z-index:200;font-weight:600} .skip-link:focus{left:0} /* ---------- chevron (inline SVG, rebuilt from the raster h2-1.png) ---------- Aspect is pinned by the viewBox (327x72), so only width is ever set - a fixed height here would squash the taper. */ .chevron{display:block;width:118px;height:auto;margin:0 0 var(--space-sm)} .chevron path{fill:var(--accent-color)} .text-center .chevron{margin-left:auto;margin-right:auto} /* ---------- buttons ---------- */ .btn{display:inline-block;border-radius:var(--btn-radius);padding:var(--btn-padding); font-family:var(--body-font);font-weight:600;font-size:var(--btn-font-size); line-height:var(--btn-line-height);text-decoration:none;text-align:center; cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease} .btn-primary{background:var(--primary-dark);color:#fff;border:1px solid var(--accent-border)} .btn-primary:hover{background:var(--accent-color);color:#000;border-color:#000} .btn-accent{background:var(--accent-color);color:#000;border:1px solid var(--accent-border)} .btn-accent:hover{background:#000;color:#fff;border-color:#000} /* GOLD ON GOLD: THE FOCUS RING WAS INVISIBLE ON THE PRIMARY CTA. The global rule is outline:3px solid var(--accent-color), which is #eac92d - the exact background of .btn-accent. So the site's most important button, the one every hero and band ends on, showed NO visible focus indicator to a keyboard user. That is a real failure, not a polish item: the ring existed, passed a "do we have focus styles" check, and disappeared on the one control that most needed it. Black is already in the palette as --primary-dark, and the offset keeps it clear of the gold fill. Scoped to the accent button so every other control keeps the gold ring, which has contrast everywhere else. */ .btn-accent:focus-visible{outline-color:var(--primary-dark)} .sticky-call a:focus-visible{outline-color:var(--primary-dark)} .btn:active{transform:translateY(1px)} .link-button:hover{color:var(--accent-deep)} .link-button:active{color:var(--accent-border)} .btn-lg{padding:16px 32px;font-size:var(--fs-base)} .link-button{background:none;border:0;padding:0;font:inherit;color:inherit; text-decoration:underline;cursor:pointer} /* ---------- header ---------- */ .site-header{position:sticky;top:0;z-index:100;background:var(--bg-color); border-bottom:1px solid var(--border-color)} /* The header is sticky, so an in-page jump lands UNDER it and the heading it was aiming at is the part that gets hidden. Every anchor target carries its own offset rather than the jump being corrected at the link end, because the header height is a property of the header, not of whoever links to it. THE VALUE IS THE MEASURED HEADER, not a round number. It is logo height plus 10px padding top and bottom plus the 1px border, and the logo is 132px wide below 992 and 180px above it against a 1.699 aspect: mobile 132/1.699 = 78 + 21 = 99 -> 104 desktop 180/1.699 = 106 + 21 = 127 -> 136 A single 96px value cleared the HEADING at desktop only because the section's own 80px of top padding happened to make up the 31px shortfall. That is right by coincidence, and it stops being right on the first anchor added to a section with less padding or a visible top edge. */ [id]{scroll-margin-top:104px} .header-inner{display:flex;align-items:center;justify-content:space-between; gap:var(--space-sm);padding-top:10px;padding-bottom:10px} .brand{display:block;line-height:0;text-decoration:none} .brand img{width:132px;height:auto} .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;background:none;border:1px solid var(--border-color); border-radius:var(--btn-radius);cursor:pointer;padding:0 10px} .menu-bar{display:block;height:2px;background:var(--text-color)} .site-nav{display:none;position:absolute;left:0;right:0;top:100%; background:var(--bg-color);border-bottom:1px solid var(--border-color)} .site-nav.is-open{display:block} /* THE OPEN MENU NEEDS ITS OWN SCROLLPORT, and this is not a nicety. .site-nav is position:absolute inside .site-header, which is position:sticky top:0. The header is pinned to the viewport, so its absolutely-positioned child is pinned too: SCROLLING THE PAGE DOES NOT MOVE THE DROPDOWN AT ALL. With Service Areas expanded the menu is ~990px tall against a ~745px visible viewport on an iPhone 12-15 in portrait, so ~245px of it - the last four service areas, everything after Gap PA - was unreachable by any gesture. Reported as "stops at Gap PA and will not scroll"; the arithmetic puts the sticky bar's top edge inside the Gap row at exactly 723-767px of viewport. --header-h is MEASURED, and it is only correct because the logo does not change size anywhere this rule applies: .brand img is 132px for every width below 992 (132/1.6981 = 77.7, + 10 + 10 padding + 1px border = 98.7). Above 992 the header grows to 108px then 127px as the logo steps to 148 and 180 - which is why this whole block is scoped to max-width:991.98px. Above that .site-nav is position:static and horizontal, there is no dropdown, and the token must not follow it there. Re-measure if the logo width changes. */ @media (max-width:991.98px){ .site-nav{--header-h:99px} .site-nav.is-open{max-height:calc(100vh - var(--header-h)); max-height:calc(100dvh - var(--header-h)); overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} } .nav-links{list-style:none;margin:0;padding:var(--space-sm) 20px} .nav-links li{margin:0} .nav-links a{display:block;padding:12px 0;text-decoration:none;font-weight:600} .nav-links a.is-current{color:var(--accent-deep)} .nav-cta{display:none} /* ---------- hero ---------- */ .hero{background:var(--primary-dark);color:#fff;padding:var(--section-y) 0} /* FULL-BLEED HERO PHOTO, only on .hero-with-form. The photo and the scrim are children of .hero and SIBLINGS of .container, not children of it. The grid lives on .container, so a sibling is never one of its items at any width - .hero .container still gets exactly two children. See the note at the grid rule below: a third grid child is how this broke once already. Absolute positioning below buys the full-bleed backdrop at >=992; it is NOT what keeps these out of the grid. isolation:isolate keeps the scrim's stacking local, so nothing downstream has to know about these z-indexes. BELOW 992 THIS ALL DE-LAYERS: the photo returns to normal flow above the stacked form and the scrim is removed, because a background photo behind a full-width form is unreadable at phone widths. */ .hero-with-form{position:relative;isolation:isolate} .hero-with-form .container{position:relative;z-index:2} /* Below 992 the photo LEADS the hero, then copy, then form. It stays a sibling of .container rather than moving inside it between the copy and the form: .hero .container is allowed exactly two in-flow children, and a third that only behaves because it is absolutely positioned is precisely the fragile arrangement the note at the grid rule warns about. No top margin - the hero's own padding already separates it from the header, and doubling that read as a black band above the photo. */ .hero-bg{margin-bottom:var(--space-lg);line-height:0} /* No border-radius, unlike .hero-media img. This photo is FULL-BLEED at the hero's top edge rather than inset inside the container gutter, and a radius on an edge-to-edge image only shows as clipped corners against the panel. */ .hero-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover} .hero-scrim{display:none} /* Hidden below 992, and it carries no source there either - main.js attaches sources only at >=992, so this rule is presentation, not the gate. Both are needed: CSS alone would still download a video that had a src. */ .hero-video{display:none} .hero h1{color:#fff;margin-bottom:var(--space-sm)} .hero p{color:#f2f2f2} .hero .chevron path{fill:var(--accent-color)} .hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-md)} /* FULL-WIDTH CTA PAIR ON MOBILE - hero and cta_band, which share this class. Measured at 390 they were 238px and 226px in a 350px column: two different widths, both short of the measure, so the pair read as ragged rather than as a decision. Stretched they agree with each other and with the text block. The LABEL stays centred inside the button, which is not the mobile-centring being retired elsewhere in this file - that is about block alignment, and a full-bleed button with a left-shoved label reads as a bug. */ @media (max-width:767px){ .hero-actions{flex-direction:column;align-items:stretch;flex-wrap:nowrap} .hero-actions .btn{display:block;width:100%;text-align:center} } /* THE HERO PHOTO RUNS TO THE DARK PANEL'S BOTTOM EDGE ON MOBILE. Below 992 the hero stacks copy-then-photo, so the hero's own bottom padding sat UNDER the photo as a black band between it and whatever followed - read on the phone as a gap in the page rather than as part of the hero. Scoped to the stacked layout only: from 992 up the photo is a grid column beside the copy and zeroing the padding there would crop the panel against the text. */ @media (max-width:991.98px){ .hero:has(.hero-media){padding-bottom:0} .hero:has(.hero-media) .hero-media{margin-bottom:0;line-height:0} /* THE SAME PRIMITIVE AT THE OTHER EDGE. The form hero stacks photo-then-copy, so its photo leads the panel instead of closing it, and the hero's own TOP padding sat above it as the identical black band this rule was written to remove. Same rule, same reason, mirrored to the edge the photo touches. */ .hero:has(.hero-bg){padding-top:0} } /* ---------- cards ---------- */ .grid{display:grid;gap:var(--space-md);grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} /* THE CARD LIFTS OFF EITHER GROUND. Six of the ten card grids sit on a WHITE section, where `.section-alt .card` never fires, so the card was #fff on #fff separated by one #e2e2e2 hairline - which is the cheap look this pass exists to remove. The reference site solves it with a grey ground, but the alternating white/grey band rhythm is the only vertical structure the page has and two grey bands in a row would destroy it. Elevation fixes all ten grids with one rule and no section restructuring, and keeps the reference's load-bearing move: bordered white boxes that read as OBJECTS, not regions. background is #fff explicitly rather than var(--bg-color) so the card does not follow the surface token if that is ever re-themed. */ .card{background:#fff;border:1px solid var(--border-color); border-radius:0;padding:32px; box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06)} /* PADDING IS DERIVED FROM THE WIDTH IT HAS TO FILL, not picked. At two columns in an 1180 container with 20px gutters and a 24px grid gap the card measures 558px at 1280, 464 at 992 and 388 at 840. 40px is right for those. Below 840 the card is 268-388px and 40px would leave 188px of content, so it stays 24. 840 is where both grid families reach two columns. Both values are existing tokens - 32px would be a new one, and the primitives are locked. */ /* SQUARE CORNERS AND 32px ARE ERIE'S CARD GEOMETRY, adopted deliberately and WITHOUT its figure/ground system - no grey ground, no borderless cards. The border and the lift below stay; the band rhythm above stays. Erie's cards read as panels because they sit on grey, and King has no grey to sit on. 32px IS A NEW VALUE AND THE PRIMITIVES ARE LOCKED. It is added as a documented exception, not an oversight: the scale steps 24 -> 40 with nothing between, and the instruction was to raise the small end. Desktop was ALREADY 40 - above Erie's 32 - so this raises the mobile end to 32 and leaves 40 where the card is wide enough to carry it. Applying 32 everywhere would have REDUCED desktop. */ @media (min-width:840px){ .card{padding:var(--space-lg)} } .card h3{margin-top:0} /* Card links: a deliberate affordance, not an underlined string of body text. The blanket a{text-decoration:underline} is right for links sitting INSIDE prose, where an underline is the only thing distinguishing them. In a card the link is already the last line, already bold, already the only interactive element - the underline adds noise and reads as unstyled. Affordance carries on weight + colour + an arrow that moves on hover. */ /* AFFORDANCE. These read as gold body text rather than links: no underline, and the arrow was the only signal. width:max-content stops the anchor stretching to its container, which was parking the arrow far from the words it belongs to. The underline is the actual fix - an underline is what says "link" to someone who is not looking for one. */ /* fit-content, NOT max-content. max-content is the unwrapped intrinsic width, which is right for a short signpost and catastrophic for the .faq-teaser sentence: measured 867px inside a 350px column, which gave /roofing/, /siding/, /gutters/ and /storm-damage/ a horizontally scrolling page on every phone. fit-content is min(max-content, available), so a short link still hugs its text and a long one wraps. */ .card-link{display:inline-flex;align-items:center;gap:6px;width:fit-content; margin-top:var(--space-sm);font-weight:600; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; color:var(--accent-deep);transition:gap .15s ease,color .15s ease} .card-link::after{content:"";width:7px;height:7px;flex:0 0 auto; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(-45deg);transition:transform .15s ease} .card-link:hover{gap:10px;color:var(--text-color);text-decoration-thickness:2px} .card-link:active{color:var(--accent-border)} /* Underline returns on keyboard focus: the ring alone is not enough signal when the surrounding text is also dark and bold. */ .card-link:focus-visible{text-decoration:underline;text-underline-offset:3px} .section-alt .card{background:#fff} /* ---------- icons ---------------------------------------------------------- ONE source, ONE stroke weight, ONE size. Before this there were three unrelated icon hacks in this sheet: a clip-path polygon tick, a clip-path polygon cross, and a rotated-border caret. None shared a weight, a size or a grid, and none could be reused. All icons are 24x24, fill:none, stroke-width 1.75, round caps and joins, and are applied as MASKS so the colour comes from the element (background) rather than being baked into the asset. Adding an icon means adding one token here and nothing else. Geometry only - no brand values, so these belong in this sheet rather than variables.css. */ :root{ --icon-size:20px; --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); --icon-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); --icon-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); --icon-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.4-3.1 8-7.5 9.5-4.4-1.5-7.5-5.1-7.5-9.5V6z'/%3E%3C/svg%3E"); } .icon{display:inline-block;flex:0 0 auto; width:var(--icon-size);height:var(--icon-size);background:currentColor; -webkit-mask-size:contain;mask-size:contain; -webkit-mask-position:center;mask-position:center; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .icon-check{-webkit-mask-image:var(--icon-check);mask-image:var(--icon-check)} .icon-x{-webkit-mask-image:var(--icon-x);mask-image:var(--icon-x)} .icon-shield{-webkit-mask-image:var(--icon-shield);mask-image:var(--icon-shield)} /* ---------- lists ---------- */ /* Markers are the icon set above, masked, so a tick in a list and a tick anywhere else are the same artwork at the same weight. */ .check-list,.x-list{list-style:none;padding-left:0} .check-list li,.x-list li{position:relative; padding-left:calc(var(--icon-size) + var(--space-xs) + 2px)} .x-list li{color:var(--text-muted)} .check-list li::before,.x-list li::before{content:"";position:absolute;left:0; top:calc((var(--body-line-height) * 1em - var(--icon-size)) / 2); width:var(--icon-size);height:var(--icon-size); -webkit-mask-size:contain;mask-size:contain; -webkit-mask-position:center;mask-position:center; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .check-list li::before{background:var(--accent-deep); -webkit-mask-image:var(--icon-check);mask-image:var(--icon-check)} .x-list li::before{background:var(--text-muted); -webkit-mask-image:var(--icon-x);mask-image:var(--icon-x)} /* ---------- faq ---------- */ .faq-item{border-bottom:1px solid var(--border-color);padding:var(--space-sm) 0} .faq-item h3{font-size:var(--fs-lg);margin-bottom:var(--space-xs)} .faq-item p:last-child{margin-bottom:0} /* ---------- forms + consent ---------- */ .form-card{background:var(--bg-color);border:1px solid var(--border-color); border-radius:var(--btn-radius);padding:var(--space-md)} .field{margin-bottom:var(--space-sm)} .field label{display:block;font-weight:600;font-size:var(--fs-sm);margin-bottom:6px} .field input,.field textarea,.field select{width:100%;padding:11px 12px; border:1px solid var(--border-color);border-radius:var(--btn-radius); font-family:var(--body-font);font-size:var(--fs-sm);background:#fff;color:var(--text-color)} .field textarea{min-height:96px;resize:vertical} .field-required{color:var(--text-muted);font-weight:400} .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Consent block. Sized so both checkboxes AND their full disclosure text fit in one 1280x800 viewport with no scrolling. That screenshot is the artifact that approves the A2P campaign, so this is an acceptance criterion, not styling. */ .consent-block{margin-top:var(--space-sm);padding-top:var(--space-sm); border-top:1px solid var(--border-color)} .consent-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px} .consent-item input[type="checkbox"]{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0; accent-color:var(--accent-color)} .consent-item label{font-size:var(--fs-fine);line-height:1.45;color:var(--text-color)} .consent-note{font-size:var(--fs-fine);line-height:1.45;color:var(--text-muted);margin:0} .form-status{margin-top:var(--space-sm);padding:12px;border-radius:var(--btn-radius); font-size:var(--fs-sm);display:none} .form-status.is-error{display:block;background:#fdecea;border:1px solid #d93025;color:#8c1d16} .form-status.is-ok{display:block;background:#e9f6ec;border:1px solid #1e7e34;color:#155724} /* ---------- footer ---------- */ /* NO margin-top. The footer already carries section-y-lg of PADDING, which is inside its dark background. The margin sat outside it, so between the dark CTA band and the dark footer it rendered as a band of page background - a white stripe across the bottom of every page. Padding separates; margin here just leaked the body colour between two dark blocks. */ .site-footer{background:var(--primary-dark);color:#e8e8e8; padding:var(--section-y-lg) 0 var(--space-md)} /* Footer links: same reasoning as .card-link. These are navigation in a list, not links inside a sentence, so the underline is doing no work and a column of underlined items reads as unstyled markup. Applied uniformly, legal links included: they sit in a labelled