/* ============================================ CRITICAL CSS — Hotel El Bosque Inlined in for LCP < 1.2s Only above-the-fold styles ============================================ */ /* --- CSS Custom Properties --- */ :root { --color-bg-deep: #0a0f0d; --color-bg-section: #0f1613; --color-bg-card: #151e1a; --color-bg-glass: rgba(15, 22, 19, 0.75); --color-gold: #c9a84c; --color-gold-light: #e4cc7a; --color-gold-dark: #9a7a2e; --color-green-deep: #1a3a2a; --color-green-accent: #2d6b4a; --color-green-light: #4a9e6e; --color-cream: #f5f0e8; --color-cream-soft: #ede6d8; --color-text: #f5f0e8; --color-text-muted: #a8b5a0; --color-text-dark: #1a1a1a; --color-overlay: rgba(10, 15, 13, 0.55); --color-overlay-heavy: rgba(10, 15, 13, 0.78); --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --max-content: 1440px; --gap: clamp(1rem, 3vw, 2.5rem); --radius: 12px; --radius-lg: 20px; --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-slow: 0.7s cubic-bezier(0.22, 1, 0.36, 1); } /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--color-gold-dark) var(--color-bg-deep); } body { font-family: var(--font-sans); background: var(--color-bg-deep); color: var(--color-text); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --- 4K Side Fills --- */ body::before, body::after { content: ''; position: fixed; top: 0; bottom: 0; width: calc((100vw - var(--max-content)) / 2); z-index: 0; pointer-events: none; } body::before { left: 0; background: linear-gradient(135deg, #060b09 0%, #0a1310 40%, transparent 100%); } body::after { right: 0; background: linear-gradient(225deg, #060b09 0%, #0a1310 40%, transparent 100%); } /* --- Navigation --- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0 var(--gap); transition: background var(--transition-smooth), backdrop-filter var(--transition-smooth); } .nav.scrolled { background: var(--color-bg-glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(201, 168, 76, 0.12); } .nav__inner { max-width: var(--max-content); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav__logo { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: var(--color-gold); text-decoration: none; letter-spacing: 0.03em; } .nav__logo span { color: var(--color-cream); font-weight: 400; } .nav__links { display: flex; list-style: none; gap: 2rem; align-items: center; } .nav__link { color: var(--color-cream-soft); text-decoration: none; font-size: 0.88rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; position: relative; transition: color var(--transition-fast); } .nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--color-gold); transition: width var(--transition-smooth); } .nav__link:hover { color: var(--color-gold); } .nav__link:hover::after { width: 100%; } /* Language Toggle */ .lang-toggle { display: flex; align-items: center; gap: 0.5rem; background: rgba(201, 168, 76, 0.12); border: 1px solid rgba(201, 168, 76, 0.25); color: var(--color-gold); padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); font-family: var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; } .lang-toggle:hover { background: rgba(201, 168, 76, 0.22); border-color: var(--color-gold); transform: scale(1.03); } .lang-toggle svg { width: 16px; height: 16px; fill: currentColor; } /* Hamburger */ .nav__hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001; } .nav__hamburger span { display: block; width: 24px; height: 2px; background: var(--color-cream); border-radius: 2px; transition: all var(--transition-fast); } .nav__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav__hamburger.active span:nth-child(2) { opacity: 0; } .nav__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* --- Hero Section --- */ .hero { position: relative; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero__video-wrap { position: absolute; inset: 0; z-index: 0; } .hero__video, .hero__video-fallback { width: 100%; height: 100%; object-fit: cover; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(10, 15, 13, 0.3) 0%, rgba(10, 15, 13, 0.15) 40%, rgba(10, 15, 13, 0.5) 75%, rgba(10, 15, 13, 0.9) 100% ); z-index: 1; } .hero__content { position: relative; z-index: 2; text-align: center; padding: 0 var(--gap); max-width: 900px; } .hero__title { font-family: var(--font-serif); font-size: clamp(2.8rem, 7vw, 6.5rem); font-weight: 700; color: var(--color-cream); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1rem; text-shadow: 0 4px 30px rgba(0,0,0,0.4); } .hero__subtitle { font-family: var(--font-sans); font-size: clamp(0.95rem, 2vw, 1.35rem); font-weight: 300; color: var(--color-gold-light); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 2.5rem; } .hero__cta { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 2.5rem; background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); color: var(--color-text-dark); font-family: var(--font-sans); font-size: 0.92rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none; border-radius: 50px; transition: all var(--transition-smooth); box-shadow: 0 4px 25px rgba(201, 168, 76, 0.3); } .hero__cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 40px rgba(201, 168, 76, 0.5); } .hero__scroll-hint { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; animation: float 2.5s ease-in-out infinite; } .hero__scroll-hint span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-text-muted); } .hero__scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--color-gold), transparent); animation: scroll-line 2s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } } @keyframes scroll-line { 0% { opacity: 0; transform: scaleY(0); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } 100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; } } /* --- Animated gradient fallback for video --- */ .hero__gradient-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(45, 107, 74, 0.4) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(201, 168, 76, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(26, 58, 42, 0.8) 0%, var(--color-bg-deep) 100%); animation: gradient-shift 15s ease-in-out infinite; } @keyframes gradient-shift { 0%, 100% { filter: hue-rotate(0deg) brightness(1); } 50% { filter: hue-rotate(15deg) brightness(1.1); } } /* --- Mobile breakpoints for critical --- */ @media (max-width: 768px) { .nav__links { display: none; position: fixed; inset: 0; background: var(--color-overlay-heavy); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; z-index: 999; } .nav__links.open { display: flex; } .nav__link { font-size: 1.2rem; } .nav__hamburger { display: flex; } .hero__title { font-size: clamp(2.2rem, 10vw, 3.5rem); } .hero__content { padding: 0 1.5rem; padding-top: env(safe-area-inset-top, 0); } } /* iPhone safe areas */ @supports (padding: env(safe-area-inset-bottom)) { .nav { padding-top: env(safe-area-inset-top, 0); } .hero__scroll-hint { bottom: calc(2.5rem + env(safe-area-inset-bottom, 0)); } }