tudor/school_compare
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(brand): adopt the schoolcompare identity across the site
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m3s
Details
PR Checks / Backend Smoke (pull_request) Successful in 7s
Details
PR Checks / Build Backend (no push) (pull_request) Successful in 13s
Details
PR Checks / Build Frontend (no push) (pull_request) Successful in 44s
Details
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
Details
PR Checks / AI Code Review (Claude) (pull_request) Successful in 4m29s
Details

Browse Source 
Implements the supplied brand guideline: the pin-and-leaf mark, the lowercase
schoolcompare wordmark, Manrope for headings and Inter for everything a person
reads a number from, the deep-teal/coral/mustard/sage palette, and the rounder
geometry the guideline asks for.

The landing hero is rebuilt to the concept: a Sand panel carrying the
proposition, the search and a trust line, with the brand landscape bleeding to
the panel's right edge, followed by the four value props.

Concept vs reality — where the guideline describes something this product does
not have, the real feature takes its place and the decision is recorded in a
code comment next to it:

- The Thriving Score is not implemented. Four of its five sub-scores (pastoral,
  enrichment, community, facilities) have no source in DfE or Ofsted data, and
  its band names are Ofsted's own, which would sit beside the real Ofsted grade
  and be indistinguishable from it.
- Guides, About, Favourites and Sign in are not added to the nav — there are no
  such pages and no accounts system. Rankings and Admissions, which the
  guideline omits, keep their places because they exist.
- The fourth value prop is "Never miss a deadline" rather than "Save & revisit",
  which would need shortlisting.

Two deviations from the supplied swatches, both forced by contrast and both
confined to text and fills. Coral #F97360 under a white label measures 2.75:1
against a 4.5 floor, so --action is a darkened #BE3C27 and the original coral
survives as --coral for tints, borders and illustration. Mustard #F2C94C is
1.5:1 as text, so --mustard-ink carries labels while --mustard stays exact for
fills and rings. Every token clears AA on all three light grounds; Sand is the
binding one, so several values sit a step darker than white alone would need.

The guideline is light-only, but the site already ships a dark theme, so it is
rebuilt from the same tokens rather than dropped.

