/* ── FOOTER ── */ /* border-top stays on the neutral token: index.html sets `footer{border-top:none}` on purpose — the CTA wave above IS the seam and a hairline double-strokes it. Theming this line looks like it works and changes nothing on screen. The divider that IS visible is the one above the copyright row, below. */ footer { padding: 72px 5% 40px; border-top: 1px solid var(--border); background: var(--white); } /* 2026-08-06 (Caleb: the blurb should line up top and bottom with the link list next to it). It could not be done by nudging the paragraph down. The logo is ~62px and a column heading is ~14px, so the paragraph starts ~30px BELOW where the first link starts, and closing that gap with a margin would have pulled the text up into the logo. So the footer is now a real two-row grid and the wrappers step out of the way with `display: contents`, which promotes their children to grid items. That puts the logo and the four headings on row 1, and the paragraph and the four link lists on row 2 — so they start on the same line because they are on the same grid line, not because a number was tuned to match. Headings are `align-self: end`, sitting on the floor of row 1 just above their links, rather than floating at the top of a row the logo made tall. row-gap is 0; the spacing between a heading and its links is the heading's own margin-bottom. */ .footer-top { display: grid; grid-template-columns: 1.6fr repeat(4,1fr); grid-template-rows: auto auto; column-gap: 40px; row-gap: 0; margin-bottom: 60px; } .footer-brand, .footer-col { display: contents; } /* Every promoted child needs an EXPLICIT row. Without it, auto-placement walks the items in DOM order (img, p, h4, ul, h4, ul, ...) and fills the grid left-to-right, which scattered the paragraph into column 2 and put link lists under the wrong headings. Pinning the row lets auto-placement handle only the column, which is the part it gets right. */ .footer-brand img { grid-row: 1; grid-column: 1; align-self: start; justify-self: start; } .footer-brand p { grid-row: 2; grid-column: 1; } .footer-col h4 { grid-row: 1; align-self: end; } .footer-col ul { grid-row: 2; } /* 2026-08-06 (Caleb: logo reads small, and the blurb "doesn't look lined up with all the other stuff to the right"). Both were the same cause. pm-logo.png is a 426x640 canvas whose visible mark fills only 56% x 48% of it, with 21% transparent padding down the left edge. So an 86px-tall box was drawing a ~41px mark (small), and the mark's left edge sat ~18px inside the box while the paragraph below started at the true box edge (misaligned). The old margin-left:-6px was hand-compensating for that and could never be right, because the offset scales with the height. pm-logo-trim.png is the same artwork cropped to its bounding box, so the box IS the mark: the left edges line up on their own with no negative margin, and the same visual weight needs far less height. 62px of trimmed mark reads noticeably larger than the 41px it was drawing before. The brand column is no longer its own box at all — see the grid note above; the logo and the blurb are placed directly on the footer grid. */ /* 2026-08-06 (Caleb: "the logo is way too close to the text"). margin-bottom here is safe for the alignment rather than a threat to it: it grows ROW 1, and everything on row 2 — the blurb and all four link lists — moves down together. The headings are align-self:end so they stay tucked just above their own links however tall row 1 becomes. */ /* Centring the logo on the paragraph was tried on 2026-08-06 and reverted the same day at Caleb's request. It centred exactly (0px off the column centre), but the tagline's last line is short — "across Canada." at 112px against 219px above it — so the text leans left and a mathematically centred logo read as sitting ~20px right. Left-aligned is what the eye expects here: the logo and the copy share an edge. */ .footer-brand img { height: 72px; width: auto; margin: 0 0 26px; display: block; justify-self: start; } /* margin 0: the paragraph's top IS the row-2 line, so it starts level with the link lists. The bottom took a second pass. Grid stretches the paragraph's BOX to the row height, which made an early measurement report a perfect match while the visible text still stopped 30px short — a stretched box is not aligned text. Measured against the ink instead: the Program list runs 101px (three links on a 38px rhythm), and three lines at 1.75 only reach ~73px. Narrowing the column to force a fourth line did not work: at 205px it still broke into three (197 / 192 / 129), and going narrow enough to wrap again would have left a thin ribbon of text in a 365px column. So the lines are matched to the links instead. The Program list steps every 38px, so the paragraph steps every 38px: line one sits on What We Do, line two on By Age & Stage, line three on Waiting List. The two blocks start and finish together because they share a rhythm, not because a height was forced to agree. Airy for body copy — correct for a three-line tagline standing beside an airy list. The -5px top margin is the last piece. A 38px line box around a 14px font puts ~9px of leading above the first glyph, while a link's tighter line box puts ~4px — so matching the rhythm still left the whole block sitting 5px low. The margin cancels the difference in leading, not a layout gap, which is why one value squares up the top and the bottom together. */ .footer-brand p { font-size: 14px; color: var(--sub); margin: -5px 0 0; line-height: 38px; max-width: var(--pm-brand-w); font-weight: 500; } /* ── 2026-08-06 (Caleb: hook the footer links to the page-colour picker, "make it look premium and official") ──────────────────────────────────── ONE variable does the theming. The colour sheets in css/landing-*.css are generated per colour and hardcode their hex, so rather than have them restate every footer rule they set `--pm-footer-accent` on