@charset "utf-8";
/* ==========================================================================
INFANTS TRAVELS — style.css
Saint Joseph, Michigan. Luxury travel + private ground transport.
HOW TO EDIT THIS FILE (for non-developers)
------------------------------------------
* Every colour, size, space and speed in the site is defined once, in
section 01 "DESIGN TOKENS". Change a value there and it changes
everywhere. Do NOT paste raw hex colours (#ABC123) anywhere below
section 01 — if you need a new colour, the answer is almost always one
of the tokens that already exists. There are exactly three legitimate
exceptions, and no others:
a) rgba(...) inside gradients, scrims and shadows in sections 09, 12,
24, 26 and 27 — CSS cannot put a var() inside rgba(). Every one of
those values is a token colour with an alpha channel; the comment
beside it names which token.
b) #000 inside mask-image — that is an opacity stop, not a colour.
c) #fff / #000 / #999 / #444 inside the @media print block in section
28. Print is a separate colour space: real ink on real paper.
* Sections are numbered. Use your editor's Find (Ctrl+F) for e.g. "10 —"
to jump straight to a component.
* Fonts are loaded by a tag in each page's , not from here.
See section 03.
* There is no build step. If you edit this file and the site looks
unchanged, hard-refresh (Ctrl+Shift+R) — see the caching note in
netlify.toml.
CONTENTS
01 — Design tokens
02 — Reset and base elements
03 — Fonts and typography
04 — Layout: container, section, colour bands, grids
05 — Utilities
06 — Skip link
07 — Site header and navigation
08 — Buttons and links
09 — Hero
10 — Page header (interior pages)
11 — Eyebrow, section head, lede
12 — Cards and card grids
13 — Icon tiles and feature grid
14 — Split panel (image left / right)
15 — Stat and figure rows
16 — Numbered process / timeline
17 — Accordion (FAQ)
18 — Owner placeholders (testimonial, trust strip)
19 — Service detail block
20 — Tables
21 — Tags and badges
22 — Breadcrumb and jump nav
23 — CTA band
24 — Forms
25 — Site footer
26 — Art frames, gradient material, grain, inline SVG art
27 — Motion and scroll reveal
28 — Print
========================================================================== */
/* ==========================================================================
01 — DESIGN TOKENS
========================================================================== */
:root {
/* ---- Core palette (do not add a sixth hue) ---------------------------- */
--ink: #0B1219; /* near-black, blue cast. All body text on light */
--navy-900: #0E2233; /* deep midnight water. Primary dark surface */
--navy-800: #143349; /* raised surface on dark: cards, inputs */
--navy-700: #1C4463; /* mid-water. Hover on dark, quiet dividers */
--brass-300: #E0B562; /* brass as TEXT / link ON DARK ONLY */
--brass-500: #C08A2E; /* the accent: rules, buttons, the lamp */
--brass-600: #B07C22; /* hover only, under --ink text */
--brass-700: #845C14; /* brass as TEXT / link ON LIGHT ONLY */
--sand: #E9E0D2; /* warm banding surface */
--sand-50: #F2EBDF; /* warm banding surface, lighter */
--mist: #9BAAB6; /* muted text on dark; hairline on light */
--mist-700: #52657A; /* secondary / muted text on light */
--mist-50: #EDF0F2; /* cool banding surface */
--paper: #FBF9F6; /* page background — never pure white */
--white: #FFFFFF; /* cards only */
/* ---- Lines. Two tiers: decorative vs. functional (WCAG 1.4.11) -------- */
--line: #C9C3B7; /* DECORATIVE hairlines only. Never on inputs */
--line-strong: #7E7669; /* FUNCTIONAL boundary on light (inputs etc.) */
--line-dark: #2A5271; /* DECORATIVE hairline on navy */
--line-strong-dark: #7089A0; /* FUNCTIONAL boundary on navy — 3.6:1 on navy-800 */
/* ---- Semantic (enquiry form) ------------------------------------------ */
--success: #1F6B4A;
--success-bg: #E7F1EB;
--success-on-dark: #6FC59A;
--error: #9E2B25;
--error-bg: #F7E7E5;
--error-on-dark: #F0968E;
--focus: #845C14;
--focus-dark: #E0B562;
--disabled-bg: #F1EEE9;
--disabled-text: #6F695E;
/* There is deliberately NO warning/amber status colour. Brass is the brand
accent and must never double as a status signal. Informational messages
use --navy-700 on --mist-50. */
/* ---- Contextual tokens -------------------------------------------------
These are the ones components actually reference. They are re-pointed by
.on-dark (section 04) so every component adapts to a navy band with no
extra classes. This is what stops brass text ever landing on paper. */
--fg: var(--ink);
--fg-muted: var(--mist-700);
--fg-accent: var(--brass-700);
--surface: var(--paper);
--surface-card: var(--white);
--surface-raised:var(--sand-50);
--rule: var(--line);
--rule-strong: var(--line-strong);
--focus-ring: var(--focus);
--btn-primary-bg: var(--navy-900);
--btn-primary-fg: var(--paper);
--btn-primary-bg-hover: var(--navy-700);
--btn-primary-bg-active: var(--ink);
--btn-ghost-tint: rgba(14, 34, 51, .05);
--field-bg: var(--white);
--field-border: var(--line-strong);
--field-text: var(--ink);
--field-placeholder: var(--mist-700);
--field-focus: var(--focus);
--field-focus-glow: rgba(132, 92, 20, .18);
--msg-error: var(--error);
--msg-success: var(--success);
/* ---- Typography -------------------------------------------------------- */
--font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino,
'Book Antiqua', Georgia, 'Times New Roman', serif;
--font-body: 'Source Sans 3', 'Source Sans Pro', -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
Arial, sans-serif;
/* Every clamp() middle term carries a rem component so browser zoom and
WCAG 1.4.4 Resize Text keep working. Never remove the rem term. */
--fs-overline: .75rem;
--fs-caption: .8125rem;
--fs-sm: .9375rem;
--fs-body: 1.0625rem;
--fs-lead: 1.25rem;
--fs-h5: 1.125rem;
--fs-h4: 1.5rem;
--fs-h3: clamp(1.5rem, 1.30rem + 0.80vw, 1.875rem);
--fs-h2: clamp(1.875rem, 1.50rem + 1.50vw, 2.5rem);
--fs-h1: clamp(2.25rem, 1.50rem + 3.00vw, 3.25rem);
--fs-display: clamp(2.75rem, 1.45rem + 5.20vw, 4.5rem);
/* ---- Spacing. 4px base. Only these values appear in layout CSS. -------- */
--space-2xs: .25rem; /* 4px */
--space-xs: .5rem; /* 8px */
--space-sm: .75rem; /* 12px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 2rem; /* 32px */
--space-2xl: 3rem; /* 48px */
--space-3xl: 4rem; /* 64px */
--space-4xl: 6rem; /* 96px */
--space-5xl: 8rem; /* 128px */
--space-6xl: 12rem; /* 192px */
/* ---- Layout ------------------------------------------------------------ */
--wrap: 1200px;
--wrap-narrow: 680px;
--wrap-wide: 1440px;
--gutter: clamp(1.25rem, 5vw, 3rem);
--section-pad: clamp(4rem, 9vw, 8rem);
--header-h: 68px;
/* ---- Radius. Nothing between 9px and 998px. Ever. ---------------------- */
--r-0: 0;
--r-xs: 2px; /* every interactive control */
--r-sm: 4px; /* cards, panels, message boxes */
--r-md: 8px; /* contained photography, drawer */
--r-pill: 999px; /* permitted on exactly one component: .tag */
/* ---- Shadow. Navy-tinted, never black, never on dark surfaces. --------- */
--shadow-0: none;
--shadow-1: 0 1px 2px rgba(11,18,25,.06), 0 1px 1px rgba(11,18,25,.04);
--shadow-2: 0 2px 8px rgba(11,18,25,.06), 0 8px 24px rgba(11,18,25,.06);
--shadow-3: 0 12px 40px rgba(11,18,25,.10), 0 2px 8px rgba(11,18,25,.06);
/* ---- Motion ------------------------------------------------------------ */
--dur-fast: 120ms;
--dur-base: 220ms;
--dur-slow: 420ms;
--dur-reveal: 640ms;
--ease-standard: cubic-bezier(.2, 0, 0, 1);
--ease-entrance: cubic-bezier(.16, 1, .3, 1);
color-scheme: light;
}
@media (min-width: 64em) {
:root { --header-h: 88px; }
}
/* ==========================================================================
02 — RESET AND BASE ELEMENTS
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scrollbar-gutter: stable;
/* Never set html { font-size } below 100% — it breaks user zoom settings. */
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
min-block-size: 100svh;
background-color: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden; /* belt and braces; nothing should ever need it */
}
img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
img, video { block-size: auto; }
svg { fill: currentColor; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { padding: 0; }
li { list-style-position: outside; }
table { border-collapse: collapse; border-spacing: 0; }
hr {
border: 0;
border-block-start: 1px solid var(--rule);
margin-block: var(--space-2xl);
}
/* Anchors must clear the sticky header (WCAG 2.4.11 Focus Not Obscured). */
[id] { scroll-margin-block-start: calc(var(--header-h) + var(--space-lg)); }
main:focus { outline: none; }
::selection { background: var(--brass-500); color: var(--ink); }
/* ---- Focus. Outline (not box-shadow) so it survives forced-colors mode. -- */
:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }
/* ==========================================================================
03 — FONTS AND TYPOGRAPHY
Webfonts are requested by a in each page's (with preconnect
to fonts.gstatic.com and display=swap) rather than by @import here — an
@import inside a stylesheet is discovered late and delays first paint.
The two families are Fraunces (display serif) and Source Sans 3 (humanist
sans). Both fallback stacks below are chosen for close metrics so the page
is readable and roughly correctly proportioned before the webfonts land.
HOUSE RULES
* Serif is for headings, the wordmark, pull quotes and the 01–04 service
numerals only. Never for body copy, never for UI labels, never under
1.125rem.
* Sans is for everything else, including the lede paragraph.
* Sentence case for headings. Title Case only for the wordmark and nav.
* One