Note that repeating a class does nothing (the DOM keeps one copy), so the
second step has its own name: .lighter-2 / .darker-2.
These paint a flat gradient over the element's background-COLOR, which is
why they compose with every fill above — but they will replace a
background-IMAGE, so they don't combine with .bg-mist, .bg-dawn or
.bg-canopy. */
.lighter { background-image: linear-gradient(var(--tint-up), var(--tint-up)); }
.lighter-2 { background-image: linear-gradient(var(--tint-up-2), var(--tint-up-2)); }
.darker { background-image: linear-gradient(var(--tint-down), var(--tint-down)); }
.darker-2 { background-image: linear-gradient(var(--tint-down-2), var(--tint-down-2)); }
/* Darkening a pale surface eats into the contrast of the faintest text, so
the shade step darkens that text by the same amount it darkens the panel. */
.darker { --text-faint: #525e54; }
.darker-2 { --text-faint: #46524a; --text-muted: #48554b; }
/* In dark mode the risk runs the other way — lightening is what closes the
gap — so the repair swaps ends. */
.theme-dark .darker,
.theme-dark .darker-2 {
--text-faint: #829581;
--text-muted: #a3b6a1;
}
.theme-dark .lighter { --text-faint: #95a794; }
.theme-dark .lighter-2 { --text-faint: #aebcac; }
@media (prefers-color-scheme: dark) {
:root:not(.theme-light):not(.theme-dark) :is(.darker, .darker-2) {
--text-faint: #829581;
--text-muted: #a3b6a1;
}
:root:not(.theme-light):not(.theme-dark) .lighter { --text-faint: #95a794; }
:root:not(.theme-light):not(.theme-dark) .lighter-2 { --text-faint: #aebcac; }
}
/* --- Inverted panels -----------------------------------------------------
Dark fills that stay dark in both themes. Headings, links and .muted are
coloured explicitly elsewhere in this file, so they're re-pointed here —
otherwise dark green type would land on a dark green panel.
The matching .section--* bands share these rules. */
.bg-forest { background: var(--clr-forest-800); }
.bg-night { background: var(--clr-forest-900); }
.bg-bark { background: var(--clr-bark-700); }
.bg-canopy {
background: linear-gradient(155deg, var(--clr-forest-700), var(--clr-forest-900));
}
:is(.bg-forest, .bg-night, .bg-bark, .bg-canopy,
.section--forest, .section--night, .section--bark, .section--canopy) { color: #eef3ea; }
:is(.bg-forest, .bg-night, .bg-bark, .bg-canopy,
.section--forest, .section--night, .section--bark, .section--canopy)
:is(h1, h2, h3, h4, h5, h6, strong, b, dt) { color: #ffffff; }
:is(.bg-forest, .bg-night, .bg-bark, .bg-canopy,
.section--forest, .section--night, .section--bark, .section--canopy)
:is(.muted, .lead, .caption, .card__body, small) { color: #c2d2bd; }
:is(.bg-forest, .bg-night, .bg-bark, .bg-canopy,
.section--forest, .section--night, .section--bark, .section--canopy)
:is(a, .eyebrow) { color: var(--clr-fern-300); }
:is(.bg-forest, .bg-night, .bg-bark, .bg-canopy,
.section--forest, .section--night, .section--bark, .section--canopy) hr { background: rgba(255, 255, 255, 0.18); }
/* An outline button needs a visible edge on a dark panel */
:is(.bg-forest, .bg-night, .bg-bark, .bg-canopy,
.section--forest, .section--night, .section--bark, .section--canopy) .btn--outline {
--btn-fg: #eef3ea;
--btn-bd: rgba(255, 255, 255, 0.35);
}
:is(.bg-forest, .bg-night, .bg-bark, .bg-canopy,
.section--forest, .section--night, .section--bark, .section--canopy) .btn--outline:hover {
--btn-bg: rgba(255, 255, 255, 0.12);
--btn-fg: #ffffff;
--btn-bd: rgba(255, 255, 255, 0.6);
}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mx-auto { margin-inline: auto; }
.measure { max-width: var(--measure); }
.full-bleed { width: 100%; max-width: none; }
.round { border-radius: var(--radius-lg); }
.round-leaf { border-radius: var(--radius-leaf); overflow: hidden; }
.shadow { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.hidden { display: none !important; }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* 19. RESPONSIVE ========================================================== */
@media (max-width: 60rem) {
:root {
--fs-3xl: 2.4rem;
--fs-4xl: 2.9rem;
--sp-8: 3.5rem;
--sp-9: 4.5rem;
}
.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
:root {
--fs-2xl: 1.95rem;
--fs-3xl: 2.1rem;
--fs-4xl: 2.4rem;
--sp-8: 3rem;
--sp-9: 3.5rem;
}
.container { padding-inline: var(--sp-4); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
.nav { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.btn-group { width: 100%; }
.btn-group .btn { flex: 1 1 auto; }
.quote-pull { font-size: var(--fs-lg); }
}
/* 20. ACCESSIBILITY, MOTION, PRINT ======================================== */
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.btn:focus-visible { outline-offset: 3px; }
.skip-link {
position: absolute;
left: var(--sp-4);
top: -4rem;
z-index: 100;
background: var(--primary);
color: var(--on-primary);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius);
text-decoration: none;
transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.btn:hover, .card--hover:hover { transform: none; }
}
@media (prefers-contrast: more) {
:root {
--text-muted: var(--text);
--border: var(--border-strong);
}
}
@media print {
body { background: #fff; color: #000; }
.site-header, .site-footer, .btn, .skip-link { display: none !important; }
a { text-decoration: underline; color: #000; }
.card, .table-wrap { box-shadow: none; border: 1px solid #999; }
pre { background: #f2f2f2; color: #000; }
}
