/** * CEF Shop — Main Stylesheet (v2 — Divi-compatible rewrite) * * Sections: * 1. RESET & BASE * 2. DIVI CONFLICT OVERRIDES ← KEY fixes for narrow-card bug * 3. LAYOUT UTILITIES * 4. BUTTONS * 5. HEADER / NAVBAR * 6. HERO BANNER * 7. CATEGORY STRIP * 8. SECTION HEADERS * 9. PRODUCT CARD * 10. PRODUCT GRIDS * 11. PROMO BANNER * 12. SHOP ARCHIVE PAGE * 13. FOOTER * 14. WOOCOMMERCE OVERRIDES (global) * 15. RESPONSIVE — Tablet (≤ 1024px) * 16. RESPONSIVE — Mobile (≤ 768px) * 17. RESPONSIVE — Small Mobile (≤ 480px) * * @package CEF_Shop_Child * @since 1.0.0 (v2) */ /* ============================================================ 1. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* Apply Poppins everywhere — overrides Divi's Open Sans */ body, body *:not(.et-pb-icon):not([class*='dashicons']):not([class*='ETmodules']) { font-family: var(--cef-font) !important; } html { /* scroll-behavior left to the browser default (auto) so native/OS-level momentum + inertia scrolling stays fully smooth and GPU-composited */ } body { color: var(--cef-text); background: var(--cef-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* [PERF] `overflow-x: hidden` on turns it into a scroll container, which breaks the fast/composited scrolling path and fights with the `position: sticky` header below — this was the main cause of the slow/janky page scroll. `clip` prevents the same horizontal overflow without creating a scrolling box, so native smooth scrolling and the sticky header both stay on the fast (compositor) path. */ overflow-x: clip; } a { color: var(--cef-primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--cef-secondary); } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } /* ============================================================ 2. DIVI CONFLICT OVERRIDES Root cause of narrow product cards: Divi sets max-width on .container and adds float/width rules to #et-main-area. We neutralise all of that here. ============================================================ */ /* Remove Divi's default header & footer — we provide our own */ #main-header { display: none !important; } #main-footer { display: none !important; } #top-header { display: none !important; } .et_search_outer { display: none !important; } /* Force the main area to full viewport width */ #page-container, #et-main-area { width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; padding-top: 0 !important; /* Divi adds top padding for sticky header */ } /* Neutralise Divi's .container so it doesn't constrain our sections */ .et_builder_inner_content, .et_builder_inner_content .container, #et-main-area .container:not(.cef-container) { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Kill Divi floating sidebar layout if it appears */ #left-area, #sidebar { display: none !important; } /* Prevent Divi adding body padding for its sticky nav */ body.et_fixed_nav { padding-top: 0 !important; } body.admin-bar { padding-top: 32px !important; } /* Keep WP admin bar space */ /* WooCommerce loop list override — Divi forcibly sets li.product widths */ .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1.25rem !important; list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; float: none !important; clear: both !important; } .woocommerce ul.products li.product { width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; } /* ============================================================ 3. LAYOUT UTILITIES ============================================================ */ .cef-container { width: 100%; max-width: var(--cef-container); /* 1200px */ margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } /* Breadcrumb */ .cef-breadcrumb { padding: 0.75rem 0; font-size: 0.8rem; color: var(--cef-text-muted); border-bottom: 1px solid var(--cef-border); margin-bottom: 1.5rem; } .cef-breadcrumb a { color: var(--cef-primary); } .cef-breadcrumb a:hover { color: var(--cef-secondary); } .cef-breadcrumb__sep { margin: 0 0.35rem; opacity: 0.45; } .cef-empty-notice { text-align: center; color: var(--cef-text-muted); padding: 3rem; font-size: 0.95rem; width: 100%; } /* ============================================================ 4. BUTTONS ============================================================ */ .cef-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--cef-font) !important; font-weight: 600; border: 2px solid transparent; border-radius: var(--cef-radius-lg); cursor: pointer; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; white-space: nowrap; line-height: 1.3; } .cef-btn:hover { transform: translateY(-1px); } .cef-btn:active { transform: translateY(0); } /* Sizes */ .cef-btn--sm { font-size: 0.78rem; padding: 0.4rem 0.9rem; } .cef-btn--md { font-size: 0.9rem; padding: 0.55rem 1.25rem; } .cef-btn--lg { font-size: 1rem; padding: 0.72rem 1.75rem; } /* Primary (dark blue) */ .cef-btn--primary { background-color: var(--cef-primary); color: #fff !important; border-color: var(--cef-primary); } .cef-btn--primary:hover { background-color: var(--cef-primary-dark); border-color: var(--cef-primary-dark); color: #fff !important; } /* Secondary (green) */ .cef-btn--secondary { background-color: var(--cef-secondary); color: #fff !important; border-color: var(--cef-secondary); } .cef-btn--secondary:hover { background-color: var(--cef-secondary-dark); border-color: var(--cef-secondary-dark); color: #fff !important; } /* Danger (red — donate) */ .cef-btn--danger { background-color: var(--cef-danger); color: #fff !important; border-color: var(--cef-danger); } .cef-btn--danger:hover { background-color: #a62a0b; border-color: #a62a0b; color: #fff !important; } /* Outline — [FIX] previously white text/border, meant only for dark backgrounds, but this variant is also used on white cards (product "View Book" button), where white-on-white made it look invisible/ disabled. Navy border + navy text reads correctly on light backgrounds, which is how every current usage actually renders. */ .cef-btn--outline { background-color: transparent; color: var(--cef-primary) !important; border-color: var(--cef-primary); } .cef-btn--outline:hover { background-color: var(--cef-primary); color: #fff !important; border-color: var(--cef-primary); } /* White (for coloured-bg sections) */ .cef-btn--white { background-color: #fff; color: var(--cef-primary) !important; border-color: #fff; } .cef-btn--white:hover { background-color: var(--cef-primary-light); border-color: var(--cef-primary-light); } /* ============================================================ 5. HEADER / NAVBAR — exact cef.org.pk match ============================================================ */ .cef-header { position: sticky; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; background: var(--cef-white); box-shadow: 0 1px 8px rgba(5,74,106,.10); /* [PERF] Shadow is now toggled via the .is-scrolled class (added by a rAF-throttled scroll listener) instead of being written inline on every scroll frame — the transition below makes that swap smooth. */ transition: box-shadow .2s ease; } .cef-header.is-scrolled { box-shadow: 0 4px 20px rgba(5,74,106,.18); } /* Single-row container: logo | nav | right-column — STRICT single line */ .cef-header__inner { display: flex; align-items: center; /* [FIX] On desktop `.cef-header__nav` has `flex:1` and fills the gap between logo and right-column either way, so this has no visual effect there. On mobile/tablet the nav is hidden (display:none), which removed that spacer entirely and left search/cart/hamburger stranded right next to the logo with a big dead gap on the right. `space-between` pushes them to the far right on every screen size where the nav spacer is gone. */ justify-content: space-between; height: var(--cef-navbar-height); /* 70px */ min-height: var(--cef-navbar-height); max-height: var(--cef-navbar-height); overflow: visible; gap: 1.25rem; flex-wrap: nowrap; } /* ── Logo — fixed width, no overflow ── */ .cef-header__logo { flex-shrink: 0; flex-grow: 0; line-height: 0; } .cef-header__logo a { display: flex; align-items: center; line-height: 0; } .cef-header__logo-img { max-height: 52px; width: auto; object-fit: contain; display: block; flex-shrink: 0; } /* If the logo file 404s on the server, hide the broken-image icon and show the site name text instead (see onerror handler in header.php). */ .cef-header__logo-img.is-broken { display: none !important; } .cef-header__logo-text { font-size: .85rem; font-weight: 700; color: var(--cef-primary); white-space: nowrap; line-height: 1.2; } /* ── Navigation (desktop centre) ── */ .cef-header__nav { flex: 1; display: flex; justify-content: center; align-items: center; } .cef-nav__list { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; margin: 0; } .cef-nav__list > li > a { display: block; padding: 0 .72rem; font-size: .76rem; font-weight: 600; color: var(--cef-primary); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; line-height: var(--cef-navbar-height); position: relative; transition: color .2s; } .cef-nav__list > li > a::after { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 2.5px; background: var(--cef-secondary); border-radius: 2px 2px 0 0; transition: left .2s, right .2s; } .cef-nav__list > li > a:hover { color: var(--cef-primary-dark); } .cef-nav__list > li.current-menu-item > a { color: var(--cef-primary-dark); font-weight: 700; } .cef-nav__list > li > a:hover::after, .cef-nav__list > li.current-menu-item > a::after { left: .72rem; right: .72rem; } /* Submenu accordion toggle (mobile drawer only) — hidden by default everywhere; shown + positioned by cef-divi-fixes.css inside the ≤1024px mobile drawer block. Keeping this default here (outside any media query) prevents it from ever leaking into the desktop nav. */ .cef-submenu-toggle { display: none; } /* Dropdown sub-menu — matches cef.org.pk main site: rounded white card, soft shadow, no border, small chevron next to parent items that have children, smooth fade-in on hover. */ .cef-nav__list li { position: relative; } .cef-nav__list li.menu-item-has-children > a { display: inline-flex; align-items: center; gap: .3rem; } .cef-nav__list li.menu-item-has-children > a::before { content: ''; display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; opacity: .75; } .cef-nav__list li.menu-item-has-children:hover > a::before { transform: translateY(0) rotate(225deg); } /* Desktop dropdowns: keep flush under the parent link. Previous translateY(6–10px) left a dead gap — mouse left the

