/* ========================================================================== HairBi — design layer Loaded after the generated Astro stylesheets. Component rules are scoped under `.hb` (set on ) so they match the generated `[data-astro-cid-*]` specificity and win on source order. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Warm ground — the brand's existing terracotta identity, deepened. */ --color-bg: #FAF6F0; --color-surface: #FFFFFF; --color-text: #241A15; --color-text-muted: #6B5A4E; --color-primary: #8C3A2B; --color-primary-deep: #6E2B1F; --color-secondary: #EDE3D6; --color-accent: #4E5D42; --color-border: #E3D7C7; /* Cool axis — silver is the subject, not the absence of colour. `--silver` is for rules and large type only (3.5:1); `--silver-ink` is the smallest safe size (5.6:1 on --color-bg). */ --silver: #7E858C; --silver-ink: #5C646C; --silver-mist: #C9CDD2; --silver-wash: #EFF1F3; /* Tints used for washes and hairlines. */ --wash-clay: color-mix(in srgb, var(--color-primary) 7%, transparent); --wash-silver: color-mix(in srgb, var(--silver) 12%, transparent); --rule: color-mix(in srgb, var(--color-text) 12%, transparent); --rule-soft: color-mix(in srgb, var(--color-text) 7%, transparent); /* Type ------------------------------------------------------------------ The generated scale topped out at 37px for an h1. Replaced with a fluid scale so display type actually reads as display type. */ --font-heading: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-size-base: clamp(1.0625rem, 1rem + 0.25vw, 1.15rem); --font-body-min-size: var(--font-size-base); --font-size-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); --font-size-xs: 0.8125rem; --font-size-lg: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem); --font-size-xl: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); --font-size-2xl: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem); --font-size-3xl: clamp(2.4rem, 1.5rem + 3.7vw, 4.25rem); --tracking-display: -0.021em; --tracking-tight: -0.011em; --tracking-eyebrow: 0.14em; --leading-display: 1.04; --leading-title: 1.14; --leading-body: 1.62; /* Fraunces carries an optical-size axis, which the browser drives automatically from font-size — that is the axis worth paying for. The SOFT and WONK axes were dropped: carrying them cost 329KB of extra font data for a difference barely visible at these sizes. */ --optical: auto; /* Space — fluid, so the 6rem gaps stop bloating small screens. */ --space-3xs: 0.25rem; --space-2xs: 0.375rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); --space-xl: clamp(2.5rem, 2rem + 2.2vw, 4rem); --space-2xl: clamp(3.5rem, 2.6rem + 3.8vw, 6rem); --space-3xl: clamp(5rem, 3.5rem + 6vw, 9rem); /* Shape */ --border-radius: 10px; --border-radius-lg: 20px; --border-radius-xl: 28px; --radius-pill: 999px; /* Shadows — warm-tinted, never neutral grey on a cream ground. */ --shadow-sm: 0 1px 2px rgba(36, 26, 21, 0.04); --shadow-md: 0 1px 2px rgba(36, 26, 21, 0.04), 0 10px 28px -14px rgba(36, 26, 21, 0.16); --shadow-lg: 0 2px 4px rgba(36, 26, 21, 0.04), 0 24px 56px -24px rgba(36, 26, 21, 0.22); --shadow-style: var(--shadow-md); /* Motion */ --anim-duration: 0.28s; --anim-easing: cubic-bezier(0.22, 0.61, 0.36, 1); --anim-hover-lift: -2px; --anim-hover-scale: 1; --container-max-width: 1220px; --container-narrow: 760px; --header-height: 76px; } /* -------------------------------------------------------------------------- 2. Reset The generated stylesheet ships no box-sizing or margin reset, so every padded box (buttons, inputs, containers) rendered wider and taller than its declared size. -------------------------------------------------------------------------- */ .hb.hb *, .hb.hb *::before, .hb.hb *::after { box-sizing: border-box; } /* No margin reset here on purpose: the generated stylesheet was authored against the UA's default heading and paragraph margins, and zeroing them collapsed spacing on every page that relied on them. Margins are set explicitly per component below instead. */ /* Whitespace text nodes around the generated