/* Theme Name: ZIVRO Theme URI: https://zivrostore.com Description: Heritage streetwear theme for ZIVRO, Lahore. Cream and charcoal editorial look (after vylaxclothing.com), cut-out hero looks with ghost carousel, "On the rail" category hangers, tile-reveal drop, Instagram strip and a 3-column product page. WooCommerce ready. Author: ZIVRO Version: 1.0.0 Requires at least: 6.3 Requires PHP: 7.4 Text Domain: zivro */ :root { --paper: #f6f3ee; /* Vylax cream / video off-white */ --paper-2: #ece6dc; --white: #fffdf9; --ink: #1f1c19; /* charcoal */ --ink-2: #4a443d; --muted: #857b70; --line: #e2dbcf; --line-2: #cfc5b5; --maroon: #9b2d2a; /* rug red, Sabr calligraphy */ --gold: #c39a3f; /* Vylax gold */ --sans: 'Outfit', system-ui, sans-serif; --serif: 'Cormorant Garamond', Georgia, serif; --urdu: 'Noto Nastaliq Urdu', serif; --pad: clamp(16px, 4vw, 48px); --sec: clamp(40px, 5vw, 72px); /* section padding, top/bottom */ --sec-sm: clamp(28px, 3.5vw, 48px); --ease: cubic-bezier(.2, .75, .2, 1); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: inherit; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } summary { list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } .zv-skip { position: absolute; left: -9999px; } .zv-skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--ink); color: var(--paper); padding: 8px 14px; } .zv-wrap { max-width: 1360px; margin-inline: auto; padding-inline: var(--pad); } .zv-i { flex: none; } .zv-eyebrow { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; } .zv-eyebrow a { text-decoration: none; } .zv-display { font: 800 clamp(36px, 4.6vw, 68px)/.9 var(--sans); text-transform: uppercase; letter-spacing: -.025em; margin: 0; } .zv-display--sm { font-size: clamp(28px, 3vw, 44px); line-height: .95; } .zv-h2 { font: 600 clamp(26px, 2.6vw, 38px)/1.1 var(--serif); letter-spacing: -.01em; margin: 0; } .zv-h3 { font: 600 26px/1.2 var(--serif); margin: 0 0 8px; } .zv-h3 a { text-decoration: none; } .zv-urdu { font-family: var(--urdu); font-weight: 700; line-height: 2; margin: 0; } .zv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .zv-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 14px/1 var(--sans); letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: transform .25s, background .25s; } .zv-btn:hover { background: #000; color: #fff; transform: translateY(-1px); } .zv-btn .zv-i { width: 16px; height: 16px; } .zv-btn--sm { padding: 10px 20px; font-size: 13px; } .zv-btn--light { background: var(--paper); color: var(--ink); } .zv-btn--light:hover { background: #fff; color: var(--ink); } .zv-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .zv-link .zv-i { width: 16px; height: 16px; } input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], input[type=number], input[type=url], textarea, select { font: inherit; font-size: 15px; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--white); color: var(--ink); max-width: 100%; } /* ---------- announcement + header ---------- */ .zv-announce { background: var(--ink); color: var(--paper); overflow: hidden; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } .zv-announce__track { display: flex; width: max-content; animation: zv-marquee 45s linear infinite; } .zv-announce span { padding: 9px 26px; white-space: nowrap; } .zv-announce span::before { content: "✦"; margin-right: 26px; color: var(--gold); } @keyframes zv-marquee { to { transform: translateX(-50%); } } .zv-header { position: sticky; top: 0; z-index: 100; /* above page widgets such as the gallery zoom button (99), so the open menu covers them */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 14px var(--pad); background: rgb(246 243 238 / .84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } @media (hover: none) { /* phones: a live blur under the sticky header and the tab bar re-renders on every scroll frame */ .zv-header { background: rgb(246 243 238 / .97); -webkit-backdrop-filter: none; backdrop-filter: none; } nav.zv-tabbar { background: rgb(246 243 238 / .98); -webkit-backdrop-filter: none; backdrop-filter: none; } } .admin-bar .zv-header { top: 32px; } @media (max-width: 782px) { .admin-bar .zv-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .zv-header { top: 0; } } .zv-menu { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; } .zv-menu a { display: inline-block; padding: 6px 0; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .3s; } .zv-menu a:hover, .zv-menu .current-menu-item > a { background-size: 100% 1px; } .zv-nav li { position: relative; } .zv-nav .sub-menu { display: none; position: absolute; top: 100%; left: -16px; min-width: 200px; list-style: none; margin: 0; padding: 12px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 40px -24px rgb(0 0 0 / .3); } .zv-nav li:hover > .sub-menu, .zv-nav li:focus-within > .sub-menu { display: block; } .zv-logo { justify-self: center; display: block; text-decoration: none; } .zv-logo img { display: block; height: 30px; width: auto; } .zv-logo span { font: 800 24px/1 var(--sans); letter-spacing: .3em; } .zv-tools { justify-self: end; display: flex; align-items: center; gap: 18px; } .zv-header .zv-i { width: 24px; height: 24px; } /* header icons (search, account, bag, menu) a step up from the 20px default */ .zv-tools > a, .zv-tools summary { display: grid; place-items: center; color: var(--ink); text-decoration: none; } .zv-bag { position: relative; } .zv-bag__n, .zv-wish__n { /* .zv-wish__n: the wishlist count, its own class so WooCommerce's cart fragments (which replace every .zv-bag__n) leave it alone */ position: absolute; top: -7px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--maroon); color: #fff; font-size: 10px; font-weight: 600; line-height: 17px; text-align: center; } .zv-search { position: relative; } .zv-search__panel { position: absolute; right: -60px; top: calc(100% + 20px); width: min(360px, 92vw); padding: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .25); } .zv-search__panel form { display: flex; gap: 8px; } .zv-search__panel input[type=search] { flex: 1; min-width: 0; } .zv-search__panel button { border: 0; border-radius: 10px; padding: 0 16px; background: var(--ink); color: var(--paper); font: inherit; font-size: 14px; cursor: pointer; } .zv-search__panel label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .zv-burger { display: none; } @media (max-width: 1360px) { /* 7 menu items at 13px ("About Us" included) need ~1360px to keep the logo centred */ .zv-nav { display: none; } /* phones/tablets: logo left, icons + burger right */ .zv-header { display: flex; } .zv-logo { margin-right: auto; } .zv-burger { display: block; order: 1; } .zv-burger > summary { display: grid; place-items: center; } .zv-burger__panel { position: absolute; left: 0; right: 0; top: 100%; max-height: 80vh; overflow: auto; padding: 12px 20px 24px; background: var(--paper); border-bottom: 1px solid var(--line); } .zv-burger__panel { overscroll-behavior: contain; } html:has(.zv-burger[open]) { overflow: hidden; } /* menu open: the page behind stays put */ body:has(.zv-burger[open])::after { content: ""; position: fixed; inset: 0; z-index: 90; background: rgb(31 28 25 / .35); } /* and dims under the header (100); a tap on it closes the menu (zivro.js) */ .zv-burger .zv-menu { flex-direction: column; gap: 0; } .zv-burger .zv-menu a { display: block; padding: 12px 0; font-size: 16px; } .zv-burger .sub-menu { list-style: none; padding-left: 16px; } .zv-logo img { height: 24px; } .zv-tools { gap: 14px; } } /* ---------- hero: stacked headline, cut-out look, ghost looks either side (reference video) ---------- */ .zv-hero { position: relative; height: calc(100svh - 100px); min-height: 560px; max-height: 920px; overflow: hidden; background: radial-gradient(ellipse 60% 70% at 52% 55%, #fdfbf7 0%, var(--paper) 55%, var(--paper-2) 100%); } .zv-hero__copy { position: absolute; z-index: 3; left: clamp(16px, 5vw, 72px); top: 50%; transform: translateY(-50%); max-width: 380px; } .zv-hero__sub { max-width: 300px; margin: 22px 0 28px; color: var(--ink-2); font-size: 15px; } .zv-hero__meta { display: grid; justify-items: start; gap: 2px; margin-bottom: 22px; } .zv-hero__count { font-size: 12px; letter-spacing: .2em; color: var(--muted); } .zv-hero__count b { color: var(--ink); } .zv-hero__name { font: 500 26px/1.2 var(--serif); text-decoration: none; } .zv-hero__head { white-space: pre-line; } /* each look's headline carries its own line breaks */ .zv-hero__stage { position: absolute; inset: 0; } .zv-look { --x: 0px; --s: 1; position: absolute; left: 50%; bottom: 0; height: 94%; aspect-ratio: 9 / 13; transform: translateX(calc(-50% + var(--x))) scale(var(--s)); transform-origin: 50% 100%; opacity: 0; pointer-events: none; transition: transform 1s var(--ease), opacity .8s, filter 1s; } .zv-look img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } .zv-look.is-cur { opacity: 1; z-index: 2; pointer-events: auto; cursor: pointer; } .zv-look.is-next, .zv-look.is-prev { --s: .7; filter: grayscale(1) contrast(.8); pointer-events: auto; cursor: pointer; } .zv-look.is-next { --x: clamp(240px, 30vw, 560px); opacity: .25; } .zv-look.is-prev { --x: calc(-1 * clamp(260px, 34vw, 620px)); opacity: .08; } .zv-look:not(.is-cur, .is-next, .is-prev) { --s: .5; } .zv-hero__nav { position: absolute; z-index: 4; right: clamp(16px, 5vw, 72px); bottom: 26px; display: flex; align-items: center; gap: 10px; } .zv-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--ink); opacity: .22; cursor: pointer; transition: width .35s, opacity .35s; } .zv-dot[aria-current] { width: 26px; opacity: 1; } .zv-hero__step { padding: 6px 10px; border: 0; background: none; color: var(--ink); font-size: 18px; cursor: pointer; } /* phones, tablets, small laptops: copy above the looks (side by side they collide below ~1280px) */ @media (max-width: 1279px) { .zv-hero { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; padding-top: 32px; } .zv-hero__copy { position: relative; left: auto; top: auto; transform: none; max-width: none; padding: 0 var(--pad); } .zv-hero__sub { margin: 14px 0 18px; } .zv-hero__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 0; } .zv-hero__name { font-size: 20px; } .zv-hero__cta { display: none; } .zv-hero__stage { position: relative; height: min(60svh, 560px); min-height: 380px; } .zv-look { height: 100%; } .zv-look.is-next { --x: 42vw; } .zv-look.is-prev { --x: -42vw; } .zv-hero__nav { position: relative; right: auto; bottom: auto; justify-content: center; padding: 14px 0 22px; } } /* ---------- "On the rail" categories (ZIVRO-Rail.html): aluminium rail, trolleys, hangers that turn open; JS in zivro.js ---------- */ .zvr-rail{--zvr-bg:transparent;--zvr-ink:var(--ink);--h:360px;--slot:40vw;background:var(--zvr-bg);color:var(--zvr-ink);padding:var(--sec) 24px var(--sec-sm);font-family:inherit;isolation:isolate;width:100%;box-sizing:border-box;overflow:hidden} .zvr-rail *{box-sizing:border-box} .zvr-rail .zvr-heading{margin:0 0 38px;text-align:center;font-size:11px;font-weight:400;line-height:1.5;letter-spacing:1.8px;text-transform:uppercase} .zvr-rail .zvr-heading strong{font-weight:700;margin-right:22px} .zvr-rail .zvr-heading span{color:#88877f} .zvr-rail .zvr-stage{max-width:1240px;margin:0 auto;position:relative} /* rail: brushed aluminium tube + ceiling brackets + sliding trolleys on threaded bolts */ .zvr-rail .zvr-bar{position:absolute;left:0;right:0;top:0;height:26px;border-radius:2px;z-index:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.03) 1px 2px),linear-gradient(90deg,rgba(255,255,255,.0),rgba(255,255,255,.12) 50%,rgba(255,255,255,0)),linear-gradient(180deg,#ffffff 0,#eef0f1 8%,#d4d8da 28%,#b9bec1 52%,#cdd1d4 74%,#9a9fa3 92%,#6d7276 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #4f5356,0 8px 10px -6px rgba(0,0,0,.45),0 18px 18px -14px rgba(0,0,0,.2)} .zvr-rail .zvr-bar:after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(#7d8286,#4c5053);border-top:1px solid rgba(0,0,0,.45)} .zvr-rail .zvr-mount{position:absolute;top:-40px;width:44px;height:66px;z-index:3;pointer-events:none;background-repeat:no-repeat;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.3))} .zvr-rail .zvr-ml{left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 66%22 width=%2244%22 height=%2266%22%3E%3Cdefs%3E%3ClinearGradient id=%22n%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%237f858a%22/%3E%3Cstop offset=%22.22%22 stop-color=%22%23cdd1d4%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23f4f6f7%22/%3E%3Cstop offset=%22.78%22 stop-color=%22%23bfc4c7%22/%3E%3Cstop offset=%221%22 stop-color=%22%23777c81%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22r%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%235f6468%22/%3E%3Cstop offset=%22.4%22 stop-color=%22%23e9ecee%22/%3E%3Cstop offset=%22.7%22 stop-color=%22%23a5aaae%22/%3E%3Cstop offset=%221%22 stop-color=%22%235b6064%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22p%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23e9ecee%22/%3E%3Cstop offset=%221%22 stop-color=%22%23868b8f%22/%3E%3C/linearGradient%3E%3C/defs%3E%0A%3Crect x=%220%22 y=%220%22 width=%2230%22 height=%224%22 rx=%221%22 fill=%22url(%23p)%22 stroke=%22%2370757a%22 stroke-width=%22.6%22/%3E%0A%3Crect x=%225%22 y=%224%22 width=%2217%22 height=%2262%22 fill=%22url(%23n)%22 stroke=%22%236f747a%22 stroke-width=%22.7%22/%3E%3Cpath d=%22M5 4V66%22 stroke=%22%23fff%22 stroke-opacity=%22.6%22/%3E%0A%3Ccircle cx=%2213.5%22 cy=%2252%22 r=%223%22 fill=%22%2380858a%22 stroke=%22%23555a5e%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M11.8 52H15.2%22 stroke=%22%233b3f42%22 stroke-width=%22.8%22/%3E%0A%3Crect x=%2229%22 y=%224%22 width=%225.4%22 height=%2234%22 fill=%22url(%23r)%22/%3E%3Cpath d=%22M29 6.0L34.4 5.1M29 7.7L34.4 6.8M29 9.4L34.4 8.5M29 11.1L34.4 10.2M29 12.8L34.4 11.9M29 14.5L34.4 13.6M29 16.2L34.4 15.3M29 17.9L34.4 17.0M29 19.6L34.4 18.7M29 21.3L34.4 20.4M29 23.0L34.4 22.1M29 24.7L34.4 23.8M29 26.4L34.4 25.5M29 28.1L34.4 27.2M29 29.8L34.4 28.9M29 31.5L34.4 30.6M29 33.2L34.4 32.3M29 34.9L34.4 34.0%22 stroke=%22%2341454a%22 stroke-width=%22.5%22 fill=%22none%22/%3E%0A%3Crect x=%2226%22 y=%227%22 width=%2211.4%22 height=%226%22 rx=%221.3%22 fill=%22url(%23n)%22 stroke=%22%236a6f73%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M29.078 7.4V12.6M34.322 7.4V12.6%22 stroke=%22%235d6256%22 stroke-opacity=%22.45%22 stroke-width=%22.5%22/%3E%3Crect x=%2226%22 y=%2215%22 width=%2211.4%22 height=%226%22 rx=%221.3%22 fill=%22url(%23n)%22 stroke=%22%236a6f73%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M29.078 15.4V20.6M34.322 15.4V20.6%22 stroke=%22%235d6256%22 stroke-opacity=%22.45%22 stroke-width=%22.5%22/%3E%3C/svg%3E");background-position:center top} .zvr-rail .zvr-mr{right:0;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 66%22 width=%2244%22 height=%2266%22%3E%3Cdefs%3E%3ClinearGradient id=%22n%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%237f858a%22/%3E%3Cstop offset=%22.22%22 stop-color=%22%23cdd1d4%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23f4f6f7%22/%3E%3Cstop offset=%22.78%22 stop-color=%22%23bfc4c7%22/%3E%3Cstop offset=%221%22 stop-color=%22%23777c81%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22r%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%235f6468%22/%3E%3Cstop offset=%22.4%22 stop-color=%22%23e9ecee%22/%3E%3Cstop offset=%22.7%22 stop-color=%22%23a5aaae%22/%3E%3Cstop offset=%221%22 stop-color=%22%235b6064%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22p%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23e9ecee%22/%3E%3Cstop offset=%221%22 stop-color=%22%23868b8f%22/%3E%3C/linearGradient%3E%3C/defs%3E%0A%3Crect x=%220%22 y=%220%22 width=%2230%22 height=%224%22 rx=%221%22 fill=%22url(%23p)%22 stroke=%22%2370757a%22 stroke-width=%22.6%22/%3E%0A%3Crect x=%225%22 y=%224%22 width=%2217%22 height=%2262%22 fill=%22url(%23n)%22 stroke=%22%236f747a%22 stroke-width=%22.7%22/%3E%3Cpath d=%22M5 4V66%22 stroke=%22%23fff%22 stroke-opacity=%22.6%22/%3E%0A%3Ccircle cx=%2213.5%22 cy=%2252%22 r=%223%22 fill=%22%2380858a%22 stroke=%22%23555a5e%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M11.8 52H15.2%22 stroke=%22%233b3f42%22 stroke-width=%22.8%22/%3E%0A%3Crect x=%2229%22 y=%224%22 width=%225.4%22 height=%2234%22 fill=%22url(%23r)%22/%3E%3Cpath d=%22M29 6.0L34.4 5.1M29 7.7L34.4 6.8M29 9.4L34.4 8.5M29 11.1L34.4 10.2M29 12.8L34.4 11.9M29 14.5L34.4 13.6M29 16.2L34.4 15.3M29 17.9L34.4 17.0M29 19.6L34.4 18.7M29 21.3L34.4 20.4M29 23.0L34.4 22.1M29 24.7L34.4 23.8M29 26.4L34.4 25.5M29 28.1L34.4 27.2M29 29.8L34.4 28.9M29 31.5L34.4 30.6M29 33.2L34.4 32.3M29 34.9L34.4 34.0%22 stroke=%22%2341454a%22 stroke-width=%22.5%22 fill=%22none%22/%3E%0A%3Crect x=%2226%22 y=%227%22 width=%2211.4%22 height=%226%22 rx=%221.3%22 fill=%22url(%23n)%22 stroke=%22%236a6f73%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M29.078 7.4V12.6M34.322 7.4V12.6%22 stroke=%22%235d6256%22 stroke-opacity=%22.45%22 stroke-width=%22.5%22/%3E%3Crect x=%2226%22 y=%2215%22 width=%2211.4%22 height=%226%22 rx=%221.3%22 fill=%22url(%23n)%22 stroke=%22%236a6f73%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M29.078 15.4V20.6M34.322 15.4V20.6%22 stroke=%22%235d6256%22 stroke-opacity=%22.45%22 stroke-width=%22.5%22/%3E%3C/svg%3E");transform:scaleX(-1)} .zvr-rail .zvr-trolley{position:absolute;top:0;left:50%;width:44px;height:68px;margin-left:-22px;z-index:2;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 68%22 width=%2244%22 height=%2268%22%3E%3Cdefs%3E%3ClinearGradient id=%22n%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%237f858a%22/%3E%3Cstop offset=%22.22%22 stop-color=%22%23cdd1d4%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23f4f6f7%22/%3E%3Cstop offset=%22.78%22 stop-color=%22%23bfc4c7%22/%3E%3Cstop offset=%221%22 stop-color=%22%23777c81%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22r%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%235f6468%22/%3E%3Cstop offset=%22.4%22 stop-color=%22%23e9ecee%22/%3E%3Cstop offset=%22.7%22 stop-color=%22%23a5aaae%22/%3E%3Cstop offset=%221%22 stop-color=%22%235b6064%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22p%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23e9ecee%22/%3E%3Cstop offset=%221%22 stop-color=%22%23868b8f%22/%3E%3C/linearGradient%3E%3C/defs%3E%0A%3Crect x=%227%22 y=%2222%22 width=%2230%22 height=%228%22 rx=%222%22 fill=%22url(%23p)%22 stroke=%22%2370757a%22 stroke-width=%22.7%22/%3E%0A%3Cg%3E%3Ccircle cx=%2212.5%22 cy=%2227%22 r=%224.4%22 fill=%22%232f3235%22/%3E%3Ccircle cx=%2212.5%22 cy=%2227%22 r=%222.8%22 fill=%22url(%23r)%22/%3E%3Ccircle cx=%2212.5%22 cy=%2227%22 r=%22.9%22 fill=%22%2353575a%22/%3E%3Ccircle cx=%2231.5%22 cy=%2227%22 r=%224.4%22 fill=%22%232f3235%22/%3E%3Ccircle cx=%2231.5%22 cy=%2227%22 r=%222.8%22 fill=%22url(%23r)%22/%3E%3Ccircle cx=%2231.5%22 cy=%2227%22 r=%22.9%22 fill=%22%2353575a%22/%3E%3C/g%3E%0A%3Crect x=%2214.5%22 y=%2230%22 width=%2215%22 height=%227%22 rx=%221.3%22 fill=%22url(%23n)%22 stroke=%22%236a6f73%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M18.55 30.4V36.6M25.45 30.4V36.6%22 stroke=%22%235d6256%22 stroke-opacity=%22.45%22 stroke-width=%22.5%22/%3E%0A%3Crect x=%2219.2%22 y=%2236.5%22 width=%225.6%22 height=%2216%22 fill=%22url(%23r)%22/%3E%3Cpath d=%22M19.2 38.0L24.799999999999997 37.1M19.2 39.7L24.799999999999997 38.8M19.2 41.4L24.799999999999997 40.5M19.2 43.1L24.799999999999997 42.2M19.2 44.8L24.799999999999997 43.9M19.2 46.5L24.799999999999997 45.6M19.2 48.2L24.799999999999997 47.3M19.2 49.9L24.799999999999997 49.0M19.2 51.6L24.799999999999997 50.7%22 stroke=%22%2341454a%22 stroke-width=%22.5%22 fill=%22none%22/%3E%0A%3Crect x=%2214%22 y=%2251%22 width=%2216%22 height=%227.5%22 rx=%221.3%22 fill=%22url(%23n)%22 stroke=%22%236a6f73%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M18.32 51.4V58.1M25.68 51.4V58.1%22 stroke=%22%235d6256%22 stroke-opacity=%22.45%22 stroke-width=%22.5%22/%3E%3Crect x=%2214%22 y=%2258.5%22 width=%2216%22 height=%227.5%22 rx=%221.3%22 fill=%22url(%23n)%22 stroke=%22%236a6f73%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M18.32 58.9V65.6M25.68 58.9V65.6%22 stroke=%22%235d6256%22 stroke-opacity=%22.45%22 stroke-width=%22.5%22/%3E%3C/svg%3E") no-repeat center top;filter:drop-shadow(0 2px 1.5px rgba(0,0,0,.3))} /* desktop: hanger rail ke andar slide karte hain */ .zvr-rail{--s:min(62px,4.8vw)} .zvr-rail .zvr-item{transition:transform .9s cubic-bezier(.45,.05,.2,1)} .zvr-rail .zvr-item[data-pos="-1"]{transform:translateX(calc(var(--s)*-1))} .zvr-rail .zvr-item[data-pos="1"]{transform:translateX(var(--s))} .zvr-rail .zvr-items{display:flex;align-items:flex-start;position:relative;padding:0 28px;z-index:1} .zvr-rail .zvr-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-decoration:none!important;color:var(--zvr-ink)!important;position:relative;outline:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none} .zvr-rail .zvr-item.is-active{z-index:2} .zvr-rail .zvr-photo{margin-top:66px;display:flex;justify-content:center;width:100%;height:var(--h);position:relative} .zvr-rail .zvr-photo img{display:block!important;flex:none;height:100%!important;width:auto!important;max-width:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform-origin:50% 0;transform:perspective(1300px) rotateY(70deg) rotateZ(-1.5deg);filter:brightness(.86);transition:transform .9s cubic-bezier(.2,.85,.3,1.18),filter .7s;pointer-events:none;-webkit-user-drag:none} .zvr-rail .zvr-item:nth-child(even) .zvr-photo img{transform:perspective(1300px) rotateY(-70deg) rotateZ(1.5deg)} .zvr-rail .zvr-item.is-active .zvr-photo img{transform:perspective(1300px) rotateY(0deg) rotateZ(0deg);filter:none} .zvr-rail .zvr-name{font-size:12px;font-weight:500;line-height:1.5;text-align:center;margin-top:14px;letter-spacing:.15px;white-space:nowrap;color:#77766e;transition:color .3s} .zvr-rail .zvr-item.is-active .zvr-name{color:var(--zvr-ink);font-weight:700} .zvr-rail .zvr-shop{margin-top:8px;font-size:11px;line-height:1.5;color:#7b7b72;opacity:0;transform:translateY(5px);transition:opacity .3s,transform .3s} .zvr-rail .zvr-item.is-active .zvr-shop{opacity:1;transform:none} .zvr-rail .zvr-item:focus-visible .zvr-name{text-decoration:underline} .zvr-rail .zvr-foot{text-align:center;margin:26px 0 0;font-size:11px;line-height:1.5;color:#939389} .zvr-rail .zvr-touch-hint{display:none} @media(min-width:1500px){.zvr-rail{--h:400px}} @media(max-width:1000px){.zvr-rail{--h:300px}} /* MOBILE: rail screen jitni, beech wala open, left/right 1-1 nazar aaye, swipe se agla/pichla */ @media(max-width:767px),(hover:none) and (pointer:coarse){ .zvr-rail{--h:min(290px,72vw);--slot:clamp(120px,40vw,220px);padding:30px 0 25px} .zvr-rail .zvr-heading{margin-bottom:28px;font-size:10px;letter-spacing:1.1px} .zvr-rail .zvr-heading strong{margin-right:12px} .zvr-rail .zvr-stage{max-width:none;width:100%} .zvr-rail .zvr-items{overflow-x:auto;overflow-y:hidden;padding:0 calc(50% - var(--slot)/2);scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain} .zvr-rail .zvr-items::-webkit-scrollbar{display:none} .zvr-rail .zvr-item{flex:0 0 var(--slot);scroll-snap-align:center;scroll-snap-stop:always} .zvr-rail .zvr-name{font-size:11px} .zvr-rail .zvr-item[data-pos]{transform:none;transition:none} /* mobile: only the centre one is open; the rest stay turned on the rail, facing the centre */ .zvr-rail .zvr-item[data-pos="-1"] .zvr-photo img{transform:perspective(1300px) rotateY(70deg) rotateZ(-1.5deg);filter:brightness(.86)} .zvr-rail .zvr-item[data-pos="1"] .zvr-photo img{transform:perspective(1300px) rotateY(-70deg) rotateZ(1.5deg);filter:brightness(.86)} .zvr-rail .zvr-desktop-hint{display:none}.zvr-rail .zvr-touch-hint{display:inline} } /* pagination: phones only */ .zvr-rail .zvr-pager{display:none;align-items:center;justify-content:center;gap:14px;margin-top:20px} .zvr-rail .zvr-dots{display:flex;align-items:center;gap:7px} .zvr-rail .zvr-dot{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:#cfcec7;cursor:pointer;transition:width .35s,background .35s} .zvr-rail .zvr-dot.is-on{width:22px;background:var(--zvr-ink)} .zvr-rail .zvr-arrow{width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid #d8d7d0;border-radius:50%;background:transparent;color:var(--zvr-ink);cursor:pointer} .zvr-rail .zvr-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .zvr-rail .zvr-arrow:active{background:#fff} .zvr-rail .zvr-dot:focus-visible,.zvr-rail .zvr-arrow:focus-visible{outline:2px solid var(--zvr-ink);outline-offset:2px} @media(max-width:767px),(hover:none) and (pointer:coarse){.zvr-rail .zvr-pager{display:flex}.zvr-rail .zvr-foot{margin-top:14px}} @media(prefers-reduced-motion:reduce){.zvr-rail .zvr-photo img,.zvr-rail .zvr-shop{transition:none}} /* ---------- latest drops: Men / Women tabs (radio, no JS) ---------- */ .zv-drops { padding-block: var(--sec); } .zv-tabs > input { position: absolute; opacity: 0; pointer-events: none; } .zv-tabs > label { display: inline-block; margin: 0 6px 28px 0; padding: 9px 22px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s; } .zv-tabs > input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--paper); } .zv-tabs > input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 3px; } .zv-tab { display: none; } #zv-drops-men:checked ~ .zv-tab--men, #zv-drops-women:checked ~ .zv-tab--women { display: block; animation: zv-fade .5s; } @keyframes zv-fade { from { opacity: 0; transform: translateY(8px); } } /* ---------- product cards (WooCommerce loop) ---------- */ /* !important: WooCommerce's float grid uses column-count selectors of varying weight */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 22px; margin: 0 0 40px; padding: 0; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } .woocommerce ul.products[class] li.product, .woocommerce-page ul.products[class] li.product { width: auto !important; float: none !important; clear: none !important; margin: 0 !important; padding: 0; text-align: left; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 0 8px; } .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { flex: 0 0 100%; } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { text-decoration: none; color: inherit; } .zv-card__media { position: relative; display: block; aspect-ratio: 4 / 5; margin-bottom: 14px; overflow: hidden; border-radius: 16px; background: var(--paper-2); } .woocommerce ul.products li.product .zv-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; transition: opacity .5s, transform .9s var(--ease); } .woocommerce ul.products li.product .zv-card__alt { opacity: 0; } .woocommerce ul.products li.product:hover .zv-card__alt { opacity: 1; } .woocommerce ul.products li.product:hover .zv-card__media img { transform: scale(1.04); } .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0; margin: 0 0 4px; font: 500 21px/1.2 var(--serif); color: var(--ink); } .woocommerce ul.products li.product .price { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; } .woocommerce ul.products li.product .price del { opacity: .5; font-weight: 400; } .woocommerce ul.products li.product .price ins { text-decoration: none; } .woocommerce ul.products li.product .button { margin-top: 12px; padding: 9px 16px; background: transparent; border: 1px solid var(--ink); color: var(--ink); font-size: 12px; } .woocommerce ul.products li.product .button:hover { background: var(--ink); color: var(--paper); } a.added_to_cart.wc-forward { display: none !important; } /* WooCommerce's "View cart" link: the side cart opens instead */ .woocommerce span.onsale, .woocommerce ul.products li.product .onsale { top: 12px; left: 12px; right: auto; z-index: 2; min-width: 0; min-height: 0; margin: 0; padding: 7px 12px; border-radius: 999px; background: var(--maroon); color: #fff; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .12em; text-transform: uppercase; } @media (max-width: 900px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; } } /* card: white tile with the photo inset; wishlist + quick view over the photo, a round bag button beside the price (buttons from functions.php, wishlist in zivro.js, quick view is YITH's modal) */ .woocommerce ul.products[class] li.product, .woocommerce-page ul.products[class] li.product { position: relative; flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: 8px 8px 14px; background: var(--white); border-radius: 20px; box-shadow: 0 1px 2px rgb(31 28 25 / .06); } .woocommerce ul.products li.product .zv-card__media { margin-bottom: 12px; border-radius: 14px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { padding-inline: 6px; } /* the link fills the card (cards in a row share their height), so the price sits on the same line in every card whatever the name's length */ .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1 1 auto; } .woocommerce ul.products li.product .price { margin-top: auto; display: flex; align-items: center; min-height: 40px; padding: 0 52px 0 6px; } .zv-card__acts { position: absolute; top: 18px; right: 18px; z-index: 3; display: grid; gap: 8px; } .zv-act, a.zv-act { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 253 249 / .92); color: var(--ink); box-shadow: 0 4px 12px -6px rgb(0 0 0 / .4); cursor: pointer; transition: transform .2s, color .2s; } /* a.: outranks Elementor's ".elementor a" shadow reset */ .zv-act .zv-i { width: 18px; height: 18px; } .zv-act:hover { transform: scale(1.08); } .zv-act[aria-pressed="true"] { color: var(--maroon); } .zv-act[aria-pressed="true"] .zv-i { fill: currentColor; } .zv-bagbtn { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--paper); text-decoration: none; transition: background .2s, transform .2s; } .zv-bagbtn .zv-i { width: 18px; height: 18px; } .zv-bagbtn:hover { background: var(--maroon); transform: scale(1.06); } .zv-bagbtn.loading { opacity: .6; pointer-events: none; } .zv-bagbtn[aria-expanded="true"] { background: var(--maroon); } /* quick-add sizes: a strip over the card's name and price, opened by the bag (zivro.js) */ .zv-sizes { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px; background: var(--white); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 -10px 24px -16px rgb(31 28 25 / .5); } .zv-sizes[hidden] { display: none; } .zv-sizes__label { margin-right: 2px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .zv-sizes [data-vid] { min-width: 40px; height: 36px; padding: 0 10px; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; transition: background .2s, color .2s; } .zv-sizes [data-vid]:hover { background: var(--ink); color: var(--paper); } .zv-sizes [data-vid]:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; background: none; color: var(--ink); } .zv-sizes__x { margin-left: auto; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; } .zv-sizes.is-busy [data-vid] { opacity: .5; pointer-events: none; } .zv-sizes__done { display: none; } .zv-sizes.is-done > :not(.zv-sizes__done) { display: none; } .zv-sizes.is-done .zv-sizes__done { display: block; width: 100%; padding: 8px 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); } @media (max-width: 900px) { .zv-sizes { left: 6px; right: 6px; bottom: 6px; gap: 5px; padding: 8px; } .zv-sizes__label { width: 100%; } .zv-sizes [data-vid] { min-width: 0; flex: 1; height: 34px; padding: 0 6px; } .zv-sizes__x { position: absolute; top: 2px; right: 2px; } } /* ---------- shop filters (woocommerce.php): left column on desktop, a drawer (native popover) on phones ---------- */ .zv-filter-btn { display: none; } .zv-filters h2 { margin: 0 0 14px; font: 500 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; } /* like the product page accordions */ .zv-filters__head { display: flex; align-items: center; justify-content: space-between; } .zv-filters__head h2 { margin: 0; font: 600 28px/1.1 var(--serif); letter-spacing: 0; text-transform: none; } .zv-filters__close { display: none; } .zv-filters__cats { display: grid; gap: 2px; margin: 18px 0 0; padding: 0 0 22px; border-bottom: 1px solid var(--line-2); list-style: none; } .zv-filters__cats a { display: block; padding: 7px 0; border-left: 2px solid transparent; color: var(--muted); font-size: 15px; text-decoration: none; transition: color .2s, padding .2s; } .zv-filters__cats a:hover { color: var(--ink); } .zv-filters__cats a[aria-current] { padding-left: 14px; border-color: var(--maroon); color: var(--ink); font-weight: 600; } .zv-filters__form { padding: 22px 0; border-bottom: 1px solid var(--line-2); } .zv-filters__form h2 ~ h2 { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-2); } .zv-filters__check { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; } .zv-filters__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); } .zv-filters__range { width: 100%; margin: 4px 0 0; accent-color: var(--ink); } .zv-filters__price { margin: 10px 0 0; font-size: 14px; color: var(--muted); } .zv-filters__apply { margin-top: 16px; padding: 10px 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 13px/1 var(--sans); cursor: pointer; } .zv-filters__form.is-live .zv-filters__apply { display: none; } /* with JS the filters apply on change */ .zv-filters__reset { display: inline-block; margin-top: 22px; padding: 12px 26px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: 14px; text-decoration: none; transition: background .2s, color .2s; } .zv-filters__reset:hover { background: var(--ink); color: var(--paper); } @media (min-width: 901px) { .zv-shop__layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; } .woocommerce .zv-shop__layout ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* the popover's browser defaults (fixed, centred, hidden) give way to a plain sticky column */ .zv-filters { position: sticky; top: 110px; inset: auto; display: block; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; } } @media (max-width: 900px) { @supports selector(:popover-open) { .zv-filter-btn { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 10px 18px; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font: 500 14px/1 var(--sans); cursor: pointer; } .zv-filter-btn .zv-i { width: 18px; height: 18px; } .zv-filters { position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); height: 100%; max-height: none; margin: 0; padding: 24px 22px 32px; border: 0; background: var(--paper); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; box-shadow: 20px 0 40px -20px rgb(0 0 0 / .4); } .zv-filters::backdrop { background: rgb(20 17 14 / .45); } .zv-filters__close { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -10px; border: 0; background: none; color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer; } html:has(.zv-filters:popover-open) { overflow: hidden; } } } .zv-wishlink { position: relative; } .zv-wish__n[hidden] { display: none; } /* empty wishlist: no "0" badge */ .zv-empty-wish { padding: 32px 0 64px; color: var(--ink-2); } #yith-quick-view-modal .price { color: var(--ink) !important; } /* quick view: price in the theme ink, not the plugin's olive */ @media (max-width: 900px) { .woocommerce ul.products[class] li.product, .woocommerce-page ul.products[class] li.product { padding: 6px 6px 12px; border-radius: 16px; } .woocommerce ul.products li.product .zv-card__media { border-radius: 11px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 17px; } .woocommerce ul.products li.product .price { min-height: 36px; padding-right: 44px; } .zv-card__acts { top: 12px; right: 12px; gap: 6px; } .zv-act { width: 32px; height: 32px; } .zv-act .zv-i { width: 16px; height: 16px; } .zv-bagbtn { right: 10px; bottom: 12px; width: 36px; height: 36px; } } /* WooCommerce buttons: charcoal pills instead of purple */ .woocommerce :is(a, button, input).button, .woocommerce #respond input#submit, .woocommerce :is(a, button, input).button.alt { padding: 14px 26px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 14px/1 var(--sans); letter-spacing: .04em; } .woocommerce :is(a, button, input).button:hover, .woocommerce #respond input#submit:hover, .woocommerce :is(a, button, input).button.alt:hover { background: #000; color: #fff; } .woocommerce :is(a, button, input).button.alt.disabled, .woocommerce :is(a, button, input).button.alt:disabled { background: var(--ink); opacity: .45; } /* rug medallion on the seam between Latest Drops and Art Series: big, half off the left edge, slowly turning */ .zv-medallion { position: relative; height: 0; overflow-x: clip; } /* the half that hangs off the screen edge is cut off there instead of widening the page */ .zv-medallion::before { --w: clamp(84px, 15vw, 260px); content: ""; position: absolute; z-index: -1; left: calc(var(--w) * -.42); top: calc(var(--w) * -.73); width: var(--w); aspect-ratio: 429 / 624; background: url(assets/heritage/medallion.webp) center / contain no-repeat; filter: drop-shadow(0 18px 28px rgb(31 28 25 / .18)); pointer-events: none; animation: zv-spin 90s linear infinite; } @keyframes zv-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .zv-medallion::before { animation: none; } } /* phones: on the right edge instead, clear of the "Art Series" eyebrow, and a little bigger */ @media (max-width: 767px) { .zv-medallion::before { --w: 112px; left: auto; right: calc(var(--w) * -.42); } } /* ---------- tile reveal (reference video) ---------- */ .zv-reveal { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(28px, 5vw, 72px); padding-block: var(--sec); } .zv-reveal__copy > p:not(.zv-eyebrow) { max-width: 380px; margin: 22px 0 30px; color: var(--ink-2); } .zv-reveal__img { position: relative; display: grid; grid-template: repeat(4, 1fr) / repeat(3, 1fr); width: 100%; max-width: 540px; aspect-ratio: 2 / 3; justify-self: center; overflow: hidden; border-radius: 18px; transition: gap 1s var(--ease) .2s; } .zv-tile { background: var(--img) no-repeat; background-size: 300% 400%; background-position: calc(var(--c) * 50%) calc(var(--r) * 33.333%); transition: transform 1.1s var(--ease) calc(var(--i) * 60ms), opacity .8s calc(var(--i) * 60ms); } .zv-pill { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 10px 20px; border-radius: 999px; background: rgb(255 253 249 / .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; transition: opacity .5s 1.1s, background .25s; } @media (hover: none) { .zv-pill { background: rgb(255 253 249 / .94); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* same on the reel and Art Series pills */ .zv-reveal__img:hover .zv-pill { background: #fff; } .js .zv-reveal:not(.is-in) .zv-reveal__img { gap: 6px; } .js .zv-reveal:not(.is-in) .zv-tile { opacity: 0; transform: translate(calc((var(--c) - 1) * 28px), calc((var(--r) - 1.5) * 28px)) scale(.86); } .js .zv-reveal:not(.is-in) .zv-pill { opacity: 0; } @media (max-width: 767px) { .zv-reveal { grid-template-columns: 1fr; } } /* ---------- heritage story with the brand cut-outs (cutout.jfif) ---------- */ .zv-heritage { position: relative; display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 80px); padding: clamp(40px, 5vw, 72px) clamp(16px, 5vw, 72px); background: var(--paper-2); overflow: hidden; } /* Charminar minarets + doves cut-out ('sabr -utout'), standing on the section's bottom edge at the far left. The photo crops the outer minarets on both sides: the left crop sits on the screen edge, the right one fades out. */ .zv-heritage__art { align-self: stretch; min-height: 420px; } img.zv-art-minarets { position: absolute; left: 0; bottom: 0; display: block; height: calc(100% - 28px); width: auto; max-width: 36%; object-fit: cover; object-position: left bottom; pointer-events: none; -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 98%); mask-image: linear-gradient(to right, #000 78%, transparent 98%); } /* img. so it outranks Elementor's ".elementor img" reset on Elementor-built pages */ .zv-heritage__copy { max-width: 560px; } .zv-urdu--big { margin: -.1em 0 0; font-size: clamp(48px, 5vw, 80px); line-height: 1.4; color: var(--maroon); } .zv-heritage__copy > p:not([class]) { margin: 16px 0 24px; color: var(--ink-2); } @media (max-width: 860px) { .zv-heritage { grid-template-columns: 1fr; padding-bottom: 0; } /* phones: minarets full width under the copy, cropped above the base so the photo's cut edges never show */ .zv-heritage__art { order: 2; min-height: 0; margin-inline: calc(-1 * clamp(16px, 5vw, 72px)); } img.zv-art-minarets { position: static; width: 100%; max-width: 440px; height: auto; aspect-ratio: 554 / 800; margin-inline: auto; object-position: center top; -webkit-mask-image: none; mask-image: none; } } /* values list (homepage section above and About page "What we believe") */ .zv-values { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin: 0; padding: 0; list-style: none; } .zv-values li { padding-top: 12px; border-top: 1px solid var(--line-2); } .zv-values b { display: block; margin-bottom: 4px; font: 600 21px/1.2 var(--serif); } .zv-values span { font-size: 14px; color: var(--muted); } /* ---------- What we stand for: full-width banner (front-page.php) ---------- The heritage-walls photo runs the full width; a dark wash from the left keeps the words readable over it. */ .zv-stand { --st-bg: #24170f; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 620px; padding: 64px var(--pad); background: var(--st-bg); color: #fff; } .zv-stand__photo { position: absolute; z-index: -1; inset: 0; background: url(assets/banner/heritage-walls.jpg) 50% 50% / cover no-repeat; } .zv-stand__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(36 23 15 / .92) 0%, rgb(36 23 15 / .82) 34%, rgb(36 23 15 / .3) 62%, rgb(36 23 15 / 0) 80%), linear-gradient(0deg, rgb(36 23 15 / .4), transparent 30%); } .zv-stand__body { width: min(560px, 100%); } .zv-stand__eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: rgb(255 255 255 / .75); } .zv-stand__title { margin: 0; font: 600 clamp(32px, 3.8vw, 50px)/1.08 var(--serif); color: #fff; text-wrap: balance; } .zv-stand__lead { margin: 16px 0 26px; font-size: 15px; line-height: 1.7; color: rgb(255 255 255 / .85); } .zv-stand__values { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin: 0 0 30px; padding: 0; list-style: none; } .zv-stand__values li { padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .28); } .zv-stand__values b { display: block; margin-bottom: 4px; font: 600 20px/1.2 var(--serif); color: #fff; } .zv-stand__values span { font-size: 14px; line-height: 1.5; color: rgb(255 255 255 / .72); } .zv-stand__cta { display: flex; flex-wrap: wrap; gap: 10px; } .zv-stand__cta a { display: inline-block; padding: 16px 28px; border: 1px solid #fff; background: #fff; color: var(--ink); font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .25s, color .25s, border-color .25s; } .zv-stand__cta a + a { background: none; color: #fff; } .zv-stand__cta a:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; } @media (prefers-reduced-motion: no-preference) { .zv-stand__photo { animation: zv-stand-drift 26s ease-in-out infinite alternate; transform-origin: 60% 50%; } @keyframes zv-stand-drift { to { transform: scale(1.06); } } } @media (max-width: 767px) { .zv-stand { display: block; min-height: 0; padding: 0 0 40px; } .zv-stand__photo { position: relative; inset: auto; z-index: 0; width: 100%; height: 300px; background-position: 60% 50%; } .zv-stand__photo::after { background: linear-gradient(0deg, var(--st-bg) 0%, rgb(36 23 15 / 0) 50%); } .zv-stand__body { position: relative; width: auto; margin-top: -60px; padding: 0 var(--pad); } .zv-stand__values { grid-template-columns: 1fr; gap: 14px; } } /* ---------- What's trending: endless reel, the centre look grows (zivro.js) ---------- */ .zv-trend { padding-block: var(--sec) var(--sec-sm); text-align: center; overflow: hidden; } .zv-trend__title, .zv-why__title { margin: 0; font: 400 clamp(24px, 2.8vw, 36px)/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; } .zv-trend__follow { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; letter-spacing: .08em; color: var(--muted); text-decoration: none; } .zv-trend__follow .zv-i { width: 16px; height: 16px; } .zv-trend__viewport { padding-block: 48px 40px; } .zv-trend__track { display: flex; gap: 22px; width: max-content; transition: transform .9s var(--ease); } .zv-trend__card { position: relative; flex: none; width: clamp(170px, 16vw, 250px); aspect-ratio: 3 / 5; overflow: hidden; border-radius: 14px; background: var(--paper-2); transition: transform .9s var(--ease), box-shadow .9s; } .zv-trend__card :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; } .zv-trend__card.is-on { z-index: 1; transform: scale(1.14); box-shadow: 0 28px 44px -24px rgb(31 28 25 / .6); } .zv-trend__card .zv-pill { left: 12px; bottom: 12px; transform: none; padding: 8px 14px; font-size: 12px; opacity: 0; transition: opacity .4s; } .zv-trend__card.is-on .zv-pill, .zv-trend__card:hover .zv-pill, .zv-trend__card:focus-visible .zv-pill { opacity: 1; } .zv-trend__track.is-jump, .zv-trend__track.is-jump .zv-trend__card { transition: none; } /* arrows + dots under the reel */ .zv-trend__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 6px; } .zv-trend__dots { display: flex; align-items: center; gap: 8px; } .zv-trend__step { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: background .25s, color .25s; } .zv-trend__step:hover, .zv-trend__step:focus-visible { background: var(--ink); color: var(--paper); outline: none; } .zv-trend__step .zv-i { width: 18px; height: 18px; } .zv-trend__step[data-step="-1"] .zv-i { transform: scaleX(-1); } .zv-trend:not(.is-live) .zv-trend__dots { display: none; } /* reel not animating: the arrows just scroll the row */ /* before JS / reduced motion: a plain swipeable row */ .zv-trend:not(.is-live) .zv-trend__viewport { overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--pad); scrollbar-width: none; } .zv-trend:not(.is-live) .zv-trend__card { scroll-snap-align: center; } @media (max-width: 767px) { .zv-trend__card { width: 56vw; } } /* ---------- Why choose ZIVRO (every page, above the footer) ---------- */ .zv-why { position: relative; isolation: isolate; overflow: hidden; padding: var(--sec) var(--pad); text-align: center; border-top: 1px solid var(--line); } /* culture hexagon tiles (cut-out), sized to the section's height and peeking in from the left edge */ .zv-why::before { content: ""; position: absolute; z-index: -1; left: 0; top: 8%; height: 84%; aspect-ratio: 555 / 992; transform: translateX(-30%); background: url(assets/heritage/hex-culture.webp) left center / contain no-repeat; filter: drop-shadow(0 16px 24px rgb(31 28 25 / .16)); pointer-events: none; } .zv-why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; max-width: 1200px; margin: 44px auto 0; padding: 0; list-style: none; } .zv-why__grid li { display: grid; justify-items: center; align-content: start; gap: 8px; } .zv-why__grid .zv-i { width: 58px; height: 58px; padding: 16px; margin-bottom: 8px; border-radius: 50%; background: var(--paper-2); color: var(--maroon); } .zv-why__grid b { font: 600 22px/1.2 var(--serif); } .zv-why__grid span { max-width: 250px; font-size: 14px; color: var(--muted); } .zv-why__grid a { color: var(--ink); } @media (max-width: 900px) { .zv-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zv-why::before { top: 36%; height: 30%; transform: translateX(-74%); } } /* phones: the title breaks onto two lines, which frees the top-left corner for the tiles, shown properly there */ @media (max-width: 560px) { .zv-why__title { max-width: 240px; margin-inline: auto; } .zv-why::before { top: 12px; height: 215px; transform: translateX(-44%); } } /* ---------- footer ---------- */ .zv-footer { padding: var(--sec) clamp(16px, 5vw, 72px) 28px; background: var(--ink); color: #d9d1c4; } .zv-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; max-width: 1360px; margin: auto; } .zv-footer__logo { display: block; width: 220px; height: auto; margin-bottom: 22px; filter: invert(1); } /* black PNG → white on the dark footer */ .zv-footer__brand p:last-child { max-width: 340px; margin: 0; font-size: 14px; color: #a39a8d; } .zv-footer h2 { margin: 0 0 18px; font: 600 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } .zv-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .zv-footer__col a { font-size: 14px; text-decoration: none; } .zv-footer__col a:hover { color: #fff; } .zv-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; max-width: 1360px; margin: 56px auto 0; padding-top: 22px; border-top: 1px solid #3a352f; font-size: 12px; letter-spacing: .08em; color: #8a8175; } /* giant brand name closing the page */ .zv-footer { padding-bottom: 0; } .zv-footer__word { display: flex; justify-content: center; margin: 36px 0 0; padding-bottom: .02em; overflow: hidden; font: 400 clamp(80px, 25vw, 440px)/.84 'Abril Fatface', serif; letter-spacing: -.01em; color: var(--paper); user-select: none; } /* --p (0 → 1) is how far the word has scrolled into view, set by zivro.js. Like the reference, the name starts squashed into a thin band and stretches to full height as you scroll down; scrolling up squashes it again. Without JS, --p stays 1. */ .zv-footer__word span { display: block; transform: scaleY(calc(.08 + .92 * var(--p, 1))); transform-origin: 50% 0; transition: transform .2s ease-out; } @media (max-width: 900px) { .zv-footer__top { grid-template-columns: 1fr 1fr; } .zv-footer__brand { grid-column: 1 / -1; text-align: center; } .zv-footer__logo, .zv-footer__brand p:last-child { margin-inline: auto; } .zv-footer__col:last-child { grid-column: 1 / -1; } /* "Talk to us" gets the full width */ } .zv-footer__col a[href*="wa.me"] { white-space: nowrap; } /* "WhatsApp +92 370 4175011" stays on one line */ /* phones: copyright and city share one line, the type scaling with the screen so it fits down to 320px */ @media (max-width: 560px) { .zv-footer__bottom { flex-wrap: nowrap; white-space: nowrap; font-size: clamp(10px, 2.9vw, 12px); letter-spacing: .03em; } } /* ---------- pages, posts, 404 ---------- */ .zv-main { min-height: 50vh; } .zv-entry.zv-wrap { max-width: 1100px; padding-block: var(--sec); } .zv-entry .zv-display { margin-bottom: 36px; } .zv-entry__body { font-size: 16px; } .zv-entry__body :is(h2, h3) { font-family: var(--serif); } .zv-page-head { padding-block: 56px 0; } .zv-empty { padding-block: clamp(56px, 8vw, 110px); } .zv-empty p { margin: 22px 0 30px; color: var(--ink-2); } /* ---------- shop / category ---------- */ .zv-shop { padding-block: var(--sec-sm) var(--sec); } .zv-shop > .zv-display { margin-bottom: 24px; } .zv-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .zv-pills a { padding: 8px 18px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; letter-spacing: .06em; text-decoration: none; } .zv-pills a:hover { border-color: var(--ink); } .zv-pills a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .woocommerce .woocommerce-result-count { margin-bottom: 28px; font-size: 14px; color: var(--muted); } .woocommerce .woocommerce-ordering select { padding: 9px 14px; border-radius: 999px; } .woocommerce nav.woocommerce-pagination ul { border: 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0 3px; } .woocommerce nav.woocommerce-pagination ul li :is(a, span) { min-width: 38px; padding: 10px; border-radius: 999px; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ink); color: var(--paper); } /* ---------- product page: story | photos | buy box (reference video) ---------- */ .zv-pdp__top { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: clamp(24px, 4vw, 64px); } .woocommerce div.product.zv-pdp div.summary { position: sticky; top: 100px; } .zv-pdp__story .zv-display { margin-bottom: 0; } .zv-pdp__story { margin-bottom: 22px; } .woocommerce div.product.zv-pdp div.images, .woocommerce div.product.zv-pdp div.summary { float: none; width: auto; margin: 0; } .woocommerce div.product.zv-pdp div.images img { border-radius: 16px; background: var(--paper-2); } /* thumbnails in a column down the left of the main photo (a row under it on small phones) */ .woocommerce div.product.zv-pdp div.images:has(.flex-control-thumbs) { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: start; } .woocommerce div.product.zv-pdp div.images .flex-viewport { grid-column: 2; grid-row: 1; } .woocommerce div.product.zv-pdp div.images .flex-control-thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; margin: 0; } .woocommerce div.product.zv-pdp div.images .flex-control-thumbs li { width: 100%; float: none; margin: 0; } .woocommerce div.product.zv-pdp div.images .flex-control-thumbs img { opacity: .55; transition: opacity .2s; } .woocommerce div.product.zv-pdp div.images .flex-control-thumbs img.flex-active, .woocommerce div.product.zv-pdp div.images .flex-control-thumbs img:hover { opacity: 1; } .woocommerce div.product.zv-pdp div.images .flex-control-thumbs img { border-radius: 10px; } .woocommerce div.product.zv-pdp .zv-pdp__buy .price { margin-bottom: 24px; color: var(--ink); font-size: 20px; font-weight: 600; } .woocommerce div.product.zv-pdp form.cart { margin-bottom: 28px; } .woocommerce div.product.zv-pdp form.cart .variations th.label { padding-right: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; } .woocommerce div.product.zv-pdp form.cart:not(.variations_form), .woocommerce div.product.zv-pdp .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 10px; } .woocommerce div.product.zv-pdp form.cart::before, .woocommerce div.product.zv-pdp form.cart::after { display: none; } .woocommerce div.product.zv-pdp form.cart div.quantity { float: none; margin: 0; } /* quantity: − [n] + in one pill (buttons added in functions.php, stepped by zivro.js; phones show no number spinners) */ div.quantity:has(.zv-qty) { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--white); } div.quantity:has(input[type=hidden]) .zv-qty { display: none; } .woocommerce div.quantity .qty { width: 40px; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; text-align: center; font-weight: 600; -moz-appearance: textfield; appearance: textfield; } div.quantity .qty::-webkit-inner-spin-button, div.quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .zv-qty { width: 40px; height: 100%; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 400 20px/1 var(--sans); cursor: pointer; } .zv-qty:hover { background: var(--paper-2); } .woocommerce div.product.zv-pdp form.cart .single_add_to_cart_button { flex: 1; float: none; height: 48px; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; } .zv-acc { padding: 14px 0; border-top: 1px solid var(--line-2); } .zv-acc:last-of-type { border-bottom: 1px solid var(--line-2); } .zv-acc summary { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } .zv-acc summary::after { content: "+"; } .zv-acc[open] summary::after { content: "–"; } .zv-acc p { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); } .woocommerce div.product.zv-pdp .product_meta { margin-top: 20px; font-size: 13px; color: var(--muted); } .woocommerce div.product.zv-pdp .product_meta > span { display: block; } .woocommerce div.product .woocommerce-tabs { margin-top: 40px; } .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--line-2); } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--ink); } /* Description tab (functions.php zivro_story_tab): beige story panel, the print in a white frame with its Urdu caption */ .zv-story-tab { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(28px, 4vw, 56px); border-radius: 20px; background: var(--paper-2); color: var(--ink-2); overflow: hidden; } .zv-story-tab--plain { grid-template-columns: 1fr; } .zv-story-tab__frame { justify-self: center; width: 100%; max-width: 360px; margin: 0; padding: 16px 16px 14px; background: var(--white); border: 1px solid var(--line-2); box-shadow: 0 24px 40px -28px rgb(31 28 25 / .55); } .zv-story-tab__frame img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--paper-2); } .zv-story-tab__frame figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 12px; line-height: 1.4; color: var(--ink-2); } .zv-story-tab__frame figcaption small { display: block; color: var(--muted); } .zv-story-tab__ur { flex: none; margin: -6px 0; font: 700 24px/1.9 var(--urdu); color: var(--maroon); } /* Nastaliq hangs low: a tall line keeps its tails inside the frame */ .zv-story-tab__body { max-width: 620px; } .zv-story-tab__eyebrow { margin: 0 0 12px; font: 500 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); } .zv-story-tab__head { margin: 0 0 16px; font: 700 clamp(26px, 3vw, 40px)/1.12 var(--sans); letter-spacing: -.02em; color: var(--ink); } .zv-story-tab__lead { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--ink); } /* the short description: what the piece looks like */ .zv-story-tab__lead p { margin: 0; } .zv-story-tab__text { font-size: 15px; line-height: 1.75; } .zv-story-tab__text p { margin: 0 0 12px; } .woocommerce div.product .woocommerce-tabs .panel:has(.zv-story-tab) > h2:first-child { display: none; } /* the panel has its own heading */ /* Reviews tab (functions.php zivro_reviews_tab): summary column + WooCommerce's list and form as cards */ .zv-rev { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .zv-rev__sum { position: sticky; top: 110px; } .zv-rev__sum h2 { margin: 0 0 18px; font: 600 clamp(28px, 3vw, 38px)/1.1 var(--serif); } .zv-rev__avg { margin: 0; font: 700 56px/1 var(--sans); letter-spacing: -.03em; } .zv-rev__avg span { margin-left: 4px; font-size: 18px; font-weight: 500; color: var(--muted); } .zv-rev__none { margin: 0; font: 600 20px/1.3 var(--sans); } .zv-rev__based { margin: 8px 0 0; font-size: 14px; color: var(--muted); } .zv-rev__bars { display: grid; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); } .zv-rev__bars li { display: grid; grid-template-columns: 30px 1fr 24px; align-items: center; gap: 10px; } .zv-rev__bars i { height: 6px; border-radius: 3px; background: linear-gradient(var(--maroon), var(--maroon)) left / var(--w) 100% no-repeat, var(--line); } .zv-rev__bars li > span:last-child { text-align: right; color: var(--muted); } .zv-rev__write { margin-top: 24px; } .zv-rev #comments > h2, .zv-rev .woocommerce-noreviews { display: none; } /* the summary says it */ .woocommerce .zv-rev .star-rating, .woocommerce .zv-rev p.stars a { color: var(--maroon); } .woocommerce .zv-rev__sum .star-rating { float: none; margin: 10px 0 0; font-size: 18px; } /* review cards */ .woocommerce .zv-rev #reviews #comments ol.commentlist { display: grid; gap: 14px; margin: 0 0 28px; padding: 0; } .woocommerce .zv-rev #reviews #comments ol.commentlist li { margin: 0; } .woocommerce .zv-rev #reviews #comments ol.commentlist li .comment-text { margin: 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); } .woocommerce .zv-rev #reviews #comments ol.commentlist li .comment-text p.meta { margin: 0 0 8px; font-size: 13px; color: var(--muted); } .woocommerce .zv-rev #reviews #comments ol.commentlist li .comment-text p.meta strong { color: var(--ink); font-size: 14px; } .woocommerce .zv-rev #reviews #comments ol.commentlist li .comment-text .description p { margin: 0; color: var(--ink-2); line-height: 1.7; } .woocommerce .zv-rev #reviews #comments ol.commentlist li .star-rating { float: none; margin: 0 0 8px; font-size: 13px; } /* stars on their own line, so the name and date never wrap around them */ /* the form as a card: labels above fields, name + email side by side */ .zv-rev #review_form_wrapper { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: var(--white); } .zv-rev #reply-title { display: block; margin: 0 0 6px; font: 600 24px/1.2 var(--serif); } .zv-rev .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } .zv-rev .comment-form > * { grid-column: 1 / -1; margin: 0 !important; } .zv-rev .comment-form > .comment-form-author, .zv-rev .comment-form > .comment-form-email { grid-column: auto; } .zv-rev .comment-notes { font-size: 13px; color: var(--muted); } .zv-rev .comment-form label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } .zv-rev .comment-form .required { color: var(--maroon); } .zv-rev .comment-form :is(input[type=text], input[type=email], textarea) { width: 100%; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); font: 400 15px/1.4 var(--sans); } .zv-rev .comment-form :is(input, textarea):focus { outline: none; border-color: var(--ink); } .zv-rev .comment-form textarea { height: 130px; resize: vertical; } .woocommerce .zv-rev p.stars { margin: 0; font-size: 26px; line-height: 1; } .woocommerce .zv-rev p.stars a { margin-right: 4px; } .zv-rev .comment-form-cookies-consent { display: flex; align-items: center; gap: 10px; } .zv-rev .comment-form-cookies-consent label { margin: 0; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-2); } .woocommerce .zv-rev #respond input#submit.zv-btn { padding: 14px 30px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 14px/1 var(--sans); } .woocommerce .zv-rev #respond input#submit.zv-btn:hover { background: var(--maroon); } @media (max-width: 767px) { .zv-rev { grid-template-columns: 1fr; } .zv-rev__sum { position: static; } .zv-rev .comment-form { grid-template-columns: 1fr; } } @media (max-width: 767px) { .zv-story-tab { grid-template-columns: 1fr; text-align: left; } } .zv-pdp .related > h2, .zv-pdp .upsells > h2 { margin: 40px 0 24px; font: 600 clamp(28px, 3vw, 40px)/1.1 var(--serif); } @media (max-width: 1024px) { .zv-pdp__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 680px) { .zv-pdp__top { grid-template-columns: minmax(0, 1fr); } .woocommerce div.product.zv-pdp div.summary { position: static; } .woocommerce div.product.zv-pdp div.images:has(.flex-control-thumbs) { grid-template-columns: minmax(0, 1fr); } .woocommerce div.product.zv-pdp div.images .flex-control-thumbs { grid-column: 1; grid-row: 2; flex-direction: row; } .woocommerce div.product.zv-pdp div.images .flex-control-thumbs li { flex: 1; width: auto; } .woocommerce div.product.zv-pdp div.images .flex-viewport { grid-column: 1; } } /* ---------- motion off ---------- */ @media (prefers-reduced-motion: reduce) { .zv-announce__track { animation: none; } .zv-look, .zv-tile, .zv-pill, .zv-reveal__img, .zv-footer__word span { transition: none; } .zv-tab { animation: none !important; } } /* phones: one action per card (Quick View adds little on a small screen) */ .woocommerce :is(a, button, input).button:is(:disabled, .disabled), .woocommerce :is(a, button, input).button:is(:disabled, .disabled):hover { padding: 14px 26px; background: var(--ink); color: var(--paper); opacity: .4; } .woocommerce-cart table.cart td.actions .coupon .input-text { width: 170px; } /* size buttons (Variation Swatches for WooCommerce plugin) as theme pills */ .woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item) { width: auto; min-width: 0; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); font-size: 13px; letter-spacing: .04em; } .woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item):hover { box-shadow: 0 0 0 1px var(--ink); } /* no hover/tap tooltip over the size buttons: the button already says the size, and on phones the bubble was cut off */ .woo-variation-swatches [data-wvstooltip]::before, .woo-variation-swatches [data-wvstooltip]::after { display: none !important; } .woo-variation-swatches { --wvs-selected-item-background-color: var(--ink); --wvs-selected-item-text-color: var(--paper); --wvs-selected-item-box-shadow: 0 0 0 1px var(--ink); } /* the plugin's own knobs for the chosen size */ /* ---------- phones: app-style bottom tab bar + WhatsApp button (cart moves down from the header) ---------- */ .zv-tabbar, .zv-wa { display: none; } @media (max-width: 767px) { body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); } .zv-tabbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); background: rgb(246 243 238 / .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); } .zv-tabbar a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 7px 0 5px; border-radius: 12px; color: var(--muted); font-size: 11px; letter-spacing: .02em; text-decoration: none; } .zv-tabbar a[aria-current] { background: var(--paper-2); color: var(--ink); font-weight: 600; } .zv-tabbar .zv-i { width: 22px; height: 22px; } .zv-tabbar .zv-bag__n { top: 2px; right: calc(50% - 22px); } .zv-wa { position: fixed; z-index: 61; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 10px 24px -8px rgb(0 0 0 / .45); } .zv-wa .zv-i { width: 26px; height: 26px; } } /* ---------- page hero (About): looping behind-the-scenes video ---------- */ .zv-page-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(340px, 58vh, 600px); overflow: hidden; background: var(--ink) center / cover; color: var(--paper); } .zv-page-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .zv-page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 17 14 / .1) 35%, rgb(20 17 14 / .72)); } .zv-page-hero__copy { position: relative; z-index: 1; max-width: 720px; padding: clamp(28px, 5vw, 72px) var(--pad); } .zv-page-hero .zv-eyebrow { color: rgb(246 243 238 / .8); } .zv-page-hero .zv-display { color: var(--paper); } .zv-page-hero__copy p:last-child { max-width: 420px; margin: 18px 0 0; color: rgb(246 243 238 / .88); font-size: 16px; } /* ---------- About page (page-about.php) ---------- */ /* founder's note + the three promises */ .zv-note { max-width: 1100px; padding-block: var(--sec); text-align: center; } .zv-note blockquote { max-width: 760px; margin: 0 auto; } .zv-note blockquote p { margin: 0; font: 600 clamp(19px, 2vw, 25px)/1.45 var(--sans); } .zv-note footer { display: grid; justify-items: center; gap: 2px; margin-top: 22px; } .zv-note__sign { width: 150px; height: auto; } .zv-note cite { font-style: normal; font-size: 14px; color: var(--ink-2); } /* Born in Lahore: the truck art beside the story, the four design steps (two by two) and the three promises */ .zv-origin { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 5vw, 72px); padding-block: var(--sec); border-top: 1px solid var(--line); } .zv-origin__copy > p:not(.zv-eyebrow) { max-width: 520px; margin: 16px 0 0; color: var(--ink-2); } img.zv-origin__art { display: block; width: 100%; max-width: 460px; height: auto; justify-self: center; } /* img.: see img.zv-art-minarets */ .zv-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: step; } .zv-steps li { padding-top: 12px; border-top: 2px solid var(--ink); counter-increment: step; } .zv-steps li::before { content: "0" counter(step); display: block; margin-bottom: 8px; font: 600 12px/1 var(--sans); letter-spacing: .2em; color: var(--maroon); } .zv-steps b { display: block; margin-bottom: 4px; font: 600 20px/1.2 var(--serif); } .zv-steps span { font-size: 14px; color: var(--ink-2); } .zv-promise { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line-2); list-style: none; } .zv-promise li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; } .zv-promise svg { width: 16px; height: 16px; fill: none; stroke: var(--maroon); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* the two collection stories: photo beside the copy, the second one flipped */ /* split scroll: each row sticks (zivro.js sets top: under the header, or bottom-aligned when taller than the screen) and the next slides over it. For him comes in two rows, photo then copy, each with an empty see-through half. */ .zv-story { position: sticky; top: 0; display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 62px); } /* a full screen under the 62px header */ .zv-story__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .zv-story--photo .zv-story__img { grid-column: 2; } .zv-story__copy { --p: clamp(32px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: var(--p) max(var(--p), calc(100% - 460px + var(--p))) var(--p) var(--p); background: var(--white); } .zv-story--words .zv-story__copy { padding-inline: max(var(--p), calc(100% - 460px + var(--p))) var(--p); } /* left half: text sits by the middle */ .zv-story__copy > p:not(.zv-eyebrow) { margin: 18px 0 28px; color: var(--ink-2); } /* customer reviews */ /* customer reviews: two rows of cards drifting in opposite directions; hover or focus pauses them */ .zv-reviews { padding-block: var(--sec); overflow: hidden; text-align: center; } .zv-reviews__row { display: flex; width: max-content; margin-top: 18px; animation: zv-drift 60s linear infinite; } .zv-reviews h2 + .zv-reviews__row { margin-top: 36px; } .zv-reviews__row--rev { animation-direction: reverse; animation-duration: 70s; } .zv-reviews:is(:hover, :focus-within) .zv-reviews__row { animation-play-state: paused; } .zv-reviews ul { display: flex; gap: 18px; margin: 0; padding: 0 18px 0 0; list-style: none; text-align: left; } /* the trailing 18px keeps the -50% loop seamless */ .zv-rcard { display: flex; flex-direction: column; gap: 14px; width: 340px; padding: 26px 26px 22px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; } .zv-rcard blockquote { flex: 1; margin: 0; } .zv-rcard p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; margin: 0; font: italic 500 17px/1.5 var(--serif); } .zv-rcard__stars { color: var(--gold); letter-spacing: .14em; line-height: 1; } .zv-rcard__stars i { font-style: normal; color: var(--line-2); } .zv-rcard footer b { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } .zv-rcard footer :is(span, a) { margin-left: 6px; font-size: 13px; color: var(--muted); } .zv-rcard footer a { color: var(--maroon); text-underline-offset: 3px; } @keyframes zv-drift { to { transform: translateX(-50%); } } @media (max-width: 560px) { .zv-rcard { width: 280px; } .zv-reviews__row--rev { display: none; } } @media (prefers-reduced-motion: reduce) { /* no drift: one row to scroll by hand */ .zv-reviews__row { width: auto; overflow-x: auto; animation: none; } .zv-reviews__row--rev, .zv-reviews ul[aria-hidden] { display: none; } } @media (max-width: 860px) { .zv-origin { grid-template-columns: 1fr; } img.zv-origin__art { max-width: 340px; } } @media (max-width: 560px) { .zv-steps { gap: 22px 18px; } .zv-story { grid-template-columns: 1fr; min-height: 0; } .zv-story__img img { height: auto; aspect-ratio: 1; } .zv-story--photo .zv-story__img { grid-column: auto; } .zv-story--photo { position: relative; top: 0 !important; } /* one column: his photo and copy slide over For her together */ } .wpcf7 :is(input[type=text], input[type=tel], input[type=email], textarea) { display: block; width: 100% !important; max-width: none; padding: 12px 16px !important; border: 1px solid var(--line-2) !important; border-radius: 12px !important; background: var(--white) !important; color: var(--ink) !important; font: 400 15px/1.4 var(--sans) !important; box-shadow: none !important; } .wpcf7 :is(input, textarea):focus { outline: none; border-color: var(--ink) !important; } .wpcf7 ::placeholder { color: var(--muted); opacity: 1; } .wpcf7 .wpcf7-submit { padding: 15px 34px !important; border: 0 !important; border-radius: 999px !important; background: var(--ink) !important; color: var(--paper) !important; font: 500 13px/1 var(--sans) !important; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .25s; } .wpcf7 .wpcf7-submit:hover { background: #000 !important; } .wpcf7 .wpcf7-not-valid-tip { margin-top: 4px; color: var(--maroon); font-size: 12px; } .wpcf7 form .wpcf7-response-output { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; } /* the old Elementor Instagram grid; zivro_trending() renders the homepage reel after the content instead */ .e-con.e-parent:has(.wdt-custom-insta) { display: none !important; } /* breadcrumbs (Yoast) on shop, category and product pages */ .zv-crumbs { margin: 0 0 18px; font-size: 12px; letter-spacing: .08em; color: var(--muted); } .zv-crumbs a { color: var(--muted); text-decoration: none; } .zv-crumbs a:hover { color: var(--ink); } .zv-crumbs .breadcrumb_last { color: var(--ink); } .zv-crumbs span > span { margin: 0 2px; } /* ---------- 404 ---------- */ .zv-404 { padding-block: var(--sec) var(--sec-sm); text-align: center; } .zv-404__code { margin: 0 0 8px; font: 800 clamp(120px, 22vw, 300px)/.8 var(--sans); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--maroon); } .zv-404__text { max-width: 440px; margin: 18px auto 26px; color: var(--ink-2); } .zv-404__search { max-width: 460px; margin: 0 auto 22px; } .zv-404__search form { display: flex; gap: 8px; } .zv-404__search input[type=search] { flex: 1; min-width: 0; border-radius: 999px; padding-inline: 20px; } .zv-404__search button { padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 14px/1 var(--sans); cursor: pointer; } .zv-404__search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .zv-404__links { justify-content: center; margin-bottom: 0; } /* ---------- contact form: thank-you popup (zivro.js opens it when Contact Form 7 reports the mail as sent) ---------- */ .zv-thanks { max-width: min(420px, calc(100vw - 32px)); padding: 40px 36px 34px; border: 0; border-radius: 22px; background: var(--white); color: var(--ink); text-align: center; box-shadow: 0 40px 80px -30px rgb(31 28 25 / .6); } .zv-thanks[open] { animation: zv-pop .35s var(--ease); } .zv-thanks::backdrop { background: rgb(31 28 25 / .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .zv-thanks .zv-urdu { font-size: 44px; line-height: 1.6; color: var(--maroon); } .zv-thanks .zv-h2 { margin: 0 0 10px; } .zv-thanks p:not(.zv-urdu) { margin: 0 0 24px; color: var(--ink-2); } @keyframes zv-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } } .wpcf7 form.sent .wpcf7-response-output { display: none; } /* the popup says it */ /* ---------- FAQ (page-faq.php) ---------- */ .zv-page-intro { padding-block: var(--sec) clamp(20px, 2.5vw, 32px); } .zv-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-bottom: clamp(56px, 7vw, 100px); } .zv-faq__aside { position: sticky; top: 110px; display: grid; justify-items: start; gap: 16px; padding: 28px; border-radius: 20px; background: var(--paper-2); } .zv-faq__aside p { margin: 0; color: var(--ink-2); } .zv-faq__group + .zv-faq__group { margin-top: 40px; } .zv-faq__title { margin: 0 0 6px; font: 600 clamp(24px, 2.4vw, 32px)/1.2 var(--serif); } .zv-faq__item { padding: 18px 0; } .zv-faq__item summary { font-size: 15px; letter-spacing: .02em; text-transform: none; font-weight: 500; gap: 16px; } .zv-faq__item summary::after { flex: none; font-size: 18px; } .zv-faq__item p { max-width: 640px; font-size: 15px; line-height: 1.7; } .zv-faq__item a { color: var(--ink); } @media (max-width: 860px) { .zv-faq { grid-template-columns: 1fr; } .zv-faq__aside { position: static; order: 2; } } /* ---------- plain pages (privacy, returns…): readable long-form text ---------- */ .zv-entry:not(.is-builder) .zv-entry__body { max-width: 760px; } .woocommerce-page .zv-entry:not(.is-builder) .zv-entry__body { max-width: none; } /* cart, checkout, account need the full width */ .zv-entry:not(.is-builder) .zv-entry__body > h2 { margin: 40px 0 12px; padding-top: 22px; border-top: 1px solid var(--line-2); font: 600 clamp(24px, 2.4vw, 30px)/1.2 var(--serif); } .zv-entry:not(.is-builder) .zv-entry__body > h3 { margin: 28px 0 8px; font: 600 21px/1.3 var(--serif); } .zv-entry:not(.is-builder) .zv-entry__body > :is(p, ul, ol) { color: var(--ink-2); line-height: 1.75; } .zv-entry:not(.is-builder) .zv-entry__body a:not(.button) { color: var(--ink); } /* WooCommerce buttons keep their own colours */ .elementor :is(.zv-entry__body a:not(.button), .zv-faq__item a, .zv-rcard footer a, .zv-contact__form a) { text-decoration: underline; } /* Elementor-built pages: its ".elementor a" reset takes away the underline these links keep */ .zv-entry__updated { margin: -20px 0 32px; font-size: 13px; letter-spacing: .08em; color: var(--muted); } /* ---------- sitemap page ---------- */ .zv-sitemap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px); padding-bottom: clamp(56px, 7vw, 100px); } .zv-sitemap ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .zv-sitemap a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; } .zv-sitemap a:hover { color: var(--ink); border-color: currentColor; } @media (max-width: 760px) { .zv-sitemap { grid-template-columns: 1fr; } } /* ---------- Contact page (page-contact-us.php): streetwear label look ---------- */ /* hero: light cream block (a dark one felt heavy), huge ink heading, welcome calligraphy as a sticker, model on the bottom edge */ .zv-chero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: var(--sec) var(--pad) calc(var(--sec) + 22px); overflow: hidden; background: radial-gradient(ellipse 40% 70% at 75% 50%, rgb(155 45 42 / .10), transparent 70%), var(--paper-2); color: var(--ink); } .zv-chero__copy { position: relative; z-index: 2; } .zv-chero__label { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); } .zv-chero__label span { padding: 5px 9px; border: 1px solid currentColor; color: var(--maroon); letter-spacing: .18em; } .zv-chero__title { margin: 0; font: 800 clamp(40px, 5.6vw, 84px)/.9 var(--sans); letter-spacing: -.045em; text-transform: uppercase; color: var(--ink); } .zv-chero__welcome { justify-self: center; display: block; width: clamp(240px, 32vw, 480px); height: auto; transform: rotate(-6deg); filter: drop-shadow(0 12px 16px rgb(31 28 25 / .22)); pointer-events: none; } .zv-chero__sub { max-width: 380px; margin: 26px 0; color: var(--ink-2); } .zv-chero__cta { display: flex; flex-wrap: wrap; gap: 12px; } .zv-chero__btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); font: 700 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s, border-color .2s; } .zv-chero__btn .zv-i { width: 17px; height: 17px; } .zv-chero__btn:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; } .zv-chero__btn--ghost { background: transparent; color: var(--ink); } /* maroon label tape across the seam (like the brand's woven tape strips) */ .zv-ctape { position: relative; z-index: 3; margin: -22px -2vw 0; overflow: hidden; background: var(--maroon); color: var(--paper); transform: rotate(-1.6deg); box-shadow: 0 10px 24px -14px rgb(0 0 0 / .6); } .zv-ctape__track { display: flex; width: max-content; animation: zv-marquee 40s linear infinite; } .zv-ctape span { padding: 13px 22px; font: 700 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; } .zv-ctape span::after { content: "\2726"; margin-left: 44px; color: var(--gold); } /* details + form */ /* the form starts level with the tag, not beside the "Get in touch" heading: the info column's pieces join the grid */ .zv-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "title ." "intro ." "tag form"; gap: 0 clamp(32px, 6vw, 96px); align-items: start; padding-block: var(--sec); } .zv-contact__info { display: contents; } .zv-contact__title { grid-area: title; } .zv-contact__intro { grid-area: intro; } .zv-tag { grid-area: tag; } .zv-contact__form { grid-area: form; } .zv-contact__title { margin: 0 0 14px; font: 800 clamp(34px, 4.2vw, 60px)/.9 var(--sans); letter-spacing: -.03em; text-transform: uppercase; } .zv-contact__title span { color: var(--maroon); } .zv-contact__intro { max-width: 440px; margin: 0 0 28px; color: var(--ink-2); } /* the garment tag */ .zv-tag { position: relative; max-width: 470px; padding: 34px 26px 22px; background: var(--white); border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); } .zv-tag::before { content: ""; position: absolute; inset: 7px; border: 1px dashed var(--line-2); pointer-events: none; } .zv-tag__hole { position: absolute; top: 12px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); } .zv-tag__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); } .zv-tag__head b { font: 800 26px/1 var(--sans); letter-spacing: .14em; } .zv-tag__head sup { font-size: 10px; letter-spacing: 0; } .zv-tag__head span { font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); } .zv-contact__list { margin: 0; } .zv-contact__list > div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); } .zv-contact__list dt { font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); } .zv-contact__list dd { margin: 0; font-weight: 600; font-size: 15px; } .zv-contact__list a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--maroon), var(--maroon)) left bottom / 0 2px no-repeat; transition: background-size .3s, color .3s; } .zv-contact__list a:hover { color: var(--maroon); background-size: 100% 2px; } .zv-tag__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; font-size: 9px; font-weight: 700; letter-spacing: .22em; line-height: 1.6; text-transform: uppercase; text-align: right; color: var(--muted); } .zv-tag__barcode { width: 150px; height: 34px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px); } /* the Contact Form 7 form (fields laid out in the form template, see kit/contact-layout.php) */ .zv-contact__formlabel { margin: 0 0 16px; font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); } .zv-contact__formlabel::before { content: ""; display: inline-block; width: 28px; height: 2px; margin-right: 12px; vertical-align: middle; background: var(--maroon); } .zv-cform { display: grid; gap: 14px; } .zv-cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .zv-cform .wpcf7-form-control-wrap { display: block; } .wpcf7 .zv-cform :is(input[type=text], input[type=tel], input[type=email], textarea) { padding: 16px 18px !important; border: 1.5px solid var(--ink) !important; border-radius: 0 !important; background: var(--white) !important; font-weight: 500 !important; } .wpcf7 .zv-cform :is(input, textarea):focus { border-color: var(--maroon) !important; box-shadow: 4px 4px 0 var(--maroon) !important; } .wpcf7 .zv-cform ::placeholder { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } .wpcf7 .zv-cform textarea { height: 150px; resize: vertical; } .zv-cform .wpcf7-acceptance .wpcf7-list-item { margin: 0; } .zv-cform .wpcf7-acceptance label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); cursor: pointer; } .zv-cform .wpcf7-acceptance input { width: 18px; height: 18px; accent-color: var(--maroon); } .zv-cform .wpcf7-acceptance a { color: var(--ink); } .zv-cform__send { display: flex; align-items: center; gap: 12px; } .wpcf7 .zv-cform .wpcf7-submit { width: 100%; padding: 19px 28px !important; border-radius: 0 !important; background: var(--ink) !important; color: var(--paper) !important; font: 800 14px/1 var(--sans) !important; letter-spacing: .3em; transition: background .2s, transform .2s; } .wpcf7 .zv-cform .wpcf7-submit:not(:disabled):hover { background: var(--maroon) !important; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); } .wpcf7 .wpcf7-submit:disabled { opacity: .4; cursor: not-allowed; } @media (max-width: 860px) { .zv-chero { grid-template-columns: 1fr; } .zv-chero__welcome { order: -1; justify-self: end; width: min(240px, 62vw); margin-bottom: -6px; } .zv-contact { grid-template-columns: 1fr; grid-template-areas: "title" "intro" "tag" "form"; } .zv-contact__form { margin-top: 44px; } } @media (max-width: 520px) { .zv-cform__row { grid-template-columns: 1fr; } .zv-contact__list > div { grid-template-columns: 86px 1fr; } .zv-tag { box-shadow: 5px 5px 0 var(--ink); } } @media (prefers-reduced-motion: reduce) { .zv-ctape__track { animation: none; } } .zv-main:has(.zv-ctape) { overflow-x: clip; } /* the tilted tape runs past both edges; trim it there instead of scrolling */ /* ---------- scroll reveal + reading progress (FAQ, policies, sitemap; zivro.js adds .zv-rv only when it can animate) ---------- */ .zv-rv { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .8s var(--ease); } .zv-rv.is-in { opacity: 1; transform: none; } .zv-progress { position: fixed; z-index: 110; top: 0; left: 0; right: 0; height: 3px; background: var(--maroon); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } .admin-bar .zv-progress { top: 32px; } /* product cards: the photo settles from a slight zoom as the card fades up */ .zv-shop li.product.zv-rv .zv-card__media img:not(.zv-card__alt) { transform: scale(1.08); transition: transform 1.1s var(--ease), opacity .5s; } .zv-shop li.product.zv-rv.is-in .zv-card__media img:not(.zv-card__alt) { transform: none; } .woocommerce .zv-shop ul.products li.product.zv-rv.is-in:hover .zv-card__media img { transform: scale(1.04); } /* tablet: keep each menu label on one line */ .zv-menu a { white-space: nowrap; } @media (max-width: 1180px) { .zv-nav .zv-menu { gap: 18px; } .zv-nav .zv-menu a { letter-spacing: .1em; } } /* ---------- responsive pass (phones first) ---------- */ /* bigger tap areas without moving anything: padding pulled back with a negative margin */ .zv-tools > a, .zv-tools summary, .zv-burger > summary { padding: 10px; margin: -10px; } /* header counts sit on the icon's top-right corner (measured from the 44px tap box around the 24px icon, not floating beyond it) */ .zv-tools .zv-bag__n, .zv-tools .zv-wish__n { top: 3px; right: 1px; } .zv-dot { position: relative; } .zv-dot::before { content: ""; position: absolute; inset: -14px -6px; } .woocommerce form :is(input[type=radio], input[type=checkbox]), .zv-cform .wpcf7-acceptance input { width: 18px; height: 18px; accent-color: var(--ink); vertical-align: middle; } .zv-footer__col a { padding-block: 3px; } @media (max-width: 767px) { /* search opens as a full-width bar under the header instead of a box hanging off the right edge */ .zv-search__panel { position: fixed; left: 12px; right: 12px; top: calc(100% + 8px); width: auto; } .zv-footer__col a { padding-block: 6px; } .zv-contact__list dt, .zv-tag__head span { font-size: 11px; } } /* ---------- WooCommerce buttons: readable in every state (WooCommerce's own :disabled rule otherwise wins) ---------- */ .woocommerce :is(a, button, input).button, .woocommerce :is(a, button, input).button.alt { color: var(--paper) !important; } .woocommerce :is(a, button, input).button:is(:disabled, [disabled], .disabled) { padding: 14px 26px !important; background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--line-2) !important; opacity: .6 !important; cursor: not-allowed; } .woocommerce .coupon .button, .woocommerce button.button[name="update_cart"]:not(:disabled) { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--ink) !important; } .woocommerce .coupon .button:hover, .woocommerce button.button[name="update_cart"]:not(:disabled):hover { background: var(--ink) !important; color: var(--paper) !important; } /* notices ("... added to your cart [View cart]") */ .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 22px; padding: 16px 20px 16px 52px; border: 0; border-left: 3px solid var(--maroon); border-radius: 0 14px 14px 0; background: var(--white); color: var(--ink); box-shadow: 0 10px 24px -18px rgb(31 28 25 / .35); font-size: 14px; } .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { top: 50%; left: 20px; transform: translateY(-50%); color: var(--maroon); } .woocommerce :is(.woocommerce-message, .woocommerce-info) .button { order: 2; margin-left: auto; padding: 10px 18px !important; font-size: 12px; float: none; } .woocommerce-message:focus { outline: none; } /* ---------- Cart: items on the left, a label-style totals card on the right ---------- */ .woocommerce-cart .zv-entry .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 22px clamp(28px, 4vw, 64px); align-items: start; } .woocommerce-cart .zv-entry .woocommerce > :not(.woocommerce-cart-form, .cart-collaterals) { grid-column: 1 / -1; } .woocommerce-cart .woocommerce-cart-form { grid-column: 1; min-width: 0; } .woocommerce-cart .cart-collaterals { grid-column: 2; position: sticky; top: 110px; width: auto; } .woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; padding: 26px 24px 22px; background: var(--white); border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); } .woocommerce-cart .cart_totals h2 { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font: 700 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; } .woocommerce-cart .cart_totals table.shop_table { margin: 0 0 18px; border: 0; border-radius: 0; } .woocommerce-cart .cart_totals table.shop_table :is(th, td) { padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; } .woocommerce-cart .cart_totals table.shop_table th { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .woocommerce-cart .cart_totals table.shop_table td { text-align: right; font-weight: 600; } .woocommerce-cart .cart_totals .order-total :is(th, td) { border-bottom: 0; padding-top: 16px; } .woocommerce-cart .cart_totals .order-total td { font-size: 22px; } .woocommerce-cart .wc-proceed-to-checkout { padding: 0; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 18px 20px !important; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after { content: "\2192"; letter-spacing: 0; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--maroon) !important; } /* the items table */ .woocommerce-cart table.cart { margin: 0; border: 0; border-radius: 0; border-collapse: collapse; } .woocommerce-cart table.cart thead th { padding: 0 12px 12px; border: 0; border-bottom: 2px solid var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); background: none; } .woocommerce-cart table.cart td { padding: 18px 12px; border: 0; border-bottom: 1px solid var(--line-2); background: none; vertical-align: middle; } .woocommerce-cart table.cart td.product-thumbnail { width: 104px; } .woocommerce-cart table.cart img { display: block; width: 88px !important; height: 110px; object-fit: cover; border-radius: 12px; background: var(--paper-2); } .woocommerce-cart table.cart td.product-name a { font: 500 20px/1.25 var(--serif); color: var(--ink); text-decoration: none; } .woocommerce-cart table.cart td.product-name a:hover { color: var(--maroon); } .woocommerce-cart table.cart :is(td.product-price, td.product-subtotal) { font-weight: 600; white-space: nowrap; } .woocommerce-cart table.cart a.remove { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink) !important; font-size: 18px; font-weight: 400; line-height: 1; transition: background .2s, color .2s, border-color .2s; } .woocommerce-cart table.cart a.remove:hover { background: var(--maroon); border-color: var(--maroon); color: #fff !important; } .woocommerce-cart table.cart div.quantity:has(.zv-qty) { height: 44px; } .woocommerce-cart table.cart td.actions { padding: 20px 0 0; border-bottom: 0; } .woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 10px; } .woocommerce-cart table.cart td.actions .coupon .input-text { width: 200px; height: 46px; margin: 0; padding: 0 18px; border-radius: 999px; } .woocommerce-cart table.cart td.actions > .button { float: right; } .woocommerce-cart .return-to-shop .button { padding: 16px 28px !important; } @media (max-width: 900px) { .woocommerce-cart .zv-entry .woocommerce { grid-template-columns: 1fr; } .woocommerce-cart .cart-collaterals { grid-column: 1; position: static; } } /* phones: WooCommerce turns each row into "label: value" lines; give every item its own card */ @media (max-width: 767px) { .woocommerce-cart table.cart thead { display: none; } .woocommerce-cart table.cart tr.cart_item { position: relative; display: block; margin-bottom: 14px; padding: 8px 16px; background: var(--white); border: 1px solid var(--line-2); border-radius: 16px; } .woocommerce-cart table.cart tr.cart_item td { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); text-align: right !important; background: none !important; } .woocommerce-cart table.cart tr.cart_item td:last-child { border-bottom: 0; } .woocommerce-cart table.cart tr.cart_item td::before { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .woocommerce-cart table.cart td.product-remove { position: absolute; top: 12px; right: 12px; padding: 0; border: 0; } .woocommerce-cart table.cart td.product-remove::before { display: none; } .woocommerce-cart table.cart td.product-name { padding-right: 44px; } .woocommerce-cart table.cart td.product-name a { font-size: 17px; } .woocommerce-cart table.cart td.actions { display: block; padding-top: 6px; } .woocommerce-cart table.cart td.actions .coupon { flex-wrap: wrap; margin-bottom: 12px; } .woocommerce-cart table.cart td.actions .coupon .input-text { flex: 1; width: auto; min-width: 0; } .woocommerce-cart table.cart td.actions > .button { float: none; width: 100%; } .woocommerce-cart .cart-collaterals .cart_totals { box-shadow: 5px 5px 0 var(--ink); } .woocommerce :is(.woocommerce-message, .woocommerce-info) .button { margin-left: 0; } } .woocommerce-cart .zv-entry.zv-wrap { max-width: 1360px; } /* items + totals side by side need the room */ @media (max-width: 767px) { .woocommerce-cart table.cart td.product-thumbnail::before { display: none; } .woocommerce-cart table.cart td.product-thumbnail { justify-content: flex-start; } } @media (min-width: 768px) and (max-width: 1279px) { .zv-hero__cta { display: inline-flex; margin-top: 18px; } .zv-hero__stage { height: min(62svh, 640px); } } @media (min-width: 1280px) and (max-width: 1439px) { .zv-look { left: 60%; } } /* keep the look clear of the copy */ /* product-card buttons are outlined: keep their text dark (the WooCommerce button rule above makes text light) */ .woocommerce ul.products li.product .button { color: var(--ink) !important; } .woocommerce ul.products li.product .button:hover { color: var(--paper) !important; } .zv-contact__list dt, .zv-tag__head span { font-size: 11px; } /* ---------- Checkout: numbered form sections on the left, a sticky label-style order card on the right ---------- */ .woocommerce-checkout .zv-entry.zv-wrap { max-width: 1360px; } .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); gap: 0 clamp(28px, 4vw, 64px); align-items: start; } .woocommerce-checkout form.checkout > :not(#customer_details, .zv-co-summary) { grid-column: 1 / -1; } .woocommerce-checkout #customer_details { grid-column: 1; counter-reset: zvco; } .woocommerce-checkout #customer_details :is(.col-1, .col-2) { float: none; width: 100%; } .woocommerce-checkout #customer_details h3 { counter-increment: zvco; display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font: 700 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; } .woocommerce-checkout #customer_details h3::before { content: counter(zvco, decimal-leading-zero); font: 800 22px/1 var(--sans); letter-spacing: -.02em; color: var(--maroon); } .woocommerce-checkout #customer_details .col-2 h3 { margin-top: 30px; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; } /* fields */ .woocommerce-checkout form .form-row { width: 100%; margin: 0 0 16px; padding: 0; } .woocommerce-checkout form .form-row:is(.form-row-first, .form-row-last) { width: calc(50% - 8px); float: none; } .woocommerce-checkout form .form-row label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); } .woocommerce-checkout form .form-row .required { color: var(--maroon); text-decoration: none; } .woocommerce-checkout form .form-row :is(input.input-text, select) { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); color: var(--ink); font: 400 15px/1.2 var(--sans); } .woocommerce-checkout form .form-row textarea { width: 100%; height: 110px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); font: 400 15px/1.5 var(--sans); resize: vertical; } .woocommerce-checkout form .form-row :is(input.input-text, textarea):focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(31 28 25 / .08); } .woocommerce-checkout form .form-row #billing_address_2 { margin-top: 10px; } .woocommerce-checkout form .form-row.woocommerce-invalid :is(input.input-text, .select2-selection) { border-color: var(--maroon); } .woocommerce-checkout form .form-row.woocommerce-validated :is(input.input-text, .select2-selection) { border-color: var(--line-2); } /* country / state dropdowns (select2) */ .woocommerce-checkout .select2-container .select2-selection--single { height: 50px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); } .woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 16px; line-height: 48px; color: var(--ink); } .woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 48px; right: 10px; } .woocommerce-checkout .select2-container--open .select2-selection--single { border-color: var(--ink); } .select2-dropdown { border-color: var(--line-2); border-radius: 12px; overflow: hidden; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ink); } /* coupon toggle + form */ .woocommerce-checkout .checkout_coupon { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; padding: 18px; border: 1px dashed var(--line-2); border-radius: 14px; } .woocommerce-checkout .checkout_coupon > p:first-child { width: 100%; margin: 0; font-size: 14px; color: var(--ink-2); } .woocommerce-checkout .checkout_coupon .form-row { width: auto !important; margin: 0; flex: 1; } .woocommerce-checkout .checkout_coupon .form-row-last { flex: none; } .woocommerce-checkout .checkout_coupon .input-text { height: 46px; padding: 0 18px; border-radius: 999px; } /* the order card */ .zv-co-summary { grid-column: 2; position: sticky; top: 110px; padding: 26px 24px 24px; background: var(--white); border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); } .zv-co-summary #order_review_heading { margin: 0 0 6px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font: 700 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; } .zv-co-summary table.shop_table { margin: 0 0 20px; border: 0; border-radius: 0; } .zv-co-summary table.shop_table :is(th, td) { padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; } .zv-co-summary table.shop_table thead th { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .zv-co-summary table.shop_table :is(td.product-total, tfoot td, thead th.product-total) { text-align: right; } .zv-co-summary table.shop_table td.product-name { padding-right: 12px; font-size: 14px; } .zv-co-summary table.shop_table td.product-name .product-quantity { font-weight: 600; color: var(--muted); } .zv-co-summary table.shop_table tfoot th { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .zv-co-summary table.shop_table tfoot td { font-weight: 600; } .zv-co-summary table.shop_table .order-total :is(th, td) { border-bottom: 0; padding-top: 16px; } .zv-co-summary table.shop_table .order-total td { font-size: 22px; } /* payment choices as selectable cards */ .woocommerce-checkout #payment { background: none; border-radius: 0; } .woocommerce-checkout #payment ul.payment_methods { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; border: 0; } .woocommerce-checkout #payment ul.payment_methods li { margin: 0; padding: 14px 16px; list-style: none; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); line-height: 1.4; } .woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--white); } .woocommerce-checkout #payment ul.payment_methods li > label { font-weight: 600; cursor: pointer; } .woocommerce-checkout #payment ul.payment_methods li input { margin: 0 10px 0 0; } .woocommerce-checkout #payment div.payment_box { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--paper-2); color: var(--ink-2); font-size: 13px; } .woocommerce-checkout #payment div.payment_box::before { display: none; } .woocommerce-checkout #payment div.payment_box p:last-child { margin: 0; } .woocommerce-checkout #payment div.form-row.place-order { margin: 0; padding: 0; } .woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0 0 14px; font-size: 12px; line-height: 1.6; color: var(--muted); } .woocommerce-checkout #place_order { float: none; width: 100%; padding: 18px 20px !important; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } .woocommerce-checkout #place_order:hover { background: var(--maroon) !important; } /* errors after a failed "Place order" */ .woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error { display: block; padding: 16px 20px 16px 52px; } .woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error li { margin: 2px 0; } @media (max-width: 900px) { .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); } .zv-co-summary { grid-column: 1; position: static; margin-top: 16px; box-shadow: 5px 5px 0 var(--ink); } } @media (max-width: 520px) { .woocommerce-checkout form .form-row:is(.form-row-first, .form-row-last) { width: 100%; } } body.woocommerce-checkout form .form-row textarea.input-text { height: 110px; padding: 14px 16px; line-height: 1.5; } /* beats WooCommerce .form-row .input-text { height: auto } */ body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered { padding-top: 0; padding-bottom: 0; line-height: 48px; } .woocommerce :is(.woocommerce-NoticeGroup, .woocommerce-error, .woocommerce-message):focus { outline: none; } /* order received */ .woocommerce-order .woocommerce-thankyou-order-received { margin: 0 0 22px; font: 500 clamp(22px, 2.4vw, 30px)/1.3 var(--serif); color: var(--ink); } .woocommerce-order ul.order_details { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 28px; padding: 18px 8px; background: var(--white); border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); } .woocommerce-order ul.order_details li { margin: 0; padding: 6px 22px; border-right: 1px dashed var(--line-2); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .woocommerce-order ul.order_details li:last-child { border-right: 0; } .woocommerce-order ul.order_details li strong { margin-top: 6px; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); } .woocommerce-order :is(.woocommerce-order-details__title, .woocommerce-column__title) { font: 700 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; } .woocommerce-order table.shop_table, .woocommerce-order address { border-radius: 14px; background: var(--white); } /* ---------- side cart (dialog in footer.php, JS in zivro.js; WooCommerce refreshes .widget_shopping_cart_content) ---------- */ html.zv-locked { overflow: hidden; } .zv-cart { position: fixed; inset: 0 0 0 auto; width: min(420px, 92vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; border-left: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); } .zv-cart[open] { animation: zv-cart-in .45s var(--ease); } .zv-cart.is-closing { animation: zv-cart-out .3s ease-in forwards; } .zv-cart::backdrop { background: rgb(31 28 25 / .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .zv-cart[open]::backdrop { animation: zv-cart-fade .45s; } .zv-cart.is-closing::backdrop { animation: zv-cart-fade .3s reverse forwards; } @keyframes zv-cart-in { from { transform: translateX(100%); } } @keyframes zv-cart-out { to { transform: translateX(100%); } } @keyframes zv-cart-fade { from { opacity: 0; } } .zv-cart__in { display: flex; flex-direction: column; height: 100%; } .zv-cart__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 14px; border-bottom: 2px solid var(--ink); } .zv-cart__head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; } .zv-cart__head .zv-bag__n { position: static; letter-spacing: 0; } .zv-cart__close { width: 42px; height: 42px; margin-right: -10px; border: 0; border-radius: 50%; background: none; color: var(--ink); font: 300 30px/1 var(--sans); cursor: pointer; } .zv-cart__close:hover { background: var(--paper-2); } #zv-cart .widget_shopping_cart_content { display: flex; flex: 1; flex-direction: column; min-height: 0; } /* items */ #zv-cart .woocommerce-mini-cart { flex: 1; overflow-y: auto; margin: 0; padding: 4px 24px; list-style: none; } #zv-cart .woocommerce-mini-cart-item { position: relative; min-height: 122px; margin: 0; padding: 16px 34px 16px 90px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; list-style: none; } #zv-cart .woocommerce-mini-cart-item:last-child { border-bottom: 0; } #zv-cart .woocommerce-mini-cart-item > a:not(.remove) { display: block; font-weight: 600; color: var(--ink); text-decoration: none; } #zv-cart .woocommerce-mini-cart-item img { position: absolute; left: 0; top: 16px; float: none; width: 72px; height: 90px; margin: 0; object-fit: cover; border-radius: 10px; background: var(--paper-2); box-shadow: none; } #zv-cart .woocommerce-mini-cart-item a.remove { position: absolute; top: 12px; right: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: none; color: var(--muted) !important; font: 400 20px/1 var(--sans); text-decoration: none; } #zv-cart .woocommerce-mini-cart-item a.remove:hover { background: var(--ink); color: var(--paper) !important; } #zv-cart dl.variation { margin: 4px 0 0; padding: 0; border: 0; font-size: 13px; color: var(--muted); } #zv-cart dl.variation :is(dt, dd, p) { display: inline; float: none; margin: 0; padding: 0; } #zv-cart .woocommerce-mini-cart-item .quantity { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-2); } /* subtotal + buttons */ #zv-cart .woocommerce-mini-cart__total { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: 18px 24px 0; border-top: 2px solid var(--ink); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; } #zv-cart .woocommerce-mini-cart__total .amount { font-size: 20px; font-weight: 700; letter-spacing: 0; } #zv-cart .woocommerce-mini-cart__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 16px 24px calc(24px + env(safe-area-inset-bottom)); } #zv-cart .woocommerce-mini-cart__buttons .button { display: flex; align-items: center; justify-content: center; margin: 0; padding: 16px 10px !important; border-radius: 999px; background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--ink); font: 700 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; } #zv-cart .woocommerce-mini-cart__buttons .button.checkout { background: var(--ink) !important; color: var(--paper) !important; } #zv-cart .woocommerce-mini-cart__buttons .button:hover { background: var(--maroon) !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px var(--maroon); } /* empty bag */ #zv-cart:has(.woocommerce-mini-cart__empty-message) .widget_shopping_cart_content { flex: none; margin-top: auto; } #zv-cart .woocommerce-mini-cart__empty-message { margin: 0 24px 18px; text-align: center; font-size: 15px; color: var(--ink-2); } .zv-cart__shop { align-self: center; margin-bottom: auto; } #zv-cart:not(:has(.woocommerce-mini-cart__empty-message)) .zv-cart__shop { display: none; } /* size chart: the same drawer as the side cart, on hoodie pages */ .zv-chart__body { flex: 1; overflow: auto; padding: 20px 24px 28px; } .zv-chart__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .zv-chart__top p { margin: 0; font-size: 13px; color: var(--muted); } .zv-chart__units { display: inline-flex; flex: none; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--white); } .zv-chart__units button { padding: 4px 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 600 12px/1.4 var(--sans); letter-spacing: .1em; cursor: pointer; } .zv-chart__units [aria-pressed="true"] { background: var(--ink); color: var(--paper); } .zv-chart table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } .zv-chart :is(th, td) { padding: 11px 4px; border: 0; border-bottom: 1px solid var(--line); text-align: center; } .zv-chart thead th { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .zv-chart :is(thead th:first-child, tbody th) { padding-left: 10px; text-align: left; } .zv-chart tbody th { font-weight: 600; } .zv-chart tr.is-on > * { background: var(--paper-2); } .zv-chart tr.is-on th { box-shadow: inset 3px 0 var(--maroon); } /* the size picked on the page */ .zv-chart__how { display: block; width: 100%; height: auto; margin-top: 20px; border-radius: 12px; background: #fff; } .zv-chart__tip { margin: 16px 0 0; font-size: 13px; color: var(--ink-2); } .zv-chart__tip a { color: var(--maroon); } .zv-chart-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 13px/1.4 var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .zv-chart-link .zv-i { width: 18px; height: 18px; } .zv-acc .zv-chart-link { display: flex; margin-top: 10px; } .woocommerce div.product.zv-pdp form.variations_form { position: relative; } .zv-chart-link--label { position: absolute; top: 0; right: 0; z-index: 1; } /* level with the Size label */