Gradients
The site uses two distinct sets. Reusable card gradients are first-class CSS variable tokens built from --foreground / --background, so they follow the surface classes (.surface-paper / .surface-ink) rather than a theme — there is no light mode. Use them for cards, accordions, and panels. Decorative gradients (hero backdrop, CTA hover, footer/page glows) are scoped helper classes; they're inherently code-driven and won't reproduce faithfully in design tools.
Card gradient tokens
Each token below is a complete `background` value. Reference it in CSS as `background: var(--gradient-card-surface);`. Blog, FAQ, case study, service cards and mobile tiles all share this one lit-plane surface, so there are no per-component card fills to keep in sync. Testimonial panels are the one exception — they use the flat `--surface-card` colour token instead.
background: var(--gradient-card-surface);The shared surface for every card on the site. Flat on purpose — no gradients or glow on cards (Oct 2026): a one-colour 4% white layer, still written as a gradient so it stays a valid background layer in every stack. Translucent, so it composites on any section ground.
background: var(--gradient-card-surface-hover);Hover counterpart for interactive cards (carousel, blog, featured, FAQ): the same flat layer stepped to 7%. The hover state is carried mainly by the border.
Decorative gradients (reference only)
These are scoped helper classes — animated rings, multi-stop hero radials, and large-area page glows. They're not exported as tokens. Apply by adding the class name. Design tools should treat these as code-driven decoration, not importable styles.
.illo-panelThe light panel (--illo-panel) every illustration sits on, inset 8px with a 6px radius inside its dark card and a hairline --illo-line edge, with a faint wash from the CTA palette (--cta-flow-*) in one of four compositions (.illo-wash-0…3, picked by IlloPanel's wash prop) that drifts its glow positions slowly while on screen — position only, static under reduced motion. It declares the --illo-accent slots (= --accent-deep, so the focal element follows the card's .svc-accent-* hue at AA contrast on a light ground). See Foundations → Illustrations.
.hero-mesh-baseQuiet deep-navy ground under the hero WebGL shader. Renders before the shader mounts and when WebGL is unavailable. Deliberately does not imitate the shader — the shader cross-fades in over it.
.hero-flow-baseThe static ground under the navy page-hero shader (MeshCardBackdrop tone="navy" on SectionFrame surface="hero"): just --surface-section, so before the shader mounts, without WebGL, or frozen under reduced motion, a hero looks exactly as the flat tint did.
.card-mesh-base-aquaLight twin of .hero-mesh-base: a quiet pale-cyan field fading to the card’s --background, under the aqua CTA card shader (FlowingGradient via MeshCardBackdrop tone="aqua"). Same rule — it does not imitate the shader.
.hero-mesh-vignetteRadial mask over the hero mesh shader. Centred and sitting high on mobile/tablet, centred mid-section from lg up.
.hero-mesh-scrimTop-down darkening beneath the nav. Mobile and tablet only, via lg:hidden.
.fade-to-backgroundVertical 40% fade from transparent → background. Bottom of hero.
.cta-btn-borderAnimated conic gradient ring around the primary CTA button.
.footer-flowThe CTA banner aqua silk shader (MeshCardBackdrop tone="aqua") rising from the bottom 60% of the light footer, feathered into the ground by a mask.
.avatar-gradient-animatedRotating radial behind the brand avatar. Theme-agnostic — does not retheme in light mode.
Usage
Reusable card gradient
background: var(--gradient-card-surface);Used by `.card-service`, `.card-tile`, `.card-faq`, `.card-featured`, `.card-blog` and `.card-carousel-item`. Interactive ones swap to `--gradient-card-surface-hover` and step their border up; no accent wash or glow anywhere. Testimonial panels (`.card-radial`) deliberately opt out — they use the flat `--surface-card` token instead of a lit plane.
Decorative class
<div className="hero-mesh-base" />Decorative gradients are intentionally CSS-only. Don't copy them into a design tool — link to the source class instead.
Don't hardcode gradients
background: linear-gradient(160deg, rgba(91,163,255,0.1)...Add a new `--gradient-*` token in globals.css if you genuinely need a new pattern.