/* * ZARAK - Foundation components (spec STEP 2 / audit Z.21 Phase 1) * ONE component system. No per-page CSS anywhere in this project. * Depends on tokens.css + base.css. No brand hex literal may appear here. * * Contains: button (4 variants) - input - select - checkbox - badge * price block - stock/status - skeleton - card shell */ /* BUTTON - one component, four variants (audit Y.9) Hover darkens the fill ~8% with NO hue change. Every variant shares the same radius token. */ /* The review form's submit is the same control, reached by selector because WooCommerce prints the input and no class can be added to it. */ .zk-btn, .zk-rev__body .submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--zk-space-2); min-block-size: var(--zk-control-h); padding-inline: var(--zk-space-5); border: 1px solid transparent; border-radius: var(--zk-radius-md); font-family: var(--zk-font-ui); font-size: var(--zk-fs-button); font-weight: var(--zk-fw-semibold); line-height: var(--zk-lh-ui); text-align: center; cursor: pointer; transition: background-color var(--zk-dur-base) var(--zk-ease), border-color var(--zk-dur-base) var(--zk-ease); } @media (min-width: 1024px) { .zk-btn { min-block-size: var(--zk-control-h-lg); } } .zk-btn--block { display: flex; inline-size: 100%; } /* Primary - Add to cart, Checkout */ .zk-btn--primary, .zk-rev__body .submit { background-color: var(--zk-cocoa-soft); color: var(--zk-ivory); } .zk-btn--primary:hover:not(:disabled) { background-color: var(--zk-cocoa-hover); } /* Secondary - Buy now. Gold fill ALWAYS carries Cocoa text (spec 4.4 rule 3). */ .zk-btn--secondary { background-color: var(--zk-gold); color: var(--zk-cocoa); } .zk-btn--secondary:hover:not(:disabled) { background-color: var(--zk-gold-hover); } /* Tertiary - Continue shopping, Apply filters */ .zk-btn--tertiary { background-color: transparent; color: var(--zk-cocoa); border-color: var(--zk-cocoa); } .zk-btn--tertiary:hover:not(:disabled) { background-color: var(--zk-disabled); } /* Text link - View all, inline links */ .zk-btn--text { min-block-size: var(--zk-tap-min); padding-inline: var(--zk-space-2); background-color: transparent; color: var(--zk-gold-deep); } .zk-btn--text:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 2px; } .zk-btn:disabled, .zk-btn[aria-disabled="true"] { background-color: var(--zk-disabled); color: var(--zk-muted); border-color: transparent; cursor: not-allowed; } /* Icon-only control - always 44x44, always needs an accessible name. Hard gate 9 fails the build if the name is missing. */ .zk-icon-btn { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--zk-tap-min); block-size: var(--zk-tap-min); border-radius: var(--zk-radius-md); color: var(--zk-cocoa); background-color: transparent; cursor: pointer; transition: background-color var(--zk-dur-base) var(--zk-ease); } .zk-icon-btn:hover { background-color: var(--zk-disabled); } .zk-icon-btn svg { inline-size: 24px; block-size: 24px; } /* FORM CONTROLS */ .zk-field { display: flex; flex-direction: column; gap: var(--zk-space-2); } .zk-label { font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-medium); line-height: var(--zk-lh-ui); color: var(--zk-cocoa); } /* The review form's fields are the same control; they join the primitive rather than restating it. */ .zk-input, .zk-select, .zk-textarea, .zk-rev__body input[type="text"], .zk-rev__body input[type="email"], .zk-rev__body textarea { inline-size: 100%; min-block-size: var(--zk-control-h); padding: var(--zk-space-3) var(--zk-space-4); background-color: var(--zk-surface-card); color: var(--zk-cocoa); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-sm); font-family: var(--zk-font-ui); /* 16px prevents the iOS zoom-on-focus jump. Never reduce below this. */ font-size: 16px; line-height: var(--zk-lh-ui); transition: border-color var(--zk-dur-base) var(--zk-ease); } @media (min-width: 1024px) { .zk-input, .zk-select, .zk-textarea { min-block-size: var(--zk-control-h-lg); font-size: var(--zk-fs-body); } } .zk-input::placeholder, .zk-textarea::placeholder { color: var(--zk-muted); opacity: 1; } .zk-input:hover, .zk-select:hover, .zk-textarea:hover { border-color: var(--zk-muted); } .zk-input[aria-invalid="true"], .zk-select[aria-invalid="true"], .zk-textarea[aria-invalid="true"] { border-color: var(--zk-sale); } .zk-input:disabled, .zk-select:disabled, .zk-textarea:disabled { background-color: var(--zk-disabled); color: var(--zk-muted); cursor: not-allowed; } .zk-textarea { min-block-size: var(--zk-space-11); resize: vertical; } /* Select: native element, custom chevron. The chevron is an inline SVG data URI in --zk-chevron so no brand hex appears here. */ .zk-select { appearance: none; padding-inline-end: var(--zk-space-8); background-image: var(--zk-chevron); background-repeat: no-repeat; background-position: right var(--zk-space-4) center; background-size: 16px; } [dir="rtl"] .zk-select { background-position: left var(--zk-space-4) center; } /* Error / helper text. State is never colour alone - always icon + text. */ .zk-field-msg { display: flex; align-items: center; gap: var(--zk-space-1); font-size: var(--zk-fs-body-sm); line-height: var(--zk-lh-ui); color: var(--zk-muted); } .zk-field-msg--error { color: var(--zk-sale); } /* Checkbox - 44px hit area preserved via the label wrapper */ .zk-check { display: flex; align-items: center; gap: var(--zk-space-3); min-block-size: var(--zk-tap-min); cursor: pointer; } .zk-check input[type="checkbox"], .zk-check input[type="radio"] { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--zk-cocoa); cursor: pointer; flex: none; } .zk-check span { font-size: var(--zk-fs-body); line-height: var(--zk-lh-ui); } /* BADGE - max one per corner on a card (audit Z.8) */ .zk-badge { display: inline-flex; align-items: center; gap: var(--zk-space-1); padding: var(--zk-space-1) var(--zk-space-3); border-radius: var(--zk-radius-pill); font-family: var(--zk-font-ui); font-size: 11px; font-weight: var(--zk-fw-semibold); line-height: var(--zk-lh-ui); white-space: nowrap; } /* Discount: the real number, never a decorative word */ .zk-badge--sale { background-color: var(--zk-sale); color: var(--zk-white); } /* New: gold fill always carries cocoa text */ .zk-badge--new { background-color: var(--zk-gold); color: var(--zk-cocoa); } .zk-badge--low { background-color: var(--zk-disabled); color: var(--zk-warning); } .zk-badge--neutral { background-color: var(--zk-disabled); color: var(--zk-cocoa); } /* PRICE BLOCK - tabular numerals mandatory (spec 3.3) */ .zk-price-block { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--zk-space-2); } .zk-price { font-size: var(--zk-fs-price-md); font-weight: var(--zk-fw-semibold); color: var(--zk-cocoa); } .zk-price--sale { color: var(--zk-sale); } .zk-price--lg { font-size: var(--zk-fs-price-lg); font-weight: var(--zk-fw-bold); } .zk-price-compare { font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-regular); color: var(--zk-muted); text-decoration: line-through; } .zk-price-save { font-size: var(--zk-fs-caption); font-weight: var(--zk-fw-semibold); color: var(--zk-sale); } /* STOCK / STATUS - icon + text always. Never colour alone. (spec 4.4 rule 4) */ .zk-status { display: inline-flex; align-items: center; gap: var(--zk-space-2); font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-medium); line-height: var(--zk-lh-ui); } .zk-status svg { inline-size: 16px; block-size: 16px; flex: none; } .zk-status--in { color: var(--zk-success); } .zk-status--low { color: var(--zk-warning); } .zk-status--out { color: var(--zk-muted); } /* CARD SHELL - White surface on the ivory page, hairline, no shadow at rest */ .zk-card { background-color: var(--zk-surface-card); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-lg); overflow: hidden; } /* Image well. Spec 4.5 OVERRIDE: WHITE, not ivory. Strict 1:1. */ .zk-well { position: relative; aspect-ratio: 1 / 1; background-color: var(--zk-surface-well); overflow: hidden; } .zk-well img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* SKELETON - never a blank panel while loading (audit Z.7) */ .zk-skeleton { background-color: var(--zk-disabled); border-radius: var(--zk-radius-sm); position: relative; overflow: hidden; } .zk-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100% ); animation: zk-shimmer 1.4s infinite; } @keyframes zk-shimmer { 100% { transform: translateX(100%); } } .zk-skeleton--text { block-size: var(--zk-space-3); margin-block-end: var(--zk-space-2); } /* * Note on the shimmer gradient: spec 28 bans gradients as a DECORATIVE * surface treatment. This is a loading affordance, not decoration, and it * carries no brand colour - it is a white sheen over the disabled token. */ /* GLOBAL SHELL (spec STEP 3 / audit Z.4, Z.5, Z.13, Z.14, Z.15) Kept in this file because hard gate 1 caps the project at three stylesheets. There is deliberately no shell.css. */ /* ---------- announcement bar (audit Y.2) ---------- */ .zk-announce { background-color: var(--zk-surface-invert); color: var(--zk-ivory); border-block-end: 1px solid var(--zk-gold); font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-medium); } .zk-announce__inner { display: grid; grid-template-columns: 1fr; align-items: center; min-block-size: var(--zk-space-8); text-align: center; } .zk-announce__zone { display: none; } /* ---------- announcement ticker ---------- Right-to-left at EVERY width. The track holds the same set twice and travels exactly -50% of itself, so copy two lands where copy one began: seamless, no restart jump, no gap. min-inline-size:0 matters - without it the max-content track refuses to shrink and pushes the whole page sideways. */ .zk-ticker { min-inline-size: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--zk-space-6), #000 calc(100% - var(--zk-space-6)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--zk-space-6), #000 calc(100% - var(--zk-space-6)), transparent); } .zk-ticker__track { display: flex; inline-size: max-content; animation: zk-tick 27s linear infinite; } .zk-ticker__set { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .zk-ticker__item { display: inline-flex; align-items: center; gap: var(--zk-space-3); padding-inline-end: var(--zk-space-6); white-space: nowrap; } /* Gold as an accent only - one glyph, never a slab. */ .zk-ticker__mark { color: var(--zk-gold); font-size: 0.8em; line-height: 1; } @keyframes zk-tick { to { transform: translateX(-50%); } } /* Reduced motion: no travel at all. The strip becomes a readable, swipeable line rather than a clipped one, so nothing is lost by standing still. */ @media (prefers-reduced-motion: reduce) { .zk-ticker { overflow-x: auto; scrollbar-width: none; } .zk-ticker::-webkit-scrollbar { display: none; } .zk-ticker__track { animation: none; } .zk-ticker__set:last-child { display: none; } } .zk-announce__link { color: var(--zk-ivory); opacity: 0.9; } .zk-announce__link:hover { opacity: 1; text-decoration: underline; } @media (min-width: 1024px) { .zk-announce__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--zk-space-6); } .zk-announce__zone { display: flex; align-items: center; gap: var(--zk-space-4); } .zk-announce__zone--end { justify-content: flex-end; } } /* ---------- header (audit Z.4 / Z.5) ---------- */ .zk-header { position: sticky; inset-block-start: 0; z-index: var(--zk-z-header); background-color: var(--zk-surface-card); border-block-end: 1px solid transparent; transition: border-color var(--zk-dur-base) var(--zk-ease), box-shadow var(--zk-dur-base) var(--zk-ease); } /* Scroll separation - fixes the borderless sticky bar defect */ .zk-header.is-scrolled { border-block-end-color: var(--zk-hairline); box-shadow: var(--zk-shadow-1); } .zk-header__inner { display: flex; align-items: center; gap: var(--zk-space-3); min-block-size: 56px; } .zk-header__logo { display: block; flex: none; inline-size: 128px; } .zk-header__logo img { inline-size: 100%; block-size: auto; } .zk-header__actions { display: flex; align-items: center; gap: var(--zk-space-1); margin-inline-start: auto; } .zk-header__account { display: none; } @media (min-width: 1024px) { .zk-header__inner { min-block-size: 64px; gap: var(--zk-space-6); } .zk-header__burger { display: none; } .zk-header__logo { inline-size: 150px; } .zk-header__account { display: inline-flex; } .zk-header__search-toggle { display: none; } .zk-search--desktop { display: block; } } /* ---------- desktop nav ---------- */ .zk-nav { display: none; } @media (min-width: 1024px) { .zk-nav { display: block; } .zk-nav__list { display: flex; align-items: center; gap: var(--zk-space-3); } .zk-nav__list > li { position: relative; } .zk-nav__list a { display: inline-flex; align-items: center; min-block-size: var(--zk-tap-min); padding-inline: var(--zk-space-2); font-size: var(--zk-fs-body); font-weight: var(--zk-fw-medium); color: var(--zk-cocoa); border-block-end: 2px solid transparent; } .zk-nav__list a:hover { border-block-end-color: transparent; } .zk-nav__list .is-current > a { border-block-end-color: transparent; } .zk-nav__list .sub-menu { position: absolute; z-index: var(--zk-z-header); display: none; min-inline-size: 260px; padding: var(--zk-space-3); background-color: var(--zk-surface-card); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-lg); box-shadow: var(--zk-shadow-2); } .zk-nav__list > li:hover > .sub-menu, .zk-nav__list > li:focus-within > .sub-menu { display: block; } } /* ---------- desktop search ---------- */ .zk-search { position: relative; flex: 1 1 auto; max-inline-size: 420px; } .zk-search__group { padding: var(--zk-space-2); } .zk-search__group + .zk-search__group { border-block-start: 1px solid var(--zk-hairline); } .zk-search__group-title { margin: 0; padding: var(--zk-space-2) var(--zk-space-3); font-size: var(--zk-fs-caption); font-weight: var(--zk-fw-semibold); color: var(--zk-muted); text-transform: uppercase; letter-spacing: 0.04em; } .zk-search__row { display: flex; align-items: center; gap: var(--zk-space-3); min-block-size: var(--zk-tap-min); padding-inline: var(--zk-space-3); color: var(--zk-cocoa); border-radius: var(--zk-radius-sm); } .zk-search__row:hover { background-color: var(--zk-surface-page); } .zk-search__row-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--zk-fs-body); } .zk-search__thumb { inline-size: 48px; block-size: 48px; flex: none; object-fit: cover; border-radius: var(--zk-radius-sm); background-color: var(--zk-surface-page); } .zk-search__row-price { flex: none; font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-semibold); } .zk-search__empty { padding: var(--zk-space-4); color: var(--zk-muted); font-size: var(--zk-fs-body); } /* ---------- mobile search overlay ---------- */ .zk-search-overlay { position: fixed; inset: 0; z-index: var(--zk-z-drawer); display: flex; flex-direction: column; background-color: var(--zk-surface-card); } .zk-search-overlay[hidden] { display: none; } .zk-search-overlay__bar { display: flex; align-items: center; gap: var(--zk-space-2); padding: var(--zk-space-3) var(--zk-space-4); border-block-end: 1px solid var(--zk-hairline); } .zk-search-overlay__input { flex: 1 1 auto; } .zk-search-overlay__panel { flex: 1 1 auto; overflow-y: auto; } /* ---------- drawer (audit Z.5) ---------- */ .zk-backdrop { position: fixed; inset: 0; z-index: var(--zk-z-backdrop); background-color: rgba(66, 44, 21, 0.45); } .zk-backdrop[hidden] { display: none; } .zk-drawer { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--zk-z-drawer); display: flex; flex-direction: column; inline-size: min(320px, 88vw); background-color: var(--zk-surface-card); animation: zk-drawer-in var(--zk-dur-slow) var(--zk-ease); } .zk-drawer[hidden] { display: none; } @keyframes zk-drawer-in { from { transform: translateX(-100%); } to { transform: none; } } .zk-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--zk-space-3) var(--zk-space-5); border-block-end: 1px solid var(--zk-hairline); } .zk-drawer__title { font-family: var(--zk-font-display); font-weight: var(--zk-fw-semibold); } .zk-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--zk-space-5); } .zk-drawer__summary, .zk-drawer__link { display: flex; align-items: center; justify-content: space-between; min-block-size: 48px; padding-inline: var(--zk-space-2); font-size: var(--zk-fs-body); color: var(--zk-cocoa); cursor: pointer; } .zk-drawer__summary { font-weight: var(--zk-fw-medium); list-style: none; } .zk-drawer__summary::-webkit-details-marker { display: none; } .zk-drawer__chev { flex: none; transition: transform var(--zk-dur-base) var(--zk-ease); } .zk-drawer__details[open] .zk-drawer__chev { transform: rotate(90deg); } .zk-drawer__sublist { padding-inline-start: var(--zk-space-4); } .zk-drawer__link--all { font-weight: var(--zk-fw-medium); color: var(--zk-gold-deep); } .zk-drawer__utility, .zk-drawer__contact { margin-block-start: var(--zk-space-5); padding-block-start: var(--zk-space-5); border-block-start: 1px solid var(--zk-hairline); display: flex; flex-direction: column; gap: var(--zk-space-2); } body.zk-scroll-locked { position: fixed; inline-size: 100%; overflow: hidden; } /* ---------- breadcrumb ---------- */ .zk-breadcrumb { padding-block: var(--zk-space-3); font-size: var(--zk-fs-body-sm); } .zk-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zk-space-1); } .zk-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--zk-space-1); } .zk-breadcrumb__link { color: var(--zk-muted); } .zk-breadcrumb__link:hover { color: var(--zk-cocoa); text-decoration: underline; } .zk-breadcrumb__sep { color: var(--zk-muted); flex: none; } .zk-breadcrumb__current { color: var(--zk-cocoa); font-weight: var(--zk-fw-medium); } /* ---------- cart bubble ---------- */ .zk-header__cart { position: relative; } .zk-cart-bubble { position: absolute; inset-block-start: var(--zk-space-1); inset-inline-end: var(--zk-space-1); min-inline-size: 20px; block-size: 20px; padding-inline: var(--zk-space-1); display: inline-flex; align-items: center; justify-content: center; background-color: var(--zk-sale); color: var(--zk-white); border-radius: var(--zk-radius-pill); font-size: var(--zk-fs-caption); font-weight: var(--zk-fw-semibold); font-variant-numeric: tabular-nums; } .zk-cart-bubble[hidden] { display: none; } /* ---------- mobile bottom nav (audit Y.12) ---------- */ .zk-bottomnav { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--zk-z-bottomnav); display: grid; grid-template-columns: repeat(4, 1fr); background-color: var(--zk-surface-card); border-block-start: 1px solid var(--zk-hairline); padding-block-end: env(safe-area-inset-bottom); } .zk-bottomnav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--zk-space-1); min-block-size: 58px; padding-block: var(--zk-space-2); color: var(--zk-muted); border-block-start: 2px solid transparent; } .zk-bottomnav__item svg { inline-size: 24px; block-size: 24px; } .zk-bottomnav__label { font-size: 10px; font-weight: var(--zk-fw-medium); line-height: var(--zk-lh-ui); } .zk-bottomnav__item.is-active { color: var(--zk-cocoa); border-block-start-color: var(--zk-gold); } .zk-bottomnav__icon-wrap { position: relative; display: inline-flex; } .zk-cart-bubble--nav { inset-block-start: calc(var(--zk-space-2) * -1); inset-inline-end: calc(var(--zk-space-2) * -1); } /* ---------- WhatsApp FAB (audit Z.15) ---------- */ .zk-fab { position: fixed; inset-inline-end: var(--zk-space-4); /* Clears the bottom nav and nothing more. The old value added 80px for a sticky bar that did not exist yet, lifting the button into the content: at 360/390 it covered the H1, tagline, features, trust rows and both CTAs. The sticky bar now raises it via .is-raised instead. */ inset-block-end: calc(var(--zk-bottomnav-h) + env(safe-area-inset-bottom) + var(--zk-space-4)); z-index: var(--zk-z-fab); display: inline-flex; align-items: center; justify-content: center; inline-size: 56px; block-size: 56px; background-color: var(--zk-success); color: var(--zk-white); border-radius: var(--zk-radius-pill); box-shadow: var(--zk-shadow-2); } .zk-fab svg { inline-size: 32px; block-size: 32px; } /* Stands aside while the purchase controls are on screen; fades rather than display:none so it returns without a layout jump. */ .zk-fab.is-standby { opacity: 0; visibility: hidden; pointer-events: none; } /* The sticky bar owns the strip above the nav, so the FAB steps over it. */ .zk-fab.is-raised { inset-block-end: calc(var(--zk-bottomnav-h) + env(safe-area-inset-bottom) + var(--zk-space-11)); } .zk-fab { transition: opacity 160ms ease, visibility 160ms ease, inset-block-end 160ms ease; } @media (prefers-reduced-motion: reduce) { .zk-fab { transition: none; } } /* Desktop: bottom nav disappears, footer padding and FAB offset reset. */ @media (min-width: 900px) { .zk-bottomnav { display: none; } .zk-footer { padding-block-end: 0; } .zk-fab { inset-block-end: var(--zk-space-6); } .zk-footer__main { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--zk-space-6); } .zk-footer__col { border-block-end: none; } .zk-footer__col-title { cursor: default; pointer-events: none; } .zk-footer__col-body { display: block; } } /* PRODUCT CARD + PRODUCT GRID (spec STEP 4 / audit Z.8, Y.6) ONE card component. ONE grid primitive. WooCommerce's own ul.products is mapped onto the ZARAK grid rather than running a second, parallel grid system. */ ul.products { display: grid; grid-template-columns: repeat(var(--zk-grid-cols), minmax(0, 1fr)); gap: var(--zk-grid-gap); list-style: none; margin: 0; padding: 0; } ul.products::before, ul.products::after { content: none; } /* PRODUCT CARD - the single card component (audit Z.8 / Y.6) Image is the hero: a 1:1 well, then a tight content block. Mobile geometry is measured against the reference card; the 640px block restores desktop breathing room. Never reinstate `all: revert-layer` on .zk-btn here - with no @layer defined it stripped the CTA to a bare blue link. */ .zk-product-card { position: relative; display: flex; flex-direction: column; /* A contained object: on a white ground the card had no edge. */ background-color: var(--zk-surface-card); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-lg); /* Media runs to the card edge and the radius clips it, as on the reference card. The body supplies its own padding; the card supplies none. */ padding: 0; overflow: hidden; list-style: none; transition: border-color var(--zk-dur-base) var(--zk-ease), box-shadow var(--zk-dur-base) var(--zk-ease), transform var(--zk-dur-base) var(--zk-ease); } .zk-product-card:hover { border-color: transparent; box-shadow: var(--zk-shadow-2); transform: translateY(-3px); } /* ---- media: full bleed, this is the card ---- */ .zk-product-card__media { position: relative; display: block; } .zk-product-card__well, .zk-product-card .zk-well { padding: 0; border: 0; /* No radius of its own: the card clips the top corners now that the media runs to its edge, and a second radius inside that one reads as a seam. */ border-radius: 0; overflow: hidden; /* Soft tint, not white: white packshots and placeholders would vanish. */ background-color: var(--zk-ivory); aspect-ratio: 1 / 1; } .zk-product-card__img, .zk-product-card .zk-well img { inline-size: 100%; block-size: 100%; /* cover not contain: square sources crop nothing, creatives fill the frame */ object-fit: cover; object-position: center; transition: transform var(--zk-dur-slow) var(--zk-ease); } /* The grey placeholder covered the well's ivory so the grid read as broken. Matched on the FILE, and .zk-well scoped to outrank object-fit. */ .zk-product-card .zk-well img[src*="woocommerce-placeholder"] { object-fit: contain; padding: 28%; opacity: 0.6; mix-blend-mode: multiply; } .zk-product-card:hover .zk-well img[src*="woocommerce-placeholder"] { transform: none; } .zk-product-card:hover .zk-product-card__img { transform: scale(1.03); } .zk-product-card.outofstock .zk-product-card__img { opacity: 0.5; filter: saturate(0.55); } /* ---- badges: tucked inside the media radius ---- */ .zk-product-card__badge { position: absolute; z-index: 1; inset-block-start: var(--zk-space-2); /* An accent, not a floating object: 12px/24px competed with the product. */ padding-block: 2px; /* token-guard-allow: 2px optical padding on a small chip */ padding-inline: var(--zk-space-2); border-radius: var(--zk-radius-pill); font-family: var(--zk-font-ui); font-size: 11px; font-weight: var(--zk-fw-bold); line-height: 1.35; letter-spacing: 0.01em; white-space: nowrap; } .zk-product-card__badge--sale { inset-inline-start: var(--zk-space-2); background-color: var(--zk-cocoa-soft); color: var(--zk-white); } .zk-product-card__badge--oos { inset-inline-end: var(--zk-space-3); background-color: var(--zk-ink); color: var(--zk-white); } /* ---- body: sits on the page, not in a box ---- */ /* space-1: where the review row's height is paid back. */ .zk-product-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--zk-space-1); /* The card no longer pads, so the body carries all of it. */ padding: var(--zk-space-3) var(--zk-space-3) var(--zk-space-4); } .zk-product-card__title { margin: 0; font-family: var(--zk-font-ui); font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-medium); /* 1.35, not 1.55: two lines measured 40px against the reference's 35px, and the title block sets the card's whole rhythm. */ line-height: 1.35; letter-spacing: -0.01em; color: var(--zk-ink); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-block-size: 2.7em; /* two lines at 1.35, so the price never jumps */ } .zk-product-card__title a { color: inherit; text-decoration: none; } /* Reserve the two-line block: one title height per row, price tight beneath. */ .zk-product-card:hover .zk-product-card__title a { color: var(--zk-cocoa); } /* Review row: a muted five-star track with a gold overlay clipped to the real average. Zero reviews clips to zero, so the empty state is the same component telling the truth rather than a second design. */ .zk-product-card__proof { display: flex; align-items: center; gap: var(--zk-space-2); margin: 0; line-height: 1.2; /* one tight line, so the price never shifts */ font-size: 11px; color: var(--zk-muted); } .zk-stars { position: relative; flex: none; color: var(--zk-hairline); font-size: 11px; line-height: 1; letter-spacing: 0.06em; } .zk-stars::before, .zk-stars i::before { content: "\2605\2605\2605\2605\2605"; } .zk-stars i { position: absolute; inset-block-start: 0; inset-inline-start: 0; display: block; overflow: hidden; color: var(--zk-gold); white-space: nowrap; } .zk-product-card__rcount { font-style: italic; } /* ---- price: the anchor, bound to the title ---- */ .zk-product-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--zk-space-2); margin-block-start: 0; /* price belongs to the title, not to the card floor */ } .zk-product-card__from { font-size: var(--zk-fs-caption); color: var(--zk-muted); } .zk-product-card__now { /* 16px on mobile: still loudest under the image, but 18px/700 read heavier than the reference's 14px/600. Desktop takes it back up. */ font-size: 16px; font-weight: var(--zk-fw-bold); line-height: 1.15; letter-spacing: -0.02em; color: var(--zk-ink); font-variant-numeric: tabular-nums; } .zk-product-card__now .woocommerce-Price-currencySymbol { font-size: 0.78em; font-weight: var(--zk-fw-semibold); color: var(--zk-ink); margin-inline-end: 1px; /* token-guard-allow: optical gap after the currency mark */ } /* 11px keeps "Rs. 4,498 Rs. 5,398" on one line in a 158px card. */ .zk-product-card__was { font-size: 11px; font-weight: var(--zk-fw-regular); color: var(--zk-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; } /* ---- CTA ---- */ /* Inherits .zk-btn; only the card-floor pin and full width are local. */ .zk-product-card__cta { inline-size: 100%; margin-block-start: auto; /* pins CTA to the card floor: one baseline per row */ text-decoration: none; } .zk-product-card__cta:active { transform: translateY(1px); } .zk-product-card__cta--quiet { background-color: transparent; color: var(--zk-cocoa); border-color: var(--zk-hairline); } .zk-product-card__cta--quiet:hover { background-color: var(--zk-ivory); border-color: var(--zk-cocoa); } .zk-product-card__cta:focus-visible, .zk-product-card__title a:focus-visible { outline: 2px solid var(--zk-focus); outline-offset: 2px; } /* Dual action bar - simple, purchasable, in-stock products only. STACKED pills per the reference: filled primary over outlined secondary. Stacking ends the width race two side-by-side labels lost at 360, and the outline retires the gold slab so gold stays an accent. */ .zk-product-card__actions { display: flex; flex-direction: column; gap: var(--zk-space-1); margin-block-start: auto; /* same card floor the single CTA is pinned to */ } /* Inherits .zk-btn in the markup, so only the differences live here: a compact uppercase pill instead of the standard control. 37px reads best against the reference at 360 and 390, and still clears WCAG 2.2 AA's 24px. */ .zk-card-act { gap: var(--zk-space-1); min-block-size: 37px; padding-inline: var(--zk-space-3); min-inline-size: 0; border-radius: var(--zk-radius-pill); font-size: 11px; font-weight: var(--zk-fw-bold); line-height: 1; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; transition: background-color var(--zk-dur-base) var(--zk-ease), transform var(--zk-dur-fast) var(--zk-ease); } .zk-card-act svg { flex: none; inline-size: 13px; block-size: 13px; } /* --add takes its fill from .zk-btn--primary, so no colour is declared here. */ /* Outlined, which also ends the white-on-Golden-Dust 2.31:1 exception this button used to carry: cocoa on white is 11.7:1. */ .zk-card-act--buy { background-color: transparent; color: var(--zk-cocoa); border-color: var(--zk-cocoa); } .zk-card-act--buy:hover { background-color: var(--zk-ivory); border-color: var(--zk-cocoa); } /* Tap feedback the finger can actually see: the press tints as well as sinks, because a 1px shift alone is invisible under a thumb. */ .zk-card-act:active { transform: translateY(1px); } .zk-card-act--add:active { background-color: var(--zk-cocoa-hover); } .zk-card-act--buy:active { background-color: var(--zk-disabled); } .zk-card-act:focus-visible { outline: var(--zk-focus-width) solid var(--zk-focus); outline-offset: var(--zk-focus-offset); } @media (min-width: 640px) { /* Same compact pill; only the inline padding opens up. */ .zk-card-act { padding-inline: var(--zk-space-5); } } @media (min-width: 640px) { /* The tightening above is mobile-first; desktop keeps its breathing room. */ .zk-product-card__body { padding: var(--zk-space-4) var(--zk-space-4) var(--zk-space-5); gap: var(--zk-space-2); } .zk-product-card__title { font-size: var(--zk-fs-body); line-height: 1.45; min-block-size: 2.9em; } .zk-product-card__now { font-size: 19px; } .zk-product-card__actions { gap: var(--zk-space-2); } .zk-card-act { min-block-size: 40px; } } @media (prefers-reduced-motion: reduce) { .zk-product-card__img, .zk-product-card__cta, .zk-card-act { transition: none; } .zk-product-card:hover .zk-product-card__img, .zk-product-card:hover { transform: none; } } .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { font-size: var(--zk-fs-body-sm); color: var(--zk-muted); } .woocommerce-notices-wrapper:empty { display: none; } /* STOREFRONT LAYOUT - header pattern, hero, category strip, section bands, rails, FAQ, dense footer. */ /* ---------- header: nav left / logo centre / actions right ---------- */ .zk-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--zk-space-3); min-block-size: 56px; } .zk-header__left { display: flex; align-items: center; gap: var(--zk-space-4); justify-self: start; } .zk-header__logo { justify-self: center; inline-size: 128px; } .zk-header__actions { justify-self: end; margin-inline-start: 0; } @media (min-width: 1024px) { .zk-header__inner { min-block-size: 72px; } .zk-header__logo { inline-size: 200px; } .zk-header__searchrow { display: block; padding-block-end: var(--zk-space-3); } .zk-header__searchrow .zk-search { max-inline-size: none; margin-inline: auto; } .zk-header__searchrow .zk-search__input { min-inline-size: 0; } } /* Desktop nav sits inline-start, matching the retail pattern. */ @media (min-width: 1024px) { .zk-nav__list { gap: var(--zk-space-5); } .zk-nav__list a { font-size: var(--zk-fs-body); } } /* Announcement bar social icons */ .zk-announce__social { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--zk-space-6); block-size: var(--zk-space-6); color: var(--zk-ivory); opacity: 0.85; } .zk-announce__social:hover { opacity: 1; } .zk-announce__social svg { inline-size: 18px; block-size: 18px; } /* ---------- hero ---------- */ .zk-hero { padding-block: var(--zk-space-5); } /* Inset rounded hero. Reference: 1400x667 in 1440, 20px sides, 20px radius, 2.10 desktop. ZARAK uses 2.00 (2.10 clips the artwork). */ /* Homepage ground is pure white like the header. Scoped to .home so inner pages and the footer keep the warm ivory. */ body.home { background-color: var(--zk-white); } .zk-hero--banner { padding-block: 0; } .zk-hero__frame { position: relative; margin-inline: var(--zk-space-4); border-radius: var(--zk-radius-hero); overflow: hidden; } .zk-hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .zk-hero__track::-webkit-scrollbar { display: none; } .zk-hero__slide { flex: 0 0 100%; scroll-snap-align: center; display: block; line-height: 0; } .zk-hero__img { inline-size: 100%; aspect-ratio: 2 / 1; object-fit: cover; /* biased up: headlines sit near the top edge; crop comes off the bottom */ object-position: center 30%; } .zk-hero__dots { position: absolute; inset-block-end: var(--zk-space-4); inset-inline: 0; display: flex; justify-content: center; gap: var(--zk-space-2); } .zk-hero__dot { inline-size: 10px; block-size: 10px; padding: 0; border: 0; border-radius: var(--zk-radius-pill); background-color: rgb(255 255 255 / 0.55); cursor: pointer; transition: background-color var(--zk-dur-fast) var(--zk-ease), inline-size var(--zk-dur-fast) var(--zk-ease); } .zk-hero__dot.is-current { inline-size: 26px; background-color: var(--zk-white); } .zk-hero__dot:focus-visible { outline: 2px solid var(--zk-white); outline-offset: 3px; } @media (min-width: 1024px) { .zk-hero__frame { margin-inline: var(--zk-space-5); } } @media (max-width: 640px) { .zk-hero__img { aspect-ratio: 12 / 11; } } @media (prefers-reduced-motion: reduce) { .zk-hero__track { scroll-behavior: auto; } .zk-hero__dot { transition: none; } } /* ---------- category strip ---------- */ .zk-catstrip { padding-block: var(--zk-space-6); } .zk-catstrip__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); gap: var(--zk-space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: var(--zk-space-2); overscroll-behavior-inline: contain; } .zk-catstrip__list::-webkit-scrollbar { display: none; } .zk-catstrip__item { scroll-snap-align: start; } /* Prev/next controls. The track scrolls natively, but with the scrollbar hidden a mouse has nothing to grab, so on pointer devices these ARE the scroll. Coarse pointers keep the swipe and never see them. JS unhides them and toggles [hidden] at each end, so a strip that fits shows no chrome. */ .zk-catstrip__frame { position: relative; } .zk-catstrip__nav { position: absolute; /* Sits on the well's centre line, not the strip's: the strip is taller than the wells because each tile carries a label under it. */ inset-block-start: calc(50% - var(--zk-space-6)); inline-size: var(--zk-space-8); block-size: var(--zk-space-8); display: grid; place-items: center; padding: 0; border: 1px solid var(--zk-hairline); border-radius: 50%; background-color: var(--zk-surface-card); color: var(--zk-cocoa-soft); box-shadow: var(--zk-shadow-2); cursor: pointer; transition: background-color var(--zk-dur-base) var(--zk-ease), border-color var(--zk-dur-base) var(--zk-ease); } /* [hidden] alone loses to the display above - author beats user agent. */ .zk-catstrip__nav[hidden] { display: none; } /* Straddles the track edge rather than sitting outside it: the page gutter is only 32px at 1440, so a fully outset control gets clipped by the viewport. The frame is an inner div for exactly this reason - absolute positioning resolves against a containing block's PADDING box, so anchoring to .zk-container would have measured from outside its own gutter. */ .zk-catstrip__nav--prev { inset-inline-start: 0; transform: translateX(-35%); } .zk-catstrip__nav--next { inset-inline-end: 0; transform: translateX(35%); } .zk-catstrip__nav svg { inline-size: var(--zk-space-5); block-size: var(--zk-space-5); } .zk-catstrip__nav:hover { background-color: var(--zk-disabled); border-color: var(--zk-gold); } @media (hover: none) { .zk-catstrip__nav { display: none; } } .zk-catstrip__link { display: flex; flex-direction: column; align-items: center; gap: var(--zk-space-2); text-align: center; } .zk-catstrip__well { display: flex; align-items: center; justify-content: center; inline-size: 100%; aspect-ratio: 1 / 1; background-color: var(--zk-surface-card); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-lg); overflow: hidden; transition: border-color var(--zk-dur-base) var(--zk-ease); } .zk-catstrip__link:hover .zk-catstrip__well, .zk-catstrip__link:focus-visible .zk-catstrip__well { border-color: var(--zk-gold); } .zk-catstrip__well img { inline-size: 100%; block-size: 100%; object-fit: cover; } .zk-catstrip__placeholder, .zk-catstrip__well--all { color: var(--zk-muted); } .zk-catstrip__placeholder svg, .zk-catstrip__well--all svg { inline-size: var(--zk-space-7); block-size: var(--zk-space-7); } .zk-catstrip__well--all { background-color: var(--zk-disabled); color: var(--zk-cocoa); } .zk-catstrip__label { font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-medium); color: var(--zk-cocoa); line-height: var(--zk-lh-ui); } @media (min-width: 900px) { .zk-catstrip__list { grid-auto-columns: minmax(140px, 1fr); gap: var(--zk-space-5); } } /* ---------- section header band ---------- */ /* Centred heading; was a gold slab. Gold is a small rule now. */ .zk-section-head { margin-block-end: var(--zk-space-6); text-align: center; } .zk-section-head__title { margin: 0; font-family: var(--zk-font-display); font-size: var(--zk-fs-h1); font-weight: var(--zk-fw-medium); line-height: var(--zk-lh-heading); letter-spacing: -0.015em; color: var(--zk-ink); } .zk-section-head__rule { display: block; inline-size: 64px; block-size: 3px; margin: var(--zk-space-3) auto 0; border-radius: var(--zk-radius-pill); background-color: var(--zk-gold); } .zk-section-head__sub { margin: var(--zk-space-2) 0 0; font-size: var(--zk-fs-body-sm); color: var(--zk-muted); } .zk-rail-section__more { display: flex; justify-content: center; margin-block-start: var(--zk-space-8); } /* space-6 on mobile, not space-10: 64px a side put 128px of padding around 82px of label on a 210px button. Desktop keeps the wider stance below. */ .zk-rail-section__all { gap: var(--zk-space-2); min-block-size: var(--zk-tap-min); padding-inline: var(--zk-space-6); border-radius: var(--zk-radius-md); font-size: var(--zk-fs-button); letter-spacing: 0.01em; } @media (min-width: 640px) { .zk-rail-section__all { padding-inline: var(--zk-space-10); } } /* ---------- rails ---------- */ .zk-rail-section { padding-block: var(--zk-space-6); } .zk-rail-section:nth-of-type(even) { background-color: var(--zk-surface-card); } @media (min-width: 1024px) { .zk-rail-section { padding-block: var(--zk-space-8); } } /* ---------- FAQ ---------- */ .zk-faq { padding-block: var(--zk-space-8); } .zk-faq__list { background-color: var(--zk-surface-card); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-lg); overflow: hidden; } .zk-faq__item + .zk-faq__item { border-block-start: 1px solid var(--zk-hairline); } .zk-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--zk-space-4); min-block-size: var(--zk-control-h-lg); padding: var(--zk-space-4) var(--zk-space-5); font-size: var(--zk-fs-body); font-weight: var(--zk-fw-medium); color: var(--zk-cocoa); cursor: pointer; list-style: none; } .zk-faq__q::-webkit-details-marker { display: none; } .zk-faq__icon { flex: none; transition: transform var(--zk-dur-base) var(--zk-ease); } .zk-faq__item[open] .zk-faq__icon { transform: rotate(180deg); } .zk-faq__a { padding: 0 var(--zk-space-5) var(--zk-space-4); font-size: var(--zk-fs-body); line-height: var(--zk-lh-body); color: var(--zk-muted); } .zk-faq__a p { margin: 0; } /* HEADER - matched to the approved reference pattern. Overrides earlier rules in this file; keep this block last. */ /* Both bars are FULL-BLEED with edge padding, not capped to the 1440 content container. On a 1920 screen the reference puts its social icons and cart at the screen edges, not inset by 240px. */ .zk-announce__inner, .zk-header__inner { max-inline-size: none; inline-size: 100%; margin-inline: 0; padding-inline: var(--zk-space-4); } @media (min-width: 1024px) { .zk-announce__inner, .zk-header__inner { padding-inline: var(--zk-space-8); } } /* ---------- announcement bar ---------- */ .zk-announce { border-block-end: none; font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-regular); } .zk-announce__inner { min-block-size: var(--zk-space-8); } .zk-ticker { font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-regular); color: var(--zk-ivory); } .zk-announce__zone { gap: var(--zk-space-5); } .zk-announce__zone--start { gap: var(--zk-space-3); } .zk-announce__link { font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-regular); opacity: 1; } .zk-announce__social { inline-size: var(--zk-space-5); block-size: var(--zk-space-5); opacity: 1; } .zk-announce__social svg { inline-size: 16px; block-size: 16px; } /* Language control */ .zk-lang { position: relative; } .zk-lang__toggle { display: inline-flex; align-items: center; gap: var(--zk-space-1); font-size: var(--zk-fs-body-sm); color: var(--zk-ivory); cursor: pointer; list-style: none; } .zk-lang__toggle::-webkit-details-marker { display: none; } .zk-lang[open] .zk-lang__toggle svg { transform: rotate(180deg); } .zk-lang__list { position: absolute; inset-block-start: calc(100% + var(--zk-space-2)); inset-inline-end: 0; z-index: var(--zk-z-drawer); min-inline-size: 140px; padding: var(--zk-space-2); background-color: var(--zk-surface-card); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-md); box-shadow: var(--zk-shadow-2); } /* ---------- header bar ---------- */ .zk-header__inner { min-block-size: 56px; } @media (min-width: 1024px) { .zk-header__inner { min-block-size: 76px; } /* Nav sits inline-start with generous spacing, matching the reference. */ .zk-nav__list { gap: var(--zk-space-6); } .zk-nav__list a { font-size: 17px; font-weight: var(--zk-fw-medium); padding-inline: 0; border-block-end: none; } .zk-nav__list a:hover, .zk-nav__list .is-current > a { border-block-end: none; text-decoration: none; } /* Parent items with children get a chevron, like "Categories". */ .zk-nav__list > .menu-item-has-children > a::after { content: ""; inline-size: 10px; block-size: 10px; margin-inline-start: var(--zk-space-2); border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } .zk-header__logo { inline-size: 220px; } } /* ---------- header action icons ---------- */ .zk-header__actions { gap: var(--zk-space-2); } .zk-icon-btn svg { inline-size: 22px; block-size: 22px; stroke-width: 1.75; } .zk-header__actions .zk-icon-btn:hover { background-color: transparent; opacity: 0.7; } /* Cart badge: cocoa disc on the bag's lower-inline-end corner, always visible including at zero - the reference shows a persistent count. */ .zk-cart-bubble { inset-block-start: auto; inset-block-end: var(--zk-space-1); inset-inline-end: var(--zk-space-1); min-inline-size: 18px; block-size: 18px; background-color: var(--zk-cocoa); color: var(--zk-ivory); font-size: 11px; border: 2px solid var(--zk-surface-card); } .zk-cart-bubble[hidden] { display: inline-flex; } /* HEADER POLISH - tighter, smaller logo, search icon restored. Keep this block last; it intentionally overrides earlier rules. */ /* Announcement bar: slimmer, quieter, matching the reference. */ .zk-announce__inner { min-block-size: var(--zk-space-7); } .zk-announce { font-size: 14px; } .zk-announce__link, .zk-lang__toggle { font-size: 14px; } .zk-announce__zone--start { gap: var(--zk-space-2); } .zk-announce__social { inline-size: var(--zk-space-6); block-size: var(--zk-space-6); } .zk-announce__social svg { inline-size: 15px; block-size: 15px; } /* Inert until a profile URL exists - visually present, not interactive. */ .zk-announce__social--pending { cursor: default; opacity: 0.85; } /* Header bar: shorter, tighter, logo brought back to a sensible size. */ .zk-header__inner { min-block-size: 52px; gap: var(--zk-space-4); } .zk-header__logo { inline-size: 132px; } @media (min-width: 1024px) { .zk-header__inner { min-block-size: 68px; } /* Was 220px - too dominant next to a 17px nav. */ .zk-header__logo { inline-size: 176px; } .zk-nav__list { gap: var(--zk-space-5); } .zk-nav__list a { font-size: 16px; } } /* The logo asset carries its own internal padding; trim the optical gap so the lockup sits on the same baseline as the nav rather than floating. */ .zk-header__logo img { display: block; inline-size: 100%; block-size: auto; } /* SEARCH ICON: present at every breakpoint. It was hidden from 1024px up when the full-width search row existed; that row is gone, so the icon is the only search affordance and must always be visible. */ .zk-header__search-toggle { display: inline-flex; } @media (min-width: 1024px) { .zk-header__search-toggle { display: inline-flex; } } /* Account is visible at every breakpoint too, so mobile carries the same three actions as desktop: search, account, cart. */ .zk-header__account { display: inline-flex; } .zk-header__actions { gap: var(--zk-space-1); } @media (min-width: 1024px) { .zk-header__actions { gap: var(--zk-space-2); } } .zk-icon-btn { inline-size: var(--zk-tap-min); block-size: var(--zk-tap-min); } .zk-icon-btn svg { inline-size: 21px; block-size: 21px; } /* Footer logo is the supplied WHITE variant on the cocoa surface. */ .zk-footer__logo { inline-size: 160px; } /* ---------- RTL / Urdu ---------- */ [dir="rtl"] .zk-nav__list > .menu-item-has-children > a::after { transform: translateY(-2px) rotate(135deg); } [dir="rtl"] .zk-drawer { inset-inline-start: 0; } [dir="rtl"] .zk-drawer__chev { transform: scaleX(-1); } [dir="rtl"] .zk-breadcrumb__sep { transform: scaleX(-1); } /* Urdu needs more leading than Latin at the same size. */ :lang(ur) body, [lang="ur"] body, html[lang="ur-PK"] body { line-height: 1.8; } html[lang="ur-PK"] .zk-nav__list a, html[lang="ur-PK"] .zk-announce { line-height: 1.6; } /* Language options in the switcher */ .zk-lang__opt { display: block; padding: var(--zk-space-2) var(--zk-space-3); font-size: 14px; color: var(--zk-cocoa); border-radius: var(--zk-radius-sm); } .zk-lang__opt:hover { background-color: var(--zk-surface-page); } .zk-lang__opt.is-current { font-weight: var(--zk-fw-semibold); } /* HEADER REFINEMENT - final pass. Keep this block last. Centring note (arithmetic, not preference): with a hamburger plus three icons at the mandatory 44px tap size, a viewport- centred logo needs BOTH side columns >= 132px. Below ~390px that leaves under 80px for the logo, which is unreadable. So the side columns are forced equal via minmax(), which centres the logo exactly from 390px up and lets it drift a few px on 360-375 WITHOUT ever overlapping an icon. */ .zk-header__inner { position: relative; /* Equal side columns -> the centre column is always the true centre. */ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--zk-space-2); min-block-size: 48px; padding-inline: var(--zk-space-2); } .zk-header__left { justify-self: start; gap: var(--zk-space-3); } /* * 100px on mobile is the largest a viewport-centred logo can be while * clearing three 44px icons. Measured, not guessed: at 390px the icon * cluster starts at x=250, the logo centre is 195, so the half-width * ceiling is 55px. 100px leaves a 5px clearance. */ .zk-header__logo { justify-self: center; /* * Fluid ceiling from the geometry: with 32px action boxes the logo half-width * must stay <= (vw/2) - 104, so vw - 216 leaves 8px clearance. The 120px cap * bites first, so the logo is a full 120px even at 360. */ inline-size: min(120px, calc(100vw - 216px)); } .zk-header__actions { justify-self: end; gap: 0; } /* * Action icons: 32 wide x 44 tall. 44px square read loose (45px between * centres); 32px gives a tight cluster while keeping the full 44px vertical * target a thumb actually travels. Above WCAG 2.5.8 AA's 24x24. Only this * header cluster is narrowed; every other control stays 44x44. */ .zk-header__actions .zk-icon-btn { inline-size: 32px; block-size: var(--zk-tap-min); } .zk-icon-btn svg { inline-size: 19px; block-size: 19px; stroke-width: 1.6; } /* ---------- announcement bar: smaller type, tighter bar ---------- */ .zk-announce { font-size: 12px; } .zk-announce__inner { min-block-size: var(--zk-space-6); padding-inline: var(--zk-space-3); } .zk-announce__link, .zk-lang__toggle { font-size: 12px; } .zk-announce__social { inline-size: var(--zk-space-5); block-size: var(--zk-space-5); } .zk-announce__social svg { inline-size: 14px; block-size: 14px; } @media (min-width: 1024px) { .zk-announce { font-size: 13px; } .zk-announce__link, .zk-lang__toggle { font-size: 13px; } .zk-announce__inner { min-block-size: var(--zk-space-7); padding-inline: var(--zk-space-8); } .zk-announce__social { inline-size: var(--zk-space-6); block-size: var(--zk-space-6); } .zk-announce__social svg { inline-size: 15px; block-size: 15px; } } /* ---------- desktop header ---------- */ @media (min-width: 1024px) { .zk-header__inner { min-block-size: 56px; padding-inline: var(--zk-space-8); } .zk-header__logo { inline-size: 164px; } .zk-header__actions { gap: 0; } /* Nav: smaller, tighter, calmer. */ .zk-nav__list { gap: var(--zk-space-5); } .zk-nav__list a { font-size: 14px; font-weight: var(--zk-fw-medium); letter-spacing: 0.015em; padding-inline: 0; } .zk-nav__list > .menu-item-has-children > a::after { inline-size: 8px; block-size: 8px; margin-inline-start: var(--zk-space-2); border-width: 1.5px; } } /* * Nav states - no underline; weight and tone carry the state instead. * rest Deep Cocoa/medium, hover warms to Deep Gold, current semibold. * Hover must NOT fade to 62% opacity - that reads as the link going dim * rather than active. Nothing shifts position, which is what settles it. */ .zk-nav__list a { position: relative; text-decoration: none; color: var(--zk-cocoa); transition: color var(--zk-dur-base) var(--zk-ease); } .zk-nav__list a:hover { color: var(--zk-gold-deep); text-decoration: none; } .zk-nav__list .is-current > a { font-weight: var(--zk-fw-semibold); } .zk-nav__list a:focus-visible { color: var(--zk-cocoa); } /* ---------- optical polish ---------- */ /* A hairline under the header separates it from the ivory page without a heavy shadow, and the scrolled state deepens rather than appearing. */ .zk-header { border-block-end: 0; } /* flush; .is-scrolled carries the shadow */ .zk-header.is-scrolled { box-shadow: var(--zk-shadow-1); } .zk-header__logo img { inline-size: 100%; block-size: auto; } /* Utility links in the announcement bar: tone only, no underline, matching the nav. Underlines on a dark utility strip read as cheap. */ .zk-announce__link { opacity: 0.82; transition: opacity var(--zk-dur-base) var(--zk-ease); } .zk-announce__link:hover { opacity: 1; text-decoration: none; } .zk-lang__toggle { opacity: 0.82; transition: opacity var(--zk-dur-base) var(--zk-ease); } .zk-lang:hover .zk-lang__toggle, .zk-lang[open] .zk-lang__toggle { opacity: 1; } /* FOOTER - typography locked to the HEADER scale (owner instruction): heading 15/600, link 14/0.015em, body 14, legal 13, logo 164, gutter 40px to match the header's. All type is pure White at full opacity, hierarchy from size and weight alone (13.10:1 on Deep Cocoa); the legal bar is the one exception. */ .zk-footer { background-color: var(--zk-surface-invert); color: var(--zk-ivory); margin-block-start: var(--zk-space-10); padding-block-end: 0; } /* Catch-all for every anchor in the footer. `.zk-footer a` is (0,1,1) and so outranks any bare utility class like `.zk-footer__contact` (0,1,0) wherever that class sits, which is why the contact rows once stayed ivory. One rule, stated once, white. */ .zk-footer a { color: var(--zk-white); opacity: 1; } .zk-footer a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------- ROW 1: brand ---------- */ .zk-footer__brand { border-block-end: 1px solid rgba(247, 243, 236, 0.14); } .zk-footer__brand-inner { display: flex; flex-direction: column; align-items: center; gap: var(--zk-space-4); inline-size: 100%; max-inline-size: none; margin-inline: 0; padding-inline: var(--zk-space-5); padding-block: var(--zk-space-6); text-align: center; } .zk-footer__logo { inline-size: 160px; block-size: auto; margin: 0; } .zk-footer__blurb { margin: 0; max-inline-size: 420px; font-size: 14px; line-height: 1.7; color: var(--zk-white); opacity: 1; /* resets the legacy 0.85 further up the file */ text-align: center; } /* ---------- ROW 2: five columns ---------- */ .zk-footer__main { display: grid; grid-template-columns: 1fr; gap: 0; inline-size: 100%; max-inline-size: none; margin-inline: 0; padding-inline: var(--zk-space-5); padding-block: var(--zk-space-4); } .zk-footer__col { border-block-end: none; } .zk-footer__col-title { display: flex; align-items: center; justify-content: space-between; gap: var(--zk-space-4); min-block-size: var(--zk-tap-min); margin: 0; font-family: var(--zk-font-display); font-size: 15px; font-weight: var(--zk-fw-semibold); line-height: var(--zk-lh-ui); letter-spacing: 0.02em; color: var(--zk-white); cursor: pointer; list-style: none; } .zk-footer__col-title::-webkit-details-marker { display: none; } .zk-footer__toggle { position: relative; flex: none; inline-size: var(--zk-space-4); block-size: var(--zk-space-4); } .zk-footer__toggle::before, .zk-footer__toggle::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 13px; block-size: 1.5px; background-color: currentColor; transform: translate(-50%, -50%); transition: transform var(--zk-dur-base) var(--zk-ease), opacity var(--zk-dur-base) var(--zk-ease); } .zk-footer__toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .zk-footer__col[open] .zk-footer__toggle::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } .zk-footer__col-body { padding-block: 0 var(--zk-space-3); } .zk-footer__links { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; } .zk-footer__links a { display: block; min-block-size: 0; padding-block: var(--zk-space-1); font-size: 14px; line-height: 1.6; color: var(--zk-white); transition: opacity var(--zk-dur-base) var(--zk-ease); } /* Every link is already full-strength white, so hover is carried by an underline rather than a tone change. Nothing moves. */ .zk-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; } .zk-footer__note { font-size: 14px; line-height: 1.6; color: var(--zk-white); opacity: 1; margin-block-end: var(--zk-space-4); } /* opacity resets the legacy 0.8 */ .zk-footer__contact { display: block; min-block-size: 0; padding-block: var(--zk-space-1); font-size: 14px; line-height: 1.6; color: var(--zk-white); } .zk-footer__contact--email { text-decoration: underline; text-underline-offset: 3px; } .zk-footer__address { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--zk-white); } /* One row, one size. The legacy `.zk-footer__social a` rule used to give the live link a 44px bordered box while the inert spans stayed 24px unboxed - different sizes, uneven gaps, and an outlined square nobody asked for. Every item is now the same 44px tap target with no border, so they line up. */ .zk-footer__social { display: flex; align-items: center; gap: var(--zk-space-2); margin-block-start: var(--zk-space-5); margin-inline-start: -10px; /* token-guard-allow: optical - pulls the 44px tap box back so the first glyph aligns with the text above it */ } .zk-footer__social-item { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--zk-tap-min); block-size: var(--zk-tap-min); border: none; border-radius: 0; color: var(--zk-white); } /* Inert until the owner supplies the profile URL - visually complete, but not a link that goes nowhere. See the same pattern in the announcement bar. */ .zk-footer__social-item--pending { cursor: default; opacity: 0.55; } .zk-footer__social a.zk-footer__social-item:hover { opacity: 0.75; } .zk-footer__social svg { inline-size: 20px; block-size: 20px; } /* ---------- ROW 3: legal - the Golden Dust band ---------- */ .zk-footer__bar { border-block-start: none; /* Golden Dust band, PLAIN WHITE type, by explicit owner instruction after the trade-off was put to them twice. Do not "fix" this: white on Golden Dust is 2.31:1, under the 4.5:1 AA minimum (Deep Cocoa would be 5.66:1). A deliberate exception, printed every run by contrast-matrix.mjs. */ background-color: var(--zk-gold); color: var(--zk-white); /* The bottom-nav reserve lives here, not on .zk-footer, so the gold runs all the way to the bottom edge instead of stopping above a cocoa gap. */ padding-block-end: calc(58px + env(safe-area-inset-bottom)); /* token-guard-allow: 58px is the spec-mandated bottom-nav height (audit Y.12), not a spacing choice */ } .zk-footer__bar-inner { display: flex; flex-direction: column; align-items: center; gap: var(--zk-space-3); inline-size: 100%; max-inline-size: none; margin-inline: 0; padding-inline: var(--zk-space-5); padding-block: var(--zk-space-4); text-align: center; } .zk-footer__copy { margin: 0; font-size: 13px; color: var(--zk-white); opacity: 1; text-align: center; } .zk-footer__legal-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; margin: 0; padding: 0; } .zk-footer__legal-links li { display: flex; align-items: center; } .zk-footer__legal-links li + li::before { content: ""; inline-size: 1px; block-size: 12px; margin-inline: var(--zk-space-3); background-color: rgba(255, 255, 255, 0.55); } .zk-footer__legal-links a { font-size: 13px; color: var(--zk-white); opacity: 1; } .zk-footer__legal-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } /* DESKTOP - same structure, header-matched scale. */ @media (min-width: 900px) { .zk-footer__bar { padding-block-end: 0; } /* Full-bleed, gutter matched to the header's own desktop gutter (space-8). */ .zk-footer__brand-inner, .zk-footer__main, .zk-footer__bar-inner { max-inline-size: none; margin-inline: 0; padding-inline: var(--zk-space-8); } /* ROW 1: logo left, description right, both vertically centred. */ .zk-footer__brand-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--zk-space-7); padding-block: var(--zk-space-6); text-align: start; } /* Identical to the desktop header logo. The footer lockup must not outweigh the one users navigate by. */ .zk-footer__logo { inline-size: 164px; } /* The block sits on the right of the brand row, but the TEXT inside it is LEFT-aligned - measured off the reference, where text-align computes to `start` and the two lines share a left edge, not a right one. */ .zk-footer__blurb { max-inline-size: 620px; font-size: 14px; line-height: 1.7; color: var(--zk-white); opacity: 1; text-align: start; } /* ROW 2: five equal columns, no gutter between them. */ /* gap:0 made spacing read uneven - separation was whatever slack the longest label left. space-7 lands on the reference's 30px. */ .zk-footer__main { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--zk-space-7); row-gap: 0; padding-block: var(--zk-space-7); align-items: start; } /* 15px/600 - one step under the 16px nav link, never above it. */ .zk-footer__col-title { display: block; min-block-size: 0; margin-block-end: var(--zk-space-4); font-size: 15px; font-weight: var(--zk-fw-semibold); line-height: 1.25; letter-spacing: 0.02em; /* Every line in the footer is white; hierarchy is size and weight only. */ color: var(--zk-white); cursor: default; pointer-events: none; } .zk-footer__toggle { display: none; } .zk-footer__col-body { padding-block: 0; } /* 30px row pitch, matching the reference: 14 x 1.6 = 22.4, plus 2 x 4. */ .zk-footer__links a { font-size: 14px; line-height: 1.6; letter-spacing: 0.015em; padding-block: var(--zk-space-1); } .zk-footer__note { font-size: 14px; line-height: 1.6; margin-block-end: var(--zk-space-4); max-inline-size: 240px; opacity: 1; } .zk-footer__contact { font-size: 14px; line-height: 1.6; padding-block: var(--zk-space-1); } .zk-footer__social { margin-block-start: var(--zk-space-5); gap: var(--zk-space-2); } .zk-footer__social-item { inline-size: var(--zk-tap-min); block-size: var(--zk-tap-min); } .zk-footer__social svg { inline-size: 20px; block-size: 20px; } /* ROW 3: copy left, links right, vertically centred. */ .zk-footer__bar-inner { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--zk-space-5); padding-block: var(--zk-space-4); text-align: start; } .zk-footer__copy { font-size: 13px; text-align: start; opacity: 1; } .zk-footer__legal-links { justify-content: flex-end; } .zk-footer__legal-links a { font-size: 13px; opacity: 1; } .zk-footer__legal-links li + li::before { margin-inline: var(--zk-space-4); } } /* INFORMATION PAGE SYSTEM - About, Contact, Help, FAQs, policies. OWNER OVERRIDE of .zk-prose: these pages are WHITE with near-black type. Cocoa across a long policy page reads brown, so it stays for links and buttons only; gold is an accent, never a surface. One system, four layouts (editorial, brand, support, hub) sharing head, shell and type scale. */ /* The white ground covers the breadcrumb too, so the page reads as one surface from the header down, not a white box sitting on cream. */ body.zk-page-doc { background-color: var(--zk-white); } body.zk-page-doc .zk-breadcrumb { padding-block: var(--zk-space-3) 0; font-size: 13px; color: var(--zk-muted); } body.zk-page-doc .zk-breadcrumb a { color: var(--zk-muted); } body.zk-page-doc .zk-breadcrumb a:hover { color: var(--zk-ink); } /* ---------- shell: a deliberate reading width, not the 1440 grid ---------- */ .zk-shell { inline-size: 100%; max-inline-size: 960px; margin-inline: auto; padding-inline: var(--zk-gutter); } /* Contact and Help hold cards rather than paragraphs and can breathe wider. */ .zk-shell--wide { max-inline-size: 1120px; } /* ---------- page head: centred, compact, no hero ---------- */ .zk-doc__head { padding-block: var(--zk-space-8) var(--zk-space-6); text-align: center; } .zk-doc__title { margin: 0; font-family: var(--zk-font-display); font-size: 24px; font-weight: var(--zk-fw-semibold); line-height: 1.2; letter-spacing: -0.01em; color: var(--zk-ink); } /* The one piece of gold on the page. Refined, not decorative. */ .zk-doc__rule { display: block; inline-size: 48px; block-size: 2px; margin: var(--zk-space-4) auto 0; background-color: var(--zk-gold); } .zk-doc__standfirst { max-inline-size: 720px; margin: var(--zk-space-5) auto 0; font-size: 16px; line-height: 1.7; color: var(--zk-muted); } /* ---------- body: editorial type on white ---------- */ .zk-doc__body { padding-block-end: var(--zk-space-10); font-size: 16px; line-height: 1.7; color: var(--zk-ink); } .zk-doc__body > * + * { margin-block-start: var(--zk-space-4); } .zk-doc__body h2 { margin-block-start: var(--zk-space-9); font-family: var(--zk-font-display); font-size: 21px; font-weight: var(--zk-fw-semibold); line-height: 1.3; letter-spacing: -0.005em; color: var(--zk-ink); } .zk-doc__body h3 { margin-block-start: var(--zk-space-6); font-size: 17px; font-weight: var(--zk-fw-semibold); line-height: 1.4; color: var(--zk-ink); } .zk-doc__body h2 + *, .zk-doc__body h3 + * { margin-block-start: var(--zk-space-3); } .zk-doc__body p { max-inline-size: 74ch; } .zk-doc__body ul, .zk-doc__body ol { padding-inline-start: var(--zk-space-5); max-inline-size: 74ch; } .zk-doc__body li + li { margin-block-start: var(--zk-space-2); } .zk-doc__body li::marker { color: var(--zk-gold-deep); } .zk-doc__body strong { font-weight: var(--zk-fw-semibold); color: var(--zk-ink); } .zk-doc__body a { color: var(--zk-cocoa); font-weight: var(--zk-fw-medium); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .zk-doc__body a:hover { text-decoration-thickness: 2px; } /* Long support emails must not push a phone viewport sideways. */ .zk-doc__body p, .zk-doc__body li, .zk-doc__body a { overflow-wrap: anywhere; } /* ---------- table ---------- */ .zk-doc__body table { inline-size: 100%; border-collapse: collapse; font-size: 15px; } .zk-doc__body th, .zk-doc__body td { padding: var(--zk-space-3); text-align: start; vertical-align: top; border-block-end: 1px solid var(--zk-hairline); } .zk-doc__body th { font-weight: var(--zk-fw-semibold); color: var(--zk-ink); } .zk-tablewrap { overflow-x: auto; } /* ---------- callout: only for a genuinely important action ---------- */ /* A gold EDGE rather than a gold panel: the accent is the leading border, which also avoids a pseudo-element having to straddle the box border. */ .zk-note { padding: var(--zk-space-5); background-color: var(--zk-ivory); border: 1px solid var(--zk-hairline); border-inline-start: 3px solid var(--zk-gold); border-radius: var(--zk-radius-md); } .zk-note > * + * { margin-block-start: var(--zk-space-3); } .zk-doc__body .zk-note p { max-inline-size: none; } .zk-note__title { font-weight: var(--zk-fw-semibold); color: var(--zk-ink); } /* ---------- card grid: Help hub, About pillars ---------- */ .zk-cards { display: grid; grid-template-columns: 1fr; gap: var(--zk-space-4); margin: 0; padding: 0; list-style: none; } .zk-card { position: relative; block-size: 100%; padding: var(--zk-space-5); background-color: var(--zk-white); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-md); transition: border-color var(--zk-dur-base) var(--zk-ease); } .zk-card:hover { border-color: var(--zk-cocoa); } .zk-card:focus-within { border-color: var(--zk-cocoa); outline: 2px solid var(--zk-focus); outline-offset: 2px; } /* Scoped, like the TOC title, because these component headings are real

