/* ========================================================================== SITE FOOTER — R24a, rebuilt to supplied content Three columns — brand / contact / stay connected — over a legal bar. ✅ THIS IS NOW THE PAGE'S ONLY FOOTER. A second, hidden four-column `.footer` sat beneath it for several revisions, superseded but not deleted because deleting it was a decision rather than a side effect. R24u took that decision: the markup and `footer.css` are gone, and `.footer-placeholder` went with them. ⚠ --color-surface-raised IS THE FOOTER'S OWN GROUND. §16 allows it in one section and this is that section; `.section--raised` supplies it. ========================================================================== */ /* ⚠⚠ R24f — THE FOOTER'S BOTTOM PADDING IS SET ALONE, AND THAT IS THE ONE PLACE ON THIS PAGE WHERE IT IS RIGHT. R23d recorded the opposite as a trap: §12 set `padding-block-start` alone, the longhand replaced one edge, and the section sat 160-over-120 without anyone seeing it. The difference is what the two edges answer to. The TOP separates the footer from §12b and belongs to the page's section rhythm, so it keeps --section-padding-block. The BOTTOM is the last edge on the page and belongs to the copyright strip, which was 33px above its text and 120px below it. 32 matches .sitefooter__bar's own `padding-block-start`, so the strip reads as one band with the rule through its middle rather than as a line of type stranded above a third of a screen of empty black. */ .sitefooter { padding-block-end: var(--space-lg); /* ⚠ R24n — THE SECTION'S OWN TOP RULE, by direction: "a separator line for the entire section". It is a border on .sitefooter rather than an
in the container, and that is what makes it FULL-BLEED — the section runs edge to edge, the container does not. ⚠ IT IS A DIFFERENT LINE FROM .sitefooter__bar's, ON PURPOSE. That one sits inside the container and separates the columns from the copyright; this one separates the whole footer from §12b above it. Same token, two different widths, two different jobs. ⚠ --color-border-strong is 1.46:1 here, which is correct for a separator and would NOT be for a control's boundary — see .sitefooter__chat, which had to take pure white for exactly that reason. */ border-block-start: var(--border-hairline) solid var(--color-border-strong); } .sitefooter__grid { row-gap: var(--space-2xl); } /* -------------------------------------------------------------------------- COLUMN 1 — brand -------------------------------------------------------------------------- */ .sitefooter__brand { display: grid; align-content: start; justify-items: start; } /* ⚠ A BOX DIMENSION, NOT SPACING — §4 exempts these. ⚠⚠ R24d — THE RATIO IS THE HECS FILE'S, 763.6 x 263.72. It was 206 x 88 for the Ubrik wordmark; swapping the src without swapping this would have left the box at the old proportion and letterboxed the new mark inside it. */ .sitefooter__logo { display: block; inline-size: 180px; max-inline-size: 100%; block-size: auto; aspect-ratio: 763.6 / 263.72; } /* ✅ R24d — .sitefooter__tagline AND .sitefooter__rule ARE DELETED, not orphaned: "Ideas People Impact" and the short rule beneath it were removed by direction, so their rules go with them. §11 rule 8, checked both ways. */ /* ⚠⚠ R24d — THE 36ch CAP IS GONE, AND IT HAD TO BE. The note now carries a forced break after "LLC,", and a measure narrower than the column would wrap the first half anyway — the break would then produce three ragged lines instead of the two it is there to produce. The column is the measure now, and the break decides where the line ends. */ .sitefooter__note { margin-block-start: var(--space-lg); font-size: var(--font-size-small); line-height: var(--line-height-body); color: var(--color-text-body); /* 9.55:1 on the raised ground */ } /* ⚠⚠ THIS BREAK IS **NOT** GATED, AND IT IS THE ONE ON THE PAGE THAT MUST NOT BE. .plate__break, .speakers__break and .final__break are all switched off below a breakpoint, because each exists to SHAPE a line that would otherwise wrap somewhere worse — and below that width the shape is wrong. This one exists to KEEP A PHRASE INTACT: "under DET Permit No. 26MTE-000159824." must not split across lines. Re-measured 15 September 2026 when the real number replaced xxxxxxx: the phrase is 301.5px in Mundial (214px with the placeholder). The column is the viewport less 2×24, so it holds at 390 (342px, 40.5 spare) and at 360 (312px, 10.5 spare) — gating the break would let the phrase break on exactly the screens where it is most likely to. ⚠⚠ AT 320 IT DOES NOT HOLD. The column is 272px and the phrase splits AT THE HYPHEN — "26MTE-" / "000159824." — cutting the permit number itself in half. Open, not fixed: keeping it whole needs a rule this file does not have yet. ⚠ The first half wraps on its own at every width (it needs ~571px and the column is 519px at its widest). That is expected: the break is not there to put the sentence on two lines, it is there to stop the permit line from being cut in half. */ .sitefooter__break { display: inline; } /* -------------------------------------------------------------------------- COLUMNS 2 AND 3 -------------------------------------------------------------------------- */ .sitefooter__col { display: grid; align-content: start; justify-items: start; } /* ⚠⚠ R24e — THE COLUMNS STACK BELOW 992, NOT BELOW 768, AND THAT IS A FIX RATHER THAN A PREFERENCE. The col-* helpers switch on at 768, so the footer ran three columns from there — and at 768 that gives 284 / 224 / 164px, which breaks two things at once, both measured: · the WhatsApp button is 188px in a column whose CONTENT box is 176px after the divider's padding — it overflowed by 12px · the legal note's first line is 318px and could not fit 284px, so the three-line shape the copy asks for became four Both clear the moment the columns stack. 992 is the page's own laptop boundary and the width at which its type and section padding reach full scale, so this is the footer joining a breakpoint the page already has rather than inventing one. ⚠ THE DIVIDERS MOVE WITH THE COLUMNS. A leading border on a stacked column draws a stray vertical line down the left of the content. */ @media (max-width: 991px) { .sitefooter__grid > * { grid-column: 1 / -1; } } @media (min-width: 992px) { .sitefooter__col { border-inline-start: var(--border-hairline) solid var(--color-border-strong); padding-inline-start: var(--space-2xl); } } /* .t-eyebrow supplies size, weight, case and tracking; the colour is overridden because the utility's own is sand, and these are quiet labels rather than accent events. --color-text-muted is 5.74:1 here. */ .sitefooter__heading { margin-block-end: var(--space-lg); letter-spacing: var(--letter-spacing-caps-wide); color: var(--color-text-muted); } .sitefooter__contacts { display: grid; gap: var(--space-md); list-style: none; margin: 0; padding: 0; } .sitefooter__name { display: block; font-size: var(--font-size-lead); color: var(--color-text-heading); } .sitefooter__phone { display: block; font-size: var(--font-size-lead); color: var(--color-text-body); text-decoration: none; transition: color var(--duration-base) var(--ease-standard); } .sitefooter__phone:hover, .sitefooter__phone:focus-visible { color: var(--color-text-heading); } .sitefooter__cta { margin-block-start: var(--space-lg); } /* -------------------------------------------------------------------------- THE CHAT CONTROL — R24l ⚠⚠ NOT A `.btn`, AND THAT IS THE POINT. §9: "a button always has both blocks — label-only buttons are out of spec." The direction removes the icon box, so this stops claiming to be a button rather than bending the rule for one control in the footer. Every .btn on the page still has both blocks and still reads as the same object. ⚠ --control-height AND --radius-control ARE THE PAGE'S, so it still sits in the system: 52px tall like every other control, square like every other thing that can be clicked. §7's three radii are untouched — the artwork draws a pill and a pill would be a fourth. ⚠⚠ THE STROKE IS PURE WHITE ON PURPOSE. --color-border-strong is the page's standard border and measures 1.46:1 on this ground — fine for a divider, below the 3:1 §18 asks of a control's boundary. --color-text-heading is 19.80:1. "White stroke" on a control has to be actual white here. -------------------------------------------------------------------------- */ .sitefooter__chat { display: inline-flex; align-items: center; gap: var(--space-2xs); min-block-size: var(--control-height); padding-inline: var(--space-md); border: var(--border-hairline) solid var(--color-text-heading); border-radius: var(--radius-control); color: var(--color-text-heading); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); text-decoration: none; transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); } /* The ground fills rather than the stroke brightening — there is nothing brighter than white to brighten to. §9's rule that a secondary stroke never changes on hover is the same reasoning. */ .sitefooter__chat:hover, .sitefooter__chat:focus-visible { background-color: var(--color-text-heading); color: var(--color-on-action); /* 19.2:1 on white */ } /* ⚠ THE MARK KEEPS ITS OWN COLOURS ON HOVER TOO. It is a brand asset, not an icon taking currentColor — the inverted ground is white, which is what the handset is drawn in, so the glyph still reads. */ .sitefooter__chat-mark { flex: none; inline-size: var(--icon-size-feature); block-size: var(--icon-size-feature); } .sitefooter__line { max-inline-size: 30ch; font-size: var(--font-size-small); line-height: var(--line-height-body); color: var(--color-text-body); } /* -------------------------------------------------------------------------- SOCIAL -------------------------------------------------------------------------- */ /* ⚠⚠ R24q — THE PULL-BACK IS GONE, AND THAT FOLLOWS FROM THE BOX, NOT FROM TASTE. R24k pulled this row back by (tap - glyph) / 2 so the GLYPH lined up with the column's text, because the tap box was invisible and the glyph was the only thing a reader could see an edge on. The box is drawn now, so the BOX is what has to align — and a box that starts 12px left of the text it sits under is exactly the fault R24k was fixing, in the other direction. ⚠ ADDING A VISIBLE BOUNDARY TO AN INVISIBLE HIT AREA ALWAYS MOVES THE ALIGNMENT REFERENCE. Worth checking wherever a tap target gets a border. */ .sitefooter__social { --sitefooter-tap: 48px; display: flex; gap: var(--space-2xs); list-style: none; margin-block-start: var(--space-lg); padding: 0; } /* ⚠ 48px IS THE TAP TARGET, NOT THE ICON. §18 sets a 48x48 floor for anything touched; the mark inside is --icon-size-feature and the rest is hit area. Shrinking this box to fit the glyph is how that floor usually gets lost. */ .sitefooter__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--sitefooter-tap); block-size: var(--sitefooter-tap); color: var(--color-text-body); /* ⚠ R24q — THE BOX IS THE TAP TARGET, NOT A NEW ELEMENT AROUND IT. The 48px hit area §18 requires was already here and invisible; this only draws it. Nothing about the target's size changed, which is why the glyph could shrink without costing anything. ⚠⚠ --color-border-strong IS 1.46:1 HERE, AND THAT IS ALLOWED BECAUSE THE BOX IS NOT WHAT IDENTIFIES THE CONTROL. §18's 3:1 applies to "visual information REQUIRED to identify" a component — a LinkedIn glyph at 9.55:1 identifies this on its own, and the box is supplementary. ⚠ It is the opposite case to .sitefooter__chat, which has no such glyph doing the work and therefore had to take pure white. Two boxes, two floors, and the difference is what is inside them. */ border: var(--border-hairline) solid var(--color-border-strong); border-radius: var(--radius-control); transition: color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); } /* ⚠ NO HOVER WITHOUT href. An with no href is a spec-correct placeholder and is not interactive — it takes no focus and fires no pointer state. This selector starts working the moment the real URLs land. */ /* ⚠ THE BORDER BRIGHTENS WITH THE GLYPH. §9's "the secondary stroke does not brighten on hover" is a rule about `.btn--secondary`, where the stroke IS the button; here it is a quiet box around a mark, and a box that does not answer a pointer reads as decoration rather than a control. */ .sitefooter__icon[href]:hover, .sitefooter__icon[href]:focus-visible { color: var(--color-text-heading); border-color: var(--color-text-heading); } /* ⚠ R24q — 24 -> 20, by direction ("slightly smaller"). --icon-size-list is the next step down in §13's own ladder; there is nothing between them, so "slightly" is one token, not a tuned number. */ .sitefooter__glyph { display: block; inline-size: var(--icon-size-list); block-size: var(--icon-size-list); } /* -------------------------------------------------------------------------- LEGAL BAR -------------------------------------------------------------------------- */ /* ✅ R24c — ONE CENTRED LINE. The legal links were removed by direction, so the bar no longer holds two things at opposite ends: `display: flex` with `space-between` is gone with them rather than left to centre a single child by accident, and `text-align` does the job on one line of text. ⚠ .sitefooter__legal, .sitefooter__legal a and .sitefooter__sep are DELETED rather than orphaned — §11 rule 8, checked both ways: no class left in the markup without a rule, no rule left without a consumer. */ .sitefooter__bar { margin-block-start: var(--space-3xl); padding-block-start: var(--space-lg); border-block-start: var(--border-hairline) solid var(--color-border-strong); font-size: var(--font-size-small); color: var(--color-text-muted); /* 5.73:1 on the raised ground */ text-align: center; }