/* ========================================================================== CRITICAL CSS - L.G. Esthetique Inlined in for above-the-fold rendering performance ========================================================================== */ /* 1. Design Tokens (CSS Custom Properties) ========================================================================== */ :root { --color-primary: #412D22; --color-secondary: #BFAFA0; --color-bg: #F5F0EB; --color-cta: #8B6F47; --color-text: #2C2C2C; --color-white: #FFFFFF; --color-whatsapp: #25D366; --font-heading: 'Cormorant Garamond', serif; --font-body: 'Jost', sans-serif; --max-width: 1200px; --header-height: 80px; --header-height-scrolled: 60px; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 4rem; --spacing-xl: 6rem; --transition: all 300ms ease; --transition-fast: all 150ms ease; } /* 2. Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 3. Typography ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-primary); font-weight: 500; line-height: 1.2; } h1 { font-size: clamp(2.2rem, 5vw, 4rem); } h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); } h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); } h4 { font-size: 1.2rem; } p { margin-bottom: 1rem; } a { color: var(--color-primary); text-decoration: none; transition: var(--transition); } a:hover, a:focus-visible { color: var(--color-cta); } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } /* 4. Focus Visible (Accessibility) ========================================================================== */ :focus-visible { outline: 2px solid var(--color-cta); outline-offset: 2px; } /* 5. Skip Link ========================================================================== */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 10000; padding: 0.8rem 1.5rem; background: var(--color-primary); color: var(--color-white); font-weight: 500; border-radius: 0 0 4px 4px; transition: top 0.2s ease; } .skip-link:focus { top: 0; color: var(--color-white); } /* 6. Container ========================================================================== */ .container { width: 90%; max-width: var(--max-width); margin: 0 auto; } /* 7. Header & Navigation ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background-color: rgba(245, 240, 235, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; transition: var(--transition); display: flex; align-items: center; } .site-header.scrolled { height: var(--header-height-scrolled); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06); } .header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 1rem; } @media (min-width: 1024px) { .header-inner { padding: 0; } } .logo { display: flex; align-items: center; flex-shrink: 0; } .logo img { height: 45px; width: auto; } .site-header.scrolled .logo img { height: 38px; } /* Desktop Nav */ .nav-list { display: none; gap: 1.8rem; align-items: center; } .nav-list a { font-size: 0.9rem; font-weight: 400; letter-spacing: 0.3px; position: relative; } .nav-list a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--color-cta); transition: width 0.3s ease; } .nav-list a:hover::after, .nav-list a.active::after { width: 100%; } .nav-cta { margin-left: 0.5rem; } /* Hamburger */ .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 30px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1002; } .hamburger span { display: block; width: 100%; height: 2px; background-color: var(--color-primary); transition: var(--transition); transform-origin: center; } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile Nav Overlay */ .mobile-nav { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background-color: var(--color-bg); z-index: 1001; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-nav.is-open { right: 0; } .mobile-nav a { font-family: var(--font-heading); font-size: 2rem; font-weight: 500; color: var(--color-primary); } .mobile-nav a:hover { color: var(--color-cta); } @media (min-width: 1024px) { .nav-list { display: flex; } .hamburger { display: none; } .mobile-nav { display: none; } } /* 8. Hero Section (base) ========================================================================== */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-white); padding-top: var(--header-height); } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(65, 45, 34, 0.35), rgba(65, 45, 34, 0.65)); } .hero-content { position: relative; z-index: 1; text-align: center; padding: var(--spacing-md); } .hero h1 { color: var(--color-white); margin-bottom: var(--spacing-sm); } .hero .subtitle { font-size: clamp(1rem, 2vw, 1.3rem); margin-bottom: var(--spacing-md); font-weight: 300; max-width: 600px; margin-left: auto; margin-right: auto; } /* 9. WhatsApp Floating Button ========================================================================== */ .whatsapp-float { position: fixed; bottom: 24px; right: 24px; background-color: var(--color-whatsapp); border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); z-index: 900; transition: transform 0.3s ease, box-shadow 0.3s ease; } .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); color: var(--color-white); } .whatsapp-float svg { width: 28px; height: 28px; fill: var(--color-white); }