/* ============================================================ Michelle Poe — Colors & Type michellepoe.love Warm, real, classy. Bursting with love. Mid-laugh, golden-hour. ============================================================ */ /* ---------- FONTS ---------- */ /* Display: Instrument Serif — editorial with character (not Fraunces/Playfair). Body: Manrope — clean, humanist, readable, not Inter. Accent: Caveat — hand-feel script used sparingly for "love" / signatures. */ @import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700&family=Caveat:wght@400;500;600;700&display=swap"); :root { /* ============== COLOR ============== The palette comes straight out of her photographs: the coral dress she wears like a signature, the dry-grass California hills at golden hour, the cream brick walls and lace, the warm ink of her hair. ===================================== */ /* —— PRIMARY: Persimmon —— the dress, the lipstick, the heart. Use for hero accents, primary buttons, link underlines, "love". */ --persimmon-50: #FCEDE6; --persimmon-100: #FAD7C6; --persimmon-200: #F4B091; --persimmon-300: #ED8458; --persimmon-400: #E66236; --persimmon-500: #E04A22; /* HERO */ --persimmon-600: #C53A17; --persimmon-700: #9E2D11; --persimmon-800: #75200B; /* —— Terracotta —— deeper, grounded, autumnal */ --terracotta-400: #C9613A; --terracotta-500: #B84A1F; --terracotta-600: #8E3614; /* —— Marigold —— afternoon sun on the hills */ --marigold-300: #ECB67E; --marigold-400: #E68A3F; --marigold-500: #D4711E; /* —— Rose-Gold Dust —— sunset on the mountains, blush */ --rose-300: #E8C5B0; --rose-400: #D7A892; --rose-500: #BC8A72; /* —— Sage —— succulents, eucalyptus, grounded green used quietly, never as primary */ --sage-300: #A8B59B; --sage-500: #6B7D5B; --sage-700: #4A573F; /* —— Sky —— soft horizon, washed-out California sky */ --sky-200: #DCE4E6; --sky-400: #A8B8BD; --sky-600: #6E8087; /* —— Neutrals: warm, never cool —— */ --cream-50: #FBF6EE; /* base page */ --cream-100: #F7F1E8; /* card */ --sand-200: #EDE2CE; /* divider, soft fill */ --sand-300: #E0D2B7; --sand-400: #C8B89A; --stone-500: #8C8170; /* secondary text on cream */ --stone-600: #6B6354; --ink-700: #3A322A; /* body text */ --ink-800: #2A231C; /* headings */ --ink-900: #1F1A14; /* deepest — warm near-black, never pure */ --white: #FFFFFF; /* ============== SEMANTIC TOKENS ============== */ /* Backgrounds */ --bg: var(--cream-50); --bg-elevated: var(--cream-100); --bg-deep: var(--ink-900); /* for inverse sections */ --bg-accent: var(--persimmon-500); /* Foreground / text */ --fg: var(--ink-800); /* primary text */ --fg-soft: var(--ink-700); /* body */ --fg-muted: var(--stone-500); /* meta, captions */ --fg-on-deep: var(--cream-50); /* text on dark sections */ --fg-on-accent: var(--cream-50); /* text on persimmon */ /* Lines / borders */ --line: var(--sand-300); --line-soft: var(--sand-200); --line-deep: var(--ink-700); /* Accents */ --accent: var(--persimmon-500); --accent-hover: var(--persimmon-600); --accent-soft: var(--persimmon-100); /* ============== TYPE ============== */ --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif; --font-body: "Manrope", -apple-system, "Helvetica Neue", system-ui, sans-serif; --font-script: "Caveat", "Homemade Apple", cursive; /* Fluid display sizes — clamped for desktop & mobile */ --t-display: clamp(56px, 9vw, 144px); /* hero monument */ --t-h1: clamp(44px, 6vw, 88px); /* section opener */ --t-h2: clamp(32px, 4vw, 56px); /* subsection */ --t-h3: clamp(24px, 2.5vw, 36px); /* card title */ --t-eyebrow: 13px; /* tracked label */ --t-lede: clamp(20px, 1.6vw, 26px); /* opening paragraph */ --t-body: 17px; --t-small: 14px; --t-caption: 12px; --lh-display: 0.95; --lh-heading: 1.05; --lh-body: 1.6; --lh-tight: 1.25; --tracking-eyebrow: 0.18em; --tracking-display: -0.01em; --tracking-body: 0; /* ============== SPACING ============== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 144px; --space-11: 200px; /* ============== RADIUS ============== */ /* she gets the editorial treatment: sharp corners on big surfaces, soft hand-feel curves on small ones. */ --r-none: 0; --r-1: 2px; --r-2: 4px; --r-pill: 999px; /* ============== SHADOW ============== */ /* Photography-style — soft, warm, never gray. Used very sparingly: real depth comes from imagery, not chrome. */ --shadow-soft: 0 1px 2px rgba(58, 50, 42, 0.04), 0 8px 24px rgba(58, 50, 42, 0.06); --shadow-lift: 0 2px 4px rgba(58, 50, 42, 0.06), 0 16px 40px rgba(58, 50, 42, 0.10); --shadow-deep: 0 30px 80px rgba(58, 50, 42, 0.18); /* ============== MOTION ============== */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* swift, calm */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-1: 120ms; --dur-2: 240ms; --dur-3: 480ms; --dur-4: 800ms; } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================================ TYPE PRESETS — use as classes ============================================================ */ .t-display { font-family: var(--font-display); font-weight: 400; font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--ink-900); text-wrap: balance; } .t-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-display); color: var(--ink-800); text-wrap: balance; } .t-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h2); line-height: var(--lh-heading); color: var(--ink-800); text-wrap: balance; } .t-h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h3); line-height: var(--lh-tight); color: var(--ink-800); } .t-eyebrow { font-family: var(--font-body); font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--persimmon-500); } .t-lede { font-family: var(--font-body); font-weight: 300; font-size: var(--t-lede); line-height: 1.45; color: var(--fg-soft); text-wrap: pretty; } .t-body { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-soft); text-wrap: pretty; } .t-caption { font-family: var(--font-body); font-weight: 500; font-size: var(--t-caption); letter-spacing: 0.04em; color: var(--fg-muted); } .t-script { font-family: var(--font-script); font-weight: 500; color: var(--persimmon-500); } /* Italic is structural in this system — used for emphasis in display. Instrument Serif italic has real character; lean on it. */ .t-display em, .t-h1 em, .t-h2 em, .t-h3 em { font-style: italic; font-weight: 400; } /* Default HTML element styles — so plain markup renders well */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: var(--ink-800); margin: 0 0 0.4em; } h1 { font-size: var(--t-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-display); } h2 { font-size: var(--t-h2); line-height: var(--lh-heading); } h3 { font-size: var(--t-h3); line-height: var(--lh-tight); } p { margin: 0 0 1em; color: var(--fg-soft); } a { color: var(--persimmon-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-1) var(--ease); } a:hover { color: var(--persimmon-700); }