/* ========================================================================== WISTERIA NAILS — BRAND TOKENS -------------------------------------------------------------------------- *** THIS IS THE ONLY FILE THAT NEEDS EDITING TO RE-SKIN THE WHOLE SITE. *** Change the colours / fonts below and every page updates at once. Nothing else in style.css contains a hard-coded colour. Palette: "Rose & Champagne" (warm ivory, blush, dusty rose, gold) ========================================================================== */ :root { /* ---------------------------------------------------------------- COLOUR Swap these five hex values and the site is re-skinned. */ --c-ink: #3B2B31; /* headings + body text (deep espresso-plum) */ --c-rose: #C4818B; /* PRIMARY accent: buttons, links, active nav */ --c-gold: #C9A66B; /* champagne: rules, eyebrows, prices, logo */ --c-bg: #FDF8F5; /* page background (warm ivory) */ --c-blush: #F5E6E3; /* section washes + cards (blush) */ /* Supporting tones — derived from the five above. Usually leave alone. */ --c-ink-soft: #6E5A60; /* muted body copy */ --c-ink-faint: #9A868B; /* captions, meta */ --c-rose-dark: #A96874; /* button hover */ --c-rose-tint: #EFDCDE; /* soft rose fill */ --c-gold-light: #E3CFA8; /* gradient stop for the logo */ --c-gold-dark: #A9843F; /* gold text on light bg (accessible contrast) */ --c-bg-warm: #F8EFEA; /* alternating section background */ --c-line: #EADCD7; /* hairlines + card borders */ --c-deep: #2E2126; /* footer + dark bands */ --c-deep-soft: #C9B4B8; /* muted text on --c-deep */ --c-white: #FFFFFF; --c-open: #E4F0E6; /* "Open now" pill fill */ --c-open-ink: #37693F; /* "Open now" pill text (6.0:1 on --c-open) */ --c-error: #9C5B67; /* form validation text (5.1:1 on white) */ /* Overlay scrims used on top of photography. */ /* Two layers: a top band so the white nav stays legible over a bright photo, plus a left-to-right wash behind the headline. */ --scrim-hero: linear-gradient(180deg, rgba(46,33,38,.55) 0%, rgba(46,33,38,.18) 14%, rgba(46,33,38,0) 26%), linear-gradient(100deg, rgba(46,33,38,.68) 0%, rgba(46,33,38,.48) 45%, rgba(46,33,38,.12) 80%); --scrim-band: linear-gradient(rgba(46,33,38,.66), rgba(46,33,38,.66)); --scrim-page: linear-gradient(rgba(46,33,38,.52), rgba(46,33,38,.52)); /* ------------------------------------------------------------------ TYPE Both families load from Google Fonts in each page's . If you change these, update the tag on all 3 pages too. */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif; --fs-hero: clamp(2.9rem, 7.5vw, 5.4rem); --fs-h1: clamp(2.3rem, 5vw, 3.5rem); --fs-h2: clamp(1.9rem, 3.6vw, 2.75rem); --fs-h3: clamp(1.2rem, 2vw, 1.45rem); --fs-body: 1.0625rem; --fs-small: 0.875rem; --fs-eyebrow: 0.75rem; --lh-tight: 1.12; --lh-body: 1.75; --ls-eyebrow: .22em; /* letter-spacing for the small gold labels */ /* ---------------------------------------------------------------- LAYOUT */ --wrap: 1200px; /* max content width */ --wrap-narrow: 780px; /* max width for reading columns */ --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-y: clamp(4rem, 9vw, 7.5rem); --radius-sm: 6px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 2px 10px rgba(59,43,49,.06); --shadow: 0 10px 34px rgba(59,43,49,.10); --shadow-lg: 0 24px 60px rgba(59,43,49,.16); /* ---------------------------------------------------------------- MOTION One place to slow the whole site down or speed it up. Everything that moves reads its timing from here, so the feel stays consistent. */ --ease: cubic-bezier(.22,.61,.36,1); /* general UI */ --ease-out: cubic-bezier(.16,1,.3,1); /* entrances — long tail */ --ease-soft: cubic-bezier(.4,0,.2,1); /* symmetrical, for loops */ --ease-back: cubic-bezier(.34,1.32,.64,1); /* tiny overshoot, for pops */ --dur-fast: .22s; /* hovers, chips, small state changes */ --dur: .45s; /* the default UI transition */ --dur-slow: .9s; /* image zooms, sheens */ --dur-reveal: .95s; /* scroll-reveal entrances */ --stagger: .08s; /* gap between staggered siblings */ --header-h: 76px; } @media (max-width: 720px) { :root { --header-h: 64px; } } /* Respect users who ask for less motion. Nothing below is decorative-only — the site still works, it just arrives instantly instead of easing in. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: .001s; --dur: .001s; --dur-slow: .001s; --dur-reveal: .001s; --stagger: 0s; } }