/* ========================================================================== VARIABLES — Design system tokens Absolute Cosmetic Clinic -------------------------------------------------------------------------- Single source of truth. Derived from docs/design-analysis.md. Change a value here and it updates everywhere. Never hardcode these values in another stylesheet. ========================================================================== */ :root { /* --------------------------------------------------------------------- COLOUR — Brand green ramp Sampled from the reference and normalised. --green-700 is the primary. --------------------------------------------------------------------- */ --green-900: #0B4A24; --green-800: #0F5C2D; --green-700: #157A3C; /* PRIMARY — buttons, links, active states, icons */ --green-600: #1B8E48; --green-500: #2BA55C; --green-300: #8DD35F; /* DECORATIVE ONLY — 1.9:1 on white, never for text */ --green-200: #C3E6B4; --green-100: #DDF0D5; --green-50: #F1F9EE; /* Semantic aliases — prefer these in component CSS */ --color-primary: var(--green-700); --color-primary-dark: var(--green-800); --color-primary-darker: var(--green-900); --color-primary-light: var(--green-500); --color-accent: var(--green-300); --color-tint: var(--green-50); --color-tint-strong: var(--green-100); /* --------------------------------------------------------------------- COLOUR — Neutrals --------------------------------------------------------------------- */ --ink-900: #111815; /* Headings */ --ink-700: #2C3A33; /* Nav, strong body */ --ink-500: #5A6B62; /* Body copy — 7.1:1 on white */ /* Darkened from #7C8B83, which measured only 3.57:1 on white and so failed AA for the caption-sized text it is used on everywhere. This value also clears 4.5:1 against the tinted --green-50 panels, not just white. */ --ink-400: #63726A; /* Captions, meta — 5.02:1 on white, 4.67:1 on tint */ --line: #E3EAE5; /* Hairlines, card borders */ --line-strong: #CBD8D0; --surface: #FFFFFF; --surface-alt: #FBFDFB; --bg: #F7FAF7; --dark: #1C1F1D; /* Footer */ --dark-soft: #2A2E2B; --color-text: var(--ink-500); --color-heading: var(--ink-900); --color-text-muted: var(--ink-400); --color-text-invert: #FFFFFF; --color-border: var(--line); /* Semantic — forms only */ --danger: #B42318; --danger-bg: #FEF3F2; --success: #157A3C; /* --------------------------------------------------------------------- TYPOGRAPHY Plus Jakarta Sans stands in for the reference's geometric humanist sans. Caveat stands in for the handwritten accents. Fallback stacks are metric-similar to limit layout shift on font swap. --------------------------------------------------------------------- */ /* "Jakarta Fallback" is a metric-matched Arial declared in global.css. It sits FIRST in the fallback chain so the pre-swap text occupies almost the same space as the real font, which is what keeps CLS near zero. */ --font-sans: "Plus Jakarta Sans", "Jakarta Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-script: "Caveat", "Segoe Script", "Bradley Hand", cursive; --font-body: var(--font-sans); --font-heading: var(--font-sans); /* Fluid type scale — clamp(min, preferred, max) */ --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.0625rem; /* 17px */ --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* 18–20 */ --fs-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20–24 */ --fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24–32 */ --fs-3xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); /* 30–44 */ --fs-4xl: clamp(2.125rem, 1.5rem + 2.8vw, 4rem); /* 34–64 */ --fs-h1: var(--fs-4xl); --fs-h2: var(--fs-3xl); --fs-h3: var(--fs-lg); --fs-h4: var(--fs-base); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --lh-tight: 1.05; /* H1 */ --lh-snug: 1.15; /* H2 / H3 */ --lh-normal: 1.45; --lh-relaxed: 1.7; /* Body */ --tracking-tight: -0.02em; /* Headings */ --tracking-normal: 0; --tracking-wide: 0.14em; /* Eyebrows, letterspaced caps */ /* --------------------------------------------------------------------- SPACING SCALE --------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-30: 7.5rem; /* 120 */ /* Fluid section rhythm — 56px mobile to 96px desktop */ --section-y: clamp(3.5rem, 2.2rem + 4vw, 6rem); /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --container-max: 1320px; --container-narrow: 820px; --container-wide: 1440px; --gutter: clamp(1rem, 0.6rem + 1.4vw, 1.25rem); /* Header proportions. Everything inside the pill is positioned from ONE inset value, so the logo, the CTA and the hamburger all sit on the same optical margin. logo height = pill height - (2 x logo inset) cta height = pill height - (2 x cta inset) Change the pill height and the rest follows. */ --header-logo-h: 60px; --header-logo-h-mobile: 48px; --header-cta-h: 52px; /* the filled CTA sits inside the logo's height */ --header-pad: 16px; /* pill block padding, desktop */ --header-pad-mobile: 12px; /* The pill's height is whatever the logo plus its padding needs. These are derived so other things (scroll-padding, hero top padding) can rely on them, rather than being magic numbers that drift out of sync. */ --header-h: calc(var(--header-logo-h) + (var(--header-pad) * 2) + 2px); --header-h-mobile: calc(var(--header-logo-h-mobile) + (var(--header-pad-mobile) * 2) + 2px); /* Total fixed chrome. Anything that needs to clear the top of the page uses THIS, not --header-h, so adding or removing a strip of chrome never means hunting down ten separate calc() expressions again. The utility bar that used to sit above the header pill has been removed, so this is currently just the header. */ --chrome-h: var(--header-h); --chrome-h-mobile: var(--header-h-mobile); /* Right padding is set so the CTA's inset from the right edge equals its inset from the top and bottom — it reads as evenly spaced on 3 sides. */ --header-pad-right: calc(var(--header-pad) + (var(--header-logo-h) - var(--header-cta-h)) / 2); --header-pad-right-mobile: var(--header-pad-mobile); /* --------------------------------------------------------------------- RADIUS --------------------------------------------------------------------- */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 40px; --radius-pill: 999px; /* --------------------------------------------------------------------- SHADOWS — wide, soft, low opacity. Never a hard drop shadow. --------------------------------------------------------------------- */ /* Each step is a STACK, not a single shadow. A lone `0 1px 2px` ends abruptly a couple of pixels from the edge, which reads as a hard line rather than a shadow. Three layers — a tight contact shadow, a mid spread and a wide low-opacity ambient — approximate a real penumbra and fade out instead of stopping. */ --shadow-sm: 0 1px 2px rgba(16, 24, 20, 0.035), 0 4px 10px rgba(16, 24, 20, 0.035), 0 10px 26px rgba(16, 24, 20, 0.030); --shadow-md: 0 1px 2px rgba(16, 24, 20, 0.030), 0 6px 16px rgba(16, 24, 20, 0.045), 0 16px 38px rgba(16, 24, 20, 0.045); --shadow-lg: 0 2px 4px rgba(16, 24, 20, 0.030), 0 10px 24px rgba(16, 24, 20, 0.050), 0 24px 58px rgba(16, 24, 20, 0.065); --shadow-xl: 0 2px 6px rgba(16, 24, 20, 0.030), 0 14px 34px rgba(16, 24, 20, 0.050), 0 32px 80px rgba(16, 24, 20, 0.080); --shadow-green: 0 4px 10px rgba(21, 122, 60, 0.14), 0 12px 28px rgba(21, 122, 60, 0.16); /* --------------------------------------------------------------------- MOTION --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur-base: 180ms; --dur-slow: 320ms; --dur-reveal: 500ms; --transition-base: var(--dur-base) var(--ease-soft); /* Scroll-reveal stagger index. Overridden per element by animations.js; declared here so the token is defined rather than only defaulted. */ --reveal-delay: 0; /* Peak opacity of a falling leaf. Overridden per leaf in components.css, where each value is capped so the leaf never drops the text it passes behind below 4.5:1. */ --leaf-opacity: 0.3; /* How far the before/after strip may extend past the container's right edge. Recomputed from the viewport on .scroller.ba-scroller; declared here so the token is defined rather than only defaulted. */ --ba-bleed: 0px; /* --------------------------------------------------------------------- FOCUS — applied globally in global.css. Do not remove. --------------------------------------------------------------------- */ --focus-ring: 3px solid var(--green-700); --focus-offset: 2px; /* --------------------------------------------------------------------- Z-INDEX — centralised so stacking never becomes guesswork --------------------------------------------------------------------- */ --z-base: 1; --z-decor: 0; --z-sticky: 100; --z-header: 200; --z-mobile-nav: 180; /* below --z-header: the pill stays clickable */ --z-mobile-cta: 150; --z-skip: 400; }