/* ============================================ GLOBAL.CSS — Ooi Solutions (v4) Reset, base typography, scrollbar, Lenis base Smooth loading, no white flash ============================================ */ /* ── RESET ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── SELECTION ── */ ::selection { background: var(--accent); color: #fff; } ::-moz-selection { background: var(--accent); color: #fff; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg-dark); } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; } /* ── LENIS SMOOTH SCROLL BASE ── */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ── HTML & BODY ── */ /* NOTE: overflow-x: hidden on breaks position:sticky! Use overflow:visible on html and overflow-x:clip on body instead. */ html { overflow: visible !important; height: auto !important; } body { overflow-x: clip !important; overflow-y: auto !important; height: auto !important; font-family: var(--font-primary); font-weight: var(--font-weight-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bg-dark); color: var(--fg); line-height: 1.5; } /* ── TYPOGRAPHY ── */ h1, h2, h3, h4, h5, h6 { text-transform: uppercase !important; } /* ── LOADING SCREEN ── */ #ooi-loader { position: fixed; inset: 0; z-index: 99999; background: var(--bg-dark); display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease, visibility 0.5s ease; } #ooi-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; } .ooi-loader-bar { width: 120px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; } .ooi-loader-fill { width: 0%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-gold)); border-radius: 2px; animation: ooiLoadProgress 1.5s ease-in-out forwards; } @keyframes ooiLoadProgress { 0% { width: 0%; } 60% { width: 70%; } 100% { width: 100%; } } /* Hide page content while loading — but keep layout intact to prevent flash */ body.ooi-loading > *:not(#ooi-loader) { visibility: hidden; opacity: 0; } /* Smooth fade-in transition for content when loading completes */ body:not(.ooi-loading) > *:not(.squirrel-throw-container):not(.squirrel-nut-particle) { opacity: 1; } /* Ensure header is always visible once loading is done (no delay) */ body:not(.ooi-loading) .site-header { opacity: 1; visibility: visible; } /* ── LINKS & BUTTONS ── */ a { color: inherit; text-decoration: none; } button { font: inherit; border: none; background: none; color: inherit; cursor: pointer; } /* ── GLOBAL ACCESSIBILITY (Reduced Motion) ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── WHITE TEXT OVERRIDE (body text visibility on dark backgrounds) ── */ /* --muted is #a3a3a3 in variables.css — targeted overrides ensure white text on dark bg */ .flow-body, .flow-feature-desc, .flow-sub, .flow-feature-title, .flow-no-item p, .cd-header__sub, .cd-result-desc, .faq-accordion-content-inner p, .approach-tab-desc { color: #ffffff !important; } /* ── LIGHT SECTION EXCEPTIONS ── */ /* Keep dark text on cream/white/light backgrounds */ .search-section p, .search-section .flow-body, .search-top p, .search-bottom-note, .cta-card p, .cta-desc, .service-page-cta p, .hero-banner-cream p { color: var(--muted-dark) !important; } /* Dark-themed CTA sections (service-page.css / location pages) — keep light text */ .cta-section .cta-inner p, .cta-section .cta-subtitle { color: var(--muted) !important; } /* Flow sections with cream background */ .flow-section[style*="bg-cream"] p, .flow-section[style*="background-color:var(--bg-cream)"] p, .flow-section[style*="bg-cream"] .flow-body, .flow-section[style*="background-color:var(--bg-cream)"] .flow-body, .flow-section[style*="bg-cream"] .flow-feature-desc, .flow-section[style*="background-color:var(--bg-cream)"] .flow-feature-desc, .flow-section[style*="bg-cream"] .flow-sub, .flow-section[style*="background-color:var(--bg-cream)"] .flow-sub, .flow-section[style*="bg-cream"] .flow-feature-title, .flow-section[style*="background-color:var(--bg-cream)"] .flow-feature-title { color: var(--fg-dark) !important; } /* Accent-colored section — keep white */ .flow-section[style*="var(--accent)"] .flow-body, .flow-section[style*="var(--accent)"] .flow-sub, .flow-section[style*="var(--accent)"] p { color: #ffffff !important; } /* Global Conversion CTA Normalization */ .cta-fix { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 15px !important; background: var(--accent) !important; color: #fff !important; border: none !important; padding: 14px 32px !important; border-radius: 12px !important; font-size: 1rem !important; font-weight: 700 !important; font-family: 'Inter Tight', sans-serif !important; cursor: pointer !important; text-transform: none !important; box-shadow: 0 15px 30px rgba(29, 124, 110, 0.3) !important; transition: transform 0.3s, box-shadow 0.3s, background 0.3s !important; margin-top: 0 !important; text-decoration: none !important; } .cta-fix:hover { background: var(--accent-hover) !important; transform: translateY(-3px) !important; box-shadow: 0 20px 40px rgba(29, 124, 110, 0.4) !important; } .page-main { overflow-x: hidden; }