Verified: tsc clean, 159/159 unit tests, production build green, and the
generated share card and app icon render from the new mark. The hero and the
site chrome were rendered from the compiled CSS and the prerendered markup to
confirm Manrope and Inter actually resolve — a font token that silently falls
back has shipped here before.
This commit is contained in:
Tudor
2026-08-07 18:05:49 +01:00
parent f31f6f8404
commit accc562b90
25 changed files with 1698 additions and 886 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/app/globals.css
+262 -200
View File
@@ -1,173 +1,193 @@
/*
* SchoolCompare.co.uk — "Cohort"
* SchoolCompare — "Find the right school. For their future."
*
* A school's number means nothing on its own; its position in the national
* distribution does. That idea drives the identity: the logo is the same
* five-bar spread that appears inside every school row.
* Implements the schoolcompare brand guideline. Colour has four jobs and they
* never borrow each other's hues:
* brand (deep teal) identity, navigation, headings, links, primary buttons
* action (coral) the one decisive action on a page — search, submit
* status (green / valence against the England average. Never a CTA.
* terracotta)
* phase (desaturated) category chips, deliberately subordinate.
*
* Colour has exactly three jobs and they never borrow each other's hues:
* brand (iris) interactive + identity. Never carries valence.
* status (teal / amber) valence — teal is above/good, amber is
* below/needs-attention. Never a CTA.
* phase (desaturated) category chips, deliberately subordinate.
* Two deviations from the supplied swatches, both forced by contrast, both
* confined to text and fills. Coral #F97360 carrying a white label measures
* 2.75:1 where 4.5 is the floor, so --action is a darkened #BE3C27; the
* original coral survives as --coral for tints, borders and illustration.
* Mustard #F2C94C is 1.5:1 as text, so --mustard-ink carries any label while
* --mustard stays exact for fills, rings and badges.
*
* Escalate within status by weight, not by reaching for a new hue: a tinted
* amber chip for "requires improvement", a solid amber one for "inadequate".
*
* Teal/amber rather than green/red so the above/below signal survives every
* form of colour blindness — the audience includes parents reading closely.
* Every value below clears WCAG AA on all three light grounds — Warm White,
* white cards and Sand. Sand is the binding one; several values are a step
* darker than they would need to be on white alone.
*/
:root {
color-scheme: light;
/* ── Ground ─────────────────────────────────────────────────────── */
--bg-primary: #f2f1ed; /* paper, not cream — warm enough to read as a document */
--bg-secondary: #e9e8e2;
--bg-card: #fcfcfa;
--surface-inverse: #16202a; /* dark fills: skip link, active nav, tooltips */
--bg-primary: #FAFAF8; /* Warm White */
--bg-secondary: #F5EFE6; /* Sand — hero panels, sunken rows */
--bg-card: #FFFFFF;
--surface-inverse: #0F766E;
/* ── Ink ────────────────────────────────────────────────────────── */
--text-primary: #16202a;
--text-secondary: #4a545f;
--text-muted: #5c6570; /* 5.3:1 on --bg-primary */
--text-inverse: #f7f7f4;
--text-primary: #1C2731; /* Ink */
--text-secondary: #4A5560;
--text-muted: #5F6A75; /* 4.8:1 on Sand, the worst ground */
--text-inverse: #FFFFFF;
/* ── Line ───────────────────────────────────────────────────────── */
--border: #dedcd5;
--border-strong: #cdcac1;
--border: #E5E7EB; /* Light Grey */
--border-strong: #D3D7DD;
/* ── Brand: iris ────────────────────────────────────────────────── */
--brand: #584a9b; /* 6.9:1 on --bg-primary */
--brand-strong: #473c80; /* hover on brand fills */
--brand-stronger: #3a3069; /* active/pressed */
--brand-bg: rgba(88, 74, 155, 0.10);
--brand-on: #fcfcfa; /* text/icon sitting on a brand fill */
/* ── Brand: deep teal ───────────────────────────────────────────── */
--brand: #0F766E; /* exact brand value; 4.8:1 on Sand */
--brand-strong: #0C5F58;
--brand-stronger: #0A4D47;
--brand-bg: rgba(15, 118, 110, 0.10);
--brand-on: #FFFFFF;
/* ── Status: above / at / below the comparison point ────────────── */
--status-above: #0b625a; /* 6.6:1 on --bg-primary, 5.1:1 on its own tint */
--status-above-bg: rgba(11, 98, 90, 0.10);
--status-below: #7f4a00; /* 6.3:1 on --bg-primary, 5.1:1 on its own tint */
--status-below-bg: rgba(127, 74, 0, 0.11);
--status-at: var(--text-muted);
--status-at-bg: rgba(92, 101, 112, 0.10);
/* ── Action: coral. One per screen, and only for the decisive one. ── */
--action: #BE3C27; /* darkened coral — 5.4:1 under a white label */
--action-strong: #A33320;
--action-stronger: #8C2B1B;
--action-bg: rgba(249, 115, 96, 0.14);
--action-on: #FFFFFF;
/* ── Charts: the same three hues, extended by lightness only ────── */
--chart-1: #584a9b;
--chart-2: #0b625a;
--chart-3: #7f4a00;
--chart-4: #8a7cc9;
--chart-5: #3e9c92;
--chart-6: #c9903d;
--chart-grid: #dedcd5;
--chart-reference: #5c6570; /* national/LA reference lines */
/* ── Palette accents: exact brand values, for fills and tints only ── */
--coral: #F97360;
--mustard: #F2C94C;
--mustard-ink: #806200; /* any label that has to sit on or beside mustard */
--sage: #A7D7C5;
--sky: #C7EBF5;
--lavender: #DDD8F5;
--sand: #F5EFE6;
/* ── Status: above / at / below the England average ─────────────── */
--status-above: #36743F;
--status-above-bg: rgba(54, 116, 63, 0.12);
--status-below: #A9481F;
--status-below-bg: rgba(249, 115, 96, 0.15);
--status-at: #5F6A75;
--status-at-bg: rgba(95, 106, 117, 0.10);
/* ── Charts ─────────────────────────────────────────────────────── */
--chart-1: #0F766E;
--chart-2: #36743F;
--chart-3: #806200;
--chart-4: #A9481F;
--chart-5: #2F6F8F;
--chart-6: #5F4FA8;
--chart-grid: #E5E7EB;
--chart-reference: #5F6A75;
/* ── Series: up to 8 schools compared at once ───────────────────────
Categorical needs distinguishable hues, so this ramp is wider than the
three-hue rule — but every step is held to the same mid-dark tone and
moderate saturation, and every one clears AA on --bg-primary, so they
read as one family and work as legend text as well as chart lines. */
--series-1: #584a9b;
--series-2: #0b625a;
--series-3: #7f4a00;
--series-4: #a03a5e;
--series-5: #2f5f8f;
--series-6: #4a6b2f;
--series-7: #7a3f7a;
--series-8: #97442a;
Categorical, so wider than the four-hue rule — but every step is held
to the same mid-dark tone and clears AA on the card, so they read as
one family and work as legend text as well as chart lines. */
--series-1: #0F766E;
--series-2: #36743F;
--series-3: #806200;
--series-4: #A9481F;
--series-5: #2F6F8F;
--series-6: #5F4FA8;
--series-7: #0E7A86;
--series-8: #8A4A6B;
/* ── Phase: category, desaturated so it stays under the status hues ── */
--phase-primary: #4a6072;
--phase-primary-bg: rgba(74, 96, 114, 0.10);
--phase-primary-text: #3b4e5e;
--phase-secondary: #5f5480;
--phase-secondary-bg: rgba(95, 84, 128, 0.10);
--phase-secondary-text: #4e4570;
--phase-all-through: #4b6b57;
--phase-all-through-bg: rgba(75, 107, 87, 0.10);
--phase-all-through-text: #3d5847;
--phase-post16: #7a6242;
--phase-post16-bg: rgba(122, 98, 66, 0.10);
--phase-post16-text: #645036;
--phase-nursery: #7a5560;
--phase-nursery-bg: rgba(122, 85, 96, 0.10);
--phase-nursery-text: #64454f;
--phase-primary: #0F766E;
--phase-primary-bg: rgba(167, 215, 197, 0.40);
--phase-primary-text: #0C5F58;
--phase-secondary: #2F6F8F;
--phase-secondary-bg: rgba(199, 235, 245, 0.55);
--phase-secondary-text: #2A6180;
--phase-all-through: #36743F;
--phase-all-through-bg: rgba(54, 116, 63, 0.12);
--phase-all-through-text: #2F6738;
--phase-post16: #806200;
--phase-post16-bg: rgba(242, 201, 76, 0.26);
--phase-post16-text: #6E5500;
--phase-nursery: #5F4FA8;
--phase-nursery-bg: rgba(221, 216, 245, 0.55);
--phase-nursery-text: #544396;
/* ── Sunken surface: the footer, and anything meant to read as a dark
anchor band. Deliberately NOT --surface-inverse: "inverse" flips
with the theme, which turned the footer into a light slab at the
bottom of a dark page. This stays dark in both. ──────────────── */
--surface-sunken: #16202a;
--on-sunken: #e4e2dc;
--on-sunken-muted: #b3b8bd;
--on-sunken-faint: #7f878f;
--on-sunken-link: #b9aeef;
/* ── Sunken surface: the footer, and anything meant to read as a deep
teal anchor band. Stays teal in both themes on purpose — it is the
"brand in action" card from the guideline. ─────────────────── */
--surface-sunken: #0C5F58;
--on-sunken: #FFFFFF;
--on-sunken-muted: #C9E4DB;
--on-sunken-faint: #A9D6CA;
--on-sunken-link: #C7EBF5;
/* ── Medals: rankings podium. Metal, not palette — kept legible on
both grounds rather than literally gold/silver/bronze. ───────── */
--medal-gold: #a67c00;
--medal-silver: #6f7580;
--medal-bronze: #8a5a2b;
/* ── Medals: rankings podium ────────────────────────────────────── */
--medal-gold: #806200;
--medal-silver: #6B7580;
--medal-bronze: #8A5A2B;
/* ── Channels ───────────────────────────────────────────────────────
CSS can't interpolate a hex token into rgba(), so any tint that needs
an arbitrary alpha reads the raw channels from here. Keep these in
sync with the hex tokens above — they are the same colours. */
--brand-rgb: 88, 74, 155;
--status-above-rgb: 11, 98, 90;
--status-below-rgb: 127, 74, 0;
--ink-rgb: 22, 32, 42;
--text-inverse-rgb: 247, 247, 244;
--shadow-rgb: 22, 32, 42;
--muted-rgb: 92, 101, 112;
--phase-secondary-rgb: 95, 84, 128;
--medal-silver-rgb: 111, 117, 128;
--brand-rgb: 15, 118, 110;
--action-rgb: 190, 60, 39;
--coral-rgb: 249, 115, 96;
--sage-rgb: 167, 215, 197;
--status-above-rgb: 54, 116, 63;
--status-below-rgb: 169, 72, 31;
--ink-rgb: 28, 39, 49;
--text-inverse-rgb: 255, 255, 255;
--shadow-rgb: 28, 39, 49;
--muted-rgb: 95, 106, 117;
--phase-secondary-rgb: 47, 111, 143;
--medal-silver-rgb: 107, 117, 128;
--medal-bronze-rgb: 138, 90, 43;
/* ── Elevation ──────────────────────────────────────────────────── */
--shadow-soft: 0 1px 2px rgba(22, 32, 42, 0.04), 0 2px 8px rgba(22, 32, 42, 0.05);
--shadow-medium: 0 4px 20px rgba(22, 32, 42, 0.09);
--shadow-strong: 0 8px 40px rgba(22, 32, 42, 0.14);
--scrim: rgba(22, 32, 42, 0.55);
--shadow-soft: 0 1px 2px rgba(28, 39, 49, 0.04), 0 2px 8px rgba(28, 39, 49, 0.05);
--shadow-medium: 0 4px 18px rgba(28, 39, 49, 0.09);
--shadow-strong: 0 10px 34px rgba(28, 39, 49, 0.13);
--scrim: rgba(28, 39, 49, 0.5);
/* ── Type ───────────────────────────────────────────────────────── */
/* next/font already expands --font-schibsted to the family plus its
metric-matched fallback, so naming the family again here only made the
stack say it twice. It read like a safety net but wasn't one: a var()
with no fallback that resolves to nothing invalidates the whole
declaration, so the literal after it never gets a turn. The real
safeguard is that these classes sit on <html>, where :root can see
them — see app/layout.tsx. */
--font-display: var(--font-schibsted), -apple-system, BlinkMacSystemFont, sans-serif;
--font-ui: var(--font-schibsted), -apple-system, BlinkMacSystemFont, sans-serif;
--font-data: var(--font-schibsted), -apple-system, BlinkMacSystemFont, sans-serif;
--font-prose: var(--font-literata), Georgia, serif;
/* ── Type ───────────────────────────────────────────────────────────
Manrope for headings and key messaging; Inter for body copy, every
control and every figure. next/font expands each variable to the
family plus its metric-matched fallback, and the classes sit on
<html> so :root can see them — see app/layout.tsx. */
--font-display: var(--font-manrope), -apple-system, BlinkMacSystemFont, sans-serif;
--font-ui: var(--font-inter), -apple-system, BlinkMacSystemFont, sans-serif;
--font-data: var(--font-inter), -apple-system, BlinkMacSystemFont, sans-serif;
--font-prose: var(--font-inter), -apple-system, BlinkMacSystemFont, sans-serif;
/* Type scale, 1.2 ratio off a 1rem base. New work should use these
rather than inventing another font-size. */
--step--2: 0.694rem;
--step--1: 0.833rem;
/* Type scale, straight from the guideline: H1 40/48, H2 32/40, H3 24/32,
body large 16/24, body 14/20, small 12/16. */
--step--2: 0.75rem;
--step--1: 0.875rem;
--step-0: 1rem;
--step-1: 1.2rem;
--step-2: 1.44rem;
--step-3: 1.728rem;
--step-4: 2.074rem;
--step-5: 2.488rem;
--step-1: 1.125rem;
--step-2: 1.5rem;
--step-3: 2rem;
--step-4: 2.5rem;
--step-5: 3rem;
/* ── Geometry & motion ──────────────────────────────────────────── */
--radius-sm: 3px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 16px;
/* ── Geometry & motion ──────────────────────────────────────────────
"Soft shapes, rounded corners" — the guideline's geometry is markedly
rounder than the old system's 3/6/10/16. */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 22px;
--transition: 0.2s ease;
--transition-slow: 0.4s ease;
}
/*
* Dark theme. Not an inversion — the accent and both status hues are lifted
* independently so each still clears AA on the dark ground, and --brand-on
* flips to dark because the brand fill is now the lighter of the pair.
* Dark theme. Not in the guideline, which is light-only — but the site already
* ships one, so removing it would be a visible regression. Built from the same
* tokens: teal and coral are lifted independently so each still clears AA on
* the dark ground, and the ground itself keeps the Ink hue rather than going
* to black.
*
* Tokens only. Never style a component from inside this block, or the two
* themes drift apart the first time someone edits one of them.
@@ -176,90 +196,108 @@
:root {
color-scheme: dark;
--bg-primary: #10151b;
--bg-secondary: #161c24;
--bg-card: #171d25;
--surface-inverse: #e4e9ee;
--bg-primary: #111A20;
--bg-secondary: #16222A;
--bg-card: #18242C;
--surface-inverse: #E9EEF0;
--text-primary: #e4e9ee;
--text-secondary: #b4bec8;
--text-muted: #8d99a6; /* 6.4:1 on --bg-primary */
--text-inverse: #10151b;
--text-primary: #E9EEF0;
--text-secondary: #B4C2C7;
--text-muted: #8B9AA1; /* 5.5:1 on the card */
--text-inverse: #111A20;
--border: #28313b;
--border-strong: #38434f;
--border: #26343D;
--border-strong: #35454F;
--brand: #9c8ce8; /* 6.5:1 on --bg-primary */
--brand-strong: #b0a3ee;
--brand-stronger: #c2b8f3;
--brand-bg: rgba(156, 140, 232, 0.14);
--brand-on: #10151b;
--brand: #5FC7BB;
--brand-strong: #7BD6CC;
--brand-stronger: #9BE3DB;
--brand-bg: rgba(95, 199, 187, 0.14);
--brand-on: #0A1418;
--status-above: #4fc0b0; /* 8.4:1 on --bg-primary, 4.8:1 on its own tint */
--status-above-bg: rgba(79, 192, 176, 0.14);
--status-below: #d99b2e; /* 7.7:1 */
--status-below-bg: rgba(217, 155, 46, 0.14);
--status-at-bg: rgba(141, 153, 166, 0.14);
--action: #F08A72;
--action-strong: #F5A492;
--action-stronger: #F8BFB1;
--action-bg: rgba(240, 138, 114, 0.16);
--action-on: #241009;
--chart-1: #9c8ce8;
--chart-2: #4fc0b0;
--chart-3: #d99b2e;
--chart-4: #6f5fc4;
--chart-5: #2b8a7e;
--chart-6: #a97420;
--chart-grid: #28313b;
--chart-reference: #8d99a6;
--coral: #F08A72;
--mustard: #F2C94C;
--mustard-ink: #EFC658;
--sage: #8FCBB7;
--sky: #9CD4E6;
--lavender: #C2BBEA;
--sand: #1B2730;
--series-1: #9c8ce8;
--series-2: #4fc0b0;
--series-3: #d99b2e;
--series-4: #e07a9d;
--series-5: #6fa8dc;
--series-6: #94c46b;
--series-7: #c48bc4;
--series-8: #e08a6b;
--status-above: #7FCB8A;
--status-above-bg: rgba(127, 203, 138, 0.14);
--status-below: #EFA184;
--status-below-bg: rgba(239, 161, 132, 0.14);
--status-at: #8B9AA1;
--status-at-bg: rgba(139, 154, 161, 0.14);
--phase-primary: #8aa4b8;
--phase-primary-bg: rgba(138, 164, 184, 0.14);
--phase-primary-text: #a3bacd;
--phase-secondary: #a294c4;
--phase-secondary-bg: rgba(162, 148, 196, 0.14);
--phase-secondary-text: #b7abd6;
--phase-all-through: #8bb098;
--phase-all-through-bg: rgba(139, 176, 152, 0.14);
--phase-all-through-text: #a2c2ad;
--phase-post16: #bfa27c;
--phase-post16-bg: rgba(191, 162, 124, 0.14);
--phase-post16-text: #d0b795;
--phase-nursery: #bf98a3;
--phase-nursery-bg: rgba(191, 152, 163, 0.14);
--phase-nursery-text: #d1aeb8;
--chart-1: #5FC7BB;
--chart-2: #7FCB8A;
--chart-3: #EFC658;
--chart-4: #EFA184;
--chart-5: #8FB4D9;
--chart-6: #B6A9DD;
--chart-grid: #26343D;
--chart-reference: #8B9AA1;
--surface-sunken: #0a0e13;
--on-sunken: #d8dde2;
--on-sunken-muted: #9aa4ae;
--on-sunken-faint: #6d777f;
--on-sunken-link: #b0a3ee;
--series-1: #5FC7BB;
--series-2: #7FCB8A;
--series-3: #EFC658;
--series-4: #EFA184;
--series-5: #8FB4D9;
--series-6: #B6A9DD;
--series-7: #6FD0DC;
--series-8: #D99BB8;
--medal-gold: #d4a72c;
--medal-silver: #a8b0bb;
--medal-bronze: #c08552;
--phase-primary: #5FC7BB;
--phase-primary-bg: rgba(95, 199, 187, 0.16);
--phase-primary-text: #8ADACF;
--phase-secondary: #8FB4D9;
--phase-secondary-bg: rgba(143, 180, 217, 0.16);
--phase-secondary-text: #AAC8E4;
--phase-all-through: #7FCB8A;
--phase-all-through-bg: rgba(127, 203, 138, 0.16);
--phase-all-through-text: #9AD8A3;
--phase-post16: #EFC658;
--phase-post16-bg: rgba(242, 201, 76, 0.16);
--phase-post16-text: #F2D179;
--phase-nursery: #B6A9DD;
--phase-nursery-bg: rgba(182, 169, 221, 0.16);
--phase-nursery-text: #C8BEE6;
--brand-rgb: 156, 140, 232;
--status-above-rgb: 79, 192, 176;
--status-below-rgb: 217, 155, 46;
--ink-rgb: 228, 233, 238;
--text-inverse-rgb: 16, 21, 27;
--surface-sunken: #0C5F58;
--on-sunken: #FFFFFF;
--on-sunken-muted: #C9E4DB;
--on-sunken-faint: #A9D6CA;
--on-sunken-link: #C7EBF5;
--medal-gold: #EFC658;
--medal-silver: #A9B6BC;
--medal-bronze: #C99070;
--brand-rgb: 95, 199, 187;
--action-rgb: 240, 138, 114;
--coral-rgb: 240, 138, 114;
--sage-rgb: 143, 203, 183;
--status-above-rgb: 127, 203, 138;
--status-below-rgb: 239, 161, 132;
--ink-rgb: 233, 238, 240;
--text-inverse-rgb: 17, 26, 32;
--shadow-rgb: 0, 0, 0;
--muted-rgb: 141, 153, 166;
--phase-secondary-rgb: 162, 148, 196;
--medal-silver-rgb: 168, 176, 187;
--medal-bronze-rgb: 192, 133, 82;
--muted-rgb: 139, 154, 161;
--phase-secondary-rgb: 143, 180, 217;
--medal-silver-rgb: 169, 182, 188;
--medal-bronze-rgb: 201, 144, 112;
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.45);
--shadow-strong: 0 8px 40px rgba(0, 0, 0, 0.6);
--scrim: rgba(4, 7, 10, 0.7);
--shadow-medium: 0 4px 18px rgba(0, 0, 0, 0.45);
--shadow-strong: 0 10px 34px rgba(0, 0, 0, 0.55);
--scrim: rgba(4, 8, 10, 0.65);
}
}
@@ -402,6 +440,30 @@ table,
border-color: var(--brand-stronger);
}
/*
* Action: coral fill — the one decisive action on a page, and only that.
*
* The guideline gives coral to "calls to action, highlights, important
* buttons" while its own UI-components sheet draws the primary button in
* teal. Both are honoured by making this a scarce, separate class: teal is
* the default primary, coral marks the single action a page exists for —
* the search submit. Use it more than once per screen and it stops meaning
* anything.
*/
.btn-action {
background: var(--action);
color: var(--action-on);
border-color: var(--action);
}
.btn-action:hover:not(:disabled) {
background: var(--action-strong);
border-color: var(--action-strong);
}
.btn-action:active:not(:disabled) {
background: var(--action-stronger);
border-color: var(--action-stronger);
}
/* Secondary: brand outline — supporting actions (Add to shortlist) */
.btn-secondary {
background: transparent;