Audit

Consistency report

A page-by-page audit (June 2026) found the same UI patterns built several different ways across the site. This library shows the recommended canonical version of each, with a ⚠ drift note wherever real variants exist. The headline divergences:

Two of these tie back to the Figma color tokens: the accent-color split is the same drift between our CSS and Figma's accent/primary (style guide → color), and the Webflow-vs-Tailwind split is the migration still in progress.

Actions

Buttons & CTAs

One base — .btn — plus a variant modifier. Coral primary for the moment of conversion; teal solid or outline for secondary actions; the self-contained .btn--link for tertiary / in-flow CTAs.

<a class="btn btn--coral">Book Now</a>
<a class="btn btn--teal">Get the App</a>
<a class="btn btn--teal-outline">Secondary</a>
<a class="btn--link">Explore →</a>

/* legacy aliases still shipping on live pages — same styles:
   .btn-coral · .btn-teal-solid · .btn-teal-outline · .btn-link */

Actions

Store badges

App Store and Google Play buttons. Apple icon stays monochrome; Google Play keeps its branded multi-color triangle. Add .store-badge--light on dark backgrounds.

Hero atoms

Hero utilities

The atoms that dress a hero — a "need care?" prompt, a coral lead-in, an availability status chip, a rating badge, the carded Google-reviews badge (button-column width, per the assembled hero), a coupon card, a location pill, and the "Today's Availability" button (icon corrected 2026-07-06 to match the branded pin+paw mark shipped on splootvets.com/locations/denver — was a generic chat-bubble icon). From the Figma Hero Utilities set; every color resolves to a palette token (no hardcoded hexes).

Hero atoms from the Figma Hero Utilities set (node 2380-53). Colors map to --color-accent (coral), --color-teal, and --mint-100.

Heroes

Location hero

The full location-page hero, assembled from the Hero Utilities atoms. Every part is a boolean you can flip on/off — the same toggles map 1:1 to component properties in Figma & Webflow. The image switches between a framed card and a full-bleed photo, and Google reviews ⇄ Rating badge are an either/or pair.

Veterinarian in Denver Highlands

Your neighborhood Highlands vet clinic

Primary & urgent care at 3774 Julian St. Open 8am–8pm, 365 days a year. Same-day & urgent drop-off appointments available.

Same-day appointments & drop-off available now

FIRST50DEN

$50 off — new members only

Book an Appointment

Need care ASAP? (720) 818 9662

4.8★★★★★9,000+ Google reviews

4.8

Highly rated by thousands of pet parents

hey, we're sploot

The assembled location hero — live on Denver Highlands and the Denver hub page (which also adds a third CTA, .hero-availbtn, for its "Today's Availability" link). Built from the Hero Utilities atoms; each toggle is one Figma/Webflow boolean prop. Surface: default is this rounded cream card; add .hero-preview--flat to drop the card and sit on the section's own flat band — one color edge-to-edge, the production city-page look (Denver uses it). Uses .btn-coral + palette tokens (no hardcoded brand hexes).

Cards

Cards

There is just one card — .s-card — with BEM slots (__icon, __number, __eyebrow, __title, __stat, __body, __link) and additive modifiers. Every "card" across the site — page grids, service lists, numbered steps, included-pillar grids — is this one component with different slots/modifiers.

<div class="s-card">
  <div class="s-card__icon"><svg/></div>     <!-- or __number / __eyebrow + __stat -->
  <h3 class="s-card__title">Title</h3>
  <p class="s-card__body">Supporting text.</p>
</div>

/* additive modifiers */
.s-card--featured   /* dark teal */
.s-card--bordered   /* coral edge */
.s-card--center     /* center-aligned */
.s-card--hoverable  /* lift + shadow on hover */

Used everywhere cards appear — the homepage grid, primary-care, wellness-exams. Base lives in /styles/sploot-components.css; copy the markup above.

Pharmacy

Value-prop trio (featured)

SplootRx's three-up benefit cards. The middle card is featured — dark teal, white text, coral icon — as the visual anchor. Each has a rounded icon tile (mint, or white/15 on the featured card) and a small pill badge that reveals on hover (shown here). Cards and their icon tiles lift and tilt on hover.

