/* ============================================================ BASE.CSS — Premium Sensation Design System Fonts: Cormorant Garamond (400,500,600) + Inter (300,400,500,600) Load via Google Fonts in HTML : ============================================================ */ /* ============================================================ CSS CUSTOM PROPERTIES ============================================================ */ :root { /* Core — warm charcoal replaces cold black */ --black: #1A140E; --white: #FFFFFF; /* Warm neutral scale */ --off-white: #F5EDE0; /* warm cream — main light bg */ --cream: #EDE0CA; /* deeper warm beige */ --ivory: #FAF6EF; /* lightest warm white */ --gray-50: #FAF6EF; --gray-100: #F0E8DA; --gray-200: #DDD0BC; --gray-400: #9A9088; --gray-600: #5A5046; --nav-height: 80px; /* Premium Sensation brand accent */ --accent: #C9A96E; /* champagne gold */ --accent-light: #DFC28A; /* lighter gold for hovers */ --accent-dim: rgba(201, 169, 110, 0.14); /* Sage green — optional accent */ --sage: #7B9E80; } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================ BASE ELEMENTS ============================================================ */ html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Inter', sans-serif; background-color: var(--off-white); color: var(--black); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; cursor: pointer; } button { cursor: pointer; border: none; background: none; font-family: inherit; } img { display: block; max-width: 100%; } /* ============================================================ TYPOGRAPHY HELPERS ============================================================ */ .section-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); } /* ============================================================ REVEAL ON SCROLL ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s ease, transform 0.75s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; }