/* ==========================================================================
MIAMI CHIROPRACTIC — DESIGN SYSTEM
assets/css/site.css
Built for a static, no-build-step, multi-page HTML/CSS/JS site.
This file is shared by every page (home + 9 interior pages). It is NOT
homepage-specific: tokens, type scale, layout primitives, components,
reveal-animation system, and the consent/accessibility widgets all live
here so interior pages just add page-specific content inside the same
shells (.section, .container, .card, etc).
Brand read: sports-medicine chiropractor, not a wellness spa. Deep navy
grounds, an electric-blue "ring" motif, white type, athletic/clinical
confidence. See DESIGN-NOTES.md in the project root for the full class
reference an interior-page builder needs.
Table of contents:
1. Font loading note
2. Reset / base
3. Design tokens
4. Type scale
5. Layout primitives
6. Accessibility helpers
7. Buttons
8. Badges / pills / eyebrows
9. Cards
10. Navigation
11. Hero
12. Stat strip
13. Bento (signature treatments)
14. Feature list (why patients choose us)
15. Pricing band
16. Scroll gallery (athlete credibility)
17. Location split cards
18. CTA band
19. Footer
20. Cookie consent banner
21. Accessibility widget
22. Scroll reveal system
23. Reduced motion
24. Responsive notes
========================================================================== */
/* --------------------------------------------------------------------------
1. FONT LOADING NOTE
Fonts are loaded via in the of every page (Google Fonts,
preconnect + display=swap), not re-declared here, so this stylesheet has
no network calls of its own:
Barlow Condensed = display/headline face (athletic, scoreboard-adjacent,
holds up in uppercase). Inter = body/UI face (neutral, highly legible,
chosen deliberately for this accessibility-first medical site rather
than a display serif or a trendier grotesk). Both ship with system-font
fallback stacks below so the page never blocks on a font that fails to
load.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
2. RESET / BASE
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
margin: 0;
min-height: 100dvh;
background: var(--navy-ink);
color: var(--white);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img,
picture,
svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
cursor: pointer;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
h1,
h2,
h3,
h4,
p,
figure {
margin: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
/* --------------------------------------------------------------------------
3. DESIGN TOKENS
Brand colors are fixed by the client's own brand kit (BRIEF.md section 2)
and are not subject to the design-skill's palette bans. Do not change
these hexes on interior pages.
-------------------------------------------------------------------------- */
:root {
/* Brand colors */
--navy-ink: #0b1729; /* deepest ground, page background */
--navy: #0d1b36; /* polo navy, primary brand dark */
--navy-2: #011734; /* secondary dark, card wells, footer */
--blue: #0b69db; /* electric brand blue, solid fills (buttons, badges) */
--blue-bright: #3b9bff; /* glow / hover / links + accents on dark backgrounds */
--white: #ffffff;
--paper: #f5f7fa; /* light surface: cards/panels on the dark page */
--slate: #5a6b84; /* body text on light/paper surfaces */
/* Derived surface + text tokens (contrast-checked, see DESIGN-NOTES.md) */
--ink-muted: rgba(255, 255, 255, 0.72); /* secondary text on dark, ~9.6:1 on navy-ink */
--ink-faint: rgba(255, 255, 255, 0.5); /* tertiary / captions on dark */
--hairline: rgba(255, 255, 255, 0.12); /* borders on dark surfaces */
--hairline-strong: rgba(255, 255, 255, 0.2);
--paper-hairline: rgba(11, 23, 41, 0.1); /* borders on paper surfaces */
--card-navy: rgba(255, 255, 255, 0.04); /* subtle card fill on dark, layered on navy */
/* Fonts */
--font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Spacing scale (8px base) */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
--space-10: 8rem;
/* Section rhythm (fluid, VISUAL_DENSITY ~4: "daily app" not "art gallery") */
--section-pad-y: clamp(3.5rem, 6vw, 6rem);
--section-pad-y-tight: clamp(2.5rem, 4vw, 4rem);
/* Radius scale — locked: pill buttons/badges, 16px cards, 10px inputs */
--radius-card: 16px;
--radius-card-sm: 12px;
--radius-input: 10px;
--radius-pill: 999px;
/* Shadows, tinted to navy (never pure black) */
--shadow-card: 0 20px 44px -18px rgba(1, 10, 24, 0.55);
--shadow-card-sm: 0 10px 24px -12px rgba(1, 10, 24, 0.45);
--shadow-glow: 0 0 0 1px rgba(59, 155, 255, 0.25), 0 0 32px rgba(11, 105, 219, 0.35);
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 0.18s;
--dur-base: 0.4s;
--dur-slow: 0.7s;
/* Z-index scale — use these tokens, never arbitrary numbers */
--z-base: 1;
--z-sticky-nav: 40;
--z-widget-launcher: 45;
--z-widget-panel: 50;
--z-consent: 60;
--z-skip-link: 70;
/* Container */
--container-max: 1240px;
--container-pad: clamp(1.25rem, 4vw, 2.5rem);
}
/* --------------------------------------------------------------------------
4. TYPE SCALE
Display face = Barlow Condensed (headings, stat numbers, eyebrows).
Body face = Inter. Numbers get tabular figures wherever they appear as
data (stats, prices, phone numbers).
-------------------------------------------------------------------------- */
.h1,
h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.5rem, 5.4vw, 4.25rem);
line-height: 1.04;
letter-spacing: -0.01em;
text-wrap: balance;
}
.h2,
h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 1.08;
letter-spacing: -0.005em;
text-wrap: balance;
}
.h3,
h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.375rem, 2vw, 1.75rem);
line-height: 1.18;
text-wrap: balance;
}
.h4,
h4 {
font-family: var(--font-body);
font-weight: 700;
font-size: 1.0625rem;
line-height: 1.3;
}
.lede {
font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
line-height: 1.55;
color: var(--ink-muted);
max-width: 62ch;
}
.lede--on-paper {
color: var(--slate);
}
p {
max-width: 65ch;
}
.text-body-sm {
font-size: 0.9375rem;
line-height: 1.6;
}
.text-caption {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--ink-faint);
}
.tabular {
font-variant-numeric: tabular-nums;
}
.stat-number {
font-family: var(--font-display);
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: -0.01em;
}
/* italic emphasis inside headlines: same family, guaranteed descender clearance */
em.accent {
font-style: italic;
font-weight: 700;
color: var(--blue-bright);
line-height: 1.15;
padding-bottom: 0.08em;
display: inline-block;
}
/* --------------------------------------------------------------------------
5. LAYOUT PRIMITIVES
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.container--narrow {
max-width: 860px;
}
.section {
position: relative;
padding-block: var(--section-pad-y);
}
.section--tight {
padding-block: var(--section-pad-y-tight);
}
/* Section surface variants. The page's base ground is navy-ink; --paper is
used for elevated CARD surfaces (see section 9), not full-bleed section
backgrounds, so the page keeps one consistent dark theme throughout
(see DESIGN-NOTES.md for why this reading of the brand kit was chosen). */
.section--navy-2 {
background: var(--navy-2);
}
.section--border-t {
border-top: 1px solid var(--hairline);
}
.section--border-b {
border-bottom: 1px solid var(--hairline);
}
.grid {
display: grid;
gap: var(--space-6);
}
.stack {
display: flex;
flex-direction: column;
}
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------------------
6. ACCESSIBILITY HELPERS
-------------------------------------------------------------------------- */
.skip-link {
position: fixed;
top: -100%;
left: var(--space-4);
z-index: var(--z-skip-link);
background: var(--blue);
color: var(--white);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-input);
font-weight: 600;
transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
top: var(--space-4);
}
/* Visible focus states everywhere. Never remove outline without replacing it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--blue-bright);
outline-offset: 2px;
border-radius: 4px;
}
/* --------------------------------------------------------------------------
7. BUTTONS
Radius lock: buttons are always pill-shaped. Every variant sets an
EXPLICIT background, including on