/* ===================================================================
RAMANAND JEWELLERS — houseoframanand.com
Minimal luxury. Soft bone base, deep forest green for contrast panels,
muted antique gold used sparingly as a line rather than a fill.
Nothing ornate: the jewellery is the only decoration on the page.
=================================================================== */
/* Type — two families:
Cormorant Garamond : high-contrast display serif, set light and airy.
Free stand-in for The Seasons, which is Canva-only
and cannot be embedded without a webfont licence.
Inter : neutral sans for body copy and UI labels. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@200;300;400;500&display=swap');
:root{
/* light ground */
--ivory:#FBFAF7; /* page background — warm bone, not white */
--cream:#F3F0E9; /* alternate panel — soft sand */
--paper:#FFFFFF;
/* PANELS — soft peach. What used to be the dark contrast panel is now a
light one, so `.on-dark` sections carry dark text instead of light. */
--peach:#F9E7DC; /* soft, light — mid-tone text stays legible on it */
--peach-2:#F4DCCE;
--peach-deep:#E5B79A;
/* INK — warm near-black. Buttons, icons and the mobile menu still need one
dark tone for weight; it is no longer the panel colour. */
--charcoal:#332E29;
--charcoal-2:#3D3730;
--charcoal-soft:#453E36;
/* gold, muted right down — a line weight, not a metallic fill */
--gold:#B08D46;
--gold-light:#D9C08A;
--gold-pale:#EBDDBE;
--gold-deep:#77602A; /* dark enough for 9.5px eyebrow text on bone AND on peach */
--maroon:#8C5A46; /* kept as a name; now a soft clay for warnings */
--ink:#2A2926;
--muted:#635E56; /* darkened for peach panels */
--line:rgba(42,41,38,0.10);
--line-gold:rgba(176,141,70,0.28);
/* shadows barely there — light design carries its own weight */
--shadow-soft: 0 14px 44px rgba(42,41,38,0.05);
--shadow-lift: 0 22px 56px rgba(42,41,38,0.10);
--radius: 2px;
--ease: cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
font-family:'Inter', sans-serif;
background:var(--ivory);
color:var(--ink);
font-weight:300;
line-height:1.75;
letter-spacing:.005em;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
.container{ width:100%; max-width:1240px; margin:0 auto; padding:0 32px; }
.eyebrow{
font-family:'Inter',sans-serif; font-size:9.5px; letter-spacing:.42em; text-transform:uppercase;
color:var(--gold-deep); font-weight:400; display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--gold-deep); display:inline-block; }
.eyebrow.on-dark{ color:var(--gold-deep); }
.eyebrow.on-dark::before{ background:var(--gold-deep); }
.eyebrow.center{ justify-content:center; }
/* On a phone a centred eyebrow often wraps to two lines. The rule is a flex
sibling, so it stays pinned to the left of the first line and the whole
label reads off-centre. Drop the rule at that width and centre the text. */
@media (max-width:760px){
.eyebrow.center{ display:block; text-align:center; line-height:1.7; }
.eyebrow.center::before{ display:none; }
}
/* Weight is tied to size, not applied flat. A light serif reads elegant at
40px and weak at 18px — at small sizes it had the same visual weight as the
body copy beneath it, so the two ran together. */
h1,h2,h3,h4,h5{ font-family:'Cormorant Garamond', Georgia, serif; color:var(--ink); letter-spacing:.01em; line-height:1.22; }
h1,h2{ font-weight:300; }
h3{ font-weight:400; }
h4,h5{ font-weight:600; }
.section-title{ font-size:clamp(30px,3.4vw,46px); margin:16px 0 20px; letter-spacing:.005em; font-weight:300; }
.section-sub{ font-family:'Inter', sans-serif; font-size:14.5px; font-weight:300; color:var(--muted); max-width:520px; line-height:1.85; }
.on-dark{ color:var(--ink); } /* panels are peach now, so this reads dark */
.on-dark .section-sub{ color:var(--muted); }
.divider{
width:40px; height:1px; margin:24px auto; background:var(--line-gold);
}
.divider.left{ margin:22px 0; }
/* reveal on scroll */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-delay-1.in-view{ transition-delay:.12s; }
.reveal-delay-2.in-view{ transition-delay:.24s; }
.reveal-delay-3.in-view{ transition-delay:.36s; }
.reveal-delay-4.in-view{ transition-delay:.48s; }
/* ===================== BUTTONS ===================== */
/* Buttons are readable at rest — the fill is the DEFAULT state, never revealed on hover.
Hover is a subtle lift + tone shift only. */
.btn{
position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:16px 38px; font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:.26em;
text-transform:uppercase; font-weight:400; border-radius:2px; border:1px solid transparent;
background:var(--charcoal); color:var(--ivory);
transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
box-shadow:none;
}
.btn span{ position:relative; z-index:2; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(51,46,41,0.16); background:var(--charcoal-soft); }
.btn:active{ transform:translateY(0); }
/* Primary — flat forest green. The old metallic gradient read as costume
jewellery; a single quiet colour lets the photography carry the page. */
.btn-gold{
background:var(--charcoal); color:#FBFAF7; border-color:transparent;
box-shadow:none;
}
.btn-gold:hover{
background:var(--charcoal-soft); color:#FBFAF7;
box-shadow:0 8px 22px rgba(51,46,41,0.18);
}
/* Secondary on dark — frosted panel, legible immediately, no hover dependency */
/* Solid dark on the peach panels. The outline version disappeared into the
background at a glance — a filled button is unmistakably a button. */
.btn-outline-light{
background:var(--charcoal); border-color:var(--charcoal); color:var(--ivory);
box-shadow:none;
}
.btn-outline-light:hover{
background:var(--charcoal-soft); border-color:var(--charcoal-soft); color:var(--ivory);
box-shadow:0 12px 28px rgba(51,46,41,0.22);
}
/* Quiet variant for light cream panels */
.btn-ghost{
background:transparent; color:var(--ink); border-color:rgba(42,41,38,0.22); box-shadow:none;
}
.btn-ghost:hover{ background:transparent; color:var(--gold-deep); border-color:var(--gold); }
.btn-sm{ padding:11px 22px; font-size:10.5px; letter-spacing:.16em; }
/* ===================== NAV ===================== */
.site-nav{
position:fixed; top:0; left:0; right:0; z-index:1000;
display:flex; align-items:center; justify-content:space-between;
padding:22px 40px; transition:all .5s var(--ease);
/* neutral, not maroon — this sits over the banner video too */
background:linear-gradient(to bottom, rgba(20,26,23,0.46), rgba(20,26,23,0));
}
.site-nav.scrolled{
padding:12px 40px; background:rgba(251,250,247,0.94); backdrop-filter:blur(16px);
box-shadow:none; border-bottom:1px solid var(--line);
}
.nav-logo{ display:flex; align-items:center; gap:12px; }
.nav-logo-badge{
width:52px; height:52px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #453E36, var(--charcoal) 72%);
display:flex; align-items:center; justify-content:center; padding:6px; box-shadow:0 0 0 1px var(--line-gold);
transition:transform .5s var(--ease);
}
.site-nav.scrolled .nav-logo-badge{ width:42px; height:42px; }
.nav-logo-badge img{ width:100%; height:100%; object-fit:contain; }
/* "RAMANAND JEWELLERS" is twice the length of the old "RAMANAND", so the
tracking comes in a little or it crowds the navigation links. */
.nav-word{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; font-size:18px; letter-spacing:.16em; color:var(--ivory); line-height:1.15; white-space:nowrap; }
.site-nav.scrolled .nav-word{ color:var(--ink); }
.nav-word small{ display:block; font-family:'Inter',sans-serif; font-size:8px; letter-spacing:.24em; font-weight:400; color:var(--gold-light); margin-top:2px; }
.site-nav.scrolled .nav-word small{ color:var(--gold-deep); }
.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
font-family:'Inter',sans-serif; font-weight:400; font-size:11.5px; letter-spacing:.2em;
text-transform:uppercase; color:var(--ivory); position:relative; padding-bottom:4px;
}
.site-nav.scrolled .nav-links a{ color:var(--ink); }
.nav-links a::after{
content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .4s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--gold-light); }
.site-nav.scrolled .nav-links a.active{ color:var(--gold-deep); }
.nav-actions{ display:flex; align-items:center; gap:20px; }
.nav-icon-btn{
position:relative; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
color:var(--ivory); border:1px solid rgba(251,250,247,0.4); transition:all .4s var(--ease);
}
.site-nav.scrolled .nav-icon-btn{ color:var(--ink); border-color:var(--line); }
.nav-icon-btn:hover{ border-color:var(--gold); color:var(--gold); }
.nav-icon-btn svg{ width:17px; height:17px; }
.wishlist-count{
position:absolute; top:-6px; right:-6px; background:var(--maroon); color:#fff; font-size:9px; font-family:'Inter',sans-serif;
width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600;
}
.google-btn{
display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:30px; background:var(--paper);
border:1px solid var(--line); font-size:12px; color:var(--ink); letter-spacing:.3px; box-shadow:var(--shadow-soft);
}
.google-btn svg{ width:15px; height:15px; }
.hamburger{ display:none; flex-direction:column; gap:5px; width:26px; }
.hamburger span{ height:1px; background:var(--ivory); width:100%; transition:all .3s var(--ease); }
.site-nav.scrolled .hamburger span{ background:var(--ink); }
/* mobile menu */
.mobile-menu{
position:fixed; inset:0; background:var(--peach); z-index:1200; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:30px; transform:translateY(-100%); transition:transform .55s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; font-size:24px; color:var(--ink); letter-spacing:1px; }
.mobile-close{ position:absolute; top:28px; right:32px; color:var(--ink); font-size:26px; }
/* ===================== HERO ===================== */
.hero{
position:relative; display:block; text-align:center;
background:var(--ivory);
overflow:hidden; padding:0;
}
.hero-shimmer{ display:none; }
@keyframes pulseGlow{ 0%,100%{ opacity:.55; transform:translateX(-50%) scale(1);} 50%{ opacity:.9; transform:translateX(-50%) scale(1.08);} }
/* ============ FULL-BLEED VIDEO BANNER ============ */
/* The hero video is purpose-built 16:9 and cut to the moments where the jewellery
is in frame, so it fills the whole banner edge-to-edge without bad crops. */
.hero-video-wrap{
position:relative; z-index:2; overflow:hidden; background:#2A2520;
height:calc(78vh + 95px); min-height:535px; max-height:955px;
}
.hero-video-wrap video{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center;
}
/* Scrim: NEUTRAL dark, not maroon.
A red-tinted scrim casts pink over the footage and makes gold jewellery look
rose-coloured. #170E10 is a near-neutral warm black — it darkens for text
legibility without staining the metal. Contrast is raised at the top and
bottom edges only, where the nav and headline sit. */
.hero-video-wrap::after{
content:""; position:absolute; inset:0;
background:
radial-gradient(ellipse at 50% 46%, rgba(18,24,21,0.00) 0%, rgba(18,24,21,0.10) 72%, rgba(18,24,21,0.26) 100%),
linear-gradient(180deg, rgba(18,24,21,0.52) 0%, rgba(18,24,21,0.02) 30%, rgba(18,24,21,0.04) 68%, rgba(18,24,21,0.34) 100%);
}
.hero-shimmer, .hero::before{ z-index:1; }
.hero-content{ z-index:3; }
.hero-content{
position:relative; z-index:3; max-width:900px; width:100%;
margin:0 auto; padding:88px 24px 96px; text-align:center;
}
/* thin gold seam between the footage and the copy */
.hero-video-wrap::before{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:5;
background:linear-gradient(90deg, transparent, var(--line-gold) 30%, var(--line-gold) 70%, transparent);
}
.hero-crest{ width:76px; margin:0 auto 20px; opacity:.95; animation:fadeDown 1.1s var(--ease) both; }
@keyframes fadeDown{ from{opacity:0; transform:translateY(-18px);} to{opacity:1; transform:translateY(0);} }
.hero h1{
color:var(--ink); font-size:clamp(30px,3.8vw,52px); line-height:1.28; letter-spacing:.008em;
font-weight:300; animation:fadeUp 1.1s .15s var(--ease) both;
}
.hero h1 .orn{ display:none; } /* ornaments removed — the brief is minimal */
/* the one "royal" note: the accent word in gold, still the same family */
.hero h1 em{ font-style:italic; color:var(--gold-deep); font-weight:300; }
.hero p{
font-family:'Inter',sans-serif; font-size:15px; font-weight:300; line-height:1.85;
color:var(--muted); margin:22px auto 0; max-width:620px;
animation:fadeUp 1.1s .3s var(--ease) both;
}
/* the footage brightens and darkens as it plays — shadows keep the overlay text readable throughout */
.hero-crest{ filter:drop-shadow(0 4px 20px rgba(51,46,41,0.65)); }
@keyframes fadeUp{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
/* the statement band has no buttons now — kept for any page that still uses it */
.hero-ctas{ margin-top:34px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; animation:fadeUp 1.1s .45s var(--ease) both; }
/* ===== Ornament rule =====
Two tapered hairlines meeting a small open diamond. The one decorative
mark on the page — everything else stays plain. */
.orn-rule{
display:flex; align-items:center; justify-content:center;
gap:18px; margin:0 auto;
animation:fadeUp 1.1s .05s var(--ease) both;
}
.orn-rule::before, .orn-rule::after{
content:""; height:1px; width:clamp(70px, 9vw, 118px);
}
.orn-rule::before{ background:linear-gradient(90deg, transparent, var(--gold-light)); }
.orn-rule::after{ background:linear-gradient(90deg, var(--gold-light), transparent); }
.orn-diamond{
position:relative; width:9px; height:9px; flex-shrink:0;
border:1px solid var(--gold); transform:rotate(45deg);
}
.orn-diamond::after{
content:""; position:absolute; inset:2.5px;
border-radius:50%; background:var(--gold); opacity:.75;
}
/* the paragraph the rules bracket */
.hero .statement{
font-family:'Cormorant Garamond',Georgia,serif;
font-size:clamp(19px,1.75vw,25px); font-weight:300; line-height:1.62;
color:var(--muted); letter-spacing:.004em; text-transform:none;
max-width:660px; margin:34px auto; text-align:center;
animation:fadeUp 1.1s .22s var(--ease) both;
}
/* the house line, set larger and in italic */
.house-quote{
font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
font-size:clamp(26px,3vw,40px); font-weight:300; line-height:1.35;
color:var(--ink); letter-spacing:.006em;
margin:74px auto 0; max-width:820px;
animation:fadeUp 1.1s .38s var(--ease) both;
}
@media (max-width:760px){
.orn-rule::before, .orn-rule::after{ width:56px; }
.hero .statement{ margin:26px auto; }
.house-quote{ margin-top:52px; }
}
/* two buttons side by side in the closing banner */
.cta-actions{ margin-top:34px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
@media (max-width:520px){
.cta-actions{ flex-direction:column; align-items:stretch; padding:0 8px; }
}
/* Mobile: the 16:9 clip is cropped tighter, so lift the scrim a little for legibility */
@media (max-width:760px){
.hero-video-wrap{ height:calc(62vh + 70px); min-height:430px; }
.hero-video-wrap::after{
background:linear-gradient(180deg, rgba(18,24,21,0.66) 0%, rgba(18,24,21,0.06) 45%, rgba(18,24,21,0.30) 100%);
}
.hero-content{ padding:34px 20px 46px; }
}
/* ===================== HERITAGE STRIP ===================== */
.strip{
background:var(--peach-2); padding:24px 0; overflow:hidden; border-top:1px solid var(--line-gold); border-bottom:1px solid var(--line-gold);
}
.strip-track{ display:flex; gap:60px; white-space:nowrap; animation:marquee 26s linear infinite; width:max-content; }
.strip-track span{ color:var(--gold-deep); font-family:'Inter',sans-serif; font-weight:400; font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; display:flex; align-items:center; gap:16px; }
.strip-track span::after{ content:""; width:3px; height:3px; border-radius:50%; background:var(--gold-deep); opacity:.5; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
/* The strip had no mobile rule, so it stayed 68px tall on a phone — the same
as on a 1440px desktop, which made it read as a broad band rather than a
thin ribbon between sections. */
@media (max-width:760px){
.strip{ padding:12px 0; }
.strip-track{ gap:38px; }
.strip-track span{ font-size:9.5px; letter-spacing:.2em; gap:11px; }
.strip-track span::after{ width:2.5px; height:2.5px; }
}
@media (max-width:420px){
.strip{ padding:10px 0; }
.strip-track{ gap:30px; }
.strip-track span{ font-size:9px; letter-spacing:.16em; }
}
/* ===================== SECTIONS ===================== */
section{ padding:110px 0; position:relative; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 60px; }
.section-head.left{ text-align:left; margin:0 0 50px; }
.dark-panel{ background:var(--peach); color:var(--ink); }
.cream-panel{ background:var(--cream); }
/* collections grid */
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
.collection-card{
position:relative; aspect-ratio:3/4.1; border-radius:var(--radius); overflow:hidden; cursor:pointer;
box-shadow:var(--shadow-soft); transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.collection-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lift); }
.placeholder-art{
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
background:linear-gradient(160deg,#F0EDE4,#E4DFD2 45%,#CFC7B4); transition:transform .7s var(--ease);
}
.placeholder-art.dark{ background:linear-gradient(160deg,#453E36,#332E29 45%,#26221E); }
.collection-card:hover .placeholder-art{ transform:scale(1.08); }
.placeholder-art svg{ width:46px; height:46px; opacity:.85; color:var(--charcoal); }
.placeholder-art.dark svg{ color:var(--gold-light); }
.placeholder-art .p-label{ font-family:'Inter',sans-serif; font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--charcoal); opacity:.55; }
.placeholder-art.dark .p-label{ color:var(--ivory); opacity:.5; }
.card-overlay{
position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:26px;
background:linear-gradient(to top, rgba(42,41,38,0.86) 0%, rgba(42,41,38,0.15) 55%, transparent 100%);
color:var(--ivory);
}
.card-overlay h4{ color:var(--ivory); font-size:20px; }
.card-overlay p{ font-family:'Inter',sans-serif; font-style:normal; font-weight:300; font-size:12.5px; letter-spacing:.06em; color:var(--gold-light); margin-top:4px; }
.card-arrow{
margin-top:14px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(251,250,247,0.4); display:flex;
align-items:center; justify-content:center; transition:all .4s var(--ease);
}
.collection-card:hover .card-arrow{ background:var(--gold); border-color:var(--gold); transform:rotate(45deg); }
.card-arrow svg{ width:13px; height:13px; }
/* why us */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; margin-top:20px; }
.why-item{ text-align:center; padding:0 14px; }
.why-icon{
width:64px; height:64px; border-radius:50%; border:1px solid var(--line-gold); display:flex; align-items:center;
justify-content:center; margin:0 auto 20px; transition:all .5s var(--ease);
}
.why-item:hover .why-icon{ background:var(--gold); border-color:var(--gold); transform:rotateY(360deg); }
.why-icon svg{ width:26px; height:26px; color:var(--gold-deep); transition:color .4s; }
.why-item:hover .why-icon svg{ color:var(--charcoal); }
.why-item h4{ font-size:21px; font-weight:600; margin-bottom:10px; letter-spacing:.012em; color:var(--ink); }
.why-item p{ font-size:14px; color:var(--muted); line-height:1.8; }
/* ===== Testimonials — endless centred carousel =====
The card set is cloned three times by script.js and the view sits in the
middle copy, so there is no first or last card to run into — reviews keep
flowing past in both directions. The centre card is the focus; its
neighbours stay readable but recede, and the edges fade out under a mask
so nothing appears to be cut off. */
.testi-section{ overflow:hidden; }
/* Width is capped so exactly three cards are in play — the focused one in
the centre with a neighbour part-showing either side. Card size itself is
unchanged; it is the frame around them that is narrower. */
.testi-carousel{
position:relative; width:100%; max-width:1100px; margin:0 auto; overflow:hidden;
padding:14px 0 6px; /* room for the focused card's lift */
cursor:grab; touch-action:pan-y;
-webkit-user-select:none; user-select:none;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
}
.testi-carousel.is-dragging{ cursor:grabbing; }
.testi-track{
display:flex; gap:26px; align-items:stretch; will-change:transform;
transition:transform .68s cubic-bezier(.4,.02,.2,1);
}
/* Fixed card width — unchanged from before, just no longer stretchy. */
.testi-card{
flex:0 0 clamp(300px, 30vw, 420px);
display:flex; flex-direction:column;
background:var(--paper); border:1px solid var(--line); padding:36px;
box-shadow:var(--shadow-soft);
opacity:.34; transform:scale(.93);
transition:opacity .6s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
/* the one in the middle */
.testi-card.is-focus{
opacity:1; transform:scale(1);
border-color:var(--line-gold);
box-shadow:var(--shadow-lift);
}
.testi-stars{ color:var(--gold); letter-spacing:3px; margin-bottom:14px; }
.testi-card p{ font-family:'Inter',sans-serif; font-size:16px; font-weight:300; line-height:1.8; font-style:normal; color:var(--ink); flex:1; }
.testi-name{ margin-top:18px; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-deep); }
.testi-dots{ display:flex; justify-content:center; gap:11px; margin-top:34px; }
.testi-dots button{
position:relative; width:8px; height:8px; border-radius:50%;
border:none; padding:0; cursor:pointer;
background:rgba(42,41,38,0.22);
transition:background .35s var(--ease), transform .35s var(--ease);
}
.testi-dots button::before{
content:""; position:absolute; left:50%; top:50%;
width:26px; height:26px; transform:translate(-50%,-50%);
}
.testi-dots button:hover{ background:rgba(42,41,38,0.42); }
.testi-dots button.is-active{ background:var(--gold-deep); transform:scale(1.45); }
@media (prefers-reduced-motion: reduce){
.testi-track, .celeb-track{ transition-duration:.01ms; }
}
/* CTA banner */
.cta-banner{
background:linear-gradient(120deg,var(--peach),var(--peach-2)); color:var(--ink); text-align:center; padding:100px 0;
position:relative; overflow:hidden;
}
.cta-banner::before{ content:""; position:absolute; inset:-40%; background:radial-gradient(circle,rgba(176,141,70,0.18),transparent 60%); animation:pulseGlow 8s ease-in-out infinite; }
.cta-banner h2{ position:relative; z-index:2; }
.cta-banner .btn{ position:relative; z-index:2; margin-top:30px; }
/* footer */
footer{ background:var(--peach); color:var(--muted); padding:80px 0 0; position:relative; z-index:2; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:50px; padding-bottom:60px; border-bottom:1px solid rgba(251,250,247,0.1); }
.footer-brand-badge{ width:56px; height:56px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#453E36,var(--charcoal) 70%); padding:6px; box-shadow:0 0 0 1px var(--line-gold); margin-bottom:18px; }
footer h5{ color:var(--gold-deep); font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.26em; text-transform:uppercase; margin-bottom:20px; font-weight:500; }
footer ul li{ margin-bottom:12px; font-size:14px; }
footer ul li a:hover{ color:var(--ink); }
.footer-social{ display:flex; gap:14px; margin-top:20px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(51,46,41,0.20); display:flex; align-items:center; justify-content:center; transition:all .35s; }
.footer-social a:hover{ background:var(--charcoal); border-color:var(--charcoal); color:var(--peach); }
.footer-social svg{ width:15px; height:15px; }
.newsletter-form{ display:flex; margin-top:16px; border-bottom:1px solid rgba(51,46,41,0.22); padding-bottom:10px; }
.newsletter-form input{ background:transparent; border:none; color:var(--ink); flex:1; font-family:'Inter',sans-serif; font-size:14px; outline:none; }
.newsletter-form input::placeholder{ color:#8A847B; opacity:1; } /* grey — the old value was near-white on a peach footer */
.newsletter-form button{ background:none; border:none; color:var(--gold-deep); font-size:12px; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; }
.footer-bottom{
padding:26px 0 34px; display:flex; justify-content:space-between; font-size:12.5px;
color:var(--muted); flex-wrap:wrap; gap:10px;
}
/* clearance so the floating WhatsApp / back-to-top buttons never cover footer links */
.footer-bottom{ padding-right:86px; padding-left:70px; }
@media (max-width:760px){
.footer-bottom{ padding:22px 0 96px; padding-right:0; padding-left:0; justify-content:center; text-align:center; }
}
.footer-bottom a{ color:rgba(251,250,247,0.45); }
/* floating whatsapp */
.whatsapp-float{
position:fixed; bottom:28px; right:28px; z-index:900; width:58px; height:58px; border-radius:50%; background:#25D366;
display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,0.25);
}
.whatsapp-float svg{ width:28px; height:28px; fill:#fff; }
.whatsapp-float::before{
content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.55; animation:ping 2.2s ease-out infinite;
}
@keyframes ping{ 0%{ transform:scale(1); opacity:.55;} 100%{ transform:scale(1.9); opacity:0;} }
/* back to top */
.back-top{
position:fixed; bottom:28px; left:28px; z-index:900; width:44px; height:44px; border-radius:50%; background:var(--paper);
border:1px solid var(--line); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-soft);
opacity:0; pointer-events:none; transition:all .4s var(--ease);
}
.back-top.show{ opacity:1; pointer-events:auto; }
.back-top svg{ width:16px; height:16px; }
/* wishlist heart on cards */
.heart-btn{
position:absolute; top:16px; right:16px; z-index:5; width:36px; height:36px; border-radius:50%;
background:rgba(251,250,247,0.85); display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease);
}
.heart-btn svg{ width:16px; height:16px; stroke:var(--charcoal); fill:none; transition:all .3s; }
.heart-btn.active svg{ fill:var(--maroon); stroke:var(--maroon); }
.heart-btn:hover{ transform:scale(1.12); }
/* generic page hero (inner pages) */
.page-hero{
/* Was a dark maroon band. Now the same soft ground as the home page, so the
inner pages open the way the homepage does. */
background:linear-gradient(180deg, var(--ivory) 0%, var(--peach) 100%);
color:var(--ink); text-align:center;
padding:136px 32px 66px; position:relative; overflow:hidden;
border-bottom:1px solid var(--line-gold);
}
.page-hero::after{ content:none; } /* the dark vignette has nothing to sit on now */
.page-hero .hero-shimmer{ top:-460px; }
.page-hero .eyebrow{ position:relative; z-index:2; }
/* One rule for every inner-page title, so Services / Collections / Legacy /
Contact are identical in size and weight. */
.page-hero h1{
position:relative; z-index:2; margin-top:0;
font-size:clamp(34px,3.6vw,50px); font-weight:300; letter-spacing:.012em; color:var(--ink);
}
.breadcrumb{
position:relative; z-index:2; margin-top:16px; font-family:'Inter',sans-serif;
font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
}
.breadcrumb a:hover{ color:var(--gold-deep); } /* gold-light vanished on the new light band */
/* CTA banner headings — matched across pages */
.cta-banner h2{
font-size:clamp(21px,2.2vw,30px); font-weight:400; letter-spacing:0;
max-width:620px; margin:14px auto 0;
}
/* services */
.services-list{ display:flex; flex-direction:column; }
.service-row{
display:grid; grid-template-columns:70px 1fr 200px; align-items:center; gap:34px; padding:40px 0;
border-bottom:1px solid var(--line); transition:background .4s;
}
.service-row:hover{ background:rgba(176,141,70,0.05); }
.service-num{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; font-size:22px; letter-spacing:.06em; color:var(--gold); }
.service-row h3{ font-size:24px; margin-bottom:8px; }
.service-row p{ color:var(--muted); max-width:560px; font-size:15px; }
.service-row .btn{ justify-self:end; }
/* legacy timeline */
.timeline{ position:relative; max-width:800px; margin:0 auto; }
.timeline::before{ content:""; position:absolute; left:18px; top:0; bottom:0; width:1px; background:linear-gradient(var(--gold),var(--line-gold)); }
.timeline-item{ position:relative; padding-left:60px; margin-bottom:56px; }
.timeline-dot{ position:absolute; left:10px; top:4px; width:17px; height:17px; border-radius:50%; background:var(--ivory); border:2px solid var(--gold); }
.timeline-item .year{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; font-size:18px; letter-spacing:.1em; color:var(--gold-deep); margin-bottom:6px; }
.timeline-item p{ color:var(--muted); font-size:15px; max-width:560px; }
/* about split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.split .placeholder-art{ position:relative; border-radius:var(--radius); aspect-ratio:4/5; }
.stat-row{ display:flex; gap:44px; margin-top:34px; }
.stat b{ display:block; font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; font-size:30px; letter-spacing:.02em; color:var(--gold-deep); }
.stat span{ font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:60px; }
.contact-info-item{ display:flex; gap:18px; margin-bottom:30px; }
.contact-info-item .ci-icon{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line-gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item .ci-icon svg{ width:19px; height:19px; color:var(--gold-deep); }
.contact-info-item h4{ font-size:16px; margin-bottom:4px; }
.contact-info-item p{ color:var(--muted); font-size:14.5px; }
.map-embed{
aspect-ratio:16/10; border-radius:var(--radius); margin-top:24px; overflow:hidden;
border:1px solid var(--line); box-shadow:var(--shadow-soft); background:var(--cream);
}
.map-embed iframe{ display:block; width:100%; height:100%; filter:saturate(.92) contrast(1.02); }
.form-card{ background:var(--paper); border:1px solid var(--line); padding:44px; box-shadow:var(--shadow-soft); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group{ margin-bottom:22px; }
.form-group label{ display:block; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
/* Inputs need a visible boundary — a bare underline on white disappears.
Full border + faint tinted fill so the field reads as clickable at a glance. */
.form-group input, .form-group select, .form-group textarea{
width:100%; border:1px solid rgba(42,41,38,0.22); border-radius:3px;
background:#FCFBF8; padding:13px 14px; font-family:'Inter',sans-serif;
font-size:15px; color:var(--ink);
transition:border-color .25s, background .25s, box-shadow .25s;
}
.form-group input::placeholder, .form-group textarea::placeholder{ color:#A8968E; }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover{
border-color:rgba(42,41,38,0.38);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
outline:none; border-color:var(--gold); background:#fff;
box-shadow:0 0 0 3px rgba(176,141,70,0.18);
}
.form-group label{ color:var(--ink); font-weight:500; }
.form-group textarea{ resize:none; height:90px; }
.form-note{ font-size:12.5px; color:var(--muted); margin-top:16px; }
/* filters (collections page) */
.filter-bar{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:50px; }
.filter-chip{
padding:11px 24px; border:1px solid var(--line); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
transition:all .35s var(--ease); border-radius:30px;
}
.filter-chip.active, .filter-chip:hover{ background:var(--charcoal); color:var(--gold-light); border-color:var(--charcoal); }
/* ===== Single gallery grid — one collection, no categories ===== */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px 20px; }
.product-card{ display:block; position:relative; } /* often an — do not rely on grid blockification */
.product-card .placeholder-art{ border-radius:var(--radius); aspect-ratio:3/3.6; }
.product-card .gallery-frame{
/* This is an now (the whole photo links to the piece). Anchors are
display:inline by default, and aspect-ratio / overflow do not apply to
inline boxes — the frame collapsed to zero height and the image vanished. */
display:block;
position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:3/3.6;
box-shadow:0 8px 26px rgba(42,41,38,0.07); transition:box-shadow .5s var(--ease), transform .5s var(--ease);
}
.product-card:hover .gallery-frame{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(42,41,38,0.16); }
.product-card .gallery-frame .placeholder-art{ position:absolute; inset:0; aspect-ratio:auto; border-radius:0; }
/* real product photography */
.product-card .gallery-frame img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s var(--ease);
}
.product-card:hover .gallery-frame img{ transform:scale(1.055); }
/* thin gold hairline on hover — the small royal touch */
.product-card .gallery-frame::after{
content:""; position:absolute; inset:0; border:1px solid transparent; border-radius:var(--radius);
transition:border-color .45s var(--ease); pointer-events:none; z-index:4;
}
.product-card:hover .gallery-frame::after{ border-color:var(--line-gold); }
.product-meta{ padding:14px 2px 4px; }
.product-meta .meta-top{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.product-meta h4{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:15px; letter-spacing:0; line-height:1.5; }
.product-desc{
font-family:'Inter',sans-serif; font-size:12.5px; font-weight:300; line-height:1.65;
color:var(--muted); margin-top:7px; max-width:44ch;
}
@media (max-width:760px){
.product-meta .meta-top{ flex-direction:column; align-items:flex-start; gap:4px; }
.product-desc{ font-size:12px; margin-top:6px; }
}
.enquire-btn{
font-family:'Inter',sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
color:var(--gold-deep); border-bottom:1px solid rgba(143,110,27,0.45); padding-bottom:2px;
transition:color .3s, border-color .3s; white-space:nowrap;
}
.enquire-btn:hover{ color:var(--charcoal); border-color:var(--charcoal); }
.load-more-wrap{ text-align:center; margin-top:56px; }
.gallery-count{
font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
color:#635E56; text-align:center; margin-bottom:36px;
}
/* ===== Collection slideshow =====
The client's banners are supplied at 2.75:1 with any text already baked in,
so the frame matches that ratio exactly — nothing is cropped, no scrim. */
.slider-section{ padding:0; background:var(--cream); }
.slider{
position:relative; width:100%;
aspect-ratio:2.75 / 1; overflow:hidden;
cursor:grab;
touch-action:pan-y; /* horizontal drag is ours, vertical scroll stays the page's */
-webkit-user-select:none; user-select:none;
}
.slider.is-dragging{ cursor:grabbing; }
.slider-track{
display:flex; height:100%; width:100%;
transition:transform .6s cubic-bezier(.65,.02,.28,1);
will-change:transform;
}
.slide{
position:relative; flex:0 0 100%; height:100%; overflow:hidden; display:block;
}
.slide picture{ display:block; width:100%; height:100%; }
.slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.slider-dots{
position:absolute; left:0; right:0; bottom:20px; z-index:4;
display:flex; justify-content:center; gap:11px;
}
/* Small round points. The visible dot is 8px; the ::before pushes the tap
target out to 26px so it still meets the minimum touch size.
The banners are dark (measured luminance 5-42 of 255 where the dots sit),
so the points are light with a soft dark halo rather than the other way
round — the previous dark dots disappeared into the artwork. */
.slider-dot{
position:relative; width:8px; height:8px; border-radius:50%;
border:none; padding:0; cursor:pointer;
background:rgba(255,255,255,0.45);
box-shadow:0 1px 4px rgba(0,0,0,0.55);
transition:background .35s var(--ease), transform .35s var(--ease);
}
.slider-dot::before{
content:""; position:absolute; left:50%; top:50%;
width:26px; height:26px; transform:translate(-50%,-50%);
}
.slider-dot:hover{ background:rgba(255,255,255,0.75); }
.slider-dot.is-active{ background:var(--gold-light); transform:scale(1.45); }
@media (max-width:760px){
/* Taller on a phone: 2.75:1 was only 142px on a 390px screen, which read as
a strip rather than a banner. The images swapped in at this width are
purpose-built at 2:1 with the artwork padded — not cropped — so nothing
from the design is lost. */
.slider{ aspect-ratio:2 / 1; }
.slider-dots{ bottom:14px; gap:9px; }
.slider-dot{ width:7px; height:7px; }
}
@media (prefers-reduced-motion: reduce){
.slider-track{ transition-duration:.01ms; }
}
/* ===== Ornamental section break =====
Two hairlines meeting a small gold lozenge — signals a section has ended
when two panels share the same background colour. */
/* Sits between two sections, so the space above it must equal the space
below. Below is the next section's own 110px top padding, so the divider
carries a matching 110px above and the About panel's bottom padding is
removed — otherwise it stacks on top and pushes the line off centre. */
.section-break{
display:flex; align-items:center; justify-content:center; gap:18px;
padding:110px 0 0; max-width:1240px; margin:0 auto;
}
.section-break::before, .section-break::after{
content:""; height:1px; flex:1; max-width:220px;
background:linear-gradient(90deg, transparent, var(--line-gold));
}
.section-break::after{ background:linear-gradient(90deg, var(--line-gold), transparent); }
.section-break i{
width:9px; height:9px; transform:rotate(45deg); display:block;
border:1px solid var(--gold); background:rgba(176,141,70,0.18);
}
@media (max-width:760px){
.section-break{ padding-top:64px; gap:12px; } /* matches the 64px mobile section padding */
.section-break::before, .section-break::after{ max-width:90px; }
}
/* ===== Homepage About summary ===== */
.about-summary{ padding-bottom:0; } /* the divider owns the gap now */
.about-summary .split{ gap:64px; align-items:center; }
.about-media{
position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5;
box-shadow:var(--shadow-soft);
}
.about-media img{ width:100%; height:100%; object-fit:cover; }
.about-summary .section-sub{ max-width:520px; }
.about-summary .stat-row{ margin-top:30px; }
.about-summary .load-more-wrap{ margin-top:44px; }
@media (max-width:1080px){
.about-summary .split{ gap:40px; }
.about-media{ aspect-ratio:16/10; }
}
/* ===== Craft process / behind the scenes ===== */
/* ===== Craftsmanship: video + one paragraph =====
Replaces the old six-step grid. The video frame is a fixed 16:9 slot so the
layout does not shift when the real workshop film is dropped in later. */
.craft-split{
display:grid; grid-template-columns:1.05fr 1fr; gap:62px; align-items:center;
}
.craft-video{
position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
border:1px solid rgba(232,206,122,0.26);
box-shadow:0 24px 60px rgba(0,0,0,0.34);
background:linear-gradient(150deg, #453E36 0%, #332E29 55%, #26221E 100%);
}
.craft-video video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-placeholder{
position:absolute; inset:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:16px; color:var(--gold-light);
}
.video-placeholder svg{ width:58px; height:58px; opacity:.72; }
.video-placeholder span{
font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.26em;
text-transform:uppercase; color:rgba(243,227,176,0.68);
}
.craft-copy p{
color:rgba(51,46,41,0.68); font-size:15.5px; line-height:1.85;
margin:16px 0 32px; max-width:520px;
}
.craft-copy p em{ color:var(--gold-deep); font-style:italic; }
@media (max-width:1080px){
.craft-split{ grid-template-columns:1fr; gap:38px; }
.craft-copy p{ max-width:none; }
}
@media (max-width:760px){
.video-placeholder svg{ width:46px; height:46px; }
.video-placeholder span{ font-size:10px; letter-spacing:.2em; }
}
/* ===== Lightbox ===== */
.lightbox{
position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
background:rgba(51,46,41,0.92); backdrop-filter:blur(10px);
opacity:0; pointer-events:none; transition:opacity .4s var(--ease); padding:64px 28px;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{
max-width:min(680px,92vw); max-height:82vh; object-fit:contain; border-radius:3px;
box-shadow:0 30px 80px rgba(0,0,0,0.55); transform:scale(.97); transition:transform .45s var(--ease);
}
.lightbox.open img{ transform:scale(1); }
.lightbox-cap{
position:absolute; bottom:34px; left:0; right:0; text-align:center; color:var(--ivory);
font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
}
.lightbox-close{
position:absolute; top:26px; right:32px; width:42px; height:42px; border-radius:50%;
border:1px solid rgba(251,250,247,0.45); color:var(--ivory); background:transparent;
display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1;
transition:background .3s, color .3s;
}
.lightbox-close:hover{ background:var(--ivory); color:var(--charcoal); }
.lightbox-nav{
position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
border:1px solid rgba(251,250,247,0.4); background:transparent; color:var(--ivory);
display:flex; align-items:center; justify-content:center; transition:background .3s, color .3s;
}
.lightbox-nav:hover{ background:var(--ivory); color:var(--charcoal); }
.lightbox-nav.prev{ left:26px; } .lightbox-nav.next{ right:26px; }
.lightbox-nav svg{ width:18px; height:18px; }
@media (max-width:760px){ .lightbox-nav{ display:none; } }
/* homepage teaser row */
.product-grid.grid-5-up{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1080px){ .product-grid.grid-5-up{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .product-grid.grid-5-up{ grid-template-columns:repeat(2,1fr); } }
/* responsive */
@media (max-width:1080px){
.grid-5{ grid-template-columns:repeat(3,1fr); }
.why-grid{ grid-template-columns:repeat(2,1fr); }
.footer-grid{ grid-template-columns:1fr 1fr; }
.product-grid{ grid-template-columns:repeat(3,1fr); }
.split{ grid-template-columns:1fr; }
.contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
.container{ padding:0 20px; }
.nav-links{ display:none; }
.hamburger{ display:flex; }
.site-nav{ padding:14px 18px; gap:14px; }
.site-nav.scrolled{ padding:9px 18px; }
/* On a phone the crest is a 42px smudge — the name reads instantly and the
row is calmer with one element instead of two. Desktop keeps both. */
.nav-logo-badge{ display:none; }
/* the full name has to fit a 390px phone alongside sign-in, wishlist and menu */
.nav-word{ display:block; font-size:13.5px; letter-spacing:.1em; }
.nav-word small{ font-size:7px; letter-spacing:.18em; margin-top:2px; }
/* the Google button label crowds a small header — keep the icon only */
.google-btn{ padding:10px; font-size:0; gap:0; }
.google-btn svg{ width:19px; height:19px; }
.nav-actions{ gap:15px; } /* was 12px — the three controls were touching */
.account-btn{ width:36px; height:36px; }
.account-initial{ line-height:36px; font-size:14px; }
/* keep the panel on screen on a narrow phone */
.account-menu{ width:min(268px, calc(100vw - 36px)); right:-6px; }
.grid-5{ grid-template-columns:repeat(2,1fr); }
.why-grid{ grid-template-columns:1fr; }
.footer-grid{ grid-template-columns:1fr 1fr; gap:34px; }
.product-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
.service-row{ grid-template-columns:1fr; text-align:left; gap:10px; padding:30px 0; }
.service-row .btn{ justify-self:start; margin-top:10px; }
section{ padding:64px 0; }
.form-row{ grid-template-columns:1fr; }
.form-card{ padding:28px 22px; }
.page-hero{ padding:104px 20px 44px; }
.section-head{ margin-bottom:40px; }
.stat-row{ gap:26px; flex-wrap:wrap; }
.stat b{ font-size:26px; }
.timeline::before{ left:14px; }
.timeline-item{ padding-left:46px; margin-bottom:40px; }
.testi-card{ flex:0 0 78vw; padding:28px; }
.testi-track{ gap:16px; }
.testi-carousel{
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.map-embed{ aspect-ratio:4/3; }
/* keep the floating buttons clear of the thumb / each other */
.whatsapp-float{ width:52px; height:52px; bottom:18px; right:18px; }
.whatsapp-float svg{ width:25px; height:25px; }
.back-top{ width:40px; height:40px; bottom:18px; left:18px; }
.btn{ padding:14px 26px; font-size:11.5px; }
.hero-crest{ width:78px; }
/* touch targets — comfortable for a thumb, not a mouse pointer */
.heart-btn{ width:42px; height:42px; top:10px; right:10px; }
.heart-btn svg{ width:18px; height:18px; }
.nav-icon-btn{ width:42px; height:42px; }
.enquire-btn{ padding:8px 0; font-size:10.5px; }
.mobile-menu a{ padding:10px 0; }
}
/* very small phones */
@media (max-width:400px){
/* .product-grid stays two-up on small phones — see the collection grid block */
.footer-grid{ grid-template-columns:1fr; }
.hero-ctas{ flex-direction:column; align-items:stretch; }
.hero-ctas .btn{ width:100%; }
}
/* ===== Wishlist toast =====
Fires when a piece is hearted. Signed out it offers the Google sign-in;
signed in it just confirms the save. Bottom-left so it never collides
with the floating WhatsApp button on the right. */
.toast-stack{
position:fixed; left:24px; bottom:24px; z-index:1400;
display:flex; flex-direction:column-reverse; gap:12px;
pointer-events:none;
}
.toast{
pointer-events:auto;
display:flex; align-items:flex-start; gap:14px;
min-width:290px; max-width:370px;
background:var(--paper); border:1px solid var(--line);
border-left:2px solid var(--gold);
border-radius:3px; padding:16px 18px;
box-shadow:0 20px 48px rgba(42,41,38,0.20);
opacity:0; transform:translateY(14px) scale(.98);
transition:opacity .38s var(--ease), transform .38s var(--ease);
}
.toast.is-in{ opacity:1; transform:translateY(0) scale(1); }
.toast.is-out{ opacity:0; transform:translateY(8px) scale(.98); }
.toast-icon{
flex-shrink:0; width:34px; height:34px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:rgba(176,141,70,0.13); color:var(--gold-deep);
}
.toast-icon svg{ width:17px; height:17px; }
.toast-body{ flex:1; min-width:0; }
.toast-title{
font-family:'Cormorant Garamond',Georgia,serif; font-size:14.5px;
color:var(--ink); line-height:1.45; margin-bottom:3px;
}
.toast-msg{
font-family:'Inter',sans-serif; font-size:12.5px; font-weight:300;
color:var(--muted); line-height:1.6;
}
.toast-actions{ display:flex; align-items:center; gap:14px; margin-top:13px; }
/* Google sign-in button, sized down for the toast */
.toast-google{
display:inline-flex; align-items:center; gap:9px;
background:#fff; border:1px solid rgba(42,41,38,0.20); border-radius:3px;
padding:8px 14px; cursor:pointer;
font-family:'Inter',sans-serif; font-size:11.5px; font-weight:500;
letter-spacing:.04em; color:var(--ink);
transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.toast-google:hover{ border-color:var(--gold); box-shadow:0 4px 14px rgba(42,41,38,0.12); }
.toast-google svg{ width:15px; height:15px; }
.toast-later{
background:none; border:none; padding:0; cursor:pointer;
font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.12em;
text-transform:uppercase; color:var(--muted);
border-bottom:1px solid transparent; transition:color .3s, border-color .3s;
}
.toast-later:hover{ color:var(--ink); border-bottom-color:var(--line); }
.toast-close{
flex-shrink:0; background:none; border:none; padding:0; cursor:pointer;
font-size:19px; line-height:1; color:rgba(42,41,38,0.32);
transition:color .3s;
}
.toast-close:hover{ color:var(--ink); }
@media (max-width:760px){
.toast-stack{ left:14px; right:14px; bottom:88px; } /* clear of the WhatsApp button */
.toast{ min-width:0; max-width:none; width:100%; }
}
@media (prefers-reduced-motion: reduce){
.toast{ transition-duration:.01ms; }
}
/* ===== Account =====
Signed out: the Google button. Signed in: the visitor's profile avatar,
which opens a menu holding their identity, Switch account and Log out.
Nothing signs you out by accident — logging out is a deliberate menu choice. */
.google-btn .gb-label{ white-space:nowrap; }
.nav-account{ position:relative; display:flex; align-items:center; }
.account-btn{
display:none; position:relative; width:38px; height:38px; padding:0;
border-radius:50%; border:1px solid var(--line-gold); cursor:pointer; overflow:hidden;
background:radial-gradient(circle at 34% 28%, #453E36, var(--charcoal) 74%);
box-shadow:0 4px 14px rgba(42,41,38,0.28);
transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.account-btn:hover{ border-color:var(--gold); box-shadow:0 6px 18px rgba(42,41,38,0.38); }
.account-btn .account-photo{ width:100%; height:100%; object-fit:cover; display:block; }
/* Centred both ways. Without text-align the letter sat at the left edge of a
38px circle and the border-radius clipped it off entirely. */
.account-initial{
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
font-family:'Cormorant Garamond',Georgia,serif; font-size:15px; font-weight:400;
color:var(--gold-light); letter-spacing:.02em; line-height:1;
}
/* An author `display` beats the browser's [hidden] rule, so state it here or
the initial keeps showing on top of a real profile photo. */
.account-initial[hidden], .account-initial-lg[hidden],
.account-photo[hidden], .account-photo-lg[hidden]{ display:none !important; }
body.is-signed-in .google-btn{ display:none; }
body.is-signed-in .account-btn{ display:block; }
.account-menu{
position:absolute; top:calc(100% + 14px); right:0; z-index:1100;
width:268px; background:var(--paper);
border:1px solid var(--line); border-top:2px solid var(--gold);
border-radius:4px; box-shadow:0 26px 60px rgba(42,41,38,0.24);
padding:6px; overflow:hidden;
opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top right;
transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.account-menu[hidden]{ display:none; }
.account-menu.is-open{ opacity:1; transform:translateY(0) scale(1); }
.account-head{ display:flex; align-items:center; gap:13px; padding:15px 14px 16px; }
.account-avatar{
position:relative; flex-shrink:0; width:42px; height:42px; border-radius:50%; overflow:hidden;
background:radial-gradient(circle at 34% 28%, #453E36, var(--charcoal) 74%);
box-shadow:0 0 0 1px var(--line-gold);
}
.account-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.account-initial-lg{
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
font-family:'Cormorant Garamond',Georgia,serif; font-size:17px; font-weight:400;
color:var(--gold-light); letter-spacing:.02em; line-height:1;
}
.account-id{ min-width:0; }
.account-name{
display:block; font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
font-size:14.5px; color:var(--ink); line-height:1.35;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.account-email{
display:block; font-family:'Inter',sans-serif; font-size:12px; font-weight:300; color:var(--muted);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;
}
.account-item{
display:flex; align-items:center; gap:12px; width:100%;
padding:12px 14px; border:none; border-radius:3px; background:none; cursor:pointer; text-align:left;
font-family:'Inter',sans-serif; font-size:13.5px; font-weight:400; color:var(--ink);
transition:background .22s var(--ease), color .22s var(--ease);
}
.account-item + .account-item{ margin-top:1px; }
.account-item:first-of-type{ border-top:1px solid var(--line); border-radius:0 0 3px 3px; margin-top:2px; }
.account-item svg{ width:16px; height:16px; flex-shrink:0; color:var(--gold-deep); }
.account-item:hover{ background:rgba(176,141,70,0.10); }
.account-item[data-act="logout"]{ color:var(--maroon); }
.account-item[data-act="logout"] svg{ color:var(--maroon); }
.account-item[data-act="logout"]:hover{ background:rgba(140,90,70,0.08); }
@media (prefers-reduced-motion: reduce){ .account-menu{ transition-duration:.01ms; } }
/* ===================================================================
CELEBRITY EDIT
A horizontal rail, like the reference. Portrait frames, name and the
piece worn sitting quietly underneath — no card, no border, no shadow.
Steps one item at a time, endlessly, the same way the reviews do.
=================================================================== */
.celeb-section{ background:var(--ivory); }
.celeb-head{ text-align:center; margin-bottom:44px; }
/* Viewport + moving track, the same construction as the reviews carousel.
The rail clips; the track inside it is the flex row that gets translated. */
.celeb-rail{
position:relative; overflow:hidden;
/* wide enough for three: centre at full size, one either side */
width:100%; max-width:1120px; margin:0 auto;
padding:14px 0 22px;
cursor:grab; touch-action:pan-y;
-webkit-user-select:none; user-select:none;
}
.celeb-rail.is-dragging{ cursor:grabbing; }
.celeb-track{
display:flex; gap:28px; align-items:center; will-change:transform;
transition:transform .72s cubic-bezier(.4,.02,.2,1);
}
/* Every item is the same width in layout terms; the size difference is a
transform, so the spacing stays even as the focus moves along. */
.celeb-item{
flex:0 0 clamp(230px, 24vw, 340px);
transform:scale(.80); transform-origin:center center;
opacity:.5; filter:saturate(.85);
transition:transform .72s cubic-bezier(.4,.02,.2,1),
opacity .6s var(--ease), filter .6s var(--ease);
}
.celeb-item.is-focus{
transform:scale(1); opacity:1; filter:none;
}
.celeb-item.is-focus .celeb-frame{ box-shadow:0 26px 60px rgba(42,41,38,0.16); }
.celeb-frame{
position:relative; aspect-ratio:3/4; overflow:hidden;
background:var(--cream); border-radius:var(--radius);
}
.celeb-frame img{ width:100%; height:100%; object-fit:cover; display:block;
transition:transform .9s var(--ease); }
.celeb-item:hover .celeb-frame img{ transform:scale(1.04); }
/* placeholder state until the photography arrives */
.celeb-frame.is-empty{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
background:linear-gradient(168deg, #F5F2EB 0%, var(--cream) 60%, #EDE8DE 100%);
border:1px solid var(--line);
}
.celeb-frame.is-empty svg{ width:30px; height:30px; color:var(--gold); opacity:.5; }
.celeb-frame.is-empty span{
font-family:'Inter',sans-serif; font-size:9.5px; letter-spacing:.34em;
text-transform:uppercase; color:var(--muted);
}
/* the caption only reads on the focused item */
.celeb-meta{ padding:18px 2px 0; text-align:center;
opacity:0; transition:opacity .5s var(--ease); }
.celeb-item.is-focus .celeb-meta{ opacity:1; }
.celeb-name{
font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
font-size:19px; color:var(--ink); line-height:1.3;
}
.celeb-piece{
display:block; margin-top:5px;
font-family:'Inter',sans-serif; font-size:11.5px; font-weight:300;
color:var(--muted); line-height:1.6;
}
@media (max-width:760px){
.celeb-track{ gap:14px; }
.celeb-item{ flex:0 0 66vw; transform:scale(.84); }
.celeb-item.is-focus{ transform:scale(1); }
.celeb-head{ margin-bottom:32px; }
}
/* ===== Text inside the peach panels =====
These paragraphs used to carry an inline near-white colour written for the
old dark panels. The inline styles are gone; the stylesheet owns it now, so
a future palette change lands here and cannot be missed in the markup. */
.why-item p,
.timeline-item p{ color:var(--muted); }
/* Footer address and phone block — the inline light colour these carried is
gone too, so the colour lives here with everything else. */
footer p{ color:var(--muted); }
footer a{ color:var(--muted); transition:color .3s var(--ease); }
footer a:hover{ color:var(--ink); }
/* ===================================================================
ENQUIRY CHOOSER (services page)
Replaces five identical Enquire buttons with one. Each option opens
WhatsApp with the message pre-written, so the shop knows what the
enquiry is about before they reply.
=================================================================== */
.enquiry-modal{
position:fixed; inset:0; z-index:1500;
display:flex; align-items:center; justify-content:center; padding:24px;
background:rgba(42,41,38,0.42); backdrop-filter:blur(3px);
opacity:0; transition:opacity .3s var(--ease);
}
.enquiry-modal[hidden]{ display:none; }
.enquiry-modal.is-open{ opacity:1; }
.enquiry-panel{
position:relative; width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
background:var(--ivory); border:1px solid var(--line);
border-top:2px solid var(--gold);
border-radius:3px; padding:38px 38px 30px;
box-shadow:0 32px 80px rgba(42,41,38,0.22);
transform:translateY(12px) scale(.985);
transition:transform .34s var(--ease);
}
.enquiry-modal.is-open .enquiry-panel{ transform:translateY(0) scale(1); }
.enquiry-panel h3{
font-size:clamp(23px,2.4vw,29px); font-weight:400;
margin:12px 0 26px; color:var(--ink);
}
.enquiry-close{
position:absolute; top:16px; right:20px;
background:none; border:none; padding:6px; cursor:pointer;
font-size:24px; line-height:1; color:var(--muted); transition:color .3s;
}
.enquiry-close:hover{ color:var(--ink); }
.enquiry-options{ display:flex; flex-direction:column; }
.enquiry-option{
display:block; padding:16px 2px;
border-top:1px solid var(--line);
transition:padding-left .3s var(--ease), background .3s var(--ease);
}
.enquiry-option:last-child{ border-bottom:1px solid var(--line); }
.enquiry-option:hover{ padding-left:12px; background:rgba(176,141,70,0.05); }
.eo-name{
display:block; font-family:'Cormorant Garamond',Georgia,serif;
font-weight:600; font-size:18px; color:var(--ink); line-height:1.35;
}
.eo-note{
display:block; margin-top:3px;
font-family:'Inter',sans-serif; font-size:12.5px; font-weight:300; color:var(--muted);
}
.enquiry-foot{
margin-top:24px; font-family:'Inter',sans-serif;
font-size:12.5px; font-weight:300; color:var(--muted); text-align:center;
}
.enquiry-foot a{ color:var(--gold-deep); border-bottom:1px solid var(--line-gold); }
.enquiry-foot a:hover{ color:var(--ink); }
@media (max-width:560px){
.enquiry-panel{ padding:30px 22px 24px; max-height:92vh; }
.enquiry-panel h3{ margin-bottom:18px; }
}
@media (prefers-reduced-motion: reduce){
.enquiry-modal, .enquiry-panel{ transition-duration:.01ms; }
}
/* ===================================================================
NAV ON A LIGHT PAGE
index.html opens on the video, so the nav starts light-on-dark there.
The four inner pages now open on a light band, so the same treatment
made the links and the active tab invisible. These pages get the dark
treatment from the start — the scrolled state then changes nothing.
=================================================================== */
.site-nav.nav-on-light{
background:rgba(251,250,247,0.86);
backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
}
.site-nav.nav-on-light .nav-links a{ color:var(--ink); }
.site-nav.nav-on-light .nav-links a.active{ color:var(--gold-deep); }
.site-nav.nav-on-light .nav-word{ color:var(--ink); }
.site-nav.nav-on-light .nav-word small{ color:var(--gold-deep); }
.site-nav.nav-on-light .hamburger span{ background:var(--ink); }
.site-nav.nav-on-light .nav-icon-btn{ color:var(--ink); border-color:rgba(42,41,38,0.20); }
/* ===================================================================
WISHLIST PAGE
Saved pieces render from the snapshot taken when they were hearted,
so a piece the shop later removes still appears — marked, not deleted.
=================================================================== */
.wl-bar{
display:flex; align-items:baseline; justify-content:space-between;
gap:20px; flex-wrap:wrap; margin-bottom:34px;
padding-bottom:16px; border-bottom:1px solid var(--line);
}
.wl-count{
font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:.28em;
text-transform:uppercase; color:var(--muted);
}
.wl-limit{
margin:-16px 0 30px;
font-family:'Inter',sans-serif; font-size:13px; color:var(--gold-deep);
background:rgba(176,141,70,0.09); border-left:2px solid var(--gold);
padding:13px 16px; border-radius:2px;
}
.wl-card{ position:relative; }
.wl-frame{ display:block; }
/* the remove heart sits on the frame, always filled since it is always saved */
.wl-remove{
position:absolute; top:14px; right:14px; z-index:3;
border:none; padding:0; cursor:pointer;
}
.wl-added{
margin-top:8px;
font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.06em; color:var(--muted);
}
/* a piece that is no longer on the site */
.wl-gone{
position:absolute; inset:auto 0 0 0; z-index:2;
display:none; padding:11px 14px;
background:rgba(42,41,38,0.82); color:var(--ivory);
font-family:'Inter',sans-serif; font-size:10px; letter-spacing:.24em; text-transform:uppercase;
text-align:center;
}
.wl-card.is-gone .wl-gone{ display:block; }
.wl-card.is-gone .gallery-frame{ background:var(--cream); }
.wl-card.is-gone .gallery-frame img{ filter:grayscale(1); opacity:.45; }
.wl-card.is-gone .product-meta h4{ color:var(--muted); }
.wl-card.is-gone .enquire-btn{ opacity:.4; pointer-events:none; }
/* nothing saved */
.wl-empty{ text-align:center; padding:60px 20px 30px; }
.wl-empty svg{ width:40px; height:40px; color:var(--gold); opacity:.45; margin-bottom:20px; }
.wl-empty h3{ font-size:26px; font-weight:400; margin-bottom:10px; }
.wl-empty p{
font-family:'Inter',sans-serif; font-size:14px; font-weight:300; color:var(--muted);
max-width:380px; margin:0 auto 28px; line-height:1.8;
}
@media (max-width:760px){
.wl-bar{ margin-bottom:24px; }
.wl-empty{ padding:40px 12px 20px; }
}
/* Google's rendered sign-in button, sized to sit in the nav next to the
wishlist heart. Google controls the inside of the button, so only the
wrapper can be styled. */
.gsi-host{ display:flex; align-items:center; line-height:0; }
.gsi-host > div{ color-scheme:light; }
@media (max-width:760px){
.gsi-host{ transform:scale(.92); transform-origin:right center; }
}
/* ===================================================================
HERITAGE TIMELINE
Alternating eras down a central gold rule. The year is set very large
and very light — it carries the section, so the copy can stay quiet.
=================================================================== */
.era-list{ position:relative; max-width:1080px; margin:0 auto; }
/* the rule the eras hang from */
.era-list::before{
content:""; position:absolute; left:50%; top:12px; bottom:12px; width:1px;
background:linear-gradient(180deg, transparent, var(--line-gold) 8%, var(--line-gold) 92%, transparent);
}
.era{
position:relative; display:grid; grid-template-columns:1fr auto 1fr;
align-items:center; gap:0; margin-bottom:86px;
}
.era:last-child{ margin-bottom:0; }
/* the marker on the rule */
/* No marker on desktop: the year itself sits on the rule and masks it, so a
diamond underneath was simply hidden. It comes back on mobile, where the
year is offset to the right of the rule. */
.era::after{ content:none; }
/* The box exists only to hide the rule behind the year, so it must be the
SAME colour as the section it sits on — .cream-panel, not --ivory. It was
--ivory, which is lighter, so it read as a white rectangle. It also hugs
its text now: at a fixed 96px, a long year like "Today" overflowed. */
.era-year{
grid-column:2; grid-row:1; justify-self:center; align-self:center;
position:relative; z-index:2;
font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
font-size:clamp(28px,3.1vw,42px); line-height:1; color:var(--gold-deep);
background:var(--cream); padding:16px 22px; text-align:center;
white-space:nowrap;
}
.era-media{ grid-column:1; grid-row:1; padding-right:52px; }
.era-copy { grid-column:3; grid-row:1; padding-left:52px; }
/* alternate sides */
.era:nth-child(even) .era-media{ grid-column:3; padding:0 0 0 52px; }
.era:nth-child(even) .era-copy { grid-column:1; padding:0 52px 0 0; text-align:right; }
.era-frame{
position:relative; aspect-ratio:4/3; overflow:hidden;
border-radius:var(--radius); background:var(--cream);
box-shadow:var(--shadow-soft);
}
.era-frame img{ width:100%; height:100%; object-fit:cover; display:block;
filter:saturate(.82) contrast(.96); }
.era-frame.is-empty{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
background:linear-gradient(168deg, #F6F2EC 0%, var(--cream) 62%, #EFE9E0 100%);
border:1px solid var(--line);
}
.era-frame.is-empty svg{ width:28px; height:28px; color:var(--gold); opacity:.5; }
.era-frame.is-empty span{
font-family:'Inter',sans-serif; font-size:9px; letter-spacing:.32em;
text-transform:uppercase; color:var(--muted);
}
.era-caption{
margin-top:12px;
font-family:'Inter',sans-serif; font-size:11.5px; font-weight:300;
font-style:italic; color:var(--muted); line-height:1.6;
}
.era-copy h3{ font-size:clamp(21px,2.1vw,27px); font-weight:400; margin-bottom:12px; }
.era-copy p{
font-family:'Inter',sans-serif; font-size:14.5px; font-weight:300;
line-height:1.9; color:var(--muted);
}
/* stack on smaller screens — the rule and alternation stop making sense */
/* On a phone the three parts stack in one column, in reading order:
1 year
2 photograph
3 story
Each needs an explicit grid-row. Setting only grid-column left all three
on the desktop's row 1, so they landed in the same cell and drew on top of
one another — the year printed over the photograph. */
@media (max-width:900px){
.era-list::before{ left:13px; }
.era{
grid-template-columns:1fr;
grid-template-rows:auto auto auto;
gap:0; margin-bottom:56px; padding-left:42px;
}
.era::after{
content:""; position:absolute; left:13px; top:14px;
width:9px; height:9px; margin:0 0 0 -4.5px;
transform:rotate(45deg); border:1px solid var(--gold);
background:var(--cream);
}
.era-year{
grid-column:1; grid-row:1;
justify-self:start; align-self:start; width:auto;
padding:0 0 16px; background:none;
font-size:clamp(27px,7.5vw,36px); line-height:1;
white-space:normal;
}
.era-media,
.era:nth-child(even) .era-media{
grid-column:1; grid-row:2; padding:0 0 20px;
}
.era-copy,
.era:nth-child(even) .era-copy{
grid-column:1; grid-row:3; padding:0; text-align:left;
}
.era-frame{ aspect-ratio:3/2; } /* a little shorter on a narrow screen */
.era-caption{ margin-top:10px; }
.era-copy h3{ margin-bottom:10px; }
}
@media (max-width:520px){
.era{ padding-left:34px; margin-bottom:46px; }
.era-list::before{ left:9px; }
.era::after{ left:9px; }
}
/* review link + appointment button under the reviews carousel */
.reviews-actions{
display:flex; align-items:center; justify-content:center;
gap:30px; flex-wrap:wrap; margin-top:38px;
}
.review-link{
display:inline-flex; align-items:center; gap:8px;
font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.14em;
text-transform:uppercase; color:var(--gold-deep);
border-bottom:1px solid var(--line-gold); padding-bottom:3px;
transition:color .3s var(--ease), border-color .3s var(--ease);
}
.review-link svg{ width:13px; height:13px; }
.review-link:hover{ color:var(--ink); border-bottom-color:var(--ink); }
@media (max-width:560px){
.reviews-actions{ flex-direction:column; gap:20px; }
}
/* ===================================================================
ENQUIRE ON WHATSAPP
One button, at the end of a page — not repeated under every visual.
Reads as a proper call to action rather than a label on each photo.
=================================================================== */
.btn-whatsapp{
background:#25D366; border-color:#25D366; color:#fff;
box-shadow:0 8px 22px rgba(37,211,102,0.24);
}
.btn-whatsapp:hover{
background:#1FB855; border-color:#1FB855; color:#fff;
box-shadow:0 12px 30px rgba(37,211,102,0.32);
}
.btn-whatsapp svg{ width:17px; height:17px; flex-shrink:0; }
/* when it sits beside other buttons in a closing banner */
.cta-actions .btn-whatsapp{ box-shadow:none; }
.load-more-wrap .btn + .btn-whatsapp{ margin-left:14px; }
@media (max-width:560px){
.load-more-wrap .btn + .btn-whatsapp{ margin:14px 0 0; }
.load-more-wrap{ display:flex; flex-direction:column; align-items:center; gap:0; }
}
/* ===================================================================
COLLECTION GRID ON MOBILE
Two up rather than one enormous card per screen — a shopper can take
in several pieces at a glance instead of scrolling one at a time.
=================================================================== */
@media (max-width:760px){
.product-grid{ grid-template-columns:repeat(2,1fr); gap:14px 12px; }
.product-card .gallery-frame{ aspect-ratio:3/4; }
.product-meta{ padding-top:10px; }
.product-meta h4{ font-size:13px; line-height:1.35; }
.product-desc{ font-size:11.5px; line-height:1.6; }
.heart-btn{ width:32px; height:32px; top:8px; right:8px; }
.heart-btn svg{ width:14px; height:14px; }
}
@media (max-width:380px){
.product-grid{ gap:12px 10px; }
.product-meta h4{ font-size:12px; }
.product-desc{ display:none; } /* names only — descriptions are on the piece page */
}
/* ===================================================================
PIECE PAGE
Photograph first, then the story, then a way back to the collection.
=================================================================== */
.piece{ background:var(--ivory); }
.piece-media{
width:100%; background:var(--cream);
aspect-ratio:4/5; max-height:78vh; overflow:hidden;
}
.piece-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.piece-body{ max-width:660px; margin:0 auto; padding:52px 0 96px; text-align:center; }
.piece-crumb{ margin:0 0 26px; }
.piece-body h1{
font-size:clamp(28px,3.4vw,44px); font-weight:300; letter-spacing:.01em; margin-bottom:18px;
}
.piece-desc{
font-family:'Cormorant Garamond',Georgia,serif;
font-size:clamp(17px,1.6vw,21px); font-weight:300; line-height:1.72; color:var(--muted);
margin:0 auto 34px; max-width:520px;
}
.piece-facts{
list-style:none; margin:0 auto 38px; padding:26px 0; max-width:460px;
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
display:flex; flex-direction:column; gap:13px;
}
.piece-facts li{
display:flex; justify-content:space-between; gap:18px;
font-family:'Inter',sans-serif; font-size:13px; font-weight:300; color:var(--ink);
}
.piece-facts span{
color:var(--gold-deep); font-size:9.5px; letter-spacing:.26em;
text-transform:uppercase; padding-top:3px; flex-shrink:0;
}
.piece-actions{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:44px; }
.piece-heart{ position:static; width:46px; height:46px; flex-shrink:0; }
.piece-back{ padding-top:34px; border-top:1px solid var(--line); }
@media (max-width:760px){
.piece-media{ aspect-ratio:1/1; max-height:none; }
.piece-body{ padding:34px 0 68px; }
.piece-facts li{ flex-direction:column; gap:3px; text-align:left; }
.piece-facts{ text-align:left; }
}
/* ===================================================================
PRODUCT DETAIL PAGE
Mobile first: full-bleed swipeable gallery, then the name, then the
enquiry button — reachable without hunting. Desktop lifts the same
parts into two columns rather than becoming a different page.
=================================================================== */
.pdp{ padding:96px 0 70px; }
.pdp-crumb{ margin:0 0 22px; }
/* ---- gallery ---- */
.pdp-gallery{
position:relative; overflow:hidden; border-radius:var(--radius);
background:var(--cream); cursor:grab; touch-action:pan-y;
-webkit-user-select:none; user-select:none;
}
.pdp-gallery.is-dragging{ cursor:grabbing; }
.pdp-gallery[data-single] { cursor:default; }
.pdp-track{
display:flex; will-change:transform;
transition:transform .55s cubic-bezier(.4,.02,.2,1);
}
.pdp-slide{ flex:0 0 100%; }
.pdp-slide img{ width:100%; height:100%; aspect-ratio:5/6; object-fit:cover; display:block; }
.pdp-dots{
position:absolute; left:0; right:0; bottom:16px; z-index:3;
display:flex; justify-content:center; gap:9px;
}
.pdp-dot{
position:relative; width:7px; height:7px; border-radius:50%;
border:none; padding:0; cursor:pointer;
background:rgba(255,255,255,0.55); box-shadow:0 1px 4px rgba(0,0,0,0.4);
transition:background .3s var(--ease), transform .3s var(--ease);
}
.pdp-dot::before{ content:""; position:absolute; left:50%; top:50%;
width:26px; height:26px; transform:translate(-50%,-50%); }
.pdp-dot.is-active{ background:#fff; transform:scale(1.4); }
/* ---- information ---- */
.pdp-info{ padding-top:30px; }
.pdp-info h1{
font-size:clamp(26px,3.2vw,38px); font-weight:300;
margin:12px 0 14px; line-height:1.2;
}
.pdp-short{
font-family:'Inter',sans-serif; font-size:15px; font-weight:300;
line-height:1.85; color:var(--muted); max-width:520px;
}
.pdp-code{
margin-top:16px; font-family:'Inter',sans-serif; font-size:10.5px;
letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
/* A video in the product gallery sits in the same frame as the photographs, so
swiping between them feels like one gallery rather than two things. */
.pdp-slide-video{ display:flex; align-items:center; justify-content:center; background:var(--charcoal); }
.pdp-slide-video video{ width:100%; height:100%; object-fit:cover; display:block; }
.pdp-actions{ display:flex; flex-direction:column; gap:10px; margin:26px 0 12px; }
.pdp-cta{ display:flex; justify-content:center; width:100%; margin:0; }
/* ---- Save to Wishlist (product page) ----
Shares the .heart-btn class so it inherits the one wishlist click handler in
script.js. Everything below undoes the round floating-icon styling that class
carries on the Collections grid and makes it a full-width secondary button —
deliberately quieter than the green WhatsApp CTA above it. */
.heart-btn.pdp-wish{
position:static; width:100%; height:auto; border-radius:2px;
gap:10px; padding:15px 26px;
background:transparent; border:1px solid var(--charcoal);
font-family:'Inter',sans-serif; font-size:11px; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; color:var(--charcoal);
cursor:pointer;
}
.heart-btn.pdp-wish:hover{ transform:none; background:var(--charcoal); color:var(--ivory); }
.heart-btn.pdp-wish svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; }
.heart-btn.pdp-wish:hover svg{ stroke:currentColor; }
/* saved state — heart fills, button reads back the fact */
.heart-btn.pdp-wish.active{ background:var(--peach); border-color:var(--peach-deep); color:var(--charcoal); }
.heart-btn.pdp-wish.active svg{ fill:var(--maroon); stroke:var(--maroon); }
.heart-btn.pdp-wish.active:hover{ background:var(--peach-2); color:var(--charcoal); }
.heart-btn.pdp-wish.active:hover svg{ fill:var(--maroon); stroke:var(--maroon); }
/* one label at a time, swapped by the .active class — no extra JS needed */
.pdp-wish .pdp-wish-on{ display:none; }
.pdp-wish.active .pdp-wish-add{ display:none; }
.pdp-wish.active .pdp-wish-on{ display:inline; }
.pdp-note{
font-family:'Inter',sans-serif; font-size:12.5px; font-weight:300;
color:var(--muted); text-align:center;
}
.pdp-note a{ color:var(--gold-deep); border-bottom:1px solid var(--line-gold); }
/* ---- collapsible detail ---- */
.pdp-acc{ margin-top:34px; border-top:1px solid var(--line); }
.pdp-acc details{ border-bottom:1px solid var(--line); }
.pdp-acc summary{
list-style:none; cursor:pointer; padding:17px 30px 17px 0; position:relative;
font-family:'Inter',sans-serif; font-size:11.5px; letter-spacing:.2em;
text-transform:uppercase; color:var(--ink);
}
.pdp-acc summary::-webkit-details-marker{ display:none; }
.pdp-acc summary::after{
content:""; position:absolute; right:4px; top:50%; width:9px; height:9px;
margin-top:-6px; border-right:1px solid var(--gold-deep); border-bottom:1px solid var(--gold-deep);
transform:rotate(45deg); transition:transform .3s var(--ease);
}
.pdp-acc details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.pdp-acc-body{ padding:0 0 20px; }
.pdp-acc-body p{
font-family:'Inter',sans-serif; font-size:14px; font-weight:300;
line-height:1.85; color:var(--muted); margin:0;
}
.pdp-acc details.is-todo summary{ color:var(--muted); }
/* ---- related ---- */
.pdp-related{ padding-top:78px; }
.pdp-rel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pdp-rel-frame{
aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius); background:var(--cream);
}
.pdp-rel-frame img{ width:100%; height:100%; object-fit:cover; display:block;
transition:transform .8s var(--ease); }
.pdp-rel-card:hover .pdp-rel-frame img{ transform:scale(1.04); }
.pdp-rel-name{
margin-top:12px; font-family:'Cormorant Garamond',Georgia,serif;
font-weight:600; font-size:15px; color:var(--ink); line-height:1.4;
}
/* ---- desktop: two columns, same parts ---- */
@media (min-width:900px){
.pdp .container{ display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:start; }
.pdp-crumb{ grid-column:1 / -1; }
.pdp-gallery{ grid-column:1; position:sticky; top:104px; }
.pdp-info{ grid-column:2; padding-top:6px; }
.pdp-actions{ flex-direction:row; align-items:stretch; gap:12px; }
.pdp-cta{ width:auto; display:inline-flex; }
.heart-btn.pdp-wish{ width:auto; }
.pdp-note{ text-align:left; }
}
@media (max-width:900px){
/* full-bleed gallery on a phone — the photograph is the page */
.pdp{ padding-top:82px; }
.pdp-gallery{
width:100vw; margin-left:50%; transform:translateX(-50%);
border-radius:0;
}
}
@media (max-width:760px){
.pdp-rel-grid{ grid-template-columns:repeat(2,1fr); gap:14px 12px; }
.pdp-rel-name{ font-size:13px; }
.pdp-related{ padding-top:56px; }
}
@media (prefers-reduced-motion: reduce){ .pdp-track{ transition-duration:.01ms; } }