/* ══════════════════════════════════════════════════════════════════════════════════════════ footer-strip.css — THE FOOTER STRIP, RENDERED BY THE APP AND BY /faq/ FROM ONE FILE ✍ Abby, `A301` item D: *"One footer stylesheet loaded by the app and the FAQ … Guard: the socials row and copyright line render identically (computed styles) on / and /faq/."* ⛔⛔ THIS IS A SECOND STYLESHEET, AND `CLAUDE.md` SAYS `moonshot.css` IS **ALL** CSS. The conflict is real and is flagged rather than swallowed. It is also unavoidable for what she asked: the app's CSS is BUNDLED AND HASH-NAMED, so a static page under `public/` cannot link it — the same constraint that made the FAQ mirror design tokens by hand in the first place. Her ruling is newer and specific, so it wins. `CLAUDE.md`'s Current Architecture line is hers to amend or scope; until she does, this file is the ONLY exception and its scope is stated here: **the strip, and nothing else.** The three footer COLUMNS stay in `moonshot.css`, because only the app has them. ⚠ WHY "IDENTICALLY" NEEDS A SHARED FILE AND NOT A SHARED HABIT: the two pages had the same values by hand for exactly one sitting, and the FAQ's copy had already drifted in three of them (font-size, row-gap, glyph fill) before this file existed. Two hand-kept copies of a dress is the same failure the glyph paths had, one layer up. ⚠ THE CUSTOM PROPERTIES ARE NOT DECLARED HERE, ON PURPOSE. `--ms-footer-body`, `--ms-footer-quiet`, `--ms-footer-rule`, `--space-4` and `--font-sans` come from whichever page loads this: the app declares them on `.ms-footer` / `:root` in `moonshot.css`, the FAQ mirrors them into its own `:root` (and `INV-FAQ` `F5` pins each mirrored value to the sheet). One dress, two hosts, and the host still owns its palette. ══════════════════════════════════════════════════════════════════════════════════════════ */ /* ══ ⚡⚡ THE ADDRESS PILL AND THE BUTTON HOVER — `A301` amendment 8 ═════════════════ ✍ Abby: *"The text-link hover rule must not reach buttons or pills. On the FAQ, 'Back to the bag designer' and the abby@ address pill are elements and currently take the darker-text hover, so the text disappears against the button ground … Give them the app's button/pill classes … so they opt out of the text-link rule by class, not by exception list."* ⛔⛔ THIS IS WHY `.ms-footer-email` LIVES HERE NOW. It was in `moonshot.css`, which `/faq/` cannot read — so the FAQ had its own look-alike `.mail`, and a look-alike is exactly what cannot "opt out by class". One class, one rule, both pages. ⭐ AND THE OPT-OUT IS SPECIFICITY, NOT AN EXCEPTION LIST — her words, and the same mechanism `A301` amendment 3 item 5 already used for the REST colour: a class selector outranks the bare `a:hover`, so a control that declares its own hover is exempt by construction. Nothing has to be registered in the link rule, and the next pill is exempt the moment it dresses itself. ⚠ HER RULE FOR THESE: the GROUND shifts one step, the TEXT does not move. That is the opposite of a text link on purpose — a pill's text sits ON its ground, so moving the text is what made "Back to the bag designer" disappear into its own button. */ /* ══ ⚡⚡ `FOOTER-CONTACT-CENTRE` — ✍ Abby (`A322` close, queue item 3) ═════════════ *"the contact pill sits left while the signup row, tagline and socials are centred, on `/` and `/faq/`; centre it; leg beside `F9`: pill centre x = signup row centre x within 1 px at 390 and 1280; mutant = the old alignment."* 🩸 MEASURED FIRST, ON BOTH PAGES AT BOTH WIDTHS (`A327-footer-centre-probe.mjs`), and the measurement SPLIT her sentence in two: /faq/ @1280 pill cx 379.42 signup row (`form.nl`) cx 640 Δ 260.58 ← hers, exactly /faq/ @390 pill cx 123.42 signup row cx 195 Δ 71.58 ← hers, exactly / @390 pill cx 127.43 tagline / copy / socials cx 195 Δ 67.57 ← hers, exactly / @1280 pill cx 983.53 its own column's cx 1055 Δ 71.47 ← NOT hers ⭐ ON `/faq/` THE PILL IS THE ONE THING NOT CENTRED: its container is `text-align:center`, and its two siblings — the signup form and the foot-note — both centre on 640. On `/` at 1280 there is no signup row in the footer at all, and the pill's three column siblings (eyebrow, heading, sub) are ALL left-aligned at x=870: there the pill agrees with its context, and centring it would move it away from its own heading. So the rule below is the DEFAULT and the app's contact COLUMN opts out at its own breakpoint — ⚑ and whether `/` at 1280 should change is flagged for her, not guessed. ⚠ ONE FILE, BOTH PAGES: `.ms-footer-email` lives here precisely so `/faq/` and `/` cannot drift (see the note above), which is why this is one rule and not two. Guard `F10`. */ .ms-footer-email{ align-self:center; display:inline-flex; align-items:center; box-sizing:border-box; min-height:44px; padding:0 var(--space-4); border:1px solid color-mix(in srgb, var(--ms-ink-on-dark) 45%, transparent); border-radius:var(--radius-pill); /* ⚠⚠ MEASURED AT 768: the pill is shrink-wrapped around a 20-character address, so its width is set by the TYPE and its column's by the flex base — and those two step at different widths. At 15.5px it measured 227px inside a 223px column and hung over the edge. `max-width` is the belt. */ max-width:100%; font-family:var(--font-sans); font-size:14.5px; font-weight:900; color:var(--ms-ink-on-dark); text-decoration:none; } /* the GROUND moves, the text does not — a light wash on the ink, and the ring brightens with it */ .ms-footer-email:hover{ background:color-mix(in srgb, var(--ms-ink-on-dark) 12%, transparent); border-color:var(--ms-ink-on-dark); color:var(--ms-ink-on-dark); } .ms-footer-email:focus-visible{ outline:2px solid var(--ms-ink-on-dark); outline-offset:2px; } /* ⛔ THE APP'S CONTACT COLUMN OPTS OUT ABOVE THE STACK, and the opt-out is the measurement above, not caution: at ≥768 the pill sits in a three-column footer whose eyebrow, heading and sub are all left-aligned, so `center` would leave the address floating away from the sentence that introduces it. Below 768 the footer is one stack and everything in it centres — which is the case her sentence describes on `/`. `/faq/` has no `.ms-footer-col`, so it centres at every width. */ @media (min-width:768px){ .ms-footer-col .ms-footer-email{ align-self:flex-start; } } /* ⚡ THE FILLED PILL BUTTON — the FAQ's "Back to the bag designer". Its ground is a light-on-white fill, so one step is DARKER; the text stays white either way, which is her "text colour unchanged". Declared here so both pages can wear it. */ .ms-pill-btn{ display:inline-flex; align-items:center; min-height:44px; padding:12px 22px; border-radius:var(--radius-pill); background:var(--sp-plum); color:var(--ms-ink-on-dark); text-decoration:none; font-weight:800; } .ms-pill-btn:hover{ background:var(--sp-plum-dark); color:var(--ms-ink-on-dark); } .ms-pill-btn:focus-visible{ outline:2px solid var(--ms-focus); outline-offset:2px; } /* ══ ⚡⚡ THE FOOTER'S GROUND AND ITS STARS — `A301` amendment 3 item 4 ════════════════ ✍ Abby: *"The FAQ footer uses the same background gradient token and the same star treatment as the app footer (drawn dots, no DOM nodes, same density). footer-strip.css carries background + stars + strip."* ⚠ THE FAQ'S FOOT CHANGES GROUND WITH THIS: it was `--ms-brand-band`, chosen by her own `FAQ-DRESS` ruling for the header AND the foot. *"The same background as the app footer"* supersedes the foot half; the HEADER keeps the band, because she named the footer only. So the page reads band-header / stripes-body / ink-foot. ⚠ EACH HOST STILL OWNS ITS PALETTE: the tokens below are declared by whichever page loads this — `moonshot.css` for the app, the mirrored `:root` for `/faq/`. One painter, two palettes. ⛔ THE DOCUMENT CANVAS DID NOT COME WITH IT. `html{ background-color: var(--ms-footer-ink) }` stays in `moonshot.css`: `A295` item 18 is about what an iOS rubber-band reveals past the END OF THE DOCUMENT, which is the app's claim about the app, not a footer's about itself. */ .ms-footer{ position:relative; /* the star layer's containing block */ background: radial-gradient(ellipse 85% 200% at 50% 120%, rgba(140,108,210,0.14) 0%, transparent 60%), radial-gradient(ellipse 45% 100% at 88% 40%, rgba(152,128,216,0.07) 0%, transparent 55%), var(--ms-footer-ink); } .ms-footer::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(circle at 4% 18%, rgba(255,255,255,0.45) 0 1.2px, transparent 1.3px), radial-gradient(circle at 9% 62%, rgba(255,255,255,0.28) 0 0.9px, transparent 1.0px), radial-gradient(circle at 13% 34%, rgba(255,255,255,0.55) 0 1.6px, transparent 1.7px), radial-gradient(circle at 17% 79%, rgba(255,255,255,0.35) 0 1.1px, transparent 1.2px), radial-gradient(circle at 21% 11%, rgba(255,255,255,0.24) 0 0.9px, transparent 1.0px), radial-gradient(circle at 26% 48%, rgba(255,255,255,0.40) 0 1.3px, transparent 1.4px), radial-gradient(circle at 30% 88%, rgba(255,255,255,0.30) 0 1.0px, transparent 1.1px), radial-gradient(circle at 34% 25%, rgba(255,255,255,0.62) 0 1.8px, transparent 1.9px), radial-gradient(circle at 38% 66%, rgba(255,255,255,0.26) 0 0.9px, transparent 1.0px), radial-gradient(circle at 42% 6%, rgba(255,255,255,0.38) 0 1.2px, transparent 1.3px), radial-gradient(circle at 46% 41%, rgba(255,255,255,0.30) 0 1.0px, transparent 1.1px), radial-gradient(circle at 50% 83%, rgba(255,255,255,0.46) 0 1.4px, transparent 1.5px), radial-gradient(circle at 54% 19%, rgba(255,255,255,0.25) 0 0.9px, transparent 1.0px), radial-gradient(circle at 58% 55%, rgba(255,255,255,0.52) 0 1.6px, transparent 1.7px), radial-gradient(circle at 62% 92%, rgba(255,255,255,0.29) 0 1.0px, transparent 1.1px), radial-gradient(circle at 66% 31%, rgba(255,255,255,0.40) 0 1.2px, transparent 1.3px), radial-gradient(circle at 70% 71%, rgba(255,255,255,0.24) 0 0.9px, transparent 1.0px), radial-gradient(circle at 74% 13%, rgba(255,255,255,0.50) 0 1.5px, transparent 1.6px), radial-gradient(circle at 78% 45%, rgba(255,255,255,0.32) 0 1.0px, transparent 1.1px), radial-gradient(circle at 82% 86%, rgba(255,255,255,0.36) 0 1.2px, transparent 1.3px), radial-gradient(circle at 86% 27%, rgba(255,255,255,0.26) 0 0.9px, transparent 1.0px), radial-gradient(circle at 90% 60%, rgba(255,255,255,0.58) 0 1.7px, transparent 1.8px), radial-gradient(circle at 94% 37%, rgba(255,255,255,0.30) 0 1.0px, transparent 1.1px), radial-gradient(circle at 97% 75%, rgba(255,255,255,0.34) 0 1.2px, transparent 1.3px), radial-gradient(circle at 2% 50%, rgba(255,255,255,0.22) 0 0.9px, transparent 1.0px), radial-gradient(circle at 7% 92%, rgba(255,255,255,0.42) 0 1.3px, transparent 1.4px), radial-gradient(circle at 24% 72%, rgba(255,255,255,0.27) 0 0.9px, transparent 1.0px), radial-gradient(circle at 44% 27%, rgba(255,255,255,0.23) 0 0.9px, transparent 1.0px), radial-gradient(circle at 56% 37%, rgba(255,255,255,0.28) 0 1.0px, transparent 1.1px), radial-gradient(circle at 68% 50%, rgba(255,255,255,0.33) 0 1.1px, transparent 1.2px), radial-gradient(circle at 80% 65%, rgba(255,255,255,0.25) 0 0.9px, transparent 1.0px), radial-gradient(circle at 92% 15%, rgba(255,255,255,0.44) 0 1.4px, transparent 1.5px); } /* ══ ⚡⚡ THE GLOBAL LINK RULE, MIRRORED — `A301` amendment 3 item 5 ═══════════════════════════ ✍ Abby: *"One rule in moonshot.css, mirrored in footer-strip.css."* It is mirrored rather than inherited for the reason this whole file exists: `/faq/` cannot link the app's hash-named sheet, so a rule that lives only there would dress the app's links and leave the FAQ's bare — which is exactly the half-applied state the shared stylesheet was created to end. ⚠ SAME RULE, SAME TOKEN, NO SECOND OPINION: if the app's changes and this does not, the two pages disagree and `LNK1` fails on the FAQ. */ a{ text-decoration:none; font-weight:var(--type-label-weight); } /* ⚡⚡ `A301` amendment 7 item 2, MIRRORED VERBATIM from `moonshot.css` — ✍ *"mirrored verbatim in footer-strip.css, so the FAQ socials read the identical rule rather than their own."* ~~`a:hover, a:focus-visible{ text-decoration:underline }`~~ (`B7`). ⛔ VERBATIM IS THE INSTRUCTION AND THE MECHANISM: the two files must not develop opinions. What differs between the pages is the TOKEN each surface defines, never the rule that reads it — which is why `LNK3` compares the footer socials' hover colour on `/` and `/faq/` to each other. */ a:hover{ color:var(--ms-link-hover); text-decoration:none; } a:focus-visible{ color:var(--ms-link-hover); text-decoration:none; outline:2px solid var(--ms-focus); outline-offset:2px; } /* the footer's own pair, so the strip carries its colours wherever it is linked */ .ms-footer-strip{ --ms-link: var(--ms-footer-body); --ms-link-hover: var(--ms-footer-muted); } /* ⚡⚡ `FOOTER-REDESIGN` — CD's `.ms-fbar`: the copyright on its own full-width row with the community links centred beneath it, which is what both of her screenshots show at every width. ~~margin-top:36px~~ (`B7`): the columns' box carries its own bottom padding, so a margin here would double the gap. */ .ms-footer-strip{ position:relative; /* above the app footer's star layer; inert on the FAQ, which has none */ border-top:1px solid var(--ms-footer-rule); padding:18px 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 24px; text-align:center; } /* ⚡ `A242` COMMUNITY-LINK: the link row under the copyright. Its ink is the footer's existing link ink, not a new colour; the strip already centres it. */ .ms-footer-links{ margin:0; font-family:var(--font-sans); font-size:13.5px; font-weight:800; display:flex; flex-wrap:wrap; justify-content:center; column-gap:var(--space-4); /* ⚡⚡ `FOOTER-NITS-2` (✍ Abby, 2026-09-16): *"tighten up the FB, youtube, ko-fi links on mobile. They are a bit spaced apart, aren't they."* ~~`row-gap:var(--space-1)`~~ (`B7`). ⛔⛔ THE SPACING IS A FLOOR, NOT A MARGIN. Each link owns a 44px BOX (the rule below, bought by `INV-TAP-44` `T2c`), and at 390 the three wrap onto three lines. A gap of 0 makes the boxes TILE: 44 · 44 · 44 = 132px against 140 before. Eight pixels is all there is; the other 132 are `A195`(b)'s *"touch floor 44 = TAP AREA, app-wide, NO EXCEPTIONS"*. ⚠ ZERO IS SAFE FOR `T2c` AND THAT IS ARITHMETIC: the halo is 44 and the box is 44, so tiling them edge to edge leaves neither overlapping — the probe samples ±21 of centre, inside both. Shrinking the BOX is what would red it, and that is the ruling this line does not take. */ row-gap:0; } .ms-footer-community{ color:var(--ms-footer-body); text-decoration:none; /* the size is stated on the LINK, not inherited from the row: the app's FAQ link wears this same class in the tool column, where there is no row to inherit from — one dress, two homes */ font-size:13.5px; /* ⚡ her white brand glyph leads each label (`A244`(n), `INV-FOOTER-LAYOUT` `F7`) */ display:inline-flex; align-items:center; gap:6px; } /* ══ ⚡⚡ THE 44 IS ON THE BOX, NOT ONLY ON THE HALO — `INV-TAP-44` `T2c`, MEASURED 2026-09-16 ═══ The full guard went red on the footer redesign with ELEVEN shortfalls against a bar of nine, and the two new ones were these links: `2/4 225.89×19` and `2/4 219.94×19` at 390. The diagnosis is ARITHMETIC: `.ms-tap44` grows a CENTRED 44×44 halo around a 19px-tall link, and three stacked links at a 4px row-gap is a 23px PITCH. Two neighbours cannot both own 44px of exclusive height inside 23px, so each halo overlapped the next by 21px and the LATER sibling won every overlap. ⭐ THE BOX BECOMES 44 AND THE PITCH BECOMES 48 — CD's own *"every link is min-height:44px for mobile tap targets"*, arrived at from the measurement rather than copied. ⚠ SCOPED TO THE ROW, NOT TO `.ms-footer-community` ITSELF: the app's FAQ link wears that class in the tool column, where its nearest vertical neighbour is half a column away. */ .ms-footer-links a.ms-footer-community{ min-height:44px; } .ms-footer-glyph{ flex:none; width:16px; height:16px; fill:#fff; /* WHITE, not the link ink: both brands allow a white mark on dark; a tint follows neither */ } /* ~~`.ms-footer-community:hover{ text-decoration:underline }`~~ — REMOVED (`B7`, `A301` amendment 7 item 2: *"Hover on any text link: no underline"*). ⚠ IT HAD TO GO RATHER THAN BE OVERRIDDEN: a class selector outranks the bare `a:hover` above, so leaving it here would have kept the underline on exactly the three links her guard names — MEASURED doing precisely that before it was removed. The hover COLOUR now comes from `--ms-link-hover` like every other link's. */ .ms-footer-copy{ flex:1 1 100%; /* ⚡ CD's `.ms-fcopy`: the copyright takes its own row, the links centre under it */ margin:0; font-family:var(--font-sans); font-size:12.5px; font-weight:700; color:var(--ms-footer-quiet); letter-spacing:0.01em; } /* ⚠ THE STEPS MOVE WITH THE RULES THEY STEP. Leaving these in `moonshot.css` would have made the two pages identical at 390 and different at every width above it — which is the shape of bug that gets shipped, because the phone is what gets checked. */ @media(min-width:768px){ .ms-footer-strip{ gap:4px 32px; } .ms-footer-community{ font-size:15.5px; } .ms-footer-copy{ font-size:14px; } } @media(min-width:1024px){ .ms-footer-strip{ padding:22px 40px; gap:4px 40px; } }