/* ========================================================= Studio Ecube - Hero Image module Final rules for non-home hero pages. Rules: - Home page is NOT controlled here. - If a non-home hero exists, header overlays it. - If no hero exists, header returns to normal white layout. - Hero images keep their full aspect ratio and are not cropped. - Project detail gets the same Hero Image banner as Project/About. ========================================================= */ /* ---------- Hero image: show the complete image ---------- */ .ecube-page-hero { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; background: #111; } .ecube-page-hero-image { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; object-fit: contain !important; object-position: center center !important; } body.ecube-about-page .ecube-about-hero { height: auto !important; min-height: 0 !important; } body.ecube-about-page .ecube-about-hero-image { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; object-fit: contain !important; object-position: center center !important; } /* ---------- Header over a configured hero ---------- */ body.ecube-hero-present .ecube-site-header { position: absolute ; top: 0 ; left: 0 ; right: 0 ; width: 100% ; z-index: 10020 ; background: transparent ; box-shadow: none ; } body.ecube-hero-present .ecube-site-header .menu-list-items, body.ecube-hero-present .ecube-site-header .menu-list-items.innerbannermenu { background: transparent !important; box-shadow: none !important; } body.ecube-hero-present .ecube-site-header #logo_img { filter: none; } body.ecube-hero-present .ecube-site-header .ecube-share-trigger { background: #fff !important; color: #6daa2d !important; } @media (min-width: 993px) { body.ecube-hero-present .ecube-site-header .menu-links > li.active > a::after, body.ecube-hero-present .ecube-site-header .menu-links > li.ecube-active-page > a::after { /* background: #fff !important; */ bottom: 0px; } } /* ---------- No hero: restore the normal white header ---------- */ body:not(.ecube-hero-present) .ecube-site-header, body.ecube-about-page:not(.ecube-hero-present) .ecube-site-header, body.ecube-project-detail-page:not(.ecube-hero-present) .ecube-site-header { /* position: relative !important; */ /* top: auto !important; */ /* left: auto !important; */ /* right: auto !important; */ /* width: 100% !important; */ /* z-index: 10020 !important; */ /* background: #fff !important; */ /* box-shadow: 0 8px 22px rgba(0,0,0,.06) !important; */ } body:not(.ecube-hero-present) .ecube-site-header .menu-list-items, body.ecube-about-page:not(.ecube-hero-present) .ecube-site-header .menu-list-items, body.ecube-project-detail-page:not(.ecube-hero-present) .ecube-site-header .menu-list-items { background: #fff !important; box-shadow: none !important; } body:not(.ecube-hero-present) .ecube-site-header .menu-links > li > a, body.ecube-about-page:not(.ecube-hero-present) .ecube-site-header .menu-links > li > a { color: #111 !important; text-shadow: none !important; } body:not(.ecube-hero-present) .ecube-site-header .ecube-share-trigger, body.ecube-about-page:not(.ecube-hero-present) .ecube-site-header .ecube-share-trigger, body.ecube-project-detail-page:not(.ecube-hero-present) .ecube-site-header .ecube-share-trigger { background: #6daa2d !important; color: #fff !important; box-shadow: none !important; } /* The old project-detail CSS always forced the header to absolute. Cancel that rule when no Hero Image exists. */ body.ecube-project-detail-page:not(.ecube-hero-present) .ecube-project-hero-header { position: relative !important; top: auto !important; left: auto !important; right: auto !important; background: #fff !important; box-shadow: 0 8px 22px rgba(0,0,0,.06) !important; } /* Project detail with a Hero Image: the new banner is the first visual, and the header sits over it. The existing project slideshow remains below. */ body.ecube-project-detail-page.ecube-hero-present .ecube-project-hero-header { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; background: transparent !important; box-shadow: none !important; } /* Keep the existing project slideshow as the second visual after the banner. */ body.ecube-project-detail-page .ecube-project-hero { /* position: relative !important; */ } /* No-hero project detail: do not let the legacy transparent header sit over the slideshow. */ body.ecube-project-detail-page:not(.ecube-hero-present) .ecube-project-hero { margin-top: 0 !important; } /* About Us no-hero state: undo the older about.css sticky transparency rules. */ body.ecube-about-page:not(.ecube-hero-present) header.ecube-site-header.sticky, body.ecube-about-page:not(.ecube-hero-present) header.ecube-site-header.is-sticky, body.ecube-about-page:not(.ecube-hero-present) header.ecube-project-hero-header.sticky, body.ecube-about-page:not(.ecube-hero-present) header.ecube-project-hero-header.is-sticky { position: relative !important; background: #fff !important; box-shadow: 0 8px 22px rgba(0,0,0,.06) !important; } body.ecube-about-page:not(.ecube-hero-present) header.ecube-site-header.sticky .menu-list-items, body.ecube-about-page:not(.ecube-hero-present) header.ecube-site-header.is-sticky .menu-list-items, body.ecube-about-page:not(.ecube-hero-present) header.ecube-project-hero-header.sticky .menu-list-items, body.ecube-about-page:not(.ecube-hero-present) header.ecube-project-hero-header.is-sticky .menu-list-items { background: #fff !important; } body.ecube-about-page:not(.ecube-hero-present) header.ecube-site-header.sticky .menu-links > li > a, body.ecube-about-page:not(.ecube-hero-present) header.ecube-site-header.is-sticky .menu-links > li > a, body.ecube-about-page:not(.ecube-hero-present) header.ecube-project-hero-header.sticky .menu-links > li > a, body.ecube-about-page:not(.ecube-hero-present) header.ecube-project-hero-header.is-sticky .menu-links > li > a { color: #111 !important; text-shadow: none !important; } body.ecube-about-page:not(.ecube-hero-present) header.ecube-site-header.sticky #logo_img, body.ecube-about-page:not(.ecube-hero-present) header.ecube-site-header.is-sticky #logo_img, body.ecube-about-page:not(.ecube-hero-present) header.ecube-project-hero-header.sticky #logo_img, body.ecube-about-page:not(.ecube-hero-present) header.ecube-project-hero-header.is-sticky #logo_img { filter: none !important; } /* Project detail is intentionally NOT part of the Hero Image module. Its existing slideshow remains its hero, with the normal header above it. */ body.ecube-project-detail-page .ecube-project-hero-header { position: relative !important; top: auto !important; left: auto !important; right: auto !important; background: #fff !important; box-shadow: 0 8px 22px rgba(0,0,0,.06) !important; } body.ecube-project-detail-page .ecube-site-header .menu-links > li > a { color: #111 !important; text-shadow: none !important; } body.ecube-project-detail-page .ecube-site-header #logo_img { /* filter: none !important; */ } body.ecube-project-detail-page .ecube-site-header .ecube-share-trigger { background: #6daa2d !important; color: #fff !important; } /* ========================================================= FINAL NO-HERO HEADER STATE If no Hero Image is configured, the header is a normal white block in document flow. It must not behave like an overlay and must not create a page/background overlay. ========================================================= */ body:not(.ecube-hero-present) { background: #fff !important; } body:not(.ecube-hero-present) .ecube-site-header.ecube-header-normal { position: relative !important; inset: auto !important; width: 100% !important; margin: 0 !important; background: #fff !important; opacity: 1 !important; visibility: visible !important; /*box-shadow: 0 8px 22px rgba(0,0,0,.06) !important;*/ z-index: 10020 !important; } body:not(.ecube-hero-present) .ecube-site-header.ecube-header-normal .menu-list-items, body:not(.ecube-hero-present) .ecube-site-header.ecube-header-normal .menu-list-items.innerbannermenu { background: #fff !important; opacity: 1 !important; box-shadow: none !important; } body:not(.ecube-hero-present) .ecube-site-header.ecube-header-normal .menu-links > li > a { color: #111 !important; text-shadow: none !important; } body:not(.ecube-hero-present) .ecube-site-header.ecube-header-normal #logo_img { filter: none !important; } body:not(.ecube-hero-present) .ecube-site-header.ecube-header-normal .ecube-share-trigger { background: #6daa2d !important; color: #fff !important; box-shadow: none !important; } /* Never apply hero overlay treatment to the normal mobile/tablet menu. */ body:not(.ecube-hero-present) .ecube-site-header.ecube-header-normal .menu-links { background: #fff !important; box-shadow: none !important; } body:not(.ecube-hero-present) .ecube-site-header.ecube-header-normal .menu-links > li { background: #fff !important; } body:not(.ecube-hero-present) .ecube-site-header.ecube-header-normal .menu-links > li > a { opacity: 1 !important; } body.ecube-hero-present .ecube-site-header.ecube-header-overlay.ecube-header-scrolled { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; background: #fff !important; box-shadow: 0 8px 22px rgba(0,0,0,.06) !important; z-index: 10020 !important;} body.ecube-hero-present .ecube-site-header.ecube-header-overlay.ecube-header-scrolled .menu-list-items,body.ecube-hero-present .ecube-site-header.ecube-header-overlay.ecube-header-scrolled .menu-list-items.innerbannermenu { background: #fff !important; box-shadow: none !important;} body.ecube-hero-present .ecube-site-header.ecube-header-overlay.ecube-header-scrolled .menu-links > li > a { color: #111 !important; text-shadow: none !important;} body.ecube-hero-present .ecube-site-header.ecube-header-overlay.ecube-header-scrolled #logo_img { filter: none !important;}body.ecube-hero-present .ecube-site-header.ecube-header-overlay.ecube-header-scrolled .ecube-share-trigger { background: #6daa2d !important; color: #fff !important; box-shadow: none !important;} @media (min-width: 993px) { body.ecube-hero-present .ecube-site-header.ecube-header-overlay.ecube-header-scrolled .menu-links > li.active > a::after, body.ecube-hero-present .ecube-site-header.ecube-header-overlay.ecube-header-scrolled .menu-links > li.ecube-active-page > a::after { background: #6daa2d !important; }}/* Contact page: reduce the excessive gap above the main Contact section when no Contact Hero Image is configured. */body:not(.ecube-hero-present) .iq-contact2 .iq-our-touch:first-of-type { padding-top: 35px !important;}body:not(.ecube-hero-present) .iq-contact2 .marcentercontact { margin-top: 0 !important;} @media (max-width: 992px) { body.ecube-hero-present .ecube-site-header .menu-links > li > a { color: #000 !important; text-shadow: 0 1px 8px rgba(0,0,0,.28) !important; } } @media (min-width: 993px) { body.ecube-hero-present .ecube-site-header .menu-links > li > a { color: #888888 !important; text-shadow: 0 1px 8px rgba(0,0,0,.28) !important; } } @media (min-width: 767px) { body:not(.ecube-hero-present) .ecube-site-header #logo_img, body.ecube-about-page:not(.ecube-hero-present) .ecube-site-header #logo_img, body.ecube-project-detail-page:not(.ecube-hero-present) .ecube-site-header #logo_img { filter: none !important; } }