/* ============================================================ stephenmcanulla.com - DESIGN TOKENS (the single source of style) ------------------------------------------------------------ This is the one place to change the brand. A seasonal refresh or a colour change is a few edits HERE and the whole site follows. No page or component hard-codes a raw colour; everything points at these tokens. To retint the brand, edit the --sg-* sage lines (or swap in a preset from the bottom). Aesthetic: "Editorial Luxe" - cream base, sage accent. No amber anywhere (amber belongs to LifeOS, kept out of this brand). ============================================================ */ :root{ /* ----- base palette (light, "D Hybrid") ----- */ --cream:#F1EFE8; /* page background */ --cream-2:#E9E5DA; /* secondary surface, sections on cream */ --surface:#ffffff; /* raised cards */ --ink:#1d1b18; /* headings + primary text */ --ink-soft:#534f48; /* paragraphs + secondary text */ --line:rgba(29,27,24,.16); /* hairline border colour (~16% ink) */ --hair:0.5px; /* hairline border width */ /* ----- sage accent family (LIGHT shade = locked default) ----- Change these four lines to retint the entire brand. Mid + Deep presets are kept at the bottom of this file as alternates. */ --sg-rgb:156,170,134; /* sage, used with alpha for glass tints */ --sg-deep:#67734f; /* sage deep, accent text on cream */ --sg-deep-rgb:103,115,79; --sg-light:#bcc6a6; /* sage light, accents on dark surfaces */ /* ----- typography ----- */ --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body:'Jost', system-ui, -apple-system, Segoe UI, sans-serif; --w-regular:400; /* the site uses 400 and 500 only */ --w-medium:500; /* ----- navigation ----- */ --nav-link:rgba(29,27,24,.82); --nav-link-hover:var(--sg-deep); /* ----- spacing + shape ----- */ --edge:40px; /* page edge gutter (header/footer/gallery) */ --section-pad-y:78px; /* section vertical padding (desktop) */ --section-pad-x:48px; /* section horizontal padding (desktop) */ --radius:14px; /* card / media radius */ /* ----- galleries (admin-controllable per view later) ----- */ --gal-cols-d:3; /* desktop masonry columns */ --gal-gap-d:6px; /* desktop gap */ --gal-cols-m:2; /* mobile masonry columns */ --gal-gap-m:5px; /* mobile gap */ /* ----- blog ----- */ --post-width:760px; /* global post content width (a site setting) */ } /* Alternate sage shades. Steve previewed Light / Mid / Deep and locked Light. To switch the whole site later, either edit the --sg-* lines above, or add one of these classes to the element. */ .sh-light{--sg-rgb:156,170,134;--sg-deep:#67734f;--sg-deep-rgb:103,115,79;--sg-light:#bcc6a6} .sh-mid{--sg-rgb:138,151,121;--sg-deep:#566049;--sg-deep-rgb:86,96,73;--sg-light:#aab497} .sh-deep{--sg-rgb:110,124,90;--sg-deep:#46512f;--sg-deep-rgb:70,81,47;--sg-light:#93a079}