Design reference
Backdrops — every one the site paints, in one place.
Every background on the site is a tokenized declaration in
public/styles.css, public/tokens.css, or
public/motion.css — there are no built-in picture backdrops beyond one dot-grid file. Each swatch below draws the real rule with the same tokens the live site uses, so this page redraws when you flip the theme toggle and can't drift from
what ships. It's the sibling of the section gallery,
hero sections, header variants,
footer gallery, pop-ups,
masking, and the image gallery.
Page & hero backdrops
The canvas every page paints first: one site-wide vertical gradient, plus the two decorative layers only heroes add on top of it.
body · styles.css The site-wide canvas: a subtle top-to-bottom shift from the page-start tone into the base surface, so the fold has depth without a hero image. .hero-band::before · styles.css The only picture backdrop on the site. A dot grid tiled behind the top words, then faded out by a round mask so it reads as texture, not wallpaper. Live WebGL canvas — see the home hero
.hero-canvas · index.astro The moving backdrop behind the main top block. It is drawn live, not with CSS, so we cannot show it as a still swatch. This tile shows the page blend it paints over. Header & footer chrome
The see-through glass and thin color lines that frame every page. All four come from the same accent and surface colors, so they follow the theme on their own.
.site-header · styles.css The sticky header's translucent surface — shown here over the dot pattern so the blur and transparency read. It densifies as you scroll. .site-header::before / ::after · styles.css Two color blends along the top edge of the header. The accent line that marks the page kind, and a glass shine. .site-footer / ::before · styles.css The footer's flat see-through fill, with a thin accent line along its top edge. It ties the end of every page back to the brand color. .site-footer--home / .footer-route::before · styles.css The home page's own closing backdrop. A soft lift into the raised surface, with the caravan route line the four stops sit on. Surface fills
The fills that everything sits on. Six shapes cover the whole site. Two flat ones, two blends, one layered shine, and the soft accent tints.
.content-band, .cta-band · styles.css The workhorse section fill — one flat elevated tone that separates every band from the page gradient behind it. .service-card, .plan-card, … · styles.css The flat card fill used by every accented card grid — services, plans, details, tiers. .visual-card, .interior-hero-panel · styles.css The slightly stronger vertical card gradient reserved for hero-adjacent panels, so they read a step above ordinary cards. .login-workspace-preview, .account-route-card · styles.css The translucent vertical gradient behind the auth-route preview panels — glassier than a card, calmer than the header. .tier-featured · styles.css The one layered fill: an accent-tinted fade stacked over the card surface, so the recommended plan reads at a glance. tagfield
--lead-site-tag/icon/field-surface · tokens.css The three small-element fills: accent-soft tints for tags and icon chips, and the field surface every input mixes toward the page tone. Accent & interactive
Backgrounds that move or signal: the button's two-layer fill, the pointer glow, the hero visual bars, and the text-selection accent.
.button / ::before · styles.css A real live sample. The fill paints the inner box while a wide shine slides along the edge, plus a slanted sweep when you hover. [data-pointer-glow]::after · motion.css The hover radial that follows the cursor across glow-enabled cards — shown here parked at center. On the live site it tracks --lc-pointer-x/y. .bar.teal/.cyan/.blue/.amber · styles.css The four color blends on the chart bars in the top block art. These are the real styles, drawn from the same brand colors in both themes. Select this sentence to see the accent highlight.
::selection · styles.css Even the highlight when you select text is a backdrop. The usual browser blue gives way to our brand colors. Try selecting the words in this tile. Theme foundations
Every backdrop above comes from four base colors. Flip the light or dark switch in the header and this whole page, these swatches too, redraws in the other set.