/* ========================================================================== APA DESIGN TOKENS Advanced Paramedical Aesthetics - Santa Barbara -------------------------------------------------------------------------- Every value the site uses lives here. Component CSS may only reference semantic tokens (--color-text, --space-m, ...), never raw palette steps, so the whole site can be re-themed from this one file. Palette DNA: the logo is a single continuous hairline (charcoal) with a wide-tracked wordmark in warm gray #545454. Everything else is derived from Santa Barbara: sand (Shell), ocean light (Marine), and the pigment Ella mixes to match skin (Clay + the seven Pigment swatches). ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. PALETTE - raw scales. Do not use these directly in components. --------------------------------------------------------------------- */ /* Shell: warm sand neutrals. The paper the site is printed on. */ --shell-50: #fdfbf8; --shell-100: #f8f3ec; --shell-200: #f1e9de; --shell-300: #e6dacb; --shell-400: #d4c4b0; --shell-500: #b9a48b; --shell-600: #96806a; --shell-700: #6e5c4a; --shell-800: #4a3d31; --shell-900: #2b241d; /* Ink: warm charcoal. --ink-500 is the exact wordmark gray from the logo. */ --ink-900: #221f1c; --ink-800: #302b27; --ink-700: #3d3833; --ink-600: #4a453f; --ink-500: #545454; /* logo wordmark, do not alter */ --ink-400: #6f6862; --ink-300: #8c837b; --ink-200: #b4aca4; --ink-100: #d8d2cb; /* Marine: Pacific light off Goleta. Cool, grayed, never medspa-teal. */ --marine-50: #eef3f3; --marine-100: #d8e4e4; --marine-200: #b3c9c9; --marine-300: #86a6a8; --marine-400: #5a8085; --marine-500: #3e6268; --marine-600: #2f4e54; --marine-700: #243c42; --marine-800: #1b2e33; --marine-900: #142428; /* Clay: pigment in the cup. The warm half of the brand. */ --clay-50: #fbf1ec; --clay-100: #f5dfd3; --clay-200: #e9c2af; --clay-300: #d89f84; --clay-400: #c47d5e; --clay-500: #a85f41; --clay-600: #8c4c33; --clay-700: #6f3b28; /* ------------------------------------------------------------------- Pigment recipe: the seven colours Ella names on camera when she mixes a match ("your skin is not one colour, it is a recipe"). Used only in the pigment-rule divider and the swatch motif. ------------------------------------------------------------------- */ --pigment-1-olive: #7d7a4e; /* olive first */ --pigment-2-yellow: #d9a03c; /* more yellow than you would believe */ --pigment-3-red: #a5321f; /* one drop, where blood sits close */ --pigment-4-vein: #5e7f6b; /* the green in the veins */ --pigment-5-gold: #c89a5b; /* gold over the knuckles */ --pigment-6-pink: #d98c86; /* pink at the joints */ --pigment-7-blend: #c9a184; /* and the one colour they become */ /* --------------------------------------------------------------------- 2. SEMANTIC COLOUR - the only colour tokens components may use. Every text pair below is verified WCAG AA (see BRAND-NOTES.md). --------------------------------------------------------------------- */ --color-bg: var(--shell-50); /* page ground */ --color-bg-alt: var(--shell-100); /* alternating band */ --color-bg-sunk: var(--shell-200); /* deeper band, quotes */ --color-surface: #ffffff; /* cards */ --color-surface-alt: var(--shell-100); --color-surface-ink: var(--marine-800); /* dark band */ --color-surface-ink-alt: var(--marine-900); --color-text: var(--ink-900); /* 15.9:1 on bg */ --color-text-muted: #5e5852; /* 6.8:1 on bg */ --color-text-subtle: var(--ink-400); /* 5.3:1 on bg */ --color-text-invert: var(--shell-50); /* 13.7:1 on surface-ink */ --color-text-invert-muted: var(--marine-200); /* 8.2:1 on surface-ink */ --color-border: var(--shell-300); /* hairlines, decorative */ --color-border-strong: var(--ink-400); /* inputs, focusable edges */ --color-hairline: var(--ink-900); /* the logo line weight */ --color-brand: var(--marine-600); /* 8.7:1 on bg */ --color-brand-deep: var(--marine-800); --color-brand-soft: var(--marine-100); --color-brand-hover: var(--marine-700); --color-accent: var(--clay-600); /* 6.4:1 on bg - link + rule colour */ --color-accent-quiet: var(--clay-500); --color-accent-soft: var(--clay-100); --color-accent-on-dark: var(--clay-200); /* 8.6:1 on surface-ink */ --color-on-brand: #ffffff; /* 9.0:1 on --color-brand */ --color-on-accent: #ffffff; /* 6.6:1 on --color-accent */ --color-focus: var(--marine-600); --color-focus-ring: var(--clay-500); --color-selection: var(--clay-100); /* --------------------------------------------------------------------- 3. TYPOGRAPHY Two families, self-hosted as subset variable WOFF2 (64KB + 17KB, latin only, no third-party requests). Fraunces (opsz + wght): optical-size serif. At display sizes its hairlines match the logo's single-line stroke; at text sizes it stays sturdy. Figtree (wght): humanist sans, tall x-height, and its light wide-tracked capitals are the closest match to the logo wordmark. --------------------------------------------------------------------- */ --font-display: "Lato Display", "Lato", "Helvetica Neue", Arial, sans-serif; --font-body: "Figtree Variable", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Fraunces carries an optical-size axis (opsz 9-144). We never pin it by hand: `font-optical-sizing: auto` lets the browser map opsz to the rendered size, so hero type gets hairline strokes that echo the logo's single line, and 15px body serif stays sturdy. */ /* Fluid type scale. Ratio 1.2 at 360px growing to 1.28 at 1440px. */ --fs-micro: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem); --fs-xs: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem); --fs-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem); --fs-base: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem); --fs-md: clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem); --fs-lg: clamp(1.1875rem, 1.09rem + 0.44vw, 1.375rem); --fs-xl: clamp(1.375rem, 1.22rem + 0.72vw, 1.75rem); --fs-2xl: clamp(1.625rem, 1.36rem + 1.24vw, 2.375rem); --fs-3xl: clamp(1.9375rem, 1.5rem + 2.03vw, 3.125rem); --fs-4xl: clamp(2.25rem, 1.55rem + 3.24vw, 4rem); --fs-hero: clamp(2.375rem, 1.55rem + 3.8vw, 4.25rem); --lh-tight: 1.06; --lh-display: 1.12; --lh-snug: 1.28; --lh-normal: 1.5; --lh-relaxed: 1.66; --track-hero: -0.022em; --track-tight: -0.012em; --track-none: 0em; --track-wide: 0.06em; --track-caps: 0.16em; /* the wordmark tracking */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --measure: 66ch; /* body copy */ --measure-tight: 46ch; /* lead paragraphs, hero sub */ --measure-wide: 78ch; /* --------------------------------------------------------------------- 4. SPACE - a fluid 4px-rooted scale. Section rhythm uses -2xl/-3xl. --------------------------------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem; --space-xl: clamp(2.5rem, 2rem + 2vw, 3.5rem); --space-2xl: clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem); --space-3xl: clamp(4.25rem, 3.1rem + 4.6vw, 7rem); --space-4xl: clamp(5.5rem, 3.8rem + 6.8vw, 10rem); --gutter: clamp(1.25rem, 0.85rem + 2vw, 3rem); --grid-gap: clamp(1.5rem, 1rem + 2.2vw, 3rem); /* --------------------------------------------------------------------- 5. LAYOUT --------------------------------------------------------------------- */ --container: 75rem; /* 1200px, default */ --container-wide: 85rem; /* 1360px, full-bleed-ish sections */ --container-text: 44rem; /* 704px, prose column */ --container-narrow: 34rem; /* 544px, forms, capsules */ --header-h: 4.5rem; /* --------------------------------------------------------------------- 6. RADII - deliberately small. Editorial, not app-like. The arch is the one expressive shape: a window onto the ocean. --------------------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px; --radius-arch: 46% 46% var(--radius-md) var(--radius-md) / 26% 26% 0 0; /* --------------------------------------------------------------------- 7. SHADOWS - warm-tinted, low, never gray-blue. --------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(43, 36, 29, 0.05); --shadow-sm: 0 2px 8px -2px rgba(43, 36, 29, 0.08); --shadow-md: 0 14px 30px -14px rgba(43, 36, 29, 0.18); --shadow-lg: 0 34px 64px -34px rgba(43, 36, 29, 0.26); --shadow-ring: 0 0 0 1px var(--color-border); /* --------------------------------------------------------------------- 8. MOTION - short, eased, and fully removable. --------------------------------------------------------------------- */ --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 560ms; --ease-out: cubic-bezier(0.22, 0.8, 0.28, 1); --ease-in-out: cubic-bezier(0.62, 0.02, 0.28, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); --lift: translateY(-2px); /* --------------------------------------------------------------------- 9. Z-INDEX --------------------------------------------------------------------- */ --z-base: 1; --z-sticky: 50; --z-header: 100; --z-menu: 200; --z-skip: 999; /* --------------------------------------------------------------------- 10. SIGNATURE GRADIENTS - the pigment recipe, restrained. --grad-recipe is the seven pigments resolving into one skin tone. It is only ever used as a 2-3px rule or a 1px hairline, never as a background fill. --------------------------------------------------------------------- */ --grad-recipe: linear-gradient( 90deg, var(--pigment-1-olive) 0%, var(--pigment-2-yellow) 12%, var(--pigment-3-red) 22%, var(--pigment-4-vein) 33%, var(--pigment-5-gold) 44%, var(--pigment-6-pink) 55%, var(--pigment-7-blend) 78%, var(--pigment-7-blend) 100%); /* The divider version: seven discrete measured drops on the left that resolve into one blended skin tone on the right. This is the brand's central idea (a colour match is a recipe) drawn as a 2px rule. */ --grad-recipe-chart: linear-gradient( 90deg, var(--pigment-1-olive) 0 6%, var(--pigment-2-yellow) 6% 12%, var(--pigment-3-red) 12% 18%, var(--pigment-4-vein) 18% 24%, var(--pigment-5-gold) 24% 30%, var(--pigment-6-pink) 30% 36%, var(--pigment-6-pink) 36%, var(--pigment-7-blend) 72%, var(--pigment-7-blend) 100%); /* The same idea at 4% opacity: a page-wide warm wash used behind the hero and the CTA band. Reads as light on sand, not as a gradient. */ --wash-sand: radial-gradient( 120% 90% at 88% 4%, rgba(216, 159, 132, 0.20) 0%, rgba(216, 159, 132, 0) 58%), radial-gradient( 100% 80% at 4% 96%, rgba(134, 166, 168, 0.20) 0%, rgba(134, 166, 168, 0) 62%); } /* -------------------------------------------------------------------------- Reduced motion. Every duration collapses; nothing translates or scales. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --lift: none; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }