/* Theme Name: Kendera Theme URI: https://kenderaskincare.com Author: WebAid Digital Agency Description: Custom WooCommerce theme for Kendera Skincare & Cosmetics Ventures, Achara, Enugu. Built by WebAid - We Build Wealth Through Code. Version: 3.8.2 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: kendera WC requires at least: 8.0 WC tested up to: 9.5 */ /* ============================================================ KENDERA — DESIGN TOKENS Two themes. Swap the class on to switch. ============================================================ */ :root{ --display:"Bookman Old Style", Georgia, "Times New Roman", serif; --body:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pad:clamp(20px, 5vw, 72px); --radius:14px; /* how far inner pages must sit below the fixed nav */ --nav-clear:clamp(96px, 12vw, 150px); /* * The nav's own height. It was being referenced as var(--nav-h, 66px) * in three places but never actually defined, so every one of them was * silently running on the fallback. Defining it means the menu panel and * the nav can no longer drift apart. */ --nav-h:72px; } /* ---------- THE PALETTE ---------- One palette. There is no dark variant by design - see the LIGHT ONLY note further down. White product bottles photograph correctly on warm off-white and glare on black, which is why this shop is cream. */ body{ --bg:#FBFAF6; --bg-2:#F3F2EC; --surface:#FFFFFF; --surface-2:#F7F6F0; --line:#E4E2D8; --accent:#70D730; --accent-ink:#0A2E1A; --head:#123C24; --head-accent:#135330; --text:#41564A; --muted:#5F6F63; --img-bg:linear-gradient(140deg,#F0EEE6,#F9F8F3); --nav-bg:rgba(251,250,246,.94); --shadow:0 16px 38px rgba(19,83,48,.10); --veil:rgba(18,44,28,.45); --tag-bg:rgba(255,255,255,.94); --tag-fg:#135330; --tag-line:rgba(19,83,48,.25); --tag-low:#A2600E; --ring-bg:rgba(112,215,48,.14); --ring-line:rgba(19,83,48,.28); --hero-img-opacity:1; --hero-scrim:linear-gradient(to top, rgba(255,255,255,.97) 6%, rgba(255,255,255,.88) 42%, rgba(255,255,255,.42) 100%); } @media (min-width:961px){ body{ --hero-scrim:linear-gradient(90deg, #FFFFFF 0 38%, rgba(255,255,255,.93) 48%, rgba(255,255,255,0) 68%); } .hero-media{inset:0 0 0 42%} .hero{align-items:center} .hero-inner{padding-top:0; padding-bottom:0} .hero-inner .wrap{padding-right:50%} } *{box-sizing:border-box} /* * The hidden attribute must always win. * * A stylesheet rule setting `display` on an element silently defeats * [hidden]. When that element is a full-screen overlay, the entire site * stops responding while still looking perfectly normal - which is exactly * what happened once here. This one line makes that class of bug * impossible for every element on the site. */ [hidden]{display:none !important} /* ---- no blue flash on tap ---- Mobile browsers paint a translucent blue rectangle over whatever you touch. On a product tile it covered the entire card. We suppress it everywhere and provide our own press feedback instead (see .card:active / .add:active). */ *{-webkit-tap-highlight-color:transparent} html{ scroll-behavior:smooth; /* One palette, ours. Without this declaration browsers assume there is no dark version and repaint the site themselves - a crude colour inversion that turned the cream background to mud. Declaring it hands control back to us. */ color-scheme:light; /* stop the whole document rubber-banding into a page refresh */ overscroll-behavior-y:contain; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; overscroll-behavior-y:contain; } img{display:block; max-width:100%} a{color:inherit; text-decoration:none} button{font:inherit; cursor:pointer; border:none; background:none; color:inherit} :focus-visible{outline:2px solid var(--head-accent); outline-offset:3px; border-radius:4px} h1,h2,h3{font-family:var(--display); font-weight:700; color:var(--head); margin:0; line-height:1.12} h1{font-size:clamp(2.4rem, 6.2vw, 4.6rem)} h2{font-size:clamp(1.8rem, 3.8vw, 2.9rem)} h3{font-size:1.12rem} p{margin:0} .wrap{max-width:1240px; margin:0 auto; padding:0 var(--pad)} .section{padding:clamp(64px, 9vw, 128px) 0} .eyebrow{ display:flex; align-items:center; gap:10px; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; } .leaf{width:17px; height:17px; flex:none; fill:var(--head-accent)} /* ---------- nav ---------- */ .nav{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; gap:18px; padding:14px var(--pad); border-bottom:1px solid transparent; transition:background .35s ease, border-color .35s ease, padding .35s ease; } .nav.stuck{ background:var(--nav-bg); border-bottom-color:var(--line); backdrop-filter:blur(14px); padding-top:10px; padding-bottom:10px; } .brand{display:flex; align-items:baseline; gap:2px; font-family:var(--display); font-size:1.32rem; color:var(--head)} .brand em{font-style:normal; color:var(--head-accent)} .brand small{display:block; font-family:var(--body); font-size:.54rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-top:3px} .nav-links{display:flex; gap:26px; margin-left:auto; font-size:.86rem} .nav-links a{color:var(--text); transition:color .2s} .nav-links a:hover{color:var(--head-accent)} .nav-tools{display:flex; align-items:center; gap:10px; margin-left:20px} /* ---------- mobile menu ---------- */ .burger{ display:none; position:relative; width:40px; height:40px; border:1px solid var(--line); border-radius:11px; transition:border-color .2s, background .2s; } /* * THE FOURTH LINE. * * These rules used to read `.burger span`, which matched every span inside * the button. The markup now wraps the three bars in a .burger-bars span, * so the wrapper itself was being painted as a bar - absolutely positioned * at the centre, escaping the frame. Four lines, one adrift. * * The bar styling lives in one place now, at the end of this file, and is * scoped to .burger-bars span so nothing else can be caught by it. */ .burger:hover{border-color:var(--head-accent); background:var(--surface)} .burger:hover .burger-bars span{background:var(--head-accent)} .nav-panel{ position:fixed; top:0; left:0; right:0; z-index:55; padding-top:66px; background:var(--nav-bg); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); transform:translateY(-101%); transition:transform .4s cubic-bezier(.2,.7,.3,1); } .nav-panel.on{transform:none} /* panel link styling now lives in the MENU block near the end of this file */ .cart-btn{ display:flex; align-items:center; gap:9px; padding:9px 17px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:.84rem; transition:transform .2s, box-shadow .2s; } .cart-btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(141,198,63,.32)} .cart-count{ min-width:21px; height:21px; padding:0 6px; border-radius:999px; background:var(--accent-ink); color:var(--accent); font-size:.74rem; display:grid; place-items:center; } .cart-count.bump{animation:bump .45s ease} @keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}} /* ---------- hero ---------- */ .hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden} .hero-media{position:absolute; inset:0; background:var(--img-bg)} .hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:0; transform:scale(1.06); animation:heroIn 1.5s cubic-bezier(.2,.7,.3,1) .15s forwards, drift 30s ease-in-out 1.6s infinite alternate; } @keyframes heroIn{to{opacity:var(--hero-img-opacity); transform:scale(1)}} @keyframes drift{to{transform:scale(1.045)}} .hero-scrim{position:absolute; inset:0; background:var(--hero-scrim)} .hero-inner{position:relative; z-index:2; width:100%; padding-bottom:clamp(52px,8vw,104px); padding-top:120px} .hero h1{max-width:16ch; margin-bottom:22px} .hero h1 span{color:var(--head-accent)} .hero-sub{max-width:52ch; font-size:clamp(1rem,1.55vw,1.16rem); color:var(--text); margin-bottom:34px} .cta-row{display:flex; flex-wrap:wrap; gap:13px} .btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:999px; font-weight:700; font-size:.94rem; transition:transform .22s, box-shadow .22s, background .22s, border-color .22s, color .22s; } .btn-primary{background:var(--accent); color:var(--accent-ink)} .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(141,198,63,.32)} .btn-ghost{border:1px solid var(--line); color:var(--head)} .btn-ghost:hover{border-color:var(--head-accent); color:var(--head-accent); transform:translateY(-2px)} /* ---------- trust ---------- */ .trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2)} /* ---------- triad ---------- */ /* ---------- split ---------- */ .split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,72px); align-items:center} .frame{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--img-bg); aspect-ratio:4/5; border:1px solid var(--line); } .frame img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.3,1)} .frame:hover img{transform:scale(1.05)} .ritual-list{list-style:none; padding:0; margin:26px 0 0} .ritual-list li{display:flex; gap:14px; padding:15px 0; border-top:1px solid var(--line); font-size:.95rem} .ritual-list li:last-child{border-bottom:1px solid var(--line)} .ritual-list b{color:var(--head); font-family:var(--display); font-weight:700; flex:none; width:8.5ch} /* ---------- catalogue ---------- */ .cat-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:22px} .filters{display:flex; flex-wrap:wrap; gap:9px} .chip{padding:9px 19px; border-radius:999px; border:1px solid var(--line); font-size:.82rem; color:var(--muted); transition:all .22s} .chip:hover{border-color:var(--head-accent); color:var(--head-accent)} .chip.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700} .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:38px} .card{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; display:flex; flex-direction:column; transition:transform .34s cubic-bezier(.2,.7,.3,1), border-color .34s, box-shadow .34s; } .card:hover{transform:translateY(-7px); border-color:var(--head-accent); box-shadow:var(--shadow)} .card-media{position:relative; aspect-ratio:1/1; background:var(--img-bg); overflow:hidden} .card-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1)} .card:hover .card-media img{transform:scale(1.07)} .tag{ position:absolute; top:13px; left:13px; z-index:2; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:6px 11px; border-radius:999px; background:var(--tag-bg); color:var(--tag-fg); border:1px solid var(--tag-line); backdrop-filter:blur(6px); } .tag.low{color:var(--tag-low); border-color:var(--tag-line)} .card-body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1} .card-cat{font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)} .card-name{font-family:var(--display); font-size:1.06rem; color:var(--head); line-height:1.3} .card-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; min-height:40px} .price{font-family:var(--display); font-size:1.2rem; color:var(--head-accent)} .add{ padding:11px 20px; border-radius:999px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); font-size:.82rem; font-weight:700; letter-spacing:.01em; transition:transform .2s, box-shadow .2s, filter .2s; box-shadow:0 4px 14px rgba(141,198,63,.22); } .add:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(141,198,63,.42); filter:brightness(1.06)} .add:active{transform:translateY(0)} /* inline stepper — replaces the Add button once an item is in the cart. No pop-up: adding a fourth soap is one tap, and buying one is zero taps. */ .stepper{ display:flex; align-items:center; gap:4px; border:1px solid var(--accent); border-radius:999px; padding:3px; animation:stepIn .28s cubic-bezier(.2,.7,.3,1); } @keyframes stepIn{from{opacity:0; transform:scale(.9)}to{opacity:1; transform:none}} .stepper button{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:1rem; line-height:1; color:var(--head); transition:background .2s, color .2s; } .stepper button:hover{background:var(--accent); color:var(--accent-ink)} .stepper span{min-width:22px; text-align:center; font-size:.86rem; font-weight:700; color:var(--head)} /* ---------- assurance strip ---------- */ .assure{border-top:1px solid var(--line); background:var(--bg-2); padding:clamp(40px,5vw,64px) 0} .assure-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px} .assure-cell{display:flex; gap:14px; align-items:flex-start} .assure-cell svg{width:26px; height:26px; flex:none; fill:var(--head-accent); margin-top:2px} .assure-cell b{display:block; font-family:var(--display); color:var(--head); font-size:.98rem; margin-bottom:4px} .assure-cell span{font-size:.85rem; color:var(--muted); line-height:1.5} @media (max-width:960px){ .assure-grid{grid-template-columns:1fr 1fr; gap:24px} } @media (max-width:620px){ .assure-grid{grid-template-columns:1fr} } /* the whole tile opens the product page */ .card{cursor:pointer} .card:hover .card-name{color:var(--head-accent)} .card .add, .card .stepper{cursor:auto} /* ---------- variant swatches ---------- Quick view only. On a two-column mobile tile these would crowd the name and price, and slow down the scan that sells. */ .swatches{display:flex; flex-wrap:wrap; gap:9px} .swatch{ width:34px; height:34px; border-radius:50%; padding:0; border:2px solid var(--line); position:relative; transition:transform .2s, border-color .2s, box-shadow .2s; } .swatch:hover{transform:scale(1.09); border-color:var(--muted)} .swatch.on{border-color:var(--head-accent); box-shadow:0 0 0 3px rgba(141,198,63,.18)} .swatch.on::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--surface); } @media (max-width:760px){ .swatch{width:40px; height:40px} } /* ============================================================ PRODUCT PAGE (PDP) A full page, not a popup. Each product gets its own address (#product/name) so it can be linked, shared and — once this becomes single-product.php in WordPress — indexed by Google. ============================================================ */ .pdp{ position:fixed; inset:0; z-index:70; background:var(--bg); overflow-y:auto; overscroll-behavior:contain; opacity:0; pointer-events:none; transform:translateY(14px); transition:opacity .34s ease, transform .38s cubic-bezier(.2,.7,.3,1); } /* when an overlay opens over the product page, recede its content so the overlay reads as clearly on top (the blur can't sample a solid panel, so we dim + soften the page itself instead) */ .pdp-wrap{transition:filter .34s ease, opacity .34s ease, transform .34s ease} body.overlay-over-pdp .pdp-wrap{ filter:blur(6px); opacity:.5; transform:scale(.985); pointer-events:none; } .pdp.on{opacity:1; pointer-events:auto; transform:none} .pdp-wrap{max-width:1240px; margin:0 auto; padding:clamp(26px,4vw,54px) var(--pad) 80px} .pdp-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); align-items:start} /* --- gallery --- */ .pdp-gallery{position:sticky; top:88px} @media (min-width:901px){ .pdp-main{max-height:calc(100vh - 260px)} .pdp-thumbs{max-height:96px} .pdp-thumb{max-height:96px} } .pdp-main{ position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--img-bg); aspect-ratio:1/1; } .pdp-main img{width:100%; height:100%; object-fit:cover; transition:opacity .3s} .pdp-thumbs{display:flex; gap:10px; margin-top:12px} .pdp-thumb{ flex:1; aspect-ratio:1/1; border-radius:10px; overflow:hidden; padding:0; border:1px solid var(--line); background:var(--img-bg); transition:border-color .2s, transform .2s; } .pdp-thumb img{width:100%; height:100%; object-fit:cover} .pdp-thumb:hover{transform:translateY(-2px)} .pdp-thumb.on{border-color:var(--head-accent); box-shadow:0 0 0 2px rgba(141,198,63,.2)} /* --- info --- */ .pdp-cat{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:10px} .pdp-name{font-family:var(--display); font-size:clamp(1.7rem,3.4vw,2.5rem); color:var(--head); line-height:1.14; margin-bottom:14px} .pdp-priceline{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:18px} .pdp-price{font-family:var(--display); font-size:2rem; color:var(--head-accent)} .pdp-stock{font-size:.82rem; padding:6px 13px; border-radius:999px; border:1px solid var(--line); color:var(--muted)} .pdp-stock.low{color:#F0B24A; border-color:rgba(240,178,74,.4)} .pdp-note{font-size:1rem; color:var(--text); line-height:1.65; margin-bottom:24px} /* --- buy row --- */ .pdp-buy{display:flex; gap:12px; margin-bottom:14px; flex-wrap:wrap} .pdp-buy .add, .pdp-buy .stepper{flex:1; min-width:170px} .pdp-buy .add{padding:16px 24px; font-size:.94rem; text-align:center} .pdp-buy .stepper{justify-content:space-between; padding:5px} .pdp-buy .stepper button{width:44px; height:44px; font-size:1.2rem} .pdp-ship{ display:flex; gap:11px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:15px 17px; margin:20px 0 26px; font-size:.87rem; color:var(--text); } .pdp-ship svg{width:19px; height:19px; flex:none; fill:var(--head-accent); margin-top:2px} .pdp-ship b{color:var(--head); display:block; margin-bottom:3px; font-family:var(--display); font-size:.92rem} /* --- details accordion --- */ .pdp-acc{border-top:1px solid var(--line)} .pdp-acc details{border-bottom:1px solid var(--line)} .pdp-acc summary{ cursor:pointer; list-style:none; padding:17px 40px 17px 0; position:relative; font-family:var(--display); font-size:.98rem; color:var(--head); transition:color .2s; } .pdp-acc summary::-webkit-details-marker{display:none} .pdp-acc summary::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.35rem; color:var(--head-accent); transition:transform .3s; } .pdp-acc details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .pdp-acc summary:hover{color:var(--head-accent)} .pdp-acc p{padding:0 0 18px; margin:0; font-size:.9rem; color:var(--text); line-height:1.6} /* --- cross-sell --- */ .pdp-more{margin-top:clamp(48px,7vw,88px); padding-top:clamp(32px,4vw,52px); border-top:1px solid var(--line)} .pdp-more h3{font-family:var(--display); font-size:1.35rem; color:var(--head); margin-bottom:6px} .pdp-more p{font-size:.88rem; color:var(--muted); margin-bottom:24px} .pdp-more .grid{margin-top:0} @media (max-width:900px){ .pdp-grid{grid-template-columns:1fr; gap:28px} .pdp-gallery{position:static} .pdp-main{aspect-ratio:4/5} } @media (max-width:620px){ .pdp-wrap{padding-bottom:60px} .pdp-buy .add, .pdp-buy .stepper{min-width:0; width:100%} .pdp-price{font-size:1.65rem} .pdp-thumbs{gap:8px} } /* ---------- routine bundles ---------- */ .bundles{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .bundles-sub{margin-top:16px; max-width:56ch; color:var(--text); font-size:.96rem} .bundle-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px} .bundle{ display:grid; grid-template-columns:190px 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; transition:transform .3s, border-color .3s, box-shadow .3s; } .bundle:hover{transform:translateY(-5px); border-color:var(--head-accent); box-shadow:var(--shadow)} .bundle-media{position:relative; background:var(--img-bg); overflow:hidden} .bundle-media img{width:100%; height:100%; object-fit:cover} .bundle-body{padding:24px 24px 26px; display:flex; flex-direction:column} .bundle-name{font-family:var(--display); font-size:1.2rem; color:var(--head); margin-bottom:7px} .bundle-note{font-size:.87rem; color:var(--muted); margin-bottom:14px; line-height:1.5} .bundle-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap} .bundle-price{display:flex; align-items:baseline; gap:10px} .bundle-price b{font-family:var(--display); font-size:1.35rem; color:var(--head-accent)} .bundle-price s{font-size:.88rem; color:var(--muted)} @media (max-width:1000px){ .bundle-grid{grid-template-columns:1fr} } @media (max-width:560px){ .bundle{grid-template-columns:1fr} .bundle-media{aspect-ratio:16/10} .bundle-body{padding:20px} .bundle-foot .add, .bundle-foot .stepper{width:100%} } /* ---------- free delivery progress ---------- */ .ship-bar{ border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:14px 16px; margin-bottom:16px; } .ship-bar p{font-size:.84rem; color:var(--text); margin-bottom:10px; line-height:1.45} .ship-bar b{color:var(--head-accent)} .ship-track{height:4px; border-radius:999px; background:var(--line); overflow:hidden} .ship-track span{display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .5s cubic-bezier(.2,.7,.3,1)} .ship-bar.done p{color:var(--head-accent)} .ship-bar.done{border-color:var(--head-accent)} /* ---------- store ---------- */ .store{border-top:1px solid var(--line); background:var(--bg-2)} .store-img{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line)} .store-img img{width:100%; height:100%; object-fit:cover} .meta{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px} .meta li{display:grid; grid-template-columns:8.5ch 1fr; gap:16px; font-size:.93rem; padding-bottom:14px; border-bottom:1px solid var(--line)} .meta span{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding-top:3px} .meta b{color:var(--head); font-weight:600} /* ---------- reviews ---------- */ .rating{display:flex; align-items:center; gap:26px; flex-wrap:wrap} .rating-num{font-family:var(--display); font-size:clamp(3.4rem,8vw,5.4rem); color:var(--head-accent); line-height:1} .stars{display:flex; gap:5px} .stars svg{width:19px; height:19px; fill:var(--head-accent)} .theme{padding:10px 18px; border:1px solid var(--line); border-radius:999px; font-size:.85rem; background:var(--surface)} /* ---------- review quotes ---------- */ .quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px} .quote{margin:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:26px 24px; position:relative; transition:transform .3s, border-color .3s} .quote:hover{transform:translateY(-4px); border-color:var(--head-accent)} .quote::before{content:"\201C"; font-family:var(--display); font-size:3.4rem; line-height:1; color:var(--head-accent); opacity:.5; display:block; margin-bottom:4px} .quote blockquote{margin:0; font-size:.94rem; line-height:1.62; color:var(--text)} .quote figcaption{margin-top:16px; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)} .review-cta{margin-top:26px} @media (max-width:960px){ .quotes{grid-template-columns:1fr} } /* ---------- faq ---------- */ .faq{border-top:1px solid var(--line)} .faq-list{margin-top:34px; border-top:1px solid var(--line)} .faq-list details{border-bottom:1px solid var(--line)} .faq-list summary{ cursor:pointer; padding:20px 44px 20px 0; position:relative; list-style:none; font-family:var(--display); font-size:1.04rem; color:var(--head); transition:color .2s; } .faq-list summary::-webkit-details-marker{display:none} .faq-list summary::after{ content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:1.5rem; line-height:1; color:var(--head-accent); transition:transform .3s; } .faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .faq-list summary:hover{color:var(--head-accent)} .faq-list p{padding:0 52px 22px 0; margin:0; font-size:.93rem; color:var(--text); line-height:1.65} /* ---------- footer ---------- */ .foot{border-top:1px solid var(--line); padding:64px 0 34px} .foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:44px} .foot h4{font-family:var(--display); color:var(--head); font-size:.94rem; margin:0 0 16px} .foot p, .foot a{font-size:.9rem; color:var(--muted); display:block; margin-bottom:9px} .foot a:hover{color:var(--head-accent)} .foot-bar{ margin-top:48px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.78rem; color:var(--muted); } .by{display:flex; align-items:center; gap:9px} .by img{width:22px; height:auto} /* ---------- cart ---------- */ .cart{ position:fixed; inset:0; z-index:80; display:flex; justify-content:flex-end; background:rgba(4,7,5,0); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); visibility:hidden; pointer-events:none; transition:background-color .3s ease, backdrop-filter .3s ease, visibility 0s .3s; } .cart.on{ background:var(--veil); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); visibility:visible; pointer-events:auto; transition:background-color .3s ease, backdrop-filter .3s ease, visibility 0s; } .cart-panel{ width:min(430px,100%); height:100%; background:var(--bg-2); border-left:1px solid var(--line); display:flex; flex-direction:column; transform:translateX(102%); transition:transform .32s cubic-bezier(.2,.7,.3,1); } .cart.on .cart-panel{transform:none} .drawer-head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line)} .drawer-head h3{font-size:1.06rem} .x{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:all .2s} .x:hover{border-color:var(--head-accent); color:var(--head-accent)} .drawer-body{flex:1; overflow-y:auto; padding:8px 24px} .empty{text-align:center; padding:64px 0; color:var(--muted); font-size:.92rem} .line{display:grid; grid-template-columns:60px 1fr auto; gap:15px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center} .line-img{width:60px; height:60px; border-radius:9px; overflow:hidden; background:var(--img-bg)} .line-img img{width:100%; height:100%; object-fit:cover} .line-name{font-family:var(--display); color:var(--head); font-size:.94rem; line-height:1.3} .line-price{font-size:.82rem; color:var(--muted); margin-top:3px} .qty{display:flex; align-items:center; gap:9px; margin-top:9px} .qty button{width:25px; height:25px; border-radius:50%; border:1px solid var(--line); color:var(--text); display:grid; place-items:center; font-size:.9rem; transition:all .2s} .qty button:hover{border-color:var(--head-accent); color:var(--head-accent)} .qty span{font-size:.85rem; min-width:16px; text-align:center} .line-sum{font-family:var(--display); color:var(--head)} .drawer-foot{padding:22px 24px 26px; border-top:1px solid var(--line)} .total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px} .total b{font-family:var(--display); font-size:1.6rem; color:var(--head-accent)} .ship{font-size:.78rem; color:var(--muted); margin-bottom:18px} .checkout-safe{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; font-size:.78rem; color:var(--muted); } .checkout-safe svg{width:15px; height:15px; flex:none; fill:var(--head-accent)} .checkout{width:100%; padding:16px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:700; display:flex; align-items:center; justify-content:center; gap:10px; transition:transform .2s, box-shadow .2s} .checkout:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(141,198,63,.32)} /* ============================================================ CHECKOUT — how would you like to pay Chat sits first because it converts best for buyers who won't type a card into a shop they've just met. Card sits last, not because it matters least, but because it needs the most trust. ============================================================ */ /* panels scroll without showing a bar — the content is the interface */ .advisor-card::-webkit-scrollbar, .pdp::-webkit-scrollbar, .drawer-body::-webkit-scrollbar{width:0; height:0; display:none} /* ---------- transfer / USSD detail ---------- */ /* ---------- order confirmed ---------- */ @keyframes popIn{from{transform:scale(.6); opacity:0}to{transform:none; opacity:1}} /* ---------- payment detail (transfer / USSD) ---------- */ /* ---------- order confirmed ---------- */ @keyframes okPop{from{transform:scale(.6); opacity:0}to{transform:scale(1); opacity:1}} /* overlays keep their own scroll working under the iOS touch lock */ /* ---------- reveal ---------- */ .rise{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1)} .rise.in{opacity:1; transform:none} /* ---------- ADVISOR ---------- */ .advisor-fab{ position:fixed; right:20px; bottom:20px; z-index:65; display:flex; align-items:center; gap:10px; padding:13px 20px 13px 16px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:.9rem; box-shadow:0 12px 30px rgba(141,198,63,.34); transform:translateY(0); transition:transform .3s, box-shadow .3s, opacity .3s; animation:fabIn .5s cubic-bezier(.2,.7,.3,1) 1.2s both; } @keyframes fabIn{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}} .advisor-fab:hover{transform:translateY(-3px); box-shadow:0 16px 38px rgba(141,198,63,.44)} .advisor-fab svg{width:19px; height:19px; fill:var(--accent-ink)} @media (max-width:620px){ .advisor-fab span{display:none} .advisor-fab{padding:15px; right:16px; bottom:16px} } .advisor{ position:fixed; inset:0; z-index:95; display:grid; place-items:end center; padding:0; background:rgba(4,7,5,0); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); visibility:hidden; pointer-events:none; transition:background-color .3s ease, backdrop-filter .3s ease, visibility 0s .3s; } .advisor.on{ background:var(--veil); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); visibility:visible; pointer-events:auto; transition:background-color .3s ease, backdrop-filter .3s ease, visibility 0s; } .advisor-card{ width:100%; max-width:520px; background:var(--surface); border:1px solid var(--line); border-radius:20px 20px 0 0; padding:26px 26px 30px; transform:translateY(101%); transition:transform .42s cubic-bezier(.2,.7,.3,1); max-height:88vh; overflow-y:auto; } @media (min-width:600px){ .advisor{place-items:center; padding:24px} .advisor-card{border-radius:20px; transform:translateY(20px) scale(.97)} } .advisor.on .advisor-card{transform:none} .advisor-card{position:relative; z-index:1} .adv-head{display:flex; align-items:center; gap:12px; margin-bottom:6px} .adv-back{width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:none; place-items:center; color:var(--muted); flex:none; transition:all .2s} .adv-back:hover{border-color:var(--head-accent); color:var(--head-accent)} .adv-back.show{display:grid} .adv-ey{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)} .adv-x{margin-left:auto; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:all .2s} .adv-x:hover{border-color:var(--head-accent); color:var(--head-accent)} .adv-q{font-family:var(--display); color:var(--head); font-size:1.5rem; line-height:1.2; margin:10px 0 20px} .adv-opts{display:flex; flex-direction:column; gap:9px} .adv-opt{ text-align:left; padding:15px 18px; border-radius:12px; border:1px solid var(--line); background:var(--bg-2); color:var(--head); font-size:.96rem; transition:all .2s; display:flex; align-items:center; justify-content:space-between; gap:12px; } .adv-opt:hover{border-color:var(--head-accent); background:var(--surface-2); transform:translateX(3px)} .adv-opt svg.chev{width:15px; height:15px; flex:none; color:var(--muted); transition:color .2s, transform .2s} .adv-opt:hover svg.chev{color:var(--head-accent); transform:translateX(2px)} /* progress + multi-select + free-text */ .adv-hint{font-size:.85rem; color:var(--muted); margin:-12px 0 16px} .adv-tick{ width:20px; height:20px; flex:none; border-radius:6px; border:1.5px solid var(--line); position:relative; transition:all .2s; } .adv-opt.on{border-color:var(--head-accent); background:var(--surface-2)} .adv-opt.on .adv-tick{background:var(--accent); border-color:var(--accent)} .adv-opt.on .adv-tick::after{ content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid var(--accent-ink); border-width:0 2px 2px 0; transform:rotate(45deg); } .adv-other{max-height:0; overflow:hidden; transition:max-height .3s ease, margin .3s ease} .adv-other.show{max-height:70px; margin-top:9px} .adv-other input{ width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--head-accent); background:var(--bg-2); color:var(--head); font-family:var(--body); font-size:.94rem; } .adv-other input::placeholder{color:var(--muted)} .adv-next{ width:100%; margin-top:16px; padding:16px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:.95rem; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .2s, box-shadow .2s, opacity .2s; } .adv-next:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 12px 28px rgba(141,198,63,.34)} .adv-next:disabled{opacity:.35; cursor:not-allowed} .adv-next svg{width:15px; height:15px} .crumb{font-size:.72rem; padding:5px 11px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); color:var(--muted)} .crumb b{color:var(--head-accent); font-weight:600} .adv-summary{background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:8px} .adv-summary .row{display:grid; grid-template-columns:8.5ch 1fr; gap:12px; padding:9px 0; font-size:.92rem; border-bottom:1px solid var(--line)} .adv-summary .row:last-child{border-bottom:none} .adv-summary .row span{color:var(--muted); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding-top:3px} .adv-summary .row b{color:var(--head); font-weight:600} .adv-note{font-size:.85rem; color:var(--muted); margin:16px 0 18px; text-align:center} .adv-wa{ width:100%; padding:16px; border-radius:999px; background:#25D366; color:#062b14; font-weight:700; display:flex; align-items:center; justify-content:center; gap:10px; transition:transform .2s, box-shadow .2s; font-size:.98rem; } .adv-wa:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(37,211,102,.4)} .adv-wa svg{width:19px; height:19px; fill:#062b14} /* ---------- responsive ---------- */ @media (max-width:1180px){ .grid{grid-template-columns:repeat(3,1fr)} } @media (max-width:960px){ .grid{grid-template-columns:repeat(2,1fr)} .split{grid-template-columns:1fr} .frame{aspect-ratio:16/11} .foot-grid{grid-template-columns:1fr 1fr} .nav-links{display:none} .nav-tools{margin-left:auto} /* cart sits hard against the right edge */ } @media (max-width:620px){ .foot-grid{grid-template-columns:1fr} .hero-inner{padding-top:100px} } /* ---------- two-column mobile catalogue ---------- Two products per row lets shoppers compare and scan, which is how people actually browse a beauty shelf. Card internals shrink so the tighter column never crowds. */ @media (max-width:620px){ .grid{grid-template-columns:repeat(2,1fr); gap:12px} .card-media{aspect-ratio:4/5} /* taller frame suits bottles & tubes */ .card-body{padding:13px 13px 15px; gap:5px} .card-cat{font-size:.56rem; letter-spacing:.14em} .card-name{font-size:.9rem; line-height:1.25} /* description belongs on the product page, not the tile */ .card-foot{flex-direction:column; align-items:stretch; gap:9px; min-height:0} .price{font-size:1.02rem} .add{width:100%; text-align:center; padding:12px 8px; font-size:.8rem} .stepper{width:100%; justify-content:space-between} .stepper button{width:38px; height:38px} .tag{font-size:.55rem; padding:5px 8px; top:9px; left:9px} } /* small phones: keep two columns but tighten further */ @media (max-width:380px){ .grid{gap:9px} .card-body{padding:11px 10px 13px} .card-name{font-size:.84rem} .price{font-size:.95rem} .add{font-size:.75rem; padding:11px 6px} .stepper button{width:34px; height:34px} } /* ---------- mobile touch ergonomics ---------- Every interactive element clears the 44px minimum tap target. Desktop keeps its tighter, more elegant sizing. */ @media (max-width:960px){ .chip{padding:13px 22px; font-size:.88rem} .add{padding:14px 22px; font-size:.86rem} .stepper button{width:40px; height:40px; font-size:1.15rem} .stepper span{min-width:30px; font-size:.95rem} .qty button{width:36px; height:36px; font-size:1.05rem} .qty span{min-width:24px; font-size:.95rem} .x, .adv-x, .adv-back{width:44px; height:44px} .adv-opt{padding:17px 20px; font-size:1rem} .faq-list summary{padding:22px 48px 22px 0} .btn{padding:16px 30px} .checkout, .adv-wa{padding:18px} .cart-btn{padding:11px 18px} .cart-count{min-width:24px; height:24px} .foot a{padding:4px 0} } /* thumb-zone: on small phones the cart is easier to reach at the bottom-right than in the top nav, so the advisor sits above it */ @media (max-width:620px){ .advisor-fab{bottom:20px; right:16px} .quote{padding:22px 20px} .assure-cell{gap:12px} .meta li{grid-template-columns:1fr; gap:4px} .meta span{padding-top:0} .ritual-list li{flex-direction:column; gap:4px} .ritual-list b{width:auto} .rating{gap:18px} .cart-panel{width:100%} .line{grid-template-columns:52px 1fr auto; gap:12px} .line-img{width:52px; height:52px} } /* very small phones */ @media (max-width:380px){ .cart-btn{padding:10px 14px; font-size:.8rem} .brand{font-size:1.15rem} .adv-q{font-size:1.3rem} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important} html{scroll-behavior:auto} .rise{opacity:1; transform:none} .hero-media img{opacity:var(--hero-img-opacity); transform:none} } /* ============================================================ WOOCOMMERCE NORMALISING WooCommerce prints its own markup for cart, checkout, account and notices. These rules dress that markup in the Kendera design rather than fighting it. ============================================================ */ .woocommerce-notices-wrapper{max-width:1240px; margin:0 auto; padding:0 var(--pad)} .woocommerce-message,.woocommerce-info,.woocommerce-error{ list-style:none; margin:16px 0; padding:15px 18px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:.9rem; } .woocommerce-message{border-color:var(--head-accent)} .woocommerce-error{border-color:#F0B24A; color:#F0B24A} .woocommerce-message .button,.woocommerce-info .button{float:right; margin-left:14px} /* shop / cart / checkout / account pages */ .page-shell{padding:clamp(90px,11vw,150px) 0 clamp(60px,8vw,110px)} .page-shell .wrap{max-width:1240px; margin:0 auto; padding:0 var(--pad)} .page-title{font-family:var(--display); color:var(--head); margin-bottom:10px} .page-intro{color:var(--muted); font-size:.95rem; margin-bottom:34px; max-width:60ch} .woocommerce form .form-row{display:flex; flex-direction:column; margin-bottom:16px} .woocommerce form .form-row label{font-size:.8rem; letter-spacing:.06em; color:var(--muted); margin-bottom:7px} .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .select2-container .select2-selection--single{ width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--bg-2); color:var(--head); font-family:var(--body); font-size:.95rem; height:auto; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus{outline:none; border-color:var(--head-accent)} .woocommerce .select2-container .select2-selection--single .select2-selection__rendered{color:var(--head); line-height:1.5; padding:0} .woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce #respond input#submit,.wc-block-components-button{ padding:14px 26px; border-radius:999px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:.88rem; transition:transform .2s, box-shadow .2s; cursor:pointer; line-height:1.2; } .woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover, .woocommerce input.button:hover,.woocommerce #respond input#submit:hover{ background:var(--accent); color:var(--accent-ink); transform:translateY(-2px); box-shadow:0 10px 26px rgba(141,198,63,.32); } .woocommerce .button.alt{background:var(--accent); color:var(--accent-ink)} .woocommerce table.shop_table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); margin-bottom:26px; } .woocommerce table.shop_table th,.woocommerce table.shop_table td{ padding:15px 16px; border-bottom:1px solid var(--line); font-size:.92rem; text-align:left; } .woocommerce table.shop_table th{font-family:var(--display); color:var(--head-accent); font-weight:700} .woocommerce table.shop_table td{color:var(--text)} .woocommerce .cart_totals h2,.woocommerce-billing-fields h3, .woocommerce-checkout-review-order h3,#order_review_heading{ font-family:var(--display); color:var(--head); font-size:1.2rem; margin:0 0 16px; } .woocommerce .quantity input.qty{ width:70px; padding:10px; text-align:center; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); color:var(--head); } .woocommerce ul.order_details{list-style:none; padding:0; display:grid; gap:12px; margin:0 0 26px} .woocommerce ul.order_details li{ border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:14px 16px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .woocommerce ul.order_details li strong{ display:block; margin-top:6px; font-family:var(--display); font-size:1.05rem; color:var(--head-accent); letter-spacing:0; text-transform:none; } #payment ul.payment_methods{list-style:none; padding:0; margin:0 0 18px} #payment ul.payment_methods li{ border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:15px 17px; margin-bottom:10px; } #payment div.payment_box{background:var(--bg-2); border-radius:10px; padding:13px 15px; margin-top:11px; font-size:.86rem; color:var(--muted)} .woocommerce-checkout #payment{background:transparent; border-radius:0} /* pagination + sorting on the shop page */ .woocommerce nav.woocommerce-pagination ul{display:flex; gap:8px; list-style:none; padding:0; justify-content:center; margin-top:40px} .woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{ display:grid; place-items:center; min-width:42px; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:999px; color:var(--text); font-size:.88rem; } .woocommerce nav.woocommerce-pagination ul li span.current{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700} .woocommerce-ordering select{ padding:11px 16px; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); color:var(--head); font-size:.85rem; } .woocommerce-result-count{color:var(--muted); font-size:.85rem} /* the shop toolbar */ .shop-bar{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin-bottom:30px} /* ============================================================ BRAND MARK The real Kendera logo replaces the typed wordmark. ============================================================ */ .brand{display:flex; align-items:center; gap:0} .brand-logo,.brand .custom-logo{height:44px; width:auto; display:block} .nav.stuck .brand-logo,.nav.stuck .brand .custom-logo{height:38px; transition:height .3s ease} .foot .brand-logo{height:56px} @media (max-width:620px){ .brand-logo,.brand .custom-logo{height:36px} .nav.stuck .brand-logo,.nav.stuck .brand .custom-logo{height:32px} } /* ---------- light-theme refinements ---------- */ .trust{background:var(--bg-2)} .card{box-shadow:0 1px 2px rgba(19,83,48,.05)} .card:hover{box-shadow:0 18px 40px rgba(19,83,48,.13)} .add{color:var(--accent-ink); box-shadow:0 3px 10px rgba(112,215,48,.28)} .add:hover{box-shadow:0 9px 22px rgba(112,215,48,.42)} .cart-btn{box-shadow:0 3px 10px rgba(112,215,48,.28)} .hero h1 span{color:var(--head-accent)} .leaf{fill:var(--accent)} .quote::before{color:var(--accent); opacity:.65} .stars svg{fill:var(--accent)} .rating-num{color:var(--head-accent)} .price{color:var(--head-accent)} .pdp-price{color:var(--head-accent)} .bundle-price b{color:var(--head-accent)} .total b{color:var(--head-accent)} .checkout{color:var(--accent-ink); box-shadow:0 6px 18px rgba(112,215,48,.32)} .btn-primary{color:var(--accent-ink)} .foot{background:var(--bg-2)} .advisor-fab{color:var(--accent-ink); box-shadow:0 10px 26px rgba(112,215,48,.38)} .ship-track span{background:var(--accent)} /* ============================================================ FIXES ============================================================ */ /* ---- 1. Logo must dominate ---- The nav uses a tagline-free crop so the wordmark can be large. The footer keeps the full lockup, where there is room for it. */ .brand{display:flex; align-items:center; gap:0; flex:none} .brand-logo,.brand .custom-logo{height:52px; width:auto; display:block; transition:height .3s ease} .nav.stuck .brand-logo,.nav.stuck .brand .custom-logo{height:44px} .foot .brand-logo{height:74px} @media (max-width:900px){ .brand-logo,.brand .custom-logo{height:46px} .nav.stuck .brand-logo,.nav.stuck .brand .custom-logo{height:40px} .foot .brand-logo{height:62px} } @media (max-width:620px){ .nav{padding-left:16px; padding-right:16px; gap:10px} .brand-logo,.brand .custom-logo{height:40px} .nav.stuck .brand-logo,.nav.stuck .brand .custom-logo{height:36px} .foot .brand-logo{height:54px} .cart-btn{padding:10px 15px; font-size:.82rem} } @media (max-width:380px){ .brand-logo,.brand .custom-logo{height:34px} } /* ---- 2. Product cards must line up ---- A two-line name used to push the price and button down, so the row looked ragged. The name now always reserves two lines and the foot is pinned to the bottom of every card. */ .grid{align-items:stretch} .card{height:100%} .card-body{display:flex; flex-direction:column; flex:1} /* Product names in this trade are long - "Nature Balance Immense Clarifying Fairness Body Lotion - 500g" is normal, not an outlier. Two lines cut it mid-word and left the shopper guessing. Three lines, slightly tighter, and the tile still keeps a consistent height. */ .card-name{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; line-height:1.26; overflow-wrap:break-word; hyphens:auto; } .card-foot{margin-top:auto; padding-top:12px} /* ---- 3. Swipeable product gallery ---- */ .pdp-main{touch-action:pan-y; cursor:grab; user-select:none} .pdp-main.dragging{cursor:grabbing} .pdp-main img{pointer-events:none} .pdp-swipe-hint{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2; } .pdp-swipe-hint i{ width:7px; height:7px; border-radius:50%; background:rgba(19,83,48,.25); transition:background .25s, width .25s; } .pdp-swipe-hint i.on{background:var(--head-accent); width:20px; border-radius:999px} /* ---- 4. Clear next step after adding to cart ---- */ .pdp-added{ display:flex; align-items:center; gap:10px; margin-top:14px; padding:14px 16px; border-radius:12px; border:1px solid var(--head-accent); background:var(--surface-2); font-size:.9rem; color:var(--head); animation:stepIn .3s cubic-bezier(.2,.7,.3,1); } .pdp-added svg{width:18px; height:18px; flex:none; fill:var(--head-accent)} .pdp-added a{margin-left:auto; color:var(--head-accent); font-weight:700; white-space:nowrap} /* ============================================================ REFINEMENTS ============================================================ */ /* ---- WebAid mark, now inline SVG so it takes the right colour ---- */ .by{display:flex; align-items:center; gap:9px; color:var(--muted)} /* ---- logo sits closer to the left edge ---- The nav had the same generous padding as the page body, which pushed the wordmark away from the edge and made it look adrift. */ .nav{padding-left:clamp(14px, 2.2vw, 30px)} @media (max-width:620px){ .nav{padding-left:12px; padding-right:12px} } /* ---- gallery thumbnails move inside the image ---- They used to sit underneath and eat vertical space, pushing the name, price and Add button below the fold. Now they float over the photo, so the important things stay visible. */ @media (min-width:901px){ .pdp-thumbs{ position:absolute; left:14px; top:50%; transform:translateY(-50%); flex-direction:column; z-index:3; gap:9px; max-height:none; } .pdp-thumb{ width:62px; height:62px; flex:none; max-height:none; border-radius:10px; overflow:hidden; background:rgba(255,255,255,.9); backdrop-filter:blur(6px); border:1.5px solid rgba(19,83,48,.14); box-shadow:0 3px 10px rgba(19,83,48,.10); } .pdp-thumb.on{border-color:var(--head-accent); box-shadow:0 0 0 2px rgba(112,215,48,.30)} .pdp-gallery{position:relative} .pdp-main{max-height:calc(100vh - 200px)} } @media (max-width:900px){ .pdp-thumbs{ position:absolute; left:0; right:0; bottom:12px; justify-content:center; z-index:3; gap:8px; padding:0 12px; } .pdp-thumb{ width:54px; height:54px; flex:none; border-radius:9px; overflow:hidden; background:rgba(255,255,255,.9); backdrop-filter:blur(6px); border:1.5px solid rgba(19,83,48,.14); box-shadow:0 3px 10px rgba(19,83,48,.12); } .pdp-thumb.on{border-color:var(--head-accent); box-shadow:0 0 0 2px rgba(112,215,48,.30)} .pdp-gallery{position:relative} /* the dots would collide with the thumbnails, so hide them here */ .pdp-swipe-hint{display:none} } /* ---- free delivery: tell them the moment they qualify ---- */ .free-toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); z-index:96; display:flex; align-items:center; gap:11px; padding:14px 20px; border-radius:999px; background:var(--head-accent); color:#fff; font-size:.9rem; font-weight:600; box-shadow:0 14px 34px rgba(19,83,48,.32); opacity:0; pointer-events:none; transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.3,1); max-width:calc(100% - 32px); } .free-toast.on{opacity:1; transform:translate(-50%, 0)} .free-toast svg{width:19px; height:19px; flex:none; fill:#fff} @media (max-width:620px){ .free-toast{bottom:88px; font-size:.85rem; padding:12px 17px} } /* the nudge inside the cart, one step from qualifying */ .ship-bar.close p{color:var(--head-accent); font-weight:600} /* ============================================================ HERO No card around the photo. A soft pink field runs the full width, the words sit left, and the image stands on its own to the right, bleeding to the edge of the screen. ============================================================ */ .hero{ position:relative; min-height:0; display:block; background:linear-gradient(115deg,#FBEEEC 0%,#F9E7E4 46%,#F6E0DC 100%); padding:clamp(96px,10vw,132px) 0 0; overflow:hidden; } .hero-scrim{display:none} .hero-inner{max-width:1240px; margin:0 auto; padding:0 var(--pad); width:100%} .hero-inner .wrap{ max-width:none; margin:0; padding:0; background:none; border-radius:0; overflow:visible; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:clamp(24px,4vw,56px); } .hero-copy{padding:0 0 clamp(56px,7vw,84px)} .hero-media{ position:relative; align-self:end; background:none; min-height:0; } .hero-media img{ width:100%; height:auto; max-height:clamp(360px,44vw,560px); object-fit:contain; object-position:bottom center; display:block; opacity:1; transform:none; animation:none; filter:drop-shadow(0 24px 44px rgba(120,70,60,.18)); } .hero h1{font-size:clamp(2.05rem,4.1vw,3.35rem); margin-bottom:16px; max-width:15ch} .hero-sub{font-size:clamp(.96rem,1.25vw,1.06rem); margin-bottom:26px; max-width:44ch} @media (max-width:860px){ .hero{padding-top:clamp(80px,17vw,104px)} .hero-inner .wrap{grid-template-columns:1fr; gap:0} .hero-copy{padding-bottom:clamp(24px,5vw,32px); order:1} .hero-media{order:2; align-self:center} .hero-media img{max-height:clamp(280px,64vw,400px); object-position:bottom center} .hero h1{max-width:none} .hero-sub{max-width:none} } /* warm surfaces */ .trust{background:var(--bg-2); border-color:var(--line)} .assure{background:var(--bg-2)} .foot{background:var(--bg-2)} .bundles{background:var(--bg-2)} .store{background:var(--bg-2)} /* bigger, more dominant product photo on desktop */ @media (min-width:901px){ .pdp-main{max-height:min(720px, calc(100vh - 150px))} .pdp-thumb{width:88px; height:88px} } /* ============================================================ PRODUCT PAGE ============================================================ */ /* the top bar was still dark from the old theme */ .pdp-standalone{background:var(--bg)} /* Desktop left the gallery sticky in a tall empty column. The grid now sizes to its content so nothing is left hanging in space. */ @media (min-width:901px){ .pdp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start} .pdp-gallery{position:sticky; top:96px} .pdp-main{ max-height:min(560px, calc(100vh - 220px)); border-radius:18px; background:var(--surface-2); } .pdp-main img{object-fit:cover} .pdp-info{padding-bottom:20px} } /* ============================================================ PRODUCT PAGE REFINEMENTS ============================================================ */ @media (min-width:901px){ /* a larger frame - the photo is the thing that sells */ .pdp-main{max-height:min(660px, calc(100vh - 170px))} .pdp-gallery{top:88px} /* thumbnails sit under the image again, not floating over it */ .pdp-thumbs{ position:static; transform:none; flex-direction:row; margin-top:12px; gap:10px; justify-content:flex-start; } .pdp-thumb{width:80px; height:80px; background:var(--surface-2)} /* variant swatches move below the image, where the eye already is */ } /* ============================================================ ADVISOR BUTTON A gentle nudge, not a nag: it lifts once after the visitor has settled, shows a one-line invitation, then goes quiet for good. ============================================================ */ @keyframes fabNudge{ 0%,100%{transform:translateY(0) rotate(0)} 15%{transform:translateY(-6px) rotate(-4deg)} 30%{transform:translateY(0) rotate(3deg)} 45%{transform:translateY(-3px) rotate(-2deg)} 60%{transform:translateY(0) rotate(0)} } .advisor-fab.nudge{animation:fabNudge 1.5s cubic-bezier(.36,.07,.19,.97) 2} .fab-bubble{ position:fixed; right:20px; bottom:84px; z-index:64; max-width:min(300px, calc(100vw - 40px)); background:var(--surface); color:var(--head); border:1px solid var(--line); border-radius:16px; padding:15px 42px 15px 17px; box-shadow:0 14px 34px rgba(19,83,48,.16); font-size:.9rem; line-height:1.45; opacity:0; transform:translateY(10px) scale(.96); pointer-events:none; transition:opacity .32s ease, transform .38s cubic-bezier(.2,.7,.3,1); } .fab-bubble.on{opacity:1; transform:none; pointer-events:auto} .fab-bubble b{display:block; color:var(--head-accent); margin-bottom:3px; font-family:var(--display); font-size:.96rem} .fab-bubble-x{ position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--muted); font-size:.9rem; line-height:1; } .fab-bubble-x:hover{background:var(--bg-2); color:var(--head)} .fab-bubble::after{ content:""; position:absolute; right:26px; bottom:-7px; width:14px; height:14px; background:var(--surface); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg); } @media (max-width:620px){ .fab-bubble{right:16px; bottom:78px} } /* ============================================================ ADVISOR PROGRESS - numbered steps A bar says "you are somewhere". Numbers say "four taps, that is all". ============================================================ */ .adv-steps{display:flex; align-items:center; gap:0; margin:16px 0 20px} .adv-step{display:flex; align-items:center; flex:1} .adv-step:last-child{flex:0} .adv-dot{ width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:.8rem; font-weight:700; font-family:var(--body); border:1.5px solid var(--line); background:var(--surface); color:var(--muted); transition:background .3s, border-color .3s, color .3s, transform .3s; } .adv-dot.done{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)} .adv-dot.now{ border-color:var(--head-accent); color:var(--head-accent); background:var(--surface); transform:scale(1.12); box-shadow:0 0 0 4px rgba(112,215,48,.16); } .adv-line{flex:1; height:2px; background:var(--line); margin:0 6px; border-radius:2px; overflow:hidden} .adv-line span{display:block; height:100%; width:0; background:var(--accent); transition:width .45s cubic-bezier(.2,.7,.3,1)} .adv-line.done span{width:100%} .adv-steps-txt{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px} /* ---- WebAid credit is now a link ---- */ .by{transition:color .2s} .by:hover{color:var(--head-accent)} /* ============================================================ HERO IMAGE ON MOBILE A tight landscape crop of a face lands on the eye and reads oddly. Taller frame, and the focus moved down to the cheek where the product is actually being applied. ============================================================ */ @media (max-width:860px){ .hero-media{height:clamp(250px,58vw,340px)} .hero-media img{object-position:center 45%} } @media (max-width:520px){ .hero-media{height:clamp(230px,62vw,300px)} .hero-media img{object-position:58% 48%} } /* ============================================================ ADVISOR SITS IN THE MIDDLE It was a bottom sheet on phones. Centred reads as a proper conversation rather than something sliding in from the edge. ============================================================ */ .advisor{place-items:center; padding:20px} .advisor-card{ border-radius:20px; transform:translateY(16px) scale(.97); max-height:min(84vh, 720px); width:100%; max-width:520px; } .advisor.on .advisor-card{transform:none} @media (max-width:620px){ .advisor{padding:16px} .advisor-card{max-height:86vh; padding:22px 20px 26px} } /* ============================================================ HERO — the photograph IS the background Previously the hero sat on a pink panel with the product photo floating on top of it, contained rather than covering. Against a warm beige photograph a pink field reads as a mistake, and it fought the cream palette everywhere else on the page. Now the photograph fills the hero edge to edge and the words sit on it behind a cream veil — the same cream as the page, so the hero dissolves into the site instead of ending at a hard seam. ============================================================ */ .hero{min-height:min(88svh, 780px)} .hero-inner .wrap{ background:none; position:relative; overflow:visible; } .hero-media{ position:absolute; inset:0; background:none !important; display:block; overflow:hidden; min-height:0; padding:0; } .hero-media img{ width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; object-position:center 32%; border-radius:0; filter:none; } /* The veil is cream, never white. White laid over a beige photograph is what produced that pink cast. */ body{ --hero-scrim:linear-gradient( to top, rgba(251,249,244,.985) 0%, rgba(251,249,244,.94) 34%, rgba(251,249,244,.62) 62%, rgba(251,249,244,.18) 100% ); } @media (min-width:961px){ body{ --hero-scrim:linear-gradient( 100deg, rgba(251,249,244,.99) 0%, rgba(251,249,244,.95) 34%, rgba(251,249,244,.55) 56%, rgba(251,249,244,0) 78% ); } .hero-media{inset:0} .hero-inner .wrap{padding-right:44%} } @media (max-width:860px){ .hero-media{order:0} .hero-inner{padding-top:clamp(150px,34vw,240px)} } /* green stays the brand voice */ .hero h1{color:var(--head)} .hero h1 span{color:var(--head-accent)} .hero-sub{color:#4A5A4C} .hero .eyebrow{color:#6F7F70} /* ---- product image larger and more dominant on desktop ---- */ @media (min-width:901px){ .pdp-grid{grid-template-columns:1.15fr .85fr; gap:clamp(30px,3.5vw,56px)} .pdp-main{max-height:min(720px, calc(100vh - 150px))} .pdp-thumb{width:88px; height:88px} } /* ============================================================ LOGO SIZE - HARD CONSTRAINT On product and checkout pages the logo rendered at its natural size until a scroll forced a repaint. The height rule alone was not enough because the image has no intrinsic box until it loads. Constraining the container as well as the image, with higher specificity than .nav.stuck, removes the flash entirely. ============================================================ */ .nav .brand{height:52px; max-width:min(58vw,300px); overflow:hidden; align-items:center} .nav .brand-logo, .nav .brand .custom-logo, .nav .brand img{ height:52px !important; max-height:52px !important; width:auto !important; max-width:100% !important; object-fit:contain; display:block; } .nav.stuck .brand{height:44px} .nav.stuck .brand-logo, .nav.stuck .brand .custom-logo, .nav.stuck .brand img{height:44px !important; max-height:44px !important} @media (max-width:900px){ .nav .brand{height:44px; max-width:min(52vw,230px)} .nav .brand-logo,.nav .brand .custom-logo,.nav .brand img{height:44px !important; max-height:44px !important} .nav.stuck .brand{height:38px} .nav.stuck .brand-logo,.nav.stuck .brand .custom-logo,.nav.stuck .brand img{height:38px !important; max-height:38px !important} } @media (max-width:620px){ .nav .brand{height:38px; max-width:min(50vw,190px)} .nav .brand-logo,.nav .brand .custom-logo,.nav .brand img{height:38px !important; max-height:38px !important} .nav.stuck .brand{height:34px} .nav.stuck .brand-logo,.nav.stuck .brand .custom-logo,.nav.stuck .brand img{height:34px !important; max-height:34px !important} } .foot .brand{height:auto; max-width:260px} .foot .brand-logo{height:60px !important; max-height:60px !important; width:auto !important} /* THE PULL-TO-REFRESH BUG. This rule used to read `padding-top:0`, which cancelled the clearance the fixed nav needs. On /shop the page title then sat UNDERNEATH the header at scroll position zero: the eye saw content cut off above, the thumb swiped down to reach it, and because the page was already at the top the browser fired pull-to-refresh instead. The clearance is restored below. */ .page-shell, .pdp-standalone{padding-top:var(--nav-clear)} .nav{background:var(--nav-bg); border-bottom:1px solid transparent} body:not(.home) .nav{border-bottom-color:var(--line); backdrop-filter:blur(14px)} /* ============================================================ HERO - warm off-white, not pink ============================================================ */ .hero-inner .wrap{ background:linear-gradient(120deg,#F7F4EE 0%,#F4F0E8 55%,#F0EBE1 100%) !important; } @media (max-width:860px){ .hero-inner .wrap{background:linear-gradient(165deg,#F7F4EE,#F0EBE1) !important} } .hero h1{color:#123C24} .hero h1 span{color:var(--head-accent)} .hero-sub{color:#4A5148} .hero .eyebrow{color:#6F7A70} /* ============================================================ HERO - the real Kendera product shot The photo already has a warm field with space on the left, so the card takes that same tone and the picture runs full-bleed inside it. No box around the image, no seam down the middle. ============================================================ */ .hero-inner .wrap{ background:#E4CFBB; position:relative; overflow:hidden; display:block; padding:0; min-height:clamp(400px,40vw,520px); } .hero-media{ position:absolute; inset:0; z-index:1; display:block; padding:0; height:auto; min-height:0; background:none !important; } .hero-media img{ width:100%; height:100%; max-height:none; object-fit:cover; object-position:72% center; border-radius:0; filter:none; display:block; } /* soften the left so the words sit on a clean field */ .hero-inner .wrap::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(100deg, #E4CFBB 0%, #E4CFBB 26%, rgba(228,207,187,.94) 40%, rgba(228,207,187,.55) 52%, rgba(228,207,187,0) 66%); } .hero-copy{ position:relative; z-index:3; padding:clamp(34px,4.4vw,64px); max-width:min(600px,56%); min-height:clamp(400px,40vw,520px); display:flex; flex-direction:column; justify-content:center; } .hero h1{color:#123C24} .hero h1 span{color:#135330} .hero-sub{color:#4B4340} .hero .eyebrow{color:#6E5A4C} .hero .btn-ghost{border-color:rgba(18,60,36,.30); color:#123C24} .hero .btn-ghost:hover{border-color:#135330; color:#135330} @media (max-width:860px){ .hero-inner .wrap{min-height:0; display:flex; flex-direction:column} .hero-media{position:relative; inset:auto; order:-1; height:clamp(210px,50vw,300px)} .hero-media img{object-position:center 42%} .hero-inner .wrap::after{display:none} .hero-copy{ max-width:none; min-height:0; padding:clamp(24px,5vw,34px); background:#E4CFBB; } } /* ============================================================ HERO - the photograph is the background One continuous warm field on every screen. On mobile the photo fills the whole card and the words sit over it, rather than a picture in a box with a separate panel underneath. ============================================================ */ .hero-inner .wrap{ background:#E4CFBB; min-height:clamp(440px,44vw,560px); } @media (max-width:860px){ .hero{padding-left:14px; padding-right:14px} .hero-inner .wrap{ display:block; min-height:0; border-radius:20px; overflow:hidden; position:relative; } /* photo fills the card, no seam, no separate block */ .hero-media{ position:absolute; inset:0; order:0; height:100%; padding:0; z-index:1; } .hero-media img{ width:100%; height:100%; object-fit:cover; object-position:68% 22%; } /* the field the words sit on, lifted from the photo itself */ .hero-inner .wrap::after{ content:""; display:block; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(228,207,187,0) 0%, rgba(228,207,187,.55) 26%, rgba(228,207,187,.93) 42%, #E4CFBB 55%); } .hero-copy{ position:relative; z-index:3; padding:clamp(180px,44vw,240px) 22px clamp(26px,6vw,34px); background:none; max-width:none; min-height:0; } .hero h1{font-size:clamp(1.85rem,7vw,2.4rem)} .hero-sub{font-size:.97rem} .cta-row{flex-direction:row; flex-wrap:wrap; gap:10px} .cta-row .btn{flex:1 1 auto; justify-content:center; padding:14px 20px} } @media (max-width:400px){ .hero-copy{padding-top:clamp(160px,46vw,200px)} .cta-row .btn{flex:1 1 100%} } /* ============================================================ FIX PASS — August 2026 Everything below was added or corrected in the bug pass. ============================================================ */ /* ---- the whole product tile is now a target ---- */ .card{ cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; } .card:active{transform:scale(.985)} .card:focus-visible{outline:2px solid var(--head-accent); outline-offset:3px} /* the buy control must still feel like its own thing inside the tile */ .card .add, .card .stepper, .card .card-name a, .card .card-media{cursor:pointer} /* "Select options" renders as a link, not a button — match the pill exactly */ a.add{display:inline-flex; align-items:center; justify-content:center; text-decoration:none} .add.is-out{opacity:.5; cursor:not-allowed; box-shadow:none} .add:active{transform:translateY(1px) scale(.98)} /* ---- toast: the quiet replacement for the cart drawer opening itself ---- */ .toast{ position:fixed; left:50%; bottom:24px; z-index:1400; transform:translate(-50%, 24px); display:flex; align-items:center; gap:10px; max-width:min(92vw, 420px); padding:12px 16px; border-radius:999px; background:var(--head); color:#fff; border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 42px rgba(10,30,18,.34); font-size:.9rem; font-weight:600; opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease; } .toast.on{opacity:1; transform:translate(-50%, 0); pointer-events:auto} .toast svg{width:18px; height:18px; flex:0 0 18px; fill:var(--accent)} .toast span{flex:1; min-width:0} .toast-act{ flex:0 0 auto; padding:5px 12px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:.8rem; font-weight:700; border:none; } @media (max-width:520px){ .toast{left:12px; right:12px; bottom:16px; max-width:none; transform:translateY(24px)} .toast.on{transform:translateY(0)} } @media (prefers-reduced-motion:reduce){ .toast{transition:opacity .18s ease} .card, .card:active{transition:none; transform:none} } /* ---- the originality portrait ---- */ .origin-media img{object-position:center 22%} /* ---- get directions ---- */ .store-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px} .btn-directions{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:.86rem; font-weight:700; box-shadow:0 4px 14px rgba(112,215,48,.24); } .btn-directions svg{width:17px; height:17px; fill:currentColor} .btn-call{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--head); font-size:.86rem; font-weight:700; } .btn-call svg{width:16px; height:16px; fill:currentColor} /* ============================================================ DARK THEME — designed, not inverted. This is a real second palette, not the light one flipped. The background is a deep warm-green charcoal rather than pure black, because pure black next to white product bottles produces glare. Product photography sits on its own light plate so white plastic never floats on a void. The brand green is lifted, because the original #70D730 fails contrast against dark surfaces. ============================================================ */ /* ============================================================ LIGHT ONLY — a deliberate decision, not an oversight. The dark palette has been removed. Declaring `light only` tells Chrome, Brave and Phoenix that this site has exactly one palette, and they must not repaint it. Every customer now sees the cream and green that were designed for these products: white bottles photograph correctly on warm off-white, and they glare on black. ============================================================ */ /* ---- slim trust line ---- Replaces the old four-cell trust section. Same proof, one line instead of a full screen, so the shelf arrives while the visitor still has patience. */ .trustline{ padding:14px 0; background:var(--bg-2); border-bottom:1px solid var(--line); } .trustline-row{ display:flex; align-items:center; justify-content:center; gap:8px 28px; flex-wrap:wrap; font-size:.82rem; color:var(--muted); } .trustline-item{display:inline-flex; align-items:center; gap:7px; white-space:nowrap} .trustline-item b{color:var(--head); font-weight:800} .trustline-item svg{width:15px; height:15px; fill:var(--head-accent); flex:0 0 15px} @media (max-width:640px){ .trustline{padding:11px 0} .trustline-row{ gap:6px 16px; font-size:.74rem; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; } .trustline-row::-webkit-scrollbar{display:none} } /* ---- advisor invitation, on the page itself ---- */ .advisor-invite{padding-top:0} .advice-panel{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,56px); align-items:center; padding:clamp(28px,4vw,52px); border-radius:calc(var(--radius) + 8px); background:var(--surface-2); border:1px solid var(--line); box-shadow:var(--shadow); } .advice-copy h2{margin:14px 0 0} .advice-copy p{margin-top:16px; color:var(--muted); max-width:52ch} .advice-points{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px} .advice-points li{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--text); } .advice-points svg{width:17px; height:17px; flex:0 0 17px; margin-top:3px; fill:var(--head-accent)} .advice-start{display:grid; gap:10px; align-content:center} .advice-label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:2px; } .advice-btn{ display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; text-align:left; padding:15px 18px; border-radius:14px; background:var(--surface); border:1px solid var(--line); color:var(--head); transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease; } .advice-btn b{display:block; font-family:var(--display); font-size:1rem; font-weight:700} .advice-btn small{display:block; margin-top:3px; font-size:.79rem; color:var(--muted); font-weight:400} .advice-btn svg{width:18px; height:18px; flex:0 0 18px; color:var(--head-accent)} .advice-btn:hover{border-color:var(--head-accent); transform:translateX(2px); box-shadow:0 8px 22px rgba(20,60,30,.10)} .advice-btn:active{transform:scale(.99)} .advice-plain{ margin-top:2px; padding:12px; border-radius:12px; background:transparent; border:1px dashed var(--line); color:var(--muted); font-size:.85rem; font-weight:600; } .advice-plain:hover{color:var(--head); border-color:var(--head-accent)} @media (max-width:900px){ .advice-panel{grid-template-columns:1fr; gap:26px} } @media (max-width:520px){ .advice-panel{padding:22px 18px; border-radius:var(--radius)} .advice-btn{padding:13px 15px} .advice-points li{font-size:.85rem} } /* ============================================================ TYPOGRAPHY PASS The complaint was that it read cramped. Three things cause that, and all three are fixed here: 1. Headings had one line-height (1.12) whatever their size. A 4.6rem display line and a 1.1rem sub-head need different leading — big type needs tighter, small type needs looser. 2. Nothing controlled measure. Lines ran past 75 characters, which is where the eye starts losing its place. 3. Vertical rhythm was set per-component, so spacing between a heading and its paragraph varied section to section. ============================================================ */ h1{line-height:1.04; letter-spacing:-.022em; text-wrap:balance} h2{line-height:1.1; letter-spacing:-.016em; text-wrap:balance} h3{line-height:1.28; letter-spacing:-.008em} h1{font-size:clamp(2.5rem, 5.6vw, 4.4rem)} h2{font-size:clamp(1.95rem, 3.4vw, 2.95rem)} h3{font-size:clamp(1.05rem, 1.5vw, 1.2rem)} /* measure — the single biggest readability lever */ p{max-width:64ch; text-wrap:pretty} .hero-sub{max-width:46ch} .page-intro{max-width:58ch} /* rhythm: one rule, applied everywhere, instead of per-section guesses */ .eyebrow + h1, .eyebrow + h2{margin-top:6px} h1 + p, h2 + p{margin-top:clamp(14px,1.6vw,20px)} h3 + p{margin-top:8px} .section{padding:clamp(72px, 8.5vw, 132px) 0} .section + .section{padding-top:clamp(56px, 7vw, 108px)} /* the eyebrow was doing too much work at too small a size */ .eyebrow{ font-size:.7rem; letter-spacing:.2em; margin-bottom:16px; font-weight:600; } /* body copy: slightly more air, and a colour with enough contrast to be comfortable rather than merely legible */ body{line-height:1.68; letter-spacing:.002em} /* numerals in prices and stats should align and never wrap oddly */ .price, .trustline-item b, .rating-num{font-variant-numeric:tabular-nums lining-nums} /* ============================================================ SHOP PAGE — chips instead of WooCommerce furniture ============================================================ */ .shop-chips{margin-top:clamp(22px,3vw,34px)} .shop-chips .chip{text-decoration:none} .shop-bar{ display:flex; justify-content:flex-end; align-items:center; margin-top:18px; } .shop-bar select{ appearance:none; -webkit-appearance:none; padding:11px 40px 11px 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--head); font-size:.86rem; font-weight:600; font-family:var(--body); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23135330' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; background-size:15px; } /* ============================================================ VARIATION SWATCHES WooCommerce's dropdown printed the colour as words. A shopper buying a cream chooses with their eyes. The native select is still there, still driving the sale — it is just no longer the thing anyone touches. ============================================================ */ /* THE ALIGNMENT BUG. The pills were allowed to shrink, so the labels were crushed - "Green" collapsed to "G" and "Dark Brown" wrapped onto two lines, which made the whole row look broken. Pills now size to their own content and never shrink; the labels never wrap; the row wraps instead. */ .swatches{ display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin:4px 0 12px; } .swatch{ flex:0 0 auto; min-width:0; display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 9px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--head); font-size:.86rem; font-weight:600; line-height:1.2; white-space:nowrap; transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease; } .swatch-name{white-space:nowrap; overflow:visible} .swatch-dot{ width:22px; height:22px; border-radius:50%; background:var(--surface-2); box-shadow:inset 0 0 0 1px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.14); flex:0 0 22px; } /* on a narrow phone, stack them full width so long formula names always have room rather than fighting for it */ @media (max-width:430px){ .swatches{flex-direction:column; align-items:stretch; gap:8px} .swatch{width:100%; justify-content:flex-start} } .swatch:hover{border-color:var(--head-accent)} .swatch.on{ border-color:var(--head); box-shadow:0 0 0 3px var(--ring-bg); transform:translateY(-1px); } .swatch.is-off{opacity:.38; cursor:not-allowed} .swatch.is-off .swatch-dot{filter:grayscale(1)} .swatch-chosen{ font-size:.86rem; color:var(--muted); min-height:1.3em; margin-bottom:14px; } .swatch-chosen b{color:var(--head); font-weight:700} @keyframes swatchNudge{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 45%{transform:translateX(5px)} 70%{transform:translateX(-3px)} } .swatches.nudge{animation:swatchNudge .42s ease} /* the buy button must not look ready before a choice is made */ /* WooCommerce's own variation furniture, tidied */ .variations{width:100%; border:none; margin:0} .variations tr, .variations th, .variations td{display:block; width:100%; padding:0; border:none; text-align:left} .variations th.label{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:10px; } .variations .reset_variations{ display:inline-block; margin-top:2px; font-size:.8rem; color:var(--muted); text-decoration:underline; } .woocommerce-variation-price{margin:6px 0 14px; font-size:1.5rem; font-weight:700; color:var(--head)} .woocommerce-variation-availability{margin-bottom:10px; font-size:.86rem; color:var(--muted)} /* ============================================================ COLOUR DOTS ON THE TILE ============================================================ */ .card-dots{ display:flex; align-items:center; gap:6px; margin:2px 0 12px; } .card-dot{ width:15px; height:15px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.12); } .card-dot-more{ font-size:.72rem; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; margin-left:2px; } /* the page must not scroll behind an open menu */ body.menu-open{overflow:hidden} /* ============================================================ THE VARIABLE BUY BOX ============================================================ */ .pdp-buy-var{margin:6px 0 20px} .var-row{margin-bottom:18px} .var-label{ display:block; margin-bottom:10px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; } .var-price{ margin:0 0 4px; font-size:1.6rem; font-weight:700; color:var(--head); font-variant-numeric:tabular-nums; min-height:1.2em; } .var-stock{margin:0 0 14px; font-size:.85rem; color:var(--tag-low, #B8791F)} .var-stock:empty{margin:0} .pdp-buy-var .swatch-chosen{margin:10px 0 0} /* the button states the situation plainly */ .add.is-waiting{ opacity:.45; cursor:not-allowed; box-shadow:none; } /* nothing sellable — say so, and still offer a way to buy */ .pdp-buy-empty{ padding:20px; border-radius:var(--radius); border:1px dashed var(--line); background:var(--surface-2); margin-bottom:20px; } .pdp-buy-empty p{margin:0 0 14px; color:var(--muted); font-size:.92rem} .pdp-buy-admin{ margin:14px 0 0 !important; padding-top:12px; border-top:1px solid var(--line); font-size:.78rem !important; color:var(--tag-low, #B8791F) !important; } /* ---- the buy control on the product page ---- Same behaviour as a shelf tile: Add, then it becomes the counter. */ .pdp-buy .add{width:100%} .stepper-lg{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:5px; border-radius:999px; border:1.5px solid var(--accent); background:var(--surface); } .stepper-lg button{ width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:700; line-height:1; color:var(--head); background:transparent; border:none; } .stepper-lg button:active{background:var(--surface-2)} .stepper-lg button:disabled{opacity:.4} .stepper-lg span{ flex:1; text-align:center; font-size:1.05rem; font-weight:700; color:var(--head); font-variant-numeric:tabular-nums; } /* ---- gallery arrows ---- */ .pdp-main{position:relative} .pdp-main img{transition:opacity .18s ease} .pdp-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; z-index:3; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.94); color:var(--head); border:1px solid var(--line); box-shadow:0 4px 14px rgba(18,60,36,.14); } .pdp-arrow svg{width:22px; height:22px} .pdp-prev{left:10px} .pdp-next{right:10px} .pdp-arrow:active{transform:translateY(-50%) scale(.93)} .pdp-count{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); padding:5px 13px; border-radius:999px; z-index:3; background:rgba(255,255,255,.94); border:1px solid var(--line); font-size:.76rem; font-weight:700; color:var(--head); font-variant-numeric:tabular-nums; } @media (min-width:961px){ .pdp-arrow{width:50px; height:50px} .pdp-prev{left:14px} .pdp-next{right:14px} } /* ---- the WebAid credit ---- */ .foot-bar .by{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:inherit; transition:opacity .18s ease; } .foot-bar .by:hover{opacity:.72} .by-mark{width:22px; height:22px; flex:0 0 22px} /* ============================================================ ABOUT PAGE ============================================================ */ .about-page section{margin-bottom:clamp(64px,8vw,112px)} .about-page section:last-child{margin-bottom:clamp(48px,6vw,88px)} .about-head h1{max-width:18ch} .about-lede{ margin-top:20px; font-size:clamp(1.02rem,1.6vw,1.14rem); color:var(--muted); max-width:60ch; } .about-standard-inner{max-width:62ch} .shelf-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:clamp(26px,3.5vw,42px); } .shelf-card{ padding:24px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); } .shelf-num{ display:block; margin-bottom:12px; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--head-accent); font-weight:700; } .shelf-card h3{margin-bottom:9px} .shelf-card p{font-size:.92rem; color:var(--muted); margin-bottom:16px} .shelf-link{font-size:.85rem; font-weight:700; color:var(--head); text-decoration:none} .shelf-link:hover{color:var(--head-accent)} .about-split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,64px); align-items:center; } .about-media img{object-position:center 22%} .about-visit-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center; padding:clamp(26px,4vw,52px); border-radius:calc(var(--radius) + 8px); background:var(--surface-2); border:1px solid var(--line); } .about-body{max-width:68ch} .about-body p{margin-bottom:16px} .about-cta{text-align:center} .about-cta-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px; } @media (max-width:860px){ .about-split, .about-visit-inner{grid-template-columns:1fr} .about-split .about-media{order:2} } /* admin-only badge explaining why a product cannot be bought */ .card-flag{ display:inline-block; margin-bottom:8px; padding:3px 9px; border-radius:999px; background:#FDF0D9; border:1px solid #E8C88A; color:#8A5A12; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .add-ask{background:var(--surface); border:1.5px solid var(--line); color:var(--head); box-shadow:none} /* admin-only shelf report */ /* ============================================================ STICKY BUY BAR ============================================================ */ .pdp-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:1200; transform:translateY(110%); transition:transform .26s cubic-bezier(.2,.7,.3,1); background:rgba(251,249,244,.97); backdrop-filter:blur(12px); border-top:1px solid var(--line); box-shadow:0 -10px 30px rgba(18,60,36,.10); padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom)); pointer-events:none; } .pdp-sticky.on{transform:translateY(0); pointer-events:auto} .pdp-sticky-inner{ max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:14px; } .pdp-sticky .add{flex:0 0 auto; white-space:nowrap} /* advisor bubble clearance is handled by .has-sticky-buy, further down */ @media (prefers-reduced-motion:reduce){ .pdp-sticky{transition:none} } /* ---- sticky bar: name, then price, then the button ---- */ /* ============================================================ PRODUCT PAGE — final layout Photograph first, then the name, then the price. The band of empty cream above the image is trimmed so the bottle is the first thing on screen rather than the last thing before the fold. ============================================================ */ .pdp-standalone{padding-top:calc(var(--nav-clear) * .46)} .pdp-wrap{padding-top:clamp(10px,1.4vw,18px)} .pdp-info .pdp-cat{ display:inline-block; margin-bottom:8px; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-decoration:none; } .pdp-info .pdp-cat:hover{color:var(--head-accent)} .pdp-info .pdp-name{ margin-bottom:10px; font-size:clamp(1.5rem, 4.4vw, 2.1rem); line-height:1.16; letter-spacing:-.012em; max-width:24ch; text-wrap:balance; } /* The price must not read as a continuation of the name — different family, different weight, different colour. */ .pdp-info .pdp-priceline{margin-top:2px; margin-bottom:16px} .pdp-info .pdp-price{ font-family:var(--body); font-size:clamp(1.45rem, 3.4vw, 1.8rem); font-weight:800; color:var(--head-accent); letter-spacing:-.01em; font-variant-numeric:tabular-nums lining-nums; } @media (max-width:620px){ .pdp-standalone{padding-top:calc(var(--nav-clear) * .36)} .pdp-info .pdp-name{font-size:1.5rem} .pdp-info .pdp-price{font-size:1.5rem} } /* ============================================================ STICKY BAR — stacked, and dominant again The side-by-side version was a mistake: on a 390px phone the button claimed what it needed and the price was left in a column so narrow the naira sign wrapped onto its own line. Name and price now share one quiet line; the button gets the full width underneath, at the same weight as the real one further up the page. A buy button people can ignore is a buy button that isn't working. ============================================================ */ .pdp-sticky-inner{ display:block; max-width:1240px; margin:0 auto; } .pdp-sticky-line{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:8px; } .pdp-sticky-line b{ flex:1 1 auto; min-width:0; font-family:var(--body); font-size:.82rem; font-weight:600; color:var(--muted); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pdp-sticky-line span, .pdp-sticky-line span *{ white-space:nowrap; } .pdp-sticky-line span{ flex:0 0 auto; font-size:1.05rem; font-weight:800; color:var(--head); font-variant-numeric:tabular-nums lining-nums; } .pdp-sticky .add{ display:block; width:100%; padding:16px 24px; font-size:.95rem; } @media (min-width:961px){ .pdp-sticky-inner{ display:flex; align-items:center; gap:24px; } .pdp-sticky-line{flex:1; margin-bottom:0} .pdp-sticky .add{width:auto; min-width:260px; padding:15px 34px} } /* ---- the price must not read as more of the name ---- */ .pdp-info .pdp-price{ display:inline-block; font-family:var(--body); font-size:clamp(1.5rem, 3.6vw, 1.9rem); font-weight:800; color:#1E7A3C; letter-spacing:-.01em; font-variant-numeric:tabular-nums lining-nums; } /* ---- the name expands to fit; it is never clamped on a product page ---- */ .pdp-info .pdp-name{ display:block; max-width:24ch; overflow:visible; -webkit-line-clamp:none; overflow-wrap:break-word; } /* ---- every tile the same height, whatever it contains ---- */ .card{height:100%; display:flex; flex-direction:column} .card-media{flex:0 0 auto} .card-body{display:flex; flex-direction:column; flex:1 1 auto; min-height:0} .card-name{margin-bottom:6px} .card-dots{flex:0 0 auto} .card-foot{margin-top:auto; padding-top:12px} /* ============================================================ GALLERY THUMBNAILS — back into the flow Floating them over the bottom of the photograph covered the product and left the gallery's real height a guess. They now sit under the image, in the flow, where they cannot overlap anything and the name below always has room. ============================================================ */ @media (max-width:900px){ .pdp-thumbs{ position:static; left:auto; right:auto; bottom:auto; justify-content:flex-start; margin-top:10px; padding:0; gap:8px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; } .pdp-thumbs::-webkit-scrollbar{display:none} .pdp-thumb{ width:56px; height:56px; flex:0 0 56px; background:var(--surface); box-shadow:none; } .pdp-gallery{position:static; margin-bottom:16px} .pdp-main{margin-bottom:0} } /* the name is the first thing under the photograph, and it shows */ .pdp-info{position:relative; z-index:2} .pdp-info .pdp-name{ display:block; margin:0 0 10px; min-height:0; max-height:none; } .pdp-info .pdp-cat{display:inline-block} /* ============================================================ ADVISOR BUBBLE vs STICKY BAR They live in the same corner. When the buy bar is up, the bubble moves above it - a shopper with a question should never have to hunt for the person who can answer it. ============================================================ */ body.has-sticky-buy .advisor-fab{ bottom:112px; transition:bottom .26s cubic-bezier(.2,.7,.3,1); } body.has-sticky-buy .advisor-card{bottom:180px} @media (max-width:620px){ body.has-sticky-buy .advisor-fab{bottom:104px} body.has-sticky-buy .advisor-card{bottom:168px} } .advisor-fab{transition:bottom .26s cubic-bezier(.2,.7,.3,1)} /* ============================================================ THUMBNAILS BACK INSIDE THE PHOTOGRAPH On a phone they belong on the image, not stacked beneath it: it keeps the product large and the page short. The markup bug that made this look broken before is fixed, so the overlay is safe again. ============================================================ */ @media (max-width:900px){ .pdp-gallery{position:relative} .pdp-thumbs{ position:absolute; left:0; right:0; bottom:14px; justify-content:center; z-index:4; margin:0; padding:0 12px; gap:8px; overflow:visible; } .pdp-thumb{ width:52px; height:52px; flex:0 0 52px; border-radius:10px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1.5px solid rgba(19,83,48,.16); box-shadow:0 3px 12px rgba(19,83,48,.16); } .pdp-thumb.on{ border-color:var(--head-accent); box-shadow:0 0 0 2px rgba(112,215,48,.34), 0 3px 12px rgba(19,83,48,.18); } /* the counter moves up so it never collides with the strip */ .pdp-count{bottom:78px} } /* ============================================================ SIMPLER TILES Photograph, name, price, button. Nothing else competing. ============================================================ */ .card-body{padding-top:14px; gap:0} .card-cat{ display:block; margin-bottom:6px; font-size:.6rem; letter-spacing:.18em; } .card-name{ -webkit-line-clamp:2; font-size:.98rem; line-height:1.28; min-height:0; margin-bottom:8px; } .card-dots{margin:0 0 10px} .card-foot{margin-top:auto; padding-top:4px} @media (max-width:620px){ .card-name{font-size:.92rem} .card-body{padding-top:12px} } /* ============================================================ THE OVERLAP The photograph was escaping its frame. On a phone .pdp-main carries a max-height, but nothing clipped what spilled past it — so the image kept drawing downward while the layout believed the gallery had already ended. The category and the product name were then painted underneath it, which is why "SKINCARE" appeared written across the bottle. The frame now clips its contents, and the name sits clear of it. The thumbnails stay on the photograph, as you wanted. ============================================================ */ @media (max-width:900px){ .pdp-gallery{ position:relative; margin-bottom:18px; overflow:visible; } .pdp-main{ position:relative; overflow:hidden; /* the fix */ max-height:none; aspect-ratio:1 / 1; border-radius:var(--radius); background:var(--surface); } .pdp-main img{ width:100%; height:100%; object-fit:contain; padding:10px; } .pdp-info{margin-top:0; padding-top:0} } @media (max-width:620px){ .pdp-main{aspect-ratio:4 / 5} } /* ============================================================ THE OVERLAP — cause found The thumbnails were siblings of the image frame, positioned absolutely against .pdp-gallery. But .pdp-gallery is targeted by eight competing rules across this stylesheet — sticky, static and relative at different widths — so their containing block depended on which one happened to win. When a static one won, they anchored to an ancestor further up and the gallery's box no longer described what was on screen. That is how the category line ended up drawn across the bottle. They now sit inside .pdp-main, which is position:relative unconditionally. The containing block is no longer a matter of cascade order. ============================================================ */ .pdp-gallery{position:static} .pdp-main{position:relative; overflow:hidden} @media (max-width:900px){ .pdp-gallery{position:static; margin-bottom:20px} .pdp-thumbs{ position:absolute; left:0; right:0; bottom:14px; z-index:4; display:flex; justify-content:center; gap:8px; margin:0; padding:0 12px; } .pdp-thumb{ width:52px; height:52px; flex:0 0 52px; border-radius:10px; background:rgba(255,255,255,.94); backdrop-filter:blur(6px); border:1.5px solid rgba(19,83,48,.16); box-shadow:0 3px 12px rgba(19,83,48,.16); } .pdp-thumb.on{ border-color:var(--head-accent); box-shadow:0 0 0 2px rgba(112,215,48,.34), 0 3px 12px rgba(19,83,48,.18); } .pdp-count{bottom:78px} .pdp-info{margin-top:0} } @media (min-width:901px){ .pdp-gallery{position:sticky; top:88px} .pdp-thumbs{position:static; margin-top:12px} } /* ============================================================ "GOES WELL WITH" — a suggestion, not a second shop These tiles were inheriting the full shelf card: a tall portrait image, a three-line name, a large button. Beside a product the customer has already chosen, that competes rather than suggests. Square images, tighter type, smaller controls — present enough to notice, quiet enough to ignore. ============================================================ */ .pdp-more{margin-top:clamp(38px,5vw,64px)} .pdp-more > p{margin-bottom:18px; color:var(--muted); font-size:.9rem} .pdp-more .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:0; } .pdp-more .card-media{aspect-ratio:1 / 1} .pdp-more .card-media img{object-fit:contain; padding:8px} .pdp-more .card-body{padding:12px 13px 13px} .pdp-more .card-cat{font-size:.56rem; margin-bottom:5px} .pdp-more .card-name{ font-size:.86rem; line-height:1.25; -webkit-line-clamp:2; margin-bottom:6px; } .pdp-more .card-dots{margin:0 0 8px} .pdp-more .card-dot{width:12px; height:12px} .pdp-more .price{font-size:.98rem} .pdp-more .card-foot{padding-top:8px; gap:8px} .pdp-more .add{ padding:9px 14px; font-size:.74rem; width:100%; text-align:center; } .pdp-more .card-flag{font-size:.58rem; padding:2px 7px} @media (min-width:901px){ .pdp-more .grid{grid-template-columns:repeat(2, minmax(0,1fr)); max-width:620px} } @media (max-width:380px){ .pdp-more .card-name{font-size:.8rem} .pdp-more .add{padding:9px 10px; font-size:.7rem} } /* ============================================================ CHECKOUT Monnify draws its own payment page and we cannot touch it. Everything up to the redirect is ours, and it is where a Nigerian shopper decides whether this is a real shop. ============================================================ */ .kendera-hidden, .woocommerce-checkout .kendera-hidden{display:none !important} .woocommerce-checkout .col2-set, .woocommerce-checkout .col-1, .woocommerce-checkout .col-2{width:100%; float:none; margin:0} .woocommerce-checkout h3{ font-family:var(--display); font-size:1.15rem; color:var(--head); margin:0 0 16px; } .woocommerce-checkout .form-row{ display:flex; flex-direction:column; margin:0 0 16px; padding:0; width:100%; } .woocommerce-checkout .form-row label{ order:-1; margin-bottom:7px; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; } .woocommerce-checkout .form-row .required{color:var(--head-accent); text-decoration:none} .woocommerce-checkout .form-row .description{ margin-top:6px; font-size:.78rem; color:var(--muted); } .woocommerce-checkout input.input-text, .woocommerce-checkout textarea, .woocommerce-checkout select{ width:100%; padding:14px 16px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--head); font-family:var(--body); font-size:.95rem; line-height:1.4; transition:border-color .16s ease, box-shadow .16s ease; } .woocommerce-checkout input.input-text:focus, .woocommerce-checkout textarea:focus{ outline:none; border-color:var(--head-accent); box-shadow:0 0 0 3px var(--ring-bg); } .woocommerce-checkout textarea{min-height:96px; resize:vertical} .woocommerce-checkout ::placeholder{color:#9AA79B} /* ---- our own dropdown ---- */ .kd-select{position:relative; width:100%} .kd-select-native{ position:absolute !important; opacity:0; pointer-events:none; width:1px; height:1px; padding:0; margin:0; border:0; } .kd-select-btn{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:52px; padding:14px 16px; text-align:left; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--head); font-family:var(--body); font-size:.95rem; } .kd-select-btn svg{width:18px; height:18px; flex:none; color:var(--head-accent); transition:transform .18s ease} .kd-select.on .kd-select-btn{border-color:var(--head-accent); box-shadow:0 0 0 3px var(--ring-bg)} .kd-select.on .kd-select-btn svg{transform:rotate(180deg)} .kd-placeholder{color:#9AA79B} .kd-select-list{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40; max-height:280px; overflow-y:auto; padding:6px; border-radius:14px; background:var(--surface); border:1px solid var(--line); box-shadow:0 20px 46px rgba(18,60,36,.18); display:none; } .kd-select.on .kd-select-list{display:block} .kd-option{ display:block; width:100%; text-align:left; padding:12px 13px; border-radius:9px; font-size:.92rem; color:var(--head); background:transparent; border:none; } .kd-option:hover{background:var(--surface-2)} .kd-option.on{background:var(--ring-bg); font-weight:700} /* ---- order review ---- */ .woocommerce-checkout-review-order{ margin-top:26px; padding:20px; border-radius:calc(var(--radius) + 4px); background:var(--surface-2); border:1px solid var(--line); } .woocommerce-checkout-review-order table{width:100%; border-collapse:collapse} .woocommerce-checkout-review-order th, .woocommerce-checkout-review-order td{ padding:10px 0; border-bottom:1px solid var(--line); font-size:.9rem; text-align:left; } .woocommerce-checkout-review-order tfoot th{font-weight:700; color:var(--head)} .woocommerce-checkout-review-order td{text-align:right; color:var(--head)} .woocommerce-checkout-review-order .order-total td, .woocommerce-checkout-review-order .order-total th{ font-size:1.05rem; font-weight:800; border-bottom:none; padding-top:14px; } /* ---- payment methods ---- */ .woocommerce-checkout #payment{background:transparent; border-radius:0} .woocommerce-checkout #payment ul.payment_methods{ padding:0; margin:0 0 16px; list-style:none; border:none; } .woocommerce-checkout #payment ul.payment_methods li{ padding:14px 16px; margin-bottom:10px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); } .woocommerce-checkout #payment ul.payment_methods li label{ font-size:.95rem; font-weight:700; color:var(--head); } .woocommerce-checkout #payment .payment_box{ background:transparent; padding:10px 0 0; margin:8px 0 0; font-size:.85rem; color:var(--muted); } .woocommerce-checkout #payment .payment_box::before{display:none} .woocommerce-checkout #place_order{ width:100%; padding:17px 24px; border-radius:999px; background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent); font-family:var(--body); font-size:1rem; font-weight:800; box-shadow:0 6px 20px rgba(112,215,48,.28); } .checkout-reassure{ display:flex; align-items:flex-start; gap:10px; margin:16px 0 0; font-size:.8rem; color:var(--muted); line-height:1.55; } .checkout-reassure svg{width:17px; height:17px; flex:none; margin-top:2px; fill:var(--head-accent)} @media (min-width:961px){ .woocommerce-checkout .col2-set{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:start; } } /* ============================================================ THE MENU Six entries. Shop expands in place rather than sending the customer to another screen and back. ============================================================ */ /* ---- trigger: the icon, nothing else ---- */ /* * Hidden on desktop. The nav bar already lists every destination there, so * a hamburger beside them is a second door to the same room - and the panel * it opens covers the links a visitor can already see. */ .burger{ display:none; align-items:center; justify-content:center; width:46px; height:46px; padding:0; border-radius:13px; border:1px solid var(--line); background:var(--surface); } @media (max-width:960px){ .burger{display:inline-flex} } .burger-bars{ position:relative; display:block; width:20px; height:14px; } .burger-bars span{ position:absolute; left:0; display:block; width:100%; height:2px; border-radius:2px; background:var(--head); transition:transform .24s cubic-bezier(.2,.7,.3,1), opacity .16s ease; } .burger-bars span:nth-child(1){top:0} .burger-bars span:nth-child(2){top:6px} .burger-bars span:nth-child(3){top:12px} /* * THE DISFIGURED X. * * The bars were being rotated while still spaced apart, so the two strokes * crossed off-centre and the shape read as a lopsided asterisk. They now * travel to the exact middle first, then rotate about that shared point, * which is the only way the two strokes meet cleanly. */ .burger.on .burger-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger.on .burger-bars span:nth-child(2){opacity:0; transform:scaleX(.4)} .burger.on .burger-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ---- panel shell ---- */ .nav-panel{display:flex; flex-direction:column; background:var(--bg)} .panel-inner{ display:flex; flex-direction:column; min-height:100svh; padding:calc(var(--nav-h, 66px) + 14px) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom)); } /* ---- the six rows ---- */ /* * The rows start at the top, not the bottom. * * margin-top:auto was pushing them into the thumb zone, which is sound * advice for a long list but left a screen of empty cream above "Home" on * a menu of six short entries. Emptiness reads as something missing. */ .panel-nav{display:flex; flex-direction:column; margin-top:0; padding-top:6px} .panel-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:58px; padding:15px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--head); background:transparent; text-align:left; font-family:var(--display); font-weight:700; font-size:clamp(1.3rem, 5vw, 1.6rem); line-height:1.15; } .panel-row:active{opacity:.6} .panel-chev{width:22px; height:22px; color:var(--head-accent); transition:transform .24s ease} .panel-group.on .panel-chev{transform:rotate(180deg)} /* ---- VIP: the one entry that should look like a reward ---- */ .panel-row-vip{ margin-top:10px; border-bottom:none; padding:16px 18px; border-radius:16px; background:linear-gradient(135deg, #17351F 0%, #0F2416 100%); color:#F4EAD0; font-size:clamp(1.05rem, 4.2vw, 1.22rem); cursor:default; box-shadow:0 8px 24px rgba(15,36,22,.22); } .panel-vip-label{display:inline-flex; align-items:center; gap:10px} .panel-row-vip .crown{width:22px; height:22px; fill:#E3C77A; flex:none} .panel-soon{ font-family:var(--body); font-style:normal; font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:rgba(227,199,122,.16); color:#E3C77A; border:1px solid rgba(227,199,122,.4); } /* ---- VIP in the desktop bar ---- */ .nav-vip{ display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; background:linear-gradient(135deg, #17351F 0%, #0F2416 100%); color:#F4EAD0; cursor:default; font-size:.78rem; font-weight:700; letter-spacing:.02em; } .nav-vip .crown{width:15px; height:15px; fill:#E3C77A; flex:none} /* ---- Shop's sub-list ---- */ /* * `display` beats the hidden attribute, so this rule was holding the * sub-list permanently open no matter what the toggle did. */ .panel-sub[hidden]{display:none} .panel-sub{ display:flex; flex-direction:column; padding:4px 0 10px 2px; border-bottom:1px solid var(--line); animation:panelSub .22s cubic-bezier(.2,.7,.3,1); } @keyframes panelSub{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}} .panel-subrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:11px 14px; margin-bottom:4px; border-radius:11px; text-decoration:none; background:var(--surface); color:var(--head); font-family:var(--body); font-size:.95rem; font-weight:600; } .panel-subrow em{ font-style:normal; font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums; } .panel-subrow:active{background:var(--surface-2)} .panel-subrow-all{color:var(--head-accent); font-weight:700} /* ---- advisor + contact ---- */ .panel-advice{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; min-height:56px; margin-top:22px; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:var(--surface-2); color:var(--head); } .panel-advice-icon svg{width:26px; height:26px; color:var(--head-accent)} .panel-advice b{display:block; font-size:.94rem; font-weight:700; line-height:1.25} .panel-advice small{display:block; margin-top:3px; font-size:.78rem; color:var(--muted); line-height:1.4} .panel-foot{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .panel-call, .panel-map{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 16px; border-radius:999px; font-size:.83rem; font-weight:700; text-decoration:none; } .panel-call{background:var(--accent); color:var(--accent-ink)} .panel-map{border:1px solid var(--line); background:var(--surface); color:var(--head)} .panel-call svg, .panel-map svg{width:15px; height:15px; fill:currentColor} .panel-address{ flex:1 0 100%; margin:4px 0 0; max-width:none; font-size:.76rem; color:var(--muted); line-height:1.5; } /* a shade we could not match still gets a dot, just a neutral one */ .card-dot-unknown{ background:linear-gradient(135deg,#E8E4DA 45%,#CFC9BC 55%); } @media (min-width:961px){ .panel-inner{min-height:0; padding-top:calc(var(--nav-h, 66px) + 18px)} .panel-nav{margin-top:0} } /* ============================================================ VIP WAITLIST ============================================================ */ /* * THE SITE-BREAKING BUG. * * `display` beats the hidden attribute. This overlay is fixed across the * whole viewport, so with display:flex still applied it sat invisibly on * top of every page at opacity 0 - swallowing every tap and blocking all * scrolling. The site looked normal and responded to nothing. * * Two guards now: the attribute is honoured, and pointer events are off * until the panel is actually open. Either alone would be enough; both * means a future edit cannot resurrect this. */ .vip-veil[hidden]{display:none} .vip-veil:not(.on){pointer-events:none} .vip-veil{ position:fixed; inset:0; z-index:1500; display:flex; align-items:flex-end; justify-content:center; padding:0; background:rgba(8,20,12,.62); opacity:0; transition:opacity .26s ease; overflow-y:auto; overscroll-behavior:contain; } .vip-veil.on{opacity:1; pointer-events:auto} .vip-card{ position:relative; width:100%; max-width:520px; padding:34px 24px calc(28px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; background:linear-gradient(170deg, #17351F 0%, #0E2114 62%, #0B1B10 100%); color:#F1E9D6; transform:translateY(24px); transition:transform .3s cubic-bezier(.2,.7,.3,1); box-shadow:0 -20px 60px rgba(0,0,0,.4); } .vip-veil.on .vip-card{transform:none} .vip-close{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); } .vip-close span{position:absolute; inset:0} .vip-close span::before, .vip-close span::after{ content:""; position:absolute; top:50%; left:50%; width:14px; height:2px; border-radius:2px; background:#E9DFC6; } .vip-close span::before{transform:translate(-50%,-50%) rotate(45deg)} .vip-close span::after{transform:translate(-50%,-50%) rotate(-45deg)} .vip-crown{display:inline-flex; margin-bottom:14px} .vip-crown .crown{width:34px; height:34px; fill:#E3C77A} .vip-eyebrow{ display:block; margin-bottom:10px; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:#C9B88A; font-weight:700; } .vip-card h2{ font-family:var(--display); color:#FBF6E9; font-size:clamp(1.7rem, 6.4vw, 2.1rem); line-height:1.1; margin:0 0 12px; letter-spacing:-.015em; } .vip-lede{ margin:0 0 18px; max-width:42ch; font-size:.94rem; line-height:1.6; color:#CFD9C9; } .vip-list{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px} .vip-list li{ position:relative; padding-left:24px; font-size:.88rem; line-height:1.5; color:#E4DCC7; } .vip-list li::before{ content:""; position:absolute; left:2px; top:.55em; width:8px; height:8px; border-radius:50%; background:#E3C77A; } .vip-form label{ display:block; margin:0 0 6px; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#A9BCA6; font-weight:700; } .vip-form input{ width:100%; margin-bottom:14px; padding:14px 16px; border-radius:12px; border:1.5px solid rgba(233,223,198,.22); background:rgba(255,255,255,.06); color:#FBF6E9; font-family:var(--body); font-size:.97rem; } .vip-form input::placeholder{color:rgba(233,223,198,.42)} .vip-form input:focus{ outline:none; border-color:#E3C77A; box-shadow:0 0 0 3px rgba(227,199,122,.18); } .vip-submit{ width:100%; padding:16px 24px; border-radius:999px; background:#E3C77A; color:#14301C; border:none; font-family:var(--body); font-size:.98rem; font-weight:800; box-shadow:0 8px 22px rgba(227,199,122,.24); } .vip-submit:disabled{opacity:.6} .vip-small{ margin:14px 0 0; font-size:.76rem; line-height:1.55; color:#93A691; } .vip-done{text-align:center; padding:12px 0 6px} .vip-done svg{width:44px; height:44px; fill:#E3C77A; margin-bottom:12px} .vip-done h3{font-family:var(--display); color:#FBF6E9; font-size:1.3rem; margin:0 0 8px} .vip-done p{margin:0; font-size:.9rem; color:#CFD9C9} /* the VIP entries are buttons now, not dead text */ .nav-vip, .panel-row-vip{cursor:pointer; border:none} .nav-vip:active, .panel-row-vip:active{transform:scale(.985)} @media (min-width:620px){ .vip-veil{align-items:center} .vip-card{border-radius:24px; padding:40px 36px} }