Used on splootrx. Built on .s-card--hoverable (the lift) + .s-card--featured (the dark middle card, using --color-surface-inverse/--color-text-inverse); only the icon wiggle (.rx-icon-wrap) is bespoke. The old .rx-card / .rx-card-featured classes are fully retired — live splootrx now ships this exact markup.

Status & alerts

Status card

A hero side-card pairing a pulsing green dot with an "Open now" line. Sits under service-page heroes.

Used on primary-care. Class hooks: .open-card, .pulse.

Pricing & membership

Plan comparison (.plan-card / .plan-savings)

Membership vs. pay-as-you-go, on a dark teal band: a glassmorphic "Best Value" card (.plan-card--featured) beside a quieter default card, plus a 3-stat savings breakdown (.plan-savings) below. Promoted from about.html + financing.html (task 27) — both pages had built this independently with real drift (financing's CTA was raw Tailwind instead of the canonical .btn). The container around the cards stays page-local on purpose: about.html wraps them in a swipeable slider, financing.html in a plain grid that stacks on mobile — both are valid, and the card/savings-box visuals work in either.

Used on about and financing. Class hooks: .plan-card (+ --featured), .plan-card__* slots, .plan-savings.

Pricing & membership

Regional pricing cards

Two-up membership plan cards keyed to a region: a city-skyline image header, an "Only $XXX/year" serif price in coral, a divider, an eligibility line, a perks checklist, and an arrow purchase link. The dark variant inverts the surface to teal; both lift on hover.

Used on membership. Class hook: .rx-card + Tailwind utilities.

Pricing & membership

Price row

A baseline-aligned label/price listing row for fee and add-on tables. It owns only the flex layout and type — it must live inside a .s-panel--rows, which supplies the dividers and padding. The optional __desc stacks under the name inside a plain wrapper div, and __price--free turns the value green for anything already covered. Built on .s-price-row.

Used on spay-neuter (add-on panel and exam-fee panel). Class hooks: .s-price-row, .s-price-row__name, .s-price-row__desc, .s-price-row__price, .s-price-row__price--free — always inside .s-panel--rows (optionally .s-panel--muted), with .s-panel__head as an optional direct-child label.

Cards & pricing

Team / doctor slider

Canonical .s-card--media cards (photo + name + title) housed in the shared .dvr-svc-slider/.dvr-svc-track carousel shell — the same shell the services carousel below uses. Scroll-snap with circular prev/next controls.

Dr. Shri Gaddipati, DVM

Medical Director

Dr. Brice Ratchford, DVM

Medical Director

Dr. Molly Wozniak, DVM

Medical Director

‹ ›

Used on location pages (Highlands "Doctors who'll know your dog by name"). Class hooks: .dvr-svc-slider/.dvr-svc-track (shared shell) + .s-card--media/.s-card--hoverable (card). Behavior: /scripts/sploot-components.js (initServicesCarousels).

Cards & pricing

Nearby locations

Horizontal, always-scrollable slider of nearby-clinic cards — one .s-card--media link per clinic (photo, name, address, hours + distance, "View clinic"); closes with a centered "see all" underline link.

Sploot RiNo

3767 N Downing St, Denver, CO 80205

Open 8am–8pm · ~2 mi east

View clinic →

Sploot Commons Park

1441 Little Raven St, Denver, CO 80202

Open 8am–8pm · ~2 mi southeast

View clinic →

Sploot 9+CO

940 Colorado Blvd, Denver, CO 80206

Open 8am–8pm · ~5 mi southeast

View clinic →

See all 10 Denver clinics

Used on location pages (Highlands "other locations"). Built on .s-card--media + --hoverable — the whole card is one link, plain Tailwind utilities for the text rows.

Cards & pricing

Services carousel

The "What we treat" block: a Services / Symptoms segmented toggle over two panels. Services is a horizontal, scroll-snapping carousel of image-top cards with circular prev/next controls; Symptoms is a responsive grid of concern links with a slide-in arrow on hover.

Services Symptoms we see

Wellness & Preventative Care

Annual exams, vaccines, and proactive plans — tuned for Mile-High lifestyles, from trail-day prep to seasonal allergy screenings.

About wellness care

Urgent Care & Sick Visits

For the "something's off" days — vomiting, limping, ear infections, foxtails, and altitude-related issues handled fast.

About urgent care

Surgical Services

Spays, neuters, soft-tissue surgeries and more — all performed locally in our Denver clinics so your pet stays close to home.

About pet surgery

Dental Care

Routine oral exams, professional cleanings, digital dental x-rays, and extractions for a healthier, happier mouth.

About dental care

Puppies & Kittens

New family member? We'll help them settle into Denver life — altitude, local parasites, trails, and dog parks included.

About puppy & kitten care

Vaccinations

Core vaccines plus Denver-tuned options like Lepto, Lyme, and rattlesnake protection for the adventurers in your pack.

About pet vaccinations

‹ ›

Used on location pages (Highlands). Class hooks: .s-pill-tabs--teal, .dvr-svc-track, .concerns-grid.

Locations

Clinic info card

The canonical location card — .s-info-card (a specialization of .s-card): an "open today" status pill (animated green dot), divided icon-rows for address / phone / hours / parking, and an .s-hours list. The dashed dark-teal tap-to-copy coupon below is the separate, reusable .s-coupon-bar.

Used on location pages (e.g. Highlands); the --compact coupon bar also lives in today-availability's clinic cards (replaced the bespoke .avail-coupon chip, 2026-07-10). Class hooks: .s-info-card / .s-info-row / .s-status / .s-hours; coupon copy via /scripts/sploot-components.js (initCouponBars).

Locations

Map card

Rounded embedded Google map with a floating white "Get directions" pill anchored bottom-right (fills coral on hover). Pairs with the clinic info card in a two-column grid on location pages.

Used on location pages. Class hooks: .ci-media, .ci-map-directions.

Sections & CTAs

Section header

Coral eyebrow in caps with wide letter-spacing, then a large New Spirit heading on the next line. Introduces nearly every section across the site.

<p class="text-xs uppercase tracking-[0.18em] text-sploot-opal font-bold mb-3">
  Eyebrow Label
</p>
<h2 class="font-heading text-4xl md:text-5xl font-bold text-sploot-teal leading-tight">
  The heading goes here.
</h2>

Sections & CTAs

Section topper

The small decorative illustration that sits above a centred section header. The base .s-topper sets no width at all — it only carries display:block, height:auto, and margin: 0 auto var(--space-3), so it centres itself and self-spaces 12px off the eyebrow below. Width is the size modifier's only job, which makes it the one choice you make. Decorative by contract — always ship alt="", aria-hidden="true", and explicit width/height so it can't shift the heading beneath it while loading. --lg and --md step down at ≤640px; --sm is already small and holds its size.

Why it matters

A quick procedure that pays off for a lifetime.

.s-topper--lg · 92px → 76px

Real stories, real relief

Back to their old self in no time.

.s-topper--md · 86px → 72px

Pricing

Premium pet surgery, minus the premium price.

.s-topper--sm · 46px, no mobile step-down

Used on spay-neuter (all three sizes). Class hooks: .s-topper, .s-topper--lg, .s-topper--md, .s-topper--sm.

Content

Feature row

Two-column deep-dive: copy on one side (eyebrow, heading, body, bulleted benefits), a screen-card on the other. Alternate the order between rows for rhythm.

Data display

Checklist

A list of checkmark rows in two treatments. .s-check-row owns the glyph in both; only the wrapper changes. Divided puts hairlines between rows via .s-panel.s-panel--rows (the panel owns the dividers and padding). Gapped uses .s-check-list, which owns the reset and spacing instead. Modifiers sit on the row — --brand swaps the flat token check for the hand-drawn mint one, --inverse flips the text for a dark band — except --inline, which sits on the list and wraps rows into a horizontal run.

Divided is used on wellness-exams; gapped + --brand on spay-neuter (benefit lists, CareCredit rows). --inverse and --inline are promoted but not yet on a live page. Class hooks: .s-panel.s-panel--rows, .s-check-list, .s-check-list--inline, .s-check-row, .s-check-row--brand, .s-check-row--inverse.

Data display

Panel skins

The surface skins for the divided panel. .s-panel--muted tints the fill to the paper surface — it reads on the cream canvas, and goes flush if the band underneath is already paper. .s-panel--glass is the dark translucent card for dark bands: it brings its own padding and radius, so .s-panel--sm (glass-only) tightens both. .s-panel__head is the optional uppercase label slot — it styles only as a direct child of .s-panel--rows, so it stays unstyled inside a glass panel. The fourth skin, .s-panel--inverse (flush on a dark band, no box of its own), is documented with the stat trio.

That cream band is load-bearing, not decoration. --color-surface-muted resolves to --color-paper (#FAF7F4) — the same value as this demo card's own background — so a muted panel dropped straight onto paper renders an invisible tint. The band above is the honest real-page context: spay-neuter's fee panel sits on a cream section.

Used on spay-neuter — the fee panel (--rows + --muted + __head) and the price card (--glass). .s-panel--sm ships unused: it exists in the CSS as the tightened glass step, and this is its only rendering. Class hooks: .s-panel, .s-panel--rows, .s-panel--muted, .s-panel--glass, .s-panel--sm, .s-panel__head.

Content

Fine print

The muted substantiation note that sits under a savings, pricing, or promo claim — required by the messaging guide anywhere we quote a figure. .s-fineprint caps at 60ch and reads left-aligned; .s-fineprint--center centers both the text and the block itself for use under a centered CTA. There is deliberately no --inverse variant: the color flips to translucent white contextually inside .pack-card, .final-block, and .s-panel--glass, so a note dropped on a dark surface can't be left unreadable by an author who forgot the modifier.

SplootPack Membership

A whole year of wellness, covered.

• 3 free exam visits a year ($267–$297 value)
• 25% off spay/neuter procedures
• 10% off bloodwork, meds, vaccines, and everything else

See all benefits

*Estimated average annual savings; actual savings vary by pet and services used.

Used on spay-neuter three times: inside the .pack-card savings claim (inverted), centered under the add-on panel's CTA, and on the light CareCredit callout — which sits on .s-split-callout--boxed, a light surface, so it stays muted. Class hooks: .s-fineprint, .s-fineprint--center, .pack-card .s-fineprint, .final-block .s-fineprint, .s-panel--glass .s-fineprint.

Data display

Decision cards (treat vs ER)

Side-by-side triage guidance: a green-accented "we can treat" list and a red-accented "go to the ER" list, each with color-matched checkmarks — helping pet parents self-route. The Checklist's sibling: same check-glyph list DNA, but split into two accent-coded cards instead of one panel. Not clickable, so no hover treatment. (Moved here from Cards & pricing, 2026-07-10 — it's triage content, not a product/pricing card.)

Used on emergency-services. Class hooks: .dec-card, .dec-list (+ .treat/.er).

Data display

Stat trio

Columns in one panel with vertical dividers. Each cell: uppercase eyebrow → large serif phrase → small subline. Stacks on mobile (3-up → single column, 4-up → 2×2). Built on .s-panel.s-panel--cols.cols-3 / .cols-4.

The inverse variant (.s-panel--inverse): flush on a dark band — the section supplies the background, the panel drops its box and flips to white hairline dividers. Coral figures via .s-card__stat--accent. About's proof strip runs this 4-up, with its page-own count-up + reveal wiring and larger figures on top.

Used on wellness-exams (light 3-up) and about (inverse 4-up proof strip). Class hooks: .s-panel--cols.cols-3/.cols-4, .s-panel--inverse, .s-card__stat--accent + card slots.

Data display

Comparison matrix

The canonical pricing / coverage table: tabular numerals so columns of dollars line up, semantic row tints for the member price and the saving, and a sticky first-column label that stays put while the value columns scroll. Always wrap the table in .s-matrix__scroll — it supplies the horizontal overflow and the right-edge fade; below 720px the table holds a 480px minimum width. Built on .s-matrix.

Used on spay-neuter (inverse skin, inside the glass pricing card). Class hooks: .s-matrix__scroll, .s-matrix, .s-matrix--inverse, .s-matrix__row--success, .s-matrix__row--accent. Two gotchas worth knowing: the light skin's sticky tbody th paints itself var(--color-surface) to mask the cells sliding under it, so it only reads on a surface-colored parent — put it in an .s-panel, not straight onto paper. The inverse skin's sticky label is background: transparent, so on a narrow viewport the value cells scroll visibly through it; give the label a background if you ship a genuinely scrolling inverse table. Empty and unavailable states stay with the consumer — that's data policy, not component.

Data display

Steps timeline

Numbered process flow with a dashed coral connector between the circles. Connector hides on mobile; circles stack 2-up. Built on .s-steps / .s-step.

Used on wellness-exams. Class hooks: .s-steps, .s-step, .s-step__num.

Data display

Tabs

ARIA tablist + panels. Active state darkens the text and adds a thick teal underline. Active panel is a two-column card (image + copy) that fades up on switch. Built on .stage-tabs / .stage-panel.

0–1 yr

Puppies & Kittens

1–7 yr

Adult

7+ yr

Senior

The first year, set up right.

Vaccine series, spay/neuter, training basics, and a comfortable introduction to lifelong vet visits — at your pup or kitten's pace.

The canonical reusable ARIA tab pattern. Behavior: /scripts/sploot-components.js (initStageTabs) — click + arrow/Home/End keys + roving tabindex. primary-care's "by life stage" section is a richer, page-specific variant under its own .ls-* classes — deliberately separate from this so the .stage-* names have one meaning.

Data display

Pill tabs

A segmented-control tab — the canonical home for the location .avail-tabs and services .svc-tabs pill switchers (distinct from the underline .stage-tabs above). Full WAI-ARIA tablist: arrow / Home / End keys, roving tabindex, visible focus. Two skins — --paper and --teal.

Replaces today-availability .avail-tabs + services .svc-tabs. Behavior: /scripts/sploot-components.js (initPillTabs).

Data display

Filter bar & inverse pill tabs

Several labelled pill-tab controls in one wrapping row — the dark-band pricing selectors on spay-neuter. .s-filter-bar supplies only the caption and row rhythm; each group stays its own independent tablist. The base tabs, the --paper / --teal skins and the keyboard nav are at Pill tabs above — this covers the --inverse delta only. Both halves are dark-only and must stay inside .s-panel--glass: the label goes white purely via the contextual .s-panel--glass .s-filter-bar__label rule. Drop that ancestor and it falls back to --color-text-subtle — midnight-eagle at 55%, invisible on a dark band.

Used on spay-neuter (pricing card, paired with .s-matrix--inverse). Class hooks: .s-filter-bar, .s-filter-bar__group, .s-filter-bar__label, .s-pill-tabs--inverse, .s-pill-tab, inside a required .s-panel--glass. Base tabs, keyboard nav and disabled/focus states: Pill tabs + /scripts/sploot-components.js (initPillTabs).

Navigation

Service link rows

Horizontal link rows for secondary / "beyond the basics" services. Title + meta left, circular arrow right that fills coral on hover. Built on .beyond-link.

Used on primary-care. Class hook: .beyond-link.

Services & content

Checkmark pills

Inline mint pill badges with a check glyph — used in the About mission and pharmacy rows to call out key promises in a single line.

Used on about (mission + pharmacy rows). Built from Tailwind utilities.

Content

FAQ

Loaded from /styles/sploot-faq.css. Cream pill cards with a coral + that becomes − when open; open state switches to white with a coral border.

<link rel="stylesheet" href="/styles/sploot-faq.css">

<div class="sploot-faq">
  <details>
    <summary>Question?</summary>
    <div class="faq-answer-body">Answer.</div>
  </details>
</div>

Status & alerts

Critical alert

A left-bordered callout (fire-opal accent) for urgent, can't-miss guidance. The red is fixed regardless of palette — it signals urgency, so it shouldn't shift with the theme.

Used on emergency-services. Class hook: .critical-line.

Banners & misc

Marquee ticker

An infinite horizontal ticker of brand promises in serif, with a brand icon from /assets/iconography/ acting as a centered separator between each pair — not attached to either side. Pauses on hover and stops entirely under reduced-motion. The track holds two copies of the set so the loop is seamless.

Open 365 days a yearSame-day appointmentsOnline pharmacyFear Free certifiedBook in under a minute Open 365 days a yearSame-day appointmentsOnline pharmacyFear Free certifiedBook in under a minute

Used on highlands. Class hooks: .marquee, .marquee-track, .m-ico.

Banners & misc

Newsletter signup

A single-field email capture — a coral-outlined pill input with the submit button tucked inside on the right (coral, for contrast on dark footers).

Used in the homepage footer. Class hook: .newsletter-form.

Banners & misc

Referral banner

A thin, dismissible announcement bar — short message, an inline link, and a close button that removes it.

Used on home (top of page). Class hook: .referral-banner.

Social proof

Google reviews widget

A dark-teal review organism: an aggregate rating header (Google "G", 4.9, stars, review-count link) over a horizontal scroller of light mini-review cards — clamped quote, "read more", an initials avatar, a verified check, and Google attribution. Prev/next arrows flank the rail.

Used on reviews and about. Class hooks: .cr-gwidget, .cr-grv.

Content

Testimonials

Coral five-star rating, body quote, then a small avatar + name + location/pets line. Three cards in a row at desktop.

Social proof

Video stories

A horizontal scroll-snapping rail of 9:14 video-testimonial cards — poster image, play disc (fills coral on hover), a topic pill (top-left) and duration badge (bottom-right), with a serif title and pet-parent avatar below. Swipe or scroll.

Urgent care1:24

"They saved Bagel's evening."

Maya R. · Denver

Senior care2:03

"Gentle with our old girl."

Jordan P. · Chicago

Wellness0:58

"Booking took 20 seconds."

Sam & Tess L. · SLC

Dental1:47

"No more dreading the vet."

Priya K. · Denver

Used on reviews. Class hooks: .cr-scroller, .cr-video-card.

Sections & CTAs

App showcase

The cross-page app section that sits above the final CTA — exactly as it ships on the homepage: a radial-teal card with a green eyebrow, a New Spirit headline (coral italic accent), copy, translucent store badges, and a fanned trio of app screenshots (a center phone device flanked by two tilted shots).

The Sploot app

Your pet's whole health,
in your pocket.

Records, reminders for vaccines, checkups and medications, easy appointment booking, and prescription refills — all your pet's care in one place.

Download on the

App Store

Get it on

Google Play

Live on the homepage as the self-contained .sa-* block. Class hooks: .sa-card, .sa-badge, .sa-fan / .sa-phone.

Sections & CTAs

App download CTA

Dark teal rounded panel for the bottom of the app landing page. Headline + copy + store badges on the left, QR card on the right. Drives installs, not appointments.

Bring your pet's care everywhere.

Download the Sploot app and book, refill, remember — wherever the road takes you both.

Download on the

App Store

Get it on

Google Play

Scan to download

App

Floating chips

The app-hero treatment — a phone mockup with notification "chips" floating around it (gentle staggered up/down drift). Each chip is a white pill with a colored icon dot and a short label. Motion respects reduced-motion.

Refill ready

Appt confirmed

Vaccine due

Used on app. Class hooks: .float-chip (+ the .phone mockup).

Sections & CTAs

Booking CTA

Dark teal closing CTA for service pages. Centered headline with peach italic accent, supporting copy, then two canonical .btns — .btn--coral + the dark-band .btn--outline-invert — so both CTAs share one box model and stay the same size. Decorative mint blob in the corner. Built on .final-block.

Used on primary-care, wellness-exams. Class hook: .final-block.

Sections & CTAs

SPM callout

SplootPack-red promotional band for SplootPack Membership. Left: white eyebrow → serif heading with underlined italic accent → perks (white checkmarks) → white pill CTA. Right: a photo panel — always ship an image here, as both live pages do; the opal gradient underneath is only a loading/missing-asset fallback (an empty .pack-visual renders the whole band solid red). Single column on mobile. Built on .pack-card.

SplootPack Membership

A whole year of wellness, covered.

• 3 free exams every year
• 10% off everything else
• Vaccines, dental discounts, and SplootRx perks

Join SplootPack

Used on primary-care and wellness-exams. Class hook: .pack-card.

Sections & CTAs

Split callout

The neutral copy + media promo — eyebrow, heading, lead, check-list, CTA and fineprint in a 1.1fr/1fr grid beside an image. .s-split-callout is bare on the section background; --boxed surfaces it as a bordered white card and rounds the image; --reverse lets the media lead. Below 1024px both collapse to one column, and --reverse resets its ordering so copy always reads first on mobile. Note the component styles no typography of its own — the consuming page supplies the heading, italic accent and lead (spay-neuter sizes the heading at 48px via .svc-page + a page rule). The demos below stand that in with token inline styles; copy them, or inherit from your page shell.

Pay over time

Paying over time with CareCredit.

We get it — timing isn't always perfect. That's why we accept CareCredit®, a healthcare credit card that lets you pay over time for any procedure over $200. Most plans include 6–18 months of no-interest financing if paid within the promo period.

• See if you prequalify in seconds — no impact to your credit score
• Reusable for future visits at any Sploot clinic
• Pay over time with convenient monthly payments*

See if you prequalify

*Subject to credit approval. See carecredit.com for details.

Before the big day

What happens before surgery.

Every spay and neuter starts with a full physical exam and pre-op bloodwork, so we know exactly how your pet's body will handle anesthesia before anything is scheduled.

• A nose-to-tail exam with the vet performing the procedure
• Pre-op bloodwork run in-house, usually back the same day
• An upfront estimate — no surprises on pickup day

See how it works

Used on spay-neuter. Class hooks: .s-split-callout, .s-split-callout__copy, .s-split-callout__media, .s-split-callout--boxed, .s-split-callout--reverse. Composes .eyebrow-wf, .s-check-list, .btn, .s-fineprint.

Navigation

Navbar

Sticky mega-header with backdrop blur — brand left, primary nav center, coral "Book Now" right. Hover Locations or Services to reveal the mega-dropdown. Below md the nav collapses to a hamburger drawer.

Book Now

Hover Locations or Services to preview the mega-dropdown

Used on every page. Lives inline per file with mega-dropdowns for Services / Locations. Class hooks: .mega-header, .mega-nav-item, .mega-dropdown.

Navigation

Footer

Dark teal panel: a newsletter signup + contact/socials/QR column on the left, then Services / Locations & Company / Resources & Store sitemap columns. Store badges replace the QR code on tablet/mobile. Promoted from the sandbox homepage as the sitewide canonical, 2026-07-06 — replaces the earlier simplified 4-column version this page used to show.

Used on every page except the two frozen Webflow exports (home.html, locations/denver/index.html). Canonical source: website/partials/footer.html, enforced identical on every page by npm run check:partials. Requires sploot-components.css (.store-badge).

Motion

Motion

Reveal-on-scroll (subtle rise + fade) for content as you read down a page, and a staggered entrance on grids (cascading 120ms delay). Both use .reveal and the --ease-out-expo curve. See the style guide for the easing/duration tokens.

<div class="reveal">…</div>                       /* JS adds .in when in view */
<div class="reveal" style="transition-delay:.12s">…  /* stagger via delay */

Banners & misc

Scribble underline

A hand-drawn underline that sweeps beneath an accent word — the reviews-page take on the brand's italic-underline headline accent. Drawn from the shared brand accent set and masked to the coral token, so it always tracks the palette.

Used on reviews. The stroke is the brand accent /assets/accents/line-straight.svg masked to var(--color-opal). Class hook: .cr-scribble.

Content

Accent marks

The hand-drawn brand mark laid over a headline word or figure. .s-accent-mark is the positioning box — it also sets white-space: nowrap, so a marked phrase never breaks across lines — and a modifier supplies the shape. The mark is always a masked SVG tinted with --color-accent, never a raw background: url(): every file in /assets/accents bakes its own red and none of them is the accent token.

Used on spay-neuter — .hero-accent-word in the hero H1, .s-accent-mark--circle around the rating-badge score — and in the hero H1 on denver and denver/highlands. .hero-accent-word is the legacy alias for .s-accent-mark + .s-accent-mark--underline-curved; new work should use the canonical pair. Class hooks: .s-accent-mark, .s-accent-mark--underline-curved, .s-accent-mark--underline-straight, .s-accent-mark--circle, .s-accent-mark--sparkle, .hero-accent-word.