/* * WILLOW HOMES - CUSTOM DESIGN STYLESHEET * Supplements Tailwind CSS with premium transitions, scrollbar aesthetics, * and advanced styling utilities for three.js layers and slider containers. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Poppins:wght@300;400;500;600;700&display=swap'); /* Reset and Custom Base Styles */ html { scroll-behavior: auto; /* Disabled for Lenis smooth scrolling */ /* Horizontal overflow is hidden at the ROOT (html), which is the natural page scroller. Putting it on instead forced the body to compute overflow-y:auto, turning it into a nested scroll container that broke native touch scrolling on mobile. */ overflow-x: hidden; } /* Official Lenis smooth-scroll styles (only active on desktop, where Lenis runs). On touch devices Lenis is disabled, so these classes are never applied and the browser's native scrolling is used. */ 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; } body { font-family: 'Inter', sans-serif; background-color: #050c18; /* Ultra dark navy black */ color: #ffffff; } /* Premium Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #050c18; } ::-webkit-scrollbar-thumb { background: rgba(212, 175, 87, 0.25); border-radius: 4px; border: 2px solid #050c18; transition: background 0.3s; } ::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 87, 0.6); } /* Glassmorphism helpers */ .glassmorphism { background: rgba(10, 25, 49, 0.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); } .glassmorphism-light { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.05); } /* Custom glow animation on gold accents */ @keyframes goldGlow { 0%, 100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.2), inset 0 0 5px rgba(212, 175, 55, 0.1); } 50% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.5), inset 0 0 10px rgba(212, 175, 55, 0.2); } } .gold-glow-hover:hover { animation: goldGlow 2s infinite; } /* Horizontal scroll track slider settings */ #testimonials-slider-track { display: flex; gap: 24px; will-change: transform; } /* Hide native scroll bars on sliding containers */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* 3D Transform perspectives */ .tilt-card { perspective: 1000px; transform-style: preserve-3d; will-change: transform; } .hero-heading, .hero-heading .heading-line, .hero-heading .reveal-word, .hero-heading .overflow-hidden { overflow: visible !important; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hero-heading { line-height: 1.1; letter-spacing: 0.02em; margin-bottom: 0.75rem; } .hero-heading .heading-line { display: block; white-space: nowrap; overflow: visible; } .hero-heading .reveal-word { display: inline-block; line-height: 1.1; will-change: transform; } /* ThreeJS Canvas styling */ #hero-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; /* The 3D scene is purely decorative. Ignore pointer/touch input so finger swipes over the hero scroll the page instead of being captured by the WebGL canvas (which blocked scrolling on the hero section on mobile). */ pointer-events: none; touch-action: pan-y; } /* Video modal responsive layout max size */ .modal-content { max-width: 1000px; } /* ========================================================================== MOBILE SCROLL HANDLING FOR OVERLAYS (modals / drawers / service panels) ========================================================================== */ /* When any overlay is open, lock the PAGE scroll. is the page scroller (see note above), so the lock must be applied here — locking alone does nothing now that body is not the scroll container. */ html.modal-open, html.modal-open body { overflow: hidden; } /* Any scrollable region inside an overlay: - scrolls independently with smooth iOS/Android momentum - overscroll-behavior: contain stops the scroll from "chaining" to the page - touch-action: pan-y captures vertical finger gestures correctly */ .modal-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */ overscroll-behavior: contain; /* prevent scroll chaining to background */ touch-action: pan-y; } /* Custom scrollbar settings for scrollable grids (gallery / video showcase). These are nested scroll containers, so they also need momentum + no chaining so swiping inside them on mobile doesn't drag the whole page. */ .custom-scrollbar-styling { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } .custom-scrollbar-styling::-webkit-scrollbar { width: 6px; } .custom-scrollbar-styling::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 3px; } .custom-scrollbar-styling::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.25); border-radius: 3px; border: none; } .custom-scrollbar-styling::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.6); }