*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#080808;color:#f4f4f2;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}.nav{height:88px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4vw;border-bottom:1px solid #202020;position:sticky;top:0;background:rgba(8,8,8,.92);backdrop-filter:blur(12px);z-index:20}.logo{font-weight:900;letter-spacing:1px}.nav nav{display:flex;gap:32px}.nav nav a,.lang{font-size:12px;font-weight:700;letter-spacing:.6px;color:#999}.nav nav a:hover{color:#fff}.lang{justify-self:end;display:flex;gap:9px}.lang button{background:none;border:0;color:#777;font-weight:800;cursor:pointer}.lang button.active{color:#fff}.hero{min-height:calc(100vh - 88px);position:relative;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;padding:5vw 4vw;overflow:hidden}.hero-copy{z-index:2}.eyebrow,.section-num,.section-head span,.feature-copy>span,.contact>p{font-size:12px;letter-spacing:2px;color:#aaa}.hero h1{font-size:clamp(92px,12vw,190px);line-height:.73;letter-spacing:-9px;margin:40px 0 45px;font-weight:900}.sub{font-size:16px;color:#ccc}.actions{display:flex;gap:10px;margin-top:45px}.primary,.secondary{display:inline-block;padding:17px 22px;border:1px solid #444;font-size:12px;font-weight:900;letter-spacing:.5px}.primary{background:#f5f5f2;color:#080808;border-color:#f5f5f2}.hero-visual{height:76vh;position:relative}.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080808 0%,transparent 28%,transparent 75%,#080808 100%)}.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center}.studio{position:absolute;top:7%;left:53%;font-size:14px;line-height:1.35}.scroll{position:absolute;bottom:4vw;left:4vw;font-size:13px}.section{padding:120px 4vw;border-top:1px solid #1c1c1c}.about{display:grid;grid-template-columns:.7fr 1.5fr 1fr;gap:7vw}.about h2,.section-head h2,.feature h2,.contact h2{font-size:clamp(52px,7vw,110px);line-height:.88;letter-spacing:-5px;margin:25px 0}.about p,.feature p{max-width:580px;color:#aaa;line-height:1.7}.stats{display:grid;grid-template-columns:1fr 1fr;align-content:end;gap:20px;font-size:10px;font-weight:bold}.section-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:60px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.card{margin:0;overflow:hidden}.card img{width:100%;height:72vh;object-fit:cover;transition:transform .7s}.card:hover img{transform:scale(1.025)}figcaption{font-size:11px;letter-spacing:1.5px;padding:14px 0;color:#999}.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;align-items:center}.feature-img img{width:100%;max-height:85vh;object-fit:cover}.campaign{height:95vh;position:relative;overflow:hidden}.campaign>img{width:100%;height:100%;object-fit:cover}.campaign:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.05))}.campaign-overlay{position:absolute;z-index:2;left:4vw;top:50%;transform:translateY(-50%)}.campaign-overlay h2{font-size:clamp(70px,10vw,150px);line-height:.8;letter-spacing:-7px;margin:30px 0 50px}.contact{min-height:70vh}.contact-row{display:flex;gap:35px;margin-top:70px}.contact-row a{border-bottom:1px solid #777;padding-bottom:8px}footer{border-top:1px solid #1c1c1c;padding:35px 4vw;font-size:11px;color:#777;display:flex;justify-content:space-between}.reveal{opacity:0;transform:translateY(35px);transition:opacity .85s ease,transform .85s ease}.reveal.show{opacity:1;transform:none}
@media(max-width:800px){.nav{height:70px;grid-template-columns:1fr auto}.nav nav{display:none}.hero{min-height:auto;grid-template-columns:1fr;padding:55px 6vw 80px}.hero h1{font-size:27vw;letter-spacing:-6px;margin:30px 0}.hero-visual{height:60vh;margin-top:45px}.studio{position:static;margin-top:20px;grid-row:3}.scroll{display:none}.section{padding:85px 6vw}.about{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.card img{height:auto;max-height:75vh}.feature{grid-template-columns:1fr}.feature-copy{order:-1}.section-head{display:block}.section-head h2,.about h2,.feature h2,.contact h2{letter-spacing:-3px}.campaign{height:80vh}.campaign-overlay{left:6vw}.campaign-overlay h2{letter-spacing:-4px}.contact-row{flex-direction:column;align-items:flex-start}footer{gap:20px;flex-direction:column}}
/* V3.2 HERO REFINEMENT */
.hero{
min-height:calc(100svh - 88px);
grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:3vw;
padding:4.1vw 4vw 4.8vw;
align-items:center;
}
.hero-copy{padding-right:1vw}
.hero h1{
font-size:clamp(82px,9.2vw,150px);
line-height:.79;
letter-spacing:-7px;
margin:30px 0 34px;
max-width:7ch;
}
.hero-visual{
height:min(76vh,820px);
min-height:560px;
align-self:center;
overflow:hidden;
border:1px solid rgba(255,255,255,.035);
background:#0b0b0b;
}
.hero-visual img{
object-fit:cover;
object-position:52% 44%;
transform:scale(.96);
transition:transform 1.2s cubic-bezier(.22,1,.36,1),filter 1.2s ease;
}
.hero-visual.show img{transform:scale(1)}
.hero-visual:before{
content:"";
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(90deg,#080808 0%,rgba(8,8,8,.78) 7%,rgba(8,8,8,.16) 22%,transparent 42%,transparent 80%,rgba(8,8,8,.55) 100%),
linear-gradient(0deg,rgba(8,8,8,.45),transparent 24%);
pointer-events:none;
}
.hero-visual:after{display:none}
.studio{
top:10%;
left:auto;
right:4.8vw;
z-index:3;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:4px;
font-size:11px;
line-height:1.15;
letter-spacing:.07em;
color:#d7d7d2;
}
.scroll{
bottom:2.1vw;
left:4vw;
font-size:10px;
letter-spacing:.12em;
color:#777;
}
.eyebrow{font-size:10px;letter-spacing:.18em;color:#989898}
.sub{font-size:14px;color:#bdbdb8}
.actions{margin-top:34px}
.primary,.secondary{padding:15px 20px}
@media(min-width:1200px){
.hero-copy{transform:translateY(-1.5vh)}
}
@media(max-width:1100px) and (min-width:801px){
.hero h1{font-size:clamp(76px,9.5vw,118px)}
.hero-visual{min-height:520px}
.studio{right:4vw}
}
@media(max-width:800px){
.nav{height:70px}
.hero{
grid-template-columns:1fr;
padding:50px 5.5vw 64px;
gap:28px;
}
.hero-copy{padding-right:0}
.hero h1{
font-size:clamp(82px,23vw,122px);
line-height:.78;
letter-spacing:-5px;
margin:24px 0 28px;
max-width:none;
}
.actions{margin-top:28px}
.hero-visual{
height:62svh;
min-height:500px;
margin-top:10px;
}
.hero-visual img{
object-position:55% 42%;
transform:scale(1);
}
.hero-visual:before{
background:
linear-gradient(0deg,rgba(8,8,8,.58) 0%,transparent 28%),
linear-gradient(90deg,rgba(8,8,8,.35),transparent 30%,transparent 78%,rgba(8,8,8,.28));
}
.studio{
position:absolute;
top:auto;
bottom:82px;
right:5.5vw;
left:auto;
align-items:flex-end;
font-size:9px;
}
.scroll{display:none}
}
/* V3.4 official Coal City header logo */
.logo, .brand {
display:flex;
align-items:center;
min-width:150px;
}
.brand-logo{
display:block;
width:128px;
height:auto;
max-height:58px;
object-fit:contain;
object-position:left center;
}
@media(max-width:800px){
.logo, .brand{min-width:auto}
.brand-logo{
width:104px;
max-height:46px;
}
}
/* V3.5 Catalog + WhatsApp conversion experience */
.action-btn{
font:inherit;
cursor:pointer;
}
.catalog-modal{
position:fixed;
inset:0;
z-index:999;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
opacity:0;
visibility:hidden;
transition:opacity .28s ease,visibility .28s ease;
}
.catalog-modal.open{
opacity:1;
visibility:visible;
}
.catalog-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.82);
backdrop-filter:blur(14px);
}
.catalog-dialog{
position:relative;
z-index:2;
width:min(720px,100%);
max-height:88vh;
overflow:auto;
background:#111;
border:1px solid #2b2b2b;
padding:42px;
box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.catalog-close{
position:absolute;
top:14px;
right:18px;
border:0;
background:none;
color:#fff;
font-size:34px;
line-height:1;
cursor:pointer;
}
.catalog-kicker{
margin:0 0 22px;
color:#888;
font-size:10px;
letter-spacing:.16em;
}
.catalog-dialog h3{
margin:0;
font-size:clamp(54px,8vw,94px);
line-height:.82;
letter-spacing:-.055em;
}
.catalog-desc{
max-width:520px;
margin:26px 0 30px;
color:#aaa;
line-height:1.65;
}
.catalog-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px 26px;
padding:24px 0;
border-top:1px solid #292929;
border-bottom:1px solid #292929;
color:#d5d5d0;
font-size:10px;
letter-spacing:.075em;
}
.catalog-actions{
display:flex;
gap:10px;
margin-top:28px;
flex-wrap:wrap;
}
.catalog-main,.catalog-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 18px;
font-size:11px;
font-weight:900;
letter-spacing:.06em;
border:1px solid #3a3a3a;
}
.catalog-main{
background:#f3f3ef;
color:#080808;
border-color:#f3f3ef;
}
.catalog-secondary{
color:#fff;
}
body.catalog-open{overflow:hidden}
@media(max-width:700px){
.catalog-modal{padding:12px}
.catalog-dialog{padding:34px 20px 24px}
.catalog-list{grid-template-columns:1fr}
.catalog-actions{flex-direction:column}
.catalog-main,.catalog-secondary{width:100%}
}
/* V3.7 larger catalog + social contact */
.catalog-modal{padding:2.5vh 2vw}
.catalog-dialog{
width:min(1180px,96vw);
min-height:min(780px,92vh);
max-height:94vh;
padding:clamp(32px,4.2vw,68px);
display:flex;
flex-direction:column;
justify-content:center;
}
.catalog-dialog h3{font-size:clamp(72px,9vw,150px)}
.catalog-desc{font-size:15px;max-width:680px}
.catalog-list{
grid-template-columns:repeat(3,1fr);
gap:18px 30px;
padding:30px 0;
margin-top:10px;
}
.catalog-actions{margin-top:34px}
.catalog-main,.catalog-secondary{padding:17px 22px}
.contact-row{display:grid;grid-template-columns:repeat(4,max-content);gap:34px}
@media(max-width:900px){
.contact-row{grid-template-columns:1fr 1fr;gap:24px}
.catalog-list{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
.catalog-modal{padding:0}
.catalog-dialog{width:100vw;min-height:100svh;max-height:100svh;border:0;padding:58px 22px 28px}
.catalog-dialog h3{font-size:clamp(62px,20vw,92px)}
.catalog-list{grid-template-columns:1fr}
.contact-row{grid-template-columns:1fr}
}
/* V3.8 Hero social shortcuts */
.hero-actions{
display:flex;
align-items:stretch;
gap:10px;
flex-wrap:wrap;
}
.hero-socials{
display:flex;
gap:8px;
align-items:stretch;
}
.social-icon{
width:48px;
min-width:48px;
height:48px;
border:1px solid #3b3b3b;
display:inline-flex;
align-items:center;
justify-content:center;
transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.social-icon:hover{
transform:translateY(-3px);
border-color:#f3f3ef;
background:#121212;
}
.social-icon svg{
width:19px;
height:19px;
fill:none;
stroke:#f3f3ef;
stroke-width:1.7;
}
.trendyol-icon span{
color:#f3f3ef;
font-size:16px;
font-weight:900;
letter-spacing:-.03em;
}
@media(max-width:800px){
.hero-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.hero-actions .primary,
.hero-actions .secondary{
width:100%;
text-align:center;
justify-content:center;
}
.hero-socials{
grid-column:1 / -1;
}
.social-icon{
width:52px;
height:52px;
}
}
/* V3.9 refined mobile hero */
.editorial-socials{
display:flex;
gap:18px;
align-items:center;
margin-left:6px;
}
.editorial-socials a{
font-size:10px;
font-weight:800;
letter-spacing:.08em;
color:#969696;
border:0;
padding:0;
background:none;
}
.editorial-socials a:hover{color:#fff}
@media(max-width:800px){
.hero{
padding:34px 5.5vw 58px;
gap:22px;
}
.hero-copy{
padding-top:4px;
}
.eyebrow{
margin-bottom:6px;
}
.hero h1{
font-size:clamp(76px,21vw,110px);
line-height:.80;
letter-spacing:-4.5px;
margin:18px 0 22px;
}
.sub{
font-size:13px;
line-height:1.45;
margin-bottom:0;
}
.hero-actions{
display:flex !important;
flex-direction:column;
align-items:stretch;
gap:9px;
margin-top:24px;
}
.hero-actions .primary{
width:100%;
min-height:56px;
padding:16px 18px;
font-size:12px;
letter-spacing:.055em;
}
.hero-actions .secondary{
width:100%;
min-height:48px;
padding:14px 18px;
background:transparent;
border:1px solid #2f2f2f;
color:#f1f1ed;
font-size:11px;
letter-spacing:.06em;
}
.editorial-socials{
margin:6px 0 0;
gap:24px;
padding-top:4px;
}
.editorial-socials a{
font-size:10px;
color:#8e8e8e;
}
.hero-visual{
margin-top:8px;
height:56svh;
min-height:430px;
}
.hero-visual img{
object-position:54% 38%;
}
.studio{
bottom:58px;
font-size:8px;
opacity:.82;
}
}
/* V4.1 CLEAN CATALOG */
.action-btn{font:inherit;cursor:pointer}
.catalog-modal{
position:fixed;inset:0;z-index:9999;
display:flex;align-items:center;justify-content:center;
padding:24px;opacity:0;visibility:hidden;
transition:opacity .25s ease,visibility .25s ease;
}
.catalog-modal.open{opacity:1;visibility:visible}
.catalog-backdrop{
position:absolute;inset:0;background:rgba(0,0,0,.84);
backdrop-filter:blur(12px);
}
.catalog-v41{
position:relative;z-index:2;
width:min(1080px,95vw);max-height:92vh;overflow:auto;
background:#0d0d0d;border:1px solid #2b2b2b;
padding:clamp(30px,4vw,58px);
}
.catalog-close{
position:absolute;right:18px;top:12px;
background:none;border:0;color:#fff;font-size:34px;cursor:pointer;
}
.catalog-kicker{font-size:10px;letter-spacing:.15em;color:#777;margin:0 0 18px}
.catalog-v41 h3{
margin:0;font-size:clamp(64px,8vw,126px);
line-height:.82;letter-spacing:-.06em
}
.catalog-desc{max-width:650px;color:#9a9a9a;line-height:1.6;margin:22px 0 28px}
.catalog-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.catalog-choice{
border:1px solid #2b2b2b;padding:26px;min-height:260px;
display:flex;flex-direction:column
}
.catalog-choice-no{font-size:10px;color:#666;margin-bottom:24px}
.catalog-choice h4{
margin:0;font-size:clamp(34px,4vw,56px);
line-height:.9;letter-spacing:-.045em
}
.catalog-choice p{color:#888;font-size:11px;line-height:1.55;margin:18px 0 26px}
.catalog-choice-actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.catalog-choice-actions a{
border:1px solid #3a3a3a;padding:12px 14px;
font-size:10px;font-weight:900;letter-spacing:.06em
}
.catalog-choice-actions a:first-child{background:#f2f2ef;color:#080808;border-color:#f2f2ef}
.catalog-bottom{
margin-top:22px;padding-top:18px;border-top:1px solid #262626;
display:flex;justify-content:space-between;gap:20px;
font-size:10px;color:#777
}
.catalog-bottom a{color:#fff;font-weight:900}
body.catalog-open{overflow:hidden}
@media(max-width:700px){
.catalog-modal{padding:0}
.catalog-v41{
width:100vw;min-height:100svh;max-height:100svh;
border:0;padding:56px 18px 24px
}
.catalog-v41 h3{font-size:clamp(58px,18vw,86px)}
.catalog-choice-grid{grid-template-columns:1fr}
.catalog-choice{min-height:220px;padding:20px}
.catalog-choice-actions a{flex:1;text-align:center}
.catalog-bottom{flex-direction:column;align-items:flex-start}
}
/* V4.3 premium catalog covers */
.catalog-v41{
width:min(1240px,96vw);
padding:clamp(28px,3.8vw,58px);
}
.catalog-choice-grid{
gap:18px;
}
.catalog-cover-card{
padding:0;
overflow:hidden;
background:#0a0a0a;
min-height:500px;
position:relative;
border:1px solid #262626;
transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease;
}
.catalog-cover-card:hover{
transform:translateY(-5px);
border-color:#4a4a4a;
}
.catalog-cover-image{
height:320px;
position:relative;
overflow:hidden;
background:#151515;
}
.catalog-cover-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center 20%;
transition:transform .7s cubic-bezier(.22,1,.36,1),filter .5s ease;
filter:saturate(.78) contrast(1.04);
}
.catalog-cover-card:hover .catalog-cover-image img{
transform:scale(1.035);
filter:saturate(.9) contrast(1.06);
}
.catalog-cover-gradient{
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.68) 100%);
}
.catalog-cover-image .catalog-choice-no{
position:absolute;
left:18px;
top:16px;
z-index:2;
color:#eee;
font-size:10px;
letter-spacing:.12em;
}
.catalog-cover-content{
padding:24px 24px 26px;
display:flex;
flex-direction:column;
min-height:220px;
}
.catalog-cover-kicker{
margin:0 0 14px!important;
color:#666!important;
font-size:9px!important;
letter-spacing:.14em;
}
.catalog-cover-content h4{
margin:0;
font-size:clamp(34px,3.8vw,52px);
line-height:.88;
}
.catalog-cover-content>p:not(.catalog-cover-kicker){
margin:14px 0 22px;
}
.catalog-cover-content .catalog-choice-actions{
margin-top:auto;
}
.catalog-v41 .catalog-bottom{
margin-top:26px;
}
@media(max-width:700px){
.catalog-cover-card{min-height:auto}
.catalog-cover-image{height:42svh;min-height:280px}
.catalog-cover-content{min-height:210px}
}
/* V4.4 MANUFACTURING */
.manufacturing-v44{
background:#080808;
color:#f1f1ed;
padding:110px 4vw 90px;
border-top:1px solid #202020;
}
.mfg-head{max-width:1000px;margin-bottom:72px}
.mfg-kicker{font-size:10px;letter-spacing:.16em;color:#777;margin:0 0 22px}
.mfg-head h2,.mfg-final h2{
margin:0;
font-size:clamp(76px,10vw,158px);
line-height:.79;
letter-spacing:-.065em;
}
.mfg-intro{
max-width:600px;
margin:30px 0 0;
color:#999;
font-size:14px;
line-height:1.65;
}
.mfg-process{border-top:1px solid #292929}
.mfg-step{
display:grid;
grid-template-columns:70px minmax(260px,1fr) minmax(220px,.55fr);
align-items:center;
gap:24px;
padding:28px 0;
border-bottom:1px solid #292929;
transition:padding-left .35s ease,background .35s ease;
}
.mfg-step:hover{padding-left:14px;background:#0d0d0d}
.mfg-step span{font-size:10px;color:#666;letter-spacing:.1em}
.mfg-step h3{
margin:0;
font-size:clamp(28px,4vw,58px);
line-height:.9;
letter-spacing:-.045em;
}
.mfg-step p{
margin:0;
color:#777;
font-size:11px;
letter-spacing:.04em;
}
.mfg-final{
margin-top:110px;
padding-top:60px;
border-top:1px solid #292929;
display:grid;
grid-template-columns:1fr auto;
align-items:end;
gap:50px;
}
.mfg-final h2{font-size:clamp(62px,8vw,124px)}
.mfg-final>div>p:last-child{
max-width:540px;color:#888;line-height:1.6;margin:26px 0 0
}
.mfg-final>a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:56px;
padding:0 22px;
border:1px solid #eee;
background:#eee;
color:#080808;
font-size:10px;
font-weight:900;
letter-spacing:.07em;
white-space:nowrap;
}
@media(max-width:800px){
.manufacturing-v44{padding:80px 5.5vw 70px}
.mfg-head{margin-bottom:50px}
.mfg-head h2{font-size:clamp(68px,19vw,100px)}
.mfg-step{
grid-template-columns:36px 1fr;
gap:8px 12px;
padding:22px 0;
}
.mfg-step h3{font-size:clamp(28px,8vw,42px)}
.mfg-step p{grid-column:2;font-size:10px}
.mfg-final{
margin-top:76px;
padding-top:42px;
grid-template-columns:1fr;
gap:30px;
}
.mfg-final h2{font-size:clamp(58px,17vw,88px)}
.mfg-final>a{width:100%}
}
/* V4.5 GUNMETAL EDITION — visual theme only */
:root{
--gm-deep:#111416;
--gm-main:#171b1e;
--gm-surface:#20252a;
--gm-surface-2:#262c31;
--gm-line:#394047;
--gm-line-soft:#2b3136;
--gm-text:#f0efea;
--gm-muted:#9ca3a8;
--gm-steel:#c4c9cc;
}
html,body{background:var(--gm-main);color:var(--gm-text)}
body{
background:
radial-gradient(circle at 72% 12%,rgba(155,166,174,.08),transparent 28%),
linear-gradient(135deg,var(--gm-main),var(--gm-deep) 72%);
}
.nav{
background:rgba(17,20,22,.88)!important;
border-bottom-color:var(--gm-line-soft)!important;
backdrop-filter:blur(16px);
}
.nav a,.nav button{color:var(--gm-text)}
.hero{
background:
radial-gradient(circle at 68% 35%,rgba(156,166,174,.09),transparent 31%),
linear-gradient(120deg,#15191c 0%,#101315 72%)!important;
}
.hero-visual{background:#111416!important;border-color:#30363b!important}
.hero-visual:before{
background:
linear-gradient(90deg,#121619 0%,rgba(18,22,25,.76) 8%,rgba(18,22,25,.14) 24%,transparent 44%,transparent 80%,rgba(12,15,17,.55) 100%),
linear-gradient(0deg,rgba(11,14,16,.46),transparent 26%)!important;
}
.eyebrow,.studio,.scroll,.sub{color:var(--gm-muted)!important}
.primary{
background:var(--gm-text)!important;
border-color:var(--gm-text)!important;
color:#121517!important;
}
.secondary{
background:rgba(35,41,46,.55)!important;
border-color:var(--gm-line)!important;
color:var(--gm-text)!important;
}
.secondary:hover{background:var(--gm-surface-2)!important;border-color:var(--gm-steel)!important}
section:not(.hero),footer{border-color:var(--gm-line-soft)!important}
.collections,.about,.contact,.manufacturing-v44{
background:
radial-gradient(circle at 10% 0%,rgba(165,174,180,.045),transparent 24%),
var(--gm-main)!important;
}
.card,.collection-card,.catalog-choice{
background:var(--gm-surface)!important;
border-color:var(--gm-line)!important;
}
.catalog-backdrop{background:rgba(8,10,11,.88)!important}
.catalog-dialog,.catalog-v41{
background:
linear-gradient(145deg,#22282d 0%,#15191c 72%)!important;
border-color:#444c53!important;
box-shadow:0 40px 110px rgba(0,0,0,.65)!important;
}
.catalog-cover-card{background:#181c1f!important;border-color:#394047!important}
.catalog-cover-gradient{
background:linear-gradient(180deg,transparent 38%,rgba(16,20,23,.86) 100%)!important;
}
.catalog-choice-actions a:not(:first-child){border-color:#4b545b!important;color:var(--gm-text)!important}
.catalog-choice-actions a:first-child{
background:var(--gm-text)!important;color:#111416!important;border-color:var(--gm-text)!important
}
.catalog-bottom,.catalog-choice,.catalog-list,.mfg-process,.mfg-step,.mfg-final{
border-color:var(--gm-line)!important;
}
.manufacturing-v44{
background:
radial-gradient(circle at 85% 15%,rgba(175,185,192,.07),transparent 28%),
linear-gradient(160deg,#181d21,#101315 78%)!important;
}
.mfg-step:hover{background:#20262b!important}
.mfg-kicker,.mfg-step span,.mfg-step p,.mfg-intro,.mfg-final>div>p:last-child{
color:var(--gm-muted)!important;
}
.mfg-final>a{
background:var(--gm-text)!important;
color:#111416!important;
border-color:var(--gm-text)!important;
}
.contact-row a,.editorial-socials a{color:var(--gm-steel)!important}
.contact-row a:hover,.editorial-socials a:hover{color:#fff!important}
::selection{background:#aeb6bb;color:#111416}
/* subtle brushed-metal highlight, intentionally restrained */
.manufacturing-v44,.catalog-dialog{
position:relative;
}
.manufacturing-v44:before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.12;
background:repeating-linear-gradient(
0deg,
rgba(255,255,255,.025) 0,
rgba(255,255,255,.025) 1px,
transparent 1px,
transparent 4px
);
}
.manufacturing-v44>*{position:relative;z-index:1}
/* V4.6 TITANIUM GREY — cool blue metallic reference */
:root{--ti-deep:#252e37;--ti-dark:#465564;--ti:#788aa0;--ti-light:#aab9c8;--ti-ice:#d7e0e7}
body{background:var(--ti-deep);color:#f6f7f7}
.nav{border-bottom-color:rgba(215,224,231,.16);background:rgba(37,46,55,.92)}
.nav nav a,.lang{color:#aab9c8}.nav nav a:hover,.lang button.active{color:#fff}.lang button{color:#8292a2}
.hero-visual{background:#465564;border-color:rgba(215,224,231,.12)}
.hero-visual:before{background:linear-gradient(90deg,#252e37 0%,rgba(37,46,55,.76) 7%,rgba(70,85,100,.18) 24%,transparent 43%,transparent 80%,rgba(37,46,55,.58) 100%),linear-gradient(0deg,rgba(37,46,55,.48),transparent 25%)}
.eyebrow,.section-num,.section-head span,.feature-copy>span,.contact>p{color:#aab9c8}.sub,.about p,.feature p{color:#c3cdd5}
.primary{background:var(--ti-ice);color:var(--ti-deep);border-color:var(--ti-ice)}.secondary{border-color:#788aa0}
.section,footer{border-color:rgba(215,224,231,.15)}figcaption,footer{color:#9cabb8}
.catalog-backdrop{background:rgba(24,31,38,.86)}.catalog-dialog{background:#2d3944;border-color:#65798b}.catalog-kicker,.catalog-desc{color:#b7c4ce}.catalog-list{border-color:#607487;color:#e0e6eb}.catalog-main{background:#d7e0e7;color:#252e37;border-color:#d7e0e7}.catalog-secondary{border-color:#788aa0}
@media(max-width:800px){.hero-visual:before{background:linear-gradient(0deg,rgba(37,46,55,.62),transparent 28%),linear-gradient(90deg,rgba(37,46,55,.36),transparent 30%,transparent 78%,rgba(37,46,55,.3))}}
/* V4.7 TITANIUM LUXURY — keep titanium palette, elevate feel */
:root{
--lux-text:#F4F2EC;
--lux-muted:#B8C2CC;
--lux-line:rgba(226,234,240,.20);
--lux-glow:rgba(214,225,235,.18);
}
/* richer metallic depth, same core titanium hue */
body{
background:
radial-gradient(circle at 78% 10%, rgba(211,224,236,.10), transparent 26%),
radial-gradient(circle at 18% 72%, rgba(124,147,171,.08), transparent 30%),
linear-gradient(145deg,#788AA0 0%,#596C80 35%,#3E4E5E 72%,#252E37 100%) !important;
color:var(--lux-text)!important;
}
/* more editorial header */
.nav{
border-bottom:1px solid var(--lux-line)!important;
box-shadow:0 8px 30px rgba(0,0,0,.08);
}
.nav nav a{
letter-spacing:.10em!important;
transition:opacity .25s ease,transform .25s ease;
}
.nav nav a:hover{
transform:translateY(-1px);
}
/* hero polish */
.hero{
position:relative;
isolation:isolate;
}
.hero:after{
content:"";
position:absolute;
inset:auto 4vw 2.2vw 4vw;
height:1px;
background:linear-gradient(90deg,transparent,var(--lux-line),transparent);
pointer-events:none;
}
.hero h1{
text-shadow:0 12px 40px rgba(18,27,35,.16);
}
.hero-visual{
box-shadow:0 26px 70px rgba(17,25,33,.28);
}
.hero-visual img{
transition:transform 1.2s cubic-bezier(.22,1,.36,1),filter .7s ease!important;
filter:saturate(.86) contrast(1.035);
}
.hero-visual:hover img{
transform:scale(1.012)!important;
filter:saturate(.95) contrast(1.05);
}
/* buttons more luxury, less dashboard */
.primary,.secondary,.mfg-final>a,.catalog-choice-actions a{
border-radius:0!important;
letter-spacing:.085em!important;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease!important;
}
.primary:hover,.mfg-final>a:hover,.catalog-choice-actions a:first-child:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(14,22,29,.18);
}
.secondary:hover{
transform:translateY(-2px);
}
/* section rhythm */
.section,.manufacturing-v44,.contact{
position:relative;
}
.section:before,.manufacturing-v44:after{
content:"";
position:absolute;
left:4vw;right:4vw;top:0;
height:1px;
background:linear-gradient(90deg,transparent,var(--lux-line),transparent);
}
/* headings: sharper fashion feel */
.section h2,.mfg-head h2,.mfg-final h2,.contact h2{
text-wrap:balance;
text-shadow:0 10px 35px rgba(23,31,38,.10);
}
/* cards */
.card,.catalog-cover-card,.catalog-choice{
box-shadow:0 18px 44px rgba(19,27,34,.14);
}
.catalog-cover-card:hover,.catalog-choice:hover{
box-shadow:0 24px 60px rgba(17,25,32,.20);
}
/* catalog popup */
.catalog-backdrop{
backdrop-filter:blur(18px)!important;
}
.catalog-dialog{
box-shadow:0 50px 130px rgba(10,16,21,.46)!important;
}
.catalog-close{
transition:transform .25s ease,opacity .25s ease;
}
.catalog-close:hover{
transform:rotate(90deg);
}
/* manufacturing rows */
.mfg-step{
position:relative;
overflow:hidden;
}
.mfg-step:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(255,255,255,.04),transparent 42%);
opacity:0;
transition:opacity .3s ease;
}
.mfg-step:hover:after{opacity:1}
.mfg-step h3{position:relative;z-index:1}
.mfg-step p,.mfg-step span{position:relative;z-index:1}
/* contact links */
.contact-row a{
position:relative;
padding-bottom:9px;
}
.contact-row a:after{
content:"";
position:absolute;
left:0;bottom:0;width:100%;height:1px;
background:currentColor;
transform:scaleX(.15);
transform-origin:left;
transition:transform .28s ease;
}
.contact-row a:hover:after{
transform:scaleX(1);
}
/* subtle reveal feels more premium */
.reveal{
transition-duration:1s!important;
transition-timing-function:cubic-bezier(.22,1,.36,1)!important;
}
/* mobile cleanup */
@media(max-width:800px){
.hero{
padding-top:30px!important;
}
.hero h1{
letter-spacing:-4px!important;
}
.hero-actions{
margin-top:22px!important;
}
.editorial-socials{
padding-top:8px!important;
}
.catalog-dialog{
box-shadow:none!important;
}
.mfg-step:hover{padding-left:0!important}
}
/* V4.8 MOQ highlight */
.moq-highlight{
margin-top:90px;
padding:42px 0;
border-top:1px solid rgba(226,234,240,.22);
border-bottom:1px solid rgba(226,234,240,.22);
display:grid;
grid-template-columns:minmax(220px,.7fr) 1.3fr;
gap:6vw;
align-items:center;
}
.moq-number{
font-size:clamp(120px,18vw,260px);
line-height:.72;
font-weight:900;
letter-spacing:-.08em;
color:rgba(244,242,236,.10);
text-shadow:0 0 1px rgba(244,242,236,.35);
}
.moq-copy h3{
margin:8px 0 20px;
font-size:clamp(44px,6vw,88px);
line-height:.86;
letter-spacing:-.055em;
}
.moq-copy>p:last-child{
max-width:620px;
margin:0;
color:#b8c2cc;
line-height:1.65;
font-size:12px;
}
@media(max-width:800px){
.moq-highlight{
margin-top:65px;
grid-template-columns:1fr;
gap:25px;
padding:34px 0;
}
.moq-number{
font-size:clamp(110px,34vw,180px);
}
.moq-copy h3{
font-size:clamp(42px,13vw,68px);
}
}
/* V4.9 FAIR QR WELCOME MODE */
.fair-welcome{position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.fair-welcome.open{opacity:1;visibility:visible}
.fair-welcome-backdrop{position:absolute;inset:0;background:rgba(20,28,35,.82);backdrop-filter:blur(18px)}
.fair-welcome-panel{position:relative;z-index:2;width:min(900px,94vw);padding:clamp(30px,5vw,68px);background:radial-gradient(circle at 78% 10%,rgba(223,231,239,.13),transparent 28%),linear-gradient(145deg,#788AA0 0%,#5A6D80 38%,#3E4E5E 72%,#252E37 100%);border:1px solid rgba(235,240,244,.22);box-shadow:0 50px 140px rgba(12,18,24,.5);overflow:hidden}
.fair-welcome-panel:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 4px)}
.fair-welcome-panel>*{position:relative;z-index:1}
.fair-close{position:absolute;top:14px;right:18px;border:0;background:none;color:#F4F2EC;font-size:36px;cursor:pointer;z-index:3}
.fair-brandline{display:flex;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid rgba(235,240,244,.18);font-size:9px;font-weight:800;letter-spacing:.14em;color:#D8E0E7}
.fair-kicker{margin:34px 0 16px;font-size:10px;letter-spacing:.18em;color:#C5D0D9}
.fair-welcome h2{margin:0;font-size:clamp(64px,9vw,128px);line-height:.80;letter-spacing:-.065em;color:#F4F2EC}
.fair-copy{max-width:650px;margin:28px 0 32px;color:#D0D8DF;line-height:1.65;font-size:13px}
.fair-actions{display:flex;gap:10px;flex-wrap:wrap}
.fair-primary,.fair-secondary{min-height:54px;padding:0 20px;border:1px solid rgba(244,242,236,.38);font:inherit;font-size:10px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.fair-primary{background:#F4F2EC;color:#202A33;border-color:#F4F2EC}
.fair-secondary{background:rgba(37,46,55,.28);color:#F4F2EC}
.fair-quicklinks{display:flex;justify-content:space-between;gap:20px;margin-top:28px;padding-top:20px;border-top:1px solid rgba(235,240,244,.18);font-size:9px;letter-spacing:.08em;color:#BFCAD4}
.fair-quicklinks a{color:#F4F2EC;font-weight:900}
body.fair-open{overflow:hidden}
@media(max-width:700px){
.fair-welcome{padding:0}
.fair-welcome-panel{width:100vw;min-height:100svh;border:0;padding:60px 20px 28px;display:flex;flex-direction:column;justify-content:center}
.fair-welcome h2{font-size:clamp(58px,19vw,88px)}
.fair-actions{flex-direction:column}
.fair-primary,.fair-secondary{width:100%}
.fair-quicklinks{flex-direction:column;align-items:flex-start}
}
/* V5.0 — MOBILE HERO CENTER FIX */
@media (max-width: 800px) {
.hero {
text-align: center !important;
}
.hero-copy {
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.hero-copy .eyebrow,
.hero-copy .sub {
width: 100% !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
align-self: center !important;
}
.hero h1,
.hero-copy h1 {
display: block !important;
width: 100% !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center !important;
align-self: center !important;
transform: none !important;
}
.hero h1 span,
.hero-copy h1 span {
display: block !important;
width: 100% !important;
text-align: center !important;
}
.hero-actions,
.actions {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.editorial-socials,
.hero-socials {
width: 100% !important;
justify-content: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* COAL CITY — STABLE WEB + MOBILE BUILD */
/* prevent unexpected horizontal overflow */
html,body{max-width:100%;overflow-x:hidden}
/* robust media sizing */
img,video,svg{max-width:100%}
/* desktop safety */
@media (min-width:801px){
.hero-copy{min-width:0}
.hero-visual{min-width:0}
}
/* mobile hero: confirmed center alignment */
@media (max-width:800px){
.hero{
width:100%!important;
grid-template-columns:1fr!important;
text-align:center!important;
}
.hero-copy{
width:100%!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
padding-left:0!important;
padding-right:0!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
.hero-copy .eyebrow,
.hero-copy .sub,
.hero h1,
.hero-copy h1,
.hero h1 span,
.hero-copy h1 span{
width:100%!important;
max-width:none!important;
text-align:center!important;
margin-left:auto!important;
margin-right:auto!important;
align-self:center!important;
}
.hero h1,.hero-copy h1{
padding-left:0!important;
padding-right:0!important;
transform:none!important;
}
.hero-actions,.actions{
width:100%!important;
margin-left:auto!important;
margin-right:auto!important;
}
.editorial-socials,.hero-socials{
width:100%!important;
justify-content:center!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* keep large UI blocks inside viewport */
.catalog-dialog,
.fair-welcome-panel{
max-width:100vw!important;
}
}
/* reduce accidental motion problems on devices/users requesting it */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
scroll-behavior:auto!important;
}
}
/* STABLE V2 — MOBILE CATALOG OVERFLOW + BACK FIX */
*{box-sizing:border-box}
@media(max-width:800px){
body.catalog-open{
overflow:hidden!important;
position:relative;
}
.catalog-modal{
position:fixed!important;
inset:0!important;
width:100vw!important;
height:100dvh!important;
max-width:100vw!important;
padding:0!important;
margin:0!important;
overflow:hidden!important;
align-items:stretch!important;
justify-content:stretch!important;
}
.catalog-backdrop{
position:fixed!important;
inset:0!important;
}
.catalog-dialog,
.catalog-v41{
position:relative!important;
width:100vw!important;
max-width:100vw!important;
min-width:0!important;
height:100dvh!important;
min-height:100dvh!important;
max-height:100dvh!important;
margin:0!important;
padding:72px 18px 32px!important;
border:0!important;
overflow-x:hidden!important;
overflow-y:auto!important;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.catalog-dialog > *,
.catalog-v41 > *{
max-width:100%!important;
min-width:0!important;
}
.catalog-v41 h3,
.catalog-dialog h3{
width:100%!important;
max-width:100%!important;
margin:0!important;
font-size:clamp(48px,14vw,72px)!important;
line-height:.88!important;
letter-spacing:-.055em!important;
overflow-wrap:anywhere!important;
word-break:normal!important;
}
.catalog-desc{
width:100%!important;
max-width:100%!important;
font-size:12px!important;
line-height:1.55!important;
margin:18px 0 24px!important;
}
.catalog-choice-grid{
width:100%!important;
max-width:100%!important;
min-width:0!important;
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
gap:16px!important;
}
.catalog-choice,
.catalog-cover-card{
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0!important;
overflow:hidden!important;
}
.catalog-cover-image{
width:100%!important;
height:auto!important;
min-height:0!important;
aspect-ratio:4/5!important;
overflow:hidden!important;
}
.catalog-cover-image img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center 20%!important;
}
.catalog-cover-content{
width:100%!important;
max-width:100%!important;
min-width:0!important;
padding:20px!important;
}
.catalog-cover-content h4,
.catalog-choice h4{
font-size:clamp(32px,10vw,48px)!important;
line-height:.9!important;
overflow-wrap:anywhere!important;
}
.catalog-choice-actions{
width:100%!important;
display:grid!important;
grid-template-columns:1fr!important;
gap:9px!important;
}
.catalog-choice-actions a{
width:100%!important;
max-width:100%!important;
text-align:center!important;
white-space:normal!important;
}
.catalog-bottom{
width:100%!important;
max-width:100%!important;
flex-direction:column!important;
align-items:flex-start!important;
padding-bottom:30px!important;
}
.catalog-close{
position:fixed!important;
top:calc(env(safe-area-inset-top) + 14px)!important;
right:16px!important;
z-index:20020!important;
width:42px!important;
height:42px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border:1px solid rgba(255,255,255,.28)!important;
background:rgba(14,18,22,.78)!important;
backdrop-filter:blur(10px);
color:#fff!important;
font-size:26px!important;
line-height:1!important;
}
.catalog-back{
position:fixed!important;
top:calc(env(safe-area-inset-top) + 14px)!important;
left:16px!important;
z-index:20020!important;
min-height:42px!important;
padding:0 14px!important;
display:flex!important;
align-items:center!important;
gap:8px!important;
border:1px solid rgba(255,255,255,.28)!important;
background:rgba(14,18,22,.78)!important;
backdrop-filter:blur(10px);
color:#fff!important;
font:inherit!important;
font-size:10px!important;
font-weight:900!important;
letter-spacing:.08em!important;
cursor:pointer!important;
}
}
@media(min-width:801px){
.catalog-back{display:none!important}
}
/* STABLE V3 — refined catalog controls */
@media(max-width:800px){
.catalog-back,.catalog-close{
top:calc(env(safe-area-inset-top) + 18px)!important;
width:38px!important;
height:38px!important;
min-height:38px!important;
padding:0!important;
border:0!important;
border-radius:50%!important;
background:rgba(19,24,29,.62)!important;
box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 8px 24px rgba(0,0,0,.14)!important;
backdrop-filter:blur(14px)!important;
-webkit-backdrop-filter:blur(14px)!important;
}
.catalog-back{left:18px!important}
.catalog-close{right:18px!important}
.catalog-back svg,.catalog-close svg{
width:18px!important;
height:18px!important;
fill:none!important;
stroke:#f4f2ec!important;
stroke-width:1.7!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
.catalog-back span{display:none!important}
}
/* V5.2 ABOUT US RESTORED */
.about-v52{
padding:110px 4vw 100px;
border-top:1px solid rgba(235,240,244,.20);
background:
radial-gradient(circle at 82% 12%,rgba(224,232,240,.08),transparent 28%),
linear-gradient(150deg,#667b90 0%,#53677b 38%,#3b4b5a 74%,#29343e 100%);
color:#f4f2ec;
}
.section-label{
margin:0 0 20px;
font-size:10px;
letter-spacing:.16em;
color:#c4d0d9;
}
.about-v52-header h2{
margin:0;
font-size:clamp(70px,9vw,145px);
line-height:.80;
letter-spacing:-.065em;
}
.about-v52-grid{
margin-top:76px;
display:grid;
grid-template-columns:1fr 1fr;
gap:7vw;
padding-top:34px;
border-top:1px solid rgba(235,240,244,.20);
}
.about-v52-grid article>span{
display:block;
margin-bottom:20px;
font-size:9px;
letter-spacing:.13em;
color:#b9c5cf;
}
.about-v52-grid h3{
margin:0 0 22px;
font-size:clamp(36px,4.5vw,66px);
line-height:.88;
letter-spacing:-.05em;
}
.about-v52-grid p,.about-v52-brand>p{
margin:0;
color:#c7d1d9;
line-height:1.75;
font-size:12px;
}
.about-v52-values{
margin-top:66px;
display:grid;
grid-template-columns:repeat(4,1fr);
border-top:1px solid rgba(235,240,244,.20);
border-bottom:1px solid rgba(235,240,244,.20);
}
.about-v52-values span{
padding:22px 10px;
text-align:center;
font-size:10px;
font-weight:900;
letter-spacing:.11em;
border-right:1px solid rgba(235,240,244,.16);
}
.about-v52-values span:last-child{border-right:0}
.about-v52-brand{
margin-top:86px;
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:7vw;
align-items:end;
}
.about-v52-brand h3{
margin:0;
font-size:clamp(72px,10vw,155px);
line-height:.72;
letter-spacing:-.075em;
}
@media(max-width:800px){
.about-v52{padding:78px 5.5vw 72px}
.about-v52-header h2{font-size:clamp(58px,17vw,88px)}
.about-v52-grid{grid-template-columns:1fr;gap:52px;margin-top:56px}
.about-v52-values{grid-template-columns:1fr 1fr}
.about-v52-values span:nth-child(2){border-right:0}
.about-v52-brand{grid-template-columns:1fr;gap:34px;margin-top:64px}
.about-v52-brand h3{text-align:center;font-size:clamp(88px,28vw,145px)}
.about-v52-brand .section-label{text-align:center}
}
/* MAIN V6 — MOBILE CAMPAIGN / "BUILT FOR THE STREET" FIX */
@media (max-width:800px){
.campaign{
height:auto!important;
min-height:760px!important;
max-height:none!important;
position:relative!important;
overflow:hidden!important;
background:#11171b!important;
}
.campaign>img{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:58% center!important;
}
.campaign:after{
background:
linear-gradient(180deg,rgba(8,12,15,.10) 0%,rgba(8,12,15,.18) 35%,rgba(8,12,15,.80) 100%),
linear-gradient(90deg,rgba(8,12,15,.42),rgba(8,12,15,.02))!important;
}
.campaign-overlay{
left:6vw!important;
right:6vw!important;
top:auto!important;
bottom:42px!important;
transform:none!important;
width:auto!important;
max-width:none!important;
}
.campaign-overlay>span{
display:block!important;
margin-bottom:16px!important;
font-size:12px!important;
letter-spacing:.08em!important;
}
.campaign-overlay h2{
width:100%!important;
max-width:7ch!important;
margin:0 0 28px!important;
font-size:clamp(58px,16vw,82px)!important;
line-height:.82!important;
letter-spacing:-4px!important;
overflow-wrap:normal!important;
word-break:normal!important;
}
.campaign-overlay .primary,
.campaign-overlay .action-btn{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
max-width:430px!important;
min-height:58px!important;
margin:0!important;
padding:14px 18px!important;
font-size:12px!important;
line-height:1.2!important;
white-space:normal!important;
text-align:center!important;
}
}
@media (max-width:430px){
.campaign{
min-height:720px!important;
}
.campaign-overlay{
bottom:32px!important;
}
.campaign-overlay h2{
font-size:clamp(54px,15.5vw,72px)!important;
letter-spacing:-3px!important;
}
}
/* MAIN V7 — MOBILE PRIVATE LABEL SECTION FIX */
@media (max-width:800px){
/* Keep private-label / final manufacturing CTA inside viewport */
.mfg-final,
.private-label,
.private-label-section,
.manufacturing-final{
width:100%!important;
max-width:100%!important;
overflow:hidden!important;
padding-left:6vw!important;
padding-right:6vw!important;
box-sizing:border-box!important;
}
.mfg-final h2,
.private-label h2,
.private-label-section h2,
.manufacturing-final h2{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
font-size:clamp(54px,15vw,74px)!important;
line-height:.82!important;
letter-spacing:-3px!important;
overflow-wrap:normal!important;
word-break:normal!important;
hyphens:none!important;
}
.mfg-final h2 br,
.private-label h2 br,
.private-label-section h2 br,
.manufacturing-final h2 br{
display:none!important;
}
.mfg-final p,
.private-label p,
.private-label-section p,
.manufacturing-final p{
width:100%!important;
max-width:100%!important;
font-size:14px!important;
line-height:1.55!important;
}
.mfg-final>a,
.mfg-final .primary,
.private-label>a,
.private-label .primary,
.private-label-section>a,
.manufacturing-final>a{
width:100%!important;
max-width:100%!important;
min-height:58px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
white-space:normal!important;
padding:14px 18px!important;
box-sizing:border-box!important;
}
/* Prevent any inherited oversized width / transform */
.mfg-final *,
.private-label *,
.private-label-section *,
.manufacturing-final *{
transform:none!important;
max-width:100%;
box-sizing:border-box;
}
}
@media (max-width:430px){
.mfg-final h2,
.private-label h2,
.private-label-section h2,
.manufacturing-final h2{
font-size:clamp(50px,14vw,66px)!important;
letter-spacing:-2px!important;
}
}
/* MAIN V8 — FINAL MOBILE ALIGNMENT FOR PRIVATE LABEL */
@media (max-width:800px){
.mfg-final{
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
padding-left:0!important;
padding-right:0!important;
overflow:visible!important;
box-sizing:border-box!important;
}
.mfg-final>div,
.mfg-final>a{
width:100%!important;
max-width:100%!important;
box-sizing:border-box!important;
}
.mfg-final h2{
display:block!important;
width:100%!important;
max-width:100%!important;
margin:0!important;
font-size:clamp(46px,12.4vw,62px)!important;
line-height:.86!important;
letter-spacing:-2.2px!important;
white-space:normal!important;
overflow:visible!important;
word-break:normal!important;
overflow-wrap:normal!important;
}
/* Keep the designed break: YOUR BRAND. / OUR PRODUCTION. */
.mfg-final h2 br{
display:block!important;
}
.mfg-final>div>p:last-child{
width:100%!important;
max-width:520px!important;
margin:28px 0 0!important;
font-size:14px!important;
line-height:1.55!important;
}
.mfg-final>a{
margin:0!important;
min-height:58px!important;
padding:14px 20px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
}
@media (max-width:430px){
.mfg-final h2{
font-size:clamp(44px,12vw,56px)!important;
line-height:.87!important;
letter-spacing:-1.8px!important;
}
}
/* MAIN V9 — QR WELCOME MODE */
.qr-welcome{
position:fixed;
inset:0;
z-index:30000;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
opacity:0;
visibility:hidden;
transition:opacity .32s ease,visibility .32s ease;
}
.qr-welcome.open{opacity:1;visibility:visible}
.qr-welcome-bg{
position:absolute;
inset:0;
background:rgba(9,13,16,.84);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
}
.qr-welcome-panel{
position:relative;
z-index:1;
width:min(880px,94vw);
padding:clamp(32px,5vw,64px);
background:
radial-gradient(circle at 78% 10%,rgba(235,240,244,.08),transparent 28%),
linear-gradient(145deg,#697c8f 0%,#536779 36%,#3b4b59 72%,#232d35 100%);
color:#f4f2ec;
border:1px solid rgba(255,255,255,.16);
box-shadow:0 45px 130px rgba(0,0,0,.42);
overflow:hidden;
}
.qr-welcome-panel:after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.10;
background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 4px);
}
.qr-welcome-panel>*{position:relative;z-index:1}
.qr-welcome-close{
position:absolute;
top:16px;
right:16px;
width:38px;
height:38px;
border:0;
border-radius:50%;
background:rgba(17,22,27,.52);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.qr-welcome-close svg{
width:18px;height:18px;fill:none;stroke:#f4f2ec;stroke-width:1.7;stroke-linecap:round
}
.qr-welcome-top{
display:flex;
justify-content:space-between;
gap:18px;
padding-bottom:18px;
border-bottom:1px solid rgba(255,255,255,.18);
font-size:9px;
font-weight:800;
letter-spacing:.14em;
}
.qr-welcome-kicker{
margin:32px 0 14px;
font-size:10px;
letter-spacing:.17em;
color:#d1dae1;
}
.qr-welcome h2{
margin:0;
font-size:clamp(64px,8.8vw,122px);
line-height:.80;
letter-spacing:-.06em;
}
.qr-welcome-copy{
max-width:620px;
margin:28px 0 30px;
color:#d0d8df;
font-size:13px;
line-height:1.65;
}
.qr-welcome-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.qr-welcome-actions>*{
min-height:56px;
display:flex;
align-items:center;
justify-content:center;
padding:14px 18px;
border-radius:0;
font:inherit;
font-size:10px;
font-weight:900;
letter-spacing:.08em;
text-align:center;
text-decoration:none;
cursor:pointer;
}
.qr-main{
background:#f4f2ec;
color:#202a33;
border:1px solid #f4f2ec;
}
.qr-secondary{
background:rgba(25,32,39,.28);
color:#f4f2ec;
border:1px solid rgba(255,255,255,.30);
}
.qr-link{
grid-column:1/-1;
min-height:42px!important;
background:transparent;
color:#d7e0e7;
border:0;
}
.qr-welcome-bottom{
margin-top:26px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.18);
display:flex;
justify-content:space-between;
gap:18px;
color:#bdc8d0;
font-size:8px;
letter-spacing:.09em;
}
body.qr-welcome-open{overflow:hidden}
@media(max-width:700px){
.qr-welcome{padding:0}
.qr-welcome-panel{
width:100vw;
min-height:100dvh;
padding:calc(env(safe-area-inset-top) + 64px) 22px calc(env(safe-area-inset-bottom) + 28px);
border:0;
display:flex;
flex-direction:column;
justify-content:center;
}
.qr-welcome h2{
font-size:clamp(58px,18vw,84px);
}
.qr-welcome-copy{margin-top:24px}
.qr-welcome-actions{
grid-template-columns:1fr;
}
.qr-link{grid-column:auto}
.qr-welcome-bottom{
flex-direction:column;
align-items:flex-start;
}
}
/* MAIN V11 — QR TR / EN SWITCH */
.qr-lang-switch{
display:flex;
align-items:center;
gap:8px;
white-space:nowrap;
}
.qr-lang-btn{
appearance:none;
-webkit-appearance:none;
border:0;
padding:0;
margin:0;
background:transparent;
color:#aeb9c2;
font:inherit;
font-size:9px;
font-weight:900;
letter-spacing:.12em;
cursor:pointer;
}
.qr-lang-btn.active{color:#fff}
.qr-lang-switch>span{color:#87949e;font-size:9px}
/* MAIN V13 — AESTHETIC QR WELCOME ANIMATION */
/* Softer entrance for the entire welcome layer */
.qr-welcome{
opacity:0;
visibility:hidden;
transition:
opacity .55s cubic-bezier(.22,1,.36,1),
visibility .55s ease;
}
.qr-welcome.open{
opacity:1;
visibility:visible;
}
.qr-welcome-bg{
opacity:0;
transform:scale(1.025);
transition:
opacity .75s cubic-bezier(.22,1,.36,1),
transform 1.15s cubic-bezier(.22,1,.36,1);
}
.qr-welcome.open .qr-welcome-bg{
opacity:1;
transform:scale(1);
}
/* Panel starts lower, slightly scaled and blurred */
.qr-welcome-panel{
opacity:0;
transform:translateY(24px) scale(.985);
filter:blur(10px);
transition:
opacity .72s cubic-bezier(.22,1,.36,1),
transform .95s cubic-bezier(.22,1,.36,1),
filter .82s cubic-bezier(.22,1,.36,1);
will-change:transform,opacity,filter;
}
.qr-welcome.open .qr-welcome-panel{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}
/* Slow metallic light sweep */
.qr-welcome-panel:before{
content:"";
position:absolute;
top:-20%;
bottom:-20%;
left:-55%;
width:38%;
z-index:0;
pointer-events:none;
opacity:0;
transform:skewX(-18deg);
background:
linear-gradient(
90deg,
transparent,
rgba(244,248,251,.03) 25%,
rgba(244,248,251,.13) 50%,
rgba(244,248,251,.03) 75%,
transparent
);
}
.qr-welcome.open .qr-welcome-panel:before{
animation:qrTitaniumSweep 2.4s .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes qrTitaniumSweep{
0%{left:-55%;opacity:0}
18%{opacity:1}
70%{opacity:.7}
100%{left:125%;opacity:0}
}
/* Staggered content reveal */
.qr-welcome-top,
.qr-welcome-kicker,
.qr-welcome h2,
.qr-welcome-copy,
.qr-welcome-actions,
.qr-welcome-bottom{
opacity:0;
transform:translateY(18px);
transition:
opacity .7s cubic-bezier(.22,1,.36,1),
transform .8s cubic-bezier(.22,1,.36,1);
}
.qr-welcome.open .qr-welcome-top{
opacity:1;
transform:none;
transition-delay:.18s;
}
.qr-welcome.open .qr-welcome-kicker{
opacity:1;
transform:none;
transition-delay:.28s;
}
.qr-welcome.open h2{
opacity:1;
transform:none;
transition-delay:.38s;
}
.qr-welcome.open .qr-welcome-copy{
opacity:1;
transform:none;
transition-delay:.50s;
}
.qr-welcome.open .qr-welcome-actions{
opacity:1;
transform:none;
transition-delay:.62s;
}
.qr-welcome.open .qr-welcome-bottom{
opacity:1;
transform:none;
transition-delay:.74s;
}
/* Heading feels less abrupt */
.qr-welcome h2{
text-shadow:0 16px 50px rgba(8,13,17,.20);
}
/* Premium CTA motion */
.qr-main,
.qr-secondary,
.qr-link{
transition:
transform .28s cubic-bezier(.22,1,.36,1),
box-shadow .28s ease,
border-color .28s ease,
background .28s ease,
color .28s ease;
}
.qr-main:hover,
.qr-secondary:hover{
transform:translateY(-2px);
}
.qr-main:hover{
box-shadow:0 14px 32px rgba(10,16,21,.18);
}
.qr-secondary:hover{
border-color:rgba(255,255,255,.52);
background:rgba(28,36,43,.42);
}
.qr-link:hover{
color:#fff;
}
/* Close icon also enters quietly */
.qr-welcome-close{
opacity:0;
transform:rotate(-10deg) scale(.88);
transition:
opacity .55s .28s ease,
transform .65s .28s cubic-bezier(.22,1,.36,1),
background .2s ease;
}
.qr-welcome.open .qr-welcome-close{
opacity:1;
transform:rotate(0) scale(1);
}
.qr-welcome-close:hover{
background:rgba(17,22,27,.72);
}
/* Mobile: keep animation elegant, not excessive */
@media(max-width:700px){
.qr-welcome-panel{
transform:translateY(30px) scale(.99);
filter:blur(8px);
}
.qr-welcome h2{
letter-spacing:-.055em;
}
.qr-welcome-top,
.qr-welcome-kicker,
.qr-welcome h2,
.qr-welcome-copy,
.qr-welcome-actions,
.qr-welcome-bottom{
transform:translateY(14px);
}
}
/* Accessibility / performance */
@media(prefers-reduced-motion:reduce){
.qr-welcome,
.qr-welcome-bg,
.qr-welcome-panel,
.qr-welcome-top,
.qr-welcome-kicker,
.qr-welcome h2,
.qr-welcome-copy,
.qr-welcome-actions,
.qr-welcome-bottom,
.qr-welcome-close{
transition:none!important;
animation:none!important;
transform:none!important;
filter:none!important;
}
}
/* MAIN V14 — CATEGORY PDF CATALOG */
.catalog-category-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:28px;
}
.catalog-category-card{
position:relative;
min-height:190px;
padding:24px;
display:flex;
flex-direction:column;
justify-content:space-between;
overflow:hidden;
text-decoration:none;
color:#f4f2ec;
border:1px solid rgba(255,255,255,.18);
background:
radial-gradient(circle at 82% 15%,rgba(255,255,255,.08),transparent 32%),
linear-gradient(145deg,rgba(106,126,144,.68),rgba(38,49,58,.92));
transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .28s ease,background .28s ease;
}
.catalog-category-card:hover{
transform:translateY(-3px);
border-color:rgba(255,255,255,.42);
}
.catalog-category-card:nth-child(5){grid-column:1/-1}
.cat-no{font-size:9px;letter-spacing:.14em;color:#c4ced6}
.cat-name{
font-size:clamp(38px,4.8vw,68px);
font-weight:900;
line-height:.82;
letter-spacing:-.055em;
}
.cat-action{
font-size:9px;
font-weight:900;
letter-spacing:.1em;
color:#d4dde4;
}
@media(max-width:800px){
.catalog-category-grid{
grid-template-columns:1fr!important;
width:100%!important;
gap:10px!important;
}
.catalog-category-card,
.catalog-category-card:nth-child(5){
grid-column:auto!important;
width:100%!important;
min-height:145px!important;
padding:20px!important;
}
.cat-name{font-size:clamp(42px,13vw,62px)!important}
}
/* MAIN V15 — category PDF state */
.catalog-category-disabled{
opacity:.45;
cursor:not-allowed;
filter:saturate(.45);
}
.catalog-category-disabled:hover{
transform:none!important;
border-color:rgba(255,255,255,.18)!important;
}
/* MAIN V16 — GENDER FIRST CATALOG */
.catalog-gender-stage{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-top:28px;
}
.catalog-gender-card{
min-height:300px;
padding:28px;
display:flex;
flex-direction:column;
justify-content:space-between;
text-align:left;
color:#f4f2ec;
border:1px solid rgba(255,255,255,.18);
background:
radial-gradient(circle at 82% 14%,rgba(255,255,255,.08),transparent 33%),
linear-gradient(145deg,rgba(105,124,142,.78),rgba(36,47,56,.96));
cursor:pointer;
transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .28s ease;
}
.catalog-gender-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.42)}
.catalog-gender-card .cat-name{font-size:clamp(54px,7vw,96px)}
.catalog-category-stage[hidden]{display:none!important}
.catalog-stage-back{
margin:16px 0 20px;
padding:0;
border:0;
background:transparent;
color:#d4dde4;
font:inherit;
font-size:10px;
font-weight:900;
letter-spacing:.09em;
cursor:pointer;
}
.catalog-category-stage .catalog-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.catalog-category-stage .catalog-category-card:nth-child(5){grid-column:auto}
@media(max-width:800px){
.catalog-gender-stage{grid-template-columns:1fr!important}
.catalog-gender-card{min-height:180px!important;padding:22px!important}
.catalog-gender-card .cat-name{font-size:clamp(54px,17vw,82px)!important}
.catalog-category-stage .catalog-category-grid{grid-template-columns:1fr!important}
}
/* MAIN V17 - B2B RFQ PRODUCT SELECTOR */
.cat-dual-actions{display:flex;gap:10px;flex-wrap:wrap}
.cat-dual-actions a,.cat-dual-actions button{
border:1px solid rgba(255,255,255,.24);background:transparent;color:#f4f2ec;
padding:11px 13px;text-decoration:none;font:inherit;font-size:9px;font-weight:900;
letter-spacing:.08em;cursor:pointer
}
.rfq-modal{position:fixed;inset:0;z-index:35000;display:none}
.rfq-modal.open{display:block}
.rfq-backdrop{position:absolute;inset:0;background:rgba(7,10,13,.86);backdrop-filter:blur(10px)}
.rfq-panel{
position:absolute;inset:3vh 3vw;width:auto;height:94vh;overflow:auto;
background:#11171b;color:#f4f2ec;border:1px solid rgba(255,255,255,.18);
padding:32px
}
.rfq-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.rfq-eyebrow{font-size:9px;letter-spacing:.14em;color:#aebbc5}
.rfq-head h3{font-size:clamp(48px,6vw,92px);line-height:.82;letter-spacing:-.055em;margin:14px 0 0}
.rfq-close{width:42px;height:42px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-size:25px}
.rfq-intro{max-width:680px;color:#adb7bf;line-height:1.6;margin:24px 0 30px}
.rfq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rfq-product{background:#192127;border:1px solid rgba(255,255,255,.12);overflow:hidden}
.rfq-product img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#eee}
.rfq-product-info{padding:18px}
.rfq-code{font-size:10px;font-weight:900;letter-spacing:.09em;color:#bcc8d0}
.rfq-product h4{font-size:15px;line-height:1.25;min-height:38px;margin:9px 0 16px}
.rfq-fields{display:grid;grid-template-columns:1fr 100px;gap:8px}
.rfq-fields label{font-size:9px;color:#aeb8bf}
.rfq-fields input,.quote-company-fields input{
width:100%;box-sizing:border-box;margin-top:6px;padding:11px;border:1px solid rgba(255,255,255,.18);
background:#11171b;color:#fff;border-radius:0
}
.rfq-add,.quote-whatsapp{
width:100%;margin-top:12px;padding:14px;border:0;background:#f4f2ec;color:#171d22;
font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer
}
.rfq-add.added{background:#627587;color:#fff}
.quote-fab{
position:fixed;right:18px;bottom:18px;z-index:34000;display:none;align-items:center;gap:10px;
border:1px solid rgba(255,255,255,.2);background:#f4f2ec;color:#171d22;
padding:13px 16px;font-size:9px;font-weight:900;letter-spacing:.07em;box-shadow:0 14px 40px rgba(0,0,0,.24)
}
.quote-fab.show{display:flex}.quote-fab b{background:#171d22;color:#fff;padding:5px 8px;border-radius:30px}
.quote-drawer{
position:fixed;top:0;right:0;bottom:0;width:min(430px,100vw);z-index:40000;
background:#11171b;color:#fff;padding:24px;box-sizing:border-box;
transform:translateX(105%);transition:transform .38s cubic-bezier(.22,1,.36,1);
border-left:1px solid rgba(255,255,255,.15);overflow:auto
}
.quote-drawer.open{transform:translateX(0)}
.quote-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:18px}
.quote-head>div{display:flex;gap:10px;align-items:center;font-size:11px;font-weight:900;letter-spacing:.08em}
.quote-head strong{background:#f4f2ec;color:#171d22;border-radius:30px;padding:5px 9px}
.quote-head button{border:0;background:transparent;color:#fff;font-size:25px}
.quote-items{display:grid;gap:10px;margin:20px 0}
.quote-item{border:1px solid rgba(255,255,255,.13);padding:13px}
.quote-item strong{display:block;font-size:12px}.quote-item small{display:block;color:#aeb8bf;margin-top:5px}
.quote-item button{margin-top:9px;border:0;background:transparent;color:#d5dde2;padding:0;font-size:9px;text-decoration:underline}
.quote-company-fields{display:grid;gap:8px}
@media(max-width:900px){.rfq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){
.rfq-panel{inset:0;height:100dvh;padding:calc(env(safe-area-inset-top) + 24px) 16px 80px}
.rfq-grid{grid-template-columns:1fr}
.rfq-fields{grid-template-columns:1fr 100px}
.quote-fab{right:12px;bottom:12px}
}
/* =========================================================
V23 — REAL DESKTOP FIX
Built against the actual V21 HTML classes.
Mobile V21 remains untouched.
========================================================= */
@media (min-width: 801px){
html,body{
overflow-x:hidden!important;
}
/* CRITICAL: .about base rule was forcing about-v52 itself into 3 columns */
.about.about-v52{
display:block!important;
grid-template-columns:none!important;
gap:0!important;
width:100%!important;
max-width:none!important;
}
.about-v52-header,
.about-v52-grid,
.about-v52-values,
.about-v52-brand{
width:min(1440px,92vw)!important;
margin-left:auto!important;
margin-right:auto!important;
}
.about-v52-header h2{
max-width:1100px!important;
font-size:clamp(76px,7.4vw,122px)!important;
line-height:.82!important;
}
.about-v52-grid{
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:clamp(48px,6vw,100px)!important;
}
.about-v52-grid article{
min-width:0!important;
width:100%!important;
}
.about-v52-grid p{
width:100%!important;
max-width:640px!important;
font-size:14px!important;
line-height:1.75!important;
white-space:normal!important;
word-break:normal!important;
overflow-wrap:normal!important;
}
.about-v52-brand{
grid-template-columns:minmax(360px,.8fr) minmax(0,1.2fr)!important;
gap:clamp(56px,7vw,120px)!important;
align-items:end!important;
}
.about-v52-brand>p{
width:100%!important;
max-width:700px!important;
font-size:14px!important;
line-height:1.75!important;
white-space:normal!important;
word-break:normal!important;
}
.about-v52-brand h3{
font-size:clamp(88px,8vw,132px)!important;
}
/* COLLECTIONS — actual HTML is #collections.section > .section-head + .grid */
#collections.section{
width:100%!important;
padding:110px max(4vw,56px)!important;
overflow:hidden!important;
}
#collections .section-head{
width:min(1440px,100%)!important;
margin:0 auto 56px!important;
display:grid!important;
grid-template-columns:1fr minmax(520px,760px)!important;
align-items:end!important;
gap:48px!important;
}
#collections .section-head span{
align-self:end!important;
padding-bottom:8px!important;
}
#collections .section-head h2{
margin:0!important;
width:100%!important;
max-width:760px!important;
font-size:clamp(72px,6.5vw,108px)!important;
line-height:.84!important;
letter-spacing:-.055em!important;
overflow:visible!important;
}
#collections .grid{
width:min(1440px,100%)!important;
margin:0 auto!important;
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:18px!important;
}
#collections .card{
min-width:0!important;
}
#collections .card img{
width:100%!important;
height:clamp(460px,55vw,720px)!important;
max-height:720px!important;
object-fit:cover!important;
}
/* BUILT FOR THE STREET */
#catalog.campaign{
height:min(82vh,820px)!important;
min-height:620px!important;
max-height:820px!important;
}
#catalog.campaign>img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center 48%!important;
}
#catalog .campaign-overlay{
left:max(4vw,64px)!important;
top:50%!important;
transform:translateY(-50%)!important;
width:min(760px,58vw)!important;
}
#catalog .campaign-overlay h2{
font-size:clamp(76px,6.8vw,112px)!important;
line-height:.82!important;
letter-spacing:-.055em!important;
margin:24px 0 38px!important;
max-width:7ch!important;
}
/* MANUFACTURING: stop huge horizontal growth */
.manufacturing-v44{
overflow:hidden!important;
}
.manufacturing-v44>.mfg-head,
.manufacturing-v44>.mfg-process,
.manufacturing-v44>.moq-highlight,
.manufacturing-v44>.mfg-final{
width:min(1440px,92vw)!important;
margin-left:auto!important;
margin-right:auto!important;
}
.mfg-final{
grid-template-columns:minmax(0,1fr) auto!important;
gap:60px!important;
align-items:end!important;
}
.mfg-final h2{
font-size:clamp(72px,6.5vw,108px)!important;
line-height:.84!important;
max-width:900px!important;
}
.mfg-final>div>p:last-child{
max-width:680px!important;
font-size:16px!important;
line-height:1.6!important;
}
/* Catalog popup */
.catalog-dialog{
width:min(1320px,90vw)!important;
max-width:1320px!important;
height:min(84vh,860px)!important;
max-height:860px!important;
overflow:auto!important;
}
}
/* Very wide screens: keep editorial proportions instead of stretching */
@media (min-width:1600px){
#collections.section{
padding-left:max(5vw,80px)!important;
padding-right:max(5vw,80px)!important;
}
.hero{
max-width:1600px!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
/* =========================================================
V24 — DESKTOP HERO MODEL FRAMING
Preserve mobile. Fix only desktop hero photograph crop.
========================================================= */
@media (min-width: 1200px){
.hero-visual{
height:clamp(560px,66vh,690px)!important;
max-height:690px!important;
overflow:hidden!important;
position:relative!important;
}
.hero-visual > img{
width:100%!important;
height:100%!important;
max-height:none!important;
object-fit:cover!important;
/* Show substantially more of the original upper frame/model.
Horizontal position favors the model while retaining studio space. */
object-position:58% 18%!important;
transform:none!important;
scale:1!important;
}
/* Keep studio label safely over the image */
.hero-visual .studio{
top:14px!important;
right:18px!important;
z-index:2!important;
}
}
/* Wider screens get slightly more breathing room */
@media (min-width: 1500px){
.hero-visual{
height:clamp(580px,68vh,720px)!important;
max-height:720px!important;
}
.hero-visual > img{
object-position:58% 12%!important;
}
}
/* Do not alter the proven mobile framing */
@media (max-width: 800px){
.hero-visual > img{
transform:none;
}
}
/* =========================================================
V28 — PREMIUM TEXTILE SHOWROOM CATALOG
========================================================= */
.catalog-modal{
background:rgba(8,11,13,.92)!important;
backdrop-filter:blur(12px)!important;
-webkit-backdrop-filter:blur(12px)!important;
}
.catalog-dialog{
background:#101416!important;
border:0!important;
box-shadow:none!important;
width:min(1500px,94vw)!important;
max-width:1500px!important;
height:min(88vh,900px)!important;
max-height:900px!important;
padding:0!important;
overflow:auto!important;
}
.catalog-inner,
.catalog-content{
background:#101416!important;
}
.catalog-head,
.catalog-header{
padding:48px 56px 28px!important;
border-bottom:1px solid rgba(255,255,255,.12)!important;
}
.catalog-head h2,
.catalog-header h2{
font-size:clamp(58px,6vw,96px)!important;
line-height:.86!important;
letter-spacing:-.055em!important;
margin:0 0 14px!important;
}
.catalog-head p,
.catalog-header p{
max-width:520px!important;
color:#aab3b9!important;
font-size:13px!important;
line-height:1.6!important;
}
/* WOMEN / MEN as showroom walls */
.showroom-gender-stage{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:0!important;
width:100%!important;
margin:0!important;
padding:0!important;
background:#0c1012!important;
}
.showroom-gender-card{
position:relative!important;
height:clamp(430px,58vh,620px)!important;
border:0!important;
padding:0!important;
margin:0!important;
overflow:hidden!important;
background:#111!important;
color:#f4f1ea!important;
cursor:pointer!important;
text-align:left!important;
}
.showroom-gender-image{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
transition:transform .8s cubic-bezier(.22,1,.36,1),filter .6s ease;
filter:saturate(.75) contrast(1.03) brightness(.84);
}
.showroom-women .showroom-gender-image{
background-image:url("assets/showroom/women-lace.webp")!important;
background-position:center 18%!important;
}
.showroom-men .showroom-gender-image{
background-image:url("assets/showroom/men-hoodie.webp")!important;
background-position:center 15%!important;
}
.showroom-gender-overlay{
position:absolute;
inset:0;
background:
linear-gradient(180deg,rgba(7,10,12,.10) 0%,rgba(7,10,12,.06) 40%,rgba(7,10,12,.72) 100%),
linear-gradient(90deg,rgba(7,10,12,.22),transparent 46%);
}
.showroom-gender-copy{
position:absolute;
left:34px;
right:34px;
bottom:30px;
z-index:2;
}
.showroom-kicker{
display:block;
font-size:8px;
font-weight:900;
letter-spacing:.14em;
color:#d0d6da;
margin-bottom:11px;
}
.showroom-gender-copy h3{
margin:0 0 18px!important;
font-size:clamp(68px,7vw,112px)!important;
line-height:.8!important;
letter-spacing:-.06em!important;
font-weight:800!important;
}
.showroom-explore{
display:inline-block;
font-size:9px;
font-weight:900;
letter-spacing:.09em;
color:#f4f1ea;
transform:translateY(5px);
opacity:.82;
transition:transform .35s ease,opacity .35s ease;
}
.showroom-gender-card:hover .showroom-gender-image{
transform:scale(1.035);
filter:saturate(.88) contrast(1.05) brightness(.91);
}
.showroom-gender-card:hover .showroom-explore{
transform:translateY(0);
opacity:1;
}
/* Category stage = editorial showroom, not dashboard */
.catalog-category-stage{
padding:34px 42px 48px!important;
background:#101416!important;
}
.catalog-stage-back{
margin:0 0 28px!important;
color:#aeb7bd!important;
font-size:9px!important;
letter-spacing:.1em!important;
}
.catalog-category-grid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:1px!important;
background:rgba(255,255,255,.12)!important;
border:1px solid rgba(255,255,255,.12)!important;
}
.showroom-category-card{
min-height:220px!important;
padding:26px!important;
border:0!important;
background:#151a1d!important;
color:#f4f1ea!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-end!important;
transition:background .35s ease,transform .35s ease!important;
position:relative!important;
overflow:hidden!important;
}
.showroom-category-card:before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 80% 10%,rgba(255,255,255,.05),transparent 30%),
linear-gradient(140deg,rgba(255,255,255,.015),transparent 55%);
pointer-events:none;
}
.showroom-category-card:hover{
background:#1c2327!important;
transform:none!important;
}
.showroom-category-card .cat-no{
display:none!important;
}
.showroom-category-card .cat-name{
position:relative;
z-index:1;
font-size:clamp(40px,4vw,64px)!important;
line-height:.86!important;
letter-spacing:-.05em!important;
margin-bottom:16px!important;
}
.showroom-category-card .cat-action,
.cat-dual-actions{
position:relative;
z-index:1;
}
.showroom-category-card .cat-action{
font-size:8px!important;
letter-spacing:.1em!important;
color:#b9c2c8!important;
}
.cat-dual-actions{
display:flex!important;
gap:10px!important;
flex-wrap:wrap!important;
}
.cat-dual-actions a,
.cat-dual-actions button{
border:0!important;
border-bottom:1px solid rgba(255,255,255,.35)!important;
padding:0 0 5px!important;
background:transparent!important;
color:#d7dde0!important;
font-size:8px!important;
letter-spacing:.09em!important;
}
@media(max-width:800px){
.catalog-dialog{
width:100vw!important;
height:100dvh!important;
max-height:none!important;
}
.catalog-head,
.catalog-header{
padding:calc(env(safe-area-inset-top) + 26px) 20px 22px!important;
}
.showroom-gender-stage{
grid-template-columns:1fr!important;
}
.showroom-gender-card{
height:42vh!important;
min-height:320px!important;
}
.showroom-gender-copy{
left:22px!important;
right:22px!important;
bottom:22px!important;
}
.showroom-gender-copy h3{
font-size:clamp(58px,18vw,82px)!important;
}
.catalog-category-stage{
padding:24px 16px 40px!important;
}
.catalog-category-grid{
grid-template-columns:1fr!important;
}
.showroom-category-card{
min-height:150px!important;
}
.showroom-category-card .cat-name{
font-size:clamp(42px,13vw,62px)!important;
}
}
/* V29 — ANIMATED SHOWROOM INTRO */
.showroom-intro{position:fixed;inset:0;z-index:50000;display:flex;align-items:center;justify-content:center;background:#0c1114;color:#f3f1ea;opacity:1;visibility:visible;overflow:hidden;transition:opacity .9s cubic-bezier(.22,1,.36,1),visibility .9s ease}
.showroom-intro.out{opacity:0;visibility:hidden;pointer-events:none}
.showroom-intro-bg{position:absolute;inset:-8%;background:radial-gradient(circle at 70% 24%,rgba(128,146,160,.26),transparent 26%),radial-gradient(circle at 22% 75%,rgba(74,88,99,.22),transparent 30%),linear-gradient(145deg,#141b20 0%,#0b1013 52%,#070a0c 100%);transform:scale(1.04);animation:introBreath 5.8s ease-in-out both}
.showroom-intro-bg:before{content:"";position:absolute;inset:-20%;background:linear-gradient(112deg,transparent 0%,transparent 36%,rgba(255,255,255,.025) 43%,rgba(255,255,255,.09) 49%,rgba(255,255,255,.025) 55%,transparent 63%,transparent 100%);transform:translateX(-55%);animation:introLightSweep 4.8s .25s cubic-bezier(.22,1,.36,1) both}
.showroom-intro-grain{position:absolute;inset:0;opacity:.12;pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 4px);mix-blend-mode:soft-light;animation:introGrain 1.4s steps(2,end) infinite}
.showroom-intro-center{position:relative;z-index:2;width:min(900px,88vw);text-align:center}
.showroom-intro-kicker,.showroom-intro-sub{display:block;font-size:8px;font-weight:900;letter-spacing:.18em;color:#aeb9c0;opacity:0;transform:translateY(12px)}
.showroom-intro-kicker{margin-bottom:26px;animation:introSmallReveal .8s .25s cubic-bezier(.22,1,.36,1) forwards}
.showroom-intro-sub{margin-top:26px;animation:introSmallReveal .8s 1.7s cubic-bezier(.22,1,.36,1) forwards}
.showroom-intro-logo{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(86px,12vw,190px);font-weight:900;line-height:.72;letter-spacing:-.075em;text-transform:uppercase}
.showroom-intro-line{display:block;opacity:0;filter:blur(14px);transform:translateY(26px) scale(.985);animation:introLogoReveal 1.05s cubic-bezier(.22,1,.36,1) forwards}
.showroom-intro-line:nth-child(1){animation-delay:.55s}.showroom-intro-line:nth-child(2){animation-delay:.88s}
.showroom-intro-skip{position:absolute;top:22px;right:26px;z-index:3;border:0;background:transparent;color:#aeb9c0;padding:8px 0;font:inherit;font-size:8px;font-weight:900;letter-spacing:.14em;cursor:pointer;opacity:0;animation:introSmallReveal .7s 1.1s forwards}
.showroom-intro-progress{position:absolute;left:50%;bottom:28px;width:min(260px,54vw);height:1px;transform:translateX(-50%);background:rgba(255,255,255,.15);overflow:hidden}
.showroom-intro-progress span{display:block;width:100%;height:100%;background:#d7dde0;transform-origin:left center;transform:scaleX(0);animation:introProgress 4.5s .35s linear forwards}
body.intro-pending{overflow:hidden!important}
@keyframes introBreath{0%{transform:scale(1.055)}100%{transform:scale(1)}}
@keyframes introLightSweep{0%{transform:translateX(-65%);opacity:0}20%{opacity:1}100%{transform:translateX(65%);opacity:0}}
@keyframes introGrain{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(1px,-1px,0)}50%{transform:translate3d(-1px,1px,0)}75%{transform:translate3d(1px,1px,0)}100%{transform:translate3d(0,0,0)}}
@keyframes introLogoReveal{to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
@keyframes introSmallReveal{to{opacity:1;transform:translateY(0)}}
@keyframes introProgress{to{transform:scaleX(1)}}
.reveal-on-scroll{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal-on-scroll.visible{opacity:1;transform:none}
@media(max-width:800px){.showroom-intro-logo{font-size:clamp(82px,25vw,132px)}.showroom-intro-center{width:90vw}.showroom-intro-skip{top:calc(env(safe-area-inset-top) + 16px);right:18px}.showroom-intro-progress{bottom:calc(env(safe-area-inset-bottom) + 24px)}}
@media(prefers-reduced-motion:reduce){.showroom-intro-bg,.showroom-intro-bg:before,.showroom-intro-grain,.showroom-intro-line,.showroom-intro-kicker,.showroom-intro-sub,.showroom-intro-skip,.showroom-intro-progress span,.reveal-on-scroll{animation:none!important;transition:none!important;filter:none!important;transform:none!important}}
/* V30 MOBILE INTRO HARD FIX — keep intro isolated above site */
html,body{margin:0}
body.intro-pending{overflow:hidden!important;height:100dvh!important;touch-action:none}
#showroomIntro.showroom-intro{
position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;
width:100vw!important;height:100dvh!important;min-height:100svh!important;
z-index:2147483647!important;display:flex!important;align-items:center!important;justify-content:center!important;
overflow:hidden!important;background:#0c1114!important;color:#f3f1ea!important;
font-family:Arial,Helvetica,sans-serif!important;box-sizing:border-box!important;
}
#showroomIntro *{box-sizing:border-box}
#showroomIntro .showroom-intro-center{position:relative!important;z-index:2!important;width:90vw!important;text-align:center!important;display:block!important}
#showroomIntro .showroom-intro-logo{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;font-size:clamp(82px,25vw,132px)!important;font-weight:900!important;line-height:.72!important;letter-spacing:-.075em!important;color:#f3f1ea!important}
#showroomIntro .showroom-intro-line{display:block!important}
#showroomIntro .showroom-intro-kicker,#showroomIntro .showroom-intro-sub{display:block!important;font-size:9px!important;line-height:1.4!important;letter-spacing:.18em!important;color:#aeb9c0!important}
#showroomIntro .showroom-intro-skip{position:absolute!important;top:max(18px,env(safe-area-inset-top))!important;right:20px!important;left:auto!important;width:auto!important;height:auto!important;z-index:4!important;background:transparent!important;border:0!important;border-radius:0!important;color:#aeb9c0!important;font-size:9px!important;padding:10px!important;box-shadow:none!important}
#showroomIntro .showroom-intro-progress{position:absolute!important;left:50%!important;bottom:max(26px,env(safe-area-inset-bottom))!important;width:54vw!important;height:1px!important;transform:translateX(-50%)!important;z-index:3!important}
@supports not (height:100dvh){#showroomIntro.showroom-intro{height:100vh!important}}
\n/* V31 — MINIMAL SHOWROOM COLLECTIONS */\n.catalog-dialog > .catalog-kicker{margin:32px 34px 10px!important;font-size:8px!important;letter-spacing:.16em!important;color:#9da8af!important}\n.catalog-dialog > #catalogTitle{margin:0 34px 28px!important;font-size:clamp(54px,6vw,88px)!important;line-height:.88!important;letter-spacing:-.055em!important}\n.showroom-gender-copy h3{margin:0!important}\n@media(max-width:800px){\n .catalog-dialog > .catalog-kicker{margin:calc(env(safe-area-inset-top) + 54px) 20px 8px!important;font-size:7px!important}\n .catalog-dialog > #catalogTitle{margin:0 20px 22px!important;font-size:clamp(46px,14vw,64px)!important;line-height:.9!important}\n .showroom-gender-card{height:34vh!important;min-height:245px!important}\n .showroom-gender-copy{left:20px!important;right:20px!important;bottom:18px!important}\n .showroom-gender-copy h3{font-size:clamp(54px,16vw,74px)!important;margin:0!important}\n .catalog-back,.catalog-close{width:44px!important;height:44px!important}\n}\n
/* =========================================================
V33 — INTRO = WELCOME SCREEN
Old QR welcome is removed.
========================================================= */
.qr-welcome{display:none!important;}
.intro-welcome-v33{
min-height:100dvh;
padding:0;
}
.intro-v33-top{
position:absolute;
z-index:4;
top:26px;
left:32px;
right:32px;
display:flex;
align-items:center;
justify-content:space-between;
font-size:8px;
font-weight:900;
letter-spacing:.16em;
color:#c5cdd2;
opacity:0;
animation:introSmallReveal .7s .35s forwards;
}
.intro-v33-lang{
display:flex;
align-items:center;
gap:10px;
}
.intro-v33-lang button{
border:0;
padding:4px 0;
background:transparent;
color:#87949d;
font:inherit;
font-size:8px;
font-weight:900;
letter-spacing:.12em;
cursor:pointer;
}
.intro-v33-lang button.active{color:#fff}
.intro-welcome-v33 .showroom-intro-center{
width:min(900px,88vw);
padding:72px 0 90px;
}
.intro-welcome-v33 .showroom-intro-logo{
font-size:clamp(82px,11vw,168px);
}
.intro-v33-copy{
max-width:460px;
margin:22px auto 0;
color:#aab5bc;
font-size:13px;
line-height:1.55;
opacity:0;
transform:translateY(12px);
animation:introSmallReveal .8s 1.85s cubic-bezier(.22,1,.36,1) forwards;
}
.intro-v33-actions{
width:min(560px,100%);
margin:28px auto 0;
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
opacity:0;
transform:translateY(14px);
animation:introSmallReveal .85s 2.05s cubic-bezier(.22,1,.36,1) forwards;
}
.intro-v33-primary,
.intro-v33-secondary{
min-height:54px;
display:flex;
align-items:center;
justify-content:center;
border-radius:0;
padding:14px 16px;
text-decoration:none;
font:inherit;
font-size:8px;
font-weight:900;
letter-spacing:.09em;
cursor:pointer;
}
.intro-v33-primary{
border:1px solid #f2f0ea;
background:#f2f0ea;
color:#11171a;
}
.intro-v33-secondary{
border:1px solid rgba(255,255,255,.24);
background:rgba(255,255,255,.025);
color:#f2f0ea;
}
.intro-v33-enter{
grid-column:1/-1;
justify-self:center;
margin-top:7px;
border:0;
border-bottom:1px solid rgba(255,255,255,.42);
background:transparent;
color:#cbd2d6;
padding:7px 0;
font:inherit;
font-size:8px;
font-weight:900;
letter-spacing:.13em;
cursor:pointer;
}
.intro-v33-bottom{
position:absolute;
z-index:4;
left:32px;
right:32px;
bottom:24px;
display:flex;
justify-content:space-between;
gap:20px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,.15);
color:#87949d;
font-size:7px;
font-weight:900;
letter-spacing:.12em;
opacity:0;
animation:introSmallReveal .7s 2.2s forwards;
}
/* No timer/progress bar: visitor chooses the next action. */
.intro-welcome-v33 .showroom-intro-progress,
.intro-welcome-v33 .showroom-intro-skip{
display:none!important;
}
@media(max-width:800px){
.intro-v33-top{
top:calc(env(safe-area-inset-top) + 20px);
left:20px;
right:20px;
}
.intro-welcome-v33 .showroom-intro-center{
width:calc(100vw - 40px);
padding:calc(env(safe-area-inset-top) + 68px) 0 calc(env(safe-area-inset-bottom) + 92px);
}
.intro-welcome-v33 .showroom-intro-kicker{
margin-bottom:18px;
}
.intro-welcome-v33 .showroom-intro-logo{
font-size:clamp(74px,23vw,112px);
line-height:.73;
}
.intro-welcome-v33 .showroom-intro-sub{
margin-top:20px;
}
.intro-v33-copy{
max-width:330px;
margin-top:18px;
font-size:12px;
}
.intro-v33-actions{
grid-template-columns:1fr;
width:100%;
max-width:390px;
margin-top:24px;
}
.intro-v33-primary,
.intro-v33-secondary{
min-height:52px;
width:100%;
}
.intro-v33-enter{
grid-column:auto;
}
.intro-v33-bottom{
left:20px;
right:20px;
bottom:calc(env(safe-area-inset-bottom) + 18px);
font-size:6px;
}
}
@media(max-height:720px) and (max-width:800px){
.intro-welcome-v33 .showroom-intro-logo{
font-size:clamp(62px,19vw,92px);
}
.intro-v33-copy{display:none}
.intro-v33-actions{margin-top:18px}
.intro-v33-bottom{display:none}
}
/* =========================================================
V39 — SUPPLIED MODEL PHOTOS + NEUTRAL SHOWROOM THEME
Keeps V38 intro/behavior intact; changes site photography and palette only.
========================================================= */
:root{
--cc-paper:#ebe8e2;
--cc-paper-2:#f4f2ed;
--cc-ink:#121517;
--cc-charcoal:#161b1e;
--cc-charcoal-2:#20262a;
--cc-muted:#8f989e;
--cc-line:rgba(255,255,255,.14);
}
body{background:var(--cc-charcoal)!important;color:var(--cc-paper-2)!important}
.nav{background:#171c1f!important;border-color:rgba(255,255,255,.12)!important}
.hero{background:linear-gradient(118deg,#121719 0%,#171d20 58%,#20272b 100%)!important}
.hero-visual{background:var(--cc-paper)!important;border-color:rgba(255,255,255,.14)!important}
.hero-visual>img{
object-fit:cover!important;
object-position:center 14%!important;
filter:saturate(.82) contrast(1.015)!important;
}
.hero-visual:before{
background:linear-gradient(90deg,rgba(19,24,27,.08),transparent 32%,transparent 78%,rgba(19,24,27,.08)),linear-gradient(0deg,rgba(19,24,27,.12),transparent 24%)!important;
}
/* Light showroom chapter: supplied product/model photography */
#collections.section{
background:var(--cc-paper)!important;
color:var(--cc-ink)!important;
border-top:1px solid rgba(18,21,23,.14)!important;
border-bottom:1px solid rgba(18,21,23,.14)!important;
}
#collections .section-head span{color:#61696e!important}
#collections .card{background:var(--cc-paper-2)!important;border:1px solid rgba(18,21,23,.12)!important}
#collections .card img{
background:#e8e7e3!important;
object-fit:cover!important;
object-position:center 15%!important;
filter:saturate(.88) contrast(1.01)!important;
}
#collections .card:nth-child(2) img{object-position:center 18%!important}
#collections figcaption{color:var(--cc-ink)!important;border-color:rgba(18,21,23,.13)!important}
.about,.about-v52,.manufacturing-v44,.contact{background:var(--cc-charcoal)!important}
.manufacturing-v44{border-top-color:var(--cc-line)!important}
.mfg-step,.moq-highlight,.mfg-final{border-color:var(--cc-line)!important}
/* Campaign is now a clean premium womenswear image, integrated into the dark site */
#catalog.campaign{background:#deddd9!important}
#catalog.campaign>img{
object-fit:cover!important;
object-position:center 16%!important;
filter:saturate(.82) contrast(1.02)!important;
}
#catalog.campaign:after{
background:linear-gradient(90deg,rgba(13,16,18,.78) 0%,rgba(13,16,18,.46) 34%,rgba(13,16,18,.08) 68%,rgba(13,16,18,.04) 100%)!important;
}
/* Showroom collection chooser: the supplied male/female images */
.showroom-gender-card{background:#e7e5e0!important}
.showroom-gender-image{filter:saturate(.82) contrast(1.02) brightness(.92)!important}
.showroom-gender-overlay{
background:linear-gradient(180deg,rgba(12,15,17,.02) 0%,rgba(12,15,17,.08) 50%,rgba(12,15,17,.66) 100%)!important;
}
.showroom-women .showroom-gender-image{
background-image:url("assets/showroom/women-lace.webp")!important;
background-position:center 18%!important;
}
.showroom-men .showroom-gender-image{
background-image:url("assets/showroom/men-hoodie.webp")!important;
background-position:center 15%!important;
}
@media(max-width:800px){
.hero-visual>img{object-position:center 12%!important}
#collections .card img{height:64vh!important;max-height:680px!important;object-position:center 12%!important}
#collections .card:nth-child(2) img{object-position:center 15%!important}
#catalog.campaign>img{object-position:center 13%!important}
.showroom-women .showroom-gender-image{background-position:center 12%!important}
.showroom-men .showroom-gender-image{background-position:center 10%!important}
}
/* =========================================================
V42 — OWNED PHOTO VARIETY / SHOWROOM LOOKBOOK
Stable base preserved; only a new editorial image section is added.
========================================================= */
.owned-lookbook-v42{
background:#11171a;
color:#f3f1eb;
padding:clamp(84px,9vw,140px) max(4vw,52px);
border-top:1px solid rgba(255,255,255,.10);
}
.owned-lookbook-v42-head{
width:min(1500px,100%);
margin:0 auto 44px;
display:grid;
grid-template-columns:1fr minmax(380px,680px);
align-items:end;
gap:40px;
}
.owned-lookbook-v42-head>span{
font-size:8px;
font-weight:900;
letter-spacing:.15em;
color:#9eabb3;
padding-bottom:8px;
}
.owned-lookbook-v42-head h2{
margin:0;
font-size:clamp(64px,6vw,104px);
line-height:.82;
letter-spacing:-.06em;
}
.owned-lookbook-v42-grid{
width:min(1500px,100%);
margin:0 auto;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.owned-lookbook-v42-item{
position:relative;
margin:0;
min-height:520px;
overflow:hidden;
background:#e8e6df;
}
.owned-lookbook-v42-item img{
display:block;
width:100%;
height:100%;
min-height:520px;
object-fit:cover;
object-position:center;
transition:transform .75s cubic-bezier(.22,1,.36,1);
}
.owned-lookbook-v42-item:hover img{
transform:scale(1.025);
}
.owned-lookbook-v42-item figcaption{
position:absolute;
left:18px;
right:18px;
bottom:16px;
display:flex;
justify-content:space-between;
gap:20px;
color:#fff;
font-size:7px;
font-weight:900;
letter-spacing:.12em;
text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.owned-lookbook-v42-item figcaption b{
font-size:7px;
letter-spacing:.12em;
}
@media(min-width:1200px){
.owned-lookbook-v42-wide{
min-height:640px;
}
.owned-lookbook-v42-wide img{
min-height:640px;
}
}
@media(max-width:800px){
.owned-lookbook-v42{
padding:70px 16px;
}
.owned-lookbook-v42-head{
grid-template-columns:1fr;
gap:18px;
margin-bottom:28px;
}
.owned-lookbook-v42-head h2{
font-size:clamp(54px,16vw,76px);
}
.owned-lookbook-v42-grid{
grid-template-columns:1fr;
gap:10px;
}
.owned-lookbook-v42-item,
.owned-lookbook-v42-wide{
min-height:430px;
}
.owned-lookbook-v42-item img,
.owned-lookbook-v42-wide img{
min-height:430px;
}
}