/* ============================================================ BASE — design tokens, reset, typography, shared primitives ============================================================ */ :root { /* ---- Palette: rose gold / blush / ivory / cream / champagne ---- */ --ivory: #FDFBF7; --cream: #F8F1E7; --cream-deep: #F1E6D8; --soft-white: #FFFDFB; --blush: #F6DEDA; --blush-deep: #EBC4BE; --blush-glow: #FBEAE6; --rose: #B76E79; /* rose gold, primary accent */ --rose-light: #D69AA2; --rose-deep: #96545F; --champagne: #E3CDA4; --champagne-deep:#C6A461; --gold-line: #D9BE8F; --ink: #4A3A38; /* warm near-black for body copy */ --ink-soft: #7C6A66; --ink-faint: #A2908B; /* ---- Gradients ---- */ --grad-rose: linear-gradient(135deg, #C97F8A 0%, #B76E79 45%, #96545F 100%); --grad-gold: linear-gradient(120deg, #E9D6B0 0%, #C6A461 50%, #E3CDA4 100%); /* The shimmer animates this gradient's position, so every stop has to hold up against cream on its own — hence the deeper gold at 55% rather than a pale champagne that would wash the name out mid-cycle. */ --grad-metal: linear-gradient(100deg, #A85F6B 0%, #C9838F 24%, #AC8339 55%, #B76E79 80%, #96545F 100%); /* ---- Type ---- */ --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif; --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-hand: "Caveat", "Bradley Hand", cursive; /* ---- Fluid type scale ---- */ --t-hero: clamp(2.85rem, 9.5vw, 8.5rem); --t-h2: clamp(1.85rem, 4.6vw, 3.65rem); --t-h3: clamp(1.4rem, 2.5vw, 2.05rem); --t-lede: clamp(1.02rem, 1.65vw, 1.3rem); --t-body: clamp(1rem, 1.35vw, 1.12rem); --t-small: clamp(0.78rem, 1vw, 0.86rem); --t-tag: clamp(0.66rem, 0.95vw, 0.76rem); /* ---- Shadows: warm-tinted, never neutral grey ---- */ --sh-sm: 0 2px 8px rgba(120, 78, 72, 0.07); --sh-md: 0 10px 30px -8px rgba(120, 78, 72, 0.16); --sh-lg: 0 26px 60px -18px rgba(110, 70, 64, 0.26); --sh-xl: 0 48px 110px -30px rgba(100, 62, 58, 0.34); --sh-glow-rose: 0 0 0 1px rgba(183,110,121,.14), 0 18px 50px -14px rgba(183,110,121,.42); /* ---- Glass ---- */ --glass-bg: rgba(255, 253, 251, 0.62); --glass-brd: rgba(255, 255, 255, 0.7); --glass-blur: blur(22px) saturate(1.4); /* ---- Motion: professional easing, nothing linear ---- */ --e-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo out — the workhorse */ --e-in-out: cubic-bezier(0.76, 0, 0.24, 1); --e-soft: cubic-bezier(0.33, 1, 0.68, 1); --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot */ --e-gentle: cubic-bezier(0.4, 0, 0.2, 1); /* ---- Layout ---- */ --shell: min(1220px, 100% - 2 * var(--gut)); --gut: clamp(1.15rem, 4.5vw, 4rem); --sec-pad: clamp(5.5rem, 13vh, 11rem); --radius: clamp(14px, 1.6vw, 22px); } /* ------------------------------------------------------------ Reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Lenis takes over scrolling; it sets .lenis on */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body { min-height: 100vh; background: var(--ivory); color: var(--ink); font-family: var(--font-serif); font-size: var(--t-body); font-weight: 400; line-height: 1.72; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, canvas, video { display: block; max-width: 100%; } img { height: auto; } button, input { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } ol, ul { list-style: none; padding: 0; } ::selection { background: var(--blush-deep); color: var(--ink); } /* Focus: visible and on-brand, but only for keyboard users */ :focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------ Typography primitives ------------------------------------------------------------ */ h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.06; letter-spacing: -0.022em; color: var(--ink); } em { font-style: italic; } /* Rose-gold metallic text treatment, used sparingly on accents */ .metal-text { background: var(--grad-metal); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* Small caps eyebrow label */ .eyebrow { font-family: var(--font-ui); font-size: var(--t-tag); font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--rose); } /* ------------------------------------------------------------ Layout primitives ------------------------------------------------------------ */ .section { position: relative; width: var(--shell); margin-inline: auto; padding-block: var(--sec-pad); } .section-head { max-width: 46rem; margin-bottom: clamp(3rem, 7vh, 6rem); } .section-head__tag { font-family: var(--font-ui); font-size: var(--t-tag); font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--rose); margin-bottom: 1.15rem; display: flex; align-items: center; gap: 0.9rem; } .section-head__tag::after { content: ""; flex: 1; height: 1px; max-width: 6rem; background: linear-gradient(90deg, var(--gold-line), transparent); } .section-head__title { font-size: var(--t-h2); margin-bottom: 1.4rem; } .section-head__title em { color: var(--rose); font-weight: 400; } .section-head__lede { font-size: var(--t-lede); color: var(--ink-soft); max-width: 34rem; font-weight: 300; } /* ------------------------------------------------------------ Opening curtain — covers the first paint, then lifts ------------------------------------------------------------ */ .curtain { position: fixed; inset: 0; z-index: 200; background: var(--ivory); pointer-events: none; /* Failsafe: lifts on its own even if JS never runs, so a script error can never leave a blank ivory screen. When JS is healthy it removes the node long before this delay elapses. */ animation: curtain-failsafe 0.9s var(--e-out) 2.4s forwards; } .curtain--lifted { opacity: 0; transition: opacity 1s var(--e-out); } @keyframes curtain-failsafe { to { opacity: 0; visibility: hidden; } } /* ------------------------------------------------------------ Reveal-on-scroll base state. .motion-ready is set by JS only when motion is permitted, so content is never left invisible if JS fails or motion is reduced. ------------------------------------------------------------ */ .motion-ready [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); will-change: opacity, transform; } .footer { width: var(--shell); margin-inline: auto; padding-block: clamp(3rem, 8vh, 6rem); text-align: center; border-top: 1px solid rgba(217, 190, 143, 0.34); } .footer__mark { font-family: var(--font-hand); font-size: 1.5rem; color: var(--ink-faint); } /* ------------------------------------------------------------ Reduced motion — kill transforms/animation, keep everything legible ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .motion-ready [data-reveal] { opacity: 1; transform: none; } }