/* ══════════════════════════════════════════════════════════════════════ The site footer. ONE definition, three deployments. CANONICAL SOURCE — Branding/Website/shared/footer.css Do not edit the copies. `web/scripts/sync-footer.mjs` writes this file byte-for-byte into: • web/src/components/SiteFooter.css (the planner, bundled) • Branding/Website/public/assets/footer.css (the marketing site) and runs in `predev` and `prebuild`, so an edit to a copy is silently reverted on the next build. That is the point: the brief was "pixel identical across all sites", and two hand-maintained stylesheets drift the first time anyone touches one of them. ── Why it declares its own colours ────────────────────────────────── The planner and the marketing site both have a `--surface`/`--dim` palette, and they very nearly agree — but only nearly. Light-mode text is #15151A in the planner and #0a0a0c on the marketing site, and the hairline is 0.08 alpha in one and 0.078 in the other. Inheriting the host palette would make the footer *almost* identical, which is the one outcome the brief rules out. So it carries its own `--ldf-*` tokens, keyed off the same `data-theme` attribute both sites already stamp on . ── Height ─────────────────────────────────────────────────────────── Roughly half of what it replaced: ~46px against the marketing site's ~86px and the planner's ~151px (which stacked a bordered second row for the reCAPTCHA line). Same content, less room. ══════════════════════════════════════════════════════════════════════ */ .ldf { /* Dark is the default on both sites, so it is the unqualified value. An unstamped document therefore renders dark rather than falling into an undefined half-state. */ --ldf-surface: #131316; --ldf-line: rgba(255, 255, 255, 0.08); --ldf-dim: rgba(255, 255, 255, 0.40); --ldf-muted: rgba(255, 255, 255, 0.60); --ldf-text: #FFFFFF; /* 1280px = the marketing site's existing footer width (`max-w-7xl`). The planner has no single answer to match — its public shell is 1120 and its workspace is 1440 — so the footer picks one width and holds it everywhere rather than tracking whichever container it happens to sit under. Change it here and all three move together. */ --ldf-max: 1280px; --ldf-font: Inter, -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; border-top: 1px solid var(--ldf-line); background: var(--ldf-surface); color: var(--ldf-dim); /* ── Everything typographic is pinned, including the properties that LOOK like they need no stating ────────────────────────────────────── These are inherited properties, and the two hosts set them differently on . Measured rather than assumed: the copyright line came out 181.14px wide in the planner and 187.22px on the marketing site — same string, same 11px, same family — because the planner's body carries `letter-spacing: -0.16px` (its `--tracking-normal`) and the marketing site's does not. Six pixels is small, but the brief was pixel identical, and a footer that silently re-tunes itself to whatever page it lands on is not a shared component. So the footer states its own typography and inherits none of it. Anything added below that renders text should either set these or be content to inherit them from here. */ font-family: var(--ldf-font); font-weight: 400; font-style: normal; letter-spacing: normal; /* Inter runs larger than SF Pro at the same px; 0.52 pins the x-height to SF Pro Display's aspect. Both sites happen to apply this today — stated here so the footer does not depend on that continuing. */ font-size-adjust: 0.52; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [data-theme="light"] .ldf { --ldf-surface: #F4F4F6; --ldf-line: rgba(0, 0, 0, 0.08); --ldf-dim: rgba(0, 0, 0, 0.42); --ldf-muted: rgba(0, 0, 0, 0.62); --ldf-text: #0A0A0C; } /* One row, one container. The reCAPTCHA line is a full-width flex item inside this same row rather than a second bordered block, which is where most of the removed height went. */ .ldf-in { max-width: var(--ldf-max); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; flex-wrap: wrap; row-gap: 6px; column-gap: 18px; } .ldf-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } /* Height only, no width: the mark carries `viewBox="0 0 426 579"`, so one axis scales the other correctly. The footer it replaced set both (16×22) and squashed the artwork by about 1%. */ .ldf-mark { height: 18px; width: auto; display: block; flex: none; } .ldf-word { display: inline-flex; align-items: baseline; font-size: 15px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--ldf-text); } .ldf-word i { font-style: normal; font-weight: 400; opacity: 0.85; } /* `margin-right: auto` is what pushes the links to the far edge, so the left group reads as one unit (brand, then copyright) instead of the three-way `space-between` the old footer used, which stranded the copyright in the middle of the bar. */ .ldf-copy { margin-right: auto; font-size: 11px; line-height: 1.45; color: var(--ldf-dim); } .ldf-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .ldf-links a { font-size: 11px; line-height: 1.45; letter-spacing: -0.01em; text-decoration: none; color: var(--ldf-dim); transition: color 150ms ease; } .ldf-links a:hover, .ldf-links a:focus-visible { color: var(--ldf-text); } /* The wordmark is a link and had no focus state at all — a keyboard user tabbing in saw nothing move. Found by the planner's focus invariant on 2026-08-16, once that check was rewritten to stop reporting every control. A real ring rather than the colour-only treatment above: this sits on the page background, where a colour shift alone is easy to miss. The fallback matters — this file also ships to the marketing site, which does not define the planner's theme tokens. */ .ldf-brand:focus-visible { outline: 2px solid var(--theme-display-top, currentColor); outline-offset: 3px; border-radius: 6px; } /* reCAPTCHA attribution. Present ONLY where reCAPTCHA actually runs — the planner, via Firebase App Check. The marketing site loads no reCAPTCHA, and claiming otherwise would be a false statement on a page that also hosts the privacy policy. Where it IS shown it is load-bearing rather than decorative: the planner hides Google's badge (`.grecaptcha-badge { visibility: hidden }` in the planner's global.css), and Google's terms permit hiding the badge only while this text is on the page. Deleting this line silently breaks that bargain. */ .ldf-legal { flex-basis: 100%; margin: 0; font-size: 10px; line-height: 1.5; color: var(--ldf-dim); } .ldf-legal a { color: var(--ldf-muted); text-decoration: underline; text-underline-offset: 2px; transition: color 150ms ease; } .ldf-legal a:hover, .ldf-legal a:focus-visible { color: var(--ldf-text); } /* Narrow screens. The footer this replaces had NO mobile rules at all — three `space-between` children simply wrapped wherever they landed, which is the odd formatting that prompted the rewrite. The break is deliberate rather than automatic: brand and links keep the full-width row (they are short, and the pairing reads as a header), and the copyright drops to its own centred line below. The copyright is the longest string here, so letting IT wrap is what keeps the other two on one line down to 320px. */ @media (max-width: 560px) { .ldf-in { padding: 12px 20px; justify-content: space-between; row-gap: 8px; } .ldf-copy { order: 3; flex-basis: 100%; margin-right: 0; text-align: center; } .ldf-legal { order: 4; text-align: center; } } /* ── ON A PHONE THE BAND BECOMES THE PAGE ──────────────────────────────── Chosen by James on 2026-08-31 over two alternatives, and the reasoning is worth keeping because the symptom looks like a CSS bug and is not. The white strip below the footer on iOS is SAFARI'S OWN CHROME. It is tinted from ``, which the planner sets from `--bg` and `check-theme-color.mjs` enforces. No background on any element can reach it, because it is outside the document. So the seam was the browser's toolbar surround (`--bg`) against a footer band (`--surface`), and two CSS attempts at it changed nothing. One `theme-color` cannot be two colours, and it already matches the TOP of the page - deliberately, and undoing that would bring back the black Safari bar. So the fix goes at the other end: give the footer the PAGE colour on phones and the seam has nothing to be a seam between. The hairline above it still separates it from the content. `var(--bg, …)` with a literal fallback because this file is shared with the marketing site, which does not necessarily define the planner's tokens. The fallbacks are `--bg`'s own two values. AT THE END OF THE FILE ON PURPOSE: this and `[data-theme="light"] .ldf` have equal specificity, so source order decides which wins. Placed above it, the light-theme rule beat this and phones kept the band. */ @media (max-width: 680px) { .ldf { --ldf-surface: var(--bg, #0a0a0c); } [data-theme="light"] .ldf { --ldf-surface: var(--bg, #ffffff); } /* THE INSET IS RESPECTED HERE, and until 2026-09-01 it was respected nowhere. `WorkspaceShell.module.css` removed the shell's bottom padding and said "the inset is respected by the FOOTER itself now, which is the element whose colour should run through it" - and the footer contained no `env()` at all, so on a phone with a home indicator the band stopped above it and the page showed through underneath. The comment described the intended design rather than the code. Padding rather than margin, so the SURFACE runs into the inset instead of leaving a gap of page behind it. */ .ldf { padding-bottom: env(safe-area-inset-bottom, 0px); } }