/* ========================================================================== TOKENS — LAUREL & LINEN · "PORCELAIN & JADE" -------------------------------------------------------------------------- Every colour, type scale and timing value the site uses lives here. main.css contains no hard-coded colours: change the six values in the BRAND block below and every page re-skins at once. Palette: a warm linen canvas — not white, not black — with deep pine ink, jade as the working accent and terracotta as the second voice. Built for a daylight salon that wants to read as a workshop rather than a spa. Every colour pairing that carries text was measured against WCAG AA. The ratios are written next to the tokens; if you change a brand value, re-check the ones marked (!). ========================================================================== */ :root { /* ═══════════════════════════════════════════════════════════════ BRAND Swap these six values to rebrand. Everything else is derived. */ --brand-canvas: #F1EBE1; /* page background (warm linen) */ --brand-paper: #FCFAF6; /* cards, raised panels (porcelain) */ --brand-pine: #12332B; /* ink, dark bands, footer (deep pine) */ --brand-jade: #1C7259; /* PRIMARY accent: buttons, links, active */ --brand-clay: #C1663F; /* SECONDARY accent: marks, rules, highlights */ --brand-stone: #6E6658; /* muted text and hairlines (warm grey) */ /* ────────────────────────────────────────────────── derived surfaces */ --c-canvas: var(--brand-canvas); --c-canvas-sunk: #E8E1D5; /* wells, inputs, image beds */ --c-paper: var(--brand-paper); --c-pine: var(--brand-pine); --c-pine-2: #1A4136; /* raised panel ON pine */ --c-line: #DED5C6; /* hairline on canvas */ --c-line-soft: #EAE3D7; /* hairline on paper */ --c-line-pine: rgba(241,235,225,.16); /* hairline on pine */ /* Boundary of an INTERACTIVE control — form fields, filter chips. WCAG 1.4.11 wants 3:1 for the edge that tells you a control is a control, and the decorative hairline above manages only 1.4:1. Do not use this for ordinary rules; it is deliberately heavier. (!) 3.4:1 on canvas, 3.8:1 on paper, 3.1:1 on the sunk surface — it has to clear 3:1 against all three, because controls appear on all three. */ --c-line-strong: #8E7D64; /* ────────────────────────────────────────────────────── derived text */ --c-ink: var(--brand-pine); /* headings + body 11.5:1 */ --c-ink-soft: #3E4F47; /* secondary copy 8.0:1 */ --c-ink-mute: var(--brand-stone); /* meta, captions (!) 4.8:1 */ --c-on-pine: var(--brand-canvas); /* body text ON pine 11.5:1 */ --c-on-pine-mute:#A8BDB2; /* meta ON pine 6.9:1 */ --c-on-pine-dim: #8FA89C; /* fine print ON pine 5.4:1 */ /* ──────────────────────────────────────────────────── derived accent --c-jade is safe as text on canvas AND as a fill under white text. That is why it sits where it does; nudging it lighter breaks one of the two. --c-jade-deep is the pressed / hover state. */ --c-jade: var(--brand-jade); /* on canvas (!) 4.9:1 */ --c-jade-deep: #175E49; /* pressed 6.5:1 */ --c-jade-light: #7FD3B6; /* jade ON pine 7.8:1 */ --c-jade-wash: rgba(28,114,89,.08); /* tint fill */ --c-jade-edge: rgba(28,114,89,.24); /* tinted hairline */ --c-jade-lt-wash:rgba(127,211,182,.12); /* jade tint ON pine */ --c-clay: var(--brand-clay); /* decorative fills only */ /* Clay as TEXT. Dark enough to clear AA not just on the canvas (5.4:1) but on a clay-wash chip, which composites to #ECDED1 and would drop a lighter clay to 4.2:1. (!) 4.9 – 6.2:1 */ --c-clay-ink: #9A4526; --c-clay-wash: rgba(193,102,63,.10); /* Hairline drawn inside every photograph, so pale images still have an edge against the linen canvas. */ --c-photo-edge: rgba(18,51,43,.10); /* Status colours, used by the live Open / Closed pill. */ --c-open: #1C7259; --c-closed: #A83A2C; /* The halo the open-now dot pulses through. Decorative only. */ --c-pulse-in: rgba(28,114,89,.40); --c-pulse-out: rgba(28,114,89,0); /* Sheen swept across a filled button on hover. */ --c-sheen: rgba(255,255,255,.26); /* ═══════════════════════════════════════════════════════════ EFFECTS */ /* The arch. This is the signature shape of the design: a fingernail silhouette. It masks hero art, service cards, portfolio tiles and the logo plate, which is what ties the pages together more than the colour does. Elliptical corners, so the curve stays a true arch at any size. */ --arch: 46% 46% 10px 10px / 32% 32% 10px 10px; --arch-soft: 34% 34% 10px 10px / 22% 22% 10px 10px; /* Photo grade. Every photograph passes through .ph, which applies this filter and lays --wash over it. Stock from six different shoots comes out looking like one commission. Hovering restores the original. */ --photo-grade: saturate(.92) contrast(1.03) sepia(.10) brightness(1.02); --wash: linear-gradient(150deg, rgba(193,102,63,.14) 0%, rgba(214,196,168,.16) 45%, rgba(28,114,89,.12) 100%); /* Scrims for type over photography. Two stops, not one: the top band keeps a translucent header legible, the lower wash carries the headline. */ --scrim-band: linear-gradient(180deg, rgba(18,51,43,.82) 0%, rgba(18,51,43,.58) 55%, rgba(18,51,43,.74) 100%); --scrim-head: linear-gradient(180deg, rgba(18,51,43,.72) 0%, rgba(18,51,43,.44) 60%, rgba(18,51,43,.68) 100%); /* Shadows are warm — a neutral grey shadow on a linen page looks dirty. */ --shadow-sm: 0 1px 2px rgba(18,51,43,.07); --shadow: 0 14px 34px -16px rgba(18,51,43,.22); --shadow-lg: 0 40px 80px -40px rgba(18,51,43,.38); /* Paper grain + a woven thread, both inline SVG data URIs: no HTTP request, no binary asset to lose. Held at very low opacity — you should only notice them when they are switched off. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E"); /* ══════════════════════════════════════════════════════════════ TYPE Both families load from Google Fonts in each page's . If you change these, update the tag on all 5 pages too. Fraunces is a variable soft-serif. The site uses its optical-size axis: display sizes get opsz 144 (fine hairlines, high contrast), running text gets opsz 24 (sturdier, readable). That is set in main.css via font-variation-settings — do not replace it with a static serif without removing those rules. */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; --fs-display: clamp(3rem, 7.6vw, 6rem); /* hero wordmark */ --fs-h1: clamp(2.3rem, 5vw, 3.9rem); --fs-h2: clamp(1.85rem, 3.4vw, 2.85rem); --fs-h3: clamp(1.15rem, 1.7vw, 1.45rem); --fs-lede: clamp(1.06rem, 1.3vw, 1.26rem); --fs-body: 1.0625rem; --fs-small: 0.895rem; --fs-fine: 0.815rem; --fs-label: 0.72rem; /* tracked-out eyebrows */ --fs-num: clamp(2.2rem, 4vw, 3.4rem); /* the 01 / 02 / 03 marks */ --lh-display: 0.94; --lh-tight: 1.1; --lh-body: 1.72; --ls-display: -0.03em; /* big serif tracks tight */ --ls-h: -0.018em; --ls-label: 0.2em; /* eyebrows track wide */ /* ════════════════════════════════════════════════════════════ LAYOUT */ --wrap: 1240px; --wrap-wide: 1440px; --wrap-narrow: 720px; --gutter: clamp(1.25rem, 4vw, 3.25rem); --section-y: clamp(4.5rem, 9vw, 8rem); --r-sm: 6px; --r: 14px; --r-lg: 26px; --r-pill: 999px; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-soft: cubic-bezier(.4,0,.2,1); --dur: .5s; --dur-fast: .22s; /* ════════════════════════════════════════════════════════════ MOTION The scroll-reveal system reads these three. --d is the per-element delay: it is set inline in the markup, or written by main.js onto the children of a [data-stagger] container. It defaults to 0 so a lone .reveal animates immediately. */ --dur-reveal: .8s; --stagger: .085s; --d: 0s; --head-h: 78px; } @media (max-width: 900px) { :root { --head-h: 66px; } } /* Respect users who ask for less motion. main.css additionally switches off the scroll reveal, the ticker, the parallax and every transform transition, and main.js skips the counters and the parallax loop entirely. */ @media (prefers-reduced-motion: reduce) { :root { --dur: .001s; --dur-fast: .001s; --dur-reveal: .001s; --stagger: 0s; --d: 0s; } }