/* ============================================================ AI WITH MEGAN — Brand Tokens & Components The single source of truth for the visual system. Quiet luxury · editorial calm · warm minimalism. ============================================================ */ /* ---- Fonts (loaded in HTML ) ------------------------- Playfair Display — display moments only Newsreader — editorial running copy + italics (default) Lora / Spectral — alternate body serifs (tweakable) Montserrat — kickers, labels, UI, fine print ------------------------------------------------------------- */ :root { /* — Color: the locked palette — */ --cream: #FAF8F3; /* canvas, dominant */ --cream-warm: #F4EFE7; /* alt sections, cards, photo mats */ --cream-deep: #ECE4D7; /* subtle inset / hairline fills */ --forest: #2F4036; /* primary text, headers, banner */ --forest-2: #3E4F39; /* alt green (tweakable) */ --terracotta: #C97A63; /* accent only — marker, numerals, CTA */ --terracotta-d: #B7654E; /* terracotta hover / fine accent */ --sage: #C4CFB9; /* hairline dividers only */ --espresso: #4B3A34; /* fine print fallback only — avoid */ /* derived ink tints */ --ink: var(--forest); --ink-70: color-mix(in oklab, var(--forest) 70%, var(--cream)); --ink-55: color-mix(in oklab, var(--forest) 55%, var(--cream)); --ink-40: color-mix(in oklab, var(--forest) 40%, var(--cream)); /* — Type — */ --font-display: "Playfair Display", Georgia, serif; --font-serif: "Newsreader", Georgia, "Times New Roman", serif; /* tweakable */ --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* fluid type scale (editorial, generous) */ --fs-mega: clamp(2.6rem, 1.6rem + 4.4vw, 5rem); --fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); --fs-h3: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); --fs-body: clamp(1.02rem, 0.96rem + 0.3vw, 1.18rem); --fs-small: 0.92rem; --fs-kicker: 0.72rem; --lh-tight: 1.16; --lh-snug: 1.35; --lh-body: 1.62; /* — Spacing & form — */ --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --hair: 1px; --maxw: 1120px; --gutter: clamp(1.4rem, 1rem + 3vw, 4.5rem); --shadow-soft: 0 18px 50px -34px rgba(47,64,54,.45); } /* alt-green theme hook (tweakable) */ :root.theme-forest2 { --forest: var(--forest-2); } /* ---- Reset-ish base ---------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "liga" 1, "kern" 1; } p { text-wrap: pretty; } /* ---- Typographic roles ------------------------------------- */ .display { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--forest); } .feature { font-family: var(--font-serif); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -0.005em; color: var(--forest); } .feature.italic, .feature em { font-style: italic; } .kicker { font-family: var(--font-sans); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-55); } .subhead { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.01em; color: var(--ink-70); } .caption { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--ink-55); letter-spacing: 0.01em; } /* pull-quote — serif italic, terracotta, sparing */ .pullquote { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--terracotta); line-height: var(--lh-snug); } /* ---- The signature: terracotta marker underline ------------ */ /* a soft, slightly organic highlight under ONE key word */ .marker { position: relative; white-space: nowrap; color: inherit; } .marker::after { content: ""; position: absolute; left: -0.04em; right: -0.04em; bottom: 0.04em; height: 0.34em; background: var(--terracotta); opacity: 0.42; border-radius: 2px 3px 2px 4px / 4px 3px 5px 2px; z-index: -1; transform-origin: left center; } /* The marker always renders (it is the signature — never gate it behind JS). A gentle grow plays only when armed AND in view; if the animation clock stalls, the underline is still fully present. */ .marker.draw.is-armed.in::after { animation: marker-grow .7s cubic-bezier(.2,.7,.2,1) both; } @keyframes marker-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* terracotta key word (no underline) */ .key { color: var(--terracotta); } .key-italic { color: var(--terracotta); font-style: italic; } /* ---- Dividers ---------------------------------------------- */ .rule { border: 0; height: var(--hair); background: var(--sage); margin: 0; } .rule-forest { background: color-mix(in oklab, var(--forest) 22%, transparent); } .rule-short { width: 56px; height: 2px; background: var(--terracotta); border-radius: 2px; } /* ---- Editorial banner -------------------------------------- */ .banner { background: var(--forest); color: var(--cream); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.9rem clamp(1.2rem, 3vw, 2.4rem); } .banner .wordmark { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.78rem; color: var(--cream); } .banner .doctype { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.66rem; color: color-mix(in oklab, var(--cream) 72%, var(--forest)); } /* ---- Callout box ------------------------------------------- */ .callout { background: var(--cream); border: var(--hair) solid color-mix(in oklab, var(--forest) 34%, transparent); border-radius: var(--radius); padding: 1.2rem 1.4rem; } .callout .callout-label { font-family: var(--font-sans); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracotta); display: block; margin-bottom: 0.5rem; } /* ---- Number card ------------------------------------------- */ .numcard { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem 1.3rem; align-items: start; } .numcard .num { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem); line-height: 0.9; color: var(--terracotta); } /* ---- Button / CTA ------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-sans); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); background: var(--terracotta); border: none; border-radius: 999px; padding: 0.78rem 1.5rem; cursor: pointer; text-decoration: none; transition: background .25s ease, transform .25s ease; } .btn:hover { background: var(--terracotta-d); transform: translateY(-1px); } .btn-ghost { color: var(--forest); background: transparent; border: var(--hair) solid color-mix(in oklab, var(--forest) 40%, transparent); } .btn-ghost:hover { background: color-mix(in oklab, var(--forest) 6%, transparent); transform: translateY(-1px); } /* ---- Photo frame ------------------------------------------- */ .photo { border-radius: var(--radius); overflow: hidden; background: var(--cream-warm); box-shadow: var(--shadow-soft); } image-slot { border-radius: var(--radius); } /* ---- Layout helpers ---------------------------------------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(3rem, 2rem + 6vw, 6.5rem); } .section--warm { background: var(--cream-warm); } .stack > * + * { margin-top: var(--flow, 1rem); } /* scroll-reveal — SAFE: content is always fully opaque. Only a gentle rise is animated, so a stalled/throttled animation clock can never hide content. */ .reveal.is-armed { transform: translateY(16px); } .reveal.is-armed.in { transform: none; transition: transform .7s cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion: reduce) { .reveal.is-armed, .reveal.is-armed.in { transform: none; transition: none; } .marker.draw.is-armed.in::after { animation: none; } }