/* ============================================================ VELMORA DIAMONDS — Global Design System Palette: #FFFFFF / #F9F9F9 / #C5A880 / #1A1A1A ============================================================ */ /* ---------- Fonts ---------- Loaded via in each document : Playfair Display (headings) · Cormorant Garamond (display alt) · Inter (UI) Local/system fallbacks are declared in the --serif / --sans stacks below. */ :root{ /* Colour */ --white:#FFFFFF; --bg-soft:#F9F9F9; --gold:#C5A880; --gold-dark:#B08F63; --gold-deep:#9A7A4F; --gold-tint:#F3EBDF; --gold-wash:#FBF7F1; --ink:#1A1A1A; --ink-70:#4A4A4A; --ink-55:#6E6E6E; --ink-40:#9A9A9A; --line:#E6E6E6; --line-soft:#F0EEEA; --danger:#C0392B; --ok:#2E7D5B; /* Type */ --serif:'Playfair Display','Cormorant Garamond',Georgia,'Times New Roman',serif; --serif-alt:'Cormorant Garamond','Playfair Display',Georgia,serif; --sans:'Inter','Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; /* Layout */ --maxw:1400px; --gutter:40px; --radius:2px; --radius-md:6px; /* Motion */ --ease:cubic-bezier(.22,.61,.36,1); --dur:.42s; --shadow-sm:0 1px 3px rgba(26,26,26,.06); --shadow-md:0 6px 26px rgba(26,26,26,.08); --shadow-lg:0 18px 60px rgba(26,26,26,.13); --header-h:150px; } *,*::before,*::after{box-sizing:border-box;} /* [hidden] must always win — a later `display:grid/flex` rule silently defeats the browser default and leaves hidden panels on screen. */ [hidden]{display:none!important;} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px);} /* Smooth scrolling is opt-in per interaction (see .js anchor handling) rather than global, so programmatic scrollTo/scroll restoration remains instant and accurate. */ html:focus-within{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important;} } body{ margin:0;background:var(--white);color:var(--ink); font-family:var(--sans);font-size:15px;line-height:1.65; font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } body.no-scroll{overflow:hidden;} img,svg,video{max-width:100%;display:block;} img{height:auto;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;} input,select,textarea{font:inherit;color:inherit;} h1,h2,h3,h4,h5{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:.01em;color:var(--ink);} p{margin:0;} ul{margin:0;padding:0;list-style:none;} :focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px;} ::selection{background:var(--gold);color:#fff;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);} .wrap-narrow{max-width:1140px;margin:0 auto;padding:0 var(--gutter);} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0;} .skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--ink);color:#fff; padding:12px 22px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;} .skip-link:focus{left:12px;top:12px;} /* ============================================================ ANNOUNCEMENT MARQUEE ============================================================ */ /* max-width + contain stops the (deliberately very wide) marquee track from inflating the document's scrollWidth — the track is absolute and the announce bar clips it, so html/body stay overflow-x:visible. */ .announce{background:var(--gold);color:#fff;overflow:hidden;position:relative;height:40px; max-width:100%;width:100%; display:flex;align-items:center;} /* Taken out of flow: while the track was `position:static` its 3400px width inflated documentElement.scrollWidth on every page, so the whole document reported a horizontal overflow. Absolute positioning keeps the animation identical but stops the track contributing to layout width. */ .announce__track{position:absolute;top:0;left:0;height:100%; display:flex;align-items:center;width:max-content; animation:marquee 38s linear infinite;will-change:transform;} .announce:hover .announce__track{animation-play-state:paused;} .announce__seg{white-space:nowrap;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase; font-weight:700;padding-right:0;text-shadow:0 1px 2px rgba(0,0,0,.18);} .announce__seg span{padding:0 30px;} @keyframes marquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}} /* ============================================================ HEADER (logo size identical on every page — never shrinks) ============================================================ */ .site-header{position:sticky;top:0;z-index:900;background:#fff; box-shadow:0 1px 0 rgba(230,230,230,.9);transition:box-shadow .3s var(--ease);} .site-header.is-stuck{box-shadow:0 4px 24px rgba(26,26,26,.07);} /* z-index:2 puts the whole top row (and therefore the currency dropdown) above the nav row that follows it in the DOM. Without it the later sibling wins on paint order and "INQUIRY" showed through the menu. */ .header__main{position:relative;z-index:2;display:flex;align-items:center;justify-content:center; padding:22px var(--gutter) 14px;max-width:var(--maxw);margin:0 auto;min-height:96px;} .logo{display:block;text-align:center;line-height:1;} .logo__word{font-family:var(--serif);font-size:63px;font-weight:400;letter-spacing:.185em; color:var(--ink);text-indent:.185em;display:block;line-height:1.04;} .logo__sub{font-family:var(--serif);font-size:20.5px;letter-spacing:.52em;color:var(--gold); text-indent:.52em;display:block;margin-top:1px;font-weight:400;} .header__utils{position:static;transform:none; display:flex;align-items:center;gap:19px;} .util-btn{display:grid;place-items:center;width:31px;height:31px;color:var(--ink); transition:color .25s var(--ease),transform .25s var(--ease);position:relative;} .util-btn:hover{color:var(--gold);transform:translateY(-1px);} .util-btn svg{width:24px;height:24px;stroke-width:1.6;} /* Search · Cart · Account sit 20% larger again at the client's request */ .util-btn--lg{width:37px;height:37px;} .util-btn--lg svg{width:29px;height:29px;stroke-width:1.55;} .util-badge{position:absolute;top:-4px;right:-6px;min-width:18px;height:18px;padding:0 5px; background:var(--gold);color:#fff;border-radius:10px;font-size:10.5px;font-weight:700; display:grid;place-items:center;line-height:1;font-family:var(--sans);} .util-badge:empty,.util-badge[data-count="0"]{display:none;} .currency{display:flex;align-items:center;gap:5px;position:relative;} .currency__btn{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;letter-spacing:.03em; color:var(--ink);padding:3px 2px;transition:color .25s var(--ease);} .currency__btn:hover{color:var(--gold);} .currency__flag{width:17px;height:17px;border-radius:50%;object-fit:cover;display:block;} .currency__btn svg{width:13px;height:13px;stroke-width:2.2;opacity:.75;} /* z-index:50 was trapped inside .header__main (position:relative), so the dropdown painted UNDER the nav row and the word "INQUIRY" showed through it. .currency gets its own stacking context above the nav, and the menu sits above that. (Reported on desktop, 30 Jul 2026.) */ .currency.is-open{z-index:930;} .currency__menu{position:absolute;top:calc(100% + 12px);right:0;background:#fff;min-width:186px; border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:6px;z-index:931; opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .26s var(--ease);} .currency.is-open .currency__menu{opacity:1;visibility:visible;transform:translateY(0);} .currency__item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;font-size:13px; text-align:left;transition:background .18s;} .currency__item:hover{background:var(--gold-wash);} .currency__item.is-active{background:var(--gold-tint);font-weight:600;} .currency__item b{font-weight:600;min-width:34px;} .currency__item span{color:var(--ink-55);font-size:12px;} /* Nav */ .header__nav{border-top:1px solid var(--line-soft);} .navclose{display:none;} .nav{display:flex;align-items:center;justify-content:flex-start;gap:44px; max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);} .nav__link{position:relative;display:block;padding:16px 0;font-size:13px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:color .28s var(--ease);} .nav__link::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:2px;background:var(--gold); transform:scaleX(0);transform-origin:center;transition:transform .34s var(--ease);} .nav__link:hover,.nav__link[aria-current="page"]{color:var(--gold);} .nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);} .burger{display:none;position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%); width:28px;height:28px;place-items:center;} .burger svg{width:22px;height:22px;stroke-width:1.5;} @media (max-width:900px){ .burger{width:42px;height:42px;display:grid;place-items:center;} .burger svg{width:30px;height:30px;stroke-width:2;} } /* ============================================================ BUTTONS ============================================================ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:11px; padding:15px 34px;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.15em; text-transform:uppercase;border-radius:var(--radius);cursor:pointer;position:relative; transition:all .34s var(--ease);border:1px solid transparent;white-space:nowrap;} .btn svg{width:14px;height:14px;stroke-width:1.8;transition:transform .34s var(--ease);} .btn--gold{background:var(--gold);color:#fff;border-color:var(--gold);} .btn--gold:hover{background:var(--gold-dark);border-color:var(--gold-dark); box-shadow:0 8px 24px rgba(197,168,128,.34);transform:translateY(-1px);} .btn--gold:hover svg{transform:translateX(4px);} .btn--outline{background:#fff;color:var(--ink);border-color:var(--gold);} .btn--outline:hover{background:var(--gold);color:#fff;box-shadow:0 8px 24px rgba(197,168,128,.28); transform:translateY(-1px);} .btn--outline:hover svg{transform:translateX(4px);} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);} .btn--ghost:hover{border-color:var(--gold);color:var(--gold);} .btn--dark{background:var(--ink);color:#fff;border-color:var(--ink);} .btn--dark:hover{background:#000;transform:translateY(-1px);box-shadow:var(--shadow-md);} .btn--sm{padding:11px 22px;font-size:10.5px;letter-spacing:.13em;} .btn--lg{padding:18px 44px;font-size:12px;} .btn--block{display:flex;width:100%;} .btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none;} .link-gold{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600; letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep); border-bottom:1px solid rgba(197,168,128,.42);padding-bottom:3px;transition:all .3s var(--ease);} .link-gold:hover{color:var(--gold-dark);border-color:var(--gold-dark);gap:12px;} /* ============================================================ SECTION FURNITURE ============================================================ */ .eyebrow{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.3em; text-transform:uppercase;color:var(--gold);display:block;} .section{padding:88px 0;} .section--soft{background:var(--bg-soft);} .section__head{text-align:center;margin-bottom:46px;} .section__head .eyebrow{margin-bottom:14px;} .section__title{font-size:38px;line-height:1.16;font-weight:400;} /* Reveal on scroll — progressive enhancement. Content is visible by default; only hidden once JS confirms it can reveal it, so a JS failure can never leave the page blank. */ html.js [data-reveal]{opacity:0;transform:translateY(26px); transition:opacity .9s var(--ease),transform .9s var(--ease);} html.js [data-reveal].is-in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ html.js [data-reveal]{opacity:1;transform:none;} } /* ============================================================ FOOTER — light gold/champagne theme (NEVER solid black) ============================================================ */ /* ---- Footer newsletter (6 Sep v7 — owner: "box poora WHITE/alag dikhta hai — kahin bhi match nahi karta") FIX: (1) pehle --bg-soft (#F9F9F9, near-white) background tha — cream footer par stark white block lagta tha. Ab gold wash jo footer me blend hota hai. (2) Styles pehle sirf pages.css me the — homepage pages.css load NAHI karta isliye wahan form bilkul unstyled tha. Ab main.css me hai = HAR page par same look. ---- */ .newsletter-form{max-width:280px;margin:0 0 14px;padding:14px 16px; border:1px solid rgba(201,151,63,.38);border-radius:10px; background:rgba(201,151,63,.07);} .newsletter-form__t{display:block;font-size:12px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--gold-deep);margin-bottom:5px;} .newsletter-form__sub{font-size:11.5px;color:var(--ink-55);line-height:1.6;margin-bottom:10px;} /* (6 Sep v9 — owner: "email ID ka jagah chhota hai, bada email poora nahi dikhta") email input apni poori line par, Subscribe button neeche — poora email dikhta hai. */ .newsletter-form__row{display:grid;gap:8px;} .newsletter-form__row input{width:100%;min-width:0;border:1px solid var(--line);background:#fff; padding:9px 10px;font-size:12.5px;border-radius:7px;} .newsletter-form__row input:focus{outline:none;border-color:var(--gold);} .newsletter-form__msg{display:block;font-size:11.5px;color:var(--danger);margin-top:7px;min-height:1em;} .newsletter-form__msg.is-ok{color:var(--ok);} .site-footer{background:linear-gradient(178deg,#FBF7F1 0%,#F5EDE1 46%,#EFE3D2 100%); color:var(--ink);border-top:1px solid rgba(197,168,128,.4);margin-top:0;} .footer__grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1.15fr 1.25fr;gap:44px; padding:66px 0 46px;} .footer__brandword{font-family:var(--serif);font-size:20px;letter-spacing:.15em;color:var(--ink); margin-bottom:4px;display:block;} .footer__brandsub{font-family:var(--serif);font-size:10px;letter-spacing:.44em;color:var(--gold-deep); display:block;margin-bottom:18px;} .footer__blurb{font-size:13.5px;line-height:1.85;color:var(--ink-70);max-width:300px;margin-bottom:20px;} .footer__badge{display:inline-block;border:1px solid var(--gold);color:var(--gold-deep); padding:7px 14px;font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; background:rgba(255,255,255,.62);margin-bottom:22px;} .footer__col-title{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--ink);margin-bottom:20px;} .footer__list li{margin-bottom:11px;} .footer__list a{font-size:13.5px;font-weight:500;color:var(--ink-70);transition:color .26s var(--ease),padding-left .26s var(--ease);} .footer__list a:hover{color:var(--gold-deep);padding-left:4px;} .footer__note{font-size:12.5px;line-height:1.8;color:var(--ink-70);margin-bottom:16px;} .footer__label{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--ink-40);display:block;margin-bottom:5px;} .footer__mail{font-size:13px;color:var(--gold-deep);font-weight:700;word-break:break-word;} .footer__mail:hover{text-decoration:underline;} .footer__socials{display:flex;gap:12px;margin-top:6px;} .footer__socials a{width:32px;height:32px;display:grid;place-items:center; border:1px solid rgba(197,168,128,.55);color:var(--ink-70);transition:all .3s var(--ease);} .footer__socials a:hover{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-2px);} .footer__socials svg{width:15px;height:15px;} .footer__bottom{border-top:1px solid rgba(197,168,128,.36);padding:19px 0; display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;} .footer__copy{font-size:12px;color:var(--ink-70);} /* Companies Act 1993 s25 requires the registered company name on the site. The brand stays Velmora Diamonds everywhere; this one quiet line names the legal entity behind it, which is what every trading-name business does. */ .footer__legal{font-size:10.5px;color:var(--ink-40);display:inline-block;margin-top:3px;} .footer__certs{display:flex;gap:20px;flex-wrap:wrap;} .footer__certs span{font-size:11px;font-weight:600;letter-spacing:.09em;color:var(--ink-70);text-transform:uppercase;} /* ============================================================ AI CONSULTANT WIDGET ============================================================ */ /* AI consultant widget removed 30 Jul 2026 — replaced by Tawk.to, which injects and styles its own bubble. */ .toast-host{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:1200; display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none;} .toast{background:var(--ink);color:#fff;padding:13px 24px;font-size:12.5px;letter-spacing:.05em; box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:11px;border-radius:2px; animation:toastIn .4s var(--ease);max-width:90vw;} .toast svg{width:15px;height:15px;color:var(--gold);flex-shrink:0;} .toast.is-out{animation:toastOut .34s var(--ease) forwards;} @keyframes toastIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}} @keyframes toastOut{to{opacity:0;transform:translateY(10px);}} /* ============================================================ CART DRAWER ============================================================ */ .scrim{position:fixed;inset:0;background:rgba(26,26,26,.44);z-index:940;backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:all .38s var(--ease);} .scrim.is-open{opacity:1;visibility:visible;} .drawer{position:fixed;top:0;right:0;bottom:0;width:436px;max-width:100vw;background:#fff;z-index:950; display:flex;flex-direction:column;transform:translateX(100%); transition:transform .46s var(--ease);box-shadow:-14px 0 50px rgba(26,26,26,.14);} .drawer.is-open{transform:none;} .drawer__head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px; border-bottom:1px solid var(--line);flex-shrink:0;} .drawer__title{font-family:var(--serif);font-size:22px;} .drawer__title span{font-family:var(--sans);font-size:12px;color:var(--ink-40);margin-left:7px;} .drawer__close{width:30px;height:30px;display:grid;place-items:center;color:var(--ink-55); transition:color .24s,transform .24s;} .drawer__close:hover{color:var(--ink);transform:rotate(90deg);} .drawer__close svg{width:17px;height:17px;} .drawer__body{flex:1;overflow-y:auto;padding:22px 26px;} .drawer__foot{border-top:1px solid var(--line);padding:20px 26px 24px;background:var(--bg-soft);flex-shrink:0;} .cart-line{display:grid;grid-template-columns:78px 1fr auto;gap:15px;padding:16px 0; border-bottom:1px solid var(--line-soft);align-items:start;} .cart-line__img{width:78px;height:78px;background:var(--bg-soft);object-fit:cover;} .cart-line__name{font-family:var(--serif);font-size:15px;line-height:1.35;margin-bottom:5px;} .cart-line__meta{font-size:11px;color:var(--ink-55);letter-spacing:.04em;line-height:1.6;} .cart-line__sku{font-size:10px;color:var(--ink-40);letter-spacing:.08em;margin-top:3px;} .cart-line__price{font-size:14px;font-weight:600;white-space:nowrap;} .cart-line__rm{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40); margin-top:8px;transition:color .24s;} .cart-line__rm:hover{color:var(--danger);} .cart-empty{text-align:center;padding:60px 20px;} .cart-empty svg{width:46px;height:46px;color:var(--line);margin:0 auto 18px;stroke-width:1;} .cart-empty p{font-size:14px;color:var(--ink-55);margin-bottom:22px;} .promo{display:flex;gap:8px;margin-bottom:16px;} .promo input{flex:1;border:1px solid var(--line);padding:11px 14px;font-size:12px;background:#fff; letter-spacing:.06em;text-transform:uppercase;} .promo input:focus{outline:none;border-color:var(--gold);} .sum-row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-70); margin-bottom:10px;font-variant-numeric:tabular-nums lining-nums;} .sum-row--total{font-size:17px;font-weight:800;color:var(--ink);padding-top:14px; border-top:1px solid var(--line);margin-top:14px;font-family:var(--sans); letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;} .sum-row--save{color:var(--ok);} /* "Including GST" sits under the word Total instead of showing a separate GST amount, which read as if tax were being added on top. */ .sum-row--total span:first-child{display:flex;flex-direction:column;gap:2px;} .sum-row--total small{font-size:10.5px;font-weight:600;color:var(--ink-55); letter-spacing:.06em;text-transform:uppercase;} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1180px){ :root{--gutter:28px;} .footer__grid{grid-template-columns:1.4fr 1fr 1fr;gap:36px;} .nav{gap:30px;} } @media (max-width:900px){ .logo__word{font-size:46px;} .logo__sub{font-size:15.5px;letter-spacing:.42em;text-indent:.42em;} /* Three real columns. The absolutely-positioned utils used to sit ON TOP of the centred logo on narrow screens — burger | logo | utils now each own their own track so they can never overlap. */ .header__main{display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;column-gap:10px;padding:14px var(--gutter) 11px;min-height:70px;} .header__utils{position:static;transform:none;justify-self:end;gap:14px;} .logo{justify-self:center;min-width:0;} .burger{display:grid;position:static;transform:none;justify-self:start;} .header__nav{display:none;} /* z-index 970 beats the scrim (940) AND the cart drawer (950). The scrim is appended to at click time, so it comes later in the DOM — without a higher z-index it painted ON TOP of the menu, which looked blurred and swallowed every tap. (Reported on iPhone, 30 Jul 2026.) 100dvh + safe-area keeps the last link clear of the iOS home bar. */ /* .header__nav lives INSIDE .site-header, which is position:sticky with z-index:900 — that creates a stacking context, so the drawer's own z-index can never beat the scrim (940) sitting at body level. The fix is to lift the HEADER while the menu is open. */ body.nav-open .site-header{z-index:975;} .header__nav.is-open{display:block;position:fixed;top:0;left:0;bottom:0;width:288px;background:#fff; z-index:975;padding-top:26px;box-shadow:var(--shadow-lg);border-top:0; height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch; padding-bottom:calc(26px + env(safe-area-inset-bottom));} .navclose{display:grid;place-items:center;width:38px;height:38px;margin:0 0 6px auto; margin-right:20px;color:var(--ink);border:1px solid var(--line);border-radius:50%;} .navclose svg{width:19px;height:19px;} .navclose:hover{color:var(--gold);border-color:var(--gold);} .header__nav.is-open .nav{flex-direction:column;align-items:flex-start;gap:0;padding:0 26px;} .header__nav.is-open .nav__link{padding:16px 0;width:100%;border-bottom:1px solid var(--line-soft); font-size:15px;letter-spacing:.04em;} .section{padding:60px 0;} .section__title{font-size:29px;} .footer__grid{grid-template-columns:1fr 1fr;gap:32px;padding:48px 0 34px;} .drawer{width:100%;} } @media (max-width:600px){ :root{--gutter:18px;} .announce{height:36px;} .announce__seg{font-size:11px;letter-spacing:.1em;} .announce__seg span{padding:0 20px;} /* Logo scales with the viewport so it can never push the icons off-screen */ /* Slightly tighter than v4.2 to make room for the NZD/AUD text that is now shown next to it. Measured to clear the icons at 375px. */ .logo__word{font-size:clamp(22px,6.6vw,38px);letter-spacing:.1em;text-indent:.1em;} .logo__sub{font-size:clamp(8.5px,2.5vw,13px);letter-spacing:.24em;text-indent:.24em;} .header__main{column-gap:6px;padding:11px var(--gutter) 9px;min-height:62px;} .header__utils{gap:7px;} .util-btn{width:26px;height:26px;} .util-btn svg{width:20px;height:20px;} .util-btn--lg{width:28px;height:28px;} .util-btn--lg svg{width:22px;height:22px;} /* SHOW the currency code on mobile. Hiding it (v4.2) left only a tiny flag, and the owner rightly pointed out you cannot tell NZD from AUD that way. Width is recovered by dropping the flag and the chevron instead — the three letters carry all the meaning. */ .currency__btn > svg{display:none;} /* chevron */ .currency__code{display:inline;font-size:12px;font-weight:700;letter-spacing:.02em;} .currency__btn{gap:0;padding:3px 4px;} .util-badge{min-width:15px;height:15px;font-size:9px;top:-3px;right:-4px;} .footer__grid{grid-template-columns:1fr;} .footer__bottom{flex-direction:column;text-align:center;} .section__title{font-size:25px;} } @media print{ .site-header,.site-footer,.drawer,.scrim,.announce{display:none!important;} } /* Inline SVG currency flags (emoji flags don't render cross-platform) */ .currency__flagemo{display:inline-grid;place-items:center;width:21px;height:21px;flex-shrink:0;} .currency__flagemo svg{width:21px;height:21px;border-radius:50%;display:block;} .currency__item .currency__flagemo{width:18px;height:18px;} .currency__item .currency__flagemo svg{width:18px;height:18px;} /* ------------------------------------------------------------------ MOBILE FLAG SIZE — must come AFTER the .currency__flagemo base rules above, otherwise the media query loses on source order and the flag collapses to 0x0. (Real bug found on iPhone, 30 Jul 2026.) ------------------------------------------------------------------ */ @media (max-width:600px){ /* Hide the button's flag so the NZD/AUD text fits. MUST live here, after the base .currency__flagemo rules above — a media query earlier in the file loses on source order and silently does nothing. */ .currency__btn .currency__flagemo{display:none;} /* the dropdown list keeps its flags — there is room in the menu */ .currency__item .currency__flagemo{display:inline-grid;width:18px;height:18px;} .currency__item .currency__flagemo svg{width:18px;height:18px;} } /* ══════════════════════════════════════════════════════════════════ MOBILE READABILITY (added 30 Jul 2026 at the owner's request) "Mobile pe writing bahut light aur choti dikh rahi hai." Desktop is deliberately untouched — everything below 700px only. ══════════════════════════════════════════════════════════════════ */ @media (max-width:700px){ /* 1. Base text up from 15px, and darker */ body{font-size:16.5px;line-height:1.62;color:#141414;} /* 2. The three grey tints were too pale on a phone in daylight. Each is darkened one step; the CSS variables are re-declared so every component that uses them benefits at once. */ :root{ --ink-70:#3A3A3A; --ink-55:#565656; --ink-40:#767676; } /* 3. Small print — spec strips, labels, meta, notes */ .pinfo__strip{font-size:13px!important;font-weight:700;} .card__spec,.card__spec *{font-size:12.5px;font-weight:600;} .sum-row{font-size:15px;font-weight:600;} .sum-row--total{font-size:19px;font-weight:800;} .drawer__body,.drawer__foot{font-size:15px;} .cart-line__meta{font-size:13px;font-weight:600;} .cart-line__title{font-size:15.5px;font-weight:700;} /* 4. Section headings and body copy */ .section__title{font-size:27px;} .section__sub,.section p,.lede{font-size:16px;} /* 5. Forms — 16px minimum stops iOS zooming the page on focus */ input,select,textarea,.input{font-size:16px!important;} label,.field__label{font-size:13.5px;font-weight:700;} /* 6. Buttons and nav */ .btn{font-size:13px;letter-spacing:.09em;font-weight:700;} .nav__link{font-size:14px!important;font-weight:700;} /* 7. Footer */ .site-footer{font-size:14.5px;} .footer__col a,.footer__col p{font-size:14.5px;} .footer__title{font-size:12.5px;font-weight:800;} .footer__note{font-size:12px!important;} /* 8. Tables (diamond details) */ .dtable th,.dtable td{font-size:13.5px!important;padding:11px 12px!important;} .dtable th{font-weight:700;} } /* ---- Deliver-to switch (drives GST zero-rating) ---- */ .shipto{position:relative;} .shipto__btn{display:flex;align-items:center;gap:6px;background:none;border:none; padding:6px 8px;cursor:pointer;color:var(--ink);font:inherit;font-size:12px; letter-spacing:.04em;} .shipto__btn svg{width:15px;height:15px;flex-shrink:0;} .shipto__chev{width:12px;height:12px;opacity:.6;} .shipto__btn:hover{color:var(--gold-deep);} .shipto__btn.is-export .shipto__label{color:var(--gold-deep);font-weight:700;} .shipto__menu{position:absolute;top:calc(100% + 8px);right:0;z-index:940;width:268px; background:#fff;border:1px solid var(--line);box-shadow:0 12px 34px rgba(26,26,26,.14); padding:12px;} .shipto__menu[hidden]{display:none;} .shipto__lead{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--ink-40);margin:0 0 9px;font-weight:700;} /* ---- Full country picker (search + scrollable flagged list) ---- Replaced the New Zealand / Outside New Zealand binary switch 15 Aug 2026 — the owner asked for the same look Temu uses for its country picker. Reuses the exact TAX/openCountries data the checkout already works from. */ .shipto__menu{width:290px;max-height:420px;display:flex;flex-direction:column;} .shipto__search{width:100%;border:1px solid var(--line);padding:9px 11px;font-size:13px; margin-bottom:8px;background:#fff;border-radius:2px;font:inherit;flex-shrink:0;} .shipto__search:focus{outline:none;border-color:var(--gold); box-shadow:0 0 0 3px rgba(197,168,128,.15);} .shipto__list{overflow-y:auto;flex:1 1 auto;min-height:60px;max-height:260px; margin:0 -4px;padding:0 4px;} .shipto__row{display:flex;align-items:center;gap:9px;width:100%;text-align:left; background:none;border:1px solid transparent;padding:8px 9px;cursor:pointer; font:inherit;margin-bottom:2px;border-radius:2px;} .shipto__row:hover{background:var(--bg-soft);} .shipto__row.is-on{border-color:var(--gold);background:var(--gold-wash);} .shipto__rowflag{font-size:16px;line-height:1;flex-shrink:0;width:20px;text-align:center;} .shipto__name{font-size:13px;color:var(--ink);} .shipto__empty{font-size:12.5px;color:var(--ink-55);padding:14px 4px;text-align:center;} .shipto__note{font-size:11px;color:var(--ink-40);line-height:1.6;margin:8px 0 0; padding-top:8px;border-top:1px solid var(--line);flex-shrink:0;} .shipto__note a{color:var(--gold-deep);font-weight:600;} .sum-note{font-size:11.5px;color:var(--ink-55);line-height:1.65;margin:10px 0 0;} /* The header pill's own flag (swapped in for the old location-pin icon). */ .shipto__flag{font-size:14px;line-height:1;flex-shrink:0;} @media (max-width:900px){ .shipto__label{display:none;} .shipto__menu{width:270px;} } /* ---------- NZ-only: overseas address blocked at checkout ---------- */ .co-block{margin-top:12px;padding:14px 16px;border-left:4px solid var(--gold); background:linear-gradient(180deg,rgba(197,168,128,.1),rgba(197,168,128,.03)); border-radius:0 3px 3px 0;} .co-block[hidden]{display:none;} .co-block b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:5px;} .co-block span{display:block;font-size:12.5px;color:var(--ink-70);line-height:1.55;margin-bottom:11px;} .btn.is-off,.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;} /* The locked "Outside New Zealand" row in the header picker */ .shipto__menu [data-shipto].is-locked{opacity:.62;} .shipto__menu [data-shipto].is-locked span{color:var(--gold-deep);font-weight:700;} /* ---------- Cart / checkout: the stone is a link ---------- */ .cart-line__ln{display:block;color:inherit;text-decoration:none;} .cart-line__ln:hover .cart-line__name{color:var(--gold-deep);text-decoration:underline;} .cart-line__ln:hover .cart-line__img{opacity:.88;} /* ============================================================ HEADER v3 — Option B (owner picked it, 8 Aug 2026) v2 put the currency and the country in their own pale strip above the wordmark and pushed the menu to the left. He disliked both on sight: "ekdum hi upar top me alag se chala gaya currency aur country ... poora left side aa gaya, wo centre me achha lag raha tha". So: one band. The wordmark keeps the centre, and a single right-hand column carries currency + country on top with the four icons directly beneath them. Both lines are set to the same width — that is the "perfect measurement" he asked for — so they read as one block instead of two stray groups. The menu returns to the centre underneath. Option B rather than A: the icons are ~12% larger, his choice, "thoda bada hai na ... dikhenge logon ko achhe se". ============================================================ */ .header__main{position:relative;z-index:2; display:grid;grid-template-columns:1fr auto 1fr;align-items:center; padding:16px var(--gutter) 14px;max-width:var(--maxw);margin:0 auto; min-height:auto;} .header__main .logo{grid-column:2;} /* The right-hand column. min-width holds the two rows to one width so the currency line and the icon line start and finish together. */ .header__side{grid-column:3;justify-self:end; display:flex;flex-direction:column;align-items:stretch;gap:13px; min-width:272px;} .header__side1{display:flex;align-items:center;justify-content:space-between; gap:22px;} .header__side1 .currency__btn, .header__side1 .shipto__btn{padding:4px 6px;font-size:12.5px;} /* space-between, not a gap: the four icons spread across exactly the width of the line above them. "thoda-thoda gap kar do" — done by the layout rather than by a guessed pixel value, so it stays true at any width. */ .header__side .header__utils{display:flex;flex-direction:row; justify-content:space-between;align-items:center;width:100%;gap:0; position:static;transform:none;} /* Option B — icons 12% larger than stock. */ .header__side .util-btn{width:35px;height:35px;} .header__side .util-btn svg{width:27px;height:27px;} .header__side .util-btn--lg{width:41px;height:41px;} .header__side .util-btn--lg svg{width:32px;height:32px;} /* Menu back in the centre. */ .header__nav{border-top:1px solid var(--line-soft);} .header__nav .nav{justify-content:center;gap:46px; max-width:var(--maxw);margin:0 auto;} @media (max-width:1100px){ .header__side{min-width:250px;} .header__side1{gap:16px;} .header__nav .nav{gap:32px;} } @media (max-width:900px){ /* 96px chopped "New Zealand" to "New Zeal…" on an iPad, and the column had spare room beside it — the wordmark simply gives some back. */ .header__side1 .shipto__label{max-width:none;white-space:nowrap;} .header__side{min-width:262px;gap:10px;} .header__side1{gap:14px;} .header__side1 .currency__btn, .header__side1 .shipto__btn{font-size:12px;padding:4px 4px;} } /* Two rules written for the OLD three-row header hid things that the v3 layout has plenty of room for, and they were still firing: @media (max-width:900px) .shipto__label{display:none} @media (max-width:600px) .currency__btn .currency__flagemo{display:none} On a phone that left a bare map pin with no country beside it and "NZD" with no flag — caught in a screenshot of the rebuilt header, 8 Aug 2026. In v3 the currency and the country own a full-width line of their own, so both come back. These must sit AFTER the rules they undo, or source order wins and nothing happens. */ .header__side1 .shipto__label{display:inline;} .header__side1 .currency__btn .currency__flagemo{display:inline-grid; width:21px;height:21px;} .header__side1 .currency__btn .currency__flagemo svg{width:21px;height:21px;} /* The same old mobile block also set gap:0 and hid the chevron, which left the flag welded to the letters — "NZD" with a flag touching the N. */ .header__side1 .currency__btn{gap:7px;padding:4px 6px;} .header__side1 .currency__btn > svg{display:block;width:13px;height:13px;} @media (max-width:700px){ /* The menu is inside the burger down here, so the three columns collapse: the wordmark takes the left and the icons sit beside it where a thumb already expects them. The currency row stays above them. */ .header__main{grid-template-columns:auto 1fr;gap:10px; padding:12px var(--gutter) 12px;} .header__main .logo{grid-column:2;justify-self:center;} .header__side{grid-column:1 / -1;grid-row:2;justify-self:stretch; min-width:0;gap:8px;} .header__side1{justify-content:center;gap:18px;} .header__side .header__utils{justify-content:space-around;} .header__side .util-btn{width:32px;height:32px;} .header__side .util-btn svg{width:24px;height:24px;} .header__side .util-btn--lg{width:37px;height:37px;} .header__side .util-btn--lg svg{width:29px;height:29px;} } /* The marquee is 3,437px wide by design; .announce clips it visually, but an absolutely positioned child still counts towards the document scroll width. overflow-x:HIDDEN on html/body fixes that and silently disables position:sticky — the header stopped freezing on scroll and the owner noticed straight away. overflow-x:CLIP does the same containment and leaves sticky working. (7 Aug 2026) REMOVED 18 Aug 2026: html/body must stay overflow-x:VISIBLE. iOS Safari cancels finger-drag gestures inside cross-origin iframes (the supplier Vision360 viewer) when the root document carries ANY overflow-x restriction (hidden/clip) — the buttons inside the viewer still worked, but dragging the diamond died. Base44, where the same viewer drags fine on iPhone Safari, has plain visible overflow on html/body. The marquee needs no help: .announce{overflow:hidden} already clips it, verified on index / natural / lab pages — scrollWidth equals innerWidth without any html/body rule. (18 Aug 2026) */ /* ============================================================ SEARCH PANEL Added 8 Aug 2026. The search button used to call window.prompt(), which the browser draws itself with "velmora.theworld78692.workers.dev says" written across the top. It reads like a security warning. Our own panel instead. ============================================================ */ .sbox{position:fixed;top:0;left:0;right:0;z-index:960;background:#fff; box-shadow:0 12px 40px rgba(26,26,26,.14); transform:translateY(-100%);transition:transform .32s var(--ease); padding:26px var(--gutter) 22px;} .sbox.is-open{transform:translateY(0);} .sbox__in{display:flex;align-items:center;gap:12px; max-width:820px;margin:0 auto;border-bottom:2px solid var(--ink);padding-bottom:12px;} .sbox__ico{width:22px;height:22px;color:var(--ink-55);flex:none;} .sbox__q{flex:1;border:none;outline:none;background:none; font-family:var(--serif);font-size:26px;color:var(--ink);padding:4px 0;min-width:0;} .sbox__q::placeholder{color:var(--ink-40);font-size:19px;} .sbox__q::-webkit-search-cancel-button{display:none;} .sbox__go{flex:none;background:var(--ink);color:#fff;border:none;cursor:pointer; padding:11px 26px;font-size:12px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;transition:background .25s var(--ease);} .sbox__go:hover{background:var(--gold-deep);} .sbox__x{flex:none;display:grid;place-items:center;width:38px;height:38px; color:var(--ink-55);background:none;border:none;cursor:pointer;} .sbox__x svg{width:22px;height:22px;} .sbox__x:hover{color:var(--ink);} .sbox__tips{display:flex;align-items:center;gap:9px;flex-wrap:wrap; max-width:820px;margin:14px auto 0;} .sbox__tips span{font-size:11px;letter-spacing:.11em;text-transform:uppercase; color:var(--ink-40);font-weight:600;} .sbox__tips button{border:1px solid var(--line);background:#fff;cursor:pointer; padding:6px 14px;font-size:12.5px;color:var(--ink-70);border-radius:2px; transition:all .2s var(--ease);} .sbox__tips button:hover{border-color:var(--gold);color:var(--gold-deep); background:var(--gold-wash);} @media (max-width:700px){ .sbox{padding:18px 14px 16px;} .sbox__q{font-size:19px;} .sbox__q::placeholder{font-size:15px;} .sbox__go{padding:10px 16px;font-size:11px;} .sbox__tips{gap:7px;} .sbox__tips button{padding:5px 11px;font-size:12px;} } /* Error toast (red) — used when a save did NOT reach the server */ .toast.is-err{background:var(--danger);} .toast.is-err svg{color:#fff;}