/* ============================================================ LO D'ALEX — GLOBALS Design tokens, reset, typography, layout system ============================================================ */ /* --- Google Fonts --- */ /* Moved to in HTML for faster loading — no @import chain */ /* --- Design Tokens --- */ :root { /* Brand */ --primary: #000000; --primary-light: #1A1A1A; --gold: #C8A44A; --gold-light: #D4B85C; --gold-dark: #A8873A; --gold-glow: rgba(200, 164, 74, 0.2); --gold-subtle: rgba(200, 164, 74, 0.08); --gold-border: rgba(200, 164, 74, 0.25); --red-dark: #8B1A1A; --red-accent: #A52A2A; /* Neutrals */ --white: #FFFFFF; --off-white: #FAFAF7; --cream: #FDF8F0; --cream-dark: #F5EDE0; --gray-50: #F5F5F3; --gray-100: #E5E5E0; --gray-200: #C0BFB8; --gray-300: #8A8980; --gray-400: #6B6A62; --gray-500: #4A4940; --gray-600: #2A2A25; --dark: #0A0A08; --dark-light: #141412; --dark-section: #0D0D0B; --dark-card: #111110; /* Glass */ --glass-dark: rgba(0, 0, 0, 0.6); --glass-gold: rgba(200, 164, 74, 0.06); --glass-border: rgba(200, 164, 74, 0.12); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.3); --shadow-gold: 0 8px 32px rgba(200, 164, 74, 0.2); --shadow-gold-lg: 0 16px 48px rgba(200, 164, 74, 0.25); /* Typography */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'DM Mono', 'SF Mono', 'Fira Code', monospace; /* Font Sizes */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; --text-8xl: 6rem; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem; /* Layout */ --max-width: 1280px; --max-width-narrow: 900px; --max-width-wide: 1440px; --nav-height: 80px; --frame-width: 16px; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-btn: 4px; /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 200ms; --duration-normal: 400ms; --duration-slow: 600ms; /* Z-Index Scale */ --z-frame: 5; --z-nav: 100; --z-mobile-menu: 150; --z-whatsapp: 200; --z-popup: 300; --z-overlay: 400; } /* --- Reset --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: 1.7; color: var(--white); background-color: var(--dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { overflow-x: hidden; } body.menu-open { overflow: hidden; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } ::selection { background: var(--gold); color: var(--primary); } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--dark); } ::-webkit-scrollbar-thumb { background: var(--gray-500); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* --- Typography --- */ .display-xl { font-family: var(--font-display); font-size: clamp(var(--text-5xl), 8vw, var(--text-8xl)); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; } .display-lg { font-family: var(--font-display); font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)); font-weight: 600; line-height: 1.1; } .display-md { font-family: var(--font-display); font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); font-weight: 600; line-height: 1.15; } .heading-lg { font-family: var(--font-display); font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); font-weight: 600; line-height: 1.2; } .heading-md { font-family: var(--font-display); font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl)); font-weight: 500; line-height: 1.25; } .heading-sm { font-family: var(--font-display); font-size: clamp(var(--text-lg), 2vw, var(--text-2xl)); font-weight: 500; line-height: 1.3; } .body-lg { font-size: var(--text-lg); line-height: 1.8; } .body-md { font-size: var(--text-base); line-height: 1.7; } .body-sm { font-size: var(--text-sm); line-height: 1.6; } .label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); } .price { font-family: var(--font-mono); font-size: var(--text-base); font-weight: 500; color: var(--gold); } .italic { font-style: italic; } .text-gold { color: var(--gold); } .text-gray { color: var(--gray-300); } .text-cream { color: var(--cream); } /* --- Layout --- */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); } .container--narrow { max-width: var(--max-width-narrow); } .container--wide { max-width: var(--max-width-wide); } .section { padding: var(--space-5xl) 0; position: relative; } .section--sm { padding: var(--space-3xl) 0; } .section--lg { padding: var(--space-5xl) 0 var(--space-5xl); } /* Section backgrounds */ .dark-section { background-color: var(--dark); color: var(--white); } .dark-alt-section { background-color: var(--dark-section); color: var(--white); } .light-section { background-color: #1A1610; color: var(--cream); position: relative; overflow: hidden; } /* Luxury tablecloth pattern overlay */ .light-section::before { content: ''; position: absolute; inset: 0; background-image: /* Fork left */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='60' viewBox='0 0 20 60' opacity='0.04'%3E%3Cpath d='M4 2v18M8 2v14a4 4 0 01-8 0V2M12 2v18M10 20v38M10 58v0' stroke='%23C8A44A' fill='none' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E"), /* Knife right */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='60' viewBox='0 0 16 60' opacity='0.03'%3E%3Cpath d='M8 2C8 2 14 8 14 20S8 30 8 30V58' stroke='%23C8A44A' fill='none' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E"), /* Wine glass */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='50' viewBox='0 0 30 50' opacity='0.03'%3E%3Cpath d='M8 2h14v12c0 6-4 10-7 10s-7-4-7-10V2zM15 24v18M8 42h14' stroke='%23C8A44A' fill='none' stroke-width='0.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-position: 10% 20%, 85% 60%, 50% 80%; background-repeat: repeat, repeat, repeat; background-size: 120px 180px, 100px 180px, 150px 200px; pointer-events: none; z-index: 0; } /* Subtle gold ambient glow */ .light-section::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 50% at 20% 30%, rgba(200, 164, 74, 0.06) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 70%, rgba(200, 164, 74, 0.04) 0%, transparent 70%), radial-gradient(ellipse 60% 30% at 50% 90%, rgba(160, 120, 50, 0.05) 0%, transparent 60%); pointer-events: none; z-index: 0; } .light-section > * { position: relative; z-index: 1; } .light-section .label { color: var(--gold); } .light-section .text-gray { color: var(--gray-300); } /* Grid System */ .grid { display: grid; gap: var(--space-xl); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { flex-direction: column; } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } .gap-xl { gap: var(--space-xl); } .gap-2xl { gap: var(--space-2xl); } .text-center { text-align: center; } /* --- Dividers --- */ .divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border: none; margin: var(--space-3xl) 0; } .divider--sm { width: 80px; height: 2px; background: var(--gold); margin: var(--space-lg) auto; } /* --- Section Header --- */ .section-header { text-align: center; max-width: 700px; margin: 0 auto var(--space-3xl); } .section-header .label { margin-bottom: var(--space-md); display: block; } .section-header .section-title { margin-bottom: var(--space-lg); } .section-header .section-subtitle { color: var(--gray-300); font-size: var(--text-lg); line-height: 1.7; } .light-section .section-header .section-subtitle { color: var(--gray-300); } /* --- Image Placeholders --- */ .placeholder-img { background: linear-gradient(135deg, var(--dark-light) 0%, var(--dark-card) 100%); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-sm); color: var(--gray-400); font-size: var(--text-sm); overflow: hidden; position: relative; } .placeholder-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--gold-subtle) 0%, transparent 50%); pointer-events: none; } .placeholder-img .placeholder-icon { font-size: var(--text-3xl); opacity: 0.5; } .light-section .placeholder-img { background: linear-gradient(135deg, var(--cream-dark) 0%, var(--gray-50) 100%); border-color: var(--gray-100); color: var(--gray-400); } /* --- Visually Hidden (a11y) --- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ GLOBAL AMBIENT BACKGROUND SYSTEM One unified luxury background for the entire page. Noise grain + warm ambient glows + depth — all on body. ============================================================ */ /* The global body background stays as base dark color. The ambient texture is applied via a fixed ::before on body so it shows through sections without their own background, but sections with images/videos/gradients naturally cover it. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: /* Fine noise grain texture */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"), /* Large warm gold ambient glow — upper left */ radial-gradient(ellipse 80% 40% at 10% 15%, rgba(191, 155, 81, 0.04) 0%, transparent 60%), /* Warm glow — right side */ radial-gradient(ellipse 60% 50% at 90% 40%, rgba(191, 155, 81, 0.03) 0%, transparent 55%), /* Deep warm amber pool — bottom */ radial-gradient(ellipse 100% 35% at 50% 95%, rgba(50, 35, 15, 0.3) 0%, transparent 50%), /* Cool accent for depth */ radial-gradient(ellipse 50% 40% at 60% 60%, rgba(35, 42, 65, 0.025) 0%, transparent 55%), /* Center warm glow */ radial-gradient(ellipse 70% 60% at 50% 50%, rgba(30, 22, 10, 0.35) 0%, transparent 70%), /* Edge vignette */ radial-gradient(ellipse 75% 75% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.2) 100%); background-color: var(--dark); background-size: 300px 300px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-attachment: fixed; }