Gradients

The site uses two distinct sets. Reusable card gradients are first-class CSS variable tokens that retheme automatically with light/dark 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-soft);`.

Card Soft

background: var(--gradient-card-soft);

160° wash. Default state — FAQ, featured blog card, services detail panel, mobile services accordion, case-study carousel item.

Card Soft Hover

background: var(--gradient-card-soft-hover);

160° wash, stronger accent extended to 55%. Hover/active counterpart of Card Soft.

Card Service

background: var(--gradient-card-service);

Vertical wash from glass-overlay to accent-subtle. Service cards (paired with backdrop-filter blur).

Card Case Study

background: var(--gradient-card-case-study);

Quiet vertical wash from border-subtle to surface. CaseStudyCard wrapper.

Card Testimonial

background: var(--gradient-card-testimonial);

Neutral vertical depth from surface-elevated to surface. Testimonial cards and featured testimonial — no accent tint.

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 Gradient.hero-gradient

Multi-stop radial accent → background. Behind home hero. Code-driven; not a token.

Hero Vignette.hero-vignette

Center mask radial that softens the hero gradient for text readability.

Fade To Background.fade-to-background

Vertical 40% fade from transparent → background. Bottom of hero.

CTA Gradient Hover.cta-gradient-hover

Animated multi-color radial that slowly rotates behind the CTA card on hover.

CTA Button Border.cta-btn-border

Animated conic gradient ring around the primary CTA button.

Accent Glow Large.accent-glow-large

Large radial accent wash placed twice behind the page background.

Accent Wash.bg-accent-wash

Soft horizontal aurora behind the Services section.

Footer Gradient.footer-gradient

Inverted hero radial — bright accent anchored at the bottom-center; closes the page.

Fade From Background.fade-from-background

Linear gradient (background → transparent) anchored at the top of the footer to smooth the transition in.

Avatar Gradient.avatar-gradient-animated

Rotating radial behind the brand avatar. Theme-agnostic — does not retheme in light mode.

Text Gradient H1.text-gradient-h1

Hero H1 gradient (background-clip: text). White → accent-hover → accent.

Text Gradient Accent.text-gradient-accent

404 page numerals gradient. Accent-deep → accent → accent-hover (background-clip: text).

Usage

Reusable card gradient

background: var(--gradient-card-soft);

Or apply via the matching helper class (`.card-faq`, `.card-featured` — both wired to the token).

Decorative class

<div className="hero-gradient" />

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.