/* ============================================================
GUT YOGA — shared styles v1.0 (design build, 2026-11-08)
Source of truth: spec/design.md. If this file and design.md
disagree, design.md wins.
Use in every page , before this file:
Rules (design.md §1):
- Only the 6 color tokens below. No other colors.
- Body text is Ink, never Sky or Brand.
- Small white text only on Sky deep (.band-deep), never on Sky.
- One main button (.btn) per screen.
============================================================ */
:root {
/* Colors — design.md §1 */
--sky: #639EDA; /* backgrounds, large areas, decoration; white text on it only when large (2.8:1) */
--sky-deep: #3A77BD; /* bands with small white text (4.6:1) */
--brand: #0081DC; /* wordmark, headlines >= 24px, main button (4.1:1 on white: large text only) */
--ink: #1F4E8C; /* all body text (8.3:1 on white, 7.6:1 on Mist) */
--white: #FFFFFF; /* cards */
--mist: #EEF5FC; /* quiet web section backgrounds */
/* Type — design.md §2 */
--font-head: "Poppins", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
/* Shape and spacing — design.md §3 */
--radius-card: 10px;
--radius-photo: 16px;
--gap: 24px;
--page-max: 1040px;
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--white);
color: var(--ink);
font: 400 17px/1.6 var(--font-body);
text-align: left; /* never justified (design.md §2) */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
p { margin: 0 0 1em; }
strong, b { font-weight: 500; }
/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-head); line-height: 1.2; margin: 0 0 .5em; }
/* Wordmark / H1: Poppins 700, -2% tracking, 40–56px, Brand */
h1, .h1 {
font-size: clamp(40px, 6vw, 56px);
font-weight: 700;
letter-spacing: -.02em;
color: var(--brand);
}
/* H2 section: Poppins 600, 28px */
h2, .h2 { font-size: 28px; font-weight: 600; color: var(--ink); }
/* H3 (not specced; Ink, body-weight heading) */
h3, .h3 { font-size: 20px; font-weight: 600; color: var(--ink); }
/* Label (caps): Poppins 600, +6% tracking, 13px */
.label {
font: 600 13px/1.4 var(--font-head);
letter-spacing: .06em;
text-transform: uppercase;
}
/* Small print: Inter 400, 14px */
.small { font-size: 14px; line-height: 1.5; }
/* ---------- Layout ---------- */
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 16px; }
.section { padding: 56px 0; }
.section-mist { background: var(--mist); }
.stack > * + * { margin-top: var(--gap); }
/* ---------- Surfaces ---------- */
.card {
background: var(--white);
border-radius: var(--radius-card);
padding: var(--gap);
}
.section-sky { background: var(--sky); } /* large white text only */
.band-deep { background: var(--sky-deep); color: var(--white); } /* small white text OK */
.band-deep a { color: var(--white); }
.photo { border-radius: var(--radius-photo); overflow: hidden; }
/* ---------- Buttons — design.md §4 ----------
Labels are 20px Poppins 700 so they count as large text:
white on Brand is 4.06:1, which passes only for large text (D41). */
.btn, .btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 12px 30px;
border: 0;
border-radius: 999px;
font: 700 20px/1.2 var(--font-head);
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, box-shadow .15s ease;
}
/* Main button: one per screen */
.btn { background: var(--brand); color: var(--white); }
.btn:hover { background: var(--sky-deep); text-decoration: none; }
/* Secondary button: white, 2px Brand outline, Brand text */
.btn-secondary {
background: var(--white);
color: var(--brand);
box-shadow: inset 0 0 0 2px var(--brand);
}
.btn-secondary:hover { background: var(--mist); text-decoration: none; }
/* ---------- Badge ---------- */
.badge {
display: inline-block;
background: var(--white);
color: var(--ink);
font: 500 14px/1.3 var(--font-body);
padding: 6px 14px;
border-radius: 999px;
}
/* ---------- Logo — design.md §6 (D44) ----------
Files: design/logo/gut-yoga-logo.svg (use on the web), -2048/-512/-192.png (transparent).
Clear space = 14% of the logo width on every side.
Place on White or Mist, not on Sky (the light half would disappear).
Set --logo-size on the element to change the size. */
.logo {
--logo-size: 160px;
display: inline-block;
padding: calc(var(--logo-size) * .14);
line-height: 0;
}
.logo img { width: var(--logo-size); height: auto; }
/* ---------- Infographic — design.md §5 ---------- */
.steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap) 16px;
text-align: center;
}
.steps li:last-child { grid-column: 1 / -1; } /* 5th step centered on phones */
@media (min-width: 760px) {
.steps { grid-template-columns: repeat(5, 1fr); }
.steps li:last-child { grid-column: auto; }
}
.steps .icon {
width: 72px;
height: 72px;
margin: 0 auto 12px;
border-radius: 50%;
background: var(--mist);
border: 2px solid var(--sky);
display: grid;
place-items: center;
}
.steps svg {
width: 32px;
height: 32px;
stroke: var(--brand);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.steps p { margin: 0; font: 500 17px/1.35 var(--font-body); color: var(--ink); }
.steps-result {
margin: 32px 0 0;
text-align: center;
font: 600 24px/1.3 var(--font-head); /* Brand needs >= 24px */
color: var(--brand);
}