/* ============================================================
Glacial Indifference — the body typeface.
Self-hosted rather than pulled from a third-party CDN: it is not on Google
Fonts, and a client site should not depend on cdnfonts staying up. SIL Open
Font License, so self-hosting and commercial use are permitted.
It ships in TWO weights only, 400 and 700. That matters: a rule asking for
500 resolves to 400 and a rule asking for 600 resolves to 700, so anything
that needs to look bold must say 700 outright or it quietly goes light.
============================================================ */
@font-face{
font-family:'Glacial Indifference';
src:url('../fonts/GlacialIndifference-Regular.woff') format('woff');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Glacial Indifference';
src:url('../fonts/GlacialIndifference-Bold.woff') format('woff');
font-weight:700; font-style:normal; font-display:swap;
}
/* ============================================================
ELORIA — Demo by Velare
Design system. Derived from the client's logo:
a single gold hairline, warm bronze serif, ivory ground.
============================================================ */
:root{
/* ---- Matched to the reference site (lebbse.com) ---- */
--gold: #EFC8AD; /* the reference's nude accent */
--gold-light: #F7E2D3;
--gold-pale: #FBF1E9;
--gold-deep: #D9A87F; /* hover / pressed */
--bronze: #B98A63; /* wordmark + eyebrow text */
--bronze-dark: #8E6440;
--ink: #000000; /* reference uses pure black */
--ink-soft: #3B3B3B;
--muted: #5C5C5C;
--ivory: #FFFFFF; /* white ground, not ivory */
--porcelain:#F8F8F8; /* alternating sections */
--line: #E9E9E9;
--white: #FFFFFF;
--sale: #D33636;
--serif: "Trirong", "Cormorant Garamond", Georgia, serif;
--sans: "Glacial Indifference", "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
/* Full width — the layout runs edge to edge, held off the screen edges
by the gutter alone. The gutter is unchanged, so spacing inside every
section stays exactly as it was. */
--maxw: 100%;
--gutter: clamp(18px, 4vw, 60px);
--ease: cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
margin:0; background:var(--ivory); color:var(--ink);
font-family:var(--sans); font-size:14.5px; line-height:1.7;
font-weight:400; letter-spacing:.005em;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; letter-spacing:.005em; margin:0; line-height:1.14}
h1{font-size:clamp(34px,5.4vw,66px); font-weight:500; letter-spacing:0}
h2{font-size:clamp(24px,3vw,40px); font-weight:500; text-transform:uppercase; letter-spacing:.02em}
h3{font-size:clamp(20px,2.2vw,28px)}
p{margin:0 0 1.1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.wrap-narrow{max-width:820px; margin:0 auto; padding-inline:var(--gutter)}
/* ---------- Signature device: the single gold line ---------- */
.rule{height:1px; background:var(--line); border:0; margin:0}
.eyebrow{
font-size:9.5px; letter-spacing:.42em; text-transform:uppercase;
color:var(--bronze); font-weight:400; display:inline-block;
}
.eyebrow::after{
content:""; display:block; width:34px; height:1px;
background:var(--gold); margin-top:9px;
}
.eyebrow.center{display:block; text-align:center}
.eyebrow.center::after{margin:9px auto 0}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:15px 36px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
border:1px solid var(--ink); background:var(--ink); color:var(--ivory);
transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
text-align:center;
}
.btn:hover{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--ivory)}
.btn-gold{background:var(--gold); border-color:var(--gold); color:#fff}
.btn-gold:hover{background:var(--gold-deep); border-color:var(--gold-deep)}
.btn-sm{padding:12px 26px; font-size:9.5px; letter-spacing:.24em}
.btn-block{display:flex; width:100%}
.btn[disabled]{opacity:.45; pointer-events:none}
.link-u{border-bottom:1px solid var(--gold); padding-bottom:2px; transition:border-color .3s}
.link-u:hover{border-color:var(--ink)}
/* ============================================================
HEADER
============================================================ */
.announce{
background:var(--ink); color:var(--white);
font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
text-align:center; padding:9px 16px;
}
.announce b{color:var(--white); font-weight:400}
.hdr{position:sticky; top:0; z-index:60; background:var(--ivory); border-bottom:1px solid var(--line)}
.hdr-main{
display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
gap:16px; max-width:var(--maxw); margin:0 auto;
padding:26px var(--gutter);
}
.hdr-left,.hdr-right{display:flex; align-items:center; gap:22px}
.hdr-right{justify-content:flex-end}
.brand{justify-self:center; text-align:center}
.brand-mark{display:flex; align-items:center; gap:11px; justify-content:center}
.brand-name{
font-family:var(--serif); font-size:30px; letter-spacing:.24em;
color:var(--ink); text-indent:.24em; line-height:1; font-weight:500;
}
.brand-tag{
font-size:8px; letter-spacing:.34em; text-transform:uppercase;
color:var(--muted); margin-top:6px; text-indent:.34em;
}
.icon-btn{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); position:relative; transition:color .3s}
.icon-btn:hover{color:var(--bronze)}
.icon-btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.2}
.badge{
position:absolute; top:-6px; left:11px; min-width:16px; height:16px; padding:0 4px;
background:var(--gold); color:#fff; border-radius:9px;
font-size:9px; line-height:16px; text-align:center; letter-spacing:0;
}
/* ---------- Currency switcher ---------- */
.cur{position:relative}
.cur-btn{gap:5px}
.cur-code{letter-spacing:.18em}
.cur-btn svg{width:12px; height:12px; transition:transform .3s}
.cur.open .cur-btn{color:var(--bronze)}
.cur.open .cur-btn svg{transform:rotate(180deg)}
.cur-menu{
position:absolute; top:calc(100% + 14px); right:0; z-index:70;
min-width:238px; background:var(--white); border:1px solid var(--line);
padding:6px 0 0; box-shadow:0 18px 44px rgba(28,23,20,.11);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .24s, transform .24s, visibility .24s;
}
.cur.open .cur-menu{opacity:1; visibility:visible; transform:none}
.cur-menu button{
display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:10px;
width:100%; padding:10px 16px; text-align:left; transition:background .2s;
}
.cur-menu button:hover{background:var(--porcelain)}
.cur-menu button b{
font-weight:400; font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:var(--ink); min-width:30px;
}
.cur-menu button span{font-size:12px; color:var(--muted)}
.cur-menu button i{font-style:normal; font-size:12px; color:var(--muted)}
.cur-menu button.on b,.cur-menu button.on i{color:var(--bronze)}
.cur-menu button.on{background:var(--porcelain)}
.cur-note{
margin:6px 0 0; padding:10px 16px; border-top:1px solid var(--line);
font-size:10.5px; line-height:1.5; color:var(--muted); background:var(--porcelain);
}
/* ---------- Category nav ---------- */
.nav{border-top:1px solid var(--line); background:var(--ivory)}
.nav-inner{
max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
display:flex; gap:clamp(12px,2.1vw,34px);
overflow-x:auto; scrollbar-width:none;
/* `safe center` centres the row when it fits and falls back to left-aligned
when it does not. Plain `center` overflows equally in both directions, so
the first items — New Season, Heels — get clipped off the left edge and
cannot be scrolled back to. Twelve categories is a lot for one row, and
it already overflowed below ~1400px before the type was enlarged. */
justify-content:safe center;
}
.nav-inner::-webkit-scrollbar{display:none}
.nav a{
display:block; padding:16px 0; white-space:nowrap;
/* Up from 9.5px/400 with .26em tracking. Tracking is pulled in as the size
and weight go up — at 11px and 500 the letterforms carry themselves, and
keeping .26em would have widened a twelve-item row enough to overflow on
smaller laptops. */
font-size:clamp(10px, .77vw, 11.5px); letter-spacing:.19em; font-weight:700;
text-transform:uppercase; color:var(--ink-soft);
position:relative;
}
.nav a::after{
content:""; position:absolute; left:0; right:100%; bottom:9px; height:1px;
background:var(--gold); transition:right .45s var(--ease);
}
.nav a:hover::after,.nav a.is-active::after{right:0}
.nav a.is-sale{color:var(--sale)}
.nav a.is-new{color:var(--bronze)}
.burger{display:none}
/* ---------- Mobile drawer nav ---------- */
.mnav{
position:fixed; inset:0 auto 0 0; width:min(88vw,360px); background:var(--ivory);
z-index:120; transform:translateX(-102%); transition:transform .5s var(--ease);
display:flex; flex-direction:column; padding:26px 28px; overflow-y:auto;
}
.mnav.open{transform:none}
.mnav a{display:block; padding:13px 0; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.18em; text-transform:uppercase}
.scrim{position:fixed; inset:0; background:rgba(28,23,20,.42); opacity:0; pointer-events:none; transition:opacity .45s; z-index:110}
.scrim.open{opacity:1; pointer-events:auto}
/* ============================================================
HERO
============================================================ */
.hero{position:relative; background:var(--porcelain); overflow:hidden}
.hero-inner{
max-width:var(--maxw); margin:0 auto; padding:clamp(64px,11vw,170px) var(--gutter);
display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center;
}
.hero h1{margin:26px 0 30px}
.hero h1 em{font-style:italic; color:var(--bronze)}
.hero-lede{max-width:42ch; color:var(--ink-soft); font-size:16.5px; line-height:1.8}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero-art{position:relative; display:grid; place-items:center; min-height:340px}
.hero-art .shoe{width:min(100%,520px)}
.hero-ring{
position:absolute; width:min(86%,470px); aspect-ratio:1; border:1px solid var(--gold);
border-radius:50%; opacity:.35;
}
.hero-stats{display:flex; gap:34px; margin-top:38px; padding-top:26px; border-top:1px solid var(--line)}
.hero-stats div span{display:block; font-family:var(--serif); font-size:26px; color:var(--bronze)}
.hero-stats div small{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
/* ---------- Marquee ---------- */
.marquee{border-block:1px solid var(--line); background:var(--ivory); overflow:hidden; padding:14px 0}
.marquee-track{display:flex; gap:60px; width:max-content; animation:slide 34s linear infinite}
.marquee span{font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.marquee span i{color:var(--gold); font-style:normal; margin-right:14px}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* ============================================================
SECTIONS
============================================================ */
.sec{padding:clamp(64px,9vw,140px) 0}
.sec-alt{background:var(--porcelain)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(34px,4vw,56px); flex-wrap:wrap}
.sec-head h2{margin-top:14px}
.sec-head p{margin:10px 0 0; color:var(--muted); max-width:52ch}
/* ---------- Category tiles ---------- */
/* Four across, so the eight categories fill two complete rows. At five across
they left two empty cells showing the grid's own background, which reads as
a rendering fault rather than a layout. Two across below 900px for the same
reason — three would strand the last two. */
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media (max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}}
.cat{
background:var(--ivory); padding:40px 18px 32px; text-align:center;
transition:background .5s var(--ease);
}
.cat:hover{background:var(--white)}
.cat svg{width:76px; height:64px; margin:0 auto 14px; stroke:var(--bronze); fill:none; stroke-width:1.1; transition:stroke .4s}
.cat:hover svg{stroke:var(--gold)}
.cat b{display:block; font-weight:400; font-size:10px; letter-spacing:.26em; text-transform:uppercase}
.cat small{color:var(--muted); font-size:10.5px; letter-spacing:.1em}
/* ---------- Product grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:clamp(20px,2.8vw,44px) clamp(16px,2vw,28px)}
.card{position:relative; background:transparent}
.card-media{
position:relative; background:var(--plate,var(--porcelain)); border:0;
aspect-ratio:3/4; display:grid; place-items:center; overflow:hidden;
transition:filter .6s var(--ease);
}
.card:hover .card-media{filter:brightness(.975)}
.card-media .shoe{width:76%; transition:transform .9s var(--ease)}
.card:hover .card-media .shoe{transform:scale(1.045)}
.card-flag{
position:absolute; top:16px; left:16px; z-index:2;
font-size:8.5px; letter-spacing:.26em; text-transform:uppercase;
background:transparent; color:var(--ink-soft); padding:0;
}
.card-flag.sale{color:var(--sale)}
.card-flag.new{color:var(--bronze)}
.card-fav{
position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px;
display:grid; place-items:center; background:transparent; border-radius:50%;
opacity:0; transition:opacity .4s var(--ease), background .3s;
}
.card:hover .card-fav,.card-fav.on{opacity:1}
.card-fav svg{width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:1.3}
.card-fav.on svg{fill:var(--gold); stroke:var(--gold)}
.card-fav:hover{background:#fff}
.card-quick{
position:absolute; left:16px; right:16px; bottom:16px; padding:0;
transform:translateY(14px); opacity:0; transition:all .5s var(--ease);
}
.card-quick .btn{background:var(--ivory); color:var(--ink); border-color:var(--ivory)}
.card-quick .btn:hover{background:var(--ink); color:var(--ivory); border-color:var(--ink)}
.card:hover .card-quick{transform:none; opacity:1}
.card-body{padding:20px 2px 0}
.card-body h3{font-size:21px; margin-top:7px}
.card-cat{font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted)}
.price{margin-top:9px; font-size:13px; letter-spacing:.14em}
.price s{color:var(--muted); margin-right:9px}
.price b{font-weight:400; color:var(--sale)}
.swatches{display:flex; gap:7px; margin-top:13px}
.sw{width:11px; height:11px; border-radius:50%; border:1px solid rgba(0,0,0,.14)}
.stars{color:var(--gold); font-size:11px; letter-spacing:.12em}
.stars small{color:var(--muted); margin-left:6px; letter-spacing:0}
/* ---------- Editorial split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center}
.split-art{background:var(--porcelain); aspect-ratio:4/5; display:grid; place-items:center; position:relative}
.sec-alt .split-art{background:var(--white)}
.split-art .shoe{width:64%}
.split-art .caption{position:absolute; bottom:18px; left:20px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
/* ---------- Heel-height scale (signature UX) ---------- */
.heelscale{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
.heelscale button{
border:1px solid var(--line); background:var(--white); padding:12px 16px; text-align:left;
transition:border-color .3s, background .3s; min-width:104px;
}
.heelscale button:hover,.heelscale button.on{border-color:var(--gold); background:var(--ivory)}
.heelscale i{display:block; width:2px; background:var(--gold); margin-bottom:9px}
.heelscale b{display:block; font-weight:400; font-size:11px; letter-spacing:.15em; text-transform:uppercase}
.heelscale small{color:var(--muted); font-size:10px}
/* ---------- Value props — editorial band, no boxes ---------- */
.usps{
display:grid; grid-template-columns:repeat(4,1fr);
gap:0; background:transparent; border:0;
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.usp{
background:transparent; padding:clamp(38px,4vw,60px) clamp(18px,2.4vw,38px);
text-align:center; position:relative;
}
.usp + .usp::before{
content:""; position:absolute; left:0; top:22%; bottom:22%;
width:1px; background:var(--line);
}
.usp svg{
width:30px; height:30px; stroke:var(--gold); fill:none; stroke-width:.9;
margin:0 auto 20px; opacity:.9;
}
.usp b{
display:block; font-family:var(--serif); font-weight:400;
font-size:20px; letter-spacing:.01em; text-transform:none;
color:var(--ink); margin-bottom:10px;
}
.usp p{margin:0 auto; font-size:13px; line-height:1.75; color:var(--muted); max-width:26ch}
/* ---------- Exclusive Benefits: motion ----------
Each item reveals on its own beat (the .d1–.d4 delays are applied in
markReveals). Three things move with it, all small:
· the icon rises the last of the way and settles a beat after the card,
so the eye lands on it rather than on everything at once
· the divider hairline grows out from its centre instead of just appearing
· on hover the icon lifts and warms to the deeper gold
Everything is transform/opacity only, so it stays cheap to paint. */
/* The hidden starting state is scoped to [data-reveal] on purpose. If the
reveal script ever fails to tag these, the icons and dividers must still be
visible — not stuck at opacity 0 forever. */
/* Transform only — deliberately no opacity. The item itself already fades in
via [data-reveal], so the icon just needs to arrive a beat later. If a
reveal ever fails to fire, a slightly offset icon is a far better failure
than an invisible one. */
.usp[data-reveal] svg{
transform:translateY(10px) scale(.92);
transition:transform .7s var(--ease) .16s, stroke .4s var(--ease);
}
.usp[data-reveal].in svg{transform:none}
/* The divider belongs to the item it sits in front of, so it is that item's
own `.in` that reveals it — not the previous one's. */
.usp + .usp[data-reveal]::before{
transform:scaleY(0); transform-origin:center;
transition:transform .8s var(--ease) .1s;
}
.usp + .usp[data-reveal].in::before{transform:scaleY(1)}
/* Hover is declared after the reveal rules so it wins once the item is in. */
@media (hover:hover){
.usp.in:hover svg{transform:translateY(-5px); stroke:var(--gold-deep); opacity:1}
}
@media (prefers-reduced-motion:reduce){
.usp[data-reveal] svg{transform:none; transition:none}
.usp + .usp[data-reveal]::before{transform:scaleY(1); transition:none}
}
@media (max-width:900px){
.usps{grid-template-columns:repeat(2,1fr)}
.usp:nth-child(odd)::before{display:none}
.usp:nth-child(3)::after,.usp:nth-child(4)::after{
content:""; position:absolute; left:12%; right:12%; top:0; height:1px; background:var(--line);
}
}
@media (max-width:520px){
.usps{grid-template-columns:1fr}
.usp::before{display:none}
.usp + .usp::after{content:""; position:absolute; left:18%; right:18%; top:0; height:1px; background:var(--line)}
}
/* ---------- Testimonials ---------- */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:clamp(20px,3vw,40px)}
.quote{border-top:1px solid var(--gold); padding-top:22px}
.quote p{font-family:var(--serif); font-size:19px; font-style:italic; color:var(--ink-soft)}
.quote cite{font-style:normal; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
/* ---------- Instagram strip ---------- */
.igrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.igrid a{aspect-ratio:1; background:var(--porcelain); display:grid; place-items:center; position:relative; transition:background .5s}
.igrid a:hover{background:var(--porcelain)}
.igrid .shoe{width:62%}
/* ---------- Newsletter ---------- */
.news{background:var(--ink); color:var(--ivory); padding:clamp(48px,6vw,84px) 0; text-align:center}
.news h2{color:var(--ivory)}
.news .eyebrow{color:var(--gold-light)}
.news .eyebrow::after{background:var(--gold)}
.news p{color:#B9AFA4; max-width:48ch; margin-inline:auto}
.news form{display:flex; gap:10px; max-width:470px; margin:26px auto 0; flex-wrap:wrap}
.news input{
flex:1 1 210px; background:transparent; border:0; border-bottom:1px solid rgba(214,190,144,.5);
padding:13px 2px; color:var(--ivory); letter-spacing:.08em;
}
.news input::placeholder{color:#8A8078}
.news input:focus{outline:0; border-color:var(--gold)}
/* ============================================================
FOOTER
============================================================ */
.ftr{background:var(--porcelain); border-top:1px solid var(--line); padding:clamp(46px,6vw,72px) 0 0}
.ftr-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(26px,4vw,56px)}
/* Support · Quick Links · Stay in touch.
600 is a real weight — Inter is loaded at 300/400/500/600 — so the browser
never has to fake it. Faked bold smears badly at 10.5px with this much
letter-spacing. Tracking is pulled in slightly because heavier letterforms
need less air between them to read as a unit. */
.ftr h4{font-family:var(--sans); font-size:10.5px; letter-spacing:.20em; text-transform:uppercase; color:var(--ink); margin-bottom:18px; font-weight:600}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li{margin-bottom:10px}
.ftr li a{font-size:13px; color:var(--ink-soft); transition:color .3s}
.ftr li a:hover{color:var(--bronze)}
.ftr-brand .brand-name{font-size:26px; color:var(--bronze)}
.ftr-brand p{font-size:13px; color:var(--muted); max-width:34ch; margin-top:16px}
.socials{display:flex; gap:14px; margin-top:18px}
.socials a{width:34px; height:34px; border:1px solid var(--line); display:grid; place-items:center; transition:border-color .3s}
.socials a:hover{border-color:var(--gold)}
.socials svg{width:15px; height:15px; stroke:var(--ink-soft); fill:none; stroke-width:1.2}
.pay{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.pay span{border:1px solid var(--line); background:var(--white); padding:5px 9px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.ftr-bottom{
margin-top:44px; border-top:1px solid var(--line); padding:20px 0 26px;
display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
font-size:11px; color:var(--muted); letter-spacing:.08em;
}
.ftr-bottom a{color:var(--bronze)}
.demo-note{
background:var(--ink); color:#9A9188; text-align:center; padding:11px 16px;
font-size:10px; letter-spacing:.22em; text-transform:uppercase;
}
.demo-note b{color:var(--gold-light); font-weight:400}
/* ---------- Floating WhatsApp button ----------
z-index 80 sits above the sticky header (60) but below the cart drawer,
mobile menu and scrim (110–130), so it never floats over an open panel.
Bottom offset clears the "Demo by Velare" bar. */
.wa-float{
position:fixed; right:clamp(16px,2.4vw,28px); bottom:clamp(66px,7vw,84px);
z-index:80; width:54px; height:54px; border-radius:50%;
display:grid; place-items:center; cursor:pointer;
background:#25D366; border:0;
box-shadow:0 6px 22px rgba(20,15,10,.26);
transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.wa-float:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(20,15,10,.32); background:#1FBE5A}
.wa-float:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.wa-float svg{width:27px; height:27px; stroke:#fff; fill:none; stroke-width:1.5;
stroke-linecap:round; stroke-linejoin:round}
/* The label is a hover affordance on pointer devices only — on a phone there
is no hover, and a permanent pill would crowd the screen. */
.wa-tip{
position:absolute; right:calc(100% + 12px); white-space:nowrap;
background:var(--ink); color:#FCFAF6; padding:8px 13px;
font-size:10px; letter-spacing:.16em; text-transform:uppercase;
opacity:0; transform:translateX(6px); pointer-events:none;
transition:opacity .3s var(--ease), transform .3s var(--ease);
}
@media (hover:hover){ .wa-float:hover .wa-tip{opacity:1; transform:none} }
@media (max-width:560px){
.wa-float{width:48px; height:48px; bottom:clamp(60px,16vw,72px)}
.wa-float svg{width:24px; height:24px}
.wa-tip{display:none}
}
@media (prefers-reduced-motion:reduce){
.wa-float,.wa-tip{transition:none}
.wa-float:hover{transform:none}
}
@media print{ .wa-float{display:none} }
/* ============================================================
PAGE HEADER (inner pages)
============================================================ */
.phead{background:var(--porcelain); padding:clamp(40px,5vw,72px) 0; text-align:center; border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(32px,4.6vw,58px); margin-top:14px}
.phead p{max-width:56ch; margin:16px auto 0; color:var(--ink-soft)}
.crumbs{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.crumbs a:hover{color:var(--bronze)}
/* ============================================================
SHOP / FILTERS
============================================================ */
.shop-layout{display:grid; grid-template-columns:238px 1fr; gap:clamp(24px,3.5vw,48px); align-items:start}
.filters{position:sticky; top:132px}
.fgroup{border-bottom:1px solid var(--line); padding:18px 0}
.fgroup:first-child{padding-top:0}
.fgroup h4{font-family:var(--sans); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; margin:0 0 14px; font-weight:400}
.fopt{display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:13px; color:var(--ink-soft); cursor:pointer}
.fopt input{accent-color:var(--gold); width:14px; height:14px}
.fopt span.n{margin-left:auto; color:var(--muted); font-size:11px}
.colorrow{display:flex; gap:9px; flex-wrap:wrap}
.colorrow button{width:26px; height:26px; border-radius:50%; border:1px solid var(--line); position:relative}
.colorrow button.on{box-shadow:0 0 0 1px var(--ivory),0 0 0 2px var(--gold)}
.shop-bar{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.shop-bar p{margin:0; font-size:12px; color:var(--muted); letter-spacing:.1em}
.select{border:1px solid var(--line); background:var(--white); padding:9px 12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.select:focus{outline:0; border-color:var(--gold)}
.filter-toggle{display:none}
.pager{display:flex; gap:8px; justify-content:center; margin-top:48px}
.pager a{width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); font-size:12px}
.pager a.on,.pager a:hover{border-color:var(--gold); color:var(--bronze)}
.empty{text-align:center; padding:70px 20px; color:var(--muted)}
/* ============================================================
PRODUCT PAGE
============================================================ */
.pdp{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,4vw,64px); align-items:start}
/* Thumbnails sit below the main image, not in a column beside it. A grid that
fills the available width means the strip absorbs however many photographs a
product has — nine for one colourway here, ten for another — and wraps to a
second row rather than overflowing. Same at every screen size; the mobile
breakpoint used to do this on its own and now agrees with desktop. */
.pdp-gallery{display:grid; grid-template-columns:1fr; gap:14px}
.stage{order:1}
.thumbs{order:2; display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:10px}
.thumbs button{border:1px solid transparent; background:var(--plate,var(--porcelain)); aspect-ratio:1; display:grid; place-items:center; padding:8px}
.thumbs button.on{border-color:var(--gold)}
.thumbs .shoe{width:100%}
.stage{border:0; background:var(--plate,var(--porcelain)); aspect-ratio:3/4; display:grid; place-items:center; position:relative}
.stage .shoe{width:74%}
.stage .zoom{position:absolute; bottom:14px; right:14px; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.pdp-info h1{font-size:clamp(28px,3.4vw,42px); margin:10px 0 12px}
/* Price on the left, reviews pushed to the right, sitting on the same
baseline. They used to be stacked, with the reviews above the price. */
.pdp-priceline{
display:flex; align-items:baseline; justify-content:space-between;
gap:18px; flex-wrap:wrap; margin:14px 0 0;
}
.pdp-priceline .stars{margin-left:auto}
.pdp-price{font-size:21px; letter-spacing:.05em; margin:0}
.pdp-price s{color:var(--muted); font-size:16px; margin-right:10px}
.pdp-price b{font-weight:400; color:var(--sale)}
.vat{display:block; font-size:11px; color:var(--muted); letter-spacing:.1em; margin:4px 0 14px}
.opt-label{display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; margin:22px 0 11px}
.opt-label a{color:var(--bronze); border-bottom:1px solid var(--gold)}
.sizes{display:flex; gap:8px; flex-wrap:wrap}
.sizes button{width:48px; height:44px; border:1px solid var(--line); background:var(--white); font-size:13px; transition:all .3s}
.sizes button:hover{border-color:var(--bronze)}
.sizes button.on{border-color:var(--ink); background:var(--ink); color:var(--ivory)}
.sizes button.out{color:var(--muted); background:var(--porcelain); position:relative; cursor:not-allowed}
.sizes button.out::after{content:""; position:absolute; inset:50% 6px auto; height:1px; background:var(--muted)}
.colorpick{display:flex; gap:11px}
.colorpick button{width:34px; height:34px; border-radius:50%; border:1px solid var(--line)}
.colorpick button.on{box-shadow:0 0 0 1px var(--ivory),0 0 0 2px var(--gold)}
.qty{display:inline-flex; border:1px solid var(--line); background:var(--white)}
.qty button{width:42px; height:48px; font-size:16px; color:var(--muted)}
.qty input{width:48px; height:48px; border:0; text-align:center; background:transparent}
.qty input:focus{outline:0}
.pdp-actions{display:flex; gap:10px; margin:26px 0 0; flex-wrap:wrap}
.pdp-actions .btn{flex:1 1 200px}
.stock{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted); margin-top:14px}
.dot{width:7px; height:7px; border-radius:50%; background:#4E8C4A}
.dot.low{background:var(--gold)}
.acc{border-top:1px solid var(--line); margin-top:30px}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none; cursor:pointer; padding:16px 0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; display:flex; justify-content:space-between; align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"; color:var(--gold); font-size:16px}
.acc details[open] summary::after{content:"–"}
.acc .acc-body{padding:0 0 18px; font-size:13.5px; color:var(--ink-soft)}
.acc .acc-body ul{margin:0; padding-left:18px}
.acc .acc-body li{margin-bottom:6px}
.spec{width:100%; border-collapse:collapse; font-size:13px}
.spec td{padding:7px 0; border-bottom:1px solid var(--line); color:var(--ink-soft)}
.spec td:first-child{color:var(--muted); width:44%; letter-spacing:.06em}
/* ============================================================
CART / CHECKOUT / TABLES
============================================================ */
.two-col{display:grid; grid-template-columns:1.55fr .95fr; gap:clamp(26px,4vw,54px); align-items:start}
/* Equal halves instead of the default 1.55/.95 split. This exists as a class
because it used to be an inline style on the account page — and an inline
style beats the media query below, so those panels never collapsed on a
phone and ran off the side of the screen. */
.two-col.two-even{grid-template-columns:1fr 1fr}
.panel{border:1px solid var(--line); background:var(--white); padding:clamp(20px,2.6vw,32px)}
.panel h3{margin-bottom:18px}
.panel.sticky{position:sticky; top:132px}
.line{display:grid; grid-template-columns:96px 1fr auto; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); align-items:center}
.line:first-of-type{padding-top:0}
.line-art{border:0; aspect-ratio:3/4; display:grid; place-items:center; background:var(--porcelain)}
.line-art .shoe{width:80%}
.line h4{font-family:var(--serif); font-size:18px; margin-bottom:5px}
.line .meta{font-size:11.5px; color:var(--muted); letter-spacing:.08em}
.line .rm{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:9px; display:inline-block}
.line .rm:hover{color:var(--sale)}
.line-right{text-align:right}
.totals{list-style:none; margin:0; padding:0; font-size:14px}
.totals li{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); color:var(--ink-soft)}
.totals li.grand{border-bottom:0; border-top:1px solid var(--ink); margin-top:8px; padding-top:16px; font-size:18px; color:var(--ink); font-family:var(--serif)}
.totals li small{display:block; color:var(--muted); font-size:11px}
.promo{display:flex; gap:8px; margin:18px 0}
.promo input{flex:1; border:1px solid var(--line); padding:12px; background:var(--ivory)}
.promo input:focus{outline:0; border-color:var(--gold)}
.field{margin-bottom:16px}
.field label{display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.field input,.field select,.field textarea{
width:100%; border:1px solid var(--line); background:var(--ivory); padding:13px 14px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--gold); background:var(--white)}
.field textarea{min-height:120px; resize:vertical}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-soft); margin-bottom:12px; cursor:pointer}
.check input{accent-color:var(--gold); margin-top:4px}
.steps{display:flex; justify-content:center; gap:0; margin-bottom:40px; flex-wrap:wrap}
.step{display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.step::after{content:""; width:clamp(24px,5vw,72px); height:1px; background:var(--line); margin:0 14px}
.step:last-child::after{display:none}
.step i{width:26px; height:26px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11px}
.step.on{color:var(--ink)}
.step.on i{border-color:var(--gold); background:var(--gold); color:#fff}
.step.done i{border-color:var(--gold); color:var(--gold)}
.payopt{border:1px solid var(--line); padding:16px; margin-bottom:10px; cursor:pointer; display:flex; gap:12px; align-items:flex-start; background:var(--ivory)}
.payopt.on{border-color:var(--gold); background:var(--white)}
.payopt input{accent-color:var(--gold); margin-top:3px}
.payopt b{display:block; font-weight:400; font-size:13px}
.payopt small{color:var(--muted); font-size:12px}
/* ---------- Account ---------- */
.tabs{display:flex; gap:26px; border-bottom:1px solid var(--line); margin-bottom:32px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:0 0 14px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap; border-bottom:1px solid transparent; margin-bottom:-1px}
.tabs button.on{color:var(--ink); border-color:var(--gold)}
.tabpane{display:none}
.tabpane.on{display:block}
.table{width:100%; border-collapse:collapse; font-size:13.5px}
.table th{text-align:left; font-weight:400; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); padding:0 12px 12px 0; border-bottom:1px solid var(--line)}
.table td{padding:16px 12px 16px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top}
.pill{display:inline-block; padding:4px 11px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--line); border-radius:20px}
.pill.ok{border-color:#4E8C4A; color:#3F7A3B}
.pill.wait{border-color:var(--gold); color:var(--gold-deep)}
.pill.no{border-color:var(--sale); color:var(--sale)}
/* ---------- Tracking timeline ---------- */
.track{max-width:640px; margin:0 auto}
.tl{list-style:none; margin:34px 0 0; padding:0 0 0 34px; position:relative}
.tl::before{content:""; position:absolute; left:7px; top:8px; bottom:26px; width:1px; background:var(--line)}
.tl li{position:relative; padding-bottom:32px}
.tl li::before{content:""; position:absolute; left:-34px; top:5px; width:15px; height:15px; border-radius:50%; border:1px solid var(--line); background:var(--ivory)}
.tl li.done::before{background:var(--gold); border-color:var(--gold)}
.tl li.now::before{border-color:var(--gold); box-shadow:0 0 0 4px rgba(182,141,72,.16)}
.tl b{display:block; font-weight:400; font-size:14px}
.tl small{color:var(--muted); font-size:12px}
/* ---------- Content pages ---------- */
.doc{font-size:15px; color:var(--ink-soft)}
.doc h2{margin:44px 0 14px; font-size:clamp(23px,2.6vw,31px)}
.doc h3{margin:28px 0 10px; font-size:19px}
.doc ul,.doc ol{padding-left:20px; margin:0 0 1.1em}
.doc li{margin-bottom:8px}
.doc table{width:100%; border-collapse:collapse; margin:18px 0; font-size:13.5px}
.doc th,.doc td{border:1px solid var(--line); padding:11px 13px; text-align:left}
.doc th{background:var(--porcelain); font-weight:400; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase}
.doc .updated{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.legal-note{border-left:2px solid var(--gold); background:var(--porcelain); padding:16px 20px; margin:24px 0; font-size:13.5px}
.toc{border:1px solid var(--line); padding:22px 26px; margin-bottom:34px; background:var(--white)}
.toc ol{margin:0; padding-left:18px; columns:2; column-gap:32px}
.toc li{margin-bottom:6px; font-size:13px}
.toc a:hover{color:var(--bronze)}
.faq-cat{margin-bottom:44px}
.faq-cat h2{margin-bottom:8px}
/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:start}
.info-row{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line)}
.info-row svg{width:20px; height:20px; stroke:var(--gold); fill:none; stroke-width:1.2; flex:none; margin-top:3px}
.info-row b{display:block; font-weight:400; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
/* ---------- Toast ---------- */
.toast{
position:fixed; bottom:26px; left:50%; transform:translate(-50%,140%);
background:var(--ink); color:var(--ivory); padding:14px 26px; z-index:200;
font-size:11px; letter-spacing:.18em; text-transform:uppercase;
transition:transform .5s var(--ease);
}
.toast.on{transform:translate(-50%,0)}
/* ---------- Cart drawer ---------- */
.drawer{
position:fixed; top:0; right:0; bottom:0; width:min(92vw,420px); background:var(--ivory);
z-index:130; transform:translateX(102%); transition:transform .5s var(--ease);
display:flex; flex-direction:column;
}
.drawer.open{transform:none}
.drawer-hd{display:flex; justify-content:space-between; align-items:center; padding:22px 26px; border-bottom:1px solid var(--line)}
.drawer-hd h3{font-size:20px}
.drawer-body{flex:1; overflow-y:auto; padding:0 26px}
.drawer-ft{border-top:1px solid var(--line); padding:20px 26px; background:var(--porcelain)}
.drawer .line{grid-template-columns:70px 1fr auto; gap:14px}
/* ---------- 404 ---------- */
.big404{font-family:var(--serif); font-size:clamp(90px,18vw,200px); line-height:.9; color:var(--gold-pale)}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:1080px){
/* Below the desktop four-across, the footer becomes:
row 1 brand (full width)
row 2 Support │ Quick Links (paired — similar lengths, they balance)
row 3 Stay in touch (full width — the form needs the room)
A plain two-column grid put the tall brand block beside Support and left
the whole thing lopsided, which is what it was doing before. */
.ftr-grid{grid-template-columns:1fr 1fr; gap:34px clamp(20px,5vw,40px)}
.ftr-brand{grid-column:1 / -1}
.ftr-grid > :last-child{grid-column:1 / -1}
.shop-layout{grid-template-columns:1fr}
.filters{position:static; display:none; border:1px solid var(--line); padding:20px; background:var(--white); margin-bottom:24px}
.filters.open{display:block}
.filter-toggle{display:inline-flex}
.pdp{grid-template-columns:1fr}
/* `.two-col.two-even` is specificity 0,2,0, so a bare `.two-col` here would
lose to it and the even split would survive onto phones. Match it. */
.two-col,.two-col.two-even{grid-template-columns:1fr}
.panel.sticky{position:static}
}
@media (max-width:860px){
/* Equal side columns, so the wordmark is centred on the page rather than
centred in whatever the icons leave over. The right group carries four
controls to the left group's two, so `auto 1fr auto` pushed the brand
visibly off-centre. `min-width:0` lets the side columns hold their
content without forcing the centre column sideways. */
.hdr-main{grid-template-columns:1fr auto 1fr; padding:14px var(--gutter); gap:8px}
.hdr-left,.hdr-right{min-width:0}
.hdr-left .icon-btn span,.hdr-right .icon-btn span{display:none}
/* the currency code IS the button — hiding it would leave a bare caret */
.hdr-right .cur-btn .cur-code{display:inline}
.hdr-left{gap:12px}
.hdr-right{gap:12px}
.hdr-left .icon-btn svg,.hdr-right .icon-btn svg{width:17px; height:17px}
.cur-btn{gap:3px}
.cur-code{font-size:9.5px; letter-spacing:.10em}
.cur-btn svg{width:11px; height:11px}
.cur-menu{min-width:210px}
.nav{display:none}
.burger{display:inline-flex}
.brand-name{font-size:22px}
.hero-inner{grid-template-columns:1fr; text-align:center}
.hero .eyebrow.center::after{margin-inline:auto}
.hero-lede{margin-inline:auto}
.hero-cta,.hero-stats{justify-content:center}
.hero-art{order:-1; min-height:250px}
.split,.contact-grid{grid-template-columns:1fr}
/* The gallery is single-column and thumbs-below everywhere now, so the
overrides that used to live here are gone rather than left as dead rules
describing a flex layout that no longer exists. */
.toc ol{columns:1}
.line{grid-template-columns:76px 1fr; gap:14px}
.line-right{grid-column:2; text-align:left}
}
@media (max-width:560px){
/* Narrow phones: the four right-hand controls no longer fit beside a
centred wordmark, so the currency caret goes. The code itself stays —
it is the part that tells you which currency you are in, and it still
opens the panel. */
.hdr-left,.hdr-right{gap:9px}
.cur-btn svg{display:none}
.hdr-left .icon-btn svg,.hdr-right .icon-btn svg{width:16px; height:16px}
.badge{top:-5px; left:9px; min-width:14px; height:14px; font-size:8px; line-height:14px}
/* Same three-row shape as above, just tighter — the row/column rules are
inherited from the 1080px block, so only the spacing changes here. */
.ftr-grid{gap:28px clamp(16px,5vw,24px)}
.ftr h4{margin-bottom:14px}
.ftr li{margin-bottom:8px}
.ftr-brand p{max-width:none}
.row2{grid-template-columns:1fr}
.grid{grid-template-columns:repeat(2,1fr); gap:14px}
.card-body h3{font-size:15px}
.steps{gap:0; font-size:9px}
.step::after{width:18px; margin:0 8px}
}
@media print{.hdr,.ftr,.demo-note,.announce{display:none}}
/* ============================================================
ACCOUNT PAGE — logo-tinted ground
Scoped to `body.page-account`, so it changes that page and
nothing else. The tints are mixed from the client's own logo,
sampled out of the file rather than guessed: the wordmark ink
reads #A07038, the heel highlight #E0B850, and the pale wash
inside the mark #F8E8C8. That wash, let down over white, is the
ground; a stronger mix of it carries the page head and footer.
The panels stay white on purpose — they lift off the tint, which
is what gives the page its depth. Every hairline that would
otherwise be neutral grey (#E9E9E9) is warmed to match, because a
grey rule on a champagne ground is the detail that reads cheap.
============================================================ */
body.page-account{
--ground: #FCF7EE; /* the logo's pale wash over white */
--ground-deep: #F5EBD9; /* same wash, twice the strength */
--ground-line: #EADCC4; /* warm hairline, replaces the grey */
--logo-bronze: #A07038; /* sampled from the wordmark in her logo file */
--logo-bronze-dark: #7F5828;
background:var(--ground);
}
/* Buttons on the account page — pill shaped, and the active one carries the
logo's bronze rather than flat black, which sat oddly on the champagne
ground. Applied at every screen size on purpose: a button that changes
shape and colour between a phone and a laptop reads as a bug, not a
decision. Scoped to this page, so no other page's buttons move. */
body.page-account .btn{border-radius:999px}
body.page-account .btn:not(.btn-ghost):not(.btn-light){
background:var(--logo-bronze); border-color:var(--logo-bronze); color:#fff;
}
body.page-account .btn:not(.btn-ghost):not(.btn-light):hover{
background:var(--logo-bronze-dark); border-color:var(--logo-bronze-dark);
}
body.page-account .btn-ghost{color:var(--logo-bronze); border-color:var(--logo-bronze)}
body.page-account .btn-ghost:hover{background:var(--logo-bronze); color:#fff; border-color:var(--logo-bronze)}
body.page-account .hdr,
body.page-account .nav,
body.page-account .veil{background:var(--ground)}
body.page-account .hdr,
body.page-account .nav{border-color:var(--ground-line)}
body.page-account .phead{background:var(--ground-deep); border-bottom-color:var(--ground-line)}
body.page-account .ftr{background:var(--ground-deep); border-top-color:var(--ground-line)}
body.page-account .panel{border-color:var(--ground-line)}
body.page-account .tabs,
body.page-account .table th,
body.page-account .table td{border-bottom-color:var(--ground-line)}
body.page-account .ftr-bottom{border-top-color:var(--ground-line)}
/* ============================================================
BRAND MARK plates — the client's own logo stands in for
product photography on the large surfaces
============================================================ */
.mark{
width:min(78%,420px); mix-blend-mode:multiply; opacity:.92;
user-select:none; pointer-events:none;
}
.stage{overflow:hidden}
.stage .mark{width:min(84%,400px)}
.stage .stage-sketch{
position:absolute; right:6%; bottom:8%; width:26%;
opacity:.5; stroke-width:1.2;
}
.split-art .mark{width:min(70%,340px)}
.hero-art .mark{width:min(74%,400px)}
/* ============================================================
MOTION — page entrance + scroll reveals
Everything is disabled under prefers-reduced-motion.
============================================================ */
@keyframes veil-out{from{opacity:1}to{opacity:0}}
@keyframes rise{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes lineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* the ivory curtain that lifts on every page load */
.veil{
position:fixed; inset:0; z-index:900; background:var(--ivory);
display:grid; place-items:center; pointer-events:none;
animation:veil-out .72s var(--ease) .18s forwards;
}
.veil span{
font-family:var(--serif); font-size:30px; letter-spacing:.38em;
text-indent:.38em; color:var(--bronze); font-weight:300;
animation:fade .5s var(--ease) both;
}
.veil.gone{display:none}
/* leaving the page — curtain drops back down */
.veil.out{animation:fade .3s var(--ease) forwards; pointer-events:none}
/* first paint of above-the-fold content */
.hero-inner > div > *{animation:rise .9s var(--ease) both}
.hero-inner > div > *:nth-child(1){animation-delay:.30s}
.hero-inner > div > *:nth-child(2){animation-delay:.38s}
.hero-inner > div > *:nth-child(3){animation-delay:.46s}
.hero-inner > div > *:nth-child(4){animation-delay:.54s}
.hero-inner > div > *:nth-child(5){animation-delay:.62s}
.hero-art{animation:fade 1.4s var(--ease) .35s both}
.phead > .wrap > *{animation:rise .8s var(--ease) both}
.phead > .wrap > *:nth-child(2){animation-delay:.10s}
.phead > .wrap > *:nth-child(3){animation-delay:.18s}
/* scroll reveals */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
[data-reveal].in{opacity:1; transform:none}
[data-reveal].d1{transition-delay:.07s}
[data-reveal].d2{transition-delay:.14s}
[data-reveal].d3{transition-delay:.21s}
[data-reveal].d4{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
.veil{display:none}
.hero-inner > div > *,.hero-art,.phead > .wrap > *{animation:none}
[data-reveal]{opacity:1; transform:none; transition:none}
}
/* ============================================================
PHOTOGRAPHY
Real imagery replaces the earlier illustrated placeholders.
============================================================ */
/* Shop cards show the same 2:3 photographs in a 1:1.18 frame, so `cover` was
cropping them too — the frame is painted the studio grey and the image is
contained, matching the product page. The hover zoom stays: it scales the
whole contained image, so nothing is cut off at rest. */
.card-media{background:#EFEFEF}
.card-media img{width:100%; height:100%; object-fit:contain; transition:transform 1.1s var(--ease)}
.card:hover .card-media img{transform:scale(1.04)}
.card-media .shoe{display:none}
.line-art{overflow:hidden; background:#EFEFEF}
.line-art img{width:100%; height:100%; object-fit:contain}
/* Never crop the product photograph. `cover` was trimming the top and bottom,
because the supplier shoots 2:3 (1080×1620) and this frame is 3:4.
`contain` fits the whole image, and 88% leaves the shoe sitting a little
smaller with air around it. The frame is painted the same #EFEFEF as the
photographs' own studio background, so the letterboxing is invisible —
without that you would see a rectangle where the image ends. */
.stage{background:#EFEFEF}
.stage img{
width:88%; height:88%; object-fit:contain; margin:auto;
transition:opacity .4s var(--ease);
}
.thumbs button{padding:0; overflow:hidden; background:var(--porcelain)}
.thumbs button{background:#EFEFEF}
.thumbs button img{width:100%; height:100%; object-fit:contain}
.stage .zoom{background:rgba(252,250,246,.9); padding:5px 10px}
.split-art{overflow:hidden}
.split-art img{width:100%; height:100%; object-fit:cover}
.split-art .caption{background:rgba(252,250,246,.92); padding:6px 12px; left:0; bottom:0}
.igrid a{overflow:hidden}
.igrid img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.igrid a:hover img{transform:scale(1.06)}
/* ---------- Category tiles with imagery ---------- */
/* The category tiles used to carry a cover photograph, which overrode the
original line-art design and hid the SVG. The photographs are gone with the
rest of the placeholder imagery, so those overrides go with them and the
line drawings come back. `.cat-img` is kept styled below purely so that
dropping a `photo()` call back into the tile still works when her own
photography arrives — nothing renders it today. */
.cat-img{display:block; aspect-ratio:4/5; overflow:hidden; background:var(--porcelain); margin-bottom:18px}
.cat-img img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.cat:hover .cat-img img{transform:scale(1.06)}
/* ============================================================
HERO — full-bleed photographic banner
============================================================ */
/* With no photograph behind it, the hero carries its own ground: the warm
espresso and gold from the holding page live at eloria-shoes.com, with a
radial lift behind the copy so it has depth rather than reading as a flat
black slab. If a photograph is put back, `.hero-bg` sits above this and
covers it — nothing here needs undoing. */
.hero{
position:relative; overflow:hidden; isolation:isolate;
background:#1A1512;
background-image:radial-gradient(115% 95% at 26% 42%, #2E241C 0%, #1E1815 46%, #120E0C 100%);
}
.hero-bg{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
object-position:60% center; z-index:-2;
animation:heroZoom 14s var(--ease) both;
}
@keyframes heroZoom{from{transform:scale(1.09)}to{transform:scale(1)}}
/* This was a scrim to darken the photograph beneath the copy. With no
photograph it would be a heavy black wash fighting the ground, so it is now
a soft vignette that deepens the edges. Restore the linear-gradient if a
photograph goes back in. */
.hero::after{
content:""; position:absolute; inset:0; z-index:-1;
background:radial-gradient(120% 100% at 30% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.16) 62%, rgba(0,0,0,.40) 100%);
}
.hero-inner{
display:block; min-height:min(78vh,720px);
padding-block:clamp(80px,13vw,190px);
align-content:center;
}
.hero-copy{max-width:620px}
.hero h1{color:#FCFAF6}
.hero h1 em{color:var(--gold-light)}
.hero .eyebrow{color:var(--gold-light)}
.hero .eyebrow::after{background:var(--gold-light)}
.hero-lede{color:rgba(252,250,246,.86)}
/* The primary button used to sit on a photograph, which gave it contrast. On
the plain espresso ground it was black on near-black and all but vanished.
Inverted to ivory — the same treatment the mobile hero already used, now
applied at every width so the two agree. */
.hero-cta .btn:not(.btn-light){background:#FCFAF6; border-color:#FCFAF6; color:var(--ink)}
.hero-cta .btn:not(.btn-light):hover{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.btn-light{border-color:rgba(252,250,246,.85); color:#FCFAF6; background:transparent}
.btn-light:hover{background:#FCFAF6; color:var(--ink); border-color:#FCFAF6}
.hero-stats-bar{
position:relative; background:rgba(21,17,14,.55); backdrop-filter:blur(6px);
border-top:1px solid rgba(252,250,246,.16);
}
.hero-stats{
display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
margin:0; padding:24px 0; border:0;
}
.hero-stats div span{font-family:var(--serif); font-size:clamp(20px,2.2vw,28px); color:var(--gold-light); display:block}
.hero-stats div small{font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:rgba(252,250,246,.62)}
/* ============================================================
BANNERS
============================================================ */
.banners{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,28px)}
/* The photographs are gone, so these carry the same espresso ground as the
hero — their copy is white and would have been invisible on the porcelain
they used to fall back to. An ![]()
put back here still covers this. */
.banner{
position:relative; display:block; overflow:hidden;
aspect-ratio:16/11; isolation:isolate;
background:#1A1512;
background-image:radial-gradient(120% 100% at 32% 38%, #302620 0%, #1F1916 54%, #120E0C 100%);
}
.banner img{width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease)}
.banner:hover img{transform:scale(1.05)}
.banner::after{
content:""; position:absolute; inset:0;
background:linear-gradient(to top,rgba(21,17,14,.72) 0%,rgba(21,17,14,.24) 46%,rgba(21,17,14,0) 78%);
}
.banner-copy{
position:absolute; left:0; right:0; bottom:0; z-index:2;
padding:clamp(24px,3vw,44px); color:#FCFAF6;
}
.banner-copy .eyebrow{color:var(--gold-light)}
.banner-copy .eyebrow::after{background:var(--gold-light)}
.banner-copy h3{color:#FCFAF6; margin:14px 0 14px; font-size:clamp(21px,2.3vw,30px); max-width:18ch}
.banner-link{
font-size:10px; letter-spacing:.28em; text-transform:uppercase;
border-bottom:1px solid var(--gold-light); padding-bottom:4px;
}
.wide-banner{
position:relative; overflow:hidden; isolation:isolate;
min-height:min(66vh,560px); display:grid; align-items:center;
background:#1A1512;
background-image:radial-gradient(110% 100% at 26% 46%, #302620 0%, #1F1916 50%, #120E0C 100%);
}
.wide-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% center; z-index:-2}
.wide-banner::after{content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(95deg,rgba(21,17,14,.82) 0%,rgba(21,17,14,.5) 44%,rgba(21,17,14,.06) 82%)}
.wide-banner-copy{
max-width:var(--maxw); width:100%; margin:0 auto;
padding:clamp(56px,8vw,110px) var(--gutter); color:#FCFAF6;
}
.wide-banner-copy .eyebrow{color:var(--gold-light)}
.wide-banner-copy .eyebrow::after{background:var(--gold-light)}
.wide-banner-copy h2{color:#FCFAF6; margin:20px 0 18px}
.wide-banner-copy p{color:rgba(252,250,246,.82); max-width:40ch; margin-bottom:30px}
@media (max-width:860px){
.banners{grid-template-columns:1fr}
.hero-stats{grid-template-columns:repeat(2,1fr); gap:16px}
.hero-inner{min-height:auto}
.hero-copy{max-width:none}
.hero::after{background:linear-gradient(to top,rgba(21,17,14,.9),rgba(21,17,14,.55))}
.wide-banner::after{background:linear-gradient(to top,rgba(21,17,14,.88),rgba(21,17,14,.45))}
}
@media (prefers-reduced-motion:reduce){.hero-bg{animation:none}}
/* ---------- Footer logo ---------- */
/* The supplied logo JPEG is a 1024×1024 square with the mark occupying only
456×372 in the middle, so it used to be dragged into place with negative
margins — which left it out of line with the other footer columns. The
whitespace is now trimmed out of the file itself (logo-eloria-footer.webp),
so the logo sits on the column's own left edge and top, level with the
Support / Quick Links headings. */
/* The mark is now a stacked lockup — shoe above the wordmark — rather than a
wide wordmark, so it needs more width to read at the same optical size. */
.ftr-logo{display:block; width:min(100%,150px); margin:0 0 18px}
/* the footer logo carries its own transparency now, so it needs no blend mode */
/* height:auto is not optional here — the ![]()
carries width/height
attributes for layout stability, and without this the height attribute
is taken literally and the logo stretches vertically. */
.ftr-logo img{width:100%; height:auto; background:none}
.ftr-brand p{margin-top:0}
/* ---------- Looping scroll banner, below the hero ----------
The track holds two identical sets separated by the same 60px gap, so its
full width is 2·set + 3·gap. A plain -50% would stop one gap short and the
seam would visibly jump, hence the extra -30px: it lands exactly one set
plus one gap along, where the second set is pixel-aligned with where the
first began. Pausing on hover lets anyone actually read a message. */
.marquee-set{display:flex; gap:60px; align-items:center}
.marquee-track{gap:60px; animation:marqueeLoop 42s linear infinite; will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeLoop{from{transform:translateX(0)} to{transform:translateX(calc(-50% - 30px))}}
@media (prefers-reduced-motion:reduce){
.marquee-track{animation:none}
.marquee-set[aria-hidden="true"]{display:none}
.marquee{overflow-x:auto}
}
/* ============================================================
PRODUCT PAGE — buy buttons
Three actions of different weight. They were three widths on one
wrapping flex row, which read as an accident. Now: a two-up row that
collapses to one column on a phone, all three the same height, with a
clear order of importance — black, outline, then the accent.
============================================================ */
.pdp-actions{
display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:28px 0 0;
}
.pdp-actions .btn{flex:none; width:100%; padding:17px 22px; letter-spacing:.15em}
.pdp-actions .btn-ghost{border-color:var(--ink)}
.pdp-actions .btn-ghost:hover{background:var(--ink); color:var(--ivory)}
.btn-block{padding:17px 22px; letter-spacing:.15em}
/* a small, honest press state — no shadows, no rounding, in keeping */
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--bronze); outline-offset:3px}
@media (max-width:620px){
.pdp-actions{grid-template-columns:1fr; gap:10px}
}
/* ============================================================
MOBILE HERO
The copy used to float in the middle of the photograph, landing on the
shoes themselves — busy behind the text, and cramped. On a phone the
copy now sits in the lower third against a stronger bottom-up scrim, so
the photograph is legible at the top and the words are legible at the
bottom. The two calls to action match in width instead of straggling.
============================================================ */
@media (max-width:640px){
/* Split, rather than overlaid. On a desktop the photograph is wide enough
to hold the copy in its empty left third; on a phone the same crop puts
every word on top of the shoe, which is why it read as crowded. So the
photograph gets its own 4:5 frame, uncovered and uncropped by text, and
the words sit beneath it on ink. Nothing competes with anything. */
.hero{display:block; overflow:hidden} /* espresso ground set above */
/* A 4:5 frame plus the copy band pushed everything below the hero off the
first screen. The photograph is square here — still generous, ~100px
shorter — and the band is tightened to match. */
.hero-bg{
position:relative; inset:auto; z-index:0;
width:100%; height:auto; aspect-ratio:1/1;
object-fit:cover; object-position:58% 42%; animation:none;
}
.hero::after{display:none}
/* The tight padding assumed a photograph sitting directly above this band.
Without one, this IS the hero, so it needs room to breathe again. */
.hero-inner{
position:relative; z-index:1; display:block; min-height:0;
background:transparent; text-align:center;
padding:clamp(56px,15vw,88px) var(--gutter) clamp(48px,13vw,76px);
}
.hero-copy{width:100%; max-width:none}
.hero .eyebrow{font-size:9px; letter-spacing:.34em}
.hero h1{font-size:clamp(28px,7.8vw,38px); line-height:1.08; margin:11px 0 10px}
.hero-lede{font-size:14px; line-height:1.62; max-width:33ch; margin:0 auto}
.hero-cta{flex-direction:column; align-items:stretch; gap:9px; margin-top:19px}
.hero-cta .btn{width:100%; padding:14px 18px}
/* the primary button is ink on ink here, which made it vanish into the
band — invert it so it still reads as the primary action */
.hero-cta .btn:not(.btn-light){background:#FCFAF6; border-color:#FCFAF6; color:var(--ink)}
.hero-cta .btn:not(.btn-light):hover{background:var(--gold); border-color:var(--gold); color:var(--ink)}
/* the stats already sit on ink, so they need no scrim of their own */
/* The stats bar is dropped on a phone. All four facts — 2–4 day delivery,
14-day returns, EU 35–41, free over AED 300 — are already scrolling past
in the banner directly beneath it, so on a small screen it was saying the
same thing twice and costing about 110px of the first screen to do it. */
.hero-stats-bar{display:none}
}
/* The category above a product name is a link to that collection — on the
cards and on the product page. It was a plain span, so clicking it did
nothing. It needs to look clickable without shouting: it is a quiet label,
so the cue is a hairline that appears on hover. */
a.card-cat{
display:inline-block; color:var(--muted);
border-bottom:1px solid transparent; padding-bottom:2px;
transition:color .3s var(--ease), border-color .3s var(--ease);
}
a.card-cat:hover{color:var(--bronze); border-bottom-color:var(--bronze)}
a.card-cat:focus-visible{outline:2px solid var(--bronze); outline-offset:3px}
.pdp-info a.card-cat{margin-bottom:2px}
/* Agency credit, in the bottom bar beside the copyright */
.ftr-credit{color:var(--muted)}
.ftr-credit a{color:var(--bronze); border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .3s}
.ftr-credit a:hover{border-color:var(--bronze)}
/* ---------- Image loading behaviour ---------- */
/* only photographic surfaces get a placeholder tone — never the logo */
/* Placeholder tone while a photograph loads. The product frames use the
supplier's own studio grey rather than porcelain: with `object-fit:contain`
this colour shows through the letterboxed area, so a lighter placeholder
painted a visible rectangle around every product shot. */
.hero-bg,.wide-banner img,.banner img,.cat-img img,
.split-art img,.igrid img{background:var(--porcelain)}
.card-media img,.stage img,.line-art img,.thumbs img{background:#EFEFEF}
.split-art{aspect-ratio:4/5}
.hero-copy .btn{backdrop-filter:blur(2px)}
/* ============================================================
REFERENCE-MATCHED LAYER (lebbse.com)
Centred section headings, "View More" under each grid,
rotating announcement bar, squarer product cards.
============================================================ */
.announce{position:relative; min-height:38px; display:grid; place-items:center; padding:0 16px}
.announce-rot{position:relative; width:100%; height:38px}
.announce-rot span{
position:absolute; inset:0; display:grid; place-items:center;
opacity:0; transition:opacity .6s var(--ease); text-align:center;
}
.announce-rot span.on{opacity:1}
.sec-head-c{justify-content:center; text-align:center}
.sec-head-c > div{max-width:60ch}
.sec-head-c h2{margin-top:10px}
.sec-head-c p{margin-inline:auto}
.sec-more{display:flex; justify-content:center; margin-top:clamp(30px,4vw,52px)}
/* squarer cards and a tighter uppercase label, as on the reference */
.card-media{aspect-ratio:1/1.18}
.card-body{text-align:center; padding-top:16px}
.card-body h3{
font-size:15px; font-weight:400; letter-spacing:.06em;
text-transform:uppercase; font-family:var(--sans); margin-top:5px;
}
.card-cat{font-size:9px; letter-spacing:.2em; color:var(--muted)}
.price{margin-top:8px; font-size:14px; letter-spacing:.03em; font-weight:500}
.swatches{justify-content:center}
.card-flag{background:var(--ink); color:#fff; padding:5px 10px; top:12px; left:12px; letter-spacing:.14em}
.card-flag.sale{background:var(--sale); color:#fff}
.card-flag.new{background:var(--gold); color:var(--ink)}
.usp b{font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500}
.usp svg{stroke:var(--ink)}
/* Curated product rails, full width.
The shop grid is auto-fill and simply gains columns as the screen widens,
which is what you want for 24 styles. The curated rails carry a fixed
handful, so left to auto-fill they would leave an empty slot on the right
at wide sizes — they are pinned to five columns and given five products
each so they always read as one complete row. */
.grid-rail{grid-template-columns:repeat(5,1fr)}
@media (max-width:1180px){.grid-rail{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.grid-rail{grid-template-columns:repeat(2,1fr); gap:14px}}
.eyebrow{color:var(--muted); letter-spacing:.3em}
.eyebrow::after{background:var(--gold)}
.hero::after{
background:radial-gradient(120% 100% at 30% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.44) 100%);
}
.hero-stats-bar{background:rgba(0,0,0,.62); border-top:1px solid rgba(255,255,255,.14)}
.hero-stats div span{color:#fff; font-weight:500}
.hero-stats div small{color:rgba(255,255,255,.66)}
.hero h1 em{color:var(--gold)}
.hero .eyebrow{color:var(--gold)}
.hero .eyebrow::after{background:var(--gold)}
.news{background:var(--ink)}
.news .eyebrow{color:var(--gold)}
.btn-gold{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.btn-gold:hover{background:var(--gold-deep); border-color:var(--gold-deep); color:var(--ink)}
.banner-copy .eyebrow,.wide-banner-copy .eyebrow{color:var(--gold)}
.banner-copy .banner-link{border-color:var(--gold)}
@media (max-width:560px){ .card-body h3{font-size:13px} }
/* ============================================================
GLASS HOVER ON BUTTONS
Guarded by @supports on purpose. Without backdrop-filter a translucent fill
is not "glass", it is just a washed-out button with poor contrast — so
browsers that cannot blur keep the original solid hover instead.
Two variants, because contrast flips with the ground:
· on light pages the frost reads light, so the label goes to ink;
· on the dark hero, banners and wide banner the frost reads dark, so the
label stays ivory. Using one rule for both would make the label
disappear on one of them.
Appended at the end of the file so it wins over the earlier per-variant
hovers (.btn-ghost, .btn-gold, the account page's bronze) without needing
to inflate specificity.
============================================================ */
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
.btn{
transition:background .45s var(--ease), color .45s var(--ease),
border-color .45s var(--ease), box-shadow .45s var(--ease),
backdrop-filter .45s var(--ease), transform .45s var(--ease);
}
/* light ground */
.btn:hover,
body.page-account .btn:hover,
body.page-account .btn-ghost:hover{
background:rgba(252,250,246,.22);
-webkit-backdrop-filter:blur(13px) saturate(180%);
backdrop-filter:blur(13px) saturate(180%);
border-color:rgba(21,17,14,.20);
color:var(--ink);
box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
inset 0 -1px 0 rgba(21,17,14,.05),
0 10px 26px rgba(21,17,14,.10);
}
/* dark ground — the label has to stay light or it vanishes into the frost */
.hero .btn:hover,
.banner .btn:hover,
.wide-banner .btn:hover,
.btn-light:hover,
.news .btn:hover{
background:rgba(252,250,246,.16);
-webkit-backdrop-filter:blur(13px) saturate(160%);
backdrop-filter:blur(13px) saturate(160%);
border-color:rgba(252,250,246,.45);
color:#FCFAF6;
box-shadow:inset 0 1px 0 rgba(255,255,255,.30),
0 10px 28px rgba(0,0,0,.30);
}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }
}
/* ---------- Size chart: measuring diagram ---------- */
.measure-fig{margin:30px 0 0; text-align:center}
.measure-fig svg{width:100%; max-width:300px; height:auto}
.measure-fig .mf-label{
font-family:var(--sans); font-size:9px; font-weight:700;
letter-spacing:.2em; fill:var(--muted);
}
.measure-fig figcaption{
margin:14px auto 0; max-width:46ch;
font-size:12.5px; line-height:1.7; color:var(--muted);
}
/* ============================================================
WOOCOMMERCE → DEMO
WooCommerce ships its own markup and its own stylesheet. These rules map its
output onto the demo's design so the live site and eloria-demo.vercel.app
look the same. Everything here targets WooCommerce classes only — nothing
the demo itself uses is touched.
============================================================ */
/* --- variation form: the table becomes the demo's stacked options --- */
.variations{width:100%; border:0; margin:0}
.variations tbody,.variations tr,.variations td{display:block; width:100%; border:0; padding:0}
.variations th.label{display:none} /* our .opt-label replaces it */
.variations td.value{padding:0}
.woocommerce-variation-description{font-size:13px; color:var(--muted)}
.woocommerce-variation-price{margin:14px 0 4px; font-size:21px; letter-spacing:.05em}
.woocommerce-variation-availability{font-size:12.5px; color:var(--muted); margin-bottom:10px}
.reset_variations{display:none !important}
/* --- add to cart: the demo's black block button, not WooCommerce's lilac --- */
.woocommerce-variation-add-to-cart,form.cart{display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin-top:18px}
form.cart .quantity{flex:0 0 auto}
form.cart .quantity input.qty{
width:84px; height:100%; min-height:52px; text-align:center;
border:1px solid var(--line); background:var(--white); font-family:var(--sans); font-size:14px;
}
.single_add_to_cart_button,
button.single_add_to_cart_button.button.alt{
flex:1 1 220px; border-radius:0 !important;
background:var(--ink) !important; border:1px solid var(--ink) !important; color:var(--ivory) !important;
font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
padding:17px 30px; transition:background .4s var(--ease), color .4s var(--ease);
}
.single_add_to_cart_button:hover,
button.single_add_to_cart_button.button.alt:hover{
background:var(--gold) !important; border-color:var(--gold) !important; color:var(--ink) !important;
}
/* --- product gallery: main image + thumbnail strip below, as the demo has --- */
.woocommerce-product-gallery{position:relative}
.woocommerce-product-gallery__wrapper{display:block}
.woocommerce-product-gallery__image{background:#EFEFEF}
.woocommerce-product-gallery__image img{width:100%; height:auto; object-fit:contain; background:#EFEFEF}
.woocommerce-product-gallery .flex-control-thumbs{
list-style:none; margin:14px 0 0; padding:0;
display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:10px;
}
.woocommerce-product-gallery .flex-control-thumbs li{margin:0}
.woocommerce-product-gallery .flex-control-thumbs img{
width:100%; height:auto; aspect-ratio:1/1.18; object-fit:contain;
background:#EFEFEF; border:1px solid transparent; cursor:pointer; opacity:1;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active{border-color:var(--gold)}
.woocommerce-product-gallery__trigger{display:none}
/* --- notices, tabs and sundry WooCommerce furniture --- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
border:1px solid var(--line); border-left:2px solid var(--gold);
background:var(--porcelain); padding:16px 20px; font-size:13.5px; list-style:none;
}
.woocommerce-message a.button,.woocommerce-info a.button{
background:var(--ink); color:var(--ivory); border-radius:0; padding:10px 20px;
font-size:10px; letter-spacing:.18em; text-transform:uppercase;
}
.woocommerce-tabs,.related.products,.up-sells{display:none} /* the demo has neither */
.woocommerce-ordering select,.woocommerce-ordering .select{
border:1px solid var(--line); background:var(--white); padding:11px 14px;
font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
}
.woocommerce-result-count{display:none} /* our .shop-bar shows the count */
.pager .page-numbers{list-style:none; display:flex; gap:10px; justify-content:center; padding:0}
/* --- header logo (live site: the real mark; demo keeps its wordmark) --- */
.brand-mark.has-logo{display:block; line-height:0}
/* The logo must never read smaller than the hero type. Sized per breakpoint:
desktop 96 · laptop 84 · iPad 72 · phone 58. !important because the inline
height on the ![]()
is what actually holds it. */
.brand-logo{height:96px !important; width:auto; display:block; margin:0 auto}
@media (max-width:1440px){ .brand-logo{height:84px !important} }
@media (max-width:1180px){ .brand-logo{height:76px !important} }
/* !important because the inline height above is what actually holds the size —
these have to beat it to shrink the logo on small screens. */
@media (max-width:860px){ .brand-logo{height:72px !important} }
@media (max-width:560px){ .brand-logo{height:58px !important} }
/* --- shop sidebar filters (WooCommerce data in the demo's panel) --- */
.filters .fopt a{display:flex; justify-content:space-between; width:100%; text-decoration:none}
.filters .sizes a,.filters .colorrow a{
display:inline-flex; align-items:center; justify-content:center;
min-width:44px; padding:8px 12px; border:1px solid var(--line);
font-size:12px; color:var(--ink); text-decoration:none; transition:all .3s var(--ease);
}
.filters .sizes a:hover,.filters .colorrow a:hover{border-color:var(--ink)}
.filters .sizes a.on,.filters .colorrow a.on{background:var(--ink); color:var(--ivory); border-color:var(--ink)}
.filters .colorrow{display:flex; flex-wrap:wrap; gap:7px}
.filters .sizes{display:flex; flex-wrap:wrap; gap:7px}
/* ---------- Shop By Collection: motion ----------
The tiles revealed as a block and then sat still. Each now arrives on its own
beat (the .d1–.d4 delays come from markReveals), and on hover the tile lifts,
the label opens up its tracking and warms to bronze, and a gold hairline
grows out from the centre. Transform and opacity only, so it stays cheap. */
.cat{transition:background .5s var(--ease), transform .5s var(--ease); position:relative}
.cat b{transition:letter-spacing .5s var(--ease), color .4s var(--ease)}
.cat small{transition:opacity .45s var(--ease), transform .45s var(--ease)}
.cat::after{
content:""; position:absolute; left:50%; bottom:22px; width:34px; height:1px;
background:var(--gold); transform:translateX(-50%) scaleX(0); transform-origin:center;
transition:transform .5s var(--ease);
}
@media (hover:hover){
.cat:hover{transform:translateY(-4px)}
.cat:hover b{letter-spacing:.30em; color:var(--bronze)}
.cat:hover small{transform:translateY(-2px)}
.cat:hover::after{transform:translateX(-50%) scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
.cat,.cat b,.cat small,.cat::after{transition:none}
.cat:hover{transform:none}
}
/* --- product photography: no frame ---
The images were sitting on a #EFEFEF panel, which read as a grey box around
every shoe — and where a supplier's own studio grey differed slightly, as a
visible frame inside a frame. The photographs carry their own background, so
the panel behind them is removed everywhere. */
.stage,.card-media,.line-art,.thumbs button,
.stage img,.card-media img,.line-art img,.thumbs img,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-control-thumbs img{background:transparent !important}
.thumbs button{border-color:transparent}
.thumbs button.on{border-color:var(--gold)}