/* Jost, the brand webfont, is NOT loaded here. It is a preconnected in
views/partials/seo.ejs, which every view reaches either directly or through
partials/head.
It was an @import on this line, chosen because fourteen views carry their own
inline and a link tag looked like a fourteen-file change. That was the
wrong trade. An @import cannot be discovered until this stylesheet has itself
been fetched and parsed, so the font request is serialised behind another
request and the text reflows later than it needs to — a plausible cause of
the "header text shifts on first paint" report. seo.ejs turned out to be the
single include point that was wanted, so the font moved there and gained
preconnect at the same time.
Anything setting font-family here should keep matching the family list in
seo.ejs: 400, 500 and 600 are the only weights fetched. */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:Arial, Helvetica, sans-serif;
background:
linear-gradient(
180deg,
#faf7f2 0%,
#f4efe7 100%
);
color:#131313;
overflow-x:hidden;
}
/* ==========================================
NEW PREMIUM NAVBAR
========================================== */
.navbar{
position:sticky;
top:0;
z-index:9999;
background:#000;
transition:.3s ease;
border-bottom:1px solid rgba(0,0,0,.08);
}
.navbar.scrolled{
transform:translateY(-35px);
}
.top-bar{
background:#000;
height:42px;
overflow:hidden;
display:flex;
align-items:center;
}
.top-bar-track{
white-space:nowrap;
color:#fff;
font-size:.9rem;
font-weight:500;
animation:ticker 25s linear infinite;
}
.top-bar-track span{
margin:0 80px; /* increase to 100px if you want more spacing */
opacity:.7;
}
.top-bar-track span{
margin:0 120px;
}
@keyframes ticker{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-50%);
}
}
.nav-main{
background:#000;
height:110px;
padding:0 50px;
display:grid;
grid-template-columns:80px 1fr 160px;
align-items:center;
}
.logo{
text-align:center;
/* min-width:0 lets this grid cell shrink; a grid item defaults to
min-width:auto, which is how the wordmark got to push into the icon row.
NO overflow:hidden here — clipping a brand name is worse than the overlap
it was meant to prevent, and it cost the "R" off EXTRAALAYER. The fit is
guaranteed by sizing the wordmark to the space instead. */
min-width:0;
}
.logo a{
color:#fff;
font-size:2.8rem;
font-weight:900;
letter-spacing:-2px;
text-decoration:none !important;
border:none !important;
}
.nav-icons{
display:flex;
justify-content:flex-end;
align-items:center;
gap:16px;
}
/* The icons themselves stay the same size; the link box around them grows to
a 44x44 touch target. They were 15-18px wide, roughly a third of the
minimum, and the cart icon is on the path to checkout. Gap reduced from 28
to 16 so the wider boxes do not push the header past the screen. */
.nav-icons a{
color:#fff;
font-size:1.2rem;
font-weight:300;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:44px;
min-height:44px;
}
.navbar.scrolled .nav-main{
height:90px;
}
.navbar.scrolled .logo a{
font-size:2.2rem;
}
.menu-toggle{
display:block;
color:#fff;
font-size:2rem;
cursor:pointer;
}
.mobile-menu{
position:fixed;
top:0;
left:-100%;
width:300px;
height:100vh;
background:#fff;
z-index:99999;
/* Was 40px 30px. The rows inside now carry their own 44px height and a
negative inline margin for the hover background, so this only needs to
set the panel's edge. */
padding:18px 22px;
transition:.4s ease;
overflow-y:auto;
}
.mobile-menu.active{
left:0;
}
/* 40px of panel padding plus a 2rem glyph plus 30px of margin pushed the first
link about 110px down the panel, so the drawer opened onto a block of empty
white before anything you could tap. Sized as a real 44px control instead,
pulled into the panel's own padding so it does not add a row of its own. */
.close-menu{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
margin:-8px -8px 10px;
font-size:1.6rem;
line-height:1;
cursor:pointer;
}
/* The only search entry point on a phone. The header form is display:none
below 768px because that row cannot fit another control, which left the site
with no way to search at all on mobile.
type="search" rather than text so the on-screen keyboard offers a search key
instead of a newline, and iOS draws its own clear button. 44px on both the
field and the submit, matching the drawer rows underneath. */
.mobile-menu__search{
display:flex;
align-items:stretch;
gap:8px;
margin:0 0 14px;
}
.mobile-menu__search input{
flex:1 1 auto;
min-width:0;
min-height:44px;
padding:0 12px;
border:1px solid rgba(19,19,19,.18);
border-radius:10px;
background:#fff;
font-family:inherit;
/* 16px exactly. Anything smaller and iOS zooms the page on focus, which on
a fixed-position drawer leaves the customer scrolled sideways inside a
panel they cannot see the edges of. */
font-size:16px;
color:#131313;
}
.mobile-menu__search input:focus{
outline:none;
border-color:#131313;
}
.mobile-menu__search button{
flex:0 0 44px;
min-height:44px;
border:0;
border-radius:10px;
background:#131313;
color:#F1EFE8;
font-size:.95rem;
cursor:pointer;
}
.mobile-menu__search button:hover,
.mobile-menu__search button:focus-visible{
background:#2e2e2e;
}
.mobile-menu ul{
list-style:none;
}
/* Typography for the whole panel, set once here rather than per rule.
Jost is geometric and its uppercase is wide and even, which is what makes
the fashion-house register work: generous letter-spacing on a geometric
reads as considered, the same spacing on Arial reads as stretched. The
weight comes DOWN from 700 to 500 at the same time — heavy uppercase at
small sizes is what made this panel feel shouted rather than premium, and
the tracking is what carries the emphasis now.
Sizes stay put. This is the phone's primary navigation and every row keeps
its 44px target; the change is in the letterforms, not the hit areas. */
.mobile-menu{
font-family:'Jost', 'Futura', 'Avenir Next', 'Century Gothic', sans-serif;
}
/* These were 800-weight uppercase at 1rem with 1px of tracking and 22px of
dead margin between them: dense, heavy, and with nothing to say they were
interactive. Each is now a full-width row with its own hit area, a hover
state, and a chevron, so the panel reads as somewhere to tap rather than a
list of shouted words. Tracking comes down because letter-spacing on heavy
uppercase at small sizes is what made it feel cramped. */
.mobile-menu a{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
min-height:44px;
padding:0 12px;
margin:0 -12px;
border-radius:10px;
text-decoration:none;
color:#131313;
/* Typography set here rather than in a rule of its own. A separate
`.mobile-menu a` block placed EARLIER in the file was silently beaten by
this one: same selector, same specificity, later source wins. That is
the trap documented at the foot of this stylesheet, and it caught this
very change on the first attempt.
Weight comes down from 700 and tracking goes up from 0.4px. Heavy
uppercase at this size is what made the panel feel shouted; on a
geometric face the emphasis comes from the spacing instead, which is the
register fashion navigation is usually set in. */
font-family:'Jost', 'Futura', 'Avenir Next', 'Century Gothic', sans-serif;
font-weight:500;
font-size:.9rem;
letter-spacing:.16em;
text-transform:uppercase;
transition:background .18s ease, color .18s ease, padding-left .18s ease;
}
.mobile-menu a::after{
content:"\203A";
font-size:1.35rem;
line-height:1;
font-weight:400;
color:rgba(19,19,19,.28);
transition:transform .18s ease, color .18s ease;
}
.mobile-menu a:hover,
.mobile-menu a:focus-visible{
background:#F1EFE8;
padding-left:18px;
}
.mobile-menu a:hover::after,
.mobile-menu a:focus-visible::after{
color:#131313;
transform:translateX(3px);
}
.mobile-menu hr{
border:0;
border-top:1px solid rgba(19,19,19,.12);
margin:14px 0;
}
/* Logout is a POST, so it cannot be an and does not pick up the
.mobile-menu a rule above. Every number here is copied from that rule
deliberately rather than shared through a common selector — the two are the
same row and must stay the same row, and a future edit to the link metrics
has to come here too. Width is calc(100% + 24px) because the -12px inline
margin that bleeds the hover background to the panel edge would otherwise
push a width:100% button 12px past it. No chevron: ::after on the links
means "this goes somewhere", which is the wrong promise on a control that
ends the session. */
.mobile-menu__logout{
margin:0;
}
.mobile-menu__logout button{
display:flex;
align-items:center;
width:calc(100% + 24px);
min-height:44px;
padding:0 12px;
margin:0 -12px;
border:0;
border-radius:10px;
background:none;
color:#131313;
/* Kept in step with .mobile-menu a by hand, as that rule's comment warns.
inherit picks Jost up from .mobile-menu; the other three have to match
the link metrics explicitly or LOGOUT reads as a different control from
every row above it. */
font-family:inherit;
font-weight:500;
font-size:.9rem;
letter-spacing:.16em;
text-transform:uppercase;
text-align:left;
cursor:pointer;
transition:background .18s ease, padding-left .18s ease;
}
.mobile-menu__logout button:hover,
.mobile-menu__logout button:focus-visible{
background:#F1EFE8;
padding-left:18px;
}
/* ==========================================
DESKTOP CATEGORY BAR
========================================== */
.nav-links{
display:flex;
justify-content:center;
gap:35px;
}
.nav-links a{
font-size:.82rem;
font-weight:800;
text-transform:uppercase;
}
/* ==========================================
NAV MOBILE
========================================== */
@media(max-width:992px){
.search-bar{
display:none;
}
.menu-toggle{
display:block;
}
/* The icon column was a fixed 100px holding three links, which is why the
cart and wishlist icons measured 15-18px wide. Widened to fit three
44px touch targets; the logo column gives up the difference.
Then a fourth icon (Search) was added and 148px was never revisited:
4 targets at 44px plus three 4px gaps needs 188px, so the row ran 40px
past its column. body{overflow-x:hidden} swallowed the scrollbar, so on
a 360px screen the Cart icon simply left the viewport with 5px of 44
still visible. Sized to content so adding a fifth icon cannot
reintroduce this. */
.nav-main{
grid-template-columns:44px minmax(0,1fr) auto;
padding:0 16px;
height:75px;
}
.logo a{
font-size:1.6rem;
}
.menu-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:44px;
min-height:44px;
}
.nav-icons{
gap:4px;
}
.nav-icons a{
font-size:1.1rem;
}
/* THE SCROLLED STATE HAD NO MOBILE SIZE, so it fell back to the desktop
one and undid every fit calculation in this block.
`.navbar.scrolled .logo a` is two classes and an element, so it outranks
the plain `.logo a` above no matter how far down the file that sits.
Scrolling past 50px therefore jumped the wordmark from ~1.6rem to the
desktop 2.2rem inside a column still sized for the smaller one, and it
ran straight into the icons. `.nav-main` did the same, growing 75px to
90px on a screen where the header had been deliberately shortened.
Specificity, not source order. The earlier collision fixed in this block
was measured in the RESTING state only, and nobody scrolled. */
.navbar.scrolled .nav-main{
height:64px;
}
.navbar.scrolled .logo a{
font-size:1.45rem;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media(max-width:576px){
/* The wordmark rendered 190.5px wide inside a 157px grid column, and
.logo does not clip, so "EXTRAALAYER" ran straight into the wishlist
icon: a measured 33x31px collision between two tappable things at
393px, and 44x31px at 360px. This rule also used to set a LARGER size
than the 992px breakpoint above it, so the logo grew as the screen
shrank. Scales with the viewport instead, and never exceeds what the
column can hold. */
/* Hidden on phones, not removed: Wishlist is still in the drawer menu and
in the footer. Three 44px icons plus a 44px hamburger left only ~104px
for an 11-character wordmark at 320px, which is not enough for any
readable size. Giving the brand that 44px back is better than shrinking
the wordmark to illegibility or dropping the icons below their tap
target. */
.nav-icons .nav-icon-link[aria-label="Wishlist"]{
display:none;
}
.logo a{
font-size:clamp(1.25rem, 6vw, 1.7rem);
letter-spacing:-1px;
white-space:nowrap;
/* letter-spacing adds its advance after the LAST glyph too, so the
inline box runs ~1px wider than the visible ink. At 320px there is no
slack left in the cell to absorb it and the tap boxes overlapped by
1.19px. Cancels the trailing advance. */
margin-right:-2px;
}
/* The mobile banner override lives in the late block at the FOOT of this
file, not here. `.hero-banner`'s base rule is declared after this point,
and at equal specificity the later rule wins, so an override written
here is dead at every width. Third instance of that trap in this
stylesheet. */
.nav-main{
width:95%;
}
/* Same specificity problem as the 992 block, and worse here: this is the
width where the wordmark was already measured colliding with the icons
at rest, so the scrolled state has even less slack to give. Scales with
the viewport exactly like the resting rule above, one step smaller,
because the header is shorter when scrolled and a wordmark sized for a
75px bar looks oversized in a 64px one. */
.navbar.scrolled .logo a{
font-size:clamp(1.15rem, 5.4vw, 1.5rem);
letter-spacing:-1px;
white-space:nowrap;
margin-right:-2px;
}
.mobile-menu{
width:100%;
}
}
/* =========================
HERO
========================= */
/* The client's own banner artwork, supplied as SVG.
It arrived as a 4.3MB SVG wrapping five base64 PNGs — an export from a design
tool rather than real vector art, so it carried the weight of a raster with
none of the compression. Rendered at 1920x1080 and encoded properly it is
138KB of WebP: the same picture, a thirty-second of the bytes. A 4.3MB hero
is a several-second wait on Indian mobile data and it blocks the first thing
anyone sees.
The `background-image` line overrides only the image from the shorthand
above, so position, size and repeat survive. Browsers that do not understand
image-set() ignore that declaration and keep the JPEG from the shorthand,
which is why the shorthand names the JPEG rather than the WebP.
Only .hero-banner is repointed. `.category-banner--all` further down this
file also uses hero.jpg and is a DIFFERENT component (the shop "all"
banner) — repointing it here would silently restyle a page nobody asked
about. hero.jpg stays on disk for it, and for the og:image default in
partials/seo.ejs. */
.hero-banner{
width:100%;
height:100vh;
min-height:500px;
background:url('/images/banner.jpg') center center/cover no-repeat;
background-image:image-set(
url('/images/banner.webp') type('image/webp'),
url('/images/banner.jpg') type('image/jpeg')
);
}
.hero-overlay{
height:100%;
background:rgba(0,0,0,.25);
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:flex-start;
padding: 100px;
text-align:center;
color:#F1EFE8;
}
.hero-subtitle{
letter-spacing:4px;
font-size:.8rem;
margin-bottom:20px;
}
/* No stylesheet defined this, so every placeholder on the storefront fell
through to the browser default, which renders around #757575 and measured
4.0:1 against the cream search field. Set explicitly rather than inherited
from the UA. The admin has its own value: its fields sit on near-black. */
::placeholder{
color:#6b6b6b;
opacity:1;
}
.hero-overlay h1{
font-size:5rem;
line-height:.85;
max-width:700px;
font-weight:900;
/* .hero-overlay sets text-align:center, which this inherited. The flex
column already left-aligns each child box, so the blocks looked correct,
but every wrapped LINE of the heading centred inside that box: "FOR
EVERY" sat 38px right of the subtitle and button at 1440, and at 390 the
three wrapped lines started at 34, 83 and 127px against a 30px edge, a
visible wedge. */
text-align:left;
}
.hero-btn{
margin-top:30px;
background:#F1EFE8;
color:#131313;
padding:18px 40px;
text-decoration:none;
font-weight:900;
}
/* =========================
PREMIUM SECTION HEADINGS
========================= */
.mini-categories{
display:flex;
justify-content:center;
gap:20px;
padding:30px 0;
}
.mini-categories div{
padding:12px 24px;
border:1px solid #d9d4ca;
border-radius:999px;
font-weight:700;
cursor:pointer;
transition:.3s;
}
.mini-categories div:hover{
background:#131313;
color:white;
}
.section-heading{
text-align:center;
margin-bottom:70px;
}
.section-heading span{
display:block;
font-size:.8rem;
letter-spacing:6px;
text-transform:uppercase;
color:#707070;
margin-bottom:15px;
font-weight:600;
}
.section-heading h1,
.section-heading h2{
margin:0;
font-size:3rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:-2px;
line-height:1;
color:#131313;
}
/* =========================
COLLECTIONS
========================= */
/* =========================
MAIN COLLECTIONS
========================= */
.collections{
display:grid;
grid-template-columns:repeat(5,1fr);
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
.collection-content h2{
font-size:.75rem;
letter-spacing:1px;
}
.collection-card{
position:relative;
height:220px;
overflow:hidden;
background:#f5f2eb;
}
.collection-card img{
width:100%;
height:240px;
object-fit:contain;
object-position:center bottom;
transition:.4s ease;
}
.collection-card:hover img{
transform:scale(1.08);
}
.collection-content{
position:absolute;
bottom:15px;
left:0;
width:100%;
text-align:center;
}
.collection-content h2{
color:#131313;
font-size:.85rem;
font-weight:900;
letter-spacing:2px;
}
/* =========================
OVERSIZED COLLECTIONS
========================= */
.title-line{
width:70px;
height:4px;
background:#F1EFE8;
margin:25px auto 0;
}
.oversized-collections{
padding:34px 3.2% 30px;
background:#F1EFE8;
}
.category-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
max-width:1400px;
margin:60px auto 0;
}
.category-card{
background:transparent;
border:none;
box-shadow:none;
overflow:visible;
position:relative;
}
.category-card:hover{
transform:translateY(-12px);
box-shadow:0 25px 50px rgba(0,0,0,.12);
}
/* A planned category with artwork but nothing to sell yet.
Deliberately does NOT lift on hover and shows a default cursor: the hover
transform on a real card is the site's own signal that a tile is somewhere
you can go, and reusing it here would promise a destination that does not
exist. The card is a div with no href for the same reason.
The photograph is dimmed rather than greyscaled. Desaturating the client's
own product photography to communicate a state reads as an image that failed
to load; holding the colour and dropping the contrast reads as deliberate. */
.category-card--soon{
cursor:default;
pointer-events:none;
}
/* Both selectors, deliberately. `.category-grid--home .category-card:hover`
further down this file is THREE classes and outranks a bare
`.category-card--soon:hover`, so on the homepage strip — the only place these
tiles appear — the lift would win on specificity. It does not today only
because pointer-events:none stops :hover ever matching, which means the
inertness rests entirely on one property. If anyone ever removes that to make
a tooltip work, the lift silently returns. Two rules, and it holds either
way. */
.category-card--soon:hover,
.category-grid--home .category-card--soon:hover{
transform:none;
box-shadow:none;
}
.category-card--soon img{
opacity:.55;
}
.category-card--soon .category-card__content h3,
.category-card--soon .category-card__content p{
opacity:.75;
}
.category-card__soon-badge{
position:absolute;
top:14px;
left:14px;
z-index:2;
padding:5px 11px;
border-radius:999px;
background:rgba(19,19,19,.88);
color:#F1EFE8;
/* Was .62rem, which measured 9.92px. Small enough that it stops being a
label and starts being texture, and this one has a job to do: it is the
only thing telling a customer the tile is not shoppable. .72rem holds the
badge proportion without shrinking into decoration. */
font-size:.72rem;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
white-space:nowrap;
}
.category-card img{
width:100%;
height:420px;
object-fit:contain;
background:transparent;
transition:.4s;
display:block;
position:relative;
z-index:2;
}
.category-card:hover img{
transform:scale(1.03);
}
.category-card::before{
content:attr(data-title);
position:absolute;
top:20px;
left:50%;
transform:translateX(-50%);
font-size:90px;
font-weight:900;
color:#bdbdbd;
z-index:1;
}
.category-card:hover::before{
opacity:1;
}
.category-card h3{
position:absolute;
bottom:15px;
left:50%;
transform:translateX(-50%);
background:#111;
color:#fff;
padding:14px 34px;
border-radius:999px;
width:auto;
min-width:180px;
}
.category-card:hover h3{
letter-spacing:2px;
}
.section-heading__copy{
margin-top:8px;
color:#7b776f;
font-size:.82rem;
font-weight:500;
}
.category-grid--home{
/* Was a hardcoded repeat(5,...) from when there were five categories. With
three, the row filled three of five tracks and left two empty columns of
dead space on the right. auto-fit sizes to however many categories exist,
the 380px ceiling stops three cards stretching into billboards, and
justify-content centres whatever is left rather than pinning it left. */
/* auto-fit read the available width at 1024 as room for two tracks, so the
third card dropped to its own row and left the same hole the fix was
meant to close, just at a laptop width instead. Three explicit columns
that can shrink to nothing but never exceed 380px cannot wrap, so the row
stays a row from 993px upwards and the cards simply narrow. */
grid-template-columns:repeat(3,minmax(0,380px));
justify-content:center;
gap:16px;
max-width:1500px;
margin-top:34px;
}
.category-grid--home .category-card{
min-height:354px;
border-radius:6px;
overflow:hidden;
background:#d9d3c8;
border:0;
box-shadow:0 14px 34px rgba(19,19,19,.13);
isolation:isolate;
}
.category-grid--home .category-card:hover{
transform:translateY(-6px);
box-shadow:0 22px 42px rgba(19,19,19,.2);
}
.category-grid--home .category-card::before{
content:"";
inset:0;
top:auto;
left:auto;
transform:none;
width:auto;
height:auto;
background:linear-gradient(180deg,rgba(0,0,0,0) 28%,rgba(0,0,0,.28) 62%,rgba(0,0,0,.64) 100%);
z-index:3;
transition:opacity .35s ease, background .35s ease;
}
.category-grid--home .category-card:hover::before{
background:linear-gradient(180deg,rgba(0,0,0,0) 24%,rgba(0,0,0,.32) 58%,rgba(0,0,0,.72) 100%);
}
.category-grid--home .category-card img{
height:100%;
min-height:354px;
object-fit:cover;
background:#d9d3c8;
z-index:1;
transition:transform .65s ease, filter .65s ease;
}
.category-grid--home .category-card:hover img{
transform:scale(1.08);
filter:saturate(1.06) contrast(1.04);
}
.category-grid--home .category-card__content{
position:absolute;
left:16px;
right:16px;
bottom:16px;
z-index:4;
}
.category-grid--home .category-card h3{
position:static;
transform:none;
min-width:0;
padding:0;
margin:0 0 8px;
background:transparent;
border-radius:0;
color:#fff;
/* Scales with the card instead of a fixed 1.55rem, so a longer name like
COMFORT CREW cannot run past the card edge at narrower widths. */
font-size:clamp(1.1rem, 1.6vw, 1.5rem);
line-height:1.05;
font-weight:900;
letter-spacing:0;
text-transform:uppercase;
overflow-wrap:break-word;
}
.category-grid--home .category-card:hover h3{
letter-spacing:0;
}
.category-grid--home .category-card p{
margin:0 0 12px;
color:rgba(255,255,255,.82);
font-size:.78rem;
line-height:1.4;
font-weight:600;
}
.category-card__arrow{
width:42px;
height:42px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.76);
color:#fff;
font-size:1rem;
font-weight:900;
box-shadow:0 10px 22px rgba(0,0,0,.22);
transition:transform .28s ease, background .28s ease, box-shadow .28s ease;
}
.category-grid--home .category-card:hover .category-card__arrow{
transform:translateX(5px);
background:#000;
box-shadow:0 14px 28px rgba(0,0,0,.3);
}
/* =========================
FEATURED SECTION
========================= */
.featured{
background:#131313;
color:#F1EFE8;
padding:120px 5%;
}
/* =========================
FEATURED
========================= */
/* The second selector was missing its .featured prefix, so it applied to every
.section-heading h2 on the site rather than only the ones inside this dark
section. .oversized-collections has a #F1EFE8 background, so "SHOP BY STYLE"
was cream text on a cream panel at 1:1 and simply did not appear. Same class
of fault as the invisible form labels, in the one place nobody was looking:
a heading on the homepage. */
.featured .section-heading h1,
.featured .section-heading h2{
color:#F1EFE8;
}
.featured .section-heading span{
color:#999;
}
.featured-heading{
text-align:center;
margin-bottom:80px;
}
.featured-heading span{
color:#8a8a8a;
letter-spacing:8px;
font-size:.8rem;
text-transform:uppercase;
}
.featured-heading h2{
color:#F1EFE8;
font-size:5rem;
font-weight:900;
letter-spacing:-3px;
margin-top:15px;
text-transform:uppercase;
}
.heading-line{
width:120px;
height:4px;
background:#F1EFE8;
margin:25px auto 0;
}
.product-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.product-card{
background:#F1EFE8;
border-radius:24px;
overflow:hidden;
transition:.4s ease;
}
.product-card:hover{
transform:translateY(-10px);
}
/* One shape for every product card, at every width.
This was height:420px + object-fit:contain, and contain is what made the
cards look inconsistent. Contain fits the whole photo inside the box, so the
RENDERED size depends on the photo's own proportions: the catalogue carries
both 1245x1600 (0.778) and 1025x1534 (0.668), and in a fixed box the second
drew about 11% narrower than the first with cream either side. Two garments,
same card, visibly different sizes. Nothing was wrong with the CSS numbers;
the variable was the photography.
aspect-ratio fixes the BOX and cover fills it, so every card is now
identical regardless of what was uploaded. Cover scales uniformly, so
nothing is stretched or distorted, it is cropped instead, and the crop is
anchored to the top because a garment shot loses its hem more gracefully
than its neckline, print or collar.
3/4 is the shallower of the two ratios in use, so the taller shots give up
the least. The uncropped view now lives in the full-screen viewer, which is
the trade this makes: uniform grid, one tap to see the whole piece.
Consistency here depends on the shoot as much as the CSS. Exporting product
photos at one ratio is what makes the crop invisible. */
.product-card img{
width:100%;
aspect-ratio:3/4;
height:auto;
object-fit:cover;
object-position:top center;
background:#F1EFE8;
border-radius:25px;
transition:.4s ease;
}
.product-info{
padding:20px;
/* .featured sets color:#F1EFE8 for its dark band, and .product-card sits
inside it with a CREAM background, so every child that did not declare a
colour inherited cream onto cream. The product NAME and the PRICE THE
CUSTOMER PAYS were both invisible on every card; only the struck-through
original and the discount badge, which set their own colours, showed. A
shopper saw a crossed-out price and a "-10%" badge with a blank space
where the actual price belongs. Set on the container so the name and
price inherit correctly and the muted children keep their own. */
color:#131313;
}
.product-info span{
font-size:.75rem;
color:#707070;
letter-spacing:2px;
}
.product-info h3{
margin-top:10px;
font-size:1.2rem;
font-weight:800;
}
.product-info p{
margin-top:10px;
font-size:1.1rem;
font-weight:900;
}
.product-btn{
/* Was 35px tall. This is the buy path on a phone. */
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
margin-top:15px;
padding:10px 20px;
background:#131313;
color:#F1EFE8;
text-decoration:none;
font-size:.8rem;
font-weight:700;
transition:.3s ease;
}
.product-btn:hover{
background:#333;
}
.product-card__link{
display:block;
position:relative;
text-decoration:none;
}
.product-card__badge{
position:absolute;
top:16px;
left:16px;
background:#131313;
color:#F1EFE8;
padding:6px 12px;
font-size:.75rem;
font-weight:800;
border-radius:999px;
z-index:2;
}
.product-pricing{
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
}
.product-price{
font-size:1.1rem;
font-weight:900;
}
.product-original{
font-size:.9rem;
color:#707070;
text-decoration:line-through;
font-weight:600;
}
.category-card{
text-decoration:none;
color:inherit;
transition:.4s ease;
display:block;
}
a.category-card{
text-decoration:none;
}
/* =========================
ABOUT
========================= */
.about-brand{
align-items:center;
display:grid;
grid-template-columns:1fr 1fr;
min-height:auto;
}
.about-left img{
display:block;
width:100%;
/* Was height:100% on an auto-height grid row, so a 1066x1600 portrait at
half the viewport rendered around 1080px tall and set the height of the
whole section. Capped, and object-fit:cover crops rather than squashes. */
height:clamp(340px, 44vw, 560px);
object-fit:cover;
}
.about-right{
padding:100px;
display:flex;
min-height:auto;
flex-direction:column;
justify-content:center;
}
.about-right span{
letter-spacing:4px;
font-size:.8rem;
}
.about-right h2{
margin:25px 0;
font-size:3.5rem;
line-height:1.1;
}
.about-right p{
max-width:500px;
color:#555;
}
.about-right a{
margin-top:30px;
width:max-content;
background:#131313;
color:#F1EFE8;
text-decoration:none;
padding:15px 30px;
}
/* =========================
TICKER
========================= */
.ticker{
background:#F1EFE8;
color:#131313;
overflow:hidden;
white-space: nowrap;
padding:18px 0;
}
.ticker-track{
font-size:1rem;
font-weight:700;
animation:scroll 20s linear infinite;
}
@keyframes scroll{
from{
transform:translateX(100%);
}
to{
transform:translateX(-100%);
}
}
/* =========================
FOOTER
========================= */
.footer{
background:#131313;
color:#F1EFE8;
}
.footer-container{
width:90%;
max-width:1400px;
margin:auto;
padding:80px 0;
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:50px;
}
.footer h2{
margin-bottom:20px;
}
.footer h3{
margin-bottom:20px;
}
.footer ul{
list-style:none;
}
.footer li{
margin-bottom:4px;
}
.footer a{
color:#F1EFE8;
text-decoration:none;
}
/* Footer list links were ~17px tall, well under the 44px touch minimum, and
they sit close together so mis-taps were likely. Scoped to list links so
inline links inside paragraphs keep their normal flow. */
/* The 44px touch target is a real requirement on a phone and pure dead space
with a mouse: at 44px plus the 12px li margin, every footer row was 56px
tall, which is what made the link lists look so loosely spaced on desktop.
Scoped to touch widths below. */
.footer li a{
display:inline-flex;
align-items:center;
}
.footer input{
width:100%;
padding:12px;
margin-bottom:10px;
border:none;
}
.footer button{
width:100%;
padding:12px;
border:none;
cursor:pointer;
}
.footer-bottom{
text-align:center;
padding:20px;
border-top:1px solid rgba(255,255,255,.1);
}
/* =========================
MOBILE
========================= */
@media(max-width:992px){
.section-heading h1,
.section-heading h2{
font-size:2.8rem;
}
.collections{
grid-template-columns:repeat(2,1fr);
}
.collection-card{
height:160px;
}
.category-grid:not(.category-grid--home),
.about-brand{
grid-template-columns:1fr;
}
/* .product-grid was in the 1fr list above. One column below 992px meant a
card up to ~940px wide holding an image box capped at 320px tall, and
with object-fit:contain a portrait photo is constrained by the SHORT
side: the live catalogue's 1025x1534 shots rendered 214px wide inside
it, floating in cream on a full-width card. Two columns down to 576px
keeps the card near the photo's own width; the phone block below goes
back to one, where a full-width card is what makes the photo big. */
.product-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.category-grid--home{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.category-card img{
height:350px;
}
/* Nothing to override any more. The base .product-card img rule is now
ratio-based and cover, so it is already correct at every width and a
breakpoint override would only be a second number to keep in step. */
.hero-overlay h1{
font-size:3.5rem;
}
.featured-heading h2{
font-size:3rem;
}
/* Touch widths only. See .footer li a above. */
.footer li a{
min-height:44px;
}
.footer li{
margin-bottom:8px;
}
.footer-container{
grid-template-columns:1fr;
}
.pdp-layout{
grid-template-columns:1fr;
}
.category-banner h1{
font-size:3rem;
}
}
@media(max-width:576px){
/* Two products per row on a phone, which is the standard fashion-grid
shape and lets a customer compare two pieces without scrolling.
This reverses an earlier one-column change made to answer "photos look
small". One column was the wrong lever: the photos looked small because
contain was letterboxing them inside a short fixed box, not because the
cards were narrow. With the box now ratio-based and cover, a card at
this width renders the garment larger than the old full-width card did,
because the photo fills the card instead of floating inside it.
Gap tightens with the cards: 30px between two ~170px columns is most of
a gutter, and the row stops reading as a pair. */
/* Density modelled on the Indian marketplace grids (Myntra and the like),
which is what the client asked to match, but kept inside this brand's
own styling rather than copied wholesale. So: their gutter, their type
scale and their single-line truncation, and our cream card, rounded
corner and buy buttons.
Myntra itself could not be measured — it, Ajio and Nykaa Fashion all
refuse an automated browser at the edge — so these are the marketplace
convention rather than numbers read off their DOM. Worth re-checking
against a real screenshot before treating them as exact. */
.product-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
/* 5% of a 390px screen is ~20px of padding each side, which at two columns
costs more than a whole gutter. Marketplace grids run close to the edge
because the photograph is the product. */
.featured{
padding:64px 12px;
}
/* The heading does NOT follow the cards to the edge. Photographs can run
close to the trim, centred type at 12px from it reads as a mistake.
Padding goes back on here, and the 80px rule below the heading comes
down with the rest of the section's rhythm. */
.featured-heading{
padding:0 12px;
margin-bottom:40px;
}
.featured-heading span{
letter-spacing:4px;
font-size:.7rem;
}
/* Corner comes in with the card. A 24px radius on a 168px tile is a much
bigger visual event than the same radius on a 364px one, and it starts
eating the garment at the corners. */
.product-card{
border-radius:16px;
}
.product-card img{
border-radius:16px;
}
.product-info{
padding:10px;
}
/* Category eyebrow: small, muted, spaced. */
.product-info span{
font-size:.625rem;
letter-spacing:1px;
}
/* One line, then ellipsis. This is the detail that makes a marketplace grid
look tidy: without it a two-word name and a five-word name build cards of
different heights, the rows stop aligning, and the grid reads as broken
rather than dense. */
.product-info h3{
font-size:.8125rem;
font-weight:600;
margin-top:4px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* Price, was-price and discount on one line, which is the row a shopper
actually scans. Wraps only if the numbers genuinely do not fit. */
.product-pricing{
gap:6px;
margin-top:4px;
flex-wrap:wrap;
}
.product-price{
font-size:.8125rem;
font-weight:800;
}
.product-original{
font-size:.6875rem;
}
.product-info p{
font-size:.8125rem;
margin-top:4px;
}
/* Badge scales with the tile or it covers a third of the photograph. */
.product-card__badge{
top:8px;
left:8px;
padding:3px 7px;
font-size:.625rem;
}
/* Side by side at this width the two buttons were 40px wide each with the
label clipped. Stacked, both keep a full-width 44px target. */
.product-actions{
flex-direction:column;
gap:6px !important;
margin-top:10px !important;
}
.product-btn{
width:100%;
font-size:.7rem;
padding:10px 6px;
}
/* .about-right kept its desktop 100px padding on phones, leaving 175px of
usable width on a 375px screen. The section measured 446px wide at every
phone size, and body{overflow-x:hidden} clipped the excess instead of
letting it scroll, so the text was silently cut off. */
.about-right{
padding:40px 20px;
}
.about-right h2{
font-size:2rem;
margin:18px 0;
}
.about-right p{
max-width:100%;
}
.shop-filters{
align-items:stretch;
}
.shop-filters__control,
.shop-filters__button,
.search-form__control,
.search-form__button{
width:100%;
min-width:0;
}
}
/* =========================
CATEGORY PAGE
========================= */
.category-banner{
width:100%;
min-height:420px;
background:#131313;
position:relative;
overflow:hidden;
}
.category-banner__img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
.category-banner--all{
background:url('/images/hero.jpg') center center/cover no-repeat;
}
.category-banner__overlay{
position:relative;
z-index:1;
min-height:420px;
background:rgba(0,0,0,.45);
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:flex-start;
padding:80px 5%;
color:#F1EFE8;
}
.category-banner__overlay h1{
font-size:4.5rem;
font-weight:900;
line-height:.9;
letter-spacing:-2px;
text-transform:uppercase;
margin-top:10px;
}
.category-banner__desc{
max-width:600px;
margin-top:20px;
color:rgba(241,239,232,.85);
line-height:1.6;
}
.category-banner__count{
margin-top:20px;
font-size:.85rem;
letter-spacing:3px;
text-transform:uppercase;
font-weight:700;
}
.category-products{
padding-bottom:120px;
}
.breadcrumb{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
font-size:.85rem;
margin-bottom:40px;
color:#707070;
}
.breadcrumb a{
color:#707070;
text-decoration:none;
transition:.2s;
}
.breadcrumb a:hover{
color:#131313;
}
.breadcrumb--light{
margin-bottom:20px;
color:rgba(241,239,232,.7);
}
.breadcrumb--light a{
color:rgba(241,239,232,.7);
}
.breadcrumb--light a:hover{
color:#F1EFE8;
}
.breadcrumb span{
opacity:.5;
}
.page-empty{
text-align:center;
padding:120px 5%;
min-height:50vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.page-empty--dark{
padding:60px 0;
}
.page-empty__text{
color:#707070;
margin:20px 0 30px;
font-size:1.1rem;
}
/* =========================
PRODUCT DETAILS PAGE
========================= */
.pdp-main{
padding:40px 5% 80px;
}
.pdp-container{
max-width:1400px;
margin:0 auto;
}
.pdp-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:start;
}
.pdp-gallery__main{
background:#F1EFE8;
border-radius:24px;
overflow:hidden;
margin-bottom:16px;
}
/* Now a