at (0,0,1), which beats the
zero-specificity rule above, plain prose links need a real class rule. */
.fnd :is(p, li, summary, em, span) > a:not(.fnd-btn, [class*="btn"], [class*="button"], [class*="cta"]) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* THE SYSTEM'S LINK HOVER, DECIDED 2026-08-12. A link goes to the accent on
hover. It does not gain, lose or change an underline.
The founder, after seeing the alternative shipped on /dashboard: "I hate how
we underline links upon hover. I actually preferred the indigo. I am unsure
why we are deliberately fighting off the indigo when it looks far better and
more professional."
That reverses a call made the day before, and the reversal is correct. The
argument for underline-only was that `/studio` and `/collab-board` changed no
colour on hover, so indigo was divergence. True as an observation and wrong as
a conclusion: those two pages were not expressing a decision, they simply had
no link-hover rule, and "what the last page happened to do" is not a design
system. This is the decision, written once, in the file every page reads.
`--fnd-accent-deep` is #443CC4, which is 8.6:1 on paper and 7.4:1 on the
card, so it clears AA for body text either way.
Scoped to real links: a button is excluded because a button is not a link,
and anything inside an ink surface is excluded below because the accent is
too dark to read on ink.
THE EXCLUSION IS BY SHAPE OF NAME, NOT BY A LIST OF NAMES (2026-08-12).
It used to say `:not(.fnd-btn)` only, which is the FOUNDATION's button class.
Everything mid-migration is old-library markup wearing foundation tokens, so
its buttons are `.button--primary`, `.sidebar-action-btn`,
`.header-upgrade-btn`, `.mobile-action-btn`, `.cncg-bubble__sheet-cta` and a
long tail of page-specific names. None of those were excluded, so the moment
a page turned its gate on, every one of them had its label repainted #443CC4
on a dark fill. Measured on four gated pages: 11 to 12 unreadable anchors per
page, worst 1.24:1.
This is the THIRD time this rule has injured a component that is not prose
(see the 2026-08-11 note below). The first two fixes named the two classes
that had been noticed. That is why it kept happening: the list only ever
knows the names someone remembered. An anchor whose class contains "btn",
"button" or "cta" is a button, whatever page invented it and whenever.
THE ALTERNATIVE WAS MEASURED AND REJECTED. Deleting the broad selector and
keeping only the prose-scoped one below is the tempting "root" fix. Measured
on the same four pages, it strips the hover from about 45 anchors per page,
nearly all of them navigation (sidebar links, dropdown items, mobile nav).
That trades invisible text for silently missing affordance across dozens of
links, which is the same mistake in the other direction.
SPECIFICITY IS UNCHANGED. `:not()` takes the specificity of its most
specific argument, and every argument here is one class or one attribute,
so this still scores exactly what it scored before and nothing that used to
win or lose against it moves. */
.fnd a:not(.fnd-btn, [class*="btn"], [class*="button"], [class*="cta"]):hover,
.fnd :is(p, li, summary, em, span) > a:not(.fnd-btn, [class*="btn"], [class*="button"], [class*="cta"]):hover {
color: var(--fnd-accent-deep);
}
/* On ink, the same intent needs the light accent: #443CC4 on #16141A is 1.9:1
and unreadable. This is the same swap `.fnd-ink-surface` already makes for
chips and quiet buttons. */
.fnd .fnd-ink-surface a:not(.fnd-btn, [class*="btn"], [class*="button"], [class*="cta"]):hover,
.fnd .fnd-card--ink a:not(.fnd-btn, [class*="btn"], [class*="button"], [class*="cta"]):hover {
color: var(--fnd-accent);
}
/* A LINK THAT IS A COMPONENT IS NOT A PROSE LINK.
Added 2026-08-11 from /activity. The rule above is scoped by the elements
prose actually uses, and several components write their title or their one
action as a or a , so their links were swept up by it and shipped
with a standing underline. Measured on /activity: `.fnd-row-t` (the listing
title) and `.fnd-pagehead-link` ("Browse the marketplace") both computed
`text-decoration: underline` where the page they replace computed none, on
both widths. The founder's standing rule is that colour and weight say
link, and the underline appears on hover only.
`.fnd-row-t` is already the display font at weight 700 and `.fnd-pagehead-link`
carries the accent colour, so both keep an affordance without the line.
SPECIFICITY IS THE WHOLE POINT. The rule above scores (0,2,2) because the
`:not()` guard counts, which is why `.fnd-pagehead-link { text-decoration:
none }` in foundation-members.css (0,1,0) is in the file, reads correctly
and does nothing at all. Every selector here carries three classes so it
wins outright rather than by source order. */
.fnd :is(.fnd-row-t, .fnd-card-t) > a:not(.fnd-btn),
.fnd a.fnd-pagehead-link:not(.fnd-btn) { text-decoration: none; }
/* NAVIGATION IS THE PLAINEST CASE OF A LINK THAT IS NOT PROSE, and it was the
one still failing. The mobile drawer writes its rows as list items, so `li >
a` swept up 15 of the 24 links a member sees in the menu, on every members
page, and every one shipped with a standing underline. A menu is the last
place that reads as prose. Found by the chrome sweep, 2026-08-14.
Same shape as the rule above so it wins on specificity rather than order:
(0,3,1) against the prose rule's (0,2,2). */
.fnd a.mobile-nav-link:not(.fnd-btn) { text-decoration: none; }
/* No underline on hover either (founder, 2026-08-12). The colour shift is the
whole hover signal now. */
.fnd a.fnd-pagehead-link:not(.fnd-btn):hover { text-decoration: none; }
/* THE FOCUS RING ON INK. Added 2026-08-08 after a sweep tabbed to the
breadcrumb link in a dark hero and could not see where it was: the global
ring in `base/reset.css` is a 25% indigo shadow, which blends to about
1.23:1 against `#16141A` and fails the 3:1 floor for a non-text indicator.
The site header already solves this, but its rule is scoped to `.fndc`, so
it reaches the chrome and nothing in a page body. Every focusable thing on
an ink surface needs it, not just a breadcrumb, so it goes here rather than
on the component that happened to expose it. White on ink is 18:1, and the
dark outer line keeps it legible if a surface is ever lighter than the ink. */
.fnd .fnd-ink-surface :is(a, button, summary, [tabindex]):focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 0, 0, .55);
border-radius: 3px;
}
.fnd-wrap { max-width: var(--fnd-shell-w); margin: 0 auto; padding-left: var(--fnd-s4); padding-right: var(--fnd-s4); }
@media (min-width: 768px) { .fnd-wrap { padding-left: 32px; padding-right: 32px; } }
/* ------------------------------------------------------------------
BUTTONS
Ink on light surfaces, white on ink. Never the accent: the accent
cannot hold white text accessibly, and an accent used on every button
has stopped being an accent.
------------------------------------------------------------------ */
.fnd-btn {
display: inline-flex; align-items: center; justify-content: center;
/* A gap, because a button with an icon is the normal case in the member
area and not a special one. Without it every page that puts an arrow
beside a word has to add its own spacing, and they never agree. */
gap: 9px;
min-height: 52px; padding: 0 var(--fnd-s5);
border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
font-family: var(--fnd-display-font); font-weight: 700; font-size: 16.5px;
transition: transform 150ms ease;
}
.fnd-btn:hover { transform: translateY(-2px); }
.fnd .fnd-btn--ink { background: var(--fnd-ink); color: var(--fnd-on-ink); }
.fnd .fnd-btn--light { background: #fff; color: var(--fnd-ink); }
/* THE QUIET BUTTON. --light is white on INK, where white alone separates.
On paper it disappears, and a Back button that cannot be seen is how a
member gets stuck on step two. This is the on-paper secondary: the same
shape, a hairline instead of a fill, so the primary action is still the
only filled thing on the screen. */
.fnd .fnd-btn--quiet {
background: transparent; color: var(--fnd-text);
box-shadow: inset 0 0 0 1px var(--fnd-edge);
}
.fnd .fnd-btn--quiet:hover { box-shadow: inset 0 0 0 1px var(--fnd-text-faint); }
/* KEYBOARD FOCUS WAS INVISIBLE ON EVERY BUTTON THIS SYSTEM DRAWS.
`reset.css:115` gives `button:focus-visible` a ring, at (0,1,1). Every
`.fnd-btn` variant sets its own `box-shadow` at (0,2,0) and wins, so the
focused shadow computed BYTE-IDENTICAL to the resting shadow and a keyboard
member had no idea where they were. Measured on one card on 2026-08-16: 18
"Use this idea" buttons, 12 bells and the show-all button, all with a focus
state indistinguishable from rest. The rule below it only ever set `color`,
which is why this was never noticed.
Drawn as an OUTLINE, not another shadow, so it cannot be beaten by the next
variant that sets its own shadow, and with an offset so it reads on a filled
button and a transparent one alike. */
.fnd .fnd-btn:focus-visible,
.fnd .fnd-iconbtn:focus-visible {
outline: 2px solid var(--fnd-accent-deep);
outline-offset: 2px;
}
/* PIN THE LABEL COLOUR ACROSS EVERY INTERACTIVE STATE. The old component
library still loads on every page that has not migrated, and some of its
rules repaint a foundation button by element class alone:
`.cc-accept-btn:hover { color: var(--color-white) }` (collab-card-v2.css)
turned the collab board's Locked button into white text on paper, so the
word "Locked" vanished the moment the cursor touched it. It could only
exist in the hover state, which is why no screenshot and no static check
ever saw it; the founder found it by hovering, 2026-08-12.
Fixed here rather than on that one page, because the next page to migrate
inherits the same old stylesheet and would meet the same fault. (0,3,0)
clears the old rule's (0,2,0) regardless of load order, and it sits ABOVE
the ink-surface block below on purpose, so a quiet button standing on ink
still keeps its white label. */
.fnd .fnd-btn--quiet:hover,
.fnd .fnd-btn--quiet:focus,
.fnd .fnd-btn--quiet:focus-visible,
.fnd .fnd-btn--quiet:active,
.fnd .fnd-btn--quiet:visited { color: var(--fnd-text); }
/* A control you cannot press must not lift under the cursor. The old sheet
gives every button a translateY on hover, which on a locked row promises
an action that is not there. Keyed on aria-disabled because a row that
still needs its tooltip cannot use the real `disabled` attribute, and
deliberately NOT folded into the [disabled] rule below: that one also
halves the opacity, which would drop the locked label under our contrast
floor. */
.fnd .fnd-btn[aria-disabled="true"]:hover { transform: none; cursor: not-allowed; }
/* THE SAME QUIET BUTTON, ON INK. Added 2026-08-07 for the first hero that
carries two actions: the free route and the paid one beside it.
`--quiet` alone paints ink-coloured text on the ink surface and vanishes
completely, which is the same class of fault as the invisible calls to
action on the first foundation page. The hairline is .38 white rather than
--fnd-on-ink-rule (.12): a rule between blocks may be a whisper, but the
EDGE OF A CONTROL is what tells a visitor it is pressable, and .12 measures
1.4:1 against the ink where .38 measures 3.5:1 and clears the 3:1 floor for
a non-text boundary. */
.fnd .fnd-ink-surface .fnd-btn--quiet {
color: var(--fnd-on-ink);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
}
.fnd .fnd-ink-surface .fnd-btn--quiet:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.68); }
.fnd-btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.fnd-btn[disabled], .fnd-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
/* Only the single most important element on a page gets to be bigger.
Enlarging every button flattens the hierarchy and makes none of them
feel primary. 52px is correct for the rest and clears 44px. */
.fnd-btn--hero { min-height: 60px; padding: 0 var(--fnd-s6); font-size: 18px; }
.fnd-btn svg { flex: 0 0 auto; margin-right: 11px; }
.fnd-btn--hero svg { width: 22px; height: 22px; }
.fnd-btn--sm svg { width: 17px; height: 17px; margin-right: 8px; }
/* AN ICON ON ITS OWN IS NOT AN ICON BESIDE A WORD. The margin above exists to
separate an icon from the label after it. On a button whose ONLY child is the
icon there is no label, so that margin becomes 8 or 11 pixels of dead space
on one side and the icon sits visibly off centre inside its circle. Measured
on the wall's follow control, 2026-08-13: a 44px button with 12px to the left
of the glyph and 20px to its right. Founder spotted it by eye.
`:only-child` rather than a page-level override, because this is true of
every icon-only button in the product and the next one would be off centre
too. Font Awesome swaps its for an