before reaching the panel, so the menu vanished mid-travel. */ .cef-nav__list .sub-menu { display: block; position: absolute; top: 100%; left: 0; transform: none; min-width: 230px; background: var(--cef-white); border: none; border-radius: 14px; box-shadow: 0 12px 32px rgba(5,74,106,.16); z-index: 200; padding: .55rem; margin: 0; list-style: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, visibility .15s; } .cef-nav__list li:hover > .sub-menu, .cef-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } /* Invisible hover bridge — desktop only (covers underline gap) */ @media (min-width: 1025px) { .cef-nav__list > li.menu-item-has-children > .sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } } .cef-nav__list .sub-menu a { display: block; padding: .6rem .85rem; font-size: .8rem; color: var(--cef-primary); font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 1.4; white-space: nowrap; border-radius: 9px; transition: background .15s, color .15s; } .cef-nav__list .sub-menu a::after { content: none !important; } .cef-nav__list .sub-menu a:hover { color: var(--cef-primary-dark); background: var(--cef-primary-light); } /* ── Right column: same single row as the nav menu ── */ .cef-header__right { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; height: 100%; /* Must stay visible — cart badge sits slightly outside the icon box */ overflow: visible; } /* Footer / drawer still use .cef-social-pill — keep the base style */ .cef-social-pill { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--cef-primary); color: #fff !important; transition: background .2s; flex-shrink: 0; } .cef-social-pill:hover { background: rgba(5,74,106,.75); } /* ── Buttons row (search + CTAs + cart) ── */ .cef-header__btn-row { display: flex; align-items: center; gap: 9px; } /* Search icon button */ .cef-search-icon-btn { background: none; border: none; cursor: pointer; color: var(--cef-primary); display: flex; align-items: center; padding: 0 2px; transition: color .2s; flex-shrink: 0; } .cef-search-icon-btn:hover { color: var(--cef-secondary); } /* Search dropdown + live results */ .cef-search-wrap { position: relative; } .cef-search-bar { position: absolute; top: calc(100% + .5rem); right: 0; width: min(92vw, 28rem); max-width: calc(100vw - 1.5rem); background: var(--cef-white); border: 1px solid rgba(5,74,106,.25); border-radius: var(--cef-radius-lg); box-shadow: var(--cef-shadow-lg); padding: .75rem; z-index: 400; box-sizing: border-box; } .cef-search-bar form { display: flex; flex-direction: column; gap: .5rem; } .cef-search-bar__input { width: 100%; border: 1px solid rgba(5,74,106,.3); border-radius: var(--cef-radius); padding: .55rem .85rem; font-size: .9rem; outline: none; font-family: var(--cef-font) !important; color: var(--cef-text); background: var(--cef-white); transition: border-color .2s; box-sizing: border-box; } .cef-search-bar__input:focus { border-color: var(--cef-primary); box-shadow: 0 0 0 2px rgba(5,74,106,.12); outline: none; } .cef-search-bar__actions { display: flex; align-items: center; gap: .5rem; } .cef-search-bar__btn { background: var(--cef-primary); color: #fff; border: none; border-radius: var(--cef-radius); padding: .42rem 1rem; font-size: .78rem; font-weight: 600; cursor: pointer; font-family: var(--cef-font) !important; transition: background .2s; } .cef-search-bar__btn:hover { background: var(--cef-primary-dark); } .cef-search-bar__cancel { background: none; border: none; cursor: pointer; font-size: .78rem; color: var(--cef-text-muted); padding: .42rem .75rem; border-radius: var(--cef-radius); font-family: var(--cef-font) !important; transition: background .2s, color .2s; } .cef-search-bar__cancel:hover { background: var(--cef-light-gray); color: var(--cef-text); } /* Live product results panel */ .cef-search-results { margin-top: .35rem; max-height: min(60vh, 22rem); overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: var(--cef-radius); background: var(--cef-white); } .cef-search-results[hidden] { display: none !important; } .cef-search-results__status { padding: .65rem .75rem; font-size: .8rem; color: var(--cef-text-muted); } .cef-search-results__item { display: flex; align-items: center; gap: .75rem; padding: .55rem .65rem; border-radius: 10px; color: var(--cef-text); text-decoration: none !important; transition: background .15s; } .cef-search-results__item:hover, .cef-search-results__item:focus { background: var(--cef-primary-light); color: var(--cef-primary-dark); } .cef-search-results__thumb { flex-shrink: 0; width: 48px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--cef-light-gray); } .cef-search-results__thumb--empty { display: flex; align-items: center; justify-content: center; font-size: .65rem; color: var(--cef-text-light); } .cef-search-results__meta { min-width: 0; flex: 1; } .cef-search-results__title { display: block; font-size: .84rem; font-weight: 600; color: var(--cef-primary); line-height: 1.3; margin-bottom: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Typed letters highlighted yellow as the visitor searches */ .cef-search-hl, .cef-search-results__title mark.cef-search-hl { background: #ffe566; color: inherit; font-weight: 800; padding: 0 .1em; border-radius: 2px; } .cef-search-results__price { display: block; font-size: .78rem; font-weight: 600; color: var(--cef-secondary-dark); } .cef-search-results__view-all { display: block; text-align: center; padding: .65rem; margin-top: .25rem; font-size: .8rem; font-weight: 600; color: var(--cef-primary); border-top: 1px solid var(--cef-border); } .cef-search-results__view-all:hover { color: var(--cef-secondary-dark); } /* Mobile: fixed full-width panel under the sticky header — never clips off the left edge the way an absolute dropdown did. */ @media (max-width: 1024px) { .cef-search-bar { position: fixed; top: calc(var(--cef-navbar-height, 62px) + 6px); left: 12px; right: 12px; width: auto; max-width: none; z-index: 100050; padding: .85rem; border-radius: 14px; box-shadow: 0 16px 40px rgba(5,74,106,.22); } .cef-search-bar__input { font-size: 1rem; padding: .7rem .9rem; } .cef-search-results { max-height: min(55vh, 20rem); } } /* ── Nav action buttons — pill-shape, same as cef.org.pk ── */ /* cef.org.pk uses Button variants: secondarySmall / primarySmall / dangerSmall */ .cef-nav-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; /* pill — same as cef.org.pk */ font-family: var(--cef-font) !important; font-weight: 600; font-size: .68rem; padding: .28rem .75rem; border: none; cursor: pointer; white-space: nowrap; text-decoration: none; transition: opacity .2s, transform .15s; line-height: 1.4; } .cef-nav-btn:hover { opacity: .88; transform: translateY(-1px); } /* Book Shop → secondarySmall (green) */ .cef-nav-btn--secondary { background: var(--cef-secondary); color: #fff !important; } /* CEF Online Academy → primarySmall (dark blue) */ .cef-nav-btn--primary { background: var(--cef-primary); color: #fff !important; } /* Donate Now → dangerSmall (red) */ .cef-nav-btn--danger { background: var(--cef-danger); color: #fff !important; } /* Cart icon — padding leaves room so the badge isn't clipped */ .cef-header__cart { position: relative; color: var(--cef-primary); display: flex; align-items: center; padding: .35rem .45rem .2rem .3rem; transition: color .2s; flex-shrink: 0; overflow: visible; } .cef-header__cart:hover { color: var(--cef-secondary); } .cef-header__cart-count { position: absolute; top: 0; right: 0; background: var(--cef-danger); color: #fff; border-radius: 50%; min-width: 16px; height: 16px; padding: 0 4px; font-size: .58rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 2; box-sizing: border-box; } /* Hamburger (hidden desktop, shown ≤ 1024px) */ .cef-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: .4rem; flex-shrink: 0; } .cef-hamburger span { display: block; width: 24px; height: 2px; background: var(--cef-primary); border-radius: 2px; transition: transform .25s, opacity .25s; } .cef-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .cef-hamburger.is-active span:nth-child(2) { opacity: 0; } .cef-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ 6. HERO BANNER Background: #f3f3f3 (light grey) Primary text / accents: #1d4667 (navy) + #8abe41 (green) ============================================================ */ .cef-hero { /* Slight side gutter (wider card than before — was 2.5rem) */ width: 100%; background: transparent; position: relative; padding: .5rem .75rem 0; margin: 0; } @media (min-width: 1024px) { .cef-hero { padding-left: 1.25rem; padding-right: 1.25rem; } } /* Gray card — soft radius + soft ambient shadow (not a hard line edge) */ .cef-hero__inner { display: grid; grid-template-columns: 1fr 520px; align-items: center; gap: 2rem; padding-top: 5.5rem; padding-bottom: 4rem; position: relative; z-index: 1; background: #f3f3f3; border-radius: 1.5rem; overflow: hidden; /* clips blobs + enforces rounded corners */ /* Soft lift — replaces the harsh left/right “line” edge */ box-shadow: 0 6px 28px rgba(29, 70, 103, .08); border: none; max-width: 1400px; /* a bit wider than the default 1200px container */ } /* Decorative background circles — matches cef.org.pk hero: one big circle peeking from the top-right corner, one smaller circle peeking from the bottom-left corner. Soft CEF green tint. */ .cef-hero__inner::before, .cef-hero__inner::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; background: var(--cef-secondary); z-index: 0; } .cef-hero__inner::before { width: 560px; height: 560px; top: -260px; right: -160px; opacity: .16; } .cef-hero__inner::after { width: 300px; height: 300px; bottom: -140px; left: -90px; opacity: .14; } /* Left content — dark text on light (#f3f3f3) background */ .cef-hero__content { color: #1d4667; } /* Badge pill: green tint border, navy text */ .cef-hero__badge { display: inline-flex; align-items: center; gap: .4rem; background: rgba(29,70,103,.08); border: 1px solid rgba(138,190,65,.6); color: #1d4667; border-radius: 999px; padding: .28rem .85rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; margin-bottom: .9rem; } /* Main heading — each line is a separate gradient span */ .cef-hero__heading { font-size: clamp(2.4rem, 4.2vw, 3.4rem); font-weight: 800; line-height: 1.12; margin: 0 0 1.1rem; /* Neutral colour so it never flashes before CSS gradient loads */ color: #1d4667; } /* Per-line gradient text — mirrors cef.org.pk "The Framework Powering CEF's Mission": background: linear-gradient(to right, #1d4667, #8abe41); -webkit-text-fill-color: transparent so the gradient shows through */ .cef-hero__grad-line { display: block; /* one line per span */ background: linear-gradient(to right, #1d4667 0%, #8abe41 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1.12; /* Prevents Safari clipping the descenders */ padding-bottom: .05em; } /* Sub-text: slightly muted navy */ .cef-hero__subtext { font-size: clamp(.88rem, 1.4vw, 1rem); font-weight: 400; line-height: 1.7; max-width: 480px; margin-bottom: 1.75rem; color: rgba(29,70,103,.78); opacity: 1; } /* Hero search bar — white bg input, green search button */ .cef-hero__search { display: flex; gap: 0; max-width: 520px; margin-bottom: 1.5rem; border-radius: var(--cef-radius-xl); overflow: hidden; box-shadow: 0 4px 20px rgba(29,70,103,.14); border: 1.5px solid rgba(29,70,103,.18); } .cef-hero__search input[type="search"] { flex: 1; border: none; outline: none; padding: .9rem 1.25rem; font-size: .92rem; font-family: var(--cef-font) !important; color: #1d4667; background: #fff; min-width: 0; } .cef-hero__search input[type="search"]::placeholder { color: rgba(29,70,103,.45); } .cef-hero__search button { background: #8abe41; color: #fff; border: none; padding: .9rem 1.5rem; font-size: .9rem; font-weight: 700; cursor: pointer; font-family: var(--cef-font) !important; transition: background .2s; white-space: nowrap; display: flex; align-items: center; gap: .4rem; } .cef-hero__search button:hover { background: #6fa030; } .cef-hero__actions { display: flex; align-items: center; gap: 1.25rem; /* [FIX] was .75rem — buttons felt cramped together */ flex-wrap: wrap; } /* Right: 3-column auto-rotating book-cover slider. Bleeds past .cef-hero__inner padding so its box edges = the hero section edges. Blobs pin to those edges and get clipped into the semicircle peeks seen on cef.org.pk. */ .cef-hero__visual { display: flex; justify-content: center; align-items: stretch; position: relative; align-self: stretch; margin-top: -5.5rem; margin-bottom: -4rem; overflow: hidden; /* clips edge-pinned blobs into peeks */ } /* Soft glow ring behind the columns — slightly stronger on light bg */ .cef-hero__visual::before { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(138,190,65,.22) 0%, transparent 68%); pointer-events: none; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; } /* Divi/Elementor host column — Image modules become the hero slider via JS on the front-end. In Visual Builder they stay clickable. */ .cef-hero-visual-host { position: relative; min-height: 420px; } .cef-hero-visual-host .et_pb_image { margin-bottom: 0.5rem !important; } .cef-hero-visual-host[data-cef-hero-ready="1"] { min-height: 0; } .cef-hero-visual-host .cef-hero__visual { margin-top: 0; margin-bottom: 0; min-height: 420px; } /* ============================================================ 6b. HERO SLIDER (3 independently-rotating "pill" columns) Exact CEF look (header.tsx): • top-left green circle → connected to TOP edge • bottom-mid gray circle → connected to BOTTOM edge • bottom-right green → connected to BOTTOM edge ============================================================ */ .cef-hero-slider { display: flex; align-items: flex-start; justify-content: center; gap: 1.1rem; position: relative; z-index: 2; width: 100%; max-width: 490px; /* Match cancelled hero__inner padding so capsules sit in the content band while the slider box itself spans hero edges (so absolute blobs at top:0 / bottom:0 are truly edge-pinned). */ padding-top: 2.5rem; padding-bottom: 1rem; box-sizing: border-box; min-height: 100%; } .cef-hero-slider__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; position: relative; z-index: 2; } /* Stagger: middle highest; right slightly lower; left lowest */ .cef-hero-slider__col.is-stagger-mid { margin-top: 0; } .cef-hero-slider__col.is-stagger-side-2 { margin-top: 1.6rem; } .cef-hero-slider__col.is-stagger-side { margin-top: 3.2rem; } /* The dominant photo capsule */ .cef-hero-slider__track { position: relative; width: 100%; max-width: 150px; height: 380px; border-radius: 9999px; overflow: hidden; box-shadow: 0 14px 32px rgba(0,0,0,.24); background: rgba(29,70,103,.08); flex-shrink: 0; } /* True circles, absolutely pinned to slider (≈ hero) edges. translateY ±50% + parent overflow:hidden = semicircle peeks. */ .cef-hero-slider__blob { position: absolute; width: calc((100% - 2.2rem) / 3); max-width: 150px; aspect-ratio: 1 / 1; height: auto; border-radius: 50%; z-index: 1; pointer-events: none; } /* TOP blob — left column, flush with hero TOP edge */ .cef-hero-slider__blob--top { top: 0; left: 0; transform: translateY(-50%); } /* BOTTOM-MID blob — middle column, flush with hero BOTTOM edge */ .cef-hero-slider__blob--bottom-mid { bottom: 0; left: 50%; transform: translate(-50%, 50%); } /* BOTTOM-RIGHT blob — right column, flush with hero BOTTOM edge */ .cef-hero-slider__blob--bottom-right { bottom: 0; right: 0; transform: translateY(50%); } /* Decorative circle colours (match CEF secondary/primary tints) */ .cef-hero-slider__blob--secondary { background: rgba(138,190,65,.28); } .cef-hero-slider__blob--primary { background: rgba(29,70,103,.16); } /* Each cover — cross-fades via the .is-active class toggled by JS */ .cef-hero-slider__slide { position: absolute; inset: 0; display: block; opacity: 0; transform: scale(1.04) translateY(10px); transition: opacity .7s ease, transform .8s ease; pointer-events: none; } .cef-hero-slider__slide.is-active { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } .cef-hero-slider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .cef-hero-slider__slide--placeholder svg { display: block; } /* Stats strip — navy divider, green numbers, navy labels */ .cef-hero__stats { display: flex; gap: 2rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1.5px solid rgba(29,70,103,.15); } .cef-hero__stat { text-align: center; } .cef-hero__stat-num { display: block; font-size: 1.4rem; font-weight: 800; color: #8abe41; line-height: 1.1; } .cef-hero__stat-label { display: block; font-size: .7rem; color: rgba(29,70,103,.6); text-transform: uppercase; letter-spacing: .05em; margin-top: .1rem; } /* ============================================================ 7. CATEGORY STRIP ============================================================ */ .cef-categories { width: 100%; background: var(--cef-white); border-bottom: 1px solid var(--cef-border); padding: .85rem 0; position: relative; z-index: 50; box-shadow: 0 2px 6px rgba(0,0,0,.04); } /* Arrow | viewport | arrow — arrows make the strip's scrollability obvious instead of chips just looking cut off at the edge. */ .cef-categories__wrap { display: flex; align-items: center; gap: .5rem; } .cef-categories__viewport { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; } /* Soft edge fade — hints "more to scroll" instead of a hard clip */ .cef-categories__viewport::before, .cef-categories__viewport::after { content: ''; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 2; pointer-events: none; } .cef-categories__viewport::before { left: 0; background: linear-gradient(to right, var(--cef-white) 15%, transparent); } .cef-categories__viewport::after { right: 0; background: linear-gradient(to left, var(--cef-white) 15%, transparent); } .cef-categories__scroll { display: flex; align-items: center; gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 4px; } .cef-categories__scroll::-webkit-scrollbar { display: none; } /* Round prev/next buttons framing the strip */ .cef-categories__nav-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--cef-border); background: var(--cef-white); color: var(--cef-primary); cursor: pointer; padding: 0; transition: background .2s, color .2s, border-color .2s, opacity .2s, transform .15s; } .cef-categories__nav-btn:hover { background: var(--cef-primary); border-color: var(--cef-primary); color: #fff; } .cef-categories__nav-btn:active { transform: scale(.94); } .cef-categories__nav-btn:disabled { opacity: .3; pointer-events: none; } .cef-category-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem; padding: .33rem .9rem; border-radius: 999px; font-size: .77rem; font-weight: 500; font-family: inherit; line-height: 1.2; border: 1.5px solid var(--cef-border); color: var(--cef-text); background: var(--cef-white); transition: all .2s; white-space: nowrap; cursor: pointer; text-decoration: none; box-sizing: border-box; } button.cef-category-chip { appearance: none; -webkit-appearance: none; } .cef-category-chip:hover, .cef-category-chip.is-active, .cef-category-chip-wrap.is-open .cef-category-chip { background: var(--cef-primary); border-color: var(--cef-primary); color: #fff !important; } /* Parent chip wraps label + caret INSIDE the same pill */ .cef-category-chip-wrap { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; } .cef-category-chip--parent { padding-right: .7rem; } .cef-category-chip__label { display: inline-block; } .cef-category-chip__caret { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: .9rem; height: .9rem; margin-left: .05rem; color: inherit; pointer-events: none; /* whole chip is the tap/hover target */ } .cef-category-chip__caret::before { content: ''; display: block; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s ease; opacity: .9; } .cef-category-chip-wrap.is-open .cef-category-chip__caret::before { transform: rotate(225deg) translate(1px, 1px); } /* Dropdown of subcategories — position:fixed (top/left set by JS) so it can float above the horizontally-scrolling strip: the strip's ancestor sets overflow-x:auto, which forces overflow-y to auto too, so a normally-flowed absolute dropdown would get clipped instead of floating below the chip. */ .cef-category-dropdown { position: fixed; min-width: 190px; max-width: 260px; background: var(--cef-white); border-radius: 14px; box-shadow: 0 12px 32px rgba(5,74,106,.18); padding: .5rem; z-index: 500; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .cef-category-chip-wrap.is-open .cef-category-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .cef-category-dropdown__link { display: block; padding: .55rem .75rem; font-size: .8rem; font-weight: 500; color: var(--cef-primary); border-radius: 9px; white-space: nowrap; transition: background .15s, color .15s; } .cef-category-dropdown__link:hover { background: var(--cef-primary-light); color: var(--cef-primary-dark); } /* Parent's own products — listed first, slightly stronger weight */ .cef-category-dropdown__link--parent { font-weight: 700; border-bottom: 1px solid var(--cef-border); border-radius: 9px 9px 0 0; margin-bottom: .15rem; padding-bottom: .6rem; } /* Arrows add enough affordance on their own; rely on native swipe on touch screens, where a circular tap target next to the thumb just adds clutter. */ @media (max-width: 768px) { .cef-categories__nav-btn { display: none; } .cef-categories__viewport::before, .cef-categories__viewport::after { width: 18px; } } /* ============================================================ 8. SECTION HEADERS ============================================================ */ .cef-section { width: 100%; padding: 3rem 0; } .cef-section--gray { background: var(--cef-off-white); } .cef-section__header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.75rem; gap: 1rem; } .cef-section__title { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 700; color: var(--cef-primary); line-height: 1.2; margin: 0; position: relative; padding-bottom: .6rem; } .cef-section__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 3.5rem; height: 3px; background: var(--cef-secondary); border-radius: 2px; } .cef-section__link { font-size: .82rem; font-weight: 600; color: var(--cef-primary); transition: color .2s; white-space: nowrap; flex-shrink: 0; } .cef-section__link:hover { color: var(--cef-secondary); } /* ============================================================ 9. PRODUCT CARD ============================================================ */ .cef-product-card { background: var(--cef-white); border-radius: var(--cef-radius-lg); border: 1px solid var(--cef-border); overflow: hidden; display: flex; flex-direction: column; width: 100%; /* Fill the grid cell */ min-width: 0; /* Critical: prevent overflow in grid */ transition: box-shadow .2s, transform .2s; position: relative; } .cef-product-card:hover { box-shadow: var(--cef-shadow-lg); transform: translateY(-3px); } /* Image wrapper — fixed aspect ratio so cards are uniform height */ .cef-product-card__img-wrap { position: relative; overflow: hidden; background: var(--cef-light-gray); aspect-ratio: 3 / 4; display: block; width: 100%; } .cef-product-card__img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .3s ease; display: block !important; opacity: 1 !important; visibility: visible !important; min-height: 120px; background: var(--cef-light-gray); } /* PageSpeed/LiteSpeed sometimes leaves a 1px GIF as src — force real image */ .cef-product-card__img[src*="pagespeed_static"], .et_pb_shop img[src*="pagespeed_static"], .woocommerce ul.products img[src*="pagespeed_static"] { opacity: 0.01; /* JS will swap src immediately */ } .cef-product-card:hover .cef-product-card__img { transform: scale(1.04); } .cef-product-card__img--placeholder { display: flex; align-items: center; justify-content: center; height: 100%; } /* Badges */ .cef-product-card__badge { position: absolute; top: .6rem; font-size: .68rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; line-height: 1.4; z-index: 2; } .cef-product-card__badge--sale { left: .6rem; background: var(--cef-danger); color: #fff; } .cef-product-card__badge--outofstock { right: .6rem; background: var(--cef-text-muted); color: #fff; } /* Body */ .cef-product-card__body { padding: .9rem; display: flex; flex-direction: column; flex: 1; gap: .3rem; min-width: 0; } .cef-product-card__title { font-size: .83rem; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; } .cef-product-card__title a { color: var(--cef-text); } .cef-product-card__title a:hover { color: var(--cef-primary); } .cef-product-card__author { font-size: .72rem; color: var(--cef-text-muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cef-product-card__price { margin-top: auto; padding-top: .5rem; } /* WooCommerce price — stop line breaks */ .cef-product-card__price .woocommerce-Price-amount { color: var(--cef-primary) !important; font-weight: 700 !important; font-size: .92rem !important; white-space: nowrap !important; } .cef-product-card__price del .woocommerce-Price-amount { color: var(--cef-text-light) !important; font-weight: 400 !important; font-size: .78rem !important; } .cef-product-card__price ins { text-decoration: none !important; } .cef-product-card__price ins .woocommerce-Price-amount { color: var(--cef-danger) !important; } /* Add to cart inside card */ .cef-product-card__atc { width: 100%; margin-top: .6rem; justify-content: center; font-size: .77rem !important; padding: .42rem .9rem !important; } /* ============================================================ 10. PRODUCT GRIDS ============================================================ */ /* Horizontal scroll row (New Arrivals) */ .cef-products-scroll { display: flex; gap: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--cef-border) transparent; padding-bottom: .75rem; width: 100%; } .cef-products-scroll::-webkit-scrollbar { height: 4px; } .cef-products-scroll::-webkit-scrollbar-track { background: transparent; } .cef-products-scroll::-webkit-scrollbar-thumb { background: var(--cef-border); border-radius: 2px; } .cef-products-scroll .cef-product-card { flex: 0 0 200px; min-width: 200px; max-width: 200px; } /* ============================================================ 10b. AUTO-SLIDING CAROUSEL (New Arrivals) — v2 modern UI Layout: relative wrapper → full-width track + arrows that FLOAT on top of the track edges (Netflix/Amazon style), with a soft white fade mask so cards never look "cut off" at the container edge. Arrows sit safely inset (never touch the viewport/container edge) and appear with a gentle hover-lift + shadow for a premium feel. ============================================================ */ .cef-carousel { position: relative; width: 100%; /* Breathing room so the floating arrows never crowd the cards */ padding: 0 .25rem; } /* Scrollable track — full width, arrows float above it */ .cef-carousel__track { display: flex; gap: 1.1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 2px 16px; /* room for card shadow */ box-sizing: border-box; } .cef-carousel__track::-webkit-scrollbar { display: none; } /* Cards inside the track */ .cef-carousel__track .cef-product-card { flex: 0 0 200px; min-width: 200px; max-width: 200px; scroll-snap-align: start; } /* Soft edge fade — masks the hard edge of the last visible card so the carousel reads as "there's more to scroll" rather than "cut off" */ .cef-carousel::before, .cef-carousel::after { content: ''; position: absolute; top: 0; bottom: 16px; width: 56px; z-index: 3; pointer-events: none; } .cef-carousel::before { left: 0; background: linear-gradient(to right, var(--cef-white) 15%, transparent); } .cef-carousel::after { right: 0; background: linear-gradient(to left, var(--cef-white) 15%, transparent); } /* Floating arrow buttons — absolutely positioned, inset from the edge so they always have clear space around them (fixes the "touches the edge" issue) and never fight the track for horizontal layout space. */ .cef-carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--cef-white); border: none; color: #1d4667; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 20px rgba(29,70,103,.22), 0 0 0 1px rgba(29,70,103,.08); transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; z-index: 4; } .cef-carousel__btn--prev { left: 6px; } .cef-carousel__btn--next { right: 6px; } .cef-carousel__btn:hover { background: #1d4667; color: #fff; box-shadow: 0 8px 24px rgba(29,70,103,.32); transform: translateY(-50%) scale(1.06); } .cef-carousel__btn:active { transform: translateY(-50%) scale(.96); } .cef-carousel__btn:disabled { opacity: 0; pointer-events: none; } /* Tablet */ @media (max-width: 768px) { .cef-carousel__btn { width: 38px; height: 38px; } .cef-carousel__btn--prev { left: 2px; } .cef-carousel__btn--next { right: 2px; } .cef-carousel::before, .cef-carousel::after { width: 36px; } .cef-carousel__track .cef-product-card { flex: 0 0 155px; min-width: 155px; max-width: 155px; } } /* Small mobile — arrows off (rely on native touch swipe), fade kept subtle */ @media (max-width: 480px) { .cef-carousel { padding: 0; } .cef-carousel__btn { display: none; } .cef-carousel::before, .cef-carousel::after { width: 20px; } .cef-carousel__track { gap: .65rem; } .cef-carousel__track .cef-product-card { flex: 0 0 138px; min-width: 138px; max-width: 138px; } } /* Grid layouts */ .cef-products-grid { display: grid; width: 100%; gap: 1.25rem; } .cef-products-grid--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cef-products-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ============================================================ 11. PROMO BANNER ============================================================ */ .cef-promo-banner { width: 100%; background: var(--cef-secondary); padding: 2.75rem 0; } .cef-promo-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .cef-promo-banner__heading { font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 700; color: #fff; margin: 0 0 .4rem; } .cef-promo-banner__sub { font-size: .9rem; color: rgba(255,255,255,.88); max-width: 560px; line-height: 1.6; margin: 0; } /* ============================================================ 12. SHOP ARCHIVE PAGE ============================================================ */ .cef-shop-page { padding: 2rem 0 3rem; } .cef-shop-page__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem; } .cef-shop-page__title-wrap { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .cef-shop-page__title { font-size: 1.6rem; font-weight: 700; color: var(--cef-primary); margin: 0; } .woocommerce-result-count { font-size: .82rem; color: var(--cef-text-muted); margin: 0 !important; } .woocommerce-ordering select { border: 1px solid var(--cef-border); border-radius: var(--cef-radius); padding: .4rem .75rem; font-size: .82rem; font-family: var(--cef-font) !important; color: var(--cef-text); background: var(--cef-white); outline: none; cursor: pointer; } /* Two-column layout: sidebar + grid */ .cef-shop-page__layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; width: 100%; } /* Sidebar */ .cef-shop-sidebar__block { background: var(--cef-off-white); border-radius: var(--cef-radius-lg); padding: 1.25rem; margin-bottom: 1rem; border: 1px solid var(--cef-border); } .cef-shop-sidebar__heading { font-size: .82rem; font-weight: 700; color: var(--cef-primary); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--cef-secondary); } .cef-shop-sidebar__cat-list li { border-bottom: 1px solid var(--cef-border); } .cef-shop-sidebar__cat-list li:last-child { border-bottom: none; } .cef-shop-sidebar__cat-list a { display: flex; align-items: center; justify-content: space-between; padding: .45rem .25rem; font-size: .82rem; color: var(--cef-text); font-weight: 500; transition: color .2s; } .cef-shop-sidebar__cat-list a:hover, .cef-shop-sidebar__cat--active > a { color: var(--cef-primary); font-weight: 700; } .cef-shop-sidebar__cat-list span { font-size: .72rem; color: var(--cef-text-light); } /* Subcategories, nested directly under their parent (indent + a left rule ties each child visually back to its parent category). */ .cef-shop-sidebar__cat-list--nested { margin: 0 0 .35rem .95rem; padding-left: .75rem; border-left: 2px solid var(--cef-border); } .cef-shop-sidebar__cat-list--nested li { border-bottom: none; } .cef-shop-sidebar__cat-list--nested a { padding: .3rem .25rem; font-size: .76rem; font-weight: 400; color: var(--cef-text-light); } .cef-shop-sidebar__cat-list--nested a:hover, .cef-shop-sidebar__cat-list--nested .cef-shop-sidebar__cat--active > a { color: var(--cef-primary); font-weight: 600; } /* Grid area */ .cef-shop-page__grid-wrap { width: 100%; min-width: 0; } /* WooCommerce pagination */ .woocommerce-pagination { margin-top: 2rem; display: flex; justify-content: center; } .woocommerce-pagination ul { display: flex; gap: .4rem; list-style: none; padding: 0; margin: 0; } .woocommerce-pagination ul li a, .woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: var(--cef-radius); border: 1px solid var(--cef-border); font-size: .85rem; font-weight: 500; color: var(--cef-primary); transition: all .2s; } .woocommerce-pagination ul li a:hover, .woocommerce-pagination ul li span.current { background: var(--cef-primary); border-color: var(--cef-primary); color: #fff !important; } /* ============================================================ 12b. SINGLE PRODUCT PAGE ============================================================ */ .cef-single-product-page { padding: 2rem 0 3rem; min-height: 30vh; } /* WooCommerce injects its product layout directly inside .cef-container — ensure it fills the available width */ .cef-single-product-page .woocommerce { width: 100%; } /* Single product summary layout */ .cef-single-product-page div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; align-items: start; } .cef-single-product-page div.product .woocommerce-product-gallery { grid-column: 1; } .cef-single-product-page div.product .summary { grid-column: 2; } /* Tabs and related products span full width */ .cef-single-product-page div.product .woocommerce-tabs, .cef-single-product-page .related.products, .cef-single-product-page .upsells.products, .cef-single-product-page #review_form_wrapper { grid-column: 1 / -1; } /* Product title */ .cef-single-product-page .product_title { color: var(--cef-primary); font-size: 1.5rem; font-weight: 700; margin-bottom: .75rem; } /* Price */ .cef-single-product-page .price { color: var(--cef-secondary); font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; } /* Add to cart button */ .cef-single-product-page .single_add_to_cart_button { background: var(--cef-primary) !important; color: #fff !important; border-color: var(--cef-primary) !important; border-radius: var(--cef-radius-md) !important; font-weight: 600 !important; padding: .65rem 1.5rem !important; transition: background .2s, transform .1s !important; } .cef-single-product-page .single_add_to_cart_button:hover { background: var(--cef-secondary) !important; border-color: var(--cef-secondary) !important; transform: translateY(-1px) !important; } /* Related / up-sell product grid */ .cef-single-product-page .related.products h2, .cef-single-product-page .upsells.products h2 { font-size: 1.3rem; font-weight: 700; color: var(--cef-primary); margin-bottom: 1.5rem; } /* Mobile: stack product layout */ @media (max-width: 768px) { .cef-single-product-page div.product { grid-template-columns: 1fr; } .cef-single-product-page div.product .summary { grid-column: 1; } } /* ============================================================ 13. FOOTER — exact cef.org.pk match ============================================================ */ .cef-footer { width: 100%; background: var(--cef-primary); color: rgba(255,255,255,.9); position: relative; /* Clip the decorative blob so it never paints a gap below the copyright strip (was height:115% + overflow:visible → white space). */ overflow: hidden; margin-bottom: 0; } /* Subtle background decorative image (matches footer.tsx bg image) */ .cef-footer::after { content: ''; position: absolute; right: 4%; top: 0; width: 45%; height: 100%; background: rgba(255,255,255,.025); border-radius: 50% 50% 0 0; pointer-events: none; } .cef-footer__body { padding: 2.5rem 0 2rem; position: relative; z-index: 1; } /* Grid: 2/10 brand + 8/10 columns — mirrors footer.tsx md:grid-cols-10 */ .cef-footer__grid { display: grid; grid-template-columns: 2fr repeat(5, 1.6fr); gap: 1.5rem 2rem; width: 100%; align-items: start; } /* ── Brand column ── */ .cef-footer__brand {} .cef-footer__logo { width: auto; max-width: 180px; max-height: 64px; height: auto; margin-bottom: .9rem; display: block !important; visibility: visible !important; opacity: 1 !important; /* Keep real colors — invert made Artboard logo a broken white blob */ filter: none !important; -webkit-filter: none !important; background: #fff; padding: .45rem .65rem; border-radius: 10px; box-sizing: border-box; } .cef-footer__logo.is-broken { display: none !important; } .cef-footer__logo-text { font-size: 1.05rem; font-weight: 700; color: #fff !important; margin-bottom: .9rem; display: block; } .cef-footer__tagline { font-size: .72rem; line-height: 1.7; color: rgba(255,255,255,.75); font-weight: 500; hyphens: none; text-align: justify; margin: 0; } /* ── Link columns (shared) ── */ .cef-footer__col { display: flex; flex-direction: column; } /* Donate column: flex so social icons push to bottom */ .cef-footer__col--donate { min-height: 200px; } .cef-footer__col-heading { font-size: .72rem; font-weight: 700; color: #fff; margin: 0 0 .75rem; /* No border — matches footer.tsx exactly (just bold text heading) */ } .cef-footer__col-heading--mt { margin-top: 1.25rem; } .cef-footer__col-heading-link { color: #fff !important; transition: color .2s; } .cef-footer__col-heading-link:hover { color: var(--cef-secondary) !important; } .cef-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; } .cef-footer__links a { font-size: .72rem; color: rgba(255,255,255,.75); font-weight: 400; transition: color .2s; line-height: 1.4; } .cef-footer__links a:hover { color: var(--cef-secondary); } /* ── Donate column: spacer + Follow us ── */ /* Flex spacer — mirrors Tailwind `flex-[1_1_0]` pushing social to bottom */ .cef-footer__spacer { flex: 1; min-height: .75rem; } .cef-footer__follow { flex-shrink: 0; } .cef-footer__follow-label { display: block; font-size: .7rem; font-weight: 600; color: #fff; margin-bottom: .45rem; } .cef-footer__social-icons { display: flex; flex-wrap: wrap; gap: .4rem; } /* Social circles — bg-secondary (#8abe41), white icon, exact cef.org.pk style */ .cef-social-circle { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cef-secondary); color: #fff !important; transition: background .2s; flex-shrink: 0; } .cef-social-circle:hover { background: rgba(255,255,255,.2); } /* YouTube play cut-out (green circle shows through the triangle) */ .cef-social-circle[aria-label="YouTube"] svg path { fill: currentColor; fill-rule: evenodd; } /* ── Copyright strip — bg-secondary (green) ── */ .cef-footer__copyright { background: var(--cef-secondary); padding: .75rem 0; text-align: center; position: relative; z-index: 1; margin: 0; border: 0; } .cef-footer__copyright p { font-size: .72rem; color: #fff; margin: 0; font-weight: 400; } .cef-footer__copyright a { color: rgba(255,255,255,.85); text-decoration: underline; } .cef-footer__copyright a:hover { color: #fff; } /* Kill empty white gap under footer (orphan Divi/TB chrome or empty sections) */ #main-footer, #et-footer-nav, .et-l--footer { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } body.home #et-main-area > .et_pb_section:empty, body.front-page #et-main-area > .et_pb_section:empty { display: none !important; } /* Hero / promo Divi buttons — look like CEF pills even if VB strips classes */ .cef-home-hero-section .et_pb_button, .et_pb_button.cef-btn { display: inline-flex !important; align-items: center; justify-content: center; padding: .7rem 1.35rem !important; border-radius: 999px !important; font-weight: 700 !important; font-size: .9rem !important; text-decoration: none !important; border: none !important; line-height: 1.2 !important; } .cef-home-hero-section .et_pb_button_0, .et_pb_button.cef-btn--secondary { background: var(--cef-secondary) !important; color: #fff !important; } .cef-home-hero-section .et_pb_button_1, .et_pb_button.cef-btn--primary { background: var(--cef-primary) !important; color: #fff !important; } .et_pb_button.cef-btn--white { background: #fff !important; color: var(--cef-primary) !important; } /* ============================================================ 14. WOOCOMMERCE GLOBAL OVERRIDES ============================================================ */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { background-color: var(--cef-primary) !important; color: #fff !important; border-radius: var(--cef-radius-lg) !important; font-family: var(--cef-font) !important; font-weight: 600 !important; padding: .55rem 1.2rem !important; font-size: .85rem !important; border: 2px solid var(--cef-primary) !important; transition: background .2s, border-color .2s !important; } .woocommerce a.button:hover, .woocommerce button.button:hover { background-color: var(--cef-primary-dark) !important; border-color: var(--cef-primary-dark) !important; color: #fff !important; } .woocommerce a.button.alt, .woocommerce button.button.alt { background-color: var(--cef-secondary) !important; border-color: var(--cef-secondary) !important; } .woocommerce-message { border-top-color: var(--cef-primary) !important; } .woocommerce-info { border-top-color: var(--cef-primary) !important; } .woocommerce-error { border-top-color: var(--cef-danger) !important; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { background: var(--cef-secondary) !important; border-color: var(--cef-secondary) !important; font-size: 1rem !important; padding: .75rem 1.5rem !important; } .woocommerce h2, .woocommerce h3 { color: var(--cef-primary) !important; font-family: var(--cef-font) !important; } .woocommerce div.product .product_title { color: var(--cef-primary) !important; font-size: clamp(1.3rem, 2.5vw, 1.85rem) !important; font-weight: 700 !important; font-family: var(--cef-font) !important; } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--cef-primary) !important; font-size: 1.4rem !important; font-weight: 700 !important; } .woocommerce div.product p.price del, .woocommerce div.product span.price del { color: var(--cef-text-light) !important; font-size: 1rem !important; } .woocommerce div.product p.price ins, .woocommerce div.product span.price ins { color: var(--cef-danger) !important; text-decoration: none !important; } .star-rating span::before, .woocommerce .star-rating::before { color: var(--cef-secondary) !important; } .woocommerce form input, .woocommerce form select, .woocommerce form textarea { border-color: var(--cef-border) !important; border-radius: var(--cef-radius) !important; font-family: var(--cef-font) !important; font-size: .9rem !important; padding: .6rem .85rem !important; outline: none; transition: border-color .2s; } .woocommerce form input:focus, .woocommerce form select:focus, .woocommerce form textarea:focus { border-color: var(--cef-primary) !important; box-shadow: 0 0 0 3px rgba(5,74,106,.12) !important; } /* ============================================================ 15. RESPONSIVE — Tablet (≤ 1024px) ============================================================ */ @media (max-width: 1024px) { /* Navbar: hide desktop nav on mobile, show hamburger */ .cef-header__nav { display: none; } /* Hide text buttons except cart */ .cef-nav-btn { display: none; } .cef-hamburger { display: flex; } /* Hero: single column */ .cef-hero__inner { grid-template-columns: 1fr; text-align: center; padding-top: 3.5rem; padding-bottom: 3rem; padding-left: 1.5rem; padding-right: 1.5rem; } .cef-hero__visual { display: none; } .cef-hero__search { margin-left: auto; margin-right: auto; } .cef-hero__subtext { margin-left: auto; margin-right: auto; } .cef-hero__actions { justify-content: center; } .cef-hero__stats { justify-content: center; } /* On mobile/tablet centre each gradient line */ .cef-hero__grad-line { display: inline; } /* Grids: 3 cols on tablet */ .cef-products-grid--4col { grid-template-columns: repeat(3, minmax(0, 1fr)); } .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* Shop: remove sidebar on tablet */ .cef-shop-page__layout { grid-template-columns: 1fr; } .cef-shop-sidebar { display: none; } /* Footer: 2-col grid */ .cef-footer__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; } .cef-footer__brand { grid-column: 1 / -1; } .cef-footer__col--donate { min-height: auto; } } /* Mobile navigation drawer — CEF-style (from right). Detailed rules in cef-divi-fixes.css */ .cef-header__nav.is-mobile-open { display: flex !important; flex-direction: column; position: fixed; top: 0; right: 0; left: auto; width: min(340px, 88vw); height: 100dvh; background: var(--cef-white); z-index: 100002 !important; overflow-y: auto; padding: 1rem 1.25rem 1.5rem; box-shadow: -4px 0 20px rgba(0,0,0,.18); animation: cefSlideInRight .25s ease; pointer-events: auto !important; touch-action: manipulation; } body.cef-nav-open #cef-header, #cef-header.cef-nav-open { z-index: 100001 !important; } @keyframes cefSlideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .cef-header__nav.is-mobile-open .cef-nav__list { flex-direction: column; gap: 0; width: 100%; } .cef-header__nav.is-mobile-open .cef-nav__list > li > a { padding: .8rem 0; font-size: .88rem; border-bottom: 1px solid var(--cef-border); line-height: 1.4; pointer-events: auto !important; } .cef-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100000; } .cef-nav-overlay.is-visible { display: block; } /* Mobile: show action buttons inside drawer */ .cef-header__nav.is-mobile-open .cef-mobile-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--cef-border); } .cef-header__nav.is-mobile-open .cef-nav-btn { display: flex !important; width: 100%; justify-content: center; padding: .55rem 1rem; font-size: .82rem; border-radius: var(--cef-radius-lg); } /* ============================================================ 16. RESPONSIVE — Mobile (≤ 768px) ============================================================ */ @media (max-width: 768px) { .cef-header__topbar { display: none; } /* Hero */ .cef-hero { padding: 0; } .cef-hero__inner { padding-top: 2.5rem; padding-bottom: 2.5rem; padding-left: 1.25rem; padding-right: 1.25rem; border-radius: 0; /* full-bleed on phone — no floating card corners */ max-width: 100%; box-shadow: none; } .cef-hero__search { max-width: 100%; } .cef-hero__actions .cef-btn { flex: 1 1 auto; min-width: 140px; justify-content: center; } /* Category chips */ .cef-category-chip { font-size: .71rem; padding: .26rem .68rem; } /* Sections */ .cef-section { padding: 2rem 0; } /* Grids: 2 cols on mobile */ .cef-products-grid--4col, .cef-products-grid--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Scroll row: smaller cards */ .cef-products-scroll .cef-product-card { flex: 0 0 160px; min-width: 160px; max-width: 160px; } /* Footer: single column */ .cef-footer__grid { grid-template-columns: repeat(2, 1fr); } /* Promo: stack */ .cef-promo-banner__inner { flex-direction: column; text-align: center; } .cef-promo-banner__inner .cef-btn { width: 100%; max-width: 280px; } /* Shop header */ .cef-shop-page__title-wrap { flex-direction: column; gap: .2rem; } .cef-shop-page__title { font-size: 1.3rem; } } /* ============================================================ 17. RESPONSIVE — Small Mobile (≤ 480px) ============================================================ */ @media (max-width: 480px) { :root { --cef-navbar-height: 60px; --cef-container: 100%; } .cef-container { padding-left: .875rem; padding-right: .875rem; } .cef-hero__inner { padding-left: 1.1rem; padding-right: 1.1rem; } .cef-hero__heading { font-size: 1.75rem; } .cef-hero__grad-line { display: block; } .cef-hero__subtext { font-size: .85rem; } .cef-hero__search { flex-direction: column; border-radius: var(--cef-radius-lg); overflow: hidden; } .cef-hero__search input[type="search"], .cef-hero__search button { border-radius: 0; width: 100%; } .cef-hero__stats { gap: 1rem; } .cef-product-card__body { padding: .6rem; gap: .2rem; } .cef-product-card__title { font-size: .77rem; } .cef-product-card__price .woocommerce-Price-amount { font-size: .82rem !important; } .cef-products-grid--4col, .cef-products-grid--3col { gap: .75rem; } .woocommerce ul.products { gap: .75rem !important; } } /* ============================================================ 18. FLOATING CART FAB (FunnelKit #fkcart-floating-toggler) Stacked under the WhatsApp button on the bottom-right — same horizontal alignment (WA uses right:41px / bottom:120px). Modern filled FAB: CEF navy + white Material-style cart icon. ============================================================ */ /* Default fallback position (used only until JS measures the real WhatsApp button and aligns precisely — see cef-shop.js alignCartWithWhatsApp()). Sits directly above WA, same right edge. Calibrated to this site's current WA plugin settings (WhatsApp Chat → Floating Widget: right 41px / bottom 120px / 56px button) plus a 20px gap — NOT the plugin's own un-configured default of 30/30, which sat too low and made the two buttons overlap whenever this fallback was the one actually in effect (e.g. JS still loading, or disabled). JS re-measures and overrides this on every load, so it self-corrects if that WA offset changes again — these numbers only matter as the safety net for when JS hasn't run yet. */ #fkcart-floating-toggler, #fkcart-floating-toggler[data-position="bottom-left"], #fkcart-floating-toggler[data-position="bottom-right"] { left: auto !important; right: 41px !important; bottom: 196px !important; width: 56px !important; height: 56px !important; z-index: 10990; /* just under typical WA widget z-index */ box-shadow: 0 6px 20px rgba(29, 70, 103, .35) !important; border-radius: 50% !important; transition: transform .2s ease, box-shadow .2s ease !important; } #fkcart-floating-toggler:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 28px rgba(29, 70, 103, .42) !important; } #fkcart-floating-toggler .fkcart-floating-icon { background-color: #1d4667 !important; /* CEF navy — modern filled FAB */ color: #fff !important; border-radius: 50% !important; } #fkcart-floating-toggler .fkcart-floating-icon path { fill: #fff !important; } #fkcart-floating-toggler .fkcart-floating-icon svg { width: 26px !important; height: 26px !important; } /* Badge — top-right like modern e-com FABs (was top-left / clipped) */ #fkcart-floating-toggler .fkcart-item-count { top: -2px !important; left: auto !important; right: -2px !important; min-width: 20px !important; height: 20px !important; font-size: 11px !important; font-weight: 700 !important; background: #e15334 !important; color: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.2); } /* Mobile/tablet: ONE vertical column — cart ABOVE WhatsApp. Both share the exact same `right` + size (desktop 3rd-SS look). JS keeps bottom spacing; these rules stop horizontal drift. */ @media (max-width: 1024px) { .wa__btn_popup { right: var(--cef-fab-right, 16px) !important; left: auto !important; margin: 0 !important; transform: none !important; } .wa__btn_popup .wa__btn_popup_icon { width: var(--cef-fab-size, 56px) !important; height: var(--cef-fab-size, 56px) !important; } #fkcart-floating-toggler, #fkcart-floating-toggler[data-position="bottom-left"], #fkcart-floating-toggler[data-position="bottom-right"] { right: var(--cef-fab-right, 16px) !important; left: auto !important; margin: 0 !important; transform: none !important; width: var(--cef-fab-size, 56px) !important; height: var(--cef-fab-size, 56px) !important; box-sizing: border-box !important; } #fkcart-floating-toggler:hover { transform: none !important; } #fkcart-floating-toggler .fkcart-floating-icon { width: 100% !important; height: 100% !important; border-radius: 50% !important; } } @media (max-width: 480px) { #fkcart-floating-toggler .fkcart-floating-icon svg { width: 22px !important; height: 22px !important; } }