/* ============================================================ BASE.CSS — Sensation Group Design System Fonts: Cormorant Garamond (400,500,600) + Inter (300,400,500,600) Load via Google Fonts in HTML : ============================================================ */ /* ============================================================ CSS CUSTOM PROPERTIES ============================================================ */ :root { --black: #0C0B09; --white: #FFFFFF; --off-white: #F5F2EC; --gray-50: #F9F7F2; --gray-100: #EEEAE3; --gray-200: #DAD6CE; --gray-400: #968E82; --gray-600: #58534C; --accent: #8C7B6B; --font-heading: 'Cormorant Garamond', 'Georgia', serif; --nav-height: 80px; } /* ============================================================ 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(--gray-400); display: inline-flex; align-items: center; gap: 14px; } /* Thin accent dash to the left of every section label */ .section-label::before { content: ''; display: inline-block; flex-shrink: 0; width: 28px; height: 1px; background: var(--accent); } /* Dark-background variant */ .section-label--dark { color: rgba(255, 255, 255, 0.38); } .section-label--dark::before { background: rgba(255, 255, 255, 0.22); } /* ============================================================ REVEAL ON SCROLL — slow, elegant drift ============================================================ */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.18s; } .reveal-delay-3 { transition-delay: 0.28s; } .reveal-delay-4 { transition-delay: 0.38s; }