/* ========================================================================== AGENT PAGES REDESIGN — hero slim, section-gap fix, decorative imagery -------------------------------------------------------------------------- Scoped ENTIRELY to body.w9-agentpage / body.w9-agentpage-cs (added only on posts 112/133/134/135/141 by wp-content/mu-plugins/w9-agent-pages.php) so nothing here can affect any other page that also uses the shared ".s5-*" base layer (w9-site5.php, which per project convention is never edited directly — new layers load after it and win on specificity instead). Loads after agent-list.css (w9-agent-pages.php enqueue dependency), so it always wins at equal specificity too. ========================================================================== */ /* ---------- HERO SLIM (v2 — pushed further) ---------- Base .s5-ihero padding is clamp(90px,10vh,124px) top / clamp(36px,4vh,54px) bottom — heavy for a page whose only job is "eyebrow + h1 + one line + a stat row + 3 trust pills". The first pass slimmed it to clamp(40,5.2vh,60)/clamp(28,3.4vh,38); this pushes noticeably tighter again (v2 review: "still looks broken/poor" — a confident, tight header reads as considered, a tall one reads as unfinished/templated) plus tightens every internal gap (heading/lede/stat/pill margins) so the whole hero reads as one compact block, not a stack of loosely related pieces. Applies at every width (the base file has no separate mobile rule for .s5-ihero, so this applies everywhere; further tightened <640px below). */ body.w9-agentpage .s5-ihero { padding: clamp(26px, 3.6vh, 40px) 24px clamp(18px, 2.4vh, 26px) !important; } body.w9-agentpage .s5-ihero h1.elementor-heading-title { margin-top: 6px; } body.w9-agentpage .s5-ihero .s5-lede p { margin-top: 8px; font-size: 15px; } /* ---------- HERO META LINE (.s5-herometa) ---------- Replaces the old two-row .s5-statgrid (4 boxed cards) + .s5-pills (3 boxed pills) — both spanned the full hero width and visually ran under the right-edge decorative image, since that image is a background wash on .s5-ihero itself (see the @media(min-width:1025px) block further down), not a boxed column that foreground content automatically avoids. This is one slim, small-text meta line instead: 7 items, middot-separated, no card chrome, width-capped to .s5-lede's own 62ch column so it can never reach past ~46% of the hero width — the point the image's fade begins. */ body.w9-agentpage .s5-herometa { margin: 12px 0 0; max-width: 62ch; display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; column-gap: 14px; font-family: var(--s5-en); font-size: 12.5px; line-height: 1.3; color: var(--s5-mid); } body.w9-agentpage .s5-herometa span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } body.w9-agentpage .s5-herometa span + span::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--s5-line-gold); margin-right: 14px; flex: none; } body.w9-agentpage .s5-herometa b { font-weight: 700; color: var(--s5-gold-3); } body.w9-agentpage .s5-herometa i { color: var(--s5-gold); font-size: 11px; } /* ---------- LIST-SECTION HEAD (.s5-head) — center + tighten ---------- Was left-aligned (base .s5-head only styles the heading's own font, not the flex container's alignment) with more top space than this "one eyebrow, one heading, one short line" block needs. */ body.w9-agentpage .s5-head { align-items: center; text-align: center; margin-top: 0 !important; padding-top: 0 !important; } body.w9-agentpage .s5-head p { text-align: center; margin-left: auto; margin-right: auto; } /* ---------- SEARCH BAR (.w9a-listbar) — small + premium, no extra gap ---------- Base .w9a-search-input padding (15px 50px 15px 58px, !important) was sized for a full-width desktop bar; here it's centered/capped at 420px so it reads as one small premium control under the head, not a full-width form field — needs matching-!important padding/icon-size overrides, not just width, or the tall base padding keeps it visually heavy regardless. */ body.w9-agentpage .w9a-listbar { margin: 18px 0 0; max-width: 420px; margin-left: auto; margin-right: auto; justify-content: center; } body.w9-agentpage .w9a-search-input { padding: 11px 40px 11px 46px !important; font-size: 13px !important; } body.w9-agentpage .w9a-search-ic { width: 30px; height: 30px; left: 6px; } body.w9-agentpage .w9a-search-ic svg { width: 13px; height: 13px; } body.w9-agentpage .w9a-search-count { margin-top: 8px; font-size: 11.5px; text-align: center; } @media (max-width: 640px) { body.w9-agentpage .s5-ihero { padding: 22px 18px 18px !important; } body.w9-agentpage .s5-herometa { max-width: none; justify-content: center; column-gap: 10px; } } /* ---------- MOBILE CENTERING + PREMIUM PASS (2026-07) ---------- Site-wide mobile-centering pass across all 8 agent/help-desk pages (see the matching sections in agent-list.css §"MOBILE CENTERING PASS" and help-desk.css §"MOBILE CENTERING PASS" for the card/pill-specific half of this same pass). Desktop is completely untouched by everything below — every rule sits inside this @media block. The hero, feature-grid cards and step list are deliberately LEFT-aligned on desktop (the hero's copy shares its row with the right-bleed decorative photo; the grids just inherit plain block/left text flow) — this makes them a genuine mobile-only re-alignment, not a redundant "text-align:center everywhere" pass on top of already-centered content. */ @media (max-width: 767px) { /* hero: eyebrow badge + h1 + lede centered as a block. On desktop these stay left-aligned (paired with the right-bleed decorative photo in the background-image rule further down this file) — centering only applies below 767px, where that photo is dropped anyway. */ body.w9-agentpage .s5-ihero > .e-con-inner { text-align: center; } body.w9-agentpage .s5-ihero .s5-eyebrow, body.w9-agentpage .s5-ihero h1.elementor-heading-title { text-align: center; } body.w9-agentpage .s5-ihero .s5-lede p { text-align: center; margin-left: auto; margin-right: auto; max-width: 46ch; } body.w9-agentpage .s5-herometa { justify-content: center; } /* feature-grid cards (.s5-card inside .s5-g3, the 3-card "regional expert / verified / instant response" grid on the 4 tier pages) — icon chip, heading and description centered as one unit instead of sitting flush left inside the card. */ body.w9-agentpage .s5-card { text-align: center; } body.w9-agentpage .s5-card p { margin-left: auto; margin-right: auto; max-width: 38ch; } /* numbered step list (.s5-steps — "কন্টাক্ট/ভেরিফাই/সমাধান" on Customer Service + Complaints, the 4-step "কীভাবে শুরু করবেন" on New Account). .s5-step-n is inline-flex (inline-level), so text-align on the
  • centers the number chip along with the heading/description under it, same technique already used for .s5-eyebrow above. */ body.w9-agentpage .s5-steps li { text-align: center; } body.w9-agentpage .s5-steps p { margin-left: auto; margin-right: auto; max-width: 34ch; } /* the embedded "vk-story" SEO block (homepage's own component, reused verbatim on all 8 of these pages — see §"SEO STORY + CTA sections" below) reverts its stat row to a left-aligned icon+text row below 560px in its OWN stylesheet (w9-vk/seo-special.css, out of this pass's scope and shared with the homepage). Kept centered here instead, scoped to body.w9-agentpage only — the homepage has no such body class, so post 11 (owned by a different group) is completely unaffected by this override. !important used defensively: seo-special.css's own <=560px rule matches at equal selector specificity (body.CLASS .vk-story__stat, 0-2-1 either way), so this file's later position in the enqueue chain should already win — !important removes any doubt without needing a live cascade inspection. */ body.w9-agentpage .vk-story__stat { flex-direction: column !important; align-items: center !important; text-align: center !important; } body.w9-agentpage .vk-story__stat-ic { margin-bottom: 2px !important; } } /* ---------- SECTION-GAP FIX ---------- Root cause of the flagged "large blank gap between feature grid and CTA": the shared .s5-sec / .s5-final rules force min-height:100vh / 72vh with justify-content:center, so short sections (a 3-card feature grid, a short closing CTA) get padded out to (near-)full-viewport height regardless of how little content they hold — two independently oversized boxes stacked back to back read as one continuous void between them. Un-forcing the height (and tightening the vh-based padding that remains) makes every section on these 5 pages hug its own content instead. Every other page still on the shared .s5-sec/.s5-final system (About, Terms, FAQ, Blog, Complaints, New-Account) is untouched — this never applies without the body.w9-agentpage class. */ body.w9-agentpage .s5-sec { min-height: 0 !important; } /* .s5-final keeps a small explicit floor (rather than 0) — its own content (heading + lede + 2 buttons) is short enough that a literal 0 here collides with Elementor core's own ".e-con{ overflow:var(--overflow) }" default (base .s5-final sets overflow:hidden) and the flex "automatic minimum size" spec rule: once overflow isn't visible, a flex item's content-based auto-minimum is dropped in favour of its specified min-height, so min-height:0 + overflow:hidden together let the box collapse below its own content instead of hugging it, silently clipping the lede paragraph and the 2 CTA buttons. A concrete floor sized to comfortably fit that content sidesteps the spec edge case entirely. */ body.w9-agentpage .s5-final { min-height: 260px !important; } @media (min-width: 901px) { body.w9-agentpage .s5-sec { padding-top: clamp(46px, 5.4vh, 68px) !important; padding-bottom: clamp(46px, 5.4vh, 68px) !important; } body.w9-agentpage .s5-final { padding-top: clamp(44px, 5vh, 64px) !important; padding-bottom: clamp(44px, 5vh, 64px) !important; } } @media (max-width: 900px) { /* the base file already resets .s5-sec to padding:56px 20px at this width (w9-site5.php's shared @media(max-width:900px) rule) — only .s5-final (not covered by that reset) needs slimming here. */ body.w9-agentpage .s5-final { padding: 40px 20px !important; } } /* ---------- DECORATIVE HERO IMAGERY ---------- Premium editorial accent bleeding off the right edge of the hero section — same idea as the homepage final CTA's framed portrait (attachment 90) but as a soft background wash rather than a boxed element, so it adds zero height and can't collide with the hero copy. Two images: a "premium table" mood shared by the 4 agent-tier pages, a distinct "care floor" mood for the Customer Service page, so the two page families read as related but not identical. Desktop-only: not worth the bytes on a viewport too narrow to show it faded out anyway, and keeps the mobile hero perfectly clean. */ /* ---------- FEATURE-GRID FIX (mobile "bare list" bug) ---------- Root cause of the flagged "feature grid renders as a bare vertical list with no card styling on mobile": the shared base rule `.s5-grid,.s5-g3,.s5-g4,...{ display:grid; gap:22px; margin-top:34px; }` (w9-site5.php) never resets `list-style`/`padding-left` on these