/* ========================================================================== Hiwa Saeed Yasin — DESIGN TOKENS -------------------------------------------------------------------------- This is the ONLY file in the site that contains a colour value. To change how the whole site looks, change it here. Nothing else. Palette: "warm wool" — cream page, espresso dark bands, brass accent. ========================================================================== */ :root { /* ---- Core palette ------------------------------------------------------ Every pair below has been measured. The ratios are written down because the moment they are not, someone lightens the brass "just a little" and the text quietly stops being readable. --------------------------------------------------------------------- */ --cream: #FAF6F0; /* the page */ --cream-lift: #FFFDFA; /* cards, and bands that need to step forward */ --cream-sink: #F2ECE3; /* bands that need to step back */ --espresso: #2A211C; /* dark bands, header, footer */ --espresso-lift:#3A2E27; /* raised surfaces on a dark band */ --ink: #1F1A17; /* body text on cream — 15.1:1 AAA */ --ink-soft: #6B5D53; /* secondary text on cream — 5.9:1 AA */ --wool: #E8DFD4; /* hairlines, card edges, dividers */ --wool-deep: #D6C9B8; /* a hairline that needs to be seen */ /* Brass has two values and they are not interchangeable. --brass 3.1:1 on cream — BORDERS, RULES, ICONS, LARGE TYPE ONLY. 4.7:1 on espresso — safe as body text on a dark band. --brass-deep 5.7:1 on cream, 5.2:1 on the sunk cream of the footer — this is the one for brass-coloured TEXT on any light ground. Reach for it every time. --brass-deep was #8A6528 while the footer was espresso. Once the footer became light it landed on --cream-sink at 4.46:1, which is under the 4.5 line for the small bold labels that use it, so it was darkened until it cleared on the darkest light ground on the site rather than only on the lightest. */ --brass: #B08542; --brass-deep: #7E5B22; --brass-glow: #D6A85C; /* hover state on dark bands only */ /* Warm text on a dark band — 7.9:1 on espresso. */ --cream-soft: #C4B5A5; /* Status. Used by the availability badge, nowhere else. */ --sage: #4A6B4F; /* in stock */ --clay: #9C5A38; /* made to order */ /* ---- Semantic layer ---------------------------------------------------- Components reference THESE, never the raw palette above. That indirection is what makes the .on-dark switch at the bottom of this file work. --------------------------------------------------------------------- */ --bg: var(--cream); --bg-lift: var(--cream-lift); --bg-sink: var(--cream-sink); --fg: var(--ink); --fg-soft: var(--ink-soft); --rule: var(--wool); --rule-strong: var(--wool-deep); --accent: var(--brass); --accent-text: var(--brass-deep); /* ---- Type -------------------------------------------------------------- Fraunces is a soft serif — warm and slightly irregular, the way a woven edge is. Karla carries the reading. Reference codes are set in the system monospace so the digits line up in a column; it costs nothing to download. The fallbacks are real, not decorative: until the .woff2 files are placed in assets/fonts/ the site renders in Georgia and system-ui and still looks deliberate. --------------------------------------------------------------------- */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Fluid from 360px to 1400px. No typographic media queries anywhere. */ /* Capped at 4.75rem rather than 6rem: the hero headline sits in a column roughly half the page wide, and at 6rem a five-word sentence broke onto four lines and stopped reading as a sentence. */ --fs-hero: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem); --fs-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); --fs-h2: clamp(1.75rem, 1.3rem + 2.0vw, 2.75rem); --fs-h3: clamp(1.15rem, 1.0rem + 0.7vw, 1.5rem); --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.75rem; --lh-tight: 1.05; --lh-heading: 1.18; --lh-body: 1.65; --tracking-eyebrow: 0.16em; --tracking-display: -0.015em; /* large serif needs pulling in */ --tracking-mono: 0.04em; --measure: 66ch; /* ---- Space ------------------------------------------------------------- A 4px base. Named by step so a rhythm is impossible to break by typing an arbitrary 17px somewhere. --------------------------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem; --section-y: clamp(3.5rem, 2rem + 6vw, 8rem); --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 3rem); --container: 1240px; /* ---- Shape ------------------------------------------------------------- Near-square. A 3px radius reads as considered; a 16px radius reads as a web app, and this is a shop selling cloth. --------------------------------------------------------------------- */ --r-sm: 2px; --r-md: 3px; --r-pill: 999px; /* Product photographs are 4:5 — a phone held upright crops to it cleanly. Category tiles and the hero are 3:2, because a folded blanket is wide. */ --ratio-product: 4 / 5; --ratio-wide: 3 / 2; /* ---- Motion ------------------------------------------------------------ */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 160ms; --t-med: 320ms; --t-slow: 700ms; /* ---- Elevation --------------------------------------------------------- Warm-tinted rather than grey. A neutral black shadow on a cream page looks like a hole; a brown one looks like a shadow. --------------------------------------------------------------------- */ --shadow-card: 0 1px 2px rgba(42, 33, 28, 0.04), 0 8px 24px rgba(42, 33, 28, 0.06); --shadow-lift: 0 2px 4px rgba(42, 33, 28, 0.06), 0 18px 48px rgba(42, 33, 28, 0.12); /* ---- The opening wash -------------------------------------------------- The warm layered ground that every page opens on: the hero on the home page, the page head on all the others. It lives here rather than in pages.css because it is a colour, and because both of those blocks must stay identical — the moment they drift, the home page and the rest of the site stop feeling like one place. Two soft radial washes over a diagonal fill rather than one flat colour. A large pale area reads as blank paper without them, and these are warm rather than grey, so the top of the page still feels like a shop selling cloth and not a clinic. --------------------------------------------------------------------- */ --wash-open: radial-gradient(120% 90% at 82% 10%, rgba(176, 133, 66, 0.16) 0%, transparent 58%), radial-gradient(90% 80% at 6% 92%, rgba(160, 90, 70, 0.09) 0%, transparent 60%), linear-gradient(168deg, var(--cream-lift) 0%, #F8F1E7 52%, #F3E8DA 100%); /* ---- Layers ------------------------------------------------------------ */ --z-base: 1; --z-header: 70; --z-drawer: 90; --z-skip: 100; /* ---- Focus ------------------------------------------------------------- Two-tone, so the ring is visible against both the cream page and the espresso bands without needing a separate rule for each. --------------------------------------------------------------------- */ --focus-inner: var(--cream); --focus-outer: var(--brass-deep); --focus-ring: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--focus-outer); } /* ========================================================================== .on-dark -------------------------------------------------------------------------- Re-points the semantic tokens instead of restyling children. A heading inside .on-dark needs no rule of its own — it asks for var(--fg) exactly as it does everywhere else and gets cream back instead of ink. This is why there is no ".on-dark .card__name { color: ... }" anywhere in this project, and why adding a new component needs no dark-mode pass. ========================================================================== */ .on-dark { --bg: var(--espresso); --bg-lift: var(--espresso-lift); --bg-sink: var(--espresso); --fg: var(--cream); --fg-soft: var(--cream-soft); --rule: rgba(176, 133, 66, 0.28); --rule-strong: rgba(176, 133, 66, 0.5); --accent: var(--brass); --accent-text: var(--brass); /* 4.7:1 on espresso — safe here */ --focus-inner: var(--espresso); --focus-outer: var(--brass-glow); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.24); --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.24), 0 18px 48px rgba(0, 0, 0, 0.36); background: var(--bg); color: var(--fg); }