/* critical.css — Above-the-fold critical styles for instant first paint */ /* This is inlined in for fastest possible rendering */ :root { --background: #F7F3F1; --foreground: #2C1810; --primary: #D9B6B6; --primary-foreground: #FFFFFF; --secondary: #EAD9D6; --secondary-foreground: #2C1810; --accent: #C8965A; --accent-foreground: #FFFFFF; --muted: #F4E8E8; --muted-foreground: #8B6F6F; --card: #FFFFFF; --card-foreground: #2C1810; --border: #E8D5D5; --input: #F4E8E8; --ring: #D9B6B6; --radius: 1rem; --font-sans: 'DM Sans', sans-serif; --rose-gold: #C8965A; --blush-deep: #C9A0A0; --cream: #FAF6F4; } *, *::before, *::after { box-sizing: border-box; border: 0 solid #e5e7eb; border-color: var(--border); } html { line-height: 1.5; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: inherit; } h1, h2, h3, h4, h5, h6, p { margin: 0; font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } img, video { display: block; max-width: 100%; height: auto; } button { cursor: pointer; } /* Layout primitives */ .relative { position: relative; } .fixed { position: fixed; } .absolute { position: absolute; } .inset-0 { inset: 0; } .z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-50 { z-index: 50; } .flex { display: flex; } .hidden { display: none; } .block { display: block; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .min-h-screen { min-height: 100vh; } .overflow-hidden { overflow: hidden; } .overflow-x-hidden { overflow-x: hidden; } .w-full { width: 100%; } .h-full { height: 100%; } .mx-auto { margin-left: auto; margin-right: auto; } .max-w-7xl { max-width: 80rem; } .pointer-events-none { pointer-events: none; } /* Header (above-the-fold) */ .glass-card { background: rgba(255,255,255,0.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.8); } .shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0/0.1), 0 2px 4px -2px rgb(0 0 0/0.1); } .transition-all { transition: all 0.15s cubic-bezier(0.4,0,0.2,1); } .duration-500 { transition-duration: 0.5s; } /* Padding */ .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .pb-20 { padding-bottom: 5rem; } .pt-32 { padding-top: 8rem; } .p-5 { padding: 1.25rem; } /* Spacing */ .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-6 { gap: 1.5rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-8 { margin-bottom: 2rem; } .mt-16 { margin-top: 4rem; } /* Header heights */ .h-16 { height: 4rem; } .w-10 { width: 2.5rem; } .h-10 { height: 2.5rem; } /* Text basics */ .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-white { color: #fff; } .text-foreground { color: var(--foreground); } .text-accent { color: var(--accent); } .text-primary { color: var(--primary); } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-medium { font-weight: 500; } .font-light { font-weight: 300; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .tracking-wide { letter-spacing: 0.025em; } .tracking-widest { letter-spacing: 0.1em; } .leading-none { line-height: 1; } /* Hero display text */ .text-hero-display { font-size: clamp(2.8rem, 9vw, 9rem); line-height: 0.9; letter-spacing: -0.02em; } /* Rose gold gradient (CTA buttons) */ .rose-gold-gradient { background: linear-gradient(135deg, #C8965A, #E8B87A 40%, #D4A06A); } /* Hero overlays */ .hero-scrim { background: linear-gradient(90deg, rgba(44,24,16,0.72) 0, rgba(44,24,16,0.45) 50%, rgba(44,24,16,0.1)); } .hero-scrim-mobile { background: linear-gradient(180deg, rgba(44,24,16,0.3) 0, rgba(44,24,16,0.75) 60%, rgba(44,24,16,0.85)); } .noise-overlay { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: 0.035; pointer-events: none; } /* Rounded */ .rounded-full { border-radius: 9999px; } .rounded-2xl { border-radius: calc(var(--radius) * 3); } .rounded-3xl { border-radius: calc(var(--radius) * 4); } .object-cover { object-fit: cover; } .object-contain { object-fit: contain; } .object-center { object-position: center; } .flex-shrink-0 { flex-shrink: 0; } .flex-col { flex-direction: column; } /* Animations (critical: fade-up starts hidden) */ .fade-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .fade-up.visible { opacity: 1; transform: translateY(0); } /* Responsive */ @media (min-width: 640px) { .sm\:block { display: block; } .sm\:flex { display: flex; } .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 768px) { .md\:hidden { display: none; } .md\:block { display: block; } } @media (min-width: 1024px) { .lg\:h-20 { height: 5rem; } .lg\:w-12 { width: 3rem; } .lg\:h-12 { height: 3rem; } .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; } .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } .lg\:pb-24 { padding-bottom: 6rem; } } @media (min-width: 1280px) { .xl\:flex { display: flex; } }