s and `.zk-doc__body h3` (0,2,1) outranks a bare class. Unscoped, every card title rendered at section-heading size with a 24px top margin. */ .zk-doc__body .zk-card__title { margin: 0; font-size: 16px; font-weight: var(--zk-fw-semibold); line-height: 1.4; color: var(--zk-ink); } .zk-card__title a { color: var(--zk-ink); text-decoration: none; font-weight: var(--zk-fw-semibold); } /* The whole card is the target; the accessible name stays the title alone. */ .zk-card__title a::after { content: ""; position: absolute; inset: 0; } .zk-card__title a:focus-visible { outline: none; } .zk-doc__body .zk-card p { margin-block-start: var(--zk-space-2); font-size: 15px; line-height: 1.6; color: var(--zk-muted); max-inline-size: none; } .zk-card__icon { display: block; inline-size: 22px; block-size: 22px; margin-block-end: var(--zk-space-3); color: var(--zk-gold-deep); } /* ---------- contact methods ---------- */ .zk-contact { display: grid; grid-template-columns: 1fr; gap: var(--zk-space-4); margin: 0; padding: 0; list-style: none; } .zk-contact__item { display: flex; flex-direction: column; padding: var(--zk-space-5); background-color: var(--zk-white); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-md); } .zk-contact__icon { inline-size: 24px; block-size: 24px; color: var(--zk-gold-deep); } .zk-contact__label { margin-block-start: var(--zk-space-3); font-size: 15px; font-weight: var(--zk-fw-semibold); color: var(--zk-ink); } .zk-doc__body .zk-contact__value { margin-block-start: var(--zk-space-1); font-size: 15px; color: var(--zk-muted); max-inline-size: none; } .zk-doc__body .zk-contact__note { margin-block-start: var(--zk-space-2); font-size: 14px; line-height: 1.6; color: var(--zk-muted); max-inline-size: none; } /* The auto margin belongs on the WRAPPER, not the link: the

is the flex item, so putting it on the left three buttons at three different heights because the notes above them are different lengths. */ .zk-contact__action { display: flex; inline-size: 100%; align-items: center; justify-content: center; min-block-size: var(--zk-tap-min); padding-inline: var(--zk-space-5); border-radius: var(--zk-radius-sm); background-color: var(--zk-cocoa-soft); color: var(--zk-white); font-size: 15px; font-weight: var(--zk-fw-semibold); text-decoration: none; } .zk-doc__body .zk-contact__action { color: var(--zk-white); text-decoration: none; } .zk-contact__action:hover { background-color: var(--zk-cocoa-hover); text-decoration: none; } /* auto pushes the button to the card floor; the gap above it is padding, so the two cannot fight. Scoped to .zk-doc__body because the generic `.zk-doc__body > * + *` rhythm rule would otherwise win on specificity. */ .zk-doc__body .zk-contact__spacer { margin-block-start: auto; padding-block-start: var(--zk-space-5); } /* ---------- on this page ---------- */ .zk-toc { padding: var(--zk-space-4) var(--zk-space-5); background-color: var(--zk-ivory); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-md); } /* Nothing at the very top of the body carries a top margin: the head above it already sets the spacing, and an h2 first would add 48px of dead air. */ .zk-doc__body > :first-child { margin-block-start: 0; } /* Scoped to .zk-doc__body on purpose. The TOC title is an

for document outline reasons, and `.zk-doc__body h2` (0,2,1) outranks a bare class, so without this it rendered at full 23px section-heading size with a 48px top margin inside its own box. */ .zk-doc__body .zk-toc__title { margin: 0 0 var(--zk-space-3); font-size: 12px; font-weight: var(--zk-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--zk-muted); } .zk-toc__list { display: grid; grid-template-columns: 1fr; gap: var(--zk-space-2); margin: 0; padding: 0; list-style: none; } /* Zero the prose list indent so the entries line up with the TOC title. */ .zk-doc__body .zk-toc__list { padding-inline-start: 0; max-inline-size: none; } .zk-doc__body .zk-toc__list a { font-size: 15px; color: var(--zk-ink); text-decoration: none; font-weight: var(--zk-fw-regular); } .zk-doc__body .zk-toc__list a:hover { color: var(--zk-cocoa); text-decoration: underline; } .zk-doc__body .zk-toc li + li { margin-block-start: 0; } /* ---------- accordions on white ---------- */ .zk-acc { border-block-start: 1px solid var(--zk-hairline); } .zk-acc__item { border-block-end: 1px solid var(--zk-hairline); } .zk-acc__q { display: flex; align-items: center; justify-content: space-between; gap: var(--zk-space-4); min-block-size: var(--zk-tap-min); padding-block: var(--zk-space-4); font-size: 16px; font-weight: var(--zk-fw-semibold); line-height: 1.5; color: var(--zk-ink); cursor: pointer; list-style: none; } .zk-acc__q::-webkit-details-marker { display: none; } .zk-acc__q:hover { color: var(--zk-cocoa); } .zk-acc__a { max-inline-size: 74ch; padding-block: 0 var(--zk-space-4); } /* Description preview below 640. Mobile-first, so the clamp is the default and switches OFF above it. CSS on the one node holding the text: no second copy, and the whole description stays in the DOM for a crawler. */ .zk-desc:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-block-end: 0; } .zk-desc__more { display: inline-flex; align-items: center; margin-block: var(--zk-space-2) var(--zk-space-4); padding: 0; border: 0; background: none; font-family: var(--zk-font-ui); font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-semibold); color: var(--zk-cocoa); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .zk-desc__more[hidden] { display: none; } @media (min-width: 640px) { .zk-desc:not(.is-open) { display: block; overflow: visible; padding-block-end: var(--zk-space-4); } .zk-desc__more { display: none; } } .zk-acc__pm::after { transform: translateY(-50%) rotate(90deg); } .zk-acc__item[open] .zk-acc__pm::after { transform: translateY(-50%) rotate(0deg); opacity: 0; } /* ---------- About: lead and split ---------- */ .zk-lead { max-inline-size: 720px; margin-inline: auto; font-size: 17px; line-height: 1.75; color: var(--zk-ink); text-align: center; } .zk-doc__body .zk-lead { max-inline-size: 720px; } .zk-split { display: grid; grid-template-columns: 1fr; gap: var(--zk-space-5); } /* The `> * + *` rhythm rule only reaches DIRECT children of .zk-doc__body, so paragraphs nested one level deeper (inside a split column, an aside or a note) were rendering with no gap at all and ran together. */ .zk-doc__body .zk-split > * > * + *, .zk-doc__body .zk-split__aside > * + * { margin-block-start: var(--zk-space-4); } .zk-doc__body .zk-split p { max-inline-size: none; } .zk-split__aside { padding: var(--zk-space-5); background-color: var(--zk-ivory); border-radius: var(--zk-radius-md); } /* These are semantic