/* ══ THE FOOTER ═══════════════════════════════════════════════════════════ ONE footer, fifteen pages, TWO design systems. index.html runs landing.css/landing.js. The other fourteen run site.css + chrome.css. The footer markup is identical on all of them — gate.sh check 8c compares it byte-for-byte — so its CSS cannot live in either system's stylesheet. It did, briefly, and this is what that looked like: site.css defines NONE of the tokens these rules use. Not --g-ink, not --on-ink, not --l-gut, not one of the nineteen. An undefined var() does not fall back, it drops the whole declaration — so about.html rendered a 2,928px footer with a 960px raw image and a grid quietly falling back to display:block, while index.html looked perfect and every check passed. So: every token this file needs is declared HERE, on .foot2, and nothing in it reads a token it does not define. Drop this sheet into any page in either system and the footer is correct. Source: 10-realtab-products, measured off the capture — footer 1643x810 on #171717, content x172–1472. Ask headline 32px/600 top-left with a pill under it; a 2x2 label/value grid top-right, labels 18px/600 and values 16px/500 at 75% white; an 864x338 image beneath; mark, copyright and small links along the bottom. Its grid cells are Address / Phone / Email / Opening Hours. Ours are the four routed inboxes: there is no street address, no phone and no opening hours — the Arc is not built — and copying the labels verbatim would have put four TK markers in the footer of every page. */ .foot2 { --f-ink: #121820; --f-on: #F4F1EA; --f-mut: #A9A29A; --f-accent: #B68A5E; --f-heat: #E8A87C; --f-line: rgba(244,241,234,.16); --f-card: rgba(244,241,234,.05); --f-gut: 40px; --f-col: 1240px; --f-r: 26px; --f-quick: 200ms; --f-ease: cubic-bezier(.44, 0, .56, 1); --f-out: cubic-bezier(.16, 1, .3, 1); --f-shadow: rgba(28,19,12,.42); --f-plate-r: 30px; --f-plate-x: 16px; --f-plate-g: 16px; --f-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; } .foot2 { border-top: 0; padding: 92px var(--f-gut) 40px; background: var(--f-ink); color: var(--f-on); } .foot2 .col2 { max-width: var(--f-col); margin-inline: auto; } .foot2 hr { display: none; } .foot2__top { display: grid; grid-template-columns: 1fr 1.55fr; gap: 56px; padding-bottom: 72px; } .foot2__h { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.18; font-weight: 500; letter-spacing: -.02em; color: var(--f-on); margin: 0 0 30px; text-wrap: balance; } /* .foot2 a.foot2__cta, not .foot2__cta. The generic .foot2 a, .foot2 p, .foot2 address { color: var(--f-mut) } sits sixty lines below and scores 0,1,1 against this rule's 0,1,0, so it won and painted the pill's label mute-grey ON CREAM — 2.24:1, a button that looked disabled. Same collision as the ink band earlier in this stylesheet: two rules, one of them more specific by an element selector nobody counted. Doubling the class here would also work; naming the element is clearer about WHICH rule is being beaten. */ .foot2 a.foot2__cta { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 100px; background: var(--f-on); color: var(--f-ink); font-size: 15px; font-weight: 500; text-decoration: none; transition: background var(--f-quick) var(--f-ease); } .foot2 a.foot2__cta svg { width: 18px; height: 18px; transition: transform var(--f-quick) var(--f-out); } .foot2 a.foot2__cta:hover { background: var(--f-accent); } .foot2 a.foot2__cta:hover svg { transform: translate3d(3px, 0, 0); } .foot2__where { font-style: normal; margin-top: 26px; } /* min-width: 0 on both grid children, and it is not decoration. A grid item's default min-width is AUTO, which is the size of its content — so careers@corvexal.net and a 1600px-wide image each set a floor the column cannot go below, and the footer grid stops honouring its own 1fr 1.55fr at narrow widths. The symptom is a footer that scrolls sideways at a viewport where nothing else does. */ .foot2__ask { min-width: 0; max-width: 34ch; } .foot2__right { min-width: 0; } .foot2__c { min-width: 0; } .foot2__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 40px; } .foot2__k { font-size: 17px; font-weight: 600; color: var(--f-on); margin: 0 0 6px; } /* THE EMAIL IS A 172px WORD AND IT DOES NOT FIT ON A PHONE. `institutions@corvexal.net` renders 172px wide at 15px and an address has no space in it, so with the default `overflow-wrap: normal` it cannot break — it just pushes the layout. Measured at a 345px content width it ran to 357 and gave **all fourteen pages** a sideways scroll, because this footer is the one component every page shares. It was invisible for two reasons worth writing down: the landing was the only page ever opened at 375px, and at exactly 375 the string clears by 3px. It fails at 360 (the most common Android width) and below. `anywhere` rather than `break-all`: it breaks ONLY when the word would otherwise overflow, so on a wide screen the address still sits on one line and nothing about the desktop footer changes. */ .foot2__v { margin: 0; overflow-wrap: anywhere; } .foot2__v a { font-size: 15px; } .foot2__fig { margin: 44px 0 0; border-radius: var(--f-r); overflow: hidden; aspect-ratio: 864 / 338; background: var(--f-card); } .foot2__fig img { width: 100%; height: 100%; object-fit: cover; display: block; } .foot2__b { display: grid; grid-template-columns: 1fr auto; gap: 40px; padding-top: 34px; border-top: 1px solid var(--f-line); } .foot2__bl { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .foot2__br { display: flex; gap: 52px; } .foot2__l { display: flex; flex-direction: column; gap: 11px; } .foot2 .mark2 { font-weight: 800; letter-spacing: .11em; font-size: 19px; color: var(--f-on); margin-bottom: 6px; } /* THE CARVED MARK, and this is the only stylesheet every page loads. The footer wordmark used to be CORVEXAL with the X coloured amber, and the nav on twenty-four pages rendered the plain word "Corvexal" with no X treatment at all, while index.html alone carried the carved SVG. One site, three logos. The markup is now the same carved mark everywhere, so its geometry is declared once, here. THE BARS ARE currentColor. That is what makes one rule work on every ground the mark sits on — ink on cream in the nav, cream on ink in the footer, white over video on the landing hero. A per-context fill would need a rule for each, and would be wrong the first time a new ground appeared. */ .mk { display: inline-block; width: .94em; height: .94em; vertical-align: -.16em; margin-right: .04em; overflow: visible; } .mk-bar { fill: currentColor; } /* ══════ BEGIN LOGOTYPE — NOT AN AMBER USE ═══════════════════════════════ */ /* The sweep is the one warm thing in the mark and it is exempt from the amber budget for the reason recorded in tools/colour-budget.mjs: the budget is on SURFACES competing with content, and a logotype is not competing with the content, it is what the content belongs to. TWO BRANCHES, AND EVERY MARK ON THE SITE LANDS IN ONE OF THEM. --mark-x is declared in chrome.css, which the twenty-four interior pages load, and covers their navs. --f-heat is declared on .foot2 in this file, and every footer mark is inside .foot2 by construction. The landing has neither token in its nav, and needs neither: .l-mark__x .mk-sweep in landing.css is more specific and paints it from --heat. NO LITERAL AT THE END. A third fallback of #E8A87C would be the safest possible chain and gate check 1 refuses it, correctly — a raw hex below the token block is how a palette stops being a palette. The branches above are exhaustive, so there is nothing for a literal to catch. */ .mk-sweep { fill: var(--mark-x, var(--f-heat)); } /* ══════ END LOGOTYPE ════════════════════════════════════════════════════ */ .foot2 a, .foot2 p, .foot2 address { font-size: 14px; line-height: 22px; color: var(--f-mut); text-decoration: none; } .foot2 a:hover { color: var(--f-on); } /* TAP TARGETS. Measured at 375px, every link in this footer was 22px tall and the four email values were 14px — under WCAG 2.5.8's 24px minimum, on all fourteen pages, and they are the only routes off some of them. inline-block plus 3px of block padding takes them to 28 and 20+8=28. The text does not move: padding grows the box symmetrically around the same baseline, so this is reach, not layout. NOT taken to 44px (2.5.5, AAA). At 44 each link would carry 11px of padding top and bottom and the two link columns would grow by roughly 90px each — a visible change to a footer built verbatim off 10-realtab, which L13 says not to restyle. 24 is the conformance bar; 44 is a judgement Kevin should make with his eye on it. Logged in 02-THE-BACKLOG.md. */ .foot2 a:not(.foot2__cta) { display: inline-block; padding-block: 3px; } .foot2__v a { padding-block: 4px; } @media (max-width: 900px) { .foot2 { padding-top: 60px; } .foot2__top { grid-template-columns: 1fr; gap: 44px; padding-bottom: 48px; } .foot2__grid { gap: 26px 24px; } .foot2__b { grid-template-columns: 1fr; } .foot2__br { flex-wrap: wrap; gap: 28px 40px; } } /* min-width: 0 on both grid children, and it is not decoration. A grid item's default min-width is AUTO, which is the size of its content — so careers@corvexal.net and a 1600px-wide image each set a floor the column cannot go below, and the footer grid stops honouring its own 1fr 1.55fr at narrow widths. The symptom is a footer that scrolls sideways at a viewport where nothing else does. */ .foot2__ask { min-width: 0; max-width: 34ch; } .foot2__right { min-width: 0; } .foot2__c { min-width: 0; } .foot2 { border-top: 0; border-radius: var(--f-plate-r) var(--f-plate-r) 0 0; margin: var(--f-plate-g) var(--f-plate-x) 0; /* no background here. It used to say #FFFFFF, which is declared 330 lines AFTER the footer block and therefore silently repainted the ink footer white — the exact cascade collision that made the ink band invisible in an earlier session, in the same stylesheet. */ } /* ── THE TK MARKER, ON INK ──────────────────────────────────────────────── A `.tk` is an unresolved fact, marked so gate.sh can keep the ledger of what still needs Kevin's answer. It is scaffolding — but it is scaffolding a person READS, and it is the one kind of text most likely to be squinted at, so it has to clear AA like everything else. It did not. tools/contrast.js, run on the page rather than on the stylesheet, returned 3.08:1 for `.tk` inside the footer — the sheet-level muted grey landing on the footer's ink ground, which the token that chose it never knew about. THE FIX ALREADY EXISTED AND REACHED ONE PAGE. landing.css has carried `.foot2 .tk { color: var(--on-ink) }` for some time. landing.css is linked by index.html and by nothing else, so fourteen pages kept rendering the 3.08:1 version of a footer whose markup gate.sh check 8c verifies is byte-identical across all fifteen. Identical markup, one styled copy: the same split that has bitten this project before. So the rule moves to the sheet that OWNS this ground. footer.css is linked by all fifteen pages and it is where --f-on and --f-line are declared, so the colour and the ground it sits on are now decided in one place. #F4F1EA on #121820 is 15.81:1. */ .foot2 .tk { color: var(--f-on); border-color: var(--f-line); border-bottom-color: var(--f-line); } /* ── A BLANK THAT LOOKS LIKE A BLANK ────────────────────────────────────── Every unresolved fact on this site is wrapped in .tk. It has to read as a form field nobody has filled in, never as a sentence — /privacy said "We will respond within TK-RESPONSE-WINDOW" in body ink, and a reader had no way to tell that from a promise. THIS NAMES NO TOKENS. There were three of these in three stylesheets, and the one that won on twenty pages painted with --c-line and --c-mut, which exist only on aria: an undefined var() drops its whole declaration, so the border and the colour were silently gone. currentColor and em cannot be undefined. This lives in footer.css because footer.css is the last structural sheet on all three of the site's stylesheet sets, so it wins everywhere without a single !important. currentColor also means an ink-toned band gets a legible blank for free, and the contrast can never be worse than 0.72 of the text it sits in. */ .tk { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Relative, so it sits down against whatever it interrupts — but with a floor, because 0.82em of the landing's smaller copy computed to 10.66px, and a placeholder nobody can read is not a placeholder. */ font-size: max(0.82em, 12.5px); padding: 1px 6px; border-radius: 4px; /* THE DASH IS THE SIGNAL, NOT FADED TEXT. opacity:0.72 here dimmed the WORDS, and because this inherits currentColor it compounded with whatever it sits in: 4.26:1 inside ink copy and 3.18:1 inside muted copy, both under AA, both introduced by trying to make a blank look provisional. The border can be faint because a border is decoration; the text cannot, because it is text. */ border: 1px dashed color-mix(in srgb, currentColor 45%, transparent); white-space: nowrap; } /* ── THE FOOTER NAV IS A THUMB TARGET ON EVERY PAGE ──────────────────────── Measured at 375px across all 25 pages: each link in .foot2__l renders 28px tall with an 11px gap. That is the site's whole secondary navigation — EMBER, Aria, The Arc, Museum, Investors, the legal pages — and on a phone it is the same three links reported as too small on every single page of the audit, because it is the same footer. 28 + 11 means a 39px pitch with 28px of it live. WCAG 2.5.5 and both platform guidelines land on 44. The rows grow; the gap does not, so the footer gains height without gaining air it does not need. pointer: coarse only. On a mouse a 28px row is a comfortable target and forcing 44 would stretch the footer for no one's benefit. */ @media (pointer: coarse) { .foot2__l a { min-height: 44px; display: flex; align-items: center; } .foot2__bl a { min-height: 44px; display: inline-flex; align-items: center; } } /* the footer wordmark is a link on every page and measured 26px */ @media (pointer: coarse) { .foot2 .mark2 { min-height: 44px; display: inline-flex; align-items: center; } }