/* buildcali-next: layout overrides for static site without WP JS */ /* ============================================================ STICKY HEADER: always visible ============================================================ */ #pxl-header-elementor .pxl-header-elementor-sticky { visibility: visible !important; transform: none !important; -webkit-transform: none !important; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } /* Hide the transparent main header — sticky white header is always shown */ #pxl-header-elementor .pxl-header-elementor-main { display: none !important; } /* ============================================================ PAGE CONTENT OFFSET Interior pages: content starts below the fixed sticky header (~100px) Homepage: content starts at top (hero fills full viewport) Class set by inline JS snippet in ============================================================ */ html.is-interior #pxl-main { padding-top: 100px !important; } html.is-homepage #pxl-main { padding-top: 0 !important; } /* Fallback if JS hasn't run yet */ #pxl-main { padding-top: 100px; } /* Fix projects page hero: was designed with -121px negative margin for transparent overlay header; override to 0 so it sits below nav */ .elementor-496 .elementor-element.elementor-element-78000684 { margin-top: 0 !important; } /* ============================================================ NAV DROPDOWNS: solid white background so items are visible ============================================================ */ #pxl-header-elementor .pxl-header-elementor-sticky .sub-menu, #pxl-header-mobile .pxl-header-main .sub-menu { background-color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; border-top: 2px solid #000 !important; } #pxl-header-elementor .pxl-header-elementor-sticky .sub-menu a, #pxl-header-mobile .pxl-header-main .sub-menu a { color: #000000 !important; } #pxl-header-elementor .pxl-header-elementor-sticky .sub-menu a:hover, #pxl-header-mobile .pxl-header-main .sub-menu a:hover { color: #666666 !important; } /* ============================================================ MOBILE HAMBURGER: visible dark icon on white header ============================================================ */ #pxl-nav-mobile .pxl-nav-mobile-button span { background-color: #000000 !important; } /* Mobile header background */ #pxl-header-mobile #pxl-header-main { background-color: #ffffff !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 999 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important; } /* Push page content below mobile header */ html.is-interior #pxl-header-mobile + * { padding-top: 80px; } /* ============================================================ IMAGE-BOX WebGL effect: show image-front, hide displacement map ============================================================ */ .pxl-image-box1 img.image-front, .pxl-image-box3 img.image-front { opacity: 1 !important; display: block !important; width: 100% !important; height: auto !important; position: relative !important; z-index: 1; } .pxl-image-box1 img.image-back, .pxl-image-box1 img.map, .pxl-image-box3 img.image-back, .pxl-image-box3 img.map { display: none !important; opacity: 0 !important; } .pxl-image-box1 .canvas, .pxl-image-box3 .canvas { display: none !important; } /* ============================================================ PORTFOLIO GRID: ensure title/content overlay is visible ============================================================ */ .pxl-portfolio-grid-layout1 .pxl-item--inner .item--content { background-color: rgba(255, 255, 255, 0.95) !important; } .pxl-portfolio-grid-layout1 .pxl-item--inner .item--content .item--title a, .pxl-portfolio-grid-layout1 .pxl-item--inner .item--content h5 a { color: #000000 !important; } .pxl-portfolio-grid-layout1 .pxl-item--inner .item--content .pxl-btn-line { color: #000000 !important; } .pxl-portfolio-grid-layout1 .pxl-item--inner .item--content .pxl-btn-line .line { background-color: #000000 !important; } /* ============================================================ WooCommerce artifacts: remove comparison/wishlist bars ============================================================ */ .woosc-area, .woosc-popup, .woosw-popup { display: none !important; } /* Homepage hero slider: force white text on dark background slides */ .pxl-swiper-sliders .pxl-item--subtitle, .pxl-swiper-sliders .pxl-item--title, .pxl-swiper-sliders .pxl-item--inner .pxl-item--subtitle span { color: #ffffff !important; } /* ============================================================ VIDEO WIDGET: aspect-ratio rules missing from frontend.min.css ============================================================ */ .elementor-widget-video .elementor-widget-container { overflow: hidden; } .elementor-widget-video .elementor-wrapper { width: 100%; display: block; aspect-ratio: var(--video-aspect-ratio, 1.77777); } .elementor-widget-video .elementor-wrapper iframe, .elementor-widget-video .elementor-wrapper video { width: 100%; height: 100%; display: block; border: none; background: #000; } /* ============================================================ FULL-WIDTH SECTIONS: ensure container spans full viewport width ============================================================ */ .elementor-section-full_width > .elementor-container { max-width: 100% !important; width: 100% !important; } /* ============================================================ HERO VIDEO SECTIONS: remove WP negative margins (designed for transparent header — our header is fixed white, not transparent) ============================================================ */ .elementor-10762 .elementor-element.elementor-element-3f3e2036, .elementor-9998 .elementor-element.elementor-element-77827e9c { margin-top: 0 !important; margin-bottom: 0 !important; } /* ============================================================ CAROUSEL ARROWS: --fourth-color not defined in static context ============================================================ */ .wp-arrow.style1 .pxl-swiper-arrow { background: #ffffff !important; color: #000000 !important; } .wp-arrow.style1 .pxl-swiper-arrow .crossline1:before, .wp-arrow.style1 .pxl-swiper-arrow .crossline1:after, .wp-arrow.style1 .pxl-swiper-arrow .crossline2:before, .wp-arrow.style1 .pxl-swiper-arrow .crossline2:after { background-color: #000000 !important; }