/* Theme Name: Zeest Theme URI: https://zeest.pk Author: Zeest Author URI: https://zeest.pk Description: Standalone custom theme for Zeest — modest wear, scarves and accessories, delivered across Pakistan. Warm cream editorial design: floating rounded header, pill buttons, minimal white product cards, dark footer. WooCommerce-ready and Elementor-ready (Theme Builder locations for header/footer, theme markup as fallback). Cormorant Garamond display serif for banner and story headlines, Poppins for everything else. v2 layout system: one 8pt spacing scale, three breakpoints, one section rhythm. Version: 2.5.1 Requires at least: 6.0 Requires PHP: 7.4 License: Proprietary — built for zeest.pk Text Domain: zeest */ /* ================= Design tokens (single source of truth) ================= Spacing follows ONE scale (LAYOUT-SPEC-V2 §2.1): multiples of 4 only — 4 · 8 · 16 · 24 · 32 · 40 · 48 · 64 · 80 · 96, with 12/20/28/36/44/52/56 appearing only where the spec's own blueprint names them. No global margin/padding reset anywhere in this theme: Elementor sections keep their own spacing; the system below is scoped to theme components. */ :root{ --z-bg:#F4F0E6; /* warm cream — page background */ --z-card:#FFFFFF; /* cards, product panels, header bar */ --z-oat:#E9E1D5; /* oatmeal — soft blocks, tile tone */ --z-sand:#D5C5B1; /* sand — secondary neutral */ --z-taupe:#B7A692; /* taupe — supporting accent */ --z-slate:#7E93A8; /* muted slate blue-grey — tile tone */ --z-tbrown:#8A7B6B; /* warm taupe-brown — tile tone */ --z-sage:#858D78; /* muted sage — tile tone + restrained accent */ --z-ink:#222222; /* primary text */ --z-ink-hover:#000000; /* button hover */ --z-dark:#232323; /* deep charcoal — announcement, dark bands, footer */ --z-ink2:#6E6A61; /* warm grey — secondary text */ --z-line:#E3DED2; /* soft border */ --z-line2:#CFC8B8; /* stronger border for form controls */ --z-error:#B91C1C; /* functional error / sale */ --z-success:#43553D; /* functional success */ --z-success-bg:#ECEFE7; /* the 8pt spacing scale — the only spacing steps in the theme */ --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:40px; --s7:48px; --s8:64px; --s9:80px; --s10:96px; /* radii — one nested set (spec §2.7) */ --r-page:24px; /* hero, banner, newsletter, header bar */ --r-panel:20px; /* story, reviews, archive note */ --r-card:20px; /* product, value, post, widget cards */ --r-img:12px; /* images inside cards, inputs, thumbnails */ --r-pill:999px; /* type */ --fb:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --fh:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --fd:'Cormorant Garamond',Georgia,'Times New Roman',serif; } /* ================= Base ================= */ html{scroll-behavior:smooth} /* v2.5 safety net: no page may grow a horizontal scrollbar from a stray wide element. `clip` (not `hidden`) is deliberate — clip creates no scroll container, so position:sticky (the floating header) keeps working, and body.zd-locked's overflow:hidden in shop.css still overrides this while the cart drawer is open. Per-element causes are fixed in the component sheets; this is the belt over those braces. */ html,body{overflow-x:clip} body{ background:var(--z-bg); color:var(--z-ink); font-family:var(--fb); font-size:16px; font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; margin:0; } h1,h2,h3,h4,h5,h6{ font-family:var(--fh); color:var(--z-ink); font-weight:600; margin:0; } /* Relative type (v2.4): the approved 1.25 modular scale, expressed as ratios of the 16px base and rendered FLUIDLY between the tier anchors — the anchors themselves are unchanged from v2.3: h1 39 / 34 / 30px = 2.44× / 2.13× / 1.88× base h2 31 / 28 / 26px = 1.94× / 1.75× / 1.63× h3 25 / 24 / 22px = 1.56× / 1.50× / 1.38× h4 20 / 20 / 18px = 1.25× / 1.25× / 1.13× Stage 1 (below) interpolates mobile→tablet between 480 and 768px viewport and clamps outside that range; stage 2 (min-width:768px, after these rules) interpolates tablet→desktop between 768 and 1200px. h2's two segments are collinear, so one clamp covers both; h4's tablet and desktop anchors are equal, so stage 1 suffices. */ h1{font-size:clamp(30px,calc(23.33px + 1.389vw),34px);line-height:1.15} h2{font-size:clamp(26px,calc(22.67px + .694vw),31px);line-height:1.2} h3{font-size:clamp(22px,calc(18.67px + .694vw),24px);line-height:1.3} h4{font-size:clamp(18px,calc(14.67px + .694vw),20px);line-height:1.35} @media (min-width:768px){ h1{font-size:clamp(34px,calc(25.11px + 1.157vw),39px)} h3{font-size:clamp(24px,calc(22.22px + .231vw),25px)} } button,input,select,textarea{font-family:inherit} a{color:var(--z-ink);text-decoration-color:var(--z-taupe);text-underline-offset:3px} a:hover{color:var(--z-ink-hover)} ::selection{background:var(--z-sand);color:var(--z-ink)} :focus-visible{outline:3px solid var(--z-ink);outline-offset:2px;border-radius:4px} img{max-width:100%;height:auto} /* Anchored headings and sections clear the sticky floating header (bar height + its top offset + breathing room) when jumped to. */ h1,h2,h3,h4,h5,h6,section,article{scroll-margin-top:112px} @media (max-width:767px){ h1,h2,h3,h4,h5,h6,section,article{scroll-margin-top:96px} } .z-serif{font-family:var(--fd)} /* Homepage
hook: guards the fluid full-width layout against stray horizontal scroll from any inset band or track. */ .zeest-home{overflow-x:clip} .z-muted{color:var(--z-ink2)} .z-small{font-size:14px} .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .z-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} /* Every theme transition/animation (cart drawer + overlay, panels, tile hovers, buttons, progress fill) becomes instant. JS honours the same preference: core.js never starts the announcement rotation under reduced motion. */ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }