/* Theme Name: Ecoproplumbing Child Theme Theme URI: https://ticinoweb.com Description: Child theme for Ecoproplumbing - Based on ticinoweb-ai-theme Author: ticinoWEB Template: ticinoweb-ai-theme Version: 1.8.2 Text Domain: ecoproplumbing-child-theme */ /* ========================================= VARIABLES & DESIGN TOKENS ========================================= */ :root { /* Brand Colors - Blue Palette (based on logo) */ --eco-primary: #0077b6; /* Logo Blue */ --eco-primary-dark: #023e8a; /* Darker Blue */ --eco-secondary: #0096c7; /* Lighter Blue */ --eco-accent: #caf0f8; /* Lightest Blue */ --eco-text: #333333; --eco-light: #f8f9fa; --eco-white: #ffffff; /* Spacing */ --section-spacing: 4rem; /* Mobile defaults */ --container-padding: 1.5rem; } body { color: var(--eco-text); font-family: 'Poppins', sans-serif; /* Reset for Full Width */ margin: 0; padding: 0; width: 100%; /* NIENTE overflow-x qui. Per specifica, se un asse non e `visible` l'altro passa da `visible` ad `auto`: `overflow-x: hidden` rendeva quindi un contenitore di scroll, e da li tre sintomi con una sola causa — window.scrollY restava 0 (quindi nessun saltello del bottone e nessuna classe eco-scrolled), e i discendenti position: fixed (bottone flottante, canvas, .modal + backdrop) venivano ancorati al box di scroll di body invece che al viewport, per cui il bottone scorreva via e il modal si apriva in cima al documento. Lo sbordo orizzontale ora e risolto alla radice (box-sizing sui container e via i 100vw), quindi questo contenimento non serve piu. */ } /* Prevent floating header overlapping the main content */ #content { padding-top: 50px; } html { margin: 0; padding: 0; width: 100%; /* Nessun overflow-x qui: vedi la nota nel blocco mobile. Il contenimento dello sbordo sta su body, che non rompe position: fixed. */ } /* ========================================= ANIMATED BACKGROUND ========================================= */ #eco-wave-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -10; pointer-events: none; opacity: 0.30; /* Render the dots out of focus via GPU compositing */ } /* ========================================= UTILITIES & OVERRIDES ========================================= */ .text-primary { color: var(--eco-primary) !important; } .bg-primary { background-color: var(--eco-primary) !important; /* Grey Text */ --eco-text-grey: #6c757d; } /* ========================================= CTA BUTTONS (Removed per user request) ========================================= */ /* ========================================= CUSTOM HEADER (Child Theme) ========================================= */ /* ========================================= CUSTOM HEADER (Child Theme) ========================================= */ /* ========================================= CUSTOM HEADER (Child Theme) ========================================= */ .site-header.custom-header { background-color: transparent; border: none; box-shadow: none; padding: 0; position: fixed; /* Fixed as requested */ width: 100%; top: 30px; /* Floating detached */ left: 0; z-index: 9999; /* Always on top */ animation: slideDown 0.8s ease-out; pointer-events: none; /* Let clicks pass through outside wrapper */ } @keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .header-boxed-wrapper { pointer-events: auto; /* Re-enable clicks */ background: rgba(255, 255, 255, 0.75); /* Liquid Transparency */ backdrop-filter: blur(20px) saturate(180%); /* Strong Blur + Saturation */ -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.5); /* Glass Edge */ border-radius: 60px; /* Stronger rounding */ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); /* Deep glass shadow */ max-width: 1300px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 1rem 3rem; /* Taller Island */ display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; } .header-boxed-wrapper:hover { box-shadow: 0 15px 50px rgba(31, 38, 135, 0.2); transform: translateY(-2px); background: rgba(255, 255, 255, 0.85); /* Slightly more opaque on hover */ } /* Scrolled Header State */ .custom-header.header-scrolled .header-boxed-wrapper { padding: 0.5rem 2rem; background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); border-radius: 40px; /* slightly smaller radius */ } .custom-header.header-scrolled .site-logo, .custom-header.header-scrolled .custom-logo { height: 60px; /* Shrinks the logo significantly */ } /* ========================================= SECONDARY HEADER IMAGE Per-site, set on the front page. Sits to the right of the menu. ========================================= */ .header-secondary-image { align-items: center; /* Never let the badge squeeze the menu: the menu keeps its width and this shrinks instead. */ flex: 0 1 auto; min-width: 0; margin-left: 1.5rem; line-height: 0; } .header-secondary-image .header-secondary-img { /* Deliberately shorter than the 80px logo: the logo stays the primary mark. */ height: 62px; width: auto; max-width: 100%; display: block; object-fit: contain; transition: all 0.4s ease; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); } /* Shrinks with the logo when the header condenses on scroll. */ .custom-header.header-scrolled .header-secondary-image .header-secondary-img { height: 46px; } @media (max-width: 1199px) { .header-secondary-image { margin-left: 1rem; } .header-secondary-image .header-secondary-img { height: 50px; } } /* ========================================= BOXED HERO SECTION ========================================= */ #hero, .hero-section { position: relative; max-width: 1300px; height: 50vh; width: 100%; margin: 120px auto 3rem auto; /* Adjusted to account for floating header (which is roughly 80px-100px tall with padding) */ border-radius: 40px; overflow: hidden; box-shadow: 0 15px 40px rgba(0, 119, 182, 0.1); /* Subtle shadow for boxed feel */ } /* Logo Styling */ .site-branding { display: block; line-height: 0; /* Fix ghost spacing */ margin: 0; /* Removed extra margin as user felt it was pushed too far right */ } .site-branding a { text-decoration: none !important; border: none !important; display: inline-block; } .site-branding .site-logo, .site-branding .custom-logo { height: 80px; /* Reduced to 80px based on visual inspection */ width: auto; min-width: 180px; max-width: none; /* Removed limits preventing aspect ratio from growing */ display: block; margin-top: 10px; /* Push logo slightly lower per user request */ transition: all 0.4s ease; /* Enhanced transition for scroll shrink */ object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); /* Slight depth for logo */ } .site-branding:hover .site-logo, .site-branding:hover .custom-logo { transform: scale(1.05); } /* Navigation Styling */ #child-header-nav ul, .main-navigation ul, .main-navigation .menu ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; /* Il menu non va mai a capo: era `wrap`, e con l'immagine secondaria nell'header l'ultima voce finiva su una seconda riga. Dove una riga sola non ci sta si passa all'hamburger (vedi il breakpoint a 1200px), non a due righe. L'override mobile mette flex-direction: column, quindi le voci si impilano comunque nel pannello a comparsa. */ flex-wrap: nowrap; gap: 2rem; align-items: center; } #child-header-nav li { list-style: none !important; margin: 0; padding: 0; } .main-navigation ul li a, .main-navigation .menu ul li a, #child-header-nav li a { text-decoration: none; color: #333; font-weight: 600; font-size: 1.05rem; position: relative; padding: 0.5rem 0; transition: color 0.3s ease; display: block; } /* Hover Animation (Water Wave) */ .main-navigation ul li a { position: relative; overflow: hidden; } .main-navigation ul li a:hover, .main-navigation .menu ul li a:hover, #child-header-nav li a:hover { color: var(--eco-primary); text-shadow: 0 0 1px rgba(0, 119, 182, 0.3); } /* Island Shimmer Effect */ .header-boxed-wrapper:hover { box-shadow: 0 15px 50px rgba(31, 38, 135, 0.25), inset 0 0 20px rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.8); transform: translateY(-2px); background: rgba(255, 255, 255, 0.9); } /* ========================================= MODERN FOOTER - CENTERED STACK ========================================= */ .site-footer-modern { background-color: #e3f2fd; /* Azzurrino / Light Blue */ color: #333; padding: 3rem 0 1rem; margin-top: 4rem; border-top: 1px solid rgba(0, 0, 0, 0.05); } .footer-content-wrapper { max-width: 1300px; width: 100%; margin: 0 auto; box-sizing: border-box; } /* Flex Column Stack */ .footer-centered-stack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2rem; } /* 1. LOGO */ .footer-logo { max-height: 90px; width: auto; display: block; margin: 0 auto; /* Ensure centering */ } /* 2. MENU (Icon List Style - Horizontal) */ .menu-flex-list { display: flex; flex-wrap: wrap; /* Safety wrap */ justify-content: center; list-style: none; margin: 0; padding: 0; gap: 2rem; align-items: center; } .menu-flex-list li a { text-decoration: none; color: #0d47a1; /* Darker Blue for Contrast */ font-weight: 600; display: flex; align-items: center; transition: color 0.3s; position: relative; font-size: 1.05rem; } /* Icon List Bullet (Chevron) */ .menu-flex-list li a::before { content: '\f054'; /* Chevron Right */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.75rem; color: var(--eco-secondary); margin-right: 8px; transition: transform 0.3s; } .menu-flex-list li a:hover { color: var(--eco-primary); } .menu-flex-list li a:hover::before { transform: translateX(3px); /* Slide arrow */ } /* 3. CONTACTS (Horizontal) */ .contact-flex-list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; gap: 2rem; align-items: center; } .contact-flex-list li { display: flex; align-items: center; color: #333; font-size: 1rem; font-weight: 500; } .contact-flex-list li i { color: var(--eco-primary); margin-right: 8px; font-size: 1.1rem; } .contact-flex-list a { text-decoration: none; color: #333; transition: color 0.3s; } .contact-flex-list a:hover { color: var(--eco-primary); text-decoration: none; } /* Copyright Section */ .footer-bottom { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.05); /* Very subtle separator */ font-size: 0.85rem; color: #555; text-align: center; } .copyright-flex { display: flex; justify-content: center; align-items: center; } .copyright-flex p { margin: 0; } .design-credit a { color: #333; font-weight: 600; text-decoration: none; } .footer-legal-links { margin-top: 0.5rem; text-align: center; } .footer-legal-links a { color: #555; text-decoration: underline; } .footer-legal-links a:hover, .footer-legal-links a:focus { color: #333; } /* Responsive */ @media (max-width: 768px) { .menu-flex-list, .contact-flex-list { flex-direction: column; gap: 1rem; } .contact-flex-list { flex-direction: column; gap: 0.8rem; } } /* Mobile Header Adjustments */ @media (max-width: 991px) { .site-header.custom-header { padding: 0; min-height: 60px; top: 10px; /* Tighter on mobile */ } .header-boxed-wrapper { padding: 0.5rem 1rem; /* Reduced padding */ width: 95%; /* More width */ border-radius: 30px; /* Slightly less rounded */ } .site-branding .site-logo, .site-branding .custom-logo { max-height: 60px; /* Smaller on mobile */ min-width: 100px; } } /* Mobile Menu Trigger (Hidden on Desktop) */ .menu-toggle { display: none; } /* Base CTA styles - compact & discreet */ .btn-primary, .btn-outline-primary { position: relative; overflow: hidden; border-radius: 6px; /* Slightly tighter radius */ padding: 0.5rem 1.4rem; /* Reduced padding */ font-weight: 500; font-size: 0.9rem; letter-spacing: 0.02em; text-decoration: none !important; text-transform: none; min-height: 40px; /* Reduced min-height */ display: inline-flex; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; cursor: pointer; box-shadow: none; /* Removed default shadow for cleaner look */ } /* Remove text decorations */ .btn-primary:hover, .btn-outline-primary:hover, .btn-primary:focus, .btn-outline-primary:focus { text-decoration: none !important; outline: none; } /* LIQUID FILL EFFECT Uses background-size 100% 200% to simulate water rising from bottom */ /* Primary CTA - Solid */ .btn-primary { /* Gradient: Top half = Default Color, Bottom half = Hover/Fill Color */ background: linear-gradient(to top, var(--eco-primary-dark) 50%, var(--eco-primary) 50%); background-size: 100% 200%; background-position: top; border: 1px solid var(--eco-primary); color: #fff; } .btn-primary:hover { background-position: bottom; /* Water 'fills' up */ border-color: var(--eco-primary-dark); } /* Outline CTA */ .btn-outline-primary { /* Top half = Transparent, Bottom half = Fill Color */ background: linear-gradient(to top, var(--eco-primary) 50%, transparent 50%); background-size: 100% 200%; background-position: top; border: 1px solid var(--eco-primary); color: var(--eco-primary); } .btn-outline-primary:hover { background-position: bottom; color: #fff; border-color: var(--eco-primary); } /* Add a subtle wave animation on hover using pseudo-element */ .btn-primary::before, .btn-outline-primary::before { content: ''; position: absolute; bottom: 0; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 70%); transform: translateY(100%); transition: transform 0.6s ease; pointer-events: none; z-index: 0; } .btn-primary:hover::before, .btn-outline-primary:hover::before { transform: translateY(-50%) rotate(180deg); /* Subtle churn effect */ } /* Hero CTA specific */ .hero-content .btn-primary, .hero-cta .btn-primary { /* White top, Blue fill bottom */ background: linear-gradient(to top, var(--eco-primary) 50%, #fff 50%); background-size: 100% 200%; background-position: top; border-color: #fff; color: var(--eco-primary); font-weight: 600; } .hero-content .btn-primary:hover, .hero-cta .btn-primary:hover { background-position: bottom; color: #fff; border-color: var(--eco-primary); /* Blend border */ } /* Section Headings */ .section-heading { font-weight: 700; position: relative; display: inline-block; } /* ========================================= HERO SECTION (Mobile First) ========================================= */ .hero-section { position: relative; height: 85vh; padding: 0px 0px 0px 0px; /* Tall hero on mobile for impact */ min-height: 500px; width: 100%; } .eco-hero-slider { height: 100%; width: 100%; max-width: 1300px; /* Matched to Header */ margin: 0 auto; border-radius: 40px; /* Optional: smooth corners to match header */ overflow: hidden; } .eco-hero-slider .swiper-wrapper, .eco-hero-slider .hero-slide { height: 100%; width: 100%; } .hero-slide { display: flex; align-items: flex-end; justify-content: center; text-align: center; padding-bottom: 90px; /* space for swiper pagination dots */ } /* ========================================= HERO BACKGROUND VIDEO — deferred + fade-in ========================================= The