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 — a neutral top-lit wash (5% white) fading to transparent by 80%, so the card reads as a plane catching light from above. Ends on transparent, not a colour, so it composites correctly on any section ground.
background: var(--gradient-card-surface-hover);Hover counterpart for interactive cards (carousel, blog, featured, FAQ). Same shape, lifted to 8% at the top. The hover state is still carried mainly by the border stepping to 20%.
background: var(--gradient-svc-media);A wide, flat accent bloom anchored to the top edge of a service card's illustration zone. The ~2:1 wide-to-tall ratio is what makes it read as light falling on the artwork rather than a glow behind it. Held at 6% and dead by 60% — Linear washes at 4% white and Resend at 6-10%, and anything stronger in colour turns into the generic blue blob. Interpolated in oklab so it doesn't fade through transparent black.
background: var(--gradient-svc-divider);The seam between a service card's illustration and its text. Brightest at the centre, transparent at both edges, so it never collides with the card's rounded corners. The one place the accent appears at strength — as a line it reads deliberate, as a fill it reads like a template.
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.
.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-mesh-vignetteRadial mask over the hero mesh shader. Centred and sitting high on mobile/tablet, centred mid-section from lg up. Distinct from .hero-vignette, which the footer reuses.
.hero-mesh-scrimTop-down darkening beneath the nav. Mobile and tablet only, via lg:hidden.
.hero-vignetteCentre mask radial for text readability. Used by the footer.
.fade-to-backgroundVertical 40% fade from transparent → background. Bottom of hero.
.cta-btn-borderAnimated conic gradient ring around the primary CTA button.
.accent-glow-largeLarge radial accent wash placed twice behind the page background.
.bg-accent-washSoft horizontal aurora behind the Services section.
.footer-gradientInverted hero radial — bright accent anchored at the bottom-center; closes the page.
.fade-from-backgroundLinear gradient (background → transparent) anchored at the top of the footer to smooth the transition in.
.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.