:root { --earth: #0f110a; --moss: #1e3a12; --leaf: #3d6b32; --sage: #6fa05f; --cream: #f4efe4; --wheat: #e6d5b0; --clay: #c07840; --bark: #4a2e1a; --gold: #d4a843; --deep: #080c05; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; width: 100%; max-width: 100%; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* body base: Tailwind classes on */ /* ── CURSOR ── (above modals e.g. .p-lightbox z-index 10020) ── */ #cur { position: fixed; top: 0; left: 0; z-index: 10100; width: 12px; height: 12px; background: var(--leaf); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: width .25s, height .25s, background .25s, opacity .2s ease; mix-blend-mode: normal; opacity: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); } #cur-ring { position: fixed; top: 0; left: 0; z-index: 10099; width: 36px; height: 36px; border: 1.5px solid var(--leaf); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: width .25s, height .25s, border-color .25s, opacity .2s ease; mix-blend-mode: normal; opacity: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); } body:has(a:hover) #cur, body:has(button:hover) #cur { width: 26px; height: 26px; background: var(--clay); } body:has(a:hover) #cur-ring, body:has(button:hover) #cur-ring { width: 54px; height: 54px; border-color: var(--clay); } /* ── GRAIN ── */ body::after { content: ''; position: fixed; inset: 0; z-index: 9990; opacity: .03; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px; } /* ── GOOGLE TRANSLATE (hidden native UI; custom modal controls language) ── */ #google_translate_element { position: fixed; left: -9999px; top: -9999px; width: 0; height: 0; overflow: hidden; } .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame, #\:1\.container, #goog-gt-vt, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-l4eHX-hSRGPd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-aZ2wEe-OiiCO, #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .goog-text-highlight { display: none !important; visibility: hidden !important; opacity: 0 !important; max-height: 0 !important; pointer-events: none !important; } body { top: 0 !important; } html, html body, body.skiptranslate, html.skiptranslate, html[style*="top"], body[style*="top"] { top: 0 !important; margin-top: 0 !important; } .goog-logo-link, .goog-te-gadget span, .goog-te-gadget-icon { display: none !important; } .goog-te-gadget { color: transparent !important; font-size: 0 !important; } .lang-opt { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; border: 1px solid rgba(61, 107, 50, 0.24); background: #e7efe3; color: #2b4231; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.84rem; font-weight: 700; letter-spacing: 0; text-transform: none; min-height: 2.6rem; padding: 0.55rem 0.65rem; transition: transform 0.16s ease, background 0.16s ease; } .lang-opt:hover { transform: translateY(-1px); background: #dbe8d5; } .lang-opt.is-active { background: linear-gradient(145deg, #2a5d34 0%, #3d7a44 100%); color: #f4efe4; border-color: rgba(30, 58, 18, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px rgba(61, 107, 50, 0.22); position: relative; padding-right: 1.45rem; } .lang-opt.is-active::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 0.42rem; top: 50%; transform: translateY(-50%); font-size: 0.62rem; opacity: 0.95; } .lang-opt.is-active::after { content: 'Current'; position: absolute; left: 0.4rem; top: -0.55rem; font-size: 0.58rem; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 700; color: #204827; background: #e8f3e3; border: 1px solid rgba(32, 72, 39, 0.22); border-radius: 999px; padding: 0.08rem 0.34rem; } .lang-more-btn { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid rgba(61, 107, 50, 0.28); background: #edf4e9; color: #275333; border-radius: 0.55rem; padding: 0.5rem 0.72rem; font-size: 0.78rem; font-weight: 700; } .lang-more-btn:hover { background: #dfeede; } .lang-more-select { width: 100%; min-height: 2.35rem; border: 1px solid rgba(61, 107, 50, 0.3); border-radius: 0.5rem; background: #fff; color: #21422a; padding: 0.45rem 0.6rem; font-size: 0.85rem; } .lang-more-apply { min-height: 2.35rem; border: 1px solid transparent; border-radius: 0.5rem; background: #2f6b34; color: #f4efe4; padding: 0.5rem 0.9rem; font-size: 0.8rem; font-weight: 700; } .lang-more-apply:hover { background: #3b7f42; } .lang-flag { font-size: 1rem; line-height: 1; } .nav-links a.nav-translate-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; } .nav-links a.nav-translate-icon i { font-size: 1.35rem; } #langModalPanel { border-color: rgba(61, 107, 50, 0.24) !important; background: #f4efe4 !important; } #langModalPanel #langModalTitle { color: #244c2a !important; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: var(--wheat); } ::-webkit-scrollbar-thumb { background: var(--leaf); } /* ── PAGE SYSTEM ── */ .page { display: none; } .page.active { display: block; overflow-x: hidden; } /* Home: stack above fixed first-viewport hero background. Keep z-index below #site-footer so the fixed hero layer (inside #page-home) does not paint over the global footer. */ #page-home { position: relative; z-index: 1; } /* Dark page canvas on Home so mobile overscroll / rubber-band and any sub-pixel gaps don’t flash Tailwind body cream behind dark sections. */ #page-home.active { background-color: #0c1810; } body:has(#page-home.active), html:has(#page-home.active) { background-color: #0c1810; } /* Global footer sits after #page-* in index.html; must stack above #page-home (z-index:1) or fixed hero BG covers it on Home */ #site-footer { position: relative; /* z-index: 3; */ } /* Hero first viewport: full-bleed photo + dark forest tint + subtle grid (matches hero-slider art direction) */ .hero-viewport-fixed-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; z-index: 0; pointer-events: none; overflow: hidden; background-color: #0f1f16; } .hero-slider-bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; z-index: 0; transform: translateZ(0); filter: saturate(0.92) contrast(1.05) brightness(0.55); } .hero-slider-bg-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 95% 80% at 50% 35%, rgba(45, 78, 52, 0.25) 0%, transparent 55%), radial-gradient(ellipse 120% 90% at 50% 100%, rgba(6, 14, 10, 0.65) 0%, transparent 45%), linear-gradient(165deg, rgba(18, 42, 28, 0.5) 0%, rgba(8, 22, 14, 0.88) 48%, rgba(5, 12, 8, 0.94) 100%); } .hero-slider-bg-grid { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.22; background-image: linear-gradient(rgba(244, 239, 228, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 239, 228, 0.04) 1px, transparent 1px); background-size: 28px 28px; mix-blend-mode: soft-light; } /* Opaque bands so scrolled sections hide the fixed pattern */ #page-home > section:not(#hero):not(.bg-earth):not(.bg-moss):not(.home-mission-band):not(.home-features-section):not(.home-about-intro) { background-color: var(--cream); } /* ── NAV ── */ /* nav layout: use Tailwind classes on