/* ========================================================================== YVONNE HENDERSON DECKER — MASTER DESIGN SYSTEM The Signature Image Experience v1 · 2026-05-02 · Ptah 1 -------------------------------------------------------------------------- Locked palette: purple / white / gray. Simple. Stylish. No pure black anywhere. Dark gray (#2D2D2D) is the deepest tone. All three brand directions (Mirror / Quiet Authority / Magnetic Sophisticate) share these tokens. Differentiation happens in typography + layout + voice, NOT color. ========================================================================== */ :root { /* ---------- PALETTE (locked across all 3 directions) ---------- */ /* Purple — primary brand axis */ --purple-deep: #5B2C6F; /* Tim's documented anchor (matches her purple blazer) */ --purple-mid: #7E4B95; /* lighter scale for accents */ --purple-light: #C9B0D6; /* tints for backgrounds */ --purple-pale: #EDE3F2; /* whisper purple, near-white */ --purple-shadow: rgba(91, 44, 111, 0.18); /* Neutrals — purple-tinted, NOT cream. Locked palette: purple / white / gray. */ --paper: #FFFFFF; /* pure white */ --cream: #F8F4FB; /* near-white with whisper of purple — replaces warm cream */ --cream-warm: #F0EEF2; /* purple-tinted neutral for section variation */ /* Section-variation aliases (clearer names, same palette) */ --purple-whisper: #F8F4FB; /* same as --cream — barely-visible purple tint */ --gray-soft: #F0EEF2; /* same as --cream-warm — purple-tinted neutral */ /* Gray scale (no pure black — Yvonne corrected this on call) */ --ink: #2D2D2D; /* deepest tone — body text, headlines on light */ --ink-soft: #4A4A4A; /* secondary headers */ --ink-fade: #6B6B6B; /* body secondary, captions */ --line: #E8E2EC; /* hairline borders, subtle purple tint */ --line-soft: rgba(91, 44, 111, 0.08); /* ---------- TYPOGRAPHY SCALE ---------- */ /* Each direction overrides --serif and --sans with its own pairing. Defaults below = Direction A (The Mirror). */ --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --sans: 'Inter', -apple-system, 'Helvetica Neue', sans-serif; --script: 'Parisienne', 'Yellowtail', cursive; /* Direction C only */ --display-xl: clamp(3rem, 6vw, 5.25rem); /* hero headlines */ --display-lg: clamp(2.25rem, 4vw, 3.5rem); /* section heads */ --display-md: clamp(1.5rem, 2.5vw, 2rem); /* sub heads */ --body-lg: clamp(1.125rem, 1.4vw, 1.25rem); --body: 1rem; --body-sm: 0.875rem; --eyebrow: 0.75rem; /* labels, kickers, caps */ --leading-tight: 1.05; --leading-display: 1.15; --leading-body: 1.65; --tracking-cap: 0.18em; --tracking-eyebrow: 0.25em; /* ---------- SPACING SCALE (8pt-ish) ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6rem; --space-10: 8rem; /* Generous whitespace pressure — antidote to her current dense Wix layout */ --section-padding: clamp(4rem, 8vw, 8rem); --content-max: 1200px; --content-narrow: 720px; --content-prose: 620px; /* ---------- MOTION ---------- */ --ease-elegant: cubic-bezier(0.16, 1, 0.3, 1); --duration-quick: 200ms; --duration-base: 400ms; --duration-slow: 700ms; /* ---------- ELEVATION (subtle only) ---------- */ --shadow-soft: 0 1px 2px var(--purple-shadow), 0 8px 24px rgba(45, 45, 45, 0.04); --shadow-lift: 0 4px 6px var(--purple-shadow), 0 20px 40px rgba(45, 45, 45, 0.08); } /* ========================================================================== DIRECTION OVERRIDES — applied via [data-direction] on or ========================================================================== */ /* Direction A — The Mirror Frame: alignment between who you are and how you're seen Voice: warm, declarative, slightly philosophical Visual: heavy whitespace, single editorial photo, ink-on-paper feel */ [data-direction="mirror"] { --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Inter', sans-serif; --bg: var(--paper); --bg-soft: var(--cream); --accent: var(--purple-deep); --layout-density: airy; /* used by JS or BEM */ --tracking-display: 0.005em; /* near-zero, classical */ } /* Direction B — The Quiet Authority Frame: pain-first. The missed promotion, the dismissive glance, the path out. Voice: pointed, cooler, problem-aware Visual: structured grid, denser, more architectural */ [data-direction="quiet-authority"] { --serif: 'Fraunces', 'Cormorant Garamond', serif; --sans: 'Montserrat', 'Inter', sans-serif; --bg: var(--paper); --bg-soft: #F0EEF2; /* purple-tinted neutral light gray */ --accent: var(--purple-deep); --layout-density: structured; --tracking-display: -0.015em; /* tight, geometric */ } /* Direction C — The Magnetic Sophisticate Frame: Yvonne IS the avatar. Built program from her own type. Voice: warm, expressive, more energy Visual: Yvonne featured, more cream-warmth, optional script accent */ [data-direction="magnetic"] { --serif: 'Playfair Display', 'Cormorant Garamond', serif; --sans: 'DM Sans', 'Inter', sans-serif; --bg: var(--cream); --bg-soft: var(--cream-warm); --accent: var(--purple-deep); --layout-density: warm; --tracking-display: 0; } /* ========================================================================== RESET + BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--sans); font-size: var(--body); line-height: var(--leading-body); color: var(--ink); background: var(--bg, var(--paper)); font-feature-settings: 'kern', 'liga', 'calt'; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: opacity var(--duration-quick) var(--ease-elegant); } a:hover { opacity: 0.65; } button { font: inherit; cursor: pointer; border: none; background: none; } /* ========================================================================== TYPOGRAPHY ========================================================================== */ h1, .display-xl { font-family: var(--serif); font-size: var(--display-xl); line-height: var(--leading-display); letter-spacing: var(--tracking-display, 0); font-weight: 400; margin: 0; color: var(--ink); } h2, .display-lg { font-family: var(--serif); font-size: var(--display-lg); line-height: var(--leading-display); letter-spacing: var(--tracking-display, 0); font-weight: 400; margin: 0 0 var(--space-5); color: var(--ink); } h3, .display-md { font-family: var(--serif); font-size: var(--display-md); line-height: var(--leading-tight); font-weight: 500; margin: 0 0 var(--space-4); color: var(--ink); } p { margin: 0 0 var(--space-4); max-width: var(--content-prose); } p.lede { font-size: var(--body-lg); line-height: 1.55; color: var(--ink-soft); } .eyebrow { font-family: var(--sans); font-size: var(--eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent, var(--purple-deep)); font-weight: 500; display: inline-block; margin-bottom: var(--space-4); } em, .italic { font-style: italic; } /* ========================================================================== LAYOUT ========================================================================== */ .container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding-left: var(--space-5); padding-right: var(--space-5); } .container.narrow { max-width: var(--content-narrow); } .container.prose { max-width: var(--content-prose); } section { padding-top: var(--section-padding); padding-bottom: var(--section-padding); } .section-soft { background: var(--bg-soft, var(--cream)); } .section-purple { background: var(--purple-deep); color: var(--cream); } .section-purple h1, .section-purple h2, .section-purple h3 { color: var(--paper); } /* ========================================================================== BUTTONS ========================================================================== */ .btn { display: inline-block; font-family: var(--sans); font-size: var(--body-sm); letter-spacing: var(--tracking-cap); text-transform: uppercase; font-weight: 500; padding: var(--space-4) var(--space-6); transition: all var(--duration-base) var(--ease-elegant); cursor: pointer; border: 1px solid transparent; } .btn-primary { background: var(--purple-deep); color: var(--cream); } .btn-primary:hover { background: var(--ink); opacity: 1; } .btn-secondary { background: transparent; color: var(--purple-deep); border-color: var(--purple-deep); } .btn-secondary:hover { background: var(--purple-deep); color: var(--cream); opacity: 1; } .btn-ghost { background: transparent; color: var(--ink); border-bottom: 1px solid var(--ink); padding: var(--space-2) 0; } .btn-ghost:hover { color: var(--purple-deep); border-color: var(--purple-deep); opacity: 1; } /* ========================================================================== COMPONENTS — shared primitives ========================================================================== */ .divider { width: 60px; height: 1px; background: var(--accent, var(--purple-deep)); margin: var(--space-5) auto; } .divider-left { margin-left: 0; margin-right: 0; } .archetype-card { background: var(--paper); padding: var(--space-7); border: 1px solid var(--line); transition: all var(--duration-base) var(--ease-elegant); } .archetype-card:hover { border-color: var(--purple-deep); transform: translateY(-2px); box-shadow: var(--shadow-lift); } /* Quiz progress */ .quiz-progress { height: 2px; background: var(--line); margin: var(--space-5) 0; position: relative; overflow: hidden; } .quiz-progress::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: var(--progress, 0%); background: var(--purple-deep); transition: width var(--duration-slow) var(--ease-elegant); } /* Forms */ .field { width: 100%; font-family: var(--sans); font-size: var(--body); padding: var(--space-4); border: 1px solid var(--line); background: var(--paper); color: var(--ink); transition: border-color var(--duration-quick) var(--ease-elegant); } .field:focus { outline: none; border-color: var(--purple-deep); } /* ========================================================================== UTILITIES ========================================================================== */ .center { text-align: center; } .serif { font-family: var(--serif); } .sans { font-family: var(--sans); } .stack > * + * { margin-top: var(--space-4); } .stack-lg > * + * { margin-top: var(--space-6); } .stack-xl > * + * { margin-top: var(--space-8); } .grid-2 { display: grid; gap: var(--space-7); grid-template-columns: 1fr; } @media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .grid-4 { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } @media (min-width: 640px) { .grid-4 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } /* ========================================================================== PRINT (lead magnet PDF rendering) ========================================================================== */ @media print { body { background: var(--paper); } .no-print { display: none !important; } section { page-break-inside: avoid; padding: var(--space-7) 0; } h1, h2, h3 { page-break-after: avoid; } }