/* Prescon Livana — vanilla CSS (ported from React/Tailwind build) Tailwind utility classes are supplied at runtime by the Tailwind CDN script loaded in ; this file holds only the bespoke, non-utility styling that used to live in src/App.css + src/index.css. */ @font-face { font-family: 'Angie Regular'; src: url('/fonts/Angie Regular.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Postea'; src: url('/fonts/fonnts.com-Postea_var.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } * { border-color: rgba(25, 30, 30, 0.1); } p { font-size: 0.875rem; } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; font-family: 'Postea', system-ui, sans-serif; background-color: #FDF6EE; color: #2A1206; } /* ---- LIVANA BRAND COLORS ---- */ /* Primary orange: #E56A2F Dark rust: #8B2E0A Cream: #FDF6EE Sand: #E8C9A0 */ .brand-orange { color: #E56A2F; } .brand-cream { color: #FDF6EE; } .brand-rust { color: #8B2E0A; } .brand-sand { color: #D4956A; } /* Orange gradient text */ .orange-text { background: linear-gradient(135deg, #E56A2F 0%, #E8651A 40%, #B03A08 70%, #D4560C 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* White text on orange */ .text-on-orange { color: #FFF8F2; } /* Hero section — full orange like the brochure */ .hero-bg { background: linear-gradient(160deg, #E56A2F 0%, #D4540A 25%, #B83A08 50%, #E56A2F 75%, #A83208 100%); } /* Sand texture overlay effect */ .texture-overlay { background-image: radial-gradient(ellipse 120% 80% at 80% 30%, rgba(255, 220, 170, 0.15) 0%, transparent 60%), radial-gradient(ellipse 60% 60% at 20% 70%, rgba(80, 20, 5, 0.25) 0%, transparent 60%); } /* Mountain silhouette divider */ .mountain-divider { position: relative; overflow: hidden; } /* Section light — cream/warm white */ .section-light { background-color: rgba(171, 147, 116, 0.20); } /* Section warm — light orange tint */ .section-warm { background: linear-gradient(180deg, #FCD8B8 0%, #FBF0E4 100%); } /* Section orange — solid orange */ .section-orange { background: linear-gradient(135deg, #E56A2F 0%, #B83A08 100%); } /* Section dark — deep warm brown */ .section-dark { background: linear-gradient(135deg, #1E0A03 0%, #2A1206 100%); } /* Card style */ .livana-card { background: #ffffff; border: 1px solid rgba(200, 75, 14, 0.12); box-shadow: 0 4px 20px rgba(100, 40, 10, 0.08); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .livana-card:hover { transform: translateY(-6px); border-color: rgba(200, 75, 14, 0.3); box-shadow: 0 16px 48px rgba(100, 40, 10, 0.16); } /* Orange card on dark */ .orange-card { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); } /* Input on light bg */ .livana-input { background: #FCD8B8; border: 1.5px solid rgba(200, 75, 14, 0.25); color: #2A1206; transition: all 0.3s ease; border-radius: 8px; } .livana-input:focus { outline: none; border-color: #E56A2F; box-shadow: 0 0 0 3px rgba(200, 75, 14, 0.1); } .livana-input::placeholder { color: rgba(42, 18, 6, 0.4); } .livana-input option { background: #FCD8B8; color: #2A1206; } /* Input on dark bg */ .livana-input-dark { background: rgba(255, 255, 255, 0.1); border: 1.5px solid rgba(255, 255, 255, 0.2); color: #FFF8F2; transition: all 0.3s ease; border-radius: 8px; } .livana-input-dark:focus { outline: none; border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); } .livana-input-dark::placeholder { color: rgba(255, 248, 242, 0.45); } .livana-input-dark option { background: #2A1206; color: #FFF8F2; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #FDF6EE; } ::-webkit-scrollbar-thumb { background: #593321; border-radius: 3px; } /* Gold divider line */ .orange-line { height: 2px; background: linear-gradient(90deg, transparent, #E56A2F, transparent); } .font-angie { font-family: 'Angie Regular', system-ui, sans-serif; } /* Pulse animation */ @keyframes pulse-orange { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 75, 14, 0.4); } 50% { box-shadow: 0 0 0 14px rgba(200, 75, 14, 0); } } .pulse-orange { animation: pulse-orange 2.5s infinite; } /* Float animation */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .float-anim { animation: float 4s ease-in-out infinite; } /* Shimmer on orange */ @keyframes shimmer-light { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .shimmer-text { background: linear-gradient(90deg, #FFF8F2 25%, #FFD9B0 50%, #FFF8F2 75%); background-size: 200% auto; animation: shimmer-light 3s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Badge on dark */ .badge-dark { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); color: #FFF8F2; backdrop-filter: blur(8px); } /* Badge on light */ .badge-light { background: rgba(200, 75, 14, 0.1); border: 1px solid rgba(200, 75, 14, 0.25); color: #E56A2F; } /* Stat label */ .stat-number { font-family: 'Raleway', system-ui, sans-serif; font-weight: 700; } /* Wavy mountain shape */ .wave-shape { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; overflow: hidden; } input[type="search"]::-webkit-search-cancel-button { display: none; } /* ── Lightweight CSS reveal animations ── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } .reveal-delay-4 { transition-delay: 0.32s; } .reveal-delay-5 { transition-delay: 0.40s; } .reveal-delay-6 { transition-delay: 0.48s; } .reveal-delay-7 { transition-delay: 0.56s; } .reveal-delay-8 { transition-delay: 0.64s; } .reveal-delay-9 { transition-delay: 0.72s; } .reveal-delay-10 { transition-delay: 0.80s; } /* ── content-visibility for below-fold performance ── */ .cv-auto { content-visibility: auto; contain-intrinsic-size: 0 400px; } /* ── Navbar entrance ── */ @keyframes nav-slide-in { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .nav-entrance { animation: nav-slide-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ── Map lightbox entrance ── */ @keyframes livana-fade-in { from { opacity: 0 } to { opacity: 1 } } @keyframes livana-scale-in { from { opacity: 0; transform: scale(0.85) } to { opacity: 1; transform: scale(1) } } .livana-map-backdrop { animation: livana-fade-in 0.25s ease both; } .livana-map-modal { animation: livana-scale-in 0.3s ease both; } /* ── Accessible focus ring ── */ :focus-visible { outline: 2px solid #E56A2F; outline-offset: 2px; } /* ── Mobile menu (nav) ── */ .mobile-menu { transition: max-height 0.25s ease, opacity 0.25s ease; } /* ── Scrollbar-hide utility (used by Gallery thumbnail strip) ── */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } /* ── Popup / Contact form field error state ── */ .border-red-500 { border-color: #ef4444 !important; } /* ── Section fallback placeholder (parity with React Suspense fallback) ── */ .section-fallback { min-height: 200px; }