/* Generated by tools/wp/build.mjs from the mockup (mockups/src/assets/css: tokens.css + base.css + components.css + site.css; preview tooling and @mockup-only parts left out). Edit the mockup, then rebuild. */
/* ===== tokens.css ===== */
/* ==================================================================
In a Pinch Subs — design tokens
Brand constants from the In a Pinch Subs Brand Kit (2026) plus the
style tokens of direction 06 "Quiet Tint" (soft premium minimalism).
Load order: ../../assets/fonts/fonts.css → tokens.css → base.css → components.css
Logo url()s below are relative to this file; adjust them if the kit's
assets/ folder moves.
================================================================== */
:root {
/* ============ L2 COLOUR — brand palette (kit board 04) ============
Pairings that pass AA: white on plum · mint on plum · teal on white
· deep plum on mint. Never mint text on white, never teal text on
plum. Measured ratios are in STYLE-GUIDE.md §2.1. */
--plum: #4A2C82; /* Plum · primary: logo, headings, buttons */
--plum-deep: #2E1A57; /* Deep Plum · footers, dark sections; the heading ink in Quiet Tint */
--teal: #1F7A6E; /* Teal · accent text on white; "Subs" in the wordmark */
--mint: #8ED8C8; /* Mint · accent on plum, highlights; the pin's ground ellipse */
--lavender: #E9E2F5; /* Lavender · soft backgrounds, cards */
--wash: #F6F3FA; /* Soft White · page background */
--ink: #231B33; /* Ink · body text */
--muted: #5E5470; /* secondary text */
--white: #FFFFFF;
/* derived tints/shades — same hues, different lightness (not in the kit; used for hover and tint surfaces) */
--mint-tint: #DDF3EE; /* hero wash start; success tint */
--mint-deep: #5FBFAB; /* only as a non-text accent (fails on white as text) */
--teal-tint: #D8ECE8;
--teal-deep: #155A51; /* teal text on mint / mint-tint */
--lavender-deep: #D7CBEA; /* tint-button hover, selection */
/* functional colours — outside the brand palette, for validation and status only, never decoration */
--alert: #A63D2F; /* AA on white (6.3), wash (5.7), lavender (5.0) and on --alert-tint */
--alert-tint: #FBEAE7;
--success: var(--teal);
--success-tint: var(--mint-tint);
--info: var(--plum);
--info-tint: var(--lavender);
/* surfaces — Quiet Tint separates by tint, never by borders */
--surface-page: var(--wash);
--surface-raised: var(--white);
--surface-tint: var(--lavender);
--surface-glass: rgb(255 255 255 / .55); /* stat tiles on lavender */
--surface-chip: rgb(255 255 255 / .7); /* meta chips on the hero wash */
--surface-dark: var(--plum-deep);
--hero-wash: linear-gradient(135deg, #DDF3EE 0%, #F6F3FA 55%, #E9E2F5 100%); /* the only gradient in the style */
/* ============ L1 TYPE — Plus Jakarta Sans only (kit board 05) ============ */
--font: 'Plus Jakarta Sans', system-ui, Arial, sans-serif;
--text-display: clamp(44px, 5.2vw, 72px); /* home hero h1 */
--text-h1: clamp(36px, 4vw, 56px); /* inner-page title — the kit's "Display 56" */
--text-h2: clamp(28px, 3vw, 36px); /* the kit's "Heading 2 36" */
--text-h3: 24px; /* the kit's "Heading 3 24" */
--text-h4: 21px; /* step titles */
--text-lead: 19px;
--text-body: 17px; /* the kit's "Body 17 / Medium" */
--text-small: 15px;
--text-caption: 14px;
--text-micro: 13px; /* eyebrow, chips, button sm */
--text-stat: clamp(36px, 3.6vw, 52px);
--text-quote: clamp(22px, 2.2vw, 28px);
--text-stepnum: 48px;
--lh-display: 1.05; --lh-heading: 1.08; --lh-snug: 1.35; --lh-body: 1.6;
--track-display: -.02em; --track-stat: -.035em; --track-quote: -.015em; --track-eyebrow: 3px;
--measure: 46ch; /* lead/body max line length */
/* ============ L3 SHAPE — one radius scale, orthogonal ============ */
--r: 14px; /* images, tiles, cards, panels */
--r-btn: 10px; /* buttons, fields, menu items */
--r-chip: 8px; /* chips, small tags */
--r-inner: 6px; /* checkboxes, tiny controls */
/* ============ L4 SPACE ============ */
--container: 1200px;
--gutter: 24px;
--section: 104px; /* section padding-block, desktop */
--section-sm: 64px; /* ≤ 900px */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
--space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
--space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
/* ============ L5 SURFACE — no borders, no hairlines; one soft shadow ============ */
--shadow-hero: 0 24px 48px -24px rgb(74 44 130 / .25); /* the hero photo */
--shadow-float: 0 16px 40px -16px rgb(46 26 87 / .25), 0 2px 6px -2px rgb(46 26 87 / .08); /* floating layers only: menus, dialogs */
/* ============ L9 MOTION ============ */
--dur: 200ms;
--ease: ease;
--lift: -2px; /* tiles on hover */
/* focus (WCAG 2.2 2.4.11/2.4.13-friendly: 2px ring, offset, never hidden) */
--focus-ring: 2px solid var(--teal);
--focus-ring-dark: 2px solid var(--mint);
--focus-offset: 3px;
/* ============ LOGO ASSETS (relative to this stylesheet) ============ */
--logo-horizontal: url(../brand/logo-horizontal-color.svg);
--logo-horizontal-descriptor: url(../brand/logo-horizontal-color-descriptor.svg);
--logo-horizontal-white: url(../brand/logo-horizontal-white.svg);
--logo-horizontal-reversed: url(../brand/logo-horizontal-reversed.svg);
--logo-horizontal-plum: url(../brand/logo-horizontal-plum.svg);
--logo-stacked: url(../brand/logo-stacked-color.svg);
--logo-stacked-reversed: url(../brand/logo-stacked-reversed.svg);
--icon-pin: url(../brand/icon-pin.svg);
--icon-app: url(../brand/icon-app.svg);
--icon-badge: url(../brand/icon-iaps-badge.svg);
}
/* --- Reset (identical to the explorations' brand.css) --------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* --- Photo placeholder mechanism ------------------------------------
caregiver reading to toddlers
The ![]()
covers the placeholder when it loads; if the file is missing
the gradient + label shows instead, so layouts never collapse. */
.ph {
position: relative;
overflow: hidden;
background:
radial-gradient(120% 90% at 20% 15%, color-mix(in oklab, var(--ph-a, var(--lavender)) 75%, white) 0%, transparent 60%),
radial-gradient(90% 80% at 85% 90%, var(--ph-b, var(--mint)) 0%, transparent 65%),
var(--ph-a, var(--lavender));
isolation: isolate;
}
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ph-pos, 50% 40%); z-index: 1; }
.ph > .ph-label {
position: absolute; left: 12px; bottom: 10px; z-index: 0;
font: 500 11px/1.3 var(--font);
letter-spacing: .04em; text-transform: uppercase;
color: var(--muted); opacity: .8;
}
.ph > .ph-label::before { content: 'photo · '; opacity: .6; }
/* ===== base.css ===== */
/* ==================================================================
In a Pinch Subs — base styles (Quiet Tint)
Element defaults, type roles, layout primitives, surfaces, focus.
Everything here is used exactly as in the Quiet Tint mockup; the
roles the mockup does not need (h2, h4, prose, page header) follow
the brand kit's type board. Grouped by composition layer.
================================================================== */
/* ============ L1 TYPE ============ */
html { scroll-behavior: smooth; }
body { font: 500 var(--text-body)/var(--lh-body) var(--font); color: var(--ink); background: var(--surface-page); }
h1, h2, h3, h4 { color: var(--plum-deep); font-weight: 800; letter-spacing: var(--track-display); line-height: var(--lh-heading); text-wrap: balance; }
h1 { font-size: var(--text-h1); line-height: var(--lh-display); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: var(--text-h4); font-weight: 700; letter-spacing: -.01em; }
.display, .h1 { font-size: var(--text-display); line-height: var(--lh-display); } /* home hero only */
.h2 { font-size: var(--text-h2); } .h3 { font-size: var(--text-h3); } .h4 { font-size: var(--text-h4); }
.lead { font-size: var(--text-lead); color: var(--muted); max-width: var(--measure); text-wrap: pretty; }
.small { font-size: var(--text-small); } .caption { font-size: var(--text-caption); color: var(--muted); }
strong, b { font-weight: 700; }
em { font-style: italic; }
/* eyebrow / index label — the kit's "Eyebrow 13 / Bold caps", used as "01 / Section name" index labels */
.eyebrow, .index { font: 800 var(--text-micro)/1.35 var(--font); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--teal); }
.eyebrow b, .index b { color: var(--plum); font-weight: 800; }
.surface-tint .eyebrow, .surface-tint .index, .on-tint .eyebrow, .on-tint .index { color: var(--plum); } /* teal on lavender is below AA; plum passes */
.surface-dark .eyebrow, .surface-dark .index, .on-dark .eyebrow, .on-dark .index { color: var(--mint); }
.surface-dark .eyebrow b, .on-dark .eyebrow b { color: var(--white); }
/* the one highlight device: a thick mint underline on the key phrase */
.ul { text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: .14em; text-underline-offset: .1em; text-decoration-skip-ink: none; }
/* links — teal, underlined, on white/wash only (on lavender or dark use .on-tint / .on-dark variants) */
.link { color: var(--teal); font-weight: 600; font-size: var(--text-small); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur); }
.link:hover { text-decoration-thickness: 2px; }
.on-tint .link, .surface-tint .link { color: var(--plum); }
.on-dark .link, .surface-dark .link { color: var(--mint); }
.link .icon { margin-left: 2px; vertical-align: -.2em; }
::selection { background: var(--lavender-deep); color: var(--plum-deep); }
/* ============ L4 SPACE ============ */
.container { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.container.narrow { width: min(760px, 100% - 48px); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.section { padding-block: var(--section); }
.section.tight { padding-block: var(--section-sm); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gutter); margin-bottom: 48px; }
.section-intro { display: grid; gap: 16px; max-width: 64ch; margin-bottom: 48px; }
.section-intro.center { margin-inline: auto; text-align: center; justify-items: center; }
.stack { display: grid; gap: var(--gutter); }
.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* ============ L2/L5 SURFACES — separation by tint, never by line ============ */
.surface-white { background: var(--surface-raised); }
.surface-wash { background: var(--surface-page); }
.surface-tint { background: var(--surface-tint); }
.surface-mint { background: var(--mint-tint); }
.surface-dark { background: var(--surface-dark); color: var(--white); }
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4 { color: var(--white); }
.surface-dark .lead, .surface-dark .caption, .surface-dark p { color: var(--lavender); }
.hero-wash { background: var(--hero-wash); }
/* ============ L6 IMAGERY ============ */
.ph, .media { border-radius: var(--r); }
.ratio-4-5 { aspect-ratio: 4 / 5; } .ratio-4-3 { aspect-ratio: 4 / 3; } .ratio-16-10 { aspect-ratio: 16 / 10; }
.ratio-16-9 { aspect-ratio: 16 / 9; } .ratio-1-1 { aspect-ratio: 1; } .ratio-3-2 { aspect-ratio: 3 / 2; }
figcaption, .figcaption { margin-top: 10px; font-size: var(--text-caption); color: var(--muted); }
/* ============ L7 ICONS — 24-grid, 1.75px rounded strokes, currentColor ============ */
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; }
.icon.lg { width: 24px; height: 24px; } .icon.sm { width: 16px; height: 16px; }
.icon-pin { height: 1.24em; width: auto; } /* the brand pin as an inline motif */
/* ============ L8 — focus, skip link, prose ============ */
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 4px; }
.surface-dark :focus-visible, .on-dark :focus-visible { outline: var(--focus-ring-dark); }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 16px; border-radius: var(--r-btn); background: var(--plum); color: var(--white); font-weight: 700; }
.skip-link:focus-visible { top: 16px; outline-color: var(--mint); }
/* long-form copy (about page, policies, blog) */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2em; } .prose h3 { margin-top: 1.6em; } .prose h4 { margin-top: 1.4em; }
.prose p, .prose li { color: var(--ink); }
.prose a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul { display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.prose ol { counter-reset: item; display: grid; gap: 8px; }
.prose ol li { position: relative; padding-left: 32px; counter-increment: item; }
.prose ol li::before { content: counter(item); position: absolute; left: 0; top: 0; font-weight: 800; color: var(--teal); }
.prose blockquote { padding: 28px 32px; border-radius: var(--r); background: var(--surface-tint); font-size: var(--text-lead); color: var(--plum-deep); font-weight: 500; }
.prose figure { margin: 2em 0; }
.prose hr { border: 0; height: 48px; margin: 0; } /* a pause, not a line */
.prose small { font-size: var(--text-caption); color: var(--muted); }
/* ============ L9 MOTION ============ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
.section { padding-block: var(--section-sm); }
.section-head { flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
}
/* ===== components.css ===== */
/* ==================================================================
In a Pinch Subs — components (Quiet Tint)
Everything in the Quiet Tint mockup, plus the components a full
site needs, built from the same tokens and rules: tinted surfaces
instead of borders, radius 14 / 10 / 8, Deep Plum headings, teal
links on white, mint only as a dot, an underline or a tint.
Grouped by composition layer, then by component.
================================================================== */
/* ============ L8 COMPONENTS — buttons ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: var(--r-btn); font: 700 16px/1 var(--font); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn.solid { background: var(--plum); color: var(--white); }
.btn.solid:hover { background: var(--plum-deep); }
.btn.tint { background: var(--lavender); color: var(--plum-deep); }
.btn.tint:hover { background: var(--lavender-deep); }
.btn.ghost { background: transparent; color: var(--plum-deep); }
.btn.ghost:hover { background: var(--lavender); }
.btn.inverse { background: var(--white); color: var(--plum-deep); } /* on plum / deep plum */
.btn.inverse:hover { background: var(--lavender); }
.btn.glass { background: rgb(255 255 255 / .14); color: var(--white); } /* secondary on dark */
.btn.glass:hover { background: rgb(255 255 255 / .22); }
.btn:active { transform: translateY(1px); }
.btn.sm { height: 40px; padding: 0 16px; font-size: var(--text-small); }
.btn.lg { height: 56px; padding: 0 28px; font-size: var(--text-body); }
.btn.icon-only { width: 50px; padding: 0; } .btn.icon-only.sm { width: 40px; }
.btn.block { width: 100%; }
.btn .icon { width: 18px; height: 18px; }
.btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .35); border-top-color: var(--white); animation: iaps-spin .8s linear infinite; }
.btn.tint.is-loading::after, .btn.ghost.is-loading::after, .btn.inverse.is-loading::after { border-color: rgb(74 44 130 / .25); border-top-color: var(--plum); }
@keyframes iaps-spin { to { transform: rotate(360deg); } }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* ============ L8 — navigation ============ */
.nav { background: var(--surface-raised); position: relative; z-index: 20; }
.nav.is-sticky { position: sticky; top: 0; }
.nav .container { display: flex; align-items: center; height: 76px; gap: 40px; }
.nav .logo img { height: 36px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; font: 500 15px/1 var(--font); }
.nav-links > li > a, .nav-links summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; color: var(--ink); white-space: nowrap; transition: color var(--dur); }
.nav-links > li > a:hover, .nav-links summary:hover { color: var(--plum); }
.nav-links a[aria-current="page"] { color: var(--plum-deep); font-weight: 600; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-skip-ink: none; }
.nav .cta { margin-left: auto; height: 44px; }
.nav .tel { font-weight: 600; color: var(--plum-deep); }
/* dropdown (no JS): Services
☰