/* ========================================================================== ESSIVE — Design Tokens Essive Art · essive.art ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap'); :root { /* ---------- Palette (locked) ---------- */ --warm-white: #FAF8F5; /* page background */ --stone: #F2EEE8; /* surface */ --linen: #D9D2C6; /* borders, dividers */ --soft-bark: #6B6258; /* captions, secondary text */ --charcoal: #1A1A1A; /* primary text, full-bleed sections */ --gold: #C5A572; /* oxidised gold accent (10–15% max) */ --rust: #A04D3D; /* errors only */ /* Tonal helpers (mixed within palette, no new colors) */ --warm-white-80: rgba(250, 248, 245, 0.80); --charcoal-90: rgba(26, 26, 26, 0.90); --charcoal-60: rgba(26, 26, 26, 0.60); --charcoal-12: rgba(26, 26, 26, 0.12); --charcoal-06: rgba(26, 26, 26, 0.06); --gold-30: rgba(197, 165, 114, 0.30); --gold-15: rgba(197, 165, 114, 0.15); /* ---------- Typography ---------- */ --font-display: 'Cormorant Garamond', 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Display scale (Cormorant) */ --t-display-xl: clamp(56px, 7.6vw, 96px); /* hero */ --t-display-l: clamp(44px, 5.2vw, 72px); /* chapter / section opener */ --t-display-m: 44px; /* brandbook chapter title */ --t-display-s: 32px; /* card titles, sub-display */ --t-display-xs: 24px; /* Body scale (Inter) */ --t-body-l: 19px; --t-body-m: 17px; /* base */ --t-body-s: 15px; --t-body-xs: 13px; /* Label (Inter, uppercase, tracked) */ --t-label: 11px; --tracking-label: 0.18em; --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.7; /* ---------- Spacing (8px scale) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px; --s-10: 160px; /* ---------- Layout ---------- */ --gutter: clamp(20px, 4vw, 48px); --max-w: 1440px; --max-w-narrow: 920px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-quiet: cubic-bezier(0.4, 0, 0.2, 1); /* signature */ --d-quick: 0.25s; --d-base: 0.4s; --d-slow: 0.7s; /* ---------- Effects ---------- */ --hairline: 1px solid var(--linen); --shadow-quiet: 0 1px 2px rgba(26, 26, 26, 0.04), 0 8px 24px rgba(26, 26, 26, 0.06); --shadow-lift: 0 2px 6px rgba(26, 26, 26, 0.06), 0 24px 60px rgba(26, 26, 26, 0.12); } /* ========================================================================== Base reset + common atoms ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { font-family: var(--font-body); font-size: var(--t-body-m); line-height: var(--leading-body); color: var(--charcoal); background: var(--warm-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ::selection { background: var(--gold-30); color: var(--charcoal); } /* utilities */ .label { font-family: var(--font-body); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--soft-bark); } .label--gold { color: var(--gold); } .italic-accent { font-style: italic; color: var(--gold); } /* hairline rule */ .rule { height: 1px; background: var(--linen); border: 0; margin: 0; } /* ========================================================================== CSS painted-surface utilities Layered radial gradients + box-shadows simulate palette-knife impasto. ========================================================================== */ .painted { position: relative; background-color: var(--stone); background-image: radial-gradient(120% 80% at 18% 22%, rgba(250,248,245,0.95) 0%, rgba(250,248,245,0) 55%), radial-gradient(90% 70% at 82% 78%, rgba(26,26,26,0.22) 0%, rgba(26,26,26,0) 60%), radial-gradient(60% 50% at 70% 30%, rgba(197,165,114,0.28) 0%, rgba(197,165,114,0) 65%), radial-gradient(140% 100% at 50% 50%, rgba(217,210,198,0.7) 0%, rgba(217,210,198,0) 70%); isolation: isolate; } .painted::before, .painted::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; } /* striated knife marks */ .painted::before { background-image: repeating-linear-gradient( 102deg, rgba(26,26,26,0) 0px, rgba(26,26,26,0) 6px, rgba(26,26,26,0.06) 6px, rgba(26,26,26,0.06) 7px, rgba(26,26,26,0) 14px ), repeating-linear-gradient( 78deg, rgba(250,248,245,0) 0px, rgba(250,248,245,0) 18px, rgba(250,248,245,0.5) 18px, rgba(250,248,245,0.5) 19px, rgba(250,248,245,0) 36px ); opacity: 0.85; mix-blend-mode: soft-light; } /* ridge highlights / shadows -- simulate 3D paint */ .painted::after { background: radial-gradient(40% 30% at 30% 40%, rgba(250,248,245,0.6), transparent 70%), radial-gradient(30% 22% at 65% 60%, rgba(26,26,26,0.18), transparent 70%); filter: blur(8px); mix-blend-mode: overlay; opacity: 0.9; } /* gold flecks (small box-shadow constellation) */ .gold-flecks { position: absolute; width: 1px; height: 1px; border-radius: 50%; background: var(--gold); box-shadow: 14% 22% 0 0.5px var(--gold), 28% 41% 0 0.5px rgba(197,165,114,0.7), 42% 18% 0 0.3px var(--gold), 61% 33% 0 0.6px rgba(197,165,114,0.8), 72% 56% 0 0.4px var(--gold), 18% 64% 0 0.3px rgba(197,165,114,0.6), 36% 78% 0 0.5px var(--gold), 54% 70% 0 0.4px rgba(197,165,114,0.7), 81% 84% 0 0.5px var(--gold), 9% 44% 0 0.4px rgba(197,165,114,0.5); pointer-events: none; }