/* ============================================================================ blog-index.css — the blog LISTING and CATEGORY ARCHIVE for enquad.en3.support ---------------------------------------------------------------------------- Source of truth: D:\Claude Sessions\Enquad\mockups\blog-src\blog-index.css Ships to: wp-content/themes/hello-theme-child-master/custom-css/blog-index.css Enqueued by: wp-content/novamira-sandbox/enq-blog-index.php Preview locally: mockups/blog-src/blog-index-mock.html links this same file. A SUPPLEMENT TO blog-single.css, NEVER A REPLACEMENT. enq-blog-index.php enqueues blog-single.css FIRST and this file second, so the listing inherits every --enqb-* token, the §0 bleed guard, .enqb-wrap, .enqb-pill, .enqb-title, .enqb-cta and .enqb-btn, and this file wins by cascade order. LAYOUT D, shipped 2026-08-26 (Preet picked D from mockups/blog-src/ blog-index-layouts.html). Every post card is the same weight — there is no lead/hero card — above a topic filter rail built from the real `category` taxonomy. ⚠ WHAT CHANGED FROM THE FIRST LISTING, AND WHY TWO OLD SECTIONS ARE GONE: the old listing reused .enqb-grid3 and .enqb-rcard from blog-single.css, and needed two counter-rules to survive doing so — one to undo §8's `.enqb-rcard:nth-child(3){display:none}` (right for a fixed 3-card related band, it silently swallowed a post on a listing) and one to undo §7's fixed-373px centring, which inset a short row under the full-width lead card and read as the rail narrowing halfway down. Layout D uses its OWN grid and card classes (.enqb-ixgrid / .enqb-gcard), so neither blog-single rule can reach the listing and both counter-rules were deleted rather than kept dead. ⛔ If a future pass puts .enqb-grid3 back on the listing, both traps come back with it — see RULES.md → "The blog LISTING page". NO @font-face and no font link, on purpose — the site loads no webfonts at all, so Urbanist renders as Arial here exactly as it does everywhere else. ============================================================================ */ /* -------------------------------------------------------------------------- §0a STICKY HEADER ON THE LISTING AND ON CATEGORY ARCHIVES. Same problem and same fix as blog-single.css §0a, DIFFERENT BODY CLASSES. global.css §27 sticks `.elementor > .e-con:has(header.elementor-358)`, which only exists when a canvas page shortcodes the header into its own Elementor content. Neither of these templates is a canvas page:
is a direct child of , §27 cannot reach it, and the bar renders 84 tall and simply scrolls away. ⚠⚠ THE BODY CLASS IS `blog`, NOT `home` — `home` belongs to the static front page (page 10). `category` is the archive. Both are listed here; keying off `home` sticks nothing and `single-post` hits the wrong template. ⛔ STICKY, NEVER position:fixed. webflow-runtime.js offsets every in-page anchor by outerHeight() only when the header is fixed, so fixed silently breaks anchor scrolling site-wide. -------------------------------------------------------------------------- */ body.blog > header.elementor-location-header, body.category > header.elementor-location-header{ position:sticky;top:0;z-index:999} /* -------------------------------------------------------------------------- §1 Listing head. Shares .enqb-sec--head's padding-bottom:0 with the post template; only the lede is new. -------------------------------------------------------------------------- */ .enqb-ixhead .enqb-title{margin:22px 0 0} .enqb-ixlede{max-width:60ch;margin:18px 0 0; font:500 20px/30px var(--enqb-sans);color:var(--enqb-muted)} /* -------------------------------------------------------------------------- §2 Listing body. -------------------------------------------------------------------------- */ .enqb-ixbody{padding-top:56px} /* -------------------------------------------------------------------------- §3 TOPIC FILTER RAIL. Real links to real category archives — no JavaScript, no query var, one canonical URL per filter state. enq-blog-index.php only ever emits terms that have at least one published post, so a chip here can never lead to an empty archive. -------------------------------------------------------------------------- */ .enqb-topics{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 38px} .enqb-topics a{display:inline-block;text-decoration:none;padding:10px 20px; font:600 15px/1 var(--enqb-sans);color:var(--enqb-navy); background:var(--enqb-card-bg);border:1px solid var(--enqb-card-br); transition:background .15s,color .15s,border-color .15s} .enqb-topics a:hover{background:rgba(255,255,255,.82)} .enqb-topics a[aria-current]{background:var(--enqb-navy);color:#fff; border-color:var(--enqb-navy)} .enqb-topics a[aria-current]:hover{background:var(--enqb-navy)} /* -------------------------------------------------------------------------- §4 THE GRID. Every card identical — that is the whole point of layout D: a two-month gap between posts is invisible to a visitor because nothing on the page is presented as "the latest". minmax(0,1fr) rather than 1fr: a bare 1fr track has min-width:auto, so one long unbroken title would push the track wider than its share and blow the row past the rail. -------------------------------------------------------------------------- */ .enqb-ixgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px} .enqb-gcard{display:flex;flex-direction:column;text-decoration:none; background:var(--enqb-card-bg);border:1px solid var(--enqb-card-br); box-shadow:var(--enqb-card-sh);backdrop-filter:blur(17.5px); -webkit-backdrop-filter:blur(17.5px);overflow:hidden} /* Image is flush to the card edge and SQUARE here, unlike the inset radius-16 thumbnail on .enqb-rcard. The sitewide sharp-corners pass squares panels and cards; a rounded image inset inside a square card is the post template's treatment, not this one. */ .enqb-gcard img, .enqb-gcard__ph{display:block;width:100%;height:206px;object-fit:cover; border-radius:0} .enqb-gcard__ph{background:var(--enqb-navy)} .enqb-gcard__b{display:flex;flex-direction:column;flex:1;padding:26px 24px 24px} .enqb-gcard__t{font:600 21px/28px var(--enqb-sans);letter-spacing:-.63px; color:var(--enqb-ink);margin:0 0 12px} .enqb-gcard__x{font:500 16px/25px var(--enqb-sans);color:var(--enqb-body); margin:0 0 18px} /* `margin:auto 0 0` pins the meta line to the bottom of a flex column, so the date rules line up across a row whatever the title and excerpt do. */ .enqb-gcard__m{margin:auto 0 0;font:500 14px/1 var(--enqb-sans); color:var(--enqb-muted);padding-top:16px; border-top:1px solid var(--enqb-hair)} .enqb-gcard:hover{background:rgba(255,255,255,.72)} .enqb-gcard:hover .enqb-gcard__t{color:var(--enqb-navy)} /* A short final row must stay LEFT-ALIGNED on the same tracks, not centre itself — otherwise two cards under a three-card row sit inset and the rail looks like it narrows halfway down the page. Explicit, because that exact bug shipped once already from blog-single.css §7. */ .enqb-ixgrid:has(.enqb-gcard:nth-child(2):last-child), .enqb-ixgrid:has(.enqb-gcard:only-child){justify-content:start} /* -------------------------------------------------------------------------- §5 Pagination. paginate_links() returns null while the blog is under one page long, so the whole