/* ════════════════════════════════════════════════════════════════════════ Chic Nail & Head Spa — Design System (flattened build) GENERATED by scripts/flatten-css.mjs — do not edit by hand. Edit public/tokens/*.css and re-run: node scripts/flatten-css.mjs Google Fonts load via a in each page's , not @import. ════════════════════════════════════════════════════════════════════════ */ /* ── tokens/fonts.css ─────────────────────────────────────────────────── */ /* ── Webfonts ─────────────────────────────────────────────────────────────── Chic Nail & Head Spa loads its two typefaces from Google Fonts. - Cormorant Garamond : high-contrast display serif (the "spa luxe" voice) - Jost : geometric humanist sans (UI, body, labels) These are the brand's chosen faces, not substitutions. If self-hosting is required, download the matching weights and replace this 0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap'); /* ── tokens/colors.css ────────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════════════════ COLOR · Chic Nail & Head Spa · Palette: "Finalist B" ──────────────────────────────────────────────────────────────────────── EVERYDAY palette — Mocha & Cream. Soft, daylight, serene; latte tones, linen, warm wood. This is the brand's default skin (matches the website & interior direction). Mocha #8A6248 · Honey #B98E4F · Espresso #3A2A20 · Cream #FEF7ED RESERVE palette — Bordeaux & Brass. Rich, evening, jewel-box. Used sparingly as a "reserve" accent: gift cards, holiday packaging, VIP touches. Bordeaux #5A2330 · Brass #A8823F · Ink #261A18 ════════════════════════════════════════════════════════════════════════ */ :root { /* ── Warm neutrals (cream → espresso) ─────────────────────────────── */ --cream-50: #FEF7ED; /* page background, lightest */ --cream-100: #F8EFE0; /* sunken surface */ --cream-200: #F0E4D2; /* hairline / subtle border */ --sand-300: #E4D6C0; /* default border */ --taupe-400: #C8B7A0; /* strong border / disabled text */ --stone-500: #9C8B77; /* muted text */ --ink-700: #6A5848; /* secondary text */ --ink-800: #463629; /* body text */ --espresso-900:#3A2A20; /* headings, inverse surfaces */ --espresso-950:#2A1D15; /* deepest ground */ /* ── Mocha — primary (warm wood / latte) ──────────────────────────── */ --mocha-100: #EFE0D3; --mocha-200: #E1CBB8; --mocha-300: #C9A98F; --mocha-400: #A8805F; --mocha-500: #8A6248; /* PRIMARY */ --mocha-600: #6F4E39; /* hover */ --mocha-700: #573D2D; /* press */ /* ── Honey — secondary (brass / gold) ─────────────────────────────── */ --honey-200: #ECDABA; --honey-300: #D9BD8A; --honey-400: #C7A063; --honey-500: #B98E4F; /* SECONDARY / gilt accent */ --honey-600: #9C7639; /* ── Bordeaux & Brass — RESERVE (VIP / gift / evening) ────────────── */ --bordeaux-300:#9C5566; --bordeaux-400:#7A3142; --bordeaux-500:#5A2330; /* RESERVE primary */ --bordeaux-600:#471A26; --ink-bordeaux:#261A18; /* Bordeaux palette near-black */ --brass-400: #BE9A5A; --brass-500: #A8823F; /* RESERVE gilt */ /* ── Functional hues (kept warm & muted to match the palette) ─────── */ --olive-500: #6E7A4F; /* success — muted sage/olive */ --amber-500: #C08A2E; /* warning */ --brick-500: #A8453A; /* error / destructive */ --slate-500: #5E7385; /* info — muted dusty blue */ /* ════════════════════════════════════════════════════════════════ SEMANTIC ALIASES — reference these in components, not the raw scale ════════════════════════════════════════════════════════════════ */ --surface-page: var(--cream-50); --surface-card: #FFFFFF; --surface-sunken: var(--cream-100); --surface-raised: #FFFFFF; --surface-soft: var(--mocha-100); /* gentle fill / hover wash */ --surface-inverse: var(--espresso-900); --surface-reserve: var(--bordeaux-500); --text-strong: var(--espresso-900); --text-body: var(--ink-800); --text-secondary: var(--ink-700); --text-muted: var(--stone-500); --text-disabled: var(--taupe-400); --text-inverse: var(--cream-50); --text-on-accent: var(--cream-50); --border-subtle: var(--cream-200); --border-default: var(--sand-300); --border-strong: var(--taupe-400); --accent: var(--mocha-500); --accent-hover: var(--mocha-600); --accent-press: var(--mocha-700); --accent-soft: var(--mocha-200); --accent-tint: var(--mocha-100); --on-accent: var(--cream-50); --gilt: var(--honey-500); /* gold hairlines, dividers, fine detail */ --gilt-strong: var(--honey-600); --gilt-soft: var(--honey-200); --secondary: var(--honey-500); --secondary-hover: var(--honey-600); --secondary-soft: var(--honey-200); /* Reserve (Bordeaux) — VIP, gift cards, holiday */ --reserve: var(--bordeaux-500); --reserve-hover: var(--bordeaux-600); --reserve-soft: var(--bordeaux-300); --reserve-gilt: var(--brass-500); --success: var(--olive-500); --warning: var(--amber-500); --danger: var(--brick-500); --info: var(--slate-500); --focus-ring: 0 0 0 3px rgba(138, 98, 72, 0.32); /* mocha halo */ } /* ── tokens/typography.css ────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════════════════ TYPOGRAPHY · Chic Nail & Head Spa Cormorant Garamond (display serif) carries the brand voice in headings & the wordmark. Jost (geometric sans) handles UI, body and the tracked uppercase "overline" labels used throughout the product. ════════════════════════════════════════════════════════════════════════ */ :root { /* ── Families ─────────────────────────────────────────────────────── */ --font-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif; --font-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* ── Type scale (px) ──────────────────────────────────────────────── */ --fs-display-1: 72px; /* hero serif */ --fs-display-2: 56px; --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; --fs-overline: 12px; /* uppercase, tracked */ /* ── Weights ──────────────────────────────────────────────────────── */ --fw-light: 300; /* @kind other */ --fw-regular: 400; /* @kind other */ --fw-medium: 500; /* @kind other */ --fw-semibold:600; /* @kind other */ /* ── Line heights ─────────────────────────────────────────────────── */ --lh-tight: 1.05; /* @kind other */ /* display serif */ --lh-snug: 1.2; /* @kind other */ --lh-normal: 1.5; /* @kind other */ --lh-relaxed: 1.65; /* @kind other */ /* long-form body */ /* ── Letter spacing ───────────────────────────────────────────────── */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-overline:0.22em; /* the signature tracked label */ /* ── Semantic roles ───────────────────────────────────────────────── */ --text-display: var(--fw-regular) var(--fs-display-1)/var(--lh-tight) var(--font-display); --text-h1: var(--fw-regular) var(--fs-h1)/var(--lh-snug) var(--font-display); --text-h2: var(--fw-regular) var(--fs-h2)/var(--lh-snug) var(--font-display); --text-h3: var(--fw-medium) var(--fs-h3)/1.3 var(--font-sans); --text-body-role: var(--fw-regular) var(--fs-body)/var(--lh-relaxed) var(--font-sans); } /* Overline / eyebrow label — used above section titles brand-wide */ .ds-overline { font: var(--fw-medium) var(--fs-overline)/1 var(--font-sans); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--accent); } /* ── tokens/spacing.css ───────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════════════════ SPACING & LAYOUT · Chic Nail & Head Spa 4px base unit. Generous whitespace is core to the brand — sections breathe. ════════════════════════════════════════════════════════════════════════ */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Layout */ --container-max: 1200px; --container-prose: 680px; --gutter: 24px; --section-y: 50px; /* vertical rhythm between page sections */ } /* ── tokens/effects.css ───────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════════════════ EFFECTS · Chic Nail & Head Spa Radii are soft and rounded. Shadows are warm-tinted, low and diffuse — never hard or gray. Motion is gentle and easing-out (calm, never bouncy). ════════════════════════════════════════════════════════════════════════ */ :root { /* ── Corner radii ─────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; /* default card */ --radius-xl: 28px; /* feature panels, imagery */ --radius-2xl: 40px; --radius-pill: 999px; /* buttons, tags, chips */ /* ── Borders ──────────────────────────────────────────────────────── */ --border-hairline: 1px solid var(--border-subtle); --border-default-line: 1px solid var(--border-default); /* ── Shadows — warm espresso tint, soft & diffuse ─────────────────── */ --shadow-xs: 0 1px 2px rgba(36, 31, 29, 0.05); --shadow-sm: 0 2px 8px rgba(36, 31, 29, 0.06); --shadow-md: 0 8px 24px rgba(36, 31, 29, 0.08); --shadow-lg: 0 18px 48px rgba(36, 31, 29, 0.10); --shadow-xl: 0 32px 72px rgba(36, 31, 29, 0.14); /* ── Motion ───────────────────────────────────────────────────────── */ --dur-fast: 150ms; /* @kind other */ --dur: 240ms; /* @kind other */ --dur-slow: 400ms; /* @kind other */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ /* gentle settle */ --ease-soft: cubic-bezier(0.33, 0, 0.2, 1); /* @kind other */ } /* ── tokens/base.css ──────────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════════════════ BASE · Chic Nail & Head Spa Light element resets + brand defaults. Sets the warm page canvas, body type and serif headings so any page that links styles.css feels on-brand out of the box. ════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--surface-page); color: var(--text-body); font: var(--fw-regular) var(--fs-body)/var(--lh-relaxed) var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; color: var(--text-strong); font-family: var(--font-display); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-family: var(--font-sans); font-weight: var(--fw-medium); letter-spacing: 0; } h4 { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: var(--fw-medium); letter-spacing: 0; } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } ::selection { background: var(--accent-soft); color: var(--espresso-900); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }