/* ========================================================================== BRAND TOKENS -------------------------------------------------------------------------- THIS IS THE ONLY FILE YOU EDIT TO RE-BRAND THE SITE. The MWGDS palette below was sampled directly from your Canva logo ("JEMdesigns" page 1) — the gold ring, the gold splatter and the deep olive-green wordmark. These are your real brand colors, not guesses. One deliberate exception: your true gold (#A07828) only reaches 3.8:1 contrast on cream, which fails accessibility for text. So gold appears in two tokens — --c-gold is the true brand gold, used for decorative things (the hero wash, rules, large display). --c-accent is a slightly deeper gold used anywhere text is involved (links, buttons, small labels) so it stays legible. Visually they read as the same gold. ========================================================================== */ :root { /* ---- MWGDS brand colors — sampled from your Canva logo ---- */ --c-bg: #FAF8F0; /* page background — warm cream */ --c-surface: #FFFFFF; /* cards, panels */ --c-surface-alt: #F2EEE0; /* alternating bands — gold-tinted */ --c-ink: #44571F; /* headlines — deep olive green */ --c-body: #4C5540; /* body copy */ --c-muted: #6E7560; /* captions, meta */ --c-line: #E4DCC6; /* hairlines, borders */ --c-accent: #8C6820; /* text-safe gold — links, buttons */ --c-accent-deep: #6E5218; /* accent hover */ --c-accent-soft: #F4EBD2; /* accent tint background */ --c-gold: #A07828; /* TRUE brand gold — decorative only */ --c-gold-pale: #E8D890; /* pale gold highlight from the splatter */ --c-sage: #506828; /* the logo wordmark green */ /* ---- Typography ---- Your logo pairs a high-contrast serif ("MidWest") with a wide-tracked sans ("GRAPHIC DESIGN STUDIO"). Cormorant Garamond and Jost are the closest free web equivalents. If you know the exact Canva font names, tell me and I'll match them properly. */ --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --f-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fs-hero: clamp(2.6rem, 6.5vw, 5rem); --fs-h1: clamp(2.1rem, 4.5vw, 3.4rem); --fs-h2: clamp(1.6rem, 3vw, 2.4rem); --fs-h3: clamp(1.15rem, 1.8vw, 1.4rem); --fs-body: clamp(1rem, 1.05vw, 1.09rem); --fs-small: 0.875rem; --fs-micro: 0.76rem; /* ---- Spacing, shape, motion ---- */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --sp-5: 4rem; --sp-6: 6.5rem; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --shadow-sm: 0 1px 3px rgba(28, 43, 39, 0.06); --shadow-md: 0 8px 28px rgba(28, 43, 39, 0.09); --shadow-lg: 0 20px 60px rgba(28, 43, 39, 0.13); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --maxw: 1180px; --maxw-text: 68ch; } /* ========================================================================== SISTERS AT HEART — theme override Applied with . Softer and warmer than MWGDS so the two companies read as siblings, not clones. Replace once Sisters at Heart has its own real brand kit. ========================================================================== */ [data-theme="sisters"] { --c-bg: #FDF8F6; --c-surface: #FFFFFF; --c-surface-alt: #F7EAE5; --c-ink: #3A2A2E; --c-body: #5C4A4E; --c-muted: #8A7579; --c-line: #EBD9D3; --c-accent: #B5717C; --c-accent-deep: #97555F; --c-accent-soft: #F6E4E5; --c-sage: #9CAF9F; } /* ========================================================================== THE COLLECTIVE — theme override Applied with . Deliberately more neutral and corporate than either studio, because this section is built to lift onto its own domain when the S-corp / C-corp is formed. ========================================================================== */ [data-theme="collective"] { --c-bg: #F7F7F6; --c-surface: #FFFFFF; --c-surface-alt: #ECECEA; --c-ink: #14181A; --c-body: #454C4F; --c-muted: #767D80; --c-line: #DEDEDB; --c-accent: #2F5D62; --c-accent-deep: #21454A; --c-accent-soft: #E1EBEC; --c-sage: #C4714B; }