/* ========================================================================== EPOREX INDUSTRIES — Premium Light Theme Redesign Author: Senior UI/UX + Frontend Architecture pass Notes: - This stylesheet is loaded LAST in . It re-skins the existing "Industril" template into a premium, corporate, light theme. - No content is changed. Only presentation, layout, spacing, typography, colour, motion and component styling. - Brand colour #20BB99 is preserved as the single primary accent. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS The template is driven by CSS custom properties. Re-mapping them here flips the whole site from the old dark red/orange theme to the light brand theme. -------------------------------------------------------------------------- */ :root { /* Brand */ --brand: #20BB99; --brand-600: #1AA588; --brand-700: #148A71; --brand-050: #E9F8F4; --brand-100: #D5F1EA; /* Neutrals */ --paper: #FFFFFF; --surface-50: #F8F9FA; --surface-100: #F4F6F8; --ink: #1B1B1B; --ink-2: #555555; --hairline: #EAEAEA; /* Elevation */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --shadow-sm: 0 4px 14px rgba(16, 24, 40, .06); --shadow-md: 0 12px 30px rgba(16, 24, 40, .09); --shadow-lg: 0 24px 60px rgba(16, 24, 40, .12); --shadow-brand: 0 12px 26px rgba(32, 187, 153, .28); /* Radius */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; /* Rhythm */ --container-max: 1240px; --ease: cubic-bezier(.22, 1, .36, 1); /* ---- Re-map the template's own variables ---- */ --body: #FFFFFF; --black: #1B1B1B; --white: #FFFFFF; --theme: #20BB99; --theme2: #20BB99; --theme3: #20BB99; --header: #1B1B1B; --base: #20BB99; --text: #555555; --border: #EAEAEA; --border2: #EAEAEA; --bg: #FFFFFF; --bg2: #F4F6F8; --bg3: rgba(32, 187, 153, .10); --color-gradient-1: linear-gradient(90deg, #20BB99 0%, #148A71 100%); --color-gradient-2: linear-gradient(90deg, rgba(9, 26, 22, .74) 0%, rgba(9, 26, 22, .40) 45%, rgba(9, 26, 22, .05) 100%); --color-gradient-3: linear-gradient(180deg, rgba(32, 187, 153, 0) 0%, #148A71 100%); --color-gradient-4: linear-gradient(226deg, rgba(32, 187, 153, 0) 0%, #148A71 85%); --color-gradient-5: linear-gradient(96deg, #FFFFFF 2%, rgba(244, 246, 248, .6) 76%); } /* -------------------------------------------------------------------------- 2. BASE / TYPOGRAPHY -------------------------------------------------------------------------- */ body { font-family: "Inter", "DM Sans", -apple-system, "Segoe UI", sans-serif !important; color: var(--ink-2); background: var(--paper); font-size: 16.5px; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .section-title h1, .section-title h2, .section-title h3 { font-family: "Manrope", "Plus Jakarta Sans", sans-serif !important; color: var(--ink); letter-spacing: -.02em; font-weight: 800; line-height: 1.14; } p { color: var(--ink-2); } a { transition: color .3s var(--ease); } ::selection { background: var(--brand); color: #fff; } /* Comfortable reading width for standalone body copy on inner pages */ .container { max-width: var(--container-max); } /* -------------------------------------------------------------------------- 3. SCROLL REVEAL — progressive enhancement. Elements are only pre-hidden once JS has flagged support (html.epx-js) and the user has not requested reduced motion. If JS fails, everything stays visible. A small IntersectionObserver (see mainbot.php) adds .epx-in. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html.epx-js .wow { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; } html.epx-js .wow.epx-in { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 4. TOP UTILITY BAR -------------------------------------------------------------------------- */ .top-header { background: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, .06); } .top-header-wrapper { padding: 11px 0 !important; } .top-header-wrapper ul li, .top-header-wrapper ul li a { color: rgba(255, 255, 255, .78) !important; font-size: 14px; letter-spacing: .01em; } .top-header-wrapper ul li i { color: var(--brand); } .top-header-wrapper ul li a:hover { color: #fff !important; } .top-header-wrapper ul li:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .14); } /* -------------------------------------------------------------------------- 5. NAVBAR — clean white bar, glass + shadow on scroll -------------------------------------------------------------------------- */ .header-1 { background: var(--paper); border-bottom: 1px solid var(--hairline); } /* Kill the old diagonal green clip-path shapes */ .header-1::before, .header-1::after, .sticky.header-1::before, .sticky.header-1::after { display: none !important; content: none !important; } /* Balanced header: logo left — menu + CTA distributed — phone right. The template hid the phone below 1600px leaving a dead gap; restore it for all desktop widths so the bar fills naturally at 100% zoom. */ .header-1 .mega-menu-wrapper .header-main .header-left { gap: 24px !important; justify-content: space-between; } @media (min-width: 1200px) { .header-1 .mega-menu-wrapper .header-main .header-right, .sticky.header-1 .mega-menu-wrapper .header-main .header-right { width: auto !important; } .header-1 .mega-menu-wrapper .header-main .header-right .header-contact, .sticky.header-1 .mega-menu-wrapper .header-main .header-right .header-contact { display: flex !important; white-space: nowrap; margin-inline-start: 28px; } } .header-main { padding: 6px 0; } .logo .header-logo img { transition: all .4s var(--ease); width: 148px !important; height: auto !important; } /* The stock logo asset is a white wordmark. On the new light surfaces it is given a brand-green rounded "plate" so it stays visible and reads as an intentional logo lockup. (Footer keeps the plain white logo on dark.) */ .header-1 .logo .header-logo, .offcanvas__logo a, #news-slider14 .about-content .section-title > img { display: inline-block; background: var(--brand); padding: 9px 15px; border-radius: 12px; line-height: 0; box-shadow: var(--shadow-brand); } #news-slider14 .about-content .section-title > img { width: 150px !important; height: auto !important; margin-bottom: 4px; } /* Nav links */ .header-main .main-menu ul li { margin-inline-end: 26px; } .header-main .main-menu ul li a { color: var(--ink) !important; font-family: "Manrope", sans-serif; font-size: 15.5px; font-weight: 600; padding: 32px 0; letter-spacing: -.01em; } /* Animated underline — TOP-LEVEL links only, never dropdown items */ .header-main .main-menu nav > ul > li > a::before { content: ""; position: absolute; left: 0; bottom: 24px; width: 0; height: 2px; border-radius: 2px; background: var(--brand); transition: width .32s var(--ease); } .header-main .main-menu ul li .submenu li a::before, .header-main .main-menu ul li .submenu li a::after { display: none !important; content: none !important; } .header-main .main-menu ul li:hover > a, .header-main .main-menu ul li.active > a { color: var(--brand) !important; } .header-main .main-menu nav > ul > li:hover > a::before, .header-main .main-menu nav > ul > li.active > a::before { width: 100%; } /* Dropdown submenu */ .header-main .main-menu ul li .submenu { border-radius: var(--r-md); border: 1px solid var(--hairline); box-shadow: var(--shadow-md); padding: 8px; overflow: hidden; } .header-main .main-menu ul li .submenu li a { color: var(--ink) !important; font-family: "Manrope", sans-serif; font-weight: 600; font-size: 14.5px; border: none !important; border-radius: 10px; padding: 11px 16px !important; } .header-main .main-menu ul li .submenu li:hover > a { background: var(--brand-050) !important; color: var(--brand) !important; padding-left: 20px !important; } /* Header right: phone contact chip */ .header-1 .mega-menu-wrapper .header-main .header-right .header-contact .icon { color: #fff; background: var(--brand); box-shadow: var(--shadow-brand); } .header-1 .mega-menu-wrapper .header-main .header-right .header-contact a { color: var(--ink); font-weight: 700; font-family: "Manrope", sans-serif; } /* CTA "Enquire Now" pill in nav */ .enquire { display: inline-flex !important; align-items: center; gap: 8px; border: 0 !important; background: var(--brand) !important; color: #fff !important; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15px; padding: 12px 26px !important; border-radius: var(--r-pill); margin-inline-start: 8px; box-shadow: var(--shadow-brand); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } .enquire:hover { background: var(--brand-700) !important; color: #fff !important; padding: 12px 26px !important; transform: translateY(-2px); box-shadow: 0 16px 30px rgba(32, 187, 153, .34); } /* Sticky = frosted glass + soft shadow + shrink */ .sticky.header-1 { background: rgba(255, 255, 255, .82) !important; -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); box-shadow: var(--shadow-sm); border-bottom: 1px solid rgba(234, 234, 234, .8); } .sticky.header-1 .header-main .main-menu ul li a { padding: 22px 0; } .sticky.header-1 .header-main .main-menu nav > ul > li > a::before { bottom: 15px; } .sticky.header-1 .header-main .main-menu ul li .submenu li a { padding: 11px 16px !important; } .sticky.header-1 .logo .header-logo img { width: 128px !important; } /* Hamburger / mobile toggle */ .header__hamburger .bar-icon, .sidebar__toggle .bar-icon { width: 46px; height: 46px; line-height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--hairline); color: var(--ink); background: var(--paper); transition: all .3s var(--ease); } .header__hamburger .bar-icon:hover { background: var(--brand); color: #fff; border-color: var(--brand); } /* -------------------------------------------------------------------------- 6. OFFCANVAS MOBILE MENU -------------------------------------------------------------------------- */ .offcanvas__info { background: var(--paper); box-shadow: var(--shadow-lg); } .offcanvas__contact h5 { color: var(--ink); font-family: "Manrope", sans-serif; } .offcanvas__contact ul li a, .offcanvas__contact-text a { color: var(--ink-2); } .offcanvas__contact-icon i { color: var(--brand); } .mobile-menu .mean-nav ul li a { color: var(--ink) !important; font-family: "Manrope", sans-serif; font-weight: 600; } .offcanvas__close button { color: var(--ink); } /* -------------------------------------------------------------------------- 7. HERO — keep slider intact, refine overlay + indicators -------------------------------------------------------------------------- */ .hero-1::before { background-image: var(--color-gradient-2); } .hero-section .hero-social li a { color: rgba(255, 255, 255, .85); } .hero-section .hero-social li a:hover { color: var(--brand); } .hero-section .hero-social::before, .hero-section .hero-social::after, .hero-section .swiper-dot::before, .hero-section .swiper-dot::after { background-color: rgba(255, 255, 255, .5); } /* Elegant scroll indicator */ .hero-section { position: relative; } .hero-section::after { content: ""; position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); width: 26px; height: 44px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 14px; z-index: 9; pointer-events: none; } .hero-section .swiper-dot .dot { z-index: 10; } @keyframes epx-scroll-dot { 0% { transform: translate(-50%, 0); opacity: 1; } 70% { transform: translate(-50%, 14px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 0; } } .hero-section .swiper-dot .dot::before { content: ""; position: absolute; left: 50%; bottom: 34px; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: epx-scroll-dot 1.8s infinite; z-index: 11; } @media (max-width: 991px) { .hero-section::after { display: none; } } /* -------------------------------------------------------------------------- 8. BUTTONS -------------------------------------------------------------------------- */ .theme-btn { background: var(--brand); color: #fff; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15.5px; padding: 15px 34px; border-radius: var(--r-pill); box-shadow: var(--shadow-brand); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } .theme-btn::before, .theme-btn::after { display: none; } .theme-btn:hover { color: #fff; background: var(--brand-700); transform: translateY(-2px); box-shadow: 0 16px 30px rgba(32, 187, 153, .34); } /* Secondary / outlined */ .theme-btn-2 { color: var(--ink); font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15.5px; border: 1.5px solid var(--hairline); padding: 13px 30px; border-radius: var(--r-pill); background: var(--paper); transition: all .3s var(--ease); display: inline-flex; align-items: center; gap: 10px; } .theme-btn-2::before, .theme-btn-2::after { display: none; } .theme-btn-2 .shape-img { display: none; } .theme-btn-2:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-050); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .theme-btn-2.padding-style { padding: 11px 26px; } /* -------------------------------------------------------------------------- 9. SECTION RHYTHM & TITLES -------------------------------------------------------------------------- */ .section-padding { padding: 96px 0 !important; } @media (max-width: 991px) { .section-padding { padding: 64px 0 !important; } } .section-bg { background: var(--surface-100); } .about-section.section-bg { background: var(--surface-50); } .section-title { margin-bottom: 12px; } .section-title span, .about-content > span { display: inline-block; color: var(--brand); font-family: "Manrope", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; padding: 6px 14px; background: var(--brand-050); border-radius: var(--r-pill); } .section-title h1, .section-title h2 { font-size: clamp(28px, 3.4vw, 44px); color: var(--ink); } .section-title.text-center { max-width: 760px; margin: 0 auto 8px; } /* Supporting divider under centred titles */ .section-title.text-center h2::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 3px; background: var(--brand); margin: 18px auto 0; } /* -------------------------------------------------------------------------- 10. ABOUT SECTION + PRODUCT/INTRO SLIDER -------------------------------------------------------------------------- */ .about-wrapper .about-image { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); } .about-wrapper .about-image > img { border-radius: var(--r-lg); transition: transform 1.2s var(--ease); width: 100%; } .about-wrapper .about-image:hover > img { transform: scale(1.05); } /* Floating "years experience" badge */ .about-image .working-area .inner, .working-area .inner { background: var(--brand) !important; border-radius: var(--r-md); box-shadow: var(--shadow-brand); } .working-area .inner .icon-box i, .working-area .inner .icon-box h3, .working-area .inner .icon-box p { color: #fff !important; } .about-content { color: var(--ink-2); } .about-content .section-title h1, .about-content .section-title h2 { font-size: clamp(24px, 2.6vw, 34px); } .about-content ul li { position: relative; padding-left: 34px; margin-bottom: 14px; color: var(--ink-2); list-style: none; } .about-content ul li i, .about-content ul li .fa-circle-check { position: absolute; left: 0; top: 4px; color: var(--brand); font-size: 18px; } .about-info-items { margin-top: 34px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .about-info-items .call-area { display: flex; align-items: center; gap: 14px; } .about-info-items .call-area .icon i { color: var(--brand); } .about-info-items .call-area a { color: var(--ink); font-weight: 700; font-family: "Manrope", sans-serif; } /* Owl intro slider card (prod_slide.php) */ #news-slider14 .about-content { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 30px 32px; min-height: 100%; } #news-slider14 .about-content .section-title h1, #news-slider14 .about-content .section-title h2 { margin-bottom: 6px; } .owl-theme .owl-controls .owl-page span { background: var(--hairline); } .owl-theme .owl-controls .owl-page.active span { background: var(--brand); } /* -------------------------------------------------------------------------- 11. SERVICE CARDS -------------------------------------------------------------------------- */ .service-section-2 { background: var(--paper); } .service-items-2 { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; height: 100%; box-shadow: var(--shadow-xs); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); margin-bottom: 24px; } .service-items-2:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--brand-100); } .service-items-2 .service-image { overflow: hidden; aspect-ratio: 16 / 10; } .service-items-2 .service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .service-items-2:hover .service-image img { transform: scale(1.08); } .service-items-2 .service-content { padding: 28px 30px 32px; } .service-items-2 .service-content h3 { margin-bottom: 12px; font-size: 22px; } .service-items-2 .service-content h3 a { color: var(--ink); transition: color .3s var(--ease); } .service-items-2 .service-content h3 a:hover { color: var(--brand); } .service-items-2 .service-content p { color: var(--ink-2); margin-bottom: 18px; } /* -------------------------------------------------------------------------- 11b. PRODUCT SHOWCASE (products_showcase.php) -------------------------------------------------------------------------- */ .products-section { background: var(--surface-50); } .product-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-xs); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--brand-100); } .product-card__media { position: relative; aspect-ratio: 4 / 5; background: radial-gradient(120% 90% at 50% 22%, #ffffff 0%, var(--surface-100) 100%); display: flex; align-items: center; justify-content: center; padding: 22px; border-bottom: 1px solid var(--hairline); } .product-card__media img { max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; mix-blend-mode: multiply; /* dissolves the white studio background */ transition: transform .6s var(--ease); } .product-card:hover .product-card__media img { transform: scale(1.06); } .product-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .product-card__title { font-size: 16px; line-height: 1.35; color: var(--ink); font-weight: 700; margin: 0; } .product-card__cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; color: var(--brand); } .product-card__cta i { transition: transform .3s var(--ease); } .product-card:hover .product-card__cta i { transform: translateX(5px); } .product-card__cta:hover { color: var(--brand-700); } /* -------------------------------------------------------------------------- 12. COUNTER / STATS -------------------------------------------------------------------------- */ .Counter-section { background: var(--surface-100); } .counter-wrapper .counter-main-items { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 46px 30px; gap: 20px; } .counter-items { text-align: center; } .counter-items h2 { color: var(--brand); font-size: clamp(34px, 4vw, 52px); font-weight: 800; } .counter-items p { color: var(--ink-2); font-weight: 600; letter-spacing: .12em; font-size: 13px; text-transform: uppercase; } /* -------------------------------------------------------------------------- 13. BREADCRUMB (inner pages) -------------------------------------------------------------------------- */ .breadcrumb-wrapper { background: var(--ink) !important; position: relative; } .breadcrumb-wrapper::before { background: linear-gradient(90deg, rgba(20, 138, 113, .55), rgba(9, 26, 22, .35)) !important; opacity: 1 !important; } .breadcrumb-wrapper .page-heading { padding-top: 140px !important; padding-bottom: 140px !important; } .breadcrumb-wrapper .page-heading h1 { color: #fff; } .breadcrumb-wrapper .page-heading .breadcrumb-items li, .breadcrumb-wrapper .page-heading .breadcrumb-items li a { color: rgba(255, 255, 255, .85); } .breadcrumb-wrapper .page-heading .breadcrumb-items li.active { color: var(--brand); } /* -------------------------------------------------------------------------- 14. GENERIC INNER-PAGE CONTENT (product / category pages) -------------------------------------------------------------------------- */ .service-details-content img, .about-content img, .single-service-content img, .gallery-image img, .gallery-image-2 img { border-radius: var(--r-md); } .service-details-content h2, .service-details-content h3 { color: var(--ink); } /* Content tables (spec sheets) — from footer inline table styles */ table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); margin: 24px 0; } table th { background: var(--brand); color: #fff !important; font-family: "Manrope", sans-serif; border-color: rgba(255, 255, 255, .2) !important; } table td, table th { border: 1px solid var(--hairline) !important; padding: 12px 16px !important; } table tr:nth-child(even) td { background: var(--surface-50); } /* Product image grids on category pages get consistent rounded cards */ .gallery-wrapper .gallery-image, .gallery-wrapper .gallery-image-2 { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .gallery-wrapper .gallery-image:hover, .gallery-wrapper .gallery-image-2:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .gallery-wrapper .gallery-image img, .gallery-wrapper .gallery-image-2 img { transition: transform 1s var(--ease); width: 100%; } .gallery-wrapper .gallery-image:hover img, .gallery-wrapper .gallery-image-2:hover img { transform: scale(1.06); } /* -------------------------------------------------------------------------- 15. FOOTER -------------------------------------------------------------------------- */ .footer-section { background: var(--ink) !important; position: relative; } .footer-section::before { display: none !important; } .footer-widgets-wrapper { padding: 84px 0 40px !important; } .footer-section .single-footer-widget .widget-head h4 { color: #fff; font-family: "Manrope", sans-serif; font-weight: 700; margin-bottom: 22px; position: relative; padding-bottom: 14px; } .footer-section .single-footer-widget .widget-head h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--brand); } .footer-section .single-footer-widget .widget-head h6, .footer-section .single-footer-widget p, .footer-section .footer-content p { color: rgba(255, 255, 255, .66) !important; font-size: 14.5px; line-height: 1.8; } .footer-section .contact-info li, .footer-section .contact-info li a { color: rgba(255, 255, 255, .72) !important; font-size: 14.5px; } .footer-section .contact-info li { display: flex; gap: 12px; margin-bottom: 14px; } .footer-section .contact-info li i { color: var(--brand); margin-top: 4px; } .footer-section .contact-info li a:hover { color: var(--brand) !important; } .footer-section .list-area li { margin-bottom: 12px; } .footer-section .list-area li a { color: rgba(255, 255, 255, .72) !important; font-size: 14.5px; display: inline-flex; align-items: center; gap: 10px; transition: all .3s var(--ease); } .footer-section .list-area li a i { color: var(--brand); font-size: 11px; } .footer-section .list-area li a:hover { color: #fff !important; transform: translateX(4px); } .footer-section iframe { border-radius: var(--r-md); filter: grayscale(.15); } .footer-bottom { background: rgba(0, 0, 0, .25); border-top: 1px solid rgba(255, 255, 255, .08); } .footer-bottom-wrapper p, .footer-bottom-wrapper p a { color: rgba(255, 255, 255, .7); } .footer-bottom-wrapper p a { color: var(--brand); font-weight: 700; } /* Footer social icons (offcanvas + footer) */ .social-icon a { width: 40px; height: 40px; line-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--hairline); color: var(--ink); transition: all .3s var(--ease); } .social-icon a:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-3px); } /* -------------------------------------------------------------------------- 16. ENQUIRY MODAL / FORMS -------------------------------------------------------------------------- */ .modal-content { border: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .modal-header { border: 0; padding: 18px 22px 0; } .modal .close, .modal .btn-close { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-100); border: 0; font-size: 22px; line-height: 1; color: var(--ink); opacity: 1; transition: all .3s var(--ease); } .modal .close:hover { background: var(--brand); color: #fff; } .form-wrap { padding-bottom: 30px; } .form-wrap h2.modal-title { font-family: "Manrope", sans-serif; font-weight: 800; color: var(--ink) !important; margin-bottom: 26px; font-size: 30px; } .form-wrap .form-label { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 14px; color: var(--ink) !important; margin-bottom: 6px; } .form-group { margin-bottom: 18px; } .form-control, .nice-select { border: 1.5px solid var(--hairline) !important; border-radius: var(--r-sm) !important; padding: 12px 16px !important; font-size: 15px; color: var(--ink); background: var(--surface-50); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); box-shadow: none; } .form-control:focus, .nice-select:focus, .nice-select.open { border-color: var(--brand) !important; background: #fff; box-shadow: 0 0 0 4px rgba(32, 187, 153, .14) !important; outline: none; } /* Modal action buttons */ .enquiry-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; } .enquiry-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15px; padding: 13px 30px !important; border-radius: var(--r-pill) !important; border: 0 !important; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease) !important; } .btn-whatsapp { background: #25D366 !important; color: #fff !important; box-shadow: 0 10px 22px rgba(37, 211, 102, .3); } .btn-whatsapp:hover { background: #1EBE5A !important; transform: translateY(-2px); } .btn-mail { background: var(--brand) !important; color: #fff !important; box-shadow: var(--shadow-brand); } .btn-mail:hover { background: var(--brand-700) !important; transform: translateY(-2px); } /* -------------------------------------------------------------------------- 17. FLOATING ACTIONS & BACK-TO-TOP -------------------------------------------------------------------------- */ #btn_float a { color: var(--brand) !important; border-color: var(--brand) !important; font-family: "Manrope", sans-serif; font-weight: 700; } #btn_float a:hover { background: var(--brand) !important; border-color: var(--brand) !important; } /* Back-to-top: white disc, brand arrow, brand progress ring */ .scroll-up { background: #fff; border-radius: 50%; box-shadow: 0 10px 26px rgba(16, 24, 40, .16), inset 0 0 0 2px var(--brand-100); } .scroll-up::after { background: transparent !important; color: var(--brand) !important; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome; } .scroll-up:hover::after { color: var(--brand-700) !important; } .scroll-up svg.scroll-circle path { stroke: var(--brand); } /* -------------------------------------------------------------------------- 18. IMAGES / LOADING POLISH -------------------------------------------------------------------------- */ img { max-width: 100%; } /* -------------------------------------------------------------------------- 19. RESPONSIVE REFINEMENTS -------------------------------------------------------------------------- */ @media (max-width: 1199px) { .header-1 .mega-menu-wrapper .header-main .header-left { gap: 0 !important; } } @media (max-width: 991px) { .section-title h1, .section-title h2 { font-size: clamp(26px, 6vw, 34px); } .about-info-items { gap: 18px; } .counter-wrapper .counter-main-items { padding: 32px 20px; } } @media (max-width: 575px) { body { font-size: 16px; } .service-items-2 .service-content { padding: 22px 22px 26px; } .enquiry-actions .btn { width: 100%; } } /* ========================================================================== 20. LAYOUT v2 — fresh section compositions (not the template's boxes) ========================================================================== */ /* ---- 20a. STATS STRIP — clean standalone card (no fragile overlap) ---- */ .Counter-section.section-padding { padding: 16px 0 88px !important; background: transparent; position: relative; z-index: 30; margin-top: 0; } /* main.css pulls the card up -50px…-5px across breakpoints — neutralise */ .counter-wrapper .counter-main-items { margin-top: 0 !important; } .Counter-section .industril-image { display: none; } /* decorative template art */ .Counter-section .counter-wrapper .counter-main-items { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 36px 48px; gap: 18px; } .Counter-section .counter-items { flex: 1 1 0; min-width: 150px; text-align: center; position: relative; } .Counter-section .counter-items:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); width: 1px; height: 52px; background: var(--hairline); } .Counter-section .counter-items h2 { margin-bottom: 2px; } @media (max-width: 991px) { .Counter-section.section-padding { margin-top: 0; padding: 8px 0 64px !important; } .Counter-section .counter-wrapper .counter-main-items { padding: 26px 22px; } .Counter-section .counter-items { flex: 1 1 40%; } .Counter-section .counter-items:nth-child(2)::after { display: none; } } /* ---- 20b. HOME SERVICES — full-bleed image tiles w/ overlay content ---- */ .home-services .service-items-2 { position: relative; border: 0; border-radius: var(--r-lg); min-height: 400px; box-shadow: var(--shadow-sm); } .home-services .service-items-2 .service-image { position: absolute; inset: 0; aspect-ratio: auto; border: 0; } .home-services .service-items-2 .service-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 26, 22, 0) 30%, rgba(9, 26, 22, .55) 62%, rgba(9, 26, 22, .88) 100%); transition: background .4s var(--ease); } .home-services .service-items-2 .service-image img { width: 100%; height: 100%; object-fit: cover; } .home-services .service-items-2 .service-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 30px 30px; } .home-services .service-items-2 .service-content h3 { margin-bottom: 10px; } .home-services .service-items-2 .service-content h3 a { color: #fff; } .home-services .service-items-2 .service-content h3 a:hover { color: var(--brand); } .home-services .service-items-2 .service-content p { color: rgba(255, 255, 255, .82); margin-bottom: 4px; font-size: 15px; } .home-services .service-items-2 .service-content .theme-btn-2 { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; padding: 9px 22px; font-size: 14px; } .home-services .service-items-2 .service-content .theme-btn-2:hover { background: var(--brand); border-color: var(--brand); color: #fff; } @media (max-width: 767px) { .home-services .service-items-2 { min-height: 340px; } } /* ---- 20c. ABOUT — mirrored composition ---- */ .about-section .about-wrapper > .row { flex-direction: row-reverse; } .about-wrapper .about-image { box-shadow: var(--shadow-lg); } /* ---- 20d. PRODUCTS — horizontal snap strip (curated, not a wall) ---- */ .products-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(230px, 22.5%, 292px); gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 10px 4px 26px; scrollbar-width: thin; scrollbar-color: var(--brand) var(--surface-100); } .products-scroller::-webkit-scrollbar { height: 6px; } .products-scroller::-webkit-scrollbar-track { background: var(--surface-100); border-radius: 6px; } .products-scroller::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 6px; } .products-scroller .product-card { scroll-snap-align: start; } @media (max-width: 767px) { .products-scroller { grid-auto-columns: 72%; } } /* ---- 20e. CATEGORY PAGES — product cards with real pack shots ---- */ .service-section-2:not(.home-services) .service-items-2 .service-image { aspect-ratio: 4 / 3; background: radial-gradient(120% 90% at 50% 25%, #ffffff 0%, var(--surface-100) 100%); border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; } .service-section-2:not(.home-services) .service-items-2 .service-image img { width: 100%; height: 100%; object-fit: cover; } /* Studio pack shots: float on the light panel instead of cropping */ .service-section-2:not(.home-services) .service-items-2 .service-image img[src*="eporex-products"] { object-fit: contain; mix-blend-mode: multiply; padding: 18px; } .service-items-2 .service-content h6 { font-family: "Manrope", sans-serif; font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.4; letter-spacing: .01em; } .service-items-2 .service-content .btn.btn-primary { background: var(--brand) !important; border: 0 !important; border-radius: var(--r-pill); font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14.5px; padding: 11px 26px; box-shadow: var(--shadow-brand); transition: transform .3s var(--ease), background .3s var(--ease); } .service-items-2 .service-content .btn.btn-primary:hover { background: var(--brand-700) !important; transform: translateY(-2px); } /* ========================================================================== 21. MODERN PASS v3 Custom hero banner, marquee testimonials, micro-interactions, category product cards v2. Everything below is additive and content-agnostic. ========================================================================== */ /* ---- 21a. HERO — remove the dead 140px white rail on the right ---- */ .hero-section::before { display: none !important; content: none !important; } .hero-section .hero-social { display: none !important; } /* ---- 21b. SCROLL PROGRESS BAR (injected by eporex-modern.js) ---- */ .epx-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-700) 100%); z-index: 100000; pointer-events: none; border-radius: 0 3px 3px 0; } /* ---- 21c. NAVBAR AUTO-HIDE (down = hide, up = reveal) ---- */ #header-sticky { transition: transform .45s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } #header-sticky.sticky.epx-nav-hidden { transform: translateY(-110%); } /* ---- 21d. CUSTOM HERO BANNER (index.php — client image slots supported) ---- */ .epx-banner { position: relative; overflow: hidden; background: radial-gradient(52% 68% at 84% 12%, rgba(32, 187, 153, .16) 0%, rgba(32, 187, 153, 0) 100%), radial-gradient(46% 60% at 8% 88%, rgba(20, 138, 113, .13) 0%, rgba(20, 138, 113, 0) 100%), radial-gradient(38% 48% at 28% 14%, rgba(32, 187, 153, .09) 0%, rgba(32, 187, 153, 0) 100%), linear-gradient(180deg, #FDFFFE 0%, #F2FAF8 60%, #EAF6F2 100%); padding: 108px 0 96px; } @media (max-width: 991px) { .epx-banner { padding: 76px 0 72px; } } /* Client banner images (optional) crossfade behind the content */ .epx-banner__slides { position: absolute; inset: 0; z-index: 0; } .epx-banner__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.04); transition: opacity 1.4s var(--ease), transform 7s linear; } .epx-banner__slide.is-active { opacity: 1; transform: scale(1); } /* Legibility scrim only when client images are present */ .epx-banner.has-images::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .82) 46%, rgba(255, 255, 255, .55) 100%); } /* Soft animated blobs + faint grid — pure decoration */ .epx-banner__blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: 1; pointer-events: none; } .epx-banner__blob--1 { width: 420px; height: 420px; right: -110px; top: -120px; background: rgba(32, 187, 153, .30); animation: epx-drift 16s ease-in-out infinite alternate; } .epx-banner__blob--2 { width: 340px; height: 340px; left: -130px; bottom: -110px; background: rgba(20, 138, 113, .22); animation: epx-drift 20s ease-in-out infinite alternate-reverse; } @keyframes epx-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(34px, 26px) scale(1.12); } } .epx-banner__grid { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(27, 27, 27, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 27, 27, .035) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: radial-gradient(75% 85% at 50% 30%, #000 0%, transparent 100%); mask-image: radial-gradient(75% 85% at 50% 30%, #000 0%, transparent 100%); pointer-events: none; } .epx-banner__content { position: relative; z-index: 3; max-width: 780px; } .epx-banner__kicker { display: inline-flex; align-items: center; gap: 9px; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-700); background: rgba(255, 255, 255, .72); border: 1px solid var(--brand-100); border-radius: var(--r-pill); padding: 8px 18px; box-shadow: var(--shadow-xs); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); margin-bottom: 22px; } .epx-banner__kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(32, 187, 153, .18); } .epx-banner__title { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.08; margin-bottom: 10px; color: var(--ink); } .epx-banner__title .epx-grad { background: linear-gradient(92deg, var(--brand) 10%, var(--brand-700) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--brand); } /* Rotating category line (typewriter) */ .epx-banner__rotator { font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(21px, 2.5vw, 30px); letter-spacing: -.02em; color: var(--brand-700); min-height: 1.5em; margin-bottom: 18px; } .epx-banner__rotator .epx-caret { display: inline-block; width: 3px; height: .95em; margin-left: 4px; vertical-align: -.12em; background: var(--brand); animation: epx-caret 1s steps(1) infinite; } @keyframes epx-caret { 50% { opacity: 0; } } .epx-banner__lead { font-size: 17.5px; line-height: 1.8; color: var(--ink-2); max-width: 640px; margin-bottom: 30px; } .epx-banner__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 38px; } /* Trust chips — frosted glass */ .epx-banner__trust { display: flex; gap: 14px; flex-wrap: wrap; } .epx-trust-chip { display: inline-flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .66); border: 1px solid rgba(32, 187, 153, .18); border-radius: var(--r-md); padding: 12px 20px; box-shadow: var(--shadow-xs); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); } .epx-trust-chip i { color: var(--brand); font-size: 19px; } .epx-trust-chip strong { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); line-height: 1.1; display: block; } .epx-trust-chip small { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); display: block; } /* Stats strip sits cleanly below the banner */ .epx-banner + .Counter-section { margin-top: 0; padding-top: 40px !important; } /* ---- 21e. BUTTON MICRO-INTERACTIONS ---- */ .theme-btn, .theme-btn-2, .enquire, .btn.btn-primary, .enquiry-actions .btn { position: relative; overflow: hidden; } .epx-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: epx-ripple .6s var(--ease) forwards; pointer-events: none; } .theme-btn-2 .epx-ripple { background: rgba(32, 187, 153, .22); } @keyframes epx-ripple { to { transform: scale(2.6); opacity: 0; } } /* Shine sweep on primary CTAs */ .theme-btn::after, .enquire::after { content: "" !important; display: block !important; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%); transform: skewX(-22deg); transition: left .6s var(--ease); pointer-events: none; } .theme-btn:hover::after, .enquire:hover::after { left: 130%; } /* ---- 21f. CARD SPOTLIGHT (mouse-follow glow, set via --mx/--my by JS) ---- */ .epx-spot { position: relative; } .epx-spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(32, 187, 153, .12), transparent 65%); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; z-index: 1; } .epx-spot:hover::after { opacity: 1; } /* Product card gentle 3D tilt (JS sets --rx/--ry) */ @media (hover: hover) and (pointer: fine) { .products-scroller .product-card { transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .25s ease-out, box-shadow .4s var(--ease), border-color .4s var(--ease); } .products-scroller .product-card:hover { --ty: -8px; } } /* ---- 21g. TESTIMONIAL MARQUEE ---- */ .epx-testimonials { background: var(--surface-50); overflow: hidden; } .epx-marquee { display: flex; gap: 24px; width: max-content; padding: 14px 0 6px; animation: epx-marquee 42s linear infinite; } .epx-marquee:hover { animation-play-state: paused; } @keyframes epx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .epx-marquee { animation: none; flex-wrap: wrap; width: auto; } } .epx-quote-card { width: 400px; max-width: 86vw; background: rgba(255, 255, 255, .8); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); padding: 30px 32px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .epx-quote-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--brand-100); } .epx-quote-card .quote-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--brand-050); color: var(--brand); font-size: 16px; margin-bottom: 16px; } .epx-quote-card p { font-size: 15.5px; line-height: 1.75; color: var(--ink-2); margin-bottom: 18px; } .epx-quote-card .quote-client { display: flex; align-items: center; gap: 12px; } .epx-quote-card .quote-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: "Manrope", sans-serif; font-weight: 800; font-size: 16px; flex: 0 0 auto; } .epx-quote-card .quote-client h6 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--ink); } .epx-quote-card .quote-client span { font-size: 13px; color: var(--brand-700); font-weight: 600; } .epx-quote-card .quote-stars { color: #F5B547; font-size: 12.5px; letter-spacing: 2px; margin-bottom: 12px; } /* ---- 21h. CATEGORY PRODUCT CARDS v2 ---- */ .epx-product-grid .service-items-2 { display: flex; flex-direction: column; } .epx-product-grid .service-items-2 .service-content { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; } .epx-product-grid .service-items-2 .service-content h6 { margin-bottom: 12px; } .epx-product-grid .service-items-2 .service-content p { margin-bottom: 0; } .epx-product-grid .service-items-2 .service-content .btn.btn-primary { margin-top: 22px; align-self: center; } /* Long client descriptions: clamped with an accessible expander */ .epx-desc { position: relative; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; transition: max-height .5s var(--ease); } .epx-desc.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; } .epx-desc-toggle { background: none; border: 0; padding: 8px 0 0; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 13.5px; color: var(--brand); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color .3s var(--ease); } .epx-desc-toggle:hover { color: var(--brand-700); } .epx-desc-toggle i { transition: transform .3s var(--ease); font-size: 11px; } .epx-desc-toggle[aria-expanded="true"] i { transform: rotate(180deg); } /* Branded tile for products whose pack shot isn't available yet. Swap in a real image by replacing the div with a plain . */ .epx-media-pending { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(80% 90% at 78% 18%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(140deg, var(--brand) 0%, var(--brand-700) 100%); position: relative; overflow: hidden; } .epx-media-pending::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 30px 30px; } .epx-media-pending img { width: 148px !important; height: auto !important; object-fit: contain !important; mix-blend-mode: normal !important; padding: 0 !important; position: relative; filter: drop-shadow(0 6px 14px rgba(9, 26, 22, .25)); } .epx-media-pending span { position: relative; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .85); } /* Pack shots inside the media panel keep their studio-float treatment */ .service-section-2:not(.home-services) .service-items-2 .service-image .epx-media-pending { padding: 0; } /* ---- 21i. SECTION ACCENTS ---- */ /* Wave divider utility (used above the footer) */ .epx-wave { display: block; width: 100%; height: 70px; margin-bottom: -1px; color: var(--ink); } .epx-wave svg { display: block; width: 100%; height: 100%; } /* Products section headline strip: subtle huge background word */ .products-section { position: relative; overflow: hidden; } .products-section::before { content: "EPOREX"; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(90px, 15vw, 210px); letter-spacing: .06em; color: rgba(32, 187, 153, .05); white-space: nowrap; pointer-events: none; line-height: 1; } /* ---- 21j. ACTIVE NAV INDICATOR (set by eporex-modern.js) ---- */ .header-main .main-menu nav > ul > li.epx-active > a { color: var(--brand) !important; } .header-main .main-menu nav > ul > li.epx-active > a::before { width: 100%; } .header-main .main-menu ul li .submenu li.epx-active > a { background: var(--brand-050) !important; color: var(--brand) !important; } /* ---- 21k. REDUCED MOTION ---- */ @media (prefers-reduced-motion: reduce) { .epx-banner__blob--1, .epx-banner__blob--2 { animation: none; } .epx-banner__slide { transition: opacity .6s ease; transform: none; } .theme-btn::after, .enquire::after { display: none !important; } .products-scroller .product-card { transform: none !important; } } /* ---- 21m. TEMPLATE DARK-THEME LEFTOVER OVERRIDES ---- */ /* main.css paints a 90% black sheet over the stats strip — remove it and recolor the numbers for the light card. */ .counter-wrapper .counter-main-items::before { display: none !important; content: none !important; } .counter-wrapper .counter-main-items .counter-items h2, .counter-wrapper .counter-main-items .counter-items h2 span, .counter-wrapper .counter-main-items .counter-items h2 .text { color: var(--brand) !important; } .counter-wrapper .counter-main-items .counter-items p { color: var(--ink-2) !important; } /* Checklist copy inside the about/product intro slider was still white */ .about-content ul li, #news-slider14 .about-content ul li, .about-wrapper .about-content ul li, .about-wrapper-2 .about-content ul li { color: var(--ink-2) !important; } /* Category grids: pin the enquiry button to the card bottom regardless of how long each product description is. */ .epx-product-grid .service-items-2 .service-content p.epx-desc { margin-bottom: 16px; } .epx-product-grid .service-items-2 .service-content .btn.btn-primary { margin-top: auto; } .epx-product-grid .service-items-2 .service-content .epx-desc-toggle { margin-bottom: 16px; } /* ---- 21l. SMALL SCREENS ---- */ @media (max-width: 575px) { .epx-banner { padding: 60px 0 56px; } .epx-banner__actions .theme-btn, .epx-banner__actions .theme-btn-2 { width: 100%; justify-content: center; text-align: center; } .epx-trust-chip { flex: 1 1 100%; } .epx-quote-card { padding: 24px 22px; } } /* ========================================================================== 22. MODERN PASS v4 — uniform product media, contact cards, richer about, business-centric category intros, enquiry form pipeline states. ========================================================================== */ /* ---- 22a. UNIFORM PRODUCT MEDIA ----------------------------------------- Every product image renders in an identical square frame. - Scene pack shots → cover crop (full-bleed photo card) - White studio shots → seamless contain on white (looks identical in frame) -------------------------------------------------------------------------- */ .service-section-2:not(.home-services) .service-items-2 .service-image { aspect-ratio: 1 / 1; background: #fff; padding: 0; } .service-section-2:not(.home-services) .service-items-2 .service-image img[src*="eporex-products"] { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; padding: 0; } .service-section-2:not(.home-services) .service-items-2 .service-image img[src*="dji-8000"], .service-section-2:not(.home-services) .service-items-2 .service-image img[src*="ewt-501"], .service-section-2:not(.home-services) .service-items-2 .service-image img[src*="crystal-clear"], .service-section-2:not(.home-services) .service-items-2 .service-image img[src*="pur-400"], .service-section-2:not(.home-services) .service-items-2 .service-image img[src*="ceymcop"] { object-fit: contain; padding: 5%; } /* ---- 22b. PRODUCT SHOWCASE GRID (all products, even rhythm) ---- */ .products-grid .product-card { border-radius: var(--r-lg); } .products-grid .product-card__media { aspect-ratio: 1 / 1; padding: 0; background: #fff; } .products-grid .product-card__media img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; } .products-grid .product-card__media img[src*="dji-8000"], .products-grid .product-card__media img[src*="ewt-501"], .products-grid .product-card__media img[src*="crystal-clear"], .products-grid .product-card__media img[src*="pur-400"], .products-grid .product-card__media img[src*="ceymcop"] { object-fit: contain; padding: 6%; } .products-grid .product-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.75em; } /* ---- 22c. HOME CATEGORY CARDS (real pack shots, consistent frame) ---- */ .service-section-2.epx-cat-grid .service-items-2 { display: flex; flex-direction: column; } .service-section-2.epx-cat-grid .service-items-2 .service-image { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--hairline); background: #fff; } .service-section-2.epx-cat-grid .service-items-2 .service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .service-section-2.epx-cat-grid .service-items-2:hover .service-image img { transform: scale(1.06); } .service-section-2.epx-cat-grid .service-items-2 .service-image img[src*="dji-8000"], .service-section-2.epx-cat-grid .service-items-2 .service-image img[src*="ewt-501"], .service-section-2.epx-cat-grid .service-items-2 .service-image img[src*="crystal-clear"], .service-section-2.epx-cat-grid .service-items-2 .service-image img[src*="pur-400"] { object-fit: contain; padding: 4%; } .service-section-2.epx-cat-grid .service-items-2 .service-content { display: flex; flex-direction: column; flex: 1; } .service-section-2.epx-cat-grid .service-items-2 .service-content p { margin-bottom: 18px; } .service-section-2.epx-cat-grid .service-items-2 .service-content .theme-btn-2 { margin-top: auto !important; align-self: flex-start; } /* ---- 22d. CATEGORY INTRO STRIP (business-centric) ---- */ .epx-cat-intro { position: relative; z-index: 5; margin-top: -46px; } .epx-cat-intro .epx-cat-intro__card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 26px 34px; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; } .epx-cat-intro h2 { font-size: 21px; margin-bottom: 4px; } .epx-cat-intro p { margin: 0; font-size: 15px; max-width: 640px; } .epx-cat-intro .epx-cat-intro__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .epx-cat-intro .epx-count-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-050); color: var(--brand-700); border-radius: var(--r-pill); font-family: "Manrope", sans-serif; font-weight: 700; font-size: 13.5px; padding: 9px 18px; white-space: nowrap; } @media (max-width: 767px) { .epx-cat-intro .epx-cat-intro__card { padding: 22px; } } /* ---- 22e. CONTACT INFO CARDS (icons were white-on-white) ---- */ section.contact-info-area .contact-info-wrapper-2 .contact-info-items { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); padding: 44px 26px 38px; height: 100%; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } section.contact-info-area .contact-info-wrapper-2 .contact-info-items:hover, section.contact-info-area .contact-info-wrapper-2 .contact-info-items.active { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--brand-100); } /* Beat the inline "-webkit-text-fill-color:#fff!important" from footer.php: paint a brand disc behind the white glyph instead. */ section.contact-info-area .contact-info-wrapper-2 .contact-info-items .icon { width: 86px; height: 86px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 30px !important; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%) !important; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; -webkit-text-fill-color: #fff !important; color: #fff !important; box-shadow: var(--shadow-brand); margin-bottom: 22px; } section.contact-info-area .contact-info-wrapper-2 .contact-info-items .content h3 { font-size: 22px; font-weight: 800; } section.contact-info-area .contact-info-wrapper-2 .contact-info-items .content ul li, section.contact-info-area .contact-info-wrapper-2 .contact-info-items .content ul li a { color: var(--ink-2); font-size: 15px; } section.contact-info-area .contact-info-wrapper-2 .contact-info-items .content ul li a:hover { color: var(--brand); } .map-items .googpemap iframe { border-radius: var(--r-lg); height: 450px; } /* ---- 22f. ABOUT PAGE v2 ---- */ .epx-about-collage { position: relative; padding-right: 56px; padding-bottom: 56px; } .epx-about-collage .collage-main { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .epx-about-collage .collage-main img { width: 100%; display: block; } .epx-about-collage .collage-sub { position: absolute; right: 0; bottom: 0; width: 46%; border-radius: var(--r-md); overflow: hidden; border: 6px solid #fff; box-shadow: var(--shadow-md); } .epx-about-collage .collage-sub img { width: 100%; display: block; } .epx-about-collage .collage-badge { position: absolute; left: 22px; top: 22px; background: var(--brand); color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-brand); padding: 16px 20px; text-align: center; } .epx-about-collage .collage-badge strong { display: block; font-family: "Manrope", sans-serif; font-size: 30px; font-weight: 800; line-height: 1.1; } .epx-about-collage .collage-badge small { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .92; } @media (max-width: 991px) { .epx-about-collage { padding-right: 30px; padding-bottom: 40px; } } .epx-feature-list { list-style: none; padding: 0; margin: 20px 0 6px; } .epx-feature-list li { position: relative; padding-left: 34px; margin-bottom: 12px; color: var(--ink-2); } .epx-feature-list li i { position: absolute; left: 0; top: 4px; color: var(--brand); font-size: 17px; } .epx-value-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); padding: 32px 28px; height: 100%; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .epx-value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--brand-100); } .epx-value-card .value-icon { width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--brand-050); color: var(--brand); font-size: 22px; margin-bottom: 18px; } .epx-value-card h5 { font-size: 18px; margin-bottom: 10px; } .epx-value-card p { font-size: 14.5px; margin: 0; } .epx-about-cta { background: radial-gradient(60% 120% at 90% 10%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(120deg, var(--brand) 0%, var(--brand-700) 100%); border-radius: var(--r-lg); padding: 44px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; box-shadow: var(--shadow-brand); } .epx-about-cta h3 { color: #fff; margin-bottom: 6px; font-size: 26px; } .epx-about-cta p { color: rgba(255, 255, 255, .88); margin: 0; } .epx-about-cta .theme-btn { background: #fff; color: var(--brand-700); box-shadow: 0 12px 26px rgba(9, 26, 22, .22); } .epx-about-cta .theme-btn:hover { background: var(--ink); color: #fff; } @media (max-width: 767px) { .epx-about-cta { padding: 32px 26px; } } /* ---- 22g. GALLERY PRODUCT TILES ---- */ .gallery-wrapper .gallery-image-2.epx-shot { aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--hairline); } .gallery-wrapper .gallery-image-2.epx-shot img { width: 100%; height: 100% !important; object-fit: cover; } .gallery-wrapper .gallery-image-2.epx-shot img[src*="dji-8000"], .gallery-wrapper .gallery-image-2.epx-shot img[src*="ewt-501"], .gallery-wrapper .gallery-image-2.epx-shot img[src*="crystal-clear"], .gallery-wrapper .gallery-image-2.epx-shot img[src*="pur-400"], .gallery-wrapper .gallery-image-2.epx-shot img[src*="ceymcop"] { object-fit: contain; padding: 6%; } .epx-gallery-heading { margin: 44px 0 6px; } .epx-gallery-heading h2 { font-size: 26px; position: relative; padding-bottom: 14px; } .epx-gallery-heading h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 3px; background: var(--brand); } /* ---- 22h. ENQUIRY FORM PIPELINE ---- */ .epx-form-status { display: none; border-radius: var(--r-sm); padding: 13px 18px; font-size: 14.5px; font-weight: 600; margin: 4px 0 14px; } .epx-form-status.is-ok { display: block; background: var(--brand-050); color: var(--brand-700); border: 1px solid var(--brand-100); } .epx-form-status.is-err { display: block; background: #FDF1F1; color: #B4232C; border: 1px solid #F5D5D7; } .btn.is-loading { pointer-events: none; opacity: .75; } .btn.is-loading .epx-btn-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: epx-spin .7s linear infinite; margin-right: 4px; } @keyframes epx-spin { to { transform: rotate(360deg); } } /* Success check overlay */ .epx-sent-overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, .96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 20; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); } .epx-sent-overlay.is-visible { opacity: 1; pointer-events: auto; } .epx-sent-overlay .check { width: 84px; height: 84px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 36px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-brand); animation: epx-pop .5s var(--ease); } @keyframes epx-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } } .epx-sent-overlay h5 { font-size: 20px; } .epx-sent-overlay p { font-size: 14.5px; color: var(--ink-2); margin: 0; } /* ========================================================================== 23. MODERN PASS v5 — density + float stacking + inline validation ========================================================================== */ /* ---- 23a. HOME SERVICE CARDS: 4-up density (cards were oversized) ---- */ .service-section-2.epx-cat-grid .service-items-2 .service-content { padding: 22px 24px 26px; } .service-section-2.epx-cat-grid .service-items-2 .service-content h3 { font-size: 19px; margin-bottom: 10px; } .service-section-2.epx-cat-grid .service-items-2 .service-content p { font-size: 14.5px; margin-bottom: 16px; } .service-section-2.epx-cat-grid .service-items-2 .service-content .theme-btn-2 { padding: 9px 22px; font-size: 14px; } .service-section-2.epx-cat-grid .service-items-2 { margin-bottom: 24px; } /* ---- 23b. STATS CARD BREATHING ROOM ---- */ .Counter-section .counter-wrapper .counter-main-items { padding: 44px 48px; } .Counter-section .counter-items { padding: 4px 0; } @media (max-width: 991px) { .Counter-section .counter-wrapper .counter-main-items { padding: 30px 22px; } } /* ---- 23c. FLOATING ELEMENTS STACKING ORDER -------------------------------- Desktop: back-to-top bottom-right, WhatsApp to its left. Mobile/tablet: call button (bottom 90) and WhatsApp (bottom 10) stay; back-to-top moves ABOVE the call button so nothing overlaps it. --------------------------------------------------------------------------- */ div.scroll-up { right: 25px !important; bottom: 25px !important; z-index: 9998 !important; } @media (max-width: 991px) { div.scroll-up { bottom: 150px !important; right: 22px !important; } } /* ---- 23d. HOME ABOUT IMAGE + EXPERIENCE BADGE (badge text was clipped by the rounded-image overflow) ---- */ .about-wrapper .about-image { width: 100%; height: auto; } .about-wrapper .about-image > img { width: 100%; height: auto; max-height: 600px; object-fit: cover; } .about-wrapper .about-image .working-area { left: 20px !important; top: 20px !important; border-radius: var(--r-md); padding: 18px 22px; } .about-wrapper .about-image .working-area .inner::before { display: none; } .about-wrapper .about-image .working-area .inner .icon-box i { font-size: 34px; margin-bottom: 8px; } .about-wrapper .about-image .working-area .inner .icon-box h3 { font-size: 22px; color: #fff !important; } .about-wrapper .about-image .working-area .inner .icon-box p { white-space: nowrap; font-size: 13px; } /* ---- 23e. INLINE FORM VALIDATION + TOAST ---- */ .form-control.epx-invalid { border-color: #D64545 !important; background: #FFF9F9 !important; box-shadow: 0 0 0 4px rgba(214, 69, 69, .10) !important; } .epx-field-err { display: block; color: #B4232C; font-size: 12.5px; font-weight: 600; margin-top: 6px; } .epx-toast { position: fixed; top: 24px; left: 50%; transform: translate(-50%, -18px); display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; font-family: "Manrope", sans-serif; font-weight: 600; font-size: 14.5px; padding: 14px 22px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); z-index: 100002; opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease); max-width: min(92vw, 560px); } .epx-toast.is-in { opacity: 1; transform: translate(-50%, 0); } .epx-toast i { font-size: 17px; flex: 0 0 auto; } .epx-toast.is-ok i { color: var(--brand); } .epx-toast.is-err i { color: #FF7A7A; } /* ---- 23f. HARD-LOCK SQUARE MEDIA FRAMES ----------------------------------- aspect-ratio alone can be stretched by a portrait image's intrinsic min-content height. Absolutely filling the frame makes every media box exactly the same size regardless of the photo inside. --------------------------------------------------------------------------- */ .products-grid .product-card__media, .service-section-2:not(.home-services) .service-items-2 .service-image, .gallery-wrapper .gallery-image-2.epx-shot { position: relative; overflow: hidden; } .products-grid .product-card__media > img, .service-section-2:not(.home-services) .service-items-2 .service-image > img, .gallery-wrapper .gallery-image-2.epx-shot > img { position: absolute; inset: 0; width: 100%; height: 100% !important; } .service-section-2:not(.home-services) .service-items-2 .service-image > .epx-media-pending { position: absolute; inset: 0; }