/* ========================================================================== Spano Soap Co. — design tokens The only file in the project that contains a raw colour value. Contrast ratios are measured, not estimated. See docs/BUILD-PLAN.md §4. ========================================================================== */ :root { /* --- Colour ------------------------------------------------------------ espresso on cream 12.77:1 · ink on cream 12.60:1 · ink on parchment 10.40:1 sage on cream 5.68:1 · sage on parchment 4.69:1 · sage-light on espresso 5.77:1 rose is decorative only and is never used for type or state. */ --espresso: #34261D; --ink: #2E2925; --cream: #F7EFE2; --parchment: #E9D9C4; --sage: #5C604F; --sage-light: #A0A68A; --rose: #B98588; --white: #FFFFFF; /* --- Product accents --------------------------------------------------- Sampled from the bars themselves, not chosen. The Commerce routing in Neil-design OS puts colour in the product's gift: the pressed blossom, the coffee grounds, the sage leaf. Each was walked down its own hue until it carries text on both light grounds. Regenerate with `node tools/extract-accents.js`. */ --accent-cherry-blossom: #8D4C60; /* 5.52 on cream, 4.55 on parchment */ --accent-vanilla-latte: #655337; /* 6.47 on cream, 5.34 on parchment */ --accent-sage-sandalwood: #3E582D; /* 6.97 on cream, 5.76 on parchment */ /* --- Gilt -------------------------------------------------------------- Antique brass, the colour of a pressed label edge. Matte and flat: never a gradient, never a shine. It carries hairlines, ornament and numerals, and it is the whole of the "royal" register. Used at any larger scale it would tip the brand into the luxury cliché the DRD rules out. */ --gilt: #745D2F; /* 5.49 on cream, 4.53 on parchment */ --gilt-on-dark: #C3AA79; /* 6.49 on espresso */ --gilt-line: rgba(116, 93, 47, 0.45); --gilt-hairline: rgba(116, 93, 47, 0.24); --gilt-line-dark: rgba(195, 170, 121, 0.42); /* A deeper espresso, used only as the far end of the two dark bands so they have depth rather than reading as a flat block of ink. */ --espresso-deep: #2B1F17; /* Decorative washes. The rose finally does the job the DRD assigned it, as a floral whisper behind the hero rather than as a colour anyone could name. */ --wash-parchment: rgba(233, 217, 196, 0.70); --wash-rose: rgba(185, 133, 136, 0.10); --wash-clear: rgba(247, 239, 226, 0); /* Laid over the hero ground to pull the garden's cooler greens back toward the brand's warmth. Without it the field reads olive under the header. */ --wash-warm: rgba(252, 240, 222, 0.34); /* Mask alpha, not a colour. In a mask-image the black channel means "keep this pixel", so it is never painted and the no-pure-black rule does not apply to it. Kept here so no raw hex appears in site.css. */ --mask-keep: #000; /* Derived surfaces. Kept as tokens so nothing computes a colour inline. */ --rule: rgba(52, 38, 29, 0.16); --rule-strong: rgba(52, 38, 29, 0.30); --rule-on-dark: rgba(247, 239, 226, 0.22); --cream-veil: rgba(247, 239, 226, 0.92); --espresso-hover: #241a14; --field-shadow: rgba(52, 38, 29, 0.10); /* Form state. Semantic colour is reserved for state and nothing else. */ --error: #8C2F1F; /* 8.26:1 on white, 7.24:1 on cream, 5.98:1 on parchment */ --error-field: #FDF6F4; --success: #3F5D3A; /* 7.40:1 on white, 5.35:1 on parchment */ /* --- Type -------------------------------------------------------------- 1.25 major third, fluid between 360px and 1280px viewports. */ --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --font-body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif; --step-h1: clamp(2.625rem, 1.55rem + 4.78vw, 4rem); /* 42 → 64 */ --step-h2: clamp(1.875rem, 1.29rem + 2.61vw, 2.625rem); /* 30 → 42 */ --step-h3: clamp(1.375rem, 1.18rem + 0.87vw, 1.625rem); /* 22 → 26 */ --step-lead: clamp(1.125rem, 1.03rem + 0.43vw, 1.25rem); /* 18 → 20 */ --step-body: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem); /* 17 → 18 */ --step-small: 0.9375rem; /* 15 */ --step-label: 0.875rem; /* 14, the DRD's floor for small text */ --leading-tight: 1.08; --leading-snug: 1.28; --leading-body: 1.62; --tracking-label: 0.14em; --tracking-eyebrow: 0.2em; --tracking-display: 0.01em; --measure: 64ch; --measure-tight: 46ch; /* --- Space ------------------------------------------------------------- Fluid rather than stepped. Every value interpolates between a 360px and a 1280px viewport, so spacing tracks the screen continuously instead of jumping at a handful of breakpoints. Section bands still step through four distinct sizes, because a page where every band breathes identically reads as a template. */ --space-2xs: clamp(0.3125rem, 0.29rem + 0.11vw, 0.375rem); --space-xs: clamp(0.625rem, 0.58rem + 0.22vw, 0.75rem); --space-sm: clamp(1rem, 0.9rem + 0.43vw, 1.25rem); --space-md: clamp(1.5rem, 1.3rem + 0.87vw, 2rem); --space-lg: clamp(2rem, 1.6rem + 1.74vw, 3rem); --space-xl: clamp(2.75rem, 2.14rem + 2.72vw, 4.5rem); --space-2xl: clamp(3.5rem, 2.28rem + 5.43vw, 7rem); --band-tight: clamp(2.75rem, 1.88rem + 3.9vw, 4.5rem); --band-medium: clamp(3.5rem, 2.63rem + 3.9vw, 6rem); --band-generous: clamp(4rem, 2.78rem + 5.43vw, 7.5rem); --band-tall: clamp(3rem, 2.13rem + 3.9vw, 6.5rem); /* The gutter never falls below a thumb-friendly edge margin and never grows so wide that a phone loses usable width. */ --gutter: clamp(1.125rem, 0.86rem + 1.3vw, 2.5rem); --shell: 1280px; --shell-narrow: 940px; /* --- Shape ------------------------------------------------------------- One generous personality, held everywhere. The DRD proposed 2-6px; the owner asked for friendlier edges, so controls moved to 12px and the whole system followed rather than leaving the page half sharp and half soft. Deliberately not 8px, which is the value nobody chooses. */ --radius-control: 12px; --radius-field: 10px; --radius-container: 10px; --radius-media: clamp(12px, 0.7rem + 0.5vw, 18px); --radius-media-lg: clamp(16px, 0.9rem + 0.7vw, 24px); /* Section bands are sheets laid on the page, not stripes painted across it, so their corners are drawn large enough to read as a curve while scrolling past. */ --radius-band: clamp(22px, 1rem + 2.4vw, 56px); --border-hair: 1px; /* The cream margin between a photograph and its hairline frame. */ --mount: clamp(5px, 0.35rem + 0.4vw, 10px); /* --- Elevation --------------------------------------------------------- Borders before shadows. Shadows are warm rather than grey: a neutral shadow on a cream page reads as dirt. */ --lift: 0 1px 2px rgba(52, 38, 29, 0.05), 0 12px 28px -18px rgba(52, 38, 29, 0.30); --lift-soft: 0 2px 4px rgba(74, 52, 36, 0.05), 0 10px 22px -12px rgba(74, 52, 36, 0.20), 0 30px 60px -34px rgba(74, 52, 36, 0.34); --lift-raised: 0 2px 4px rgba(52, 38, 29, 0.06), 0 20px 40px -20px rgba(52, 38, 29, 0.36); --lift-hover: 0 4px 8px rgba(74, 52, 36, 0.06), 0 18px 34px -14px rgba(74, 52, 36, 0.24), 0 44px 78px -40px rgba(74, 52, 36, 0.40); /* Letterpress. Two hairlines, one light above and one dark below, which is how an impression in paper actually reads. */ --press: 0 1px 0 rgba(255, 252, 246, 0.75), 0 -1px 0 rgba(74, 52, 36, 0.10); --press-inset: inset 0 1px 2px rgba(74, 52, 36, 0.10), inset 0 -1px 0 rgba(255, 252, 246, 0.6); /* --- Paper ------------------------------------------------------------- Applied as background layers rather than as an overlay. An overlay above the bands would either hide behind their colour or sit on top of the type and eat contrast; a background layer paints over the ground and under every word. */ --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.038'/%3E%3C/svg%3E"); --paper-laid: repeating-linear-gradient(0deg, rgba(74, 52, 36, 0.022) 0 1px, rgba(0, 0, 0, 0) 1px 6px), repeating-linear-gradient(90deg, rgba(74, 52, 36, 0.015) 0 1px, rgba(0, 0, 0, 0) 1px 34px); --paper-laid-dark: repeating-linear-gradient(0deg, rgba(247, 239, 226, 0.026) 0 1px, rgba(0, 0, 0, 0) 1px 6px), repeating-linear-gradient(90deg, rgba(247, 239, 226, 0.018) 0 1px, rgba(0, 0, 0, 0) 1px 34px); /* Depth. One perspective value for the whole page so every tilted surface shares a vanishing point. */ --perspective: 1100px; --tilt-max: 4.5deg; --dur-depth: 420ms; --ease-depth: cubic-bezier(0.22, 0.61, 0.36, 1); /* --- Motion ------------------------------------------------------------ Restrained against the commerce-class default. See docs/BUILD-PLAN.md §5. */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 120ms; --dur: 200ms; --dur-reveal: 240ms; /* --- Focus ------------------------------------------------------------- Two tones so the ring survives cream, parchment, photography and espresso. */ --focus-core: var(--espresso); --focus-halo: var(--cream); --tap-min: 44px; --control-min: 48px; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-reveal: 1ms; } }