/* ============================================================================
Drashti Jewels — shared stylesheet
Used by index.html, collection.html and customisation.html.
Everything above the "CUSTOM DESIGN EXPERIENCE" block is the site's original
CSS, moved here unchanged from index.html so every page shares one design
system instead of drifting copies.
============================================================================ */
/* ===========================================================================
1. TOKENS
=========================================================================== */
:root{
/* palette — taken from the logo */
--navy-900:#0E2050;
--navy-700:#1B2F73;
--royal:#1F2EA0;
--gold:#C6A15B;
--ivory:#FAF8F4;
--white:#FFFFFF;
--ink:#1A1A1A;
/* derived — accessible variants.
--gold on --ivory is only 2.3:1, so it is never used for text on light
ground. --gold-ink is the darkened text-safe gold: 5.9:1 on ivory,
6.2:1 on white, and 5.2:1 on the tinted .landmark pill.
--gold stays as-is on navy, where it measures 6.3:1. */
--gold-ink:#7A5C1E;
--gold-hair:rgba(198,161,91,.42);
--muted:#4A5170;
--muted-on-navy:#C9CFE4;
--line:#E5E1D8;
/* modular type scale, 1.25 */
--fs-xs:.6875rem;
--fs-sm:.8125rem;
--fs-base:.9375rem;
--fs-md:1.0625rem;
--fs-lg:1.3125rem;
--fs-xl:clamp(1.5rem,1.2rem + 1.4vw,1.875rem);
--fs-2xl:clamp(1.875rem,1.4rem + 2.2vw,2.625rem);
--fs-3xl:clamp(2.25rem,1.5rem + 3.4vw,3.5rem);
/* 8px spacing scale */
--s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
--s6:48px; --s7:64px; --s8:80px; --s9:96px; --s10:128px;
/* vertical rhythm steps up with the viewport: phones get 56px, not 80px */
--sec-pad:56px;
--hero-pad:64px;
--shell:1200px;
--radius:4px;
--radius-lg:10px;
--shadow-sm:0 1px 2px rgba(14,32,80,.05), 0 6px 18px rgba(14,32,80,.06);
--shadow-md:0 2px 4px rgba(14,32,80,.06), 0 14px 40px rgba(14,32,80,.10);
--ease:cubic-bezier(.22,.61,.36,1);
}
/* ===========================================================================
2. RESET + BASE
=========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:132px}
body{
margin:0;
background:var(--ivory);
color:var(--ink);
font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
font-weight:300;
font-size:var(--fs-base);
line-height:1.75;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
/* the wrapper must not become a box of its own — every layout rule below
targets the , and display:contents keeps it the parent's direct child */
picture{display:contents}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{
font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
font-weight:600;
line-height:1.18;
letter-spacing:.005em;
margin:0;
color:var(--navy-900);
}
h1{font-size:var(--fs-3xl);line-height:1.1}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)}
p{margin:0 0 var(--s2)}
p:last-child{margin-bottom:0}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--s3)}
.section{padding-block:var(--sec-pad)}
.section--tight{padding-block:calc(var(--sec-pad) * .78)}
/* uppercase micro-label — the reference's eyebrow */
.eyebrow{
font-family:'Jost',sans-serif;
font-weight:400;
font-size:var(--fs-xs);
letter-spacing:.06em;
text-transform:uppercase;
color:var(--gold-ink);
margin:0 0 var(--s2);
}
.eyebrow--onnavy{color:var(--gold)}
.lede{font-size:var(--fs-md);color:var(--muted);max-width:62ch}
.lede--onnavy{color:var(--muted-on-navy)}
/* centred section header + thin ornamental divider */
.sec-head{text-align:center;max-width:70ch;margin:0 auto var(--s4)}
.sec-head p{margin-inline:auto}
.ornament{
display:flex;align-items:center;justify-content:center;gap:var(--s2);
margin:var(--s3) auto 0;max-width:220px;color:var(--gold);
}
.ornament::before,.ornament::after{
content:"";height:1px;flex:1;background:var(--gold-hair);
}
.ornament span{font-size:8px;line-height:1;transform:translateY(-1px)}
.ornament--left{margin-inline:0 0;justify-content:flex-start}
/* ===========================================================================
3. BUTTONS + LINKS
=========================================================================== */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
padding:14px var(--s3);
font-size:var(--fs-sm);font-weight:400;
letter-spacing:.06em;text-transform:uppercase;
text-decoration:none;border:1px solid transparent;border-radius:var(--radius);
cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
text-align:center;
}
.btn--primary{background:var(--navy-900);color:var(--white);border-color:var(--navy-900)}
.btn--primary:hover{background:var(--royal);border-color:var(--royal)}
.btn--gold{background:transparent;color:var(--navy-900);border-color:var(--gold)}
.btn--gold:hover{background:var(--gold);color:var(--navy-900);border-color:var(--gold)}
.btn--onnavy{background:transparent;color:var(--white);border-color:var(--gold)}
.btn--onnavy:hover{background:var(--gold);color:var(--navy-900)}
.btn--solid-light{background:var(--white);color:var(--navy-900);border-color:var(--white)}
.btn--solid-light:hover{background:var(--gold);border-color:var(--gold)}
.btn--sm{padding:10px var(--s2);font-size:var(--fs-xs)}
.btn--block{width:100%}
:where(a,button,summary,input,select,textarea):focus-visible{
outline:2px solid var(--royal);outline-offset:3px;border-radius:2px;
}
.on-navy :where(a,button,summary):focus-visible{outline-color:var(--gold)}
.skip{
position:absolute;left:var(--s2);top:0;z-index:200;
transform:translateY(-120%);
background:var(--navy-900);color:var(--white);padding:12px var(--s3);
font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;
}
.skip:focus{transform:translateY(0);top:var(--s2)}
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* ===========================================================================
4. UTILITY BAR + HEADER
=========================================================================== */
.utility{background:var(--navy-900);color:var(--muted-on-navy);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase}
.utility .shell{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s1) var(--s3);padding-block:9px;text-align:center}
.utility a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--gold-hair)}
.utility a:hover{color:var(--gold)}
.utility .u-sep{display:none;color:var(--gold);opacity:.7}
/* On phones the bar carries the hours alone. The number is permanently in the
thumb bar, and custom orders have a section of their own, so both would just
be pushing the hero down. */
.utility .u-phone,.utility .u-custom{display:none}
.site-header{position:sticky;top:0;z-index:80;background:rgba(250,248,244,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-block:var(--s2)}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;min-width:0;min-height:44px}
.brand img{max-height:40px;width:auto}
.brand-tag{display:none}
.status{
white-space:nowrap;
/* it is a
, so kill the base paragraph margin-bottom — otherwise it sits
8px above the logo and nav in the align-items:center header row */
margin:0;
display:inline-flex;align-items:center;gap:6px;flex:none;
padding:4px 10px;border:1px solid var(--line);border-radius:999px;
background:var(--white);
font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);white-space:nowrap;
}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
/* On phones the pill states the condition only — the utility bar one line
above already shows both shifts, and the long form was squeezing the logo
down to about 68px. The full wording returns at 600px. */
.status__full{display:none}
.status__short{display:inline}
.status[data-state="open"]{color:#1D6B3F;border-color:rgba(29,107,63,.28)}
.status[data-state="open"] .dot{background:#1D6B3F;box-shadow:0 0 0 3px rgba(29,107,63,.14)}
.status[data-state="closed"]{color:#8A2E2E;border-color:rgba(138,46,46,.24)}
.status[data-state="closed"] .dot{background:#8A2E2E}
.nav-desktop{display:none}
.header-actions{display:flex;align-items:center;gap:var(--s2)}
.header-actions .btn{display:none}
.hamburger{
display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
width:44px;height:44px;padding:0 10px;background:transparent;
border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;
}
.hamburger span{display:block;height:1.5px;background:var(--navy-900);transition:transform .3s var(--ease),opacity .2s linear}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.drawer{
display:grid;grid-template-rows:0fr;
overflow:hidden;background:var(--ivory);border-top:1px solid var(--line);
transition:grid-template-rows .35s var(--ease);
}
.drawer[data-open="true"]{grid-template-rows:1fr}
.drawer-inner{min-height:0;overflow:hidden}
.drawer nav{display:flex;flex-direction:column;padding:var(--s2) var(--s3) var(--s4)}
.drawer nav a{
padding:14px 0;text-decoration:none;color:var(--navy-900);
font-size:var(--fs-sm);letter-spacing:.12em;text-transform:uppercase;
border-bottom:1px solid var(--line);
}
.drawer nav a:hover{color:var(--gold-ink)}
.drawer .btn{margin-top:var(--s3)}
/* ===========================================================================
5. HERO
=========================================================================== */
.hero{position:relative;isolation:isolate;color:var(--white);text-align:center;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img,
.hero__media video{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* the clip is centre-weighted, so it does not need the still's 42% bias */
.hero__video{object-position:center;background:var(--navy-900)}
/* Legibility overlay. Deliberately lighter than the version tuned for the old
still image, so the clip reads through, and weighted towards the centre where
the headline and CTAs sit. */
.hero__scrim{
position:absolute;inset:0;z-index:-1;
background:
radial-gradient(ellipse 95% 75% at 50% 52%,rgba(14,32,80,.80) 0%,rgba(14,32,80,.62) 55%,rgba(14,32,80,.48) 100%),
linear-gradient(180deg,rgba(14,32,80,.50) 0%,rgba(14,32,80,.30) 40%,rgba(14,32,80,.78) 100%);
}
.hero__inner{padding-block:var(--hero-pad);display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
/* Measure in em, not ch: ch is the font's own "0" width, so it silently
changes whenever the family does. In Noto Serif Display, anything from 7.8em
to 8.6em gives the three-line "Jewellery chosen / the way it should /
be — in person."; 8.2em sits mid-range so rendering differences can't tip it,
and because em tracks font-size the break is identical on every screen. */
.hero h1{color:var(--white);max-width:8.2em;margin-bottom:0}
.hero__tagline{
font-weight:400;font-style:italic;
font-size:var(--fs-lg);color:var(--gold);margin:0;
}
/* ---------------------------------------------------------------------------
Hero typography — "quiet luxury".
Canela is a commercial face (Commercial Type) and is not on Google Fonts.
Noto Serif Display Light is the closest free match: high contrast, fine
hairlines, sharp serifs, slightly narrow proportions, and an italic that
carries the tagline. Only the headline and tagline are serif; the eyebrow,
description and buttons stay on Jost so the serif remains the one voice.
Scoped to .hero — every other section keeps Cormorant Garamond + Jost.
--------------------------------------------------------------------------- */
.hero h1,
.hero .hero__tagline{
font-family:'Noto Serif Display','Cormorant Garamond',Georgia,'Times New Roman',serif;
font-weight:300;
}
.hero h1{
/* Phones get a higher floor than a straight scale-down would: a light
hairline serif needs size to hold its strokes, and the narrow cut still
fits the three-line composition at 375px. */
font-size:clamp(2.5rem,1.7rem + 3.4vw,3.75rem);
line-height:1.1;
letter-spacing:-.015em;
}
.hero .hero__tagline{
font-style:italic;
font-size:clamp(1.1875rem,1rem + .6vw,1.5rem);
letter-spacing:.005em;
/* stops the tagline orphaning "People" when it wraps on phones */
text-wrap:balance;
}
/* the eyebrow is back on the sans so it frames the headline, not competes */
.hero .eyebrow{letter-spacing:.24em}
.hero .btn{letter-spacing:.14em}
.hero__note{font-size:.9375rem;letter-spacing:.02em;line-height:1.7;color:var(--muted-on-navy);max-width:44ch;margin:0}
.hero__cta{display:flex;flex-direction:column;gap:var(--s2);width:100%;max-width:320px;margin-top:var(--s3)}
/* ===========================================================================
6. TRUST STRIP
=========================================================================== */
.trust{background:var(--white);border-bottom:1px solid var(--line)}
.trust ul{list-style:none;margin:0;padding:var(--s5) 0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3)}
.trust li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.trust .ico{color:var(--gold-ink)}
.trust .ico svg{width:26px;height:26px;display:block}
.trust span{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--navy-900);line-height:1.5}
/* ===========================================================================
7. CARD GRIDS
=========================================================================== */
.grid{display:grid;gap:var(--s2)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--occasions{grid-template-columns:1fr}
.card{
background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);overflow:hidden;
display:flex;flex-direction:column;
transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.card:hover{box-shadow:var(--shadow-md)}
.card figure{margin:0;overflow:hidden;background:var(--navy-900)}
.card figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover figure img{transform:scale(1.05)}
.card__body{padding:var(--s2) var(--s2) var(--s3);text-align:center;display:flex;flex-direction:column;gap:6px;flex:1}
.card__body h3{font-size:var(--fs-md)}
.card__body p{font-size:var(--fs-sm);color:var(--muted);margin:0}
.card--material figure{aspect-ratio:4/5}
.card--occasion figure{aspect-ratio:16/10}
/* The occasion photos are tall portraits (768x1376) in 16:10 frames, so only a
~35% horizontal band of each is visible. --focus-y on each puts that
band on the jewellery instead of the geometric centre. */
.card--occasion figure img{object-position:50% var(--focus-y,50%)}
.card--occasion .card__body{text-align:left;padding-inline:var(--s3)}
/* ===========================================================================
8. NAVY PANELS
=========================================================================== */
.on-navy{background:var(--navy-900);color:var(--muted-on-navy)}
.on-navy h2,.on-navy h3,.on-navy h4{color:var(--white)}
.on-navy .ornament{color:var(--gold)}
/* full-bleed craft band */
.band{position:relative;isolation:isolate;overflow:hidden;text-align:center;color:var(--white)}
.band__media{position:absolute;inset:0;z-index:-2}
.band__media img{width:100%;height:100%;object-fit:cover}
.band__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,32,80,.93),rgba(14,32,80,.80) 45%,rgba(27,47,115,.88))}
.band .shell{padding-block:var(--s7)}
.band h2{color:var(--white);max-width:22ch;margin-inline:auto}
.band p{color:var(--muted-on-navy);max-width:56ch;margin:var(--s2) auto 0}
/* customisation split */
.split{display:grid;gap:var(--s5)}
.split figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(198,161,91,.28)}
.split figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split figcaption{
font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;
color:var(--muted-on-navy);padding:12px 2px 0;
}
.steps{list-style:none;counter-reset:step;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s3)}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start}
.steps li::before{
counter-increment:step;content:counter(step,decimal-leading-zero);
font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);color:var(--gold);
line-height:1.2;padding-top:2px;min-width:2ch;
}
.steps h3{font-size:var(--fs-md);margin-bottom:2px}
.steps p{font-size:var(--fs-sm);color:var(--muted-on-navy);margin:0}
.turnaround{
margin-top:var(--s4);padding:var(--s2) var(--s3);
border-left:2px solid var(--gold);background:rgba(255,255,255,.05);
font-size:var(--fs-sm);color:var(--muted-on-navy);
}
/* ===========================================================================
9. CERTIFICATION
=========================================================================== */
.assure{display:grid;gap:var(--s3)}
.assure article{
background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
padding:var(--s4) var(--s3);box-shadow:var(--shadow-sm);
}
.assure .ico{color:var(--gold-ink);margin-bottom:var(--s2)}
.assure .ico svg{width:30px;height:30px}
.assure h3{margin-bottom:8px}
.assure p{font-size:var(--fs-sm);color:var(--muted)}
.assure-note{
margin-top:var(--s4);text-align:center;font-size:var(--fs-sm);
color:var(--muted);max-width:60ch;margin-inline:auto;
}
/* ===========================================================================
10. ABOUT
=========================================================================== */
.about{display:grid;gap:var(--s5);align-items:center}
.about__figure{margin:0;max-width:560px;width:100%}
.about__figure .frame{
border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
box-shadow:var(--shadow-md);background:var(--white);
}
.about__figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.about__figure figcaption{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:12px}
/* Brand signature closing the story: centred and open, no card or border.
Widely tracked caps get a matching left pad so they stay optically centred
(tracking adds space after the last letter too). */
.signature{margin:var(--s7) auto 0;max-width:42rem;text-align:center}
.signature__label{
margin:0 0 var(--s3);padding-left:.26em;
font-size:var(--fs-xs);font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);
}
.signature__slogan{margin:0}
.signature__slogan p{
margin:0;
font-family:'Noto Serif Display','Cormorant Garamond',Georgia,serif;font-weight:300;
font-size:clamp(1.85rem,1.3rem + 2.4vw,3.1rem);line-height:1.2;letter-spacing:-.01em;
color:var(--navy-900);text-wrap:balance;
}
.signature .ornament{margin:var(--s4) auto var(--s3);max-width:160px}
.signature__mark{
padding-left:.2em;
font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
/* ===========================================================================
11. GOOGLE REVIEWS — live Google rating (assets/google-reviews.js) + link
=========================================================================== */
.greviews{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center}
.greviews__score{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:var(--s2)}
.greviews__score[hidden]{display:none}
/* stars: a gold layer clipped to the rating over a pale base, so 4.3 shows 4.3 */
.greviews__stars{position:relative;display:inline-block;margin:0;font-size:1.375rem;letter-spacing:.18em;line-height:1}
.greviews__stars-base{color:var(--line)}
.greviews__stars-fill{position:absolute;inset:0 auto 0 0;width:var(--fill,0%);overflow:hidden;white-space:nowrap;color:var(--gold)}
.greviews__rating{
margin:var(--s1) 0 0;font-family:'Noto Serif Display','Cormorant Garamond',Georgia,serif;font-weight:300;
font-size:clamp(1.9rem,1.5rem + 1.4vw,2.5rem);line-height:1.1;color:var(--navy-900);
}
.greviews__count{margin:0;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.greviews__invite{
margin:0 0 var(--s1);max-width:44ch;
font-family:'Noto Serif Display','Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;
font-size:var(--fs-md);line-height:1.6;color:var(--muted);text-wrap:balance;
}
.greviews__source{margin:0;font-size:var(--fs-xs);color:var(--muted)}
.greviews__source[hidden]{display:none}
/* ===========================================================================
12. VISIT US
=========================================================================== */
.visit{display:grid;gap:var(--s5)}
.address-block address{font-style:normal;font-size:var(--fs-md);line-height:1.85;color:var(--ink)}
.landmark{
display:inline-block;margin-top:var(--s2);padding:6px 12px;
background:rgba(198,161,91,.14);border:1px solid var(--gold-hair);border-radius:999px;
font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);
}
.front-figure{margin:var(--s4) 0 0}
.front-figure .frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
/* the frame keeps its original 525:236 storefront shape whatever photo is supplied;
the crop sits slightly above centre so the signboard is always in view */
.front-figure img{width:100%;aspect-ratio:525/236;object-fit:cover;object-position:50% 40%}
.front-figure figcaption{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:10px}
.hours{width:100%;border-collapse:collapse;margin-top:var(--s4);font-size:var(--fs-sm)}
.hours caption{
text-align:left;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;
color:var(--gold-ink);padding-bottom:var(--s2);
}
.hours th,.hours td{padding:11px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.hours th{font-weight:400;color:var(--navy-900);white-space:nowrap;padding-right:var(--s2)}
.hours td{color:var(--muted)}
.hours tr[data-closed] td,.hours tr[data-closed] th{color:#8A2E2E}
.hours .shift{display:block}
.visit-cta{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.visit-social{margin:var(--s3) 0 0;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase}
.visit-social a{color:var(--gold-ink);text-decoration:none;border-bottom:1px solid var(--gold-hair);padding-block:6px 2px;transition:border-color .25s var(--ease)}
.visit-social a:hover{border-bottom-color:var(--gold)}
.map-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:var(--white)}
.map-frame iframe{display:none;width:100%;height:320px;border:0}
.map-frame[data-map="on"] iframe{display:block}
.map-frame[data-map="on"] .map-load{display:none}
.map-load{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
width:100%;min-height:168px;padding:var(--s4) var(--s3);
background:var(--ivory);border:0;border-radius:var(--radius-lg);
cursor:pointer;text-align:center;color:var(--navy-900);
-webkit-tap-highlight-color:rgba(198,161,91,.25);
}
.map-load:active{background:#F2EEE6}
.map-load__pin{color:var(--gold-ink);font-size:10px;line-height:1}
.map-load__label{font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase}
.map-load__note{font-size:var(--fs-xs);color:var(--muted);letter-spacing:.02em;text-transform:none}
/* ===========================================================================
13. FAQ
=========================================================================== */
.faq{max-width:820px;margin-inline:auto}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:var(--s2);box-shadow:var(--shadow-sm)}
.faq summary{
list-style:none;cursor:pointer;padding:var(--s3);
display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);
font-family:'Cormorant Garamond',serif;font-size:var(--fs-md);font-weight:600;color:var(--navy-900);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-ink);font-family:'Jost',sans-serif;font-weight:300;font-size:1.35rem;line-height:1.1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 var(--s3) var(--s3);font-size:var(--fs-base);line-height:1.75;color:var(--muted);max-width:68ch}
/* ===========================================================================
14. ENQUIRY FORM
=========================================================================== */
.enquire{position:relative;isolation:isolate;overflow:hidden}
.enquire__media{position:absolute;inset:0;z-index:-2}
.enquire__media img{width:100%;height:100%;object-fit:cover}
.enquire__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,32,80,.94),rgba(14,32,80,.90))}
.form{max-width:720px;margin-inline:auto;display:grid;gap:var(--s3)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.field input,.field select,.field textarea{
/* 16px is a hard floor: iOS Safari zooms the page on focus for anything
smaller, and never zooms back out. Do not drop this below 16px. */
font-family:'Jost',sans-serif;font-weight:300;font-size:16px;
padding:12px 14px;color:var(--white);
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);
}
.field textarea{resize:vertical;min-height:110px}
.field select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select option{background:var(--navy-900);color:var(--white)}
.field input::placeholder,.field textarea::placeholder{color:rgba(201,207,228,.6)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.09)}
.field .err{font-size:var(--fs-xs);color:#FFB4A8;min-height:1em}
.field[data-invalid="true"] input,.field[data-invalid="true"] select{border-color:#FFB4A8}
.form-note{font-size:var(--fs-xs);color:var(--muted-on-navy);text-align:center;letter-spacing:.02em}
/* ===========================================================================
15. FOOTER + FLOATING WHATSAPP
=========================================================================== */
.site-footer{background:var(--navy-900);color:var(--muted-on-navy);font-size:var(--fs-sm)}
.site-footer h3{font-size:var(--fs-sm);font-family:'Jost',sans-serif;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s2)}
.footer-grid{display:grid;gap:var(--s4);padding-block:var(--s6) var(--s4)}
.site-footer img.logo{max-height:44px;width:auto;margin-bottom:var(--s3)}
.site-footer address{font-style:normal;line-height:1.85}
.footer-tel{display:inline-flex;align-items:center;min-height:44px}
.site-footer a{color:var(--white);text-decoration:none;border-bottom:1px solid transparent}
.site-footer a:hover{color:var(--gold);border-bottom-color:var(--gold-hair)}
/* two columns on phones: 44px rows for the thumb, four rows instead of
seven, so better targets in less space */
.footer-nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0}
.footer-nav a{display:inline-flex;align-items:center;min-height:44px;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-xs)}
.footer-hours{line-height:1.9}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.12);padding-block:var(--s3);
display:flex;flex-direction:column;gap:var(--s1);align-items:center;text-align:center;
font-size:var(--fs-xs);letter-spacing:.04em;color:rgba(201,207,228,.75);
}
/* Thumb-zone action bar (phones only).
A bar rather than a floating circle for two reasons: a circle pinned to one
corner sat on top of body copy and card buttons at every scroll depth, and
the bottom edge is the easiest place on a phone for a thumb to reach. Its
height is published as --thumbbar-h so body padding-bottom can reserve
exactly the same space and nothing is ever covered. */
:root{--thumbbar-h:60px}
.thumbbar{
position:fixed;left:0;right:0;bottom:0;z-index:90;
display:grid;grid-template-columns:1fr 1fr;
background:var(--navy-900);
border-top:1px solid var(--gold-hair);
box-shadow:0 -6px 24px rgba(14,32,80,.28);
/* sit above the iOS home indicator / Android gesture bar */
padding-bottom:env(safe-area-inset-bottom,0px);
}
.thumbbar__btn{
display:flex;align-items:center;justify-content:center;gap:9px;
min-height:var(--thumbbar-h);padding:0 var(--s2);
text-decoration:none;color:var(--white);
font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;
-webkit-tap-highlight-color:rgba(198,161,91,.25);
}
.thumbbar__btn svg{width:19px;height:19px;flex:none}
.thumbbar__btn--call{background:var(--gold);color:var(--navy-900)}
.thumbbar__btn--call:active{background:#B08F49}
.thumbbar__btn--wa:active{background:var(--navy-700)}
.thumbbar__btn--wa{border-left:1px solid rgba(198,161,91,.28)}
/* The bar owns the bottom of the screen, so the page gets a matching floor.
The +1px is the bar's own top border; without it the last line of the footer
sits one pixel under the bar. The script re-measures the real rendered
height on load and on resize, so this still holds if the visitor has bumped
their system font size and the buttons grow taller than 60px. */
body{padding-bottom:calc(var(--thumbbar-h) + 1px + env(safe-area-inset-bottom,0px))}
/* ===========================================================================
16. MOTION
=========================================================================== */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
/* the JS below also pauses it; this keeps the frame steady if JS is off */
.hero__video{animation:none}
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
.js .reveal{opacity:1;transform:none}
.card:hover figure img{transform:none}
}
/* ===========================================================================
17. BREAKPOINTS — 600 / 900 / 1200
=========================================================================== */
@media (min-width:600px){
:root{--fs-base:1rem;--sec-pad:72px;--hero-pad:88px}
.status__full{display:inline}
.status__short{display:none}
.utility .u-phone,.utility .u-custom{display:inline}
.footer-nav ul{grid-template-columns:1fr;gap:2px}
.shell{padding-inline:var(--s4)}
.utility .u-sep{display:inline}
.hero__cta{flex-direction:row;max-width:none;justify-content:center}
.trust ul{grid-template-columns:repeat(4,1fr)}
.grid--2{gap:var(--s4)}
.grid--occasions{grid-template-columns:repeat(2,1fr)}
.assure{grid-template-columns:repeat(2,1fr)}
.visit-cta{flex-direction:row}
.visit-cta .btn{flex:1}
.footer-grid{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)}
.map-frame iframe{height:380px}
}
@media (min-width:900px){
html{scroll-padding-top:112px}
:root{--sec-pad:96px;--hero-pad:128px}
.sec-head{margin-bottom:var(--s6)}
.grid{gap:var(--s3)}
.card__body{padding:var(--s3) var(--s2) var(--s4)}
.footer-grid{gap:var(--s5);padding-block:var(--s7) var(--s5)}
.brand img{max-height:50px}
/* brand-tag is held back until 1200px — below that the header is already
carrying the logo, the status pill, five nav links and a button. */
.brand-tag{display:none}
.hamburger{display:none}
.hero h1{line-height:1.05}
.drawer{display:none}
.nav-desktop{display:block}
.nav-desktop ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:12px}
.nav-desktop a{
text-decoration:none;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
white-space:nowrap;
color:var(--navy-900);padding-block:6px;
/* block, not inline: an inline anchor is positioned on the li's baseline,
which left the link text ~2px below the logo and the pill. The transparent
top border counterweights the hover underline. */
display:block;line-height:1.5;
border-top:1px solid transparent;border-bottom:1px solid transparent;
transition:color .25s var(--ease),border-color .25s var(--ease);
}
.nav-desktop a:hover{color:var(--gold-ink);border-bottom-color:var(--gold)}
.header-actions .btn{display:inline-flex;white-space:nowrap;letter-spacing:.12em}
.hero__inner{padding-block:var(--s10)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--occasions{grid-template-columns:repeat(4,1fr)}
.split{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center}
.split--flip figure{order:2}
.about{grid-template-columns:minmax(0,560px) 1fr;gap:var(--s7)}
.signature{margin-top:var(--s9)}
.visit{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s5)}
.footer-bottom{flex-direction:row;justify-content:space-between;text-align:left}
.thumbbar{display:none}
body{padding-bottom:0}
.map-col{position:sticky;top:120px}
.map-frame iframe{height:68vh;height:68dvh;min-height:440px;max-height:620px}
}
/* 900–1099px (iPad landscape, small laptops): the full nav does not fit
beside the logo, status pill and WhatsApp button, so it collapses into the
same menu the phones use. The WhatsApp button stays in the header. */
@media (min-width:900px) and (max-width:1099px){
.nav-desktop{display:none}
.hamburger{display:inline-flex}
.drawer{display:grid}
}
@media (min-width:1200px){
.shell{padding-inline:var(--s5)}
/* 12px either side of the tag's divider: at 1120px of content the refined
nav letter-spacing leaves no room for the original 16px */
.brand{gap:12px}
/* header groups sit space-between, so this only matters when the row is
full (the longest "Closed · opens…" pill); it buys that state its margin */
.header-bar{gap:12px}
.brand-tag{
display:block;padding-left:12px;border-left:1px solid var(--line);
font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);white-space:nowrap;flex:none;
}
}
/* ============================================================================
CUSTOM DESIGN EXPERIENCE
Homepage inspiration categories, collection.html, customisation.html and the
"Like this style?" lightbox. Built only from the tokens, buttons and type
above: navy / ivory / gold, Cormorant for headings, Noto Serif Display for
display lines, Jost for labels.
============================================================================ */
/* ---------- placeholder artwork (until category / style photography exists) */
.dj-art{
position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
width:100%;height:100%;padding:var(--s3);text-align:center;
background:radial-gradient(120% 90% at 50% 28%,var(--navy-700) 0%,var(--navy-900) 72%);
transition:transform .6s var(--ease);
}
.dj-art::before{content:"";position:absolute;inset:10px;border:1px solid rgba(198,161,91,.32);pointer-events:none}
.dj-art__mono{
font-family:'Noto Serif Display','Cormorant Garamond',Georgia,serif;font-weight:300;
font-size:clamp(2.75rem,1.8rem + 3vw,4rem);line-height:1;color:var(--gold);
}
.dj-art__rule{display:block;width:28px;height:1px;background:rgba(198,161,91,.55)}
.dj-art__gem{color:var(--gold);font-size:10px;line-height:1}
.dj-art__label{
font-family:'Noto Serif Display','Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;
font-size:clamp(1.35rem,1rem + 1.5vw,2rem);line-height:1.2;color:var(--ivory);max-width:12ch;
}
/* ---------- shared descriptor line: "Bridal sets · Kundan · Custom designs" */
.cat-tags{
list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 0;
font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.6;
}
/* narrow cards: stack the descriptors cleanly instead of letting the
separator dots dangle at the start of wrapped lines */
.cat-card .cat-tags{flex-direction:column;gap:1px}
.cat-tags li+li::before{content:"\00B7";margin:0 7px;color:var(--gold-ink)}
.cat-card .cat-tags li+li::before{content:none}
/* ---------- homepage: category grid */
.cat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.cat-grid > li{display:flex}
.cat-card{
display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit;
background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow-sm);
transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);
}
.cat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--gold-hair)}
.cat-card__media{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--navy-900)}
.cat-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cat-card:hover .cat-card__media img,
.cat-card:hover .dj-art{transform:scale(1.04)}
.cat-card__body{display:flex;flex-direction:column;gap:8px;flex:1;padding:var(--s2) var(--s2) var(--s3)}
.cat-card__title{font-size:var(--fs-md);line-height:1.2}
.cat-card__cta{
margin-top:auto;padding-top:var(--s1);
font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--navy-900);
}
.cat-card__cta span{display:inline-block;color:var(--gold-ink);transition:transform .25s var(--ease)}
.cat-card:hover .cat-card__cta span{transform:translateX(4px)}
.cat-lede-2{font-size:var(--fs-sm);color:var(--muted);margin:var(--s1) auto 0;max-width:60ch}
/* ---------- homepage: "Don't have a design yet?" */
.design-cta{
position:relative;overflow:hidden;margin-top:var(--s6);
padding:var(--s6) var(--s3);border-radius:var(--radius-lg);text-align:center;
background:radial-gradient(110% 120% at 50% 0%,var(--navy-700) 0%,var(--navy-900) 65%);
color:var(--muted-on-navy);
}
.design-cta::before{content:"";position:absolute;inset:12px;border:1px solid rgba(198,161,91,.28);border-radius:6px;pointer-events:none}
.design-cta > *{position:relative}
.design-cta h3{color:var(--white);font-size:var(--fs-2xl)}
.design-cta__sub{
font-family:'Noto Serif Display','Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;
font-size:var(--fs-lg);color:var(--gold);margin:6px 0 var(--s3);
}
.design-cta__copy{max-width:54ch;margin:0 auto var(--s4);font-size:var(--fs-base)}
/* ---------- arrow inside buttons nudges on hover */
.btn .btn-arrow{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(3px)}
/* ---------- inner-page hero (collection + customisation) */
.page-hero{padding-block:var(--s6) var(--s7);background:var(--ivory)}
.page-hero__grid{display:grid;gap:var(--s5);align-items:center}
.page-hero__text--center{text-align:center;max-width:64ch;margin-inline:auto}
.page-hero__text--center .page-hero__intro{margin-inline:auto}
.page-hero h1{
font-family:'Noto Serif Display','Cormorant Garamond',Georgia,serif;font-weight:300;
font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem);line-height:1.08;letter-spacing:-.015em;color:var(--navy-900);
}
.page-hero__tagline{
font-family:'Noto Serif Display','Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;
font-size:clamp(1.15rem,1rem + .5vw,1.4rem);color:var(--gold-ink);margin:var(--s2) 0 0;
}
.page-hero__intro{margin:var(--s3) 0 var(--s3);max-width:52ch;color:var(--muted);font-size:var(--fs-md)}
.page-hero__media{margin:0;aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--navy-900)}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.h-arrow{color:var(--gold);font-weight:300;padding-inline:.12em}
.crumbs{
list-style:none;display:flex;flex-wrap:wrap;margin:0 0 var(--s3);padding:0;
font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.crumbs li+li::before{content:"/";margin:0 8px;color:var(--gold-ink)}
.crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--gold-ink);border-bottom-color:var(--gold-hair)}
/* ---------- inspiration gallery */
.insp-note{font-size:var(--fs-sm);color:var(--muted);margin:var(--s1) auto 0;max-width:58ch}
.insp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s2)}
.insp-tile{
appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;width:100%;
display:flex;flex-direction:column;gap:10px;text-align:left;font:inherit;color:inherit;cursor:pointer;
}
.insp-tile__media{
display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);
background:var(--navy-900);box-shadow:var(--shadow-sm);transition:box-shadow .3s var(--ease);
}
.insp-tile__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.insp-tile:hover .insp-tile__media{box-shadow:var(--shadow-md)}
.insp-tile:hover .insp-tile__media img,
.insp-tile:hover .dj-art{transform:scale(1.04)}
.insp-tile__name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:var(--fs-md);line-height:1.2;color:var(--navy-900)}
.insp-tile__hint{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.insp-tile__hint span{display:inline-block;transition:transform .25s var(--ease)}
.insp-tile:hover .insp-tile__hint span{transform:translateX(4px)}
/* ---------- navy CTA band (category + customisation pages) */
.cta-band{position:relative;overflow:hidden;text-align:center;background:var(--navy-900);color:var(--muted-on-navy)}
.cta-band::before{content:"";position:absolute;inset:14px;border:1px solid rgba(198,161,91,.22);pointer-events:none}
.cta-band .shell{position:relative}
.cta-band h2{color:var(--white)}
.cta-band__copy{max-width:54ch;margin:var(--s2) auto 0;font-size:var(--fs-md)}
.cta-band__actions{display:flex;flex-direction:column;align-items:center;gap:var(--s2);margin-top:var(--s4)}
.cta-band__aside{margin-top:var(--s3);font-size:var(--fs-sm)}
.cta-band__aside a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-hair)}
/* ---------- "more to explore" chips */
.more-cats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.more-cats a{
display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
border:1px solid var(--line);border-radius:999px;background:var(--white);text-decoration:none;
font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--navy-900);
transition:border-color .25s var(--ease),color .25s var(--ease);
}
.more-cats a:hover{border-color:var(--gold);color:var(--gold-ink)}
/* ---------- "Like this style?" lightbox (native