/* ============================================================================
VENDIFYS STORE — design system
A light, premium retail architecture: warm walls, recessed machines,
brushed metal, glass, soft realistic shadows. No dark / sci-fi styling.
========================================================================== */
/* ---------- 1. Tokens ---------------------------------------------------- */
/* LIGHT (default): white page + jet black / dark grey chrome */
:root{
--wall-0:#FFFFFF;
--wall-1:#FFFFFF;
--wall-2:#F4F4F6;
--recess:#EFEFF1;
--recess-deep:#E1E1E5;
--floor-1:#F7F7F8;
--floor-2:#E9E9EC;
--ink:#0A0A0B;
--ink-2:#31313A;
--muted:#71717A;
--line:rgba(10,10,11,.13);
--line-soft:rgba(10,10,11,.07);
--shadow-rgb:10,10,11;
/* chrome = the jet black / dark grey furniture of the theme */
--chrome:#0A0A0B;
--chrome-2:#18181B;
--chrome-3:#26262B;
--chrome-ink:#FAFAFA;
--chrome-muted:rgba(255,255,255,.64);
--chrome-line:rgba(255,255,255,.13);
--brand:#9AA0A6;
--brand-ink:#E5E7EB;
--brand-soft:rgba(154,160,166,.15);
/* Keyboard focus has to clear 3:1 against the wall it sits on (WCAG 1.4.11).
--brand is 2.6:1 on white, so it is not used for the indicator. */
--focus-ring:#0A0A0B;
--focus-halo:rgba(10,10,11,.14);
/* Brand-button edge: has to clear 3:1 against the wall it sits on, in this
theme. A single hard-coded grey was 2.6:1 here. */
--btn-edge:#3A3B44;
--panel:#FFFFFF;
--panel-2:#FAFAFA;
--mach-ink:rgba(10,10,11,.72);
--metal-1:#F7F8F9;
--metal-2:#E6E8EB;
--metal-3:#C6CAD0;
--glass:rgba(255,255,255,.55);
--sand:#C9A227;
--r-xs:6px; --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px;
--sh-s:0 1px 2px rgba(var(--shadow-rgb),.07), 0 2px 6px rgba(var(--shadow-rgb),.05);
--sh-m:0 4px 12px rgba(var(--shadow-rgb),.08), 0 14px 30px rgba(var(--shadow-rgb),.07);
--sh-l:0 10px 28px rgba(var(--shadow-rgb),.11), 0 34px 64px rgba(var(--shadow-rgb),.10);
--font-d:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-b:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--nav-h:84px;
--ease:cubic-bezier(.22,.61,.36,1);
}
/* DARK: jet black / dark grey site with glass machines */
[data-theme="dark"]{
--wall-0:#0B0B0C;
--wall-1:#0E0E10;
--wall-2:#151518;
--recess:#1A1A1E;
--recess-deep:#050506;
--floor-1:#111114;
--floor-2:#08080A;
--ink:#F5F5F6;
--ink-2:#C9C9D1;
--muted:#8B8B95;
--line:rgba(255,255,255,.13);
--line-soft:rgba(255,255,255,.07);
--shadow-rgb:0,0,0;
--chrome:#000000;
--chrome-2:#0C0C0E;
--chrome-3:#1B1B1F;
--chrome-ink:#FAFAFA;
--chrome-muted:rgba(255,255,255,.60);
--chrome-line:rgba(255,255,255,.12);
--brand:#9AA0A6;
--brand-ink:#E5E7EB;
--brand-soft:rgba(154,160,166,.15);
--focus-ring:#FFFFFF;
--focus-halo:rgba(255,255,255,.22);
--btn-edge:#C9CCD2; /* 9:1 against the dark wall */
--panel:#141417;
--panel-2:#1A1A1E;
--metal-1:#26262B;
--metal-2:#17171B;
--metal-3:#0B0B0D;
--glass:rgba(20,24,30,.55);
--sh-s:0 1px 2px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
--sh-m:0 4px 14px rgba(0,0,0,.55), 0 16px 34px rgba(0,0,0,.45);
--sh-l:0 12px 30px rgba(0,0,0,.6), 0 40px 70px rgba(0,0,0,.5);
}
/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overscroll-behavior:contain; overflow-x:clip}
/* overflow-x used to be declared twice here (`hidden`, then `clip`); the first
was dead. clip is the right one: unlike `hidden` it does not turn the body
into a scroll container, which is what let position:sticky work in the nav. */
body{
margin:0; background:var(--wall-1); color:var(--ink);
font-family:var(--font-b); font-size:16px; line-height:1.6;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
overflow-x:clip;
overscroll-behavior:contain;
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-d); font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:0}
p{margin:0}
::selection{background:var(--brand-soft); color:var(--brand-ink)}
/* One focus ring that clears 3:1 on both themes. --brand (#9AA0A6) is 2.6:1
on the light theme's white walls, so it is only used for decoration. */
:focus-visible{outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:4px}
/* ---------- accessibility utilities -------------------------------------- */
.visually-hidden{
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Skip link: there was no way past 9 nav links, an auth button and a CTA
without a mouse. Hidden until focused, then pinned at the top-left. */
.skip-link{
position:fixed; top:8px; left:8px; z-index:1000;
padding:11px 18px; border-radius:999px;
background:var(--ink); color:var(--wall-0);
font-weight:700; font-size:14.5px; text-decoration:none;
transform:translateY(-160%); transition:transform .18s var(--ease);
box-shadow:var(--sh-m);
}
.skip-link:focus-visible{transform:translateY(0); outline:3px solid var(--focus-ring); outline-offset:3px}
/* A page rendered without JavaScript still needs to say so. */
.noscript-note{
display:block; margin:0; padding:14px 20px;
background:var(--wall-2); border-bottom:1px solid var(--line);
font-size:14.5px; color:var(--ink-2);
}
.noscript-note a{color:var(--focus-ring); text-decoration:underline}
/* Search results + 404 recovery list. */
.rte-links{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.rte-links a{display:inline-block; padding:9px 14px; border:1px solid var(--line); border-radius:var(--r-s); color:var(--ink); text-decoration:none}
.rte-links a:hover{border-color:var(--focus-ring)}
.sr-list{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.sr-list a{display:block; padding:12px 16px; border:1px solid var(--line-soft); border-radius:var(--r-s); text-decoration:none}
.sr-list a:hover,.sr-list a:focus-visible{border-color:var(--focus-ring)}
.sr-list__meta{display:block; margin-top:3px; font-size:13px; color:var(--muted)}
.site-search{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:22px 0 6px}
.site-search input{
flex:1 1 320px; height:50px; padding:0 18px; border-radius:999px;
border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:15.5px;
}
.sr-group{margin-top:26px}
.sr-group h3{font-family:var(--font-d); font-size:15px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.footer__col-title{
font-family:var(--font-d); font-size:13.5px; font-weight:800;
letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
margin:0 0 12px;
}
/* The footer always used h5 after a page of h2s — three skipped levels. */
.footer__grid .lang{color:var(--muted); text-decoration:none}
.footer__grid .lang:hover{color:var(--ink); text-decoration:underline}
/* Contact form. The block used to carry padding/border/width in an inline
style attribute on every field, which is unmaintainable and forces
'unsafe-inline' in style-src. */
.contact-form{max-width:640px; display:grid; gap:16px; padding:28px}
.contact-form .btn{justify-self:start}
.contact-form textarea{min-height:132px; resize:vertical}
/* Plan CTAs used to carry ~200 characters of inline style each, rebuilt per
plan in JS. A class plus one modifier is the same result. */
.plan__cta{
background:#FFFFFF; color:#000000;
height:48px; border-radius:9999px; font-weight:700; font-size:16px;
width:100%; margin-top:auto; display:flex; align-items:center; justify-content:center;
}
.plan__cta--popular{background:linear-gradient(145deg,#9AA0A6,#B8BABE); color:#0A0A0B}
.wrap{width:min(1090px,100% - 96px); margin-inline:auto}
.wrap-wide{width:min(1270px,100% - 72px); margin-inline:auto}
.section{padding:72px 0}
.section--tight{padding:48px 0}
#wall.section{padding-top:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* ---------- 3. Typography helpers --------------------------------------- */
.eyebrow{
display:inline-flex; align-items:center; gap:9px;
font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:var(--muted);
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--brand); opacity:.7}
.h-display{font-size:clamp(40px,5.6vw,74px); line-height:1.03}
.h1{font-size:clamp(34px,4.4vw,56px)}
.h2{font-size:clamp(28px,3.2vw,42px)}
.h3{font-size:clamp(21px,2vw,27px)}
.lead{font-size:clamp(16.5px,1.35vw,19.5px); color:var(--ink-2); line-height:1.65}
.small{font-size:13.5px; color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; letter-spacing:.02em}
.section-head{display:flex; gap:32px; align-items:flex-end; justify-content:space-between; margin-bottom:38px; flex-wrap:wrap}
.section-head .lead{max-width:620px}
.section-head p.lead{margin-top:14px}
/* ---------- 4. Buttons --------------------------------------------------- */
.btn{
--bg:var(--ink); --fg:#fff;
display:inline-flex; align-items:center; justify-content:center; gap:9px;
height:50px; padding:0 26px; border-radius:999px; border:1px solid transparent;
background:var(--bg); color:var(--fg);
font-weight:650; font-size:15px; letter-spacing:-.01em;
transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .2s, color .2s, border-color .2s;
box-shadow:var(--sh-s); white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sh-m)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px; height:17px; flex:none}
.btn--brand{
--bg:var(--ink);
/* The gradient used to end at #0A0A0B against a #0B0B0C wall, and the only
thing separating the two was a 1px border at rgba(255,255,255,.22) —
about 1.9:1, under the 3:1 a control boundary needs. A lighter metallic
fill plus a border at full strength fixes it in both themes. */
background:linear-gradient(145deg,#2A2A31 0%,#4A4B55 50%,#23232A 100%);
border:1px solid var(--btn-edge);
box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 0 rgba(154,160,166,.35);
color:#F5F5F6;
animation:metallicWhiteShadow 2.5s infinite;
}
.btn--brand:hover{box-shadow:0 12px 26px rgba(154,160,166,.34), 0 0 0 3px rgba(154,160,166,.25)}
.btn--ghost{--bg:transparent; --fg:var(--ink); border-color:rgba(255,255,255,.25); box-shadow:none; backdrop-filter:blur(6px); background:rgba(255,255,255,.06)}
.btn--ghost:hover{border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.12)}
.btn--sm{height:40px; padding:0 18px; font-size:14px}
.btn--lg{height:56px; padding:0 32px; font-size:16px}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.link-arrow{
display:inline-flex; align-items:center; gap:7px; font-weight:650; font-size:14.5px;
color:var(--brand-ink); transition:gap .25s var(--ease);
}
.link-arrow:hover{gap:12px}
/* ---------- 5. Chips, badges, tags -------------------------------------- */
.chip{
display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px;
border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.72);
font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer;
transition:all .25s var(--ease); white-space:nowrap;
}
.chip:hover{border-color:var(--line); background:var(--panel); transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.chip .dot{width:7px; height:7px; border-radius:50%; background:var(--brand)}
.badge{
display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px;
border-radius:6px; background:rgba(255,255,255,.9); border:1px solid var(--line);
font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
}
.badge--live{background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); color:#15803D}
.badge--brand{background:var(--brand-soft); border-color:rgba(154,160,166,.3); color:var(--brand-ink)}
.badge--plan{background:var(--wall-2); border-color:transparent; color:var(--ink-2)}
/* ---------- 6. Navigation ------------------------------------------------ */
.nav{
position:sticky; top:0; z-index:80; height:var(--nav-h);
background:rgba(252,251,248,.82); backdrop-filter:saturate(1.4) blur(14px);
border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s;
}
.nav.is-stuck{border-bottom-color:var(--line-soft); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--sh-s)}
.nav .wrap{width:min(1330px, 100% - 64px)}
.nav__in{height:100%; display:flex; align-items:center; gap:28px}
.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand__mark{width:38px; height:38px; border-radius:10px; background:var(--ink); display:grid; place-items:center; overflow:hidden}
.brand__mark img{width:24px; height:24px; object-fit:contain; filter:brightness(0) invert(1)}
.brand__word{height:26px; filter:brightness(0); opacity:.92}
.nav__links{display:flex; align-items:center; gap:4px; margin-left:6px}
.nav__link{
position:relative; padding:9px 13px; border-radius:9px; font-size:16px; font-weight:600; color:var(--ink-2); white-space:nowrap;
transition:color .2s, background .2s;
}
.nav__link:hover{color:var(--ink); background:rgba(var(--shadow-rgb),.06)}
.nav__link.is-active{color:var(--ink)}
.nav__link.is-active::after{
content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; border-radius:2px; background:var(--brand);
}
.nav__right{margin-left:auto; display:flex; align-items:center; gap:12px}
.nav__login{font-size:16px; font-weight:600; color:var(--ink-2); padding:9px 12px; border-radius:9px; white-space:nowrap}
.nav__login:hover{background:rgba(var(--shadow-rgb),.06); color:var(--ink)}
.nav__burger{
display:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--line);
background:var(--panel); place-items:center;
}
.nav__burger span{display:block; width:17px; height:1.6px; background:var(--ink); border-radius:2px; position:relative}
.nav__burger span::before,.nav__burger span::after{content:""; position:absolute; left:0; width:17px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease)}
.nav__burger span::before{top:-5.5px} .nav__burger span::after{top:5.5px}
.nav.is-open .nav__burger span{background:transparent}
.nav.is-open .nav__burger span::before{transform:translateY(5.5px) rotate(45deg)}
.nav.is-open .nav__burger span::after{transform:translateY(-5.5px) rotate(-45deg)}
.mobile-menu{
position:fixed; inset:var(--nav-h) 0 auto 0; z-index:79; background:var(--wall-0);
border-bottom:1px solid var(--line); padding:14px 22px 26px;
transform:translateY(calc(-100% - var(--nav-h) - 8px));
visibility:hidden;
transition:transform .45s var(--ease), visibility 0s linear .45s;
}
.mobile-menu.is-open{
transform:translateY(0); box-shadow:var(--sh-l); visibility:visible;
transition:transform .45s var(--ease), visibility 0s linear 0s;
}
.mobile-menu a{display:flex; align-items:center; justify-content:space-between; padding:15px 4px; border-bottom:1px solid var(--line-soft); font-weight:650; font-size:17px}
.mobile-menu .btn{width:100%; margin-top:18px}
/* ---------- 7. Store architecture (wall / ceiling / floor) -------------- */
.scene{
position:relative; isolation:isolate; overflow:hidden;
background:
radial-gradient(120% 60% at 50% -10%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
linear-gradient(180deg, var(--wall-0) 0%, var(--wall-1) 55%, var(--wall-2) 100%);
border-top:1px solid var(--line-soft);
}
.scene--inset{border-radius:var(--r-xl); border:1px solid var(--line-soft); box-shadow:var(--sh-m)}
/* ceiling + recessed lights */
.scene__ceiling{
position:relative; height:74px;
background:linear-gradient(180deg,#FFFFFF,#F5F5F7);
border-bottom:1px solid var(--line-soft);
box-shadow:0 10px 26px -18px rgba(var(--shadow-rgb),.5);
}
.scene__ceiling::after{
content:""; position:absolute; inset:auto 0 -14px 0; height:14px;
background:linear-gradient(180deg, rgba(var(--shadow-rgb),.10), transparent);
}
.light-rig{
position:absolute; inset:0;
display:flex; justify-content:space-around; align-items:flex-start;
padding:0 6%;
}
/* Luxury spotlight housing — recessed ceiling downlight */
.light{
position:relative; width:42px; height:42px; border-radius:50%;
background:
radial-gradient(circle at 50% 40%, #FFFFFF 0%, #F0F0F2 60%, #E0E0E4 100%);
box-shadow:
0 0 0 1px rgba(var(--shadow-rgb),.08) inset,
0 2px 4px rgba(var(--shadow-rgb),.12),
0 0 0 3px rgba(var(--shadow-rgb),.04);
display:flex; align-items:center; justify-content:center;
}
/* Inner ring — polished chrome bezel */
.light::before{
content:""; position:absolute; inset:3px;
border-radius:50%;
background:radial-gradient(circle at 50% 35%, #FFFFFF 0%, #E8E8EC 60%, #D0D0D6 100%);
box-shadow:0 1px 2px rgba(var(--shadow-rgb),.15) inset;
}
/* Precise spotlight beam — warm golden cone */
.light::after{
content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
width:0; height:0;
border-left:38px solid transparent;
border-right:38px solid transparent;
border-top:180px solid rgba(255,236,196,.08);
pointer-events:none;
filter:blur(2px);
transform-origin:top center;
}
/* Light pool on floor beneath each spotlight */
.light-spot{
position:absolute; left:50%; transform:translateX(-50%);
width:120px; height:16px; bottom:-160px;
background:radial-gradient(ellipse at 50% 50%, rgba(255,214,120,.25) 0%, rgba(255,214,120,0) 70%);
pointer-events:none;
}
/* Warm glow effect around spotlight */
.light-glow{
position:absolute; inset:-4px;
border-radius:50%;
background:radial-gradient(circle, rgba(255,236,196,.3) 0%, transparent 70%);
pointer-events:none;
animation:spotlight-pulse 4s ease-in-out infinite;
}
@keyframes spotlight-pulse{
0%,100%{opacity:.6; transform:scale(.95)}
50%{opacity:1; transform:scale(1.05)}
}
/* wall */
.scene__wall{
position:relative; padding:56px 0 14px;
background:
repeating-linear-gradient(90deg, transparent 0 258px, rgba(var(--shadow-rgb),.05) 258px 259px),
linear-gradient(180deg,var(--wall-0),var(--wall-2));
}
.scene__wall::before{
content:""; position:absolute; left:0; right:0; top:0; height:70px;
background:linear-gradient(180deg, rgba(var(--shadow-rgb),.09), transparent); pointer-events:none;
}
.scene__sign{
position:absolute; top:16px; left:50%; transform:translateX(-50%);
font-family:var(--font-d); font-size:11px; font-weight:800; letter-spacing:.34em; text-transform:uppercase;
color:var(--muted); opacity:.75;
}
/* floor */
.scene__floor{
position:relative; height:104px;
background:linear-gradient(180deg,var(--floor-1),var(--floor-2));
border-top:1px solid var(--line-soft);
}
.scene__floor::before{
content:""; position:absolute; inset:0;
background:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 120px, rgba(var(--shadow-rgb),.05) 120px 121px);
opacity:.7;
}
.scene__floor::after{
content:""; position:absolute; left:0; right:0; top:0; height:44px;
background:linear-gradient(180deg, rgba(var(--shadow-rgb),.12), transparent);
}
.baseboard{
position:absolute; left:0; right:0; top:-13px; height:13px;
background:linear-gradient(180deg,#FFFFFF,#E9E9EC);
border-top:1px solid var(--line-soft);
box-shadow:0 2px 6px rgba(var(--shadow-rgb),.07);
}
/* ---------- 8. The niche (architectural recess) ------------------------- */
.wall-row{
display:flex; gap:26px; align-items:stretch; justify-content:center;
padding:0 clamp(16px,3vw,44px);
}
.wall-row--scroll{
justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory;
padding-bottom:14px; scrollbar-width:thin;
overscroll-behavior-x:contain;
}
.wall-row--scroll::-webkit-scrollbar{height:7px}
.wall-row--scroll::-webkit-scrollbar-thumb{background:rgba(var(--shadow-rgb),.25); border-radius:8px}
.wall-row--scroll::-webkit-scrollbar-track{background:transparent}
.wall-row--hero{justify-content:safe center}
.wall-row .niche{width:clamp(150px,15vw,206px)}
.wall-row .machine{aspect-ratio:9/20.9}
.wall-row--hero .niche{width:clamp(176px,17.5vw,236px)}
.wall-row--hero .machine{aspect-ratio:8/22.8}
/* sub-page header */
.pagehead{background:linear-gradient(180deg,var(--wall-0),var(--wall-1)); padding:56px 0 34px; border-bottom:1px solid var(--line-soft)}
.pagehead .lead{max-width:640px; margin-top:16px}
.crumbs{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:18px}
.crumbs a:hover{color:var(--brand-ink)}
.toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:26px}
.niche{
position:relative; flex:none; scroll-snap-align:center;
padding:14px; border-radius:6px;
background:linear-gradient(180deg,var(--recess),var(--recess-deep));
box-shadow:
inset 0 3px 0 rgba(255,255,255,.9),
inset 0 18px 28px -16px rgba(var(--shadow-rgb),.55),
inset 0 -14px 24px -16px rgba(var(--shadow-rgb),.45),
0 1px 0 rgba(255,255,255,.95);
transition:box-shadow .4s var(--ease);
}
[data-theme="dark"] .niche{
box-shadow:
inset 0 3px 0 rgba(255,255,255,.06),
inset 0 18px 30px -16px rgba(0,0,0,.9),
inset 0 -14px 24px -16px rgba(0,0,0,.8);
}
.niche::after{
content:""; position:absolute; inset:-1px; border-radius:7px; pointer-events:none;
border:1px solid rgba(var(--shadow-rgb),.12);
box-shadow:0 0 0 1px rgba(255,255,255,.85);
}
[data-theme="dark"] .niche::after{border-color:rgba(255,255,255,.09); box-shadow:0 0 0 1px rgba(0,0,0,.7)}
.niche:hover,.niche:focus-within{
box-shadow:
inset 0 3px 0 rgba(255,255,255,.95),
inset 0 24px 36px -18px rgba(var(--shadow-rgb),.6),
inset 0 -16px 26px -16px rgba(var(--shadow-rgb),.45),
0 1px 0 rgba(255,255,255,.95);
}
/* contact shadow on the floor */
.scene__floor .contact{
position:absolute; top:-16px; height:30px; border-radius:50%;
background:radial-gradient(50% 50% at 50% 50%, rgba(48,40,30,.42), rgba(48,40,30,0) 70%);
filter:blur(3px);
}
/* ---------- 9. The vending machine (realistic shop machine) -------------- */
.machine{
--accent:#9AA0A6;
position:relative; display:flex; flex-direction:column;
width:100%; border-radius:calc(var(--radius,24px) * .40);
background:
linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0) 18%),
repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 1px, rgba(var(--shadow-rgb),.035) 1px 4px),
linear-gradient(178deg, var(--metal-1) 0%, var(--metal-2) 62%, var(--metal-3) 100%);
border:1px solid rgba(var(--shadow-rgb),.20);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset -1px 0 0 rgba(var(--shadow-rgb),.07),
0 20px 34px -20px rgba(var(--shadow-rgb),.55),
0 46px 74px -44px rgba(var(--shadow-rgb),.55);
overflow:hidden;
transition:transform .45s var(--ease), box-shadow .45s var(--ease);
transform:translateZ(0);
}
.niche:hover .machine,.machine:hover{
transform:translateY(-6px);
overflow:visible;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 26px 44px -20px rgba(var(--shadow-rgb),.55),
0 58px 92px -46px rgba(var(--shadow-rgb),.55);
}
.machine__frame{padding:7px 7px 0; display:flex; flex-direction:column; height:100%; gap:5px}
/* backlit brand / ad topper */
.machine__banner{
position:relative; flex:0 0 clamp(54px, 23%, 96px); overflow:hidden; border-radius:7px;
background:#0C0D10;
box-shadow:0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(0,0,0,.55), 0 6px 16px -10px rgba(0,0,0,.7);
}
.machine__banner img,.machine__banner video{width:100%; height:100%; object-fit:cover}
.machine__banner::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.14), transparent 34%, rgba(0,0,0,.34));
}
.banner-logo{
position:absolute; inset:0; margin:auto; z-index:3; display:grid; place-items:center; padding:7px;
}
.banner-logo img{max-height:52px; width:auto; object-fit:contain; filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}
.banner-word{
font-family:var(--font-d); font-weight:800; letter-spacing:.04em; color:#fff;
font-size:clamp(13px,1.5vw,19px); text-shadow:0 3px 14px rgba(0,0,0,.6); text-align:center;
}
.banner-tag{
position:absolute; left:6px; top:6px; z-index:3;
font-size:8.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:rgba(255,255,255,.9); background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.22);
padding:2px 6px; border-radius:4px; backdrop-filter:blur(4px);
}
/* ---- glass door ------------------------------------------------------- */
.machine__door{
position:relative; flex:1 1 auto; min-height:74px; overflow:hidden;
border-radius:8px;
background:linear-gradient(180deg, rgba(236,243,247,.85), rgba(226,233,238,.7));
border:1px solid rgba(var(--shadow-rgb),.16);
box-shadow:
inset 0 2px 10px rgba(var(--shadow-rgb),.16),
inset 0 0 0 3px rgba(255,255,255,.55);
}
[data-theme="dark"] .machine__door{
background:linear-gradient(180deg, rgba(28,34,42,.85), rgba(16,20,26,.78));
box-shadow:inset 0 2px 12px rgba(0,0,0,.7), inset 0 0 0 3px rgba(255,255,255,.06);
}
.machine__interior{
position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
padding:6px 5px 5px;
background:
linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 26%),
radial-gradient(120% 46% at 50% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
linear-gradient(180deg, #F3F5F7 0%, #E9ECEF 58%, #DFE3E7 100%);
}
[data-theme="dark"] .machine__interior{
background:
linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 26%),
radial-gradient(120% 46% at 50% 0%, rgba(220,232,255,.32), rgba(255,255,255,0) 70%),
linear-gradient(180deg, #232833 0%, #1A1E26 58%, #11141A 100%);
}
/* interior LED strip */
.machine__ledbar{
flex:0 0 5px; border-radius:3px; margin:0 1px 4px;
background:linear-gradient(90deg, rgba(255,255,255,.2), #FFFFFF 22%, #FFFFFF 78%, rgba(255,255,255,.2));
box-shadow:0 0 8px rgba(255,255,255,.95), 0 1px 0 rgba(var(--shadow-rgb),.12);
}
[data-theme="dark"] .machine__ledbar{
background:linear-gradient(90deg, rgba(200,225,255,.15), #EAF4FF 22%, #EAF4FF 78%, rgba(200,225,255,.15));
box-shadow:0 0 10px rgba(214,236,255,.8);
}
/* shelves + products */
.shelfgrid{
display:grid; grid-template-columns:repeat(3,1fr); gap:3px; flex:1;
align-content:start; overflow:hidden; min-height:0;
}
.machine:hover .shelfgrid,.niche:hover .shelfgrid{overflow:visible}
.slot{
position:relative; display:flex; flex-direction:column; min-width:0;
border-radius:5px; overflow:hidden; cursor:pointer; padding:0;
background:transparent; border:1px solid rgba(var(--shadow-rgb),.10);
box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
aspect-ratio:9/15;
transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .2s;
}
[data-theme="dark"] .slot{
background:transparent;
border-color:rgba(255,255,255,.10);
box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
/* Slot photo holder: transparent base so transparent product
PNGs sit on the section background; an extremely faint
radial glow keeps a soft merchandise-window shadow. */
.slot__pic{
position:relative; flex:1 1 auto; min-height:0; overflow:hidden; display:block;
background:
radial-gradient(110% 70% at 50% 0%, rgba(var(--shadow-rgb),.04), rgba(var(--shadow-rgb),0) 70%),
linear-gradient(180deg, rgba(var(--shadow-rgb),.04), rgba(var(--shadow-rgb),.02));
}
/* Cut-out product photo: contain so the whole product shows and the shelf
background reads through the transparent background. */
.slot__pic img{width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box; transition:transform .5s var(--ease)}
/* The decorative spiral coil used to sit here, drawn across the bottom of the
slot. With transparent product cut-outs it lay across the product itself, so
it was removed; the product now sits directly on the shelf. */
/* price rail + slot code */
.slot__tag{
flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:3px;
padding:2px 4px; background:linear-gradient(180deg,#FFFFFF,#F0F1F3);
border-top:1px solid rgba(var(--shadow-rgb),.14);
font-family:var(--font-d); line-height:1.1;
min-height:14px;
}
[data-theme="dark"] .slot__tag{background:linear-gradient(180deg,#1D1F24,#14161A); border-top-color:rgba(255,255,255,.12)}
.slot__tag b{
font-size:8px; font-weight:800; letter-spacing:.06em; color:var(--muted); text-transform:uppercase;
}
.slot__tag b{flex:0 0 auto}
.slot__tag em{
font-style:normal; font-size:10px; font-weight:800; color:var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; text-align:right;
}
.slot:hover,.slot:focus-visible{
transform:translateY(-3px) scale(2); z-index:10;
border-color:var(--accent);
box-shadow:0 10px 20px -10px rgba(var(--shadow-rgb),.7), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
overflow:visible;
}
.slot:hover .slot__pic,.machine:hover .slot__pic,.niche:hover .slot__pic{overflow:visible; z-index:10}
.slot:hover .slot__pic img,.machine:hover .slot__pic img,.niche:hover .slot__pic img{
cursor:zoom-in;
}
.slot:hover .slot__tag em{color:var(--brand-ink)}
.slot__name{
flex:0 0 auto;
display:flex; align-items:center; gap:6px;
padding:3px 5px;
background:linear-gradient(180deg,var(--panel-2),var(--panel));
color:var(--ink-2); font-size:10px; font-weight:700; line-height:1.15; letter-spacing:.01em;
border-top:1px solid var(--line-soft);
/* ensure name never overlaps the price tag */
position:relative; z-index:2;
/* truncate long names cleanly */
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
min-height:18px;
}
[data-theme="dark"] .slot__name{
background:linear-gradient(180deg,#14161A,#0F1115);
color:rgba(255,255,255,.92); border-top-color:rgba(255,255,255,.10);
}
.slot:hover .slot__name{color:var(--accent)}
.slot--empty{
background:
repeating-linear-gradient(135deg, rgba(var(--shadow-rgb),.05) 0 8px, rgba(var(--shadow-rgb),.02) 8px 16px);
border-style:dashed;
}
[data-theme="dark"] .slot--empty{
background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 8px, rgba(255,255,255,.02) 8px 16px);
}
/* glass surface: reflections + door edge + handle */
.glass__sheen{
position:absolute; inset:0; z-index:6; pointer-events:none; border-radius:inherit;
background:
linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.30) 40%, rgba(255,255,255,0) 50%),
linear-gradient(112deg, rgba(255,255,255,0) 56%, rgba(255,255,255,.16) 62%, rgba(255,255,255,0) 68%),
linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 22%);
mix-blend-mode:screen; opacity:.55;
}
[data-theme="dark"] .glass__sheen{
background:
linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.12) 40%, rgba(255,255,255,0) 50%),
linear-gradient(112deg, rgba(255,255,255,0) 56%, rgba(255,255,255,.07) 62%, rgba(255,255,255,0) 68%);
mix-blend-mode:screen; opacity:.4;
}
.glass__edge{
position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:inherit;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.7),
inset 0 0 0 3px rgba(var(--shadow-rgb),.14),
inset 0 -14px 22px -18px rgba(var(--shadow-rgb),.6);
}
[data-theme="dark"] .glass__edge{box-shadow:inset 0 0 0 2px rgba(255,255,255,.09), inset 0 -16px 24px -18px rgba(0,0,0,.9)}
.door__handle{
position:absolute; right:3px; top:12%; bottom:12%; width:7px; z-index:8; pointer-events:none;
border-radius:4px;
background:linear-gradient(90deg,#F2F3F5,#C9CDD3 45%,#9BA1A9 60%,#E7E9EC);
box-shadow:0 2px 5px rgba(var(--shadow-rgb),.45), inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="dark"] .door__handle{
background:linear-gradient(90deg,#4A4E56,#2B2E34 45%,#1A1C21 60%,#3C4048);
box-shadow:0 2px 6px rgba(0,0,0,.7);
}
/* ---- control panel: screen, keypad, contactless ------------------------ */
.machine__panel{
flex:0 0 clamp(32px,11.5%,48px); display:flex; align-items:center; gap:6px;
padding:4px 6px; border-radius:6px;
background:linear-gradient(180deg,var(--chrome-3),var(--chrome));
border:1px solid rgba(var(--shadow-rgb),.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 8px -5px rgba(var(--shadow-rgb),.6);
}
.machine__panel .panel__screen{
flex:1 1 auto; min-width:0; height:70%; border-radius:3px; position:relative; overflow:hidden;
background:linear-gradient(180deg,#0A1410,#06100C);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.machine__panel .panel__screen::after{
content:""; position:absolute; left:5px; top:50%; transform:translateY(-50%);
width:58%; height:4px; border-radius:2px;
background:linear-gradient(90deg, var(--accent), rgba(190,255,220,.9));
box-shadow:0 0 8px var(--accent);
animation:screenpulse 3.4s var(--ease) infinite;
}
@keyframes screenpulse{0%,100%{opacity:.6; width:44%}50%{opacity:1; width:66%}}
.machine__panel .panel__keys{
flex:0 0 auto; width:clamp(24px,32%,42px); height:78%; border-radius:4px;
background-color:#15161A;
background-image:radial-gradient(circle at 50% 50%, rgba(255,255,255,.62) 34%, rgba(255,255,255,0) 36%);
background-size:33.33% 25%;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.6);
}
.machine__panel .panel__pay{
flex:0 0 auto; width:clamp(20px,24%,32px); height:78%; border-radius:4px;
display:grid; place-items:center; color:#EDEFF2;
background:linear-gradient(180deg,#2A2C32,#141519);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.machine__panel .panel__pay svg{width:60%; height:60%; opacity:.9}
/* ---- pickup tray ------------------------------------------------------- */
.machine__tray{
flex:0 0 clamp(20px,7%,30px); display:grid; place-items:center; border-radius:5px;
background:linear-gradient(180deg,#1C1E23,#0B0C0F);
border:1px solid rgba(var(--shadow-rgb),.55);
box-shadow:inset 0 4px 8px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.08);
}
.machine__tray .tray__flap{
font-family:var(--font-d); font-size:7.5px; font-weight:800; letter-spacing:.24em;
text-transform:uppercase; color:rgba(255,255,255,.55);
border-bottom:1px dashed rgba(255,255,255,.28); padding-bottom:1px;
}
/* accent LED glow around entire machine cabinet — all 4 sides */
.machine__led{
position:absolute;
inset:-2px;
border-radius:inherit;
pointer-events:none;
z-index:9;
box-shadow:
0 0 8px 2px var(--accent),
0 0 20px 4px color-mix(in srgb, var(--accent) 60%, transparent),
0 0 40px 8px color-mix(in srgb, var(--accent) 25%, transparent);
animation:
led-color-cycle 15s linear infinite,
led-glow-pulse 3s ease-in-out infinite;
}
@keyframes led-color-cycle{
0%,100%{box-shadow:
0 0 8px 2px #ff6b6b,
0 0 22px 5px rgba(255,107,107,.4),
0 0 44px 9px rgba(255,107,107,.15)}
16.66%{box-shadow:
0 0 8px 2px #ffd93d,
0 0 22px 5px rgba(255,217,61,.4),
0 0 44px 9px rgba(255,217,61,.15)}
33.33%{box-shadow:
0 0 8px 2px #6bcb77,
0 0 22px 5px rgba(107,203,119,.4),
0 0 44px 9px rgba(107,203,119,.15)}
50%{box-shadow:
0 0 8px 2px #4d96ff,
0 0 22px 5px rgba(77,150,255,.4),
0 0 44px 9px rgba(77,150,255,.15)}
66.66%{box-shadow:
0 0 8px 2px #9b59b6,
0 0 22px 5px rgba(155,89,182,.4),
0 0 44px 9px rgba(155,89,182,.15)}
83.33%{box-shadow:
0 0 8px 2px #e74c3c,
0 0 22px 5px rgba(231,76,60,.4),
0 0 44px 9px rgba(231,76,60,.15)}
}
@keyframes led-glow-pulse{
0%,100%{opacity:.55}
50%{opacity:1}
}
.no-anim .machine__led{animation:none}
.machine__brandbar{
flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:6px;
font-family:var(--font-d); font-size:8.5px; font-weight:800; letter-spacing:.26em;
text-transform:uppercase; color:rgba(var(--shadow-rgb),.42); padding:5px 0 6px;
}
[data-theme="dark"] .machine__brandbar{color:rgba(255,255,255,.38)}
.machine__brandbar img{height:10px; filter:brightness(0); opacity:.45}
[data-theme="dark"] .machine__brandbar img{filter:brightness(0) invert(1); opacity:.45}
/* hover info plate */
.machine__info{
position:absolute; left:7px; right:7px; bottom:7px; z-index:12;
background:rgba(255,255,255,.97); border:1px solid var(--line); border-radius:11px;
padding:12px 13px; box-shadow:var(--sh-m);
opacity:0; transform:translateY(12px);
transition:opacity .35s var(--ease), transform .35s var(--ease);
}
[data-theme="dark"] .machine__info{background:rgba(16,16,19,.97); border-color:var(--line)}
.niche:hover .machine__info,.niche:focus-within .machine__info{opacity:1; transform:translateY(0)}
.machine__info h4{font-size:15px; margin-bottom:3px}
.machine__info p{font-size:12.5px; color:var(--muted); line-height:1.45}
.machine__info .btn{height:34px; padding:0 14px; font-size:12.5px; margin-top:10px}
/* ---------- 10. Hero ----------------------------------------------------- */
.hero{position:relative; padding:calc(var(--nav-h) + 72px) 0 48px; background:linear-gradient(180deg,var(--wall-0),var(--wall-1))}
.hero__layout{
display:grid; grid-template-columns:380px 1fr; gap:40px;
align-items:start;
}
.hero__sidebar{
position:sticky; top:calc(var(--nav-h) + 28px);
display:flex; flex-direction:column; gap:32px;
padding-top:8px;
}
.hero__content{padding:0}
.hero__content .eyebrow{margin-bottom:14px; font-size:12px; letter-spacing:.12em}
.hero__content .h-display{font-size:clamp(30px,3.4vw,44px); line-height:1.08; margin:0}
.hero__content .lead{margin:16px 0 0; font-size:14px; line-height:1.65; color:var(--ink-2); max-width:360px}
.hero__content .hero__cta{margin-top:24px; gap:10px}
.hero__content .hero__meta{
display:flex; gap:20px; flex-wrap:wrap; margin-top:20px;
font-size:12px; color:var(--muted); font-weight:600;
}
.hero__meta span{display:inline-flex; align-items:center; gap:6px}
.hero__meta i{width:5px; height:5px; border-radius:50%; background:var(--brand); display:inline-block}
.hero__machines{position:relative}
/* Hero with the machine wall switched off — copy and features run full width. */
.hero__layout--solo{grid-template-columns:1fr; gap:0}
.hero__layout--solo .hero__sidebar{position:static; max-width:none}
.hero__layout--solo .hero__content .lead{max-width:720px; font-size:16px}
.hero__layout--solo .hero__content .h-display{font-size:clamp(36px,5vw,64px); max-width:900px}
.hero__layout--solo .hero__features{
display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;
margin-top:40px;
}
/* Feature cards under hero text */
.hero__features{
display:flex; flex-direction:column; gap:14px;
border-top:1px solid var(--line-soft); padding-top:24px;
}
.hero-feature{
display:flex; gap:12px; align-items:flex-start;
padding:12px 14px; border-radius:12px; border:1px solid var(--line-soft);
background:var(--panel); transition:border-color .2s, box-shadow .2s;
}
.hero-feature:hover{border-color:var(--brand); box-shadow:0 4px 12px rgba(var(--shadow-rgb),.06)}
.hero-feature__icon{
width:36px; height:36px; border-radius:10px; flex:none;
background:var(--brand-soft); display:grid; place-items:center;
font-size:18px;
}
.hero-feature h4{font-size:13px; font-weight:700; margin:0 0 2px}
.hero-feature p{font-size:12px; color:var(--muted); margin:0; line-height:1.4}
/* Hero grid — 2 columns of machines */
.hero-grid{
display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
.hero-grid__item{position:relative}
.hero-grid__item .niche{width:100%}
.hero-grid__item .machine{aspect-ratio:8/18}
/* Spotlight above each machine */
.hero-spotlight{
position:absolute; top:-16px; left:50%; transform:translateX(-50%);
width:40px; height:40px; border-radius:50%; z-index:15;
background:radial-gradient(circle at 50% 40%, #FFFFFF 0%, #F0F0F2 60%, #E0E0E4 100%);
box-shadow:
0 0 0 1px rgba(var(--shadow-rgb),.08) inset,
0 2px 4px rgba(var(--shadow-rgb),.12);
}
.hero-spotlight::before{
content:""; position:absolute; inset:3px;
border-radius:50%;
background:radial-gradient(circle at 50% 35%, #FFFFFF 0%, #E8E8EC 60%, #D0D0D6 100%);
box-shadow:0 1px 2px rgba(var(--shadow-rgb),.15) inset;
}
/* Spotlight beam */
.hero-spotlight::after{
content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
width:0; height:0;
border-left:28px solid transparent;
border-right:28px solid transparent;
border-top:120px solid rgba(255,236,196,.12);
pointer-events:none;
filter:blur(4px);
}
[data-theme="dark"] .hero-spotlight{
background:radial-gradient(circle at 50% 40%, #2A2A30 0%, #1A1A1E 60%, #0A0A0D 100%);
box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 2px 4px rgba(0,0,0,.6);
}
[data-theme="dark"] .hero-spotlight::before{
background:radial-gradient(circle at 50% 35%, #3A3A40 0%, #2A2A30 60%, #1A1A1E 100%);
box-shadow:0 1px 2px rgba(0,0,0,.4) inset;
}
[data-theme="dark"] .hero-spotlight::after{border-top-color:rgba(255,236,196,.15)}
/* LED strip on hero machines — color-cycling glow around the machine */
.hero-grid__item .machine__led{
position:absolute; inset:-3px;
border-radius:inherit;
pointer-events:none; z-index:9;
box-shadow:
0 0 8px 2px #ff6b6b,
0 0 22px 5px rgba(255,107,107,.4),
0 0 44px 9px rgba(255,107,107,.15);
animation:
led-color-cycle 15s linear infinite,
led-glow-pulse 3s ease-in-out infinite;
}
.no-anim .hero-grid__item .machine__led{animation:none}
@media(max-width:900px){
.hero__layout{grid-template-columns:1fr; gap:32px}
.hero__sidebar{position:static}
.hero__content{text-align:center}
.hero__content .lead{max-width:none}
.hero__content .hero__cta{justify-content:center}
.hero__content .hero__meta{justify-content:center}
.hero__features{flex-direction:row; flex-wrap:wrap; justify-content:center}
.hero-feature{flex:0 1 calc(50% - 7px)}
.hero-grid{grid-template-columns:repeat(2,1fr); gap:18px}
}
@media(max-width:600px){
.hero-grid{grid-template-columns:1fr; gap:14px}
.hero-feature{flex:0 1 100%}
}
/* aisle / wayfinding label */
.aisle{
position:absolute; left:clamp(14px,3vw,42px); top:50%; transform:translateY(-50%) rotate(-90deg);
transform-origin:left center; font-family:var(--font-d); font-size:10.5px; font-weight:800;
letter-spacing:.3em; text-transform:uppercase; color:var(--muted); opacity:.8; pointer-events:none;
}
/* ---------- 11. Machine wall section ------------------------------------ */
.filters{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:30px}
.wall-rail{
position:relative;
/* The rail is a horizontal carousel at every width: a left-aligned
paging strip on wide screens, a centred single-card snap below
1100px. The prev/next nav buttons page it one card at a time. */
}
.wall-rail__nav{
position:absolute; top:50%; transform:translateY(-50%);
z-index:5;
width:44px; height:44px; border-radius:50%;
background:var(--panel); border:1px solid var(--line-soft);
color:var(--ink-2); font-size:22px; line-height:1; cursor:pointer;
display:grid; place-items:center;
transition:background .2s, border-color .2s, color .2s, transform .2s;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
.wall-rail__nav--prev{left:-4px}
.wall-rail__nav--next{right:-4px}
.wall-rail__nav:hover:not(:disabled){
background:var(--panel-2); border-color:var(--line); color:var(--ink);
}
.wall-rail__nav:disabled{opacity:.4; cursor:default}
.wall-grid{
--wg-card:clamp(260px, 24vw, 320px);
display:flex; gap:26px; flex-wrap:nowrap;
overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory;
padding-bottom:20px;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
overscroll-behavior-x:contain;
min-width:0;
}
.wall-grid .niche{
flex:0 0 var(--wg-card);
width:var(--wg-card); min-width:0;
scroll-snap-align:start; scroll-snap-stop:always;
}
.wall-grid .machine{aspect-ratio:9/26.4}
.wall-grid::-webkit-scrollbar{height:6px}
.wall-grid::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
[data-theme="dark"] .wall-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}
/* Narrow viewports: the carousel switches to a centred single-card
snap so one machine fills the strip with equal peek on both sides.
padding-inline pads half a card on each side so the active card
sits centred in the viewport. */
@media (max-width: 1100px){
.wall-rail__nav{
width:42px; height:42px; font-size:21px;
}
.wall-grid{
--wg-card: clamp(220px, calc(100vw - 80px), 380px);
gap:14px;
scroll-padding-inline:max(20px, calc((100% - var(--wg-card)) / 2));
padding-inline:max(20px, calc((100% - var(--wg-card)) / 2));
background-clip:padding-box;
}
/* Each niche takes the full card-width so all four rows have
a predictable column distribution. */
.wall-grid .niche{
flex:0 0 var(--wg-card);
width:var(--wg-card);
min-width:0;
scroll-snap-align:center; scroll-snap-stop:always;
}
.wall-grid::-webkit-scrollbar{height:6px}
.wall-grid::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
[data-theme="dark"] .wall-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}
}
/* ---------- 12. Product shelf / product experience ---------------------- */
.exhibit{
display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:34px; align-items:stretch;
}
.panel{
background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-l);
box-shadow:var(--sh-m); overflow:hidden;
}
.panel__head{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:16px 20px; border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg,var(--panel),var(--panel-2));
}
.panel__title{display:flex; align-items:center; gap:11px; font-weight:750; font-size:15px}
.panel__title img{height:22px; width:auto}
.panel__body{padding:20px}
.shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:16px}
.pcard{
position:relative; background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-m);
overflow:hidden; cursor:pointer; text-align:left; padding:0; width:100%;
transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s;
}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--sh-m); border-color:var(--line)}
.pcard.is-selected{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft), var(--sh-m)}
.pcard__img{display:block; aspect-ratio:1/1; background:var(--wall-2); overflow:hidden; position:relative}
.pcard__img img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.pcard:hover .pcard__img img{transform:scale(1.06)}
.pcard__badges{position:absolute; left:8px; top:8px; display:flex; gap:5px; flex-wrap:wrap}
.pcard__body{display:block; padding:11px 12px 13px}
.pcard__name{font-size:13px; font-weight:650; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:35px}
.pcard__row{display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:8px}
.pcard__price{font-family:var(--font-d); font-weight:800; font-size:15.5px; letter-spacing:-.02em}
.pcard__stock{font-size:10.5px; font-weight:700; color:#15803D; letter-spacing:.04em; text-transform:uppercase}
.catalog{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:18px}
a.pcard{display:block; text-decoration:none; color:inherit}
a.pcard .badge{background:rgba(255,255,255,.92)}
.detail{display:flex; flex-direction:column; height:100%}
.detail__img{aspect-ratio:4/3; background:var(--wall-2); position:relative; overflow:hidden}
.detail__img img{width:100%; height:100%; object-fit:cover}
.detail__tag{position:absolute; left:14px; top:14px}
.detail__info{padding:22px; display:flex; flex-direction:column; gap:14px; flex:1}
.detail__info h3{font-size:23px}
.detail__price{display:flex; align-items:baseline; gap:12px}
.detail__price b{font-family:var(--font-d); font-size:30px; font-weight:800; letter-spacing:-.02em}
.detail__price s{color:var(--muted); font-size:14px}
.spec{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.spec div{background:var(--panel-2); border:1px solid var(--line-soft); border-radius:9px; padding:10px 12px}
.spec dt{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700}
.spec dd{margin:3px 0 0; font-size:13.5px; font-weight:650}
.detail .btn{width:100%}
/* ---------- 13. Journey (business customer journey) --------------------- */
.journey{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.jcard{
position:relative; background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-l);
padding:18px 16px 16px; box-shadow:var(--sh-s); overflow:hidden;
transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.jcard:hover{transform:translateY(-5px); box-shadow:var(--sh-m)}
.jcard::before{
content:""; position:absolute; left:0; right:0; top:0; height:3px;
background:linear-gradient(90deg,var(--brand),rgba(154,160,166,.15));
transform:scaleX(.24); transform-origin:left; transition:transform .5s var(--ease);
}
.jcard:hover::before{transform:scaleX(1)}
.jcard__n{font-family:var(--font-d); font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--brand-ink)}
.jcard h3{font-size:16px; margin:10px 0 6px}
.jcard p{font-size:13px; color:var(--muted); line-height:1.55}
.jcard .link-arrow{margin-top:12px; font-size:12.5px}
/* ---------- 14. Dashboard preview --------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center}
.dash{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-l); box-shadow:var(--sh-l); overflow:hidden; max-width:100%}
.dash__bar{display:flex; align-items:center; gap:8px; padding:12px 16px; background:linear-gradient(180deg,#FBFAF7,#F5F2EC); border-bottom:1px solid var(--line-soft)}
.dash__dots{display:flex; gap:6px}
.dash__dots i{width:9px; height:9px; border-radius:50%; background:var(--recess-deep); display:block}
.dash__url{
flex:1; height:26px; border-radius:7px; background:var(--panel); border:1px solid var(--line);
display:flex; align-items:center; padding:0 10px; font-size:11.5px; color:var(--muted); gap:7px;
}
.dash__tabs{display:flex; gap:4px; padding:10px 12px 0; border-bottom:1px solid var(--line-soft); overflow-x:auto; overscroll-behavior-x:contain}
.dash__tab{
padding:8px 12px; font-size:12.5px; font-weight:650; color:var(--muted); border-radius:8px 8px 0 0;
border-bottom:2px solid transparent; white-space:nowrap;
}
.dash__tab.is-active{color:var(--ink); border-bottom-color:var(--brand); background:rgba(154,160,166,.05)}
.dash__body{padding:18px}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.kpi{background:#FAF9F6; border:1px solid var(--line-soft); border-radius:11px; padding:12px}
.kpi span{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700}
.kpi b{display:block; font-family:var(--font-d); font-size:22px; font-weight:800; letter-spacing:-.02em; margin-top:5px}
.kpi em{font-style:normal; font-size:11px; font-weight:700; color:#15803D}
.chart{display:flex; align-items:flex-end; gap:6px; height:104px; margin-top:16px; padding-top:8px; border-top:1px dashed var(--line)}
.chart i{
flex:1; border-radius:4px 4px 2px 2px;
background:linear-gradient(180deg, rgba(154,160,166,.85), rgba(154,160,166,.35));
transform-origin:bottom; transform:scaleY(.05); transition:transform 1.1s var(--ease);
}
.is-visible .chart i{transform:scaleY(1)}
.health{margin-top:16px; display:grid; gap:8px}
.health li{
display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600;
background:#FAF9F6; border:1px solid var(--line-soft); border-radius:9px; padding:9px 12px;
}
.health li .tick{
width:18px; height:18px; border-radius:50%; background:rgba(34,197,94,.15); color:#15803D;
display:grid; place-items:center; font-size:11px; flex:none;
}
.dash__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid var(--line-soft); background:#FBFAF7; font-size:12px; color:var(--muted)}
/* ---------- 15. Machine models / styles --------------------------------- */
.styles{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px}
.style-card{
background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-l); padding:20px;
box-shadow:var(--sh-s); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.style-card:hover{transform:translateY(-4px); box-shadow:var(--sh-m)}
.style-card .swatch{height:78px; border-radius:11px; margin-bottom:15px; border:1px solid var(--line-soft); position:relative; overflow:hidden}
.style-card h4{font-size:16.5px; margin-bottom:5px}
.style-card p{font-size:13px; color:var(--muted)}
/* ---------- 16. Plans ---------------------------------------------------- */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; align-items:stretch}
.plan{
position:relative; display:flex; flex-direction:column; background:var(--panel);
border:1px solid var(--line-soft); border-radius:var(--r-l); padding:20px 18px 18px;
box-shadow:var(--sh-s); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.plan:hover{transform:translateY(-5px); box-shadow:var(--sh-m)}
.plan.is-popular{border-color:rgba(154,160,166,.5); box-shadow:0 12px 40px -18px rgba(154,160,166,.45), var(--sh-s)}
.plan__tag{
position:absolute; top:-10px; left:18px; height:21px; padding:0 10px; border-radius:999px;
background:var(--brand); color:#fff; font-size:10px; font-weight:800; letter-spacing:.1em;
text-transform:uppercase; display:grid; place-items:center;
}
.plan h3{font-size:18px}
.plan__desc{font-size:12.5px; color:var(--muted); margin-top:3px}
.plan__price{display:flex; align-items:baseline; gap:6px; margin:16px 0 6px}
.plan__price b{font-family:var(--font-d); font-size:36px; font-weight:800; letter-spacing:-.03em}
.plan__price span{font-size:12.5px; color:var(--muted); font-weight:650}
.plan__note{font-size:11.5px; color:var(--muted); background:var(--panel-2); border:1px solid var(--line-soft); border-radius:9px; padding:8px 10px}
.plan ul{list-style:none; margin:14px 0 18px; padding:0; display:grid; gap:7px}
.plan li{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ink-2)}
.plan li::before{
content:""; width:15px; height:15px; border-radius:50%; flex:none; margin-top:2px;
background:rgba(34,197,94,.15) url("data:image/svg+xml;utf8,") center/8px no-repeat;
}
.plan .btn{margin-top:auto; width:100%; background:linear-gradient(145deg,#0A0A0B 0%,#1A1B20 50%,#0A0A0B 100%) !important; color:#E5E7EB !important; height:44px; border-radius:9999px; font-weight:700; font-size:14px; border:1px solid rgba(255,255,255,.22)}
.plan.is-popular .btn{background:linear-gradient(145deg,#0A0A0B 0%,#1A1B20 50%,#0A0A0B 100%) !important; color:#E5E7EB !important; border:1px solid rgba(255,255,255,.22)}
/* ---------- 17. FAQ ------------------------------------------------------ */
.faq{display:grid; gap:12px}
.qa{
background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-m); overflow:hidden;
box-shadow:var(--sh-s); transition:box-shadow .3s, border-color .3s;
}
.qa[open]{box-shadow:var(--sh-m); border-color:var(--line)}
.qa summary{
list-style:none; cursor:pointer; padding:19px 22px; display:flex; align-items:center; gap:16px;
font-weight:700; font-size:16.5px; font-family:var(--font-d); letter-spacing:-.01em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ico{
margin-left:auto; width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
display:grid; place-items:center; flex:none; transition:transform .35s var(--ease), background .3s;
}
.qa[open] summary .ico{transform:rotate(45deg); background:var(--brand); border-color:var(--brand); color:#fff}
.qa__a{padding:0 22px 20px 22px; color:var(--muted); font-size:15px; line-height:1.68; max-width:900px}
/* ---------- 18. CTA band ------------------------------------------------- */
.cta-band{
position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(38px,5vw,66px);
background:linear-gradient(135deg,#1B1D22 0%,#24272E 55%,#2E3138 100%);
color:#fff; box-shadow:var(--sh-l);
}
.cta-band::after{
content:""; position:absolute; right:-70px; top:-70px; width:340px; height:340px; border-radius:50%;
background:radial-gradient(circle, rgba(154,160,166,.34), rgba(154,160,166,0) 68%);
}
.cta-band h2{max-width:660px; position:relative; z-index:2}
.cta-band p{max-width:560px; color:rgba(255,255,255,.7); margin-top:16px; position:relative; z-index:2}
.cta-band .btn-row{margin-top:30px; position:relative; z-index:2}
.cta-band .btn--ghost{--fg:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.08)}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55)}
/* ---------- 19. Category rail ------------------------------------------- */
.cats{display:flex; flex-wrap:nowrap; overflow-x:auto; gap:10px; overscroll-behavior-x:contain}
.cat{
position:relative; background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-m);
padding:12px 10px 10px; text-align:left; box-shadow:var(--sh-s); overflow:hidden;
transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s;
height:90px; min-width:140px; flex:0 0 auto; display:flex; flex-direction:column; justify-content:center;
}
.cat:hover{transform:translateY(-2px); box-shadow:var(--sh-s)}
.cat[aria-pressed="true"]{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand)}
.cat__ico{
width:28px; height:28px; border-radius:8px; display:grid; place-items:center; margin-bottom:6px;
background:linear-gradient(150deg,#F0F0F2,#E0E0E4); color:var(--brand-ink); border:1px solid rgba(154,160,166,.16);
}
.cat__ico svg{width:14px; height:14px}
.cat b{display:block; font-size:13px; font-weight:750}
.cat span{font-size:10.5px; color:var(--muted)}
/* ---------- 20. Steps / how it works ------------------------------------ */
.steps{display:grid; gap:0; counter-reset:s}
.step{
display:grid; grid-template-columns:64px 1fr auto; gap:24px; align-items:center;
padding:26px 0; border-top:1px solid var(--line-soft);
}
.step:last-child{border-bottom:1px solid var(--line-soft)}
.step__n{
width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
font-family:var(--font-d); font-weight:800; font-size:16px;
background:var(--panel); border:1px solid var(--line); box-shadow:var(--sh-s);
}
.step h3{font-size:21px; margin-bottom:7px}
.step p{color:var(--muted); font-size:15px; max-width:660px}
/* ---------- 21. Video gallery ------------------------------------------ */
.video-stage{
position:relative; border-radius:var(--r-l); overflow:hidden; background:#0C0D10;
box-shadow:var(--sh-l); border:1px solid var(--line);
}
.video-stage video{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9}
.video-stage__play{
position:absolute; inset:0; display:grid; place-items:center; gap:14px;
background:linear-gradient(180deg, rgba(10,11,14,.28), rgba(10,11,14,.55)); border:0; width:100%;
color:#fff; transition:background .3s;
}
.video-stage__play:hover{background:linear-gradient(180deg, rgba(10,11,14,.18), rgba(10,11,14,.5))}
.play-ring{
width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(6px);
box-shadow:0 10px 34px rgba(0,0,0,.4); transition:transform .35s var(--ease);
}
.video-stage__play:hover .play-ring{transform:scale(1.07)}
.play-ring svg{width:26px; height:26px; margin-left:4px}
.video-stage__label{
position:absolute; left:20px; bottom:18px; text-align:left; z-index:3;
}
.video-stage__label b{display:block; font-family:var(--font-d); font-size:17px}
.video-stage__label span{font-size:12.5px; color:rgba(255,255,255,.7)}
.video-frame{margin-inline:auto}
.video-caption{
display:flex; align-items:baseline; justify-content:center; gap:12px; flex-wrap:wrap;
margin:14px 0 0; text-align:center;
}
.video-caption b{font-family:var(--font-d); font-size:15px; color:var(--ink)}
.video-caption span{font-size:12.5px; color:var(--muted)}
/* ---------- default cabinets ------------------------------------------------
Three modern machine shells a merchant can start on. They are genuine shape
differences on top of the merchant's own colours, so the AI designer can
recolour any shell without changing its silhouette.
HALO ONE soft rounded cabinet, full-perimeter light halo
MONOLITH architectural slab, full-bleed glass, one edge light blade
PRISM chamfered corners, two-tone edge that drifts along the frame */
/* ---- Halo One (default) ---- */
.s3--shell-halo .s3__front{border-radius:38px}
.s3--shell-halo .s3__back{border-radius:38px}
.s3--shell-halo .s3__cap{border-radius:20px 20px 0 0; height:calc(var(--s3depth) * .8)}
.s3--shell-halo .s3__strip{inset:10px; border-radius:32px}
.s3--shell-halo .s3__strip-glow{inset:-11px; border-radius:40px; opacity:.55}
.s3--shell-halo .s3__glass{border-radius:26px; margin:16px 16px}
.s3--shell-halo .s3__marquee{border-radius:20px; margin:16px 16px 0}
.s3--shell-halo .s3__panel,
.s3--shell-halo .s3__tray{border-radius:18px}
.s3--shell-halo .s3__bottom{border-radius:10px 10px 18px 18px}
/* ---- Monolith: sharp, full-bleed glass, single light blade ---- */
.s3--shell-monolith .s3__front{border-radius:4px; box-shadow:
inset 0 1px 0 var(--shell-hi), inset 0 -1px 0 var(--shell-lo),
inset 0 0 70px var(--shell-vignette),
0 44px 90px rgba(0,0,0,.45), 0 12px 26px rgba(0,0,0,.3);}
.s3--shell-monolith .s3__back{border-radius:4px}
.s3--shell-monolith .s3__cap{border-radius:2px 2px 0 0; height:calc(var(--s3depth) * .62)}
.s3--shell-monolith .s3__bottom{border-radius:0 0 2px 2px}
/* the frame band collapses; the glass runs edge to edge */
.s3--shell-monolith .s3__marquee{margin:0; border-radius:0; padding:16px 12px;
border-bottom:1px solid var(--shell-line)}
.s3--shell-monolith .s3__glass{margin:0; border-radius:0; padding-top:12px}
.s3--shell-monolith .s3__panel{margin:0 0 10px; border-radius:0}
.s3--shell-monolith .s3__tray{margin:0 12px 12px; border-radius:2px}
/* one vertical light blade instead of a full halo */
.s3--shell-monolith .s3__strip{
inset:6px; border-radius:4px;
-webkit-mask:linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0);
}
.s3--shell-monolith .s3__strip-core,
.s3--shell-monolith .s3__strip-glow em{
padding:4px; background:linear-gradient(180deg, var(--led-1), var(--led-2));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
}
.s3--shell-monolith .s3__strip-glow{inset:-8px; border-radius:12px; opacity:.6}
/* ---- Prism: chamfered corners, drifting two-tone edge ---- */
.s3--shell-prism .s3__front{
border-radius:20px;
clip-path:polygon(34px 0, calc(100% - 34px) 0, 100% 34px, 100% calc(100% - 34px), calc(100% - 34px) 100%, 34px 100%, 0 calc(100% - 34px), 0 34px);
}
.s3--shell-prism .s3__back{border-radius:20px}
.s3--shell-prism .s3__cap{border-radius:10px 10px 0 0; height:calc(var(--s3depth) * .9)}
.s3--shell-prism .s3__strip{inset:8px; border-radius:16px}
.s3--shell-prism .s3__strip-glow{inset:-10px; border-radius:28px; opacity:.6}
.s3--shell-prism .s3__strip-core,
.s3--shell-prism .s3__strip-glow em{
background:linear-gradient(115deg, var(--led-1) 0%, var(--led-2) 34%, var(--led-1) 68%, var(--led-2) 100%);
background-size:220% 100%;
animation:s3drift 7s linear infinite;
}
.s3--shell-prism .s3__glass{border-radius:18px; margin:14px}
.s3--shell-prism .s3__marquee{border-radius:16px; margin:14px 14px 0; clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px)}
.s3--shell-prism .s3__panel{border-radius:10px}
.s3--shell-prism .s3__tray{border-radius:10px}
.s3--shell-prism .s3__slot{border-radius:6px}
/* ---- Atlas Wide: landscape panoramic glass, under-shelf wash ----
Wider than the others, so the whole cabinet is slightly letterboxed and the
light bar sits under the glass rather than around it. */
.s3--shell-atlas .s3__front{border-radius:22px 22px 14px 14px}
.s3--shell-atlas .s3__back{border-radius:22px 22px 14px 14px}
.s3--shell-atlas .s3__cap{border-radius:14px 14px 0 0; height:calc(var(--s3depth) * .5)}
.s3--shell-atlas .s3__bottom{border-radius:8px 8px 14px 14px}
.s3--shell-atlas .s3__glass{margin:12px; border-radius:14px}
.s3--shell-atlas .s3__marquee{border-radius:12px; margin:12px 12px 0}
.s3--shell-atlas .s3__panel,
.s3--shell-atlas .s3__tray{border-radius:12px}
/* a wide cabinet gets wider product faces */
.s3--shell-atlas .s3__slot{border-radius:4px}
/* the perimeter strip is suppressed and the glass carries the glow instead, so
the machine reads as one panoramic bay rather than a lit picture frame */
.s3--shell-atlas .s3__strip{inset:0; border-radius:22px; -webkit-mask:none; mask:none; opacity:.28}
.s3--shell-atlas .s3__strip-glow{inset:0; border-radius:22px; opacity:.35}
.s3--shell-atlas .s3__strip-core,
.s3--shell-atlas .s3__strip-glow em{
background:linear-gradient(180deg, transparent 52%, var(--led-1) 78%, var(--led-2) 100%);
}
/* ---- Vault: slim, secure, single-column door ---- */
.s3--shell-vault .s3__front{border-radius:10px; box-shadow:
inset 0 1px 0 var(--shell-hi), inset 0 -2px 0 var(--shell-lo),
inset 0 0 90px var(--shell-vignette),
0 44px 90px rgba(0,0,0,.5), 0 12px 26px rgba(0,0,0,.34)}
.s3--shell-vault .s3__back{border-radius:10px}
.s3--shell-vault .s3__cap{border-radius:6px 6px 0 0; height:calc(var(--s3depth) * .7)}
.s3--shell-vault .s3__bottom{border-radius:0 0 6px 6px}
.s3--shell-vault .s3__glass{margin:18px 16px; border-radius:8px; padding-top:10px}
.s3--shell-vault .s3__marquee{border-radius:8px; margin:16px 16px 0}
.s3--shell-vault .s3__panel{border-radius:6px; margin:0 16px 10px}
.s3--shell-vault .s3__tray{border-radius:6px; margin:0 14px 14px}
.s3--shell-vault .s3__slot{border-radius:3px}
/* the keypad column is locked: a solid inset bar reads as a secure cabinet */
.s3--shell-vault .s3__panel{box-shadow:inset 0 0 0 1px var(--shell-line), inset 0 0 22px rgba(0,0,0,.4)}
/* warm interior glow from within the tray area rather than around the frame */
.s3--shell-vault .s3__strip{inset:12px; border-radius:8px}
.s3--shell-vault .s3__strip-glow{inset:-6px; border-radius:14px; opacity:.5}
.s3--shell-vault .s3__strip-core,
.s3--shell-vault .s3__strip-glow em{
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--led-1) 88%, var(--led-2) 100%);
}
/* ---------- merchant artwork on the cabinet front ------------------------
design.artwork = { url, fit, positionX, positionY, scale, opacity }.
Plain CSS rendering of a merchant's own image — no image generation, no AI,
no round trip. The artwork sits behind the marquee/glass so the machine still
reads as a machine, and sits above the cabinet colour so it is visible. */
.s3__artwork{
position:absolute; inset:0; z-index:0;
pointer-events:none;
opacity:calc(var(--artwork-opacity, 100) / 100);
background-repeat:no-repeat;
background-position:calc(50% + var(--artwork-x, 0) * 1%) calc(50% + var(--artwork-y, 0) * 1%);
background-size:var(--artwork-size, cover);
transform:scale(var(--artwork-scale, 1));
transform-origin:center;
border-radius:inherit;
-webkit-mask-image:linear-gradient(#000 0 0); mask-image:linear-gradient(#000 0 0);
}
.s3__artwork--contain{--artwork-size:contain}
.s3__artwork--stretch{--artwork-size:100% 100%}
/* A soft scrim keeps white product text legible over busy artwork. */
.s3__front > .s3__artwork-scrim{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, var(--shell-vignette) 0%, transparent 34%, transparent 66%, var(--shell-vignette) 100%);
opacity:.5;
}
/* Push the cabinet's own chrome in front of the artwork layer. These are the
flex children of .s3__front in the CSS branch.
`.s3__face` is deliberately NOT in this list. It is the photo branch, which
is absolutely positioned to fill the front face — this selector is more
specific than `.s3__face` itself, so including it would silently turn the
photo into an in-flow element. It already sits above the artwork on its own
(z-index:1 against the artwork's 0, and later in the DOM than the scrim). */
.s3__front > .s3__marquee,
.s3__front > .s3__glass,
.s3__front > .s3__panel,
.s3__front > .s3__tray,
.s3__front > .s3__brandbar{position:relative; z-index:2}
/* ---------- 22. Forms ---------------------------------------------------- */
.form{display:grid; gap:16px}
.field{display:grid; gap:7px}
.field label{font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--ink-2)}
.field input,.field textarea,.field select{
width:100%; padding:13px 15px; border-radius:11px; border:1px solid var(--line);
background:var(--panel); font:inherit; font-size:15px; color:var(--ink);
transition:border-color .2s, box-shadow .2s;
}
.field textarea{min-height:132px; resize:vertical}
/* The old rule set outline:none and drew a 3px ring in --brand-soft,
rgba(154,160,166,.15). Blended over the dark wall that is about 1.1:1 —
keyboard users got no indication of where they were. A visible outline plus
a solid ring at full strength, instead. */
.field input:focus,.field textarea:focus,.field select:focus{
outline:2px solid var(--focus-ring); outline-offset:1px;
border-color:var(--focus-ring); box-shadow:0 0 0 4px var(--focus-halo);
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-note{font-size:12.5px; color:var(--muted)}
.form-ok{
display:none; align-items:center; gap:10px; padding:14px 16px; border-radius:11px;
background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); color:#15803D; font-weight:650; font-size:14.5px;
}
.form-ok.is-on{display:flex}
/* ---------- 23. Footer --------------------------------------------------- */
.footer{background:var(--wall-0); border-top:1px solid var(--line-soft); padding:64px 0 30px; margin-top:20px}
.footer__grid{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:34px}
.footer__brand p{font-size:14px; color:var(--muted); margin-top:16px; max-width:300px}
.footer h5{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 15px; font-weight:800}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer a{font-size:14.5px; color:var(--ink-2); transition:color .2s}
.footer a:hover{color:var(--brand-ink)}
.footer__bottom{
margin-top:46px; padding-top:22px; border-top:1px solid var(--line-soft);
display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
font-size:13px; color:var(--muted);
}
.lang{display:inline-flex; align-items:center; gap:8px; font-weight:650}
/* ---------- 24. Utility -------------------------------------------------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.grid-4 article.card{transition:transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease)}
.grid-4 article.card img{transition:transform .4s var(--ease, ease)}
.grid-4 article.card:hover{transform:perspective(900px) rotateX(3deg) rotateY(-5deg) translateY(-6px); box-shadow:0 22px 44px rgba(0,0,0,.32)}
.grid-4 article.card:hover img{transform:scale(1.06)}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid-4{grid-template-columns:1fr 1fr; gap:14px}}
.card{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-l); padding:24px; box-shadow:var(--sh-s)}
.divider{height:1px; background:var(--line-soft); margin:0}
.stat{display:flex; gap:34px; flex-wrap:wrap; margin-top:30px}
.stat b{display:block; font-family:var(--font-d); font-size:34px; font-weight:800; letter-spacing:-.03em}
.stat span{font-size:13px; color:var(--muted); font-weight:600}
.notice{
background:var(--panel-2); border:1px solid rgba(201,162,39,.34); border-radius:11px;
padding:13px 16px; font-size:13.5px; color:#7A5B10; display:flex; gap:10px; align-items:flex-start;
}
.notice b{color:#5E4508}
/* reveal on scroll */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.no-anim .reveal,.no-anim .reveal[data-d]{opacity:1 !important; transform:none !important; transition:none !important}
.no-anim .machine__led{animation:none}
.js .reveal.is-visible{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
/* ---------- 25. Responsive ---------------------------------------------- */
.split > *,.grid-2 > *,.grid-3 > *,.exhibit > *{min-width:0}
@media (max-width:1340px){
.nav__in{gap:16px}
.nav__links{gap:0; margin-left:0}
.nav__link{padding:9px 9px; font-size:15px}
.nav__login{padding:9px 8px}
}
@media (max-width:1080px){
.footer__grid{grid-template-columns:repeat(4,1fr)}
.footer__brand{grid-column:1/-1}
.exhibit{grid-template-columns:1fr}
.kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1240px){
.nav__links,.nav__login,.nav__auth-combo{display:none}
.nav__burger{display:grid}
}
@media (max-width:900px){
:root{--nav-h:64px}
.nav .wrap{width:min(1330px, 100% - 40px)}
.nav__links,.nav__login{display:none}
.nav__right .btn--brand{display:none}
.nav__burger{display:grid}
.section{padding:66px 0}
.machine{max-width:100%}
.split,.grid-2,.grid-3{grid-template-columns:1fr}
.mv__layout{grid-template-columns:1fr; gap:36px}
.step{grid-template-columns:52px 1fr; gap:16px}
.step .btn{grid-column:2; justify-self:start}
.form-row{grid-template-columns:1fr}
.footer__grid{grid-template-columns:1fr 1fr}
.scene__wall{padding:34px 0 10px}
.scene__ceiling{height:54px}
.scene__floor{height:74px}
.wall-row{gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; justify-content:flex-start;
padding-inline:20px; margin-inline:-22px; padding-bottom:12px; overscroll-behavior-x:contain}
.wall-row .niche{scroll-snap-align:center; width:clamp(132px,42vw,178px)}
.aisle{display:none}
.hero{padding-top:86px}
.machine__info{position:static; opacity:1; transform:none; margin-top:10px; box-shadow:none; background:rgba(255,255,255,.7)}
}
@media (max-width:640px){
.wrap{width:min(1240px,100% - 32px)}
.h-display{font-size:clamp(33px,9vw,44px)}
.hero__cta .btn{width:100%}
.hero__meta{gap:14px; font-size:12px}
.shelf{grid-template-columns:repeat(2,1fr)}
.catalog{grid-template-columns:repeat(2,1fr); gap:14px}
.footer{padding:44px 0 26px}
.footer__grid{grid-template-columns:1fr 1fr; gap:26px 18px}
.footer__bottom{margin-top:32px; justify-content:center; text-align:center}
.plan__price b{font-size:38px}
.spec{grid-template-columns:1fr}
.cta-band{padding:32px 24px}
.btn{height:48px; padding:0 22px}
.machine__frame{gap:4px; padding:6px 6px 0}
.machine__banner{flex-basis:clamp(46px,23%,74px)}
.machine__door{min-height:64px}
.shelfgrid{gap:3px}
.slot__tag b{font-size:7px}
.slot__tag em{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
html{scroll-behavior:auto}
.reveal{opacity:1; transform:none}
}
/* ---------- 26. Theme — jet black chrome (both themes) ------------------- */
:root{
--nav-bg:#0A0A0B;
--nav-ink:#FFFFFF;
--nav-ink-2:rgba(255,255,255,.74);
--nav-hover:rgba(255,255,255,.10);
--nav-line:rgba(255,255,255,.14);
--footer-ink:#F5F5F6;
--footer-ink-2:rgba(255,255,255,.66);
}
[data-theme="dark"]{ --nav-bg:#000000; --mach-ink:rgba(255,255,255,.74) }
/* nav = jet black bar */
.nav{
background:var(--nav-bg);
backdrop-filter:saturate(1.3) blur(14px);
border-bottom:1px solid var(--nav-line);
}
.nav.is-stuck{
border-bottom-color:var(--nav-line);
box-shadow:0 14px 34px -26px rgba(0,0,0,.9);
}
.nav .brand__mark{background:#FFFFFF}
.nav .brand__mark img{filter:none}
.nav .brand__word{filter:brightness(0) invert(1); opacity:.95}
.nav img[src*="logo-new"],.nav .brand__logo{width:auto; height:clamp(25px,2.6vw,37px); object-fit:contain}
.nav .nav__link{color:var(--nav-ink-2)}
.nav .nav__link:hover{color:#FFFFFF; background:var(--nav-hover)}
.nav .nav__link.is-active{color:#FFFFFF}
.nav .nav__link.is-active::after{background:var(--brand)}
.nav .nav__login{color:var(--nav-ink-2)}
.nav .nav__login:hover{background:var(--nav-hover); color:#FFFFFF}
.nav__burger{background:transparent; border-color:var(--nav-line)}
.nav__burger span,.nav__burger span::before,.nav__burger span::after{background:#FFFFFF}
.nav__burger span::before,.nav__burger span::after{background:#FFFFFF}
/* theme switch */
.nav__theme{
width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none;
background:transparent; border:1px solid var(--nav-line); color:#FFFFFF;
transition:background .2s, border-color .2s;
}
.nav__theme:hover{background:var(--nav-hover)}
.nav__theme svg{width:18px; height:18px}
.nav__theme .ico-sun{display:none}
[data-theme="dark"] .nav__theme .ico-sun{display:block}
[data-theme="dark"] .nav__theme .ico-moon{display:none}
/* mobile menu on chrome */
.mobile-menu{background:var(--nav-bg); color:#FFFFFF; border-bottom-color:var(--nav-line)}
.mobile-menu a{color:rgba(255,255,255,.9); border-bottom-color:rgba(255,255,255,.10)}
.mobile-menu a:hover{color:#fff}
/* footer = jet black */
.footer{
background:var(--chrome); color:var(--footer-ink);
border-top:1px solid rgba(255,255,255,.10);
}
.footer h5{color:var(--footer-ink-2)}
.footer a{color:var(--footer-ink-2)}
.footer a:hover{color:#FFFFFF}
.footer__brand p{color:var(--footer-ink-2)}
.footer__bottom{border-top-color:rgba(255,255,255,.10); color:var(--footer-ink-2)}
.footer .brand img{width:auto; height:clamp(30px,3.1vw,44px); object-fit:contain}
.footer .lang{color:var(--footer-ink-2)}
/* cta band = true jet black */
.cta-band{background:linear-gradient(135deg,#0A0A0B 0%,#141417 55%,#232429 100%); color:#fff}
[data-theme="dark"] .cta-band{background:linear-gradient(135deg,#000 0%,#0C0C0F 55%,#1A1B20 100%)}
/* page backgrounds stay white/true black */
body{background:var(--wall-1)}
::selection{background:rgba(154,160,166,.22); color:var(--ink)}
/* ---------- 27. Dark theme component overrides --------------------------- */
[data-theme="dark"] .panel__head{background:linear-gradient(180deg,var(--panel),var(--panel-2)); border-bottom-color:var(--line-soft)}
[data-theme="dark"] .badge--live{background:rgba(74,222,128,.14); border-color:rgba(74,222,128,.34); color:#86EFAC}
[data-theme="dark"] .pcard__stock,[data-theme="dark"] .kpi em,[data-theme="dark"] .form-ok{color:#86EFAC}
[data-theme="dark"] .form-ok{background:rgba(74,222,128,.12); border-color:rgba(74,222,128,.3)}
[data-theme="dark"] .plan li::before{
background:rgba(74,222,128,.16) url("data:image/svg+xml;utf8,") center/9px no-repeat;
}
[data-theme="dark"] .notice{color:#F3E7B8}
[data-theme="dark"] .notice b{color:#FBEFC4}
[data-theme="dark"] .scene{
background:
radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%),
linear-gradient(180deg, var(--wall-0) 0%, var(--wall-1) 55%, var(--wall-2) 100%);
}
[data-theme="dark"] .scene__ceiling{background:linear-gradient(180deg,#141417,#0C0C0E); box-shadow:0 10px 26px -18px rgba(0,0,0,.9)}
[data-theme="dark"] .scene__floor::before{
background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 120px, rgba(255,255,255,.16) 120px 121px);
opacity:.9;
}
[data-theme="dark"] .scene__floor::after{background:linear-gradient(180deg, rgba(0,0,0,.5), transparent)}
[data-theme="dark"] .baseboard{
background:linear-gradient(180deg,#1B1B1F,#0B0B0D);
border-top-color:rgba(255,255,255,.10);
box-shadow:0 2px 6px rgba(0,0,0,.7);
}
[data-theme="dark"] .light{
background:radial-gradient(circle at 50% 40%, #2A2A30 0%, #1A1A1E 60%, #0A0A0D 100%);
box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 2px 4px rgba(0,0,0,.6);
}
[data-theme="dark"] .light::before{
background:radial-gradient(circle at 50% 35%, #3A3A40 0%, #2A2A30 60%, #1A1A1E 100%);
box-shadow:0 1px 2px rgba(0,0,0,.4) inset;
}
[data-theme="dark"] .light::after{border-top-color:rgba(255,236,196,.12)}
[data-theme="dark"] .light-spot{background:radial-gradient(ellipse at 50% 50%, rgba(255,214,120,.3) 0%, rgba(255,214,120,0) 70%)}
[data-theme="dark"] .light-glow{background:radial-gradient(circle, rgba(255,236,196,.4) 0%, transparent 70%)}
[data-theme="dark"] .baseboard{background:linear-gradient(180deg,#1A1A1E,#0B0B0D); border-top-color:rgba(255,255,255,.08); box-shadow:0 2px 6px rgba(0,0,0,.6)}
[data-theme="dark"] .machine{
background:
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 18%),
repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.25) 1px 4px),
linear-gradient(178deg, #2A2A30 0%, #1A1A1F 62%, #0D0D10 100%);
border-color:rgba(255,255,255,.12);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
0 22px 38px -20px rgba(0,0,0,.9),
0 50px 80px -44px rgba(0,0,0,.9);
}
[data-theme="dark"] .niche:hover .machine,[data-theme="dark"] .machine:hover{
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 28px 46px -20px rgba(0,0,0,.95), 0 60px 96px -46px rgba(0,0,0,.9);
}
[data-theme="dark"] .slot__name{background:rgba(250,250,252,.95); color:#0A0A0B}
[data-theme="dark"] .machine__info{color:var(--ink)}
/* Seasonal skins paint this in — hidden until one is active. */
.machine__flag{display:none; width:20px; height:14px; border-radius:2px; flex:none; align-self:center}
.machine__brandline{
display:flex; align-items:center; justify-content:space-between; gap:8px;
padding:0 2px; font-size:11.5px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--mach-ink);
}
[data-theme="dark"] .machine__panel{border-color:rgba(255,255,255,.10)}
[data-theme="dark"] .style-card,[data-theme="dark"] .cat,[data-theme="dark"] .chip{background:var(--panel)}
[data-theme="dark"] .cat[aria-pressed="true"],[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--chrome-3); color:#fff; border-color:transparent}
[data-theme="dark"] .dash__bar{background:linear-gradient(90deg,var(--brand),#B8BABE)}
[data-theme="dark"] .scrollbar-thumb::-webkit-scrollbar-thumb,
[data-theme="dark"] .wall-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}
/* theme flash guard */
html[data-theme="dark"]{color-scheme:dark}
/* ---------- 28. Segmented toggle ---------------------------------------- */
.segmented-toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg-btn{padding:8px 16px;font-size:13px;font-weight:600;border:none;background:transparent;color:var(--ink-2);cursor:pointer;transition:all .2s}
.seg-btn.active{background:var(--ink);color:#fff}
/* ---------- 29. Metallic grey + animated white shadow ------------------- */
@keyframes metallicWhiteShadow{
0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.7), 0 0 20px rgba(255,255,255,0.3)}
50%{box-shadow:0 0 0 4px rgba(255,255,255,0.4), 0 0 30px rgba(255,255,255,0.5)}
}
/* Header fix — ensure fully visible, no cropping (height follows --nav-h) */
.nav{
position:sticky !important; top:0 !important; left:0 !important; right:0 !important;
z-index:1000 !important; height:var(--nav-h) !important;
display:flex !important; align-items:center !important;
background:rgba(8,8,8,0.9) !important;
backdrop-filter:blur(16px) !important;
-webkit-backdrop-filter:blur(16px) !important;
}
/* Metallic grey for all brand buttons, badges, tags.
Same contrast fix as the base rule: the gradient must not collapse into the
wall behind it, and the 1px border has to clear 3:1. */
.btn--brand{
background:linear-gradient(145deg,#2A2A31 0%,#4A4B55 50%,#23232A 100%) !important;
color:#F5F5F6 !important; border:1px solid var(--btn-edge) !important;
animation:metallicWhiteShadow 2.5s infinite !important;
}
.btn--brand:hover{
box-shadow:0 0 0 4px rgba(154,160,166,0.25), 0 12px 26px rgba(154,160,166,0.34) !important;
}
.badge--brand{
background:rgba(154,160,166,.15) !important;
border-color:rgba(154,160,166,.3) !important;
color:#E5E7EB !important;
}
.plan__tag{
background:linear-gradient(145deg,#9AA0A6,#B8BABE) !important;
color:#0A0A0B !important;
}
.plan.is-popular{
border-color:rgba(154,160,166,.5) !important;
box-shadow:0 12px 40px -18px rgba(154,160,166,.45) !important;
}
.plan.is-popular .plan__tag{
background:linear-gradient(145deg,#9AA0A6,#B8BABE) !important;
color:#0A0A0B !important;
}
.nav__link.is-active::after{
background:linear-gradient(145deg,#9AA0A6,#B8BABE) !important;
}
.chip[aria-pressed="true"]{
background:linear-gradient(145deg,#9AA0A6,#B8BABE) !important;
color:#0A0A0B !important;
}
.cat[aria-pressed="true"]{
border-color:#9AA0A6 !important;
box-shadow:0 0 0 1px #9AA0A6 !important;
}
.banner-tag{
background:rgba(154,160,166,.5) !important;
border-color:rgba(154,160,166,.3) !important;
}
.tray__flap{
background:linear-gradient(145deg,#9AA0A6,#B8BABE) !important;
-webkit-background-clip:text !important;
-webkit-text-fill-color:transparent !important;
}
.panel__screen::after{
background:linear-gradient(90deg,#9AA0A6,rgba(190,255,220,.9)) !important;
box-shadow:0 0 8px #9AA0A6 !important;
}
.cta-band::after{
background:radial-gradient(circle, rgba(154,160,166,.34), rgba(154,160,166,0) 68%) !important;
}
.hero__meta i{
background:#9AA0A6 !important;
}
html:not([data-theme="dark"]){color-scheme:light}
/* ============================================================================
26. IMMERSIVE 3D HERO + COMMERCE (hero_3d / shop_grid / merchant_value,
cart drawer, quick view, checkout)
========================================================================== */
.hero3d{position:relative; overflow:hidden; padding:52px 0 30px}
.hero3d::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(52% 44% at 74% 42%, rgba(154,160,166,.16), transparent 70%),
radial-gradient(40% 36% at 16% 20%, rgba(154,160,166,.08), transparent 72%);
}
.hero3d__layout{
position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1.1fr);
gap:52px; align-items:flex-start;
}
.hero3d__copy .eyebrow{margin-bottom:16px}
.hero3d__copy .lead{margin-top:18px; max-width:520px}
.hero3d__cta{margin-top:30px}
.hero3d__chips{display:flex; flex-wrap:wrap; gap:9px 22px; margin-top:26px}
.hero3d__chips span{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink-2)}
.hero3d__chips i{width:7px; height:7px; border-radius:50%; background:linear-gradient(145deg,#9AA0A6,#C0C2C5); box-shadow:0 0 0 3px var(--brand-soft)}
.hero3d__stage{display:flex; justify-content:center; align-items:center; min-width:0; min-height:520px}
/* Hero futuristic headline + typewriter.
The headline uses Orbitron (futuristic) on a unicode monospace
caret for the typewriter effect. Each character inside
`.hero__typewriter` is animated in via JS with per-letter
reveal; the "rainbow" variant paints the chrome + amber-glow
treatment of the Vendifys logo instead of a colour cycle. */
.hero__h1{
font-family:"Orbitron", "Manrope", "Manrope-fallback", ui-sans-serif, system-ui, sans-serif;
letter-spacing:.01em;
}
.hero__typewriter{
display:inline-block; position:relative;
font-family:inherit; font-weight:800; letter-spacing:.02em;
white-space:nowrap; min-height:1em;
}
.hero__typewriter[data-color="rainbow"]{
background:linear-gradient(105deg,#FFFEFB 0%,#E4E9EF 15%,#98A0AC 30%,#F9FAFC 43%,#5C6570 56%,#E2E7ED 70%,#A9B0BB 84%,#FDFEFE 100%);
background-size:260% 100%;
background-position:40% 50%;
-webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent;
animation:chromeSweep 6s ease-in-out infinite alternate;
filter:drop-shadow(0 1px 4px rgba(16,20,26,.35)) drop-shadow(0 0 16px rgba(255,174,70,.42)) drop-shadow(0 0 44px rgba(255,146,40,.22));
}
.hero__typewriter[data-color="rainbow"] .twcaret{display:inline-block; background:#F2A33E}
.hero__typewriter[data-color="rainbow"] span{display:inline}
.hero__typewriter[data-color="plain"] span{display:inline}
.hero__typewriter .twchar{
display:inline-block; opacity:0; transform:translateY(.06em);
animation:twchar .35s ease forwards;
}
.hero__typewriter .twcaret{
display:inline-block; width:.55ch; height:1em;
vertical-align:-.10em; background:currentColor;
color:inherit;
margin-left:.06em;
animation:twcursor .9s steps(2,end) infinite;
}
[data-typewriter-root].is-typed{display:none}
[data-typewriter-root].is-restored{display:inline-block}
.hero__typewriter.is-empty::before{
content:"\00a0";
visibility:visible;
}
@keyframes twchar{ to{opacity:1; transform:translateY(0)} }
@keyframes twcursor{ 50%{opacity:0} }
@keyframes chromeSweep{ from{background-position:0% 50%} to{background-position:100% 50%} }
@media (prefers-reduced-motion: reduce){
.hero__typewriter .twchar{animation-duration:.001ms}
.hero__typewriter .twcaret, .hero__typewriter[data-color="rainbow"]{animation:none}
}
/* ---------- the 3D machine ------------------------------------------------ */
.s3{position:relative; width:100%; max-width:520px; margin-inline:auto; text-align:center; --s3depth:150px}
.s3__room{position:relative; perspective:1400px; perspective-origin:50% 42%; padding:14px 0 4px; touch-action:pan-y}
.s3__rig{
position:relative; width:326px; height:570px; margin-inline:auto;
transform-style:preserve-3d; transform:rotateX(-4deg) rotateY(-16deg);
will-change:transform;
}
.s3.is-dragging .s3__rig{cursor:grabbing}
.s3__room{cursor:grab}
.s3.is-dragging .s3__room{cursor:grabbing}
.s3__body{
position:absolute; inset:0; transform-style:preserve-3d;
animation:s3float 7s ease-in-out infinite;
}
@keyframes s3float{0%,100%{translate:0 0}50%{translate:0 -9px}}
/* LED strip frame — runs in the merchant's accent colour.
The old hardcoded 8-colour rainbow + continuous hue-rotate is gone: it made
a requested "black light" impossible, so the band now follows --led-1/2. */
.s3__strip{position:absolute; inset:7px; border-radius:19px; z-index:6; pointer-events:none; transform:translateZ(47px)}
.s3__strip-core,.s3__strip-glow em{
position:absolute; inset:0; border-radius:inherit; padding:3px;
background:linear-gradient(120deg, var(--led-1), var(--led-2) 55%, var(--led-1));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite:exclude;
}
.s3__strip-core{filter:saturate(1.05) brightness(1.02)}
.s3__strip-glow{position:absolute; inset:-9px; border-radius:28px; filter:blur(11px) saturate(1.25); opacity:.75; background:var(--led-halo); animation:s3stripglow 3.6s ease-in-out infinite}
.s3__strip-glow em{padding:7px}
@keyframes s3hue{to{filter:hue-rotate(360deg)}}
.no-anim .s3__strip,.no-anim .s3__led{animation:none}
.s3--static .s3__room{cursor:default}
/* box faces — front proud, sides + cap extending back for real depth
Every value below is a token. applyMachineTheme() in site.js overwrites the
whole set from the merchant's AI design; these are only the dark fallback. */
.s3{
--machine-body:#2B2E34;--machine-trim:#14161A;--machine-accent:#9AA0A6;
--slot-cols:3;--slot-bg:#101216;--machine-material:metal;
--machine-themed:0;--machine-gloss:.55;
--shell-top:#2B2E34;--shell-bottom:#202327;--shell-side:#1C1F24;
--shell-cap:#31343B;--shell-back:#17191E;--shell-base:#0A0B0E;
--shell-line:rgba(154,160,166,.35);--shell-hi:rgba(255,255,255,.30);
--shell-lo:rgba(0,0,0,.50);--shell-vignette:rgba(0,0,0,.42);
--marquee-a:#0B0B0D;--marquee-b:#16171B;--marquee-ink:#EDEFF2;--marquee-dot:#7DE0A8;
--panel-a:#26272C;--panel-b:#121317;--tray-a:#0A0B0E;--tray-b:#14151A;
--flap-a:#2B2D33;--flap-b:#17181D;--key-a:#3A3C42;--key-b:#202227;
--back-plate-a:#C9CDD3;--back-plate-b:#9DA3AB;
--glass-a:#101318;--glass-b:#0A0C10;--glass-c:#0E1116;
--slot-face:rgba(255,255,255,.05);--slot-line:rgba(255,255,255,.10);
--slot-hover-bg:rgba(255,255,255,.14);--slot-hover-line:rgba(154,160,166,.65);
--slot-shadow:0 8px 22px rgba(0,0,0,.45);
--slot-tag-a:#1B1D22;--slot-tag-b:#121317;--slot-tag-line:rgba(255,255,255,.12);
--slot-tag-code:#9CA3AF;--slot-tag-ink:#F4F4F5;
--slot-name:#F4F4F5;--slot-name-shadow:0 1px 2px rgba(0,0,0,.7);
--on-body:#EDEFF2;--on-body-dim:rgba(255,255,255,.34);--on-body-glow:rgba(154,160,166,.80);
--led-1:#9AA0A6;--led-2:#D6D9DE;--led-halo:rgba(154,160,166,.28);
--screen-ink:#4ADE80;--screen-bg:#04120B;
}
.s3__front{
position:absolute; inset:0; transform:translateZ(46px);
background:
linear-gradient(115deg, rgba(255,255,255,0) 13%, var(--shell-hi) 25%, rgba(255,255,255,.02) 35%, rgba(255,255,255,0) 43%),
linear-gradient(115deg, rgba(255,255,255,0) 57%, rgba(255,255,255,.06) 65%, rgba(255,255,255,0) 72%),
linear-gradient(168deg, var(--shell-top) 0%, var(--machine-body) 38%, var(--machine-body) 74%, var(--shell-bottom) 100%);
border:1px solid var(--shell-line);
border-radius:26px;
box-shadow:
inset 0 1px 0 var(--shell-hi), inset 0 -1px 0 var(--shell-lo),
inset 0 0 60px var(--shell-vignette),
0 44px 90px rgba(0,0,0,.45), 0 12px 26px rgba(0,0,0,.3);
display:flex; flex-direction:column; overflow:hidden; z-index:3;
}
/* Material overlay — the AI's frameMaterial finally gets a real texture
(carbon weave, wood grain, brushed metal, gloss) instead of being stored
and ignored. Kept subtle so product art stays readable. */
.s3__front::after{
content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
z-index:5; opacity:var(--machine-gloss);
}
.s3[data-material="carbon"] .s3__front::after,
.s3--mat-carbon .s3__front::after,
.s3--mat-carbon-fibre .s3__front::after,
.s3--mat-carbon-fiber .s3__front::after{
background:
repeating-linear-gradient(45deg, rgba(255,255,255,.09) 0 2px, rgba(0,0,0,.09) 2px 4px),
repeating-linear-gradient(-45deg, rgba(255,255,255,.09) 0 2px, rgba(0,0,0,.09) 2px 4px);
background-size:8px 8px;
}
.s3--mat-wood .s3__front::after,
.s3--mat-walnut .s3__front::after,
.s3--mat-oak .s3__front::after{
background:repeating-linear-gradient(92deg, rgba(0,0,0,.10) 0 2px, rgba(255,255,255,.05) 2px 5px, rgba(0,0,0,.05) 5px 9px);
}
.s3--mat-brushed .s3__front::after,
.s3--mat-brushed-metal .s3__front::after,
.s3--mat-metal .s3__front::after,
.s3--mat-steel .s3__front::after,
.s3--mat-chrome .s3__front::after{
background:repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.05) 1px 2px);
}
.s3--mat-gloss .s3__front::after,
.s3--mat-glossy .s3__front::after,
.s3--mat-glass .s3__front::after{
background:linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.30) 38%, rgba(255,255,255,0) 56%);
}
.s3__side{
position:absolute; top:0; bottom:0; width:var(--s3depth);
background:linear-gradient(105deg, var(--shell-side) 0%, var(--shell-back) 45%, var(--shell-base) 100%);
box-shadow:inset 0 1px 0 var(--shell-hi), inset -1px 0 0 var(--shell-lo);
border-radius:10px;
}
.s3__side--r{left:100%; transform-origin:0 50%; transform:translateZ(46px) rotateY(90deg); border-radius:0 8px 8px 0}
.s3__side--l{right:100%; transform-origin:100% 50%; transform:translateZ(46px) rotateY(-90deg); border-radius:8px 0 0 8px}
.s3__cap{
position:absolute; left:0; right:0; bottom:100%; height:var(--s3depth);
transform-origin:50% 100%; transform:translateZ(46px) rotateX(90deg);
background:
linear-gradient(100deg, rgba(255,255,255,0) 32%, var(--shell-hi) 48%, rgba(255,255,255,0) 62%),
linear-gradient(90deg, var(--shell-cap), var(--shell-side) 55%, var(--shell-base));
box-shadow:inset 0 1px 0 var(--shell-hi);
border-radius:8px 8px 0 0;
}
/* closed back + base — tinted from the cabinet body, not fixed black */
.s3__back{
position:absolute; inset:0;
transform:translateZ(calc(46px - var(--s3depth))) rotateY(180deg);
background:
linear-gradient(125deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.07) 56%, rgba(255,255,255,0) 67%),
linear-gradient(160deg, var(--shell-back) 0%, var(--shell-side) 45%, var(--shell-base) 100%);
border:1px solid var(--shell-line);
border-radius:26px;
box-shadow:inset 0 1px 0 var(--shell-hi), inset 0 0 60px var(--shell-vignette);
}
.s3__back-vent{
position:absolute; left:9%; top:7%; width:34%; height:24%;
border-radius:8px;
background:repeating-linear-gradient(180deg, var(--shell-base) 0 3px, var(--shell-back) 3px 6px);
box-shadow:inset 0 0 0 1px var(--shell-line), 0 1px 0 var(--shell-hi);
}
.s3__back-plate{
position:absolute; left:11%; bottom:13%; width:26%; height:11%;
border-radius:4px; background:linear-gradient(180deg, var(--back-plate-a), var(--back-plate-b));
opacity:.75; box-shadow:0 1px 3px rgba(0,0,0,.6);
}
.s3__cord{position:absolute; right:16px; bottom:-18px; pointer-events:none}
.s3__bottom{
position:absolute; left:0; right:0; top:100%; height:var(--s3depth);
transform-origin:50% 0; transform:translateZ(46px) rotateX(-90deg);
background:linear-gradient(180deg, var(--shell-base), var(--shell-base));
box-shadow:inset 0 1px 0 var(--shell-hi);
border-radius:2px 2px 8px 8px;
}
/* Futuristic smoked-glass side panels.
Optional class applied by the block/admin; preserves existing geometry. */
.s3--glass-sides .s3__side{
background:
linear-gradient(105deg, rgba(20,22,28,.78) 0%, rgba(8,9,12,.88) 45%, rgba(4,5,7,.92) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset -1px 0 0 rgba(255,255,255,.06),
0 0 18px rgba(0,0,0,.35);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.10);
}
.s3--glass-sides .s3__side::before{
content:""; position:absolute; inset:0;
background:
linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 60%),
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%, rgba(0,0,0,.12));
pointer-events:none;
}
.s3--glass-sides .s3__cap{
background:
linear-gradient(100deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.08) 48%, rgba(255,255,255,0) 62%),
linear-gradient(90deg, rgba(18,19,24,.9), rgba(10,11,14,.95) 55%, rgba(6,7,9,.95));
border:1px solid rgba(255,255,255,.10);
}
.s3--glass-sides .s3__back{
background:
linear-gradient(125deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.05) 56%, rgba(255,255,255,0) 67%),
linear-gradient(160deg, rgba(14,15,19,.92) 0%, rgba(8,9,12,.95) 45%, rgba(4,5,7,.96) 100%);
border:1px solid rgba(255,255,255,.10);
}
/* The futuristic front part ships with smoked-glass sides by default. */
.s3--front-futuristic .s3__side{
background:
linear-gradient(105deg, rgba(20,22,28,.78) 0%, rgba(8,9,12,.88) 45%, rgba(4,5,7,.92) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset -1px 0 0 rgba(255,255,255,.06),
0 0 18px rgba(0,0,0,.35);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.10);
}
.s3--front-futuristic .s3__side::before{
content:""; position:absolute; inset:0;
background:
linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 60%),
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%, rgba(0,0,0,.12));
pointer-events:none;
}
.s3--front-futuristic .s3__cap{
background:
linear-gradient(100deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.08) 48%, rgba(255,255,255,0) 62%),
linear-gradient(90deg, rgba(18,19,24,.9), rgba(10,11,14,.95) 55%, rgba(6,7,9,.95));
border:1px solid rgba(255,255,255,.10);
}
.s3--front-futuristic .s3__back{
background:
linear-gradient(125deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.05) 56%, rgba(255,255,255,0) 67%),
linear-gradient(160deg, rgba(14,15,19,.92) 0%, rgba(8,9,12,.95) 45%, rgba(4,5,7,.96) 100%);
border:1px solid rgba(255,255,255,.10);
}
/* Spectrum Cabinet (machine4) has a wide top screen window. The generic
.s3__banner would spill over the frame, so we pin it to the transparent
cut-out measured in front-machine4.webp: x 11.2-88.4%, y 6.2-18.9% of the
front face (banner slides use object-fit:cover, so video/image fill it). */
.s3--front-machine4 .s3__banner{
left:11.2%; top:6.2%; width:77.2%; height:12.7%;
border-radius:8px;
}
/* marquee */
.s3__marquee{
flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:8px;
margin:14px 14px 0; padding:10px 12px; border-radius:14px;
background:linear-gradient(180deg, var(--marquee-a), var(--marquee-b));
box-shadow:inset 0 1px 0 var(--shell-hi), inset 0 -8px 18px var(--shell-lo);
}
.s3__marquee span{
font-family:var(--font-d); font-size:13px; font-weight:800; letter-spacing:.34em;
text-transform:uppercase; color:var(--marquee-ink);
text-shadow:0 0 14px var(--on-body-glow);
}
.s3__marquee em{
font-style:normal; font-size:9px; font-weight:800; letter-spacing:.2em;
color:var(--marquee-dot); text-shadow:0 0 10px var(--on-body-glow);
}
/* glass + interior */
.s3__glass{
position:relative; flex:1 1 auto; min-height:0; margin:12px 14px;
border-radius:16px; overflow:hidden;
background:linear-gradient(170deg, var(--glass-a) 0%, var(--glass-b) 55%, var(--glass-c) 100%);
box-shadow:
inset 0 0 0 2px var(--shell-line),
inset 0 14px 34px var(--shell-lo),
inset 0 -10px 26px var(--shell-lo);
}
.s3:hover .s3__glass{overflow:visible}
.s3__interior{position:absolute; inset:0; padding:14px 12px 12px; display:flex; flex-direction:column; gap:10px; background:var(--slot-bg)}
.s3__led{
flex:0 0 auto; height:5px; border-radius:99px;
background:linear-gradient(90deg, var(--led-1), var(--led-2));
box-shadow:0 0 10px var(--led-halo), 0 0 20px var(--led-halo);
animation:s3breathe 3.6s ease-in-out infinite;
}
/* LED motion is keyed off the merchant's accent, never a fixed rainbow.
The old s3hue keyframes rotated hue through 8 hardcoded colours, which turned
an amber "black light" machine green and purple. These animate intensity and
a *bounded* drift instead, so the AI colour survives. */
@keyframes s3breathe{
0%,100%{opacity:.55; box-shadow:0 0 6px var(--led-halo), 0 0 12px transparent}
50% {opacity:1; box-shadow:0 0 14px var(--led-halo), 0 0 30px var(--led-halo)}
}
@keyframes s3pulse{
0%,100%{opacity:.85; filter:saturate(1) brightness(1)}
50% {opacity:.35; filter:saturate(1.15) brightness(.85)}
}
/* a slow sweep along the bar — reads as light travelling through the strip */
@keyframes s3drift{
0% {background-position:0% 50%}
100%{background-position:200% 50%}
}
.s3__led{background-size:200% 100%}
@keyframes s3stripglow{
0%,100%{opacity:.45; filter:blur(10px) saturate(1.15)}
50% {opacity:.9; filter:blur(13px) saturate(1.35)}
}
/* per-machine LED behaviour, set by renderStage3d from machine.ledAnim */
.s3--led-off .s3__led,
.s3--led-off .s3__strip-glow{animation:none; opacity:.5}
.s3--led-pulse .s3__led{animation:s3pulse 2.2s ease-in-out infinite}
.s3--led-drift .s3__led{animation:s3drift 5.5s linear infinite}
.s3--led-drift .s3__strip-core,
.s3--led-drift .s3__strip-glow em{animation:s3drift 7s linear infinite; background-size:200% 100%}
.s3--led-none .s3__led,
.s3--led-none .s3__strip-glow{animation:none; opacity:.5}
.no-anim .s3__led{animation:none}
/* Machine interior: 3 columns × 4 rows = 12 slots. Rows are 1fr, so the
cabinet keeps exactly the same size and design - only the shelf layout and
the slot size change. */
.s3__slots{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(var(--slot-cols,3),1fr); grid-auto-rows:1fr; gap:9px}
.s3--mini .s3__slots,
.s3--wall .s3__slots{grid-template-columns:repeat(var(--slot-cols,3),1fr)}
.s3__slot{
position:relative; display:flex; flex-direction:column; min-height:0; padding:0;
background:var(--slot-face); border:1px solid var(--slot-line);
border-radius:10px; overflow:hidden; cursor:pointer;
transition:transform .25s var(--ease), border-color .2s, box-shadow .25s, background .2s;
}
.s3__slot:hover, .s3__slot:focus-visible{
transform:translateY(-3px) scale(2);
border-color:var(--slot-hover-line);
background:var(--slot-hover-bg);
box-shadow:var(--slot-shadow), 0 0 0 1px var(--slot-hover-line);
overflow:visible; z-index:10;
}
.s3__slot.is-vending{animation:s3slotpulse .8s ease}
@keyframes s3slotpulse{0%{transform:translateY(-3px)}30%{transform:translateY(2px) scale(.97)}100%{transform:translateY(-3px)}}
.s3__slot-pic{position:relative; flex:1 1 auto; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center}
/* Product photos are cut-outs (transparent background), so the whole product
must stay visible and the shelf shows through: contain, never cover.
No filter here on purpose - the scene can hold 60 slots and this runs on
the showroom's hot path. */
.s3__slot-pic img{
width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box;
transition:transform .45s var(--ease);
}
.s3__slot-name{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
padding:4px; font-size:10px; font-weight:700; line-height:1.25; color:var(--slot-name); text-shadow:var(--slot-name-shadow);
pointer-events:none;
}
[data-theme="dark"] .s3__slot-name{color:var(--slot-name); text-shadow:var(--slot-name-shadow)}
.s3__slot:hover .s3__slot-pic,.machine:hover .s3__slot-pic{overflow:visible; z-index:10}
.s3__slot:hover .s3__slot-pic img,.machine:hover .s3__slot-pic img{
cursor:zoom-in;
}
/* The decorative spiral coil that used to be drawn across each slot was
removed: with transparent cut-outs it cut through the product. */
.s3__slot-tag{
flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:3px;
padding:3px 5px; background:linear-gradient(180deg, var(--slot-tag-a), var(--slot-tag-b));
border-top:1px solid var(--slot-tag-line); line-height:1.1;
}
[data-theme="dark"] .s3__slot-tag{background:linear-gradient(180deg, var(--slot-tag-a), var(--slot-tag-b)); border-top-color:var(--slot-tag-line)}
.s3__slot-tag b{font-family:var(--font-d); font-size:8.5px; font-weight:800; letter-spacing:.05em; color:var(--slot-tag-code); text-transform:uppercase}
.s3__slot-tag em{font-style:normal; font-family:var(--font-d); font-size:10.5px; font-weight:800; color:var(--slot-tag-ink)}
[data-theme="dark"] .s3__slot-tag em{color:var(--slot-tag-ink)}
/* glass overlays */
.s3__sheen{
position:absolute; inset:0; pointer-events:none; z-index:4;
background:linear-gradient(112deg,
rgba(255,255,255,0) 28%, rgba(255,255,255,.16) 40%, rgba(255,255,255,.03) 47%,
rgba(255,255,255,0) 58%,
rgba(255,255,255,0) 78%, rgba(255,255,255,.10) 86%, rgba(255,255,255,0) 94%);
}
.s3__handle{
position:absolute; right:7px; top:50%; translate:0 -50%; width:7px; height:86px;
border-radius:99px; z-index:5;
background:linear-gradient(90deg,#8A9099,#D6D9DE 45%, #9AA0A6);
box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.8);
}
/* keypad panel */
.s3__panel{
flex:0 0 auto; display:flex; align-items:center; gap:12px;
margin:0 14px; padding:11px 13px; border-radius:14px;
background:linear-gradient(180deg, var(--panel-a), var(--panel-b));
box-shadow:inset 0 1px 0 var(--shell-hi), inset 0 -8px 16px var(--shell-lo);
}
.s3__screen{
flex:0 0 auto; min-width:86px; padding:7px 9px; border-radius:8px;
background:var(--screen-bg); color:var(--screen-ink);
font-family:var(--font-d); font-size:10.5px; font-weight:800; letter-spacing:.14em;
text-align:center; text-transform:uppercase;
box-shadow:inset 0 2px 6px rgba(0,0,0,.55), 0 0 10px var(--led-halo);
}
.s3__keys{flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; max-width:110px}
.s3__keys i{
height:11px; border-radius:3px;
background:linear-gradient(180deg, var(--key-a), var(--key-b));
box-shadow:inset 0 1px 0 var(--shell-hi), 0 1px 2px rgba(0,0,0,.45);
}
.s3__pay{
flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
background:var(--slot-face); color:var(--on-body); margin-left:auto;
}
.s3__pay svg{width:19px; height:19px}
/* dispense tray */
.s3__tray{
position:relative; flex:0 0 auto; margin:12px 14px 12px; height:52px; border-radius:13px;
background:linear-gradient(180deg, var(--tray-a), var(--tray-b));
box-shadow:inset 0 8px 18px var(--shell-lo), inset 0 -2px 5px var(--shell-hi), 0 1px 0 var(--shell-hi);
display:grid; place-items:center; overflow:hidden;
}
.s3__flap{
display:grid; place-items:center; width:82%; height:30px; border-radius:8px;
background:linear-gradient(180deg, var(--flap-a), var(--flap-b));
color:var(--flap-ink, rgba(255,255,255,.5));
font-family:var(--font-d); font-size:9px; font-weight:800; letter-spacing:.4em; text-transform:uppercase;
box-shadow:inset 0 1px 0 var(--shell-hi), 0 4px 8px rgba(0,0,0,.4);
transition:transform .3s var(--ease);
}
.s3__tray.is-vending .s3__flap{animation:s3flap .85s var(--ease)}
@keyframes s3flap{
0%{transform:rotateX(0)}
35%{transform:perspective(240px) rotateX(48deg)}
100%{transform:perspective(240px) rotateX(0)}
}
.s3__brandbar{
flex:0 0 auto; text-align:center; padding:0 0 11px;
font-family:var(--font-d); font-size:8.5px; font-weight:800; letter-spacing:.3em;
text-transform:uppercase; color:var(--on-body-dim);
}
/* stage atmosphere */
.s3__shadow{
position:absolute; left:50%; bottom:-26px; translate:-50% 0;
width:330px; height:44px; border-radius:50%;
background:radial-gradient(closest-side, rgba(var(--shadow-rgb),.34), rgba(var(--shadow-rgb),0) 74%);
filter:blur(6px);
}
.s3__hint{
display:inline-flex; align-items:center; gap:8px; margin-top:34px;
padding:9px 16px; border-radius:99px;
background:var(--panel); border:1px solid var(--line-soft);
font-size:12.5px; font-weight:600; color:var(--muted);
box-shadow:var(--sh-s);
}
.s3__fly{will-change:transform,opacity}
/* ---------- shop grid ----------------------------------------------------- */
.shop__filters{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px}
.shop__filters .chip span{opacity:.6; font-weight:700; margin-left:2px}
.shop__grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px}
.sg{
position:relative; background:var(--panel); border:1px solid var(--line-soft);
border-radius:var(--r-l); overflow:hidden; display:flex; flex-direction:column;
transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s;
}
.sg:hover{transform:translateY(-7px); box-shadow:var(--sh-l); border-color:var(--line)}
.sg__media{
position:relative; display:block; width:100%; aspect-ratio:1/.92; padding:0; border:0;
background:var(--wall-2); overflow:hidden; cursor:pointer;
}
.sg__media img{width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease)}
.sg:hover .sg__media img{transform:scale(1.07)}
.sg__media::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.5));
opacity:0; transition:opacity .3s;
}
.sg:hover .sg__media::after{opacity:1}
.sg__machine{
position:absolute; left:10px; bottom:10px; z-index:2;
padding:5px 11px; border-radius:99px; font-size:10.5px; font-weight:700;
letter-spacing:.05em; text-transform:uppercase; color:#fff;
background:rgba(10,10,11,.62); backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.18);
opacity:0; transform:translateY(6px); transition:all .3s var(--ease);
}
.sg:hover .sg__machine{opacity:1; transform:none}
.sg__body{display:flex; flex-direction:column; gap:10px; padding:16px 16px 17px; flex:1}
.sg__name{font-size:14.5px; font-weight:700; line-height:1.35; letter-spacing:-.01em}
.sg__row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto}
.sg__price{font-family:var(--font-d); font-size:18px; font-weight:800; letter-spacing:-.02em}
.sg__add{
width:40px; height:40px; border-radius:12px; border:1px solid #B8BABE;
background:linear-gradient(145deg,#9AA0A6 0%,#C0C2C5 25%,#8A8D93 50%,#B8BABE 75%,#9AA0A6 100%);
color:#0A0A0B; font-size:22px; font-weight:700; line-height:1;
display:grid; place-items:center;
transition:transform .25s var(--ease), box-shadow .25s;
}
.sg__add:hover{transform:scale(1.09); box-shadow:0 8px 20px rgba(154,160,166,.42)}
.sg__add:active{transform:scale(.94)}
/* ---------- merchant value ------------------------------------------------ */
.mv__layout{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center}
.mv__copy .lead{margin-top:16px}
.mv__features{display:grid; gap:16px; margin:30px 0 32px}
.mv__feature{display:flex; gap:15px; align-items:flex-start}
.mv__ico{
flex:0 0 auto; width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
font-size:21px; background:var(--brand-soft); border:1px solid var(--line-soft);
}
.mv__feature h4{font-size:15.5px; font-weight:800; margin-bottom:3px}
.mv__feature p{font-size:13.5px; color:var(--muted); line-height:1.55}
.mv__card{
background:linear-gradient(165deg, var(--panel), var(--panel-2));
border:1px solid var(--line); border-radius:var(--r-xl);
padding:30px; box-shadow:var(--sh-l); position:relative; overflow:hidden;
}
.mv__card::before{
content:""; position:absolute; inset:0 0 auto; height:3px;
background:linear-gradient(90deg,#9AA0A6,#E5E7EB 45%,#8A8D93);
}
.mv__card-head{display:flex; align-items:center; gap:14px; margin-bottom:24px}
.mv__card-logo{
flex:0 0 auto; width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
background:linear-gradient(145deg,#9AA0A6,#B8BABE); color:#0A0A0B;
font-family:var(--font-d); font-size:24px; font-weight:800;
}
.mv__card-head h3{font-size:17px}
.mv__card-head p{font-size:12.5px; color:var(--muted); overflow-wrap:anywhere}
.mv__card-head .badge{margin-left:auto}
.mv__stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:20px}
.mv__stat{background:var(--wall-2); border:1px solid var(--line-soft); border-radius:var(--r-m); padding:14px 10px; text-align:center; min-width:0}
.mv__stat b{display:block; font-family:var(--font-d); font-size:24px; font-weight:800; letter-spacing:-.02em}
.mv__stat span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:700; overflow-wrap:anywhere}
.mv__chart{
display:flex; align-items:flex-end; gap:7px; height:118px;
background:var(--wall-2); border:1px solid var(--line-soft); border-radius:var(--r-m);
padding:14px 14px 0; overflow:hidden;
}
.mv__chart i{
flex:1; border-radius:5px 5px 0 0; min-height:8px;
background:linear-gradient(180deg,#C0C2C5,#9AA0A6 60%, #7E838A);
animation:mvgrow .9s var(--ease) both;
}
.mv__chart i:nth-child(2n){animation-delay:.08s}
.mv__chart i:nth-child(3n){animation-delay:.16s}
@keyframes mvgrow{from{height:0 !important; opacity:.4}}
.mv__ticks{list-style:none; display:grid; gap:9px; margin-top:20px; padding:0}
.mv__ticks li{display:flex; gap:10px; align-items:center; font-size:13.5px; color:var(--ink-2)}
.mv__ticks span{
flex:0 0 auto; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
font-size:11px; font-weight:800; color:#0A0A0B;
background:linear-gradient(145deg,#9AA0A6,#C0C2C5);
}
/* ---------- commerce chrome ---------------------------------------------- */
.vfy-veil{
position:fixed; inset:0; z-index:1150;
background:rgba(8,9,11,.52); backdrop-filter:blur(4px);
opacity:0; transition:opacity .35s var(--ease);
}
.vfy-veil.is-on{opacity:1}
.iconbtn{
width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
background:transparent; border:1px solid var(--line); color:var(--ink-2);
transition:background .2s, transform .2s;
}
.iconbtn:hover{background:var(--wall-2); transform:rotate(90deg)}
.btn.is-busy{opacity:.75; pointer-events:none}
.cart-fab, .nav__cart{
position:relative; display:grid; place-items:center;
border:1px solid var(--line); background:var(--panel); color:var(--ink);
transition:transform .3s var(--ease), box-shadow .3s;
}
.cart-fab{
position:fixed; right:26px; bottom:26px; z-index:1100;
width:60px; height:60px; border-radius:50%;
box-shadow:var(--sh-l);
}
.cart-fab svg{width:25px; height:25px}
.cart-fab:hover{transform:translateY(-4px) scale(1.04)}
.nav__cart{
width:42px; height:42px; border-radius:13px; flex:0 0 auto;
}
.nav__cart svg{width:20px; height:20px}
.nav__cart:hover{transform:translateY(-2px)}
.cart-fab__n, .nav__cart-n{
position:absolute; top:-6px; right:-6px; min-width:21px; height:21px; padding:0 5px;
border-radius:99px; display:grid; place-items:center;
background:linear-gradient(145deg,#9AA0A6,#C0C2C5); color:#0A0A0B;
font-family:var(--font-d); font-size:11px; font-weight:800;
box-shadow:0 3px 8px rgba(0,0,0,.25);
transition:transform .3s var(--ease);
}
.cart-fab__n.is-zero, .nav__cart-n.is-zero{background:var(--wall-2); color:var(--muted); border:1px solid var(--line)}
.is-bump{animation:cartbump .45s var(--ease)}
@keyframes cartbump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
/* ---------- cart drawer --------------------------------------------------- */
.cartd{
position:fixed; top:0; right:0; bottom:0; z-index:1160;
width:min(440px, 100%); display:flex; flex-direction:column;
background:var(--panel); border-left:1px solid var(--line);
box-shadow:-30px 0 70px rgba(var(--shadow-rgb),.24);
transform:translateX(103%); transition:transform .45s var(--ease);
visibility:hidden;
}
.cartd.is-open{transform:none; visibility:visible}
.cartd__head{
display:flex; align-items:center; justify-content:space-between;
padding:22px 24px; border-bottom:1px solid var(--line-soft);
}
.cartd__head h3{font-size:20px; display:flex; align-items:center; gap:10px}
.cartd__n{
min-width:26px; height:26px; padding:0 7px; border-radius:99px; display:grid; place-items:center;
background:var(--brand-soft); color:var(--ink-2); font-size:13px; font-weight:800;
}
.cartd__items{flex:1 1 auto; overflow-y:auto; padding:18px 24px}
.cartd__machine{
display:flex; align-items:center; gap:9px;
font-family:var(--font-d); font-size:11px; font-weight:800; letter-spacing:.12em;
text-transform:uppercase; color:var(--muted);
margin:14px 0 10px;
}
.cartd__machine:first-child{margin-top:0}
.cartd__machine-dot{
width:8px; height:8px; border-radius:50%;
background:linear-gradient(145deg,#9AA0A6,#C0C2C5);
box-shadow:0 0 0 3px var(--brand-soft);
}
.cartd__item{
display:flex; gap:13px; align-items:center;
padding:12px; margin-bottom:10px;
background:var(--panel-2); border:1px solid var(--line-soft); border-radius:var(--r-m);
}
.cartd__item-img{
flex:0 0 auto; width:62px; height:62px; border-radius:10px; overflow:hidden;
background:var(--wall-2); border:1px solid var(--line-soft);
}
.cartd__item-img img{width:100%; height:100%; object-fit:cover}
.cartd__item-info{flex:1 1 auto; min-width:0; display:grid; gap:5px}
.cartd__item-name{font-size:13.5px; font-weight:700; line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.cartd__item-price{font-family:var(--font-d); font-size:14px; font-weight:800; color:var(--ink-2)}
.cartd__qty{
display:inline-flex; align-items:center; gap:2px;
background:var(--wall-0); border:1px solid var(--line); border-radius:99px; padding:2px;
width:max-content;
}
.cartd__qty button{
width:26px; height:26px; border-radius:50%; border:0; background:transparent;
font-size:15px; font-weight:700; color:var(--ink-2); line-height:1;
display:grid; place-items:center;
}
.cartd__qty button:hover{background:var(--brand-soft)}
.cartd__qty b{min-width:24px; text-align:center; font-family:var(--font-d); font-size:13px; font-weight:800}
.cartd__qty--lg button{width:34px; height:34px; font-size:17px}
.cartd__qty--lg b{min-width:32px; font-size:15px}
.cartd__rm{
flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:0;
background:transparent; color:var(--muted); display:grid; place-items:center;
transition:background .2s, color .2s;
}
.cartd__rm:hover{background:rgba(239,68,68,.12); color:#E11D48}
.cartd__empty{
height:100%; min-height:260px; display:flex; flex-direction:column;
align-items:center; justify-content:center; text-align:center; gap:8px; color:var(--muted);
}
.cartd__empty p{font-family:var(--font-d); font-size:17px; font-weight:800; color:var(--ink)}
.cartd__empty span{font-size:13.5px}
.cartd__empty b{color:var(--ink)}
.cartd__foot{padding:20px 24px 24px; border-top:1px solid var(--line-soft); background:var(--panel-2)}
.cartd__sum{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.cartd__sum span{font-size:14px; color:var(--muted); font-weight:600}
.cartd__sum b{font-family:var(--font-d); font-size:26px; font-weight:800; letter-spacing:-.02em}
.cartd__note{font-size:11.5px; color:var(--muted); margin-bottom:16px}
.cartd__go{width:100%}
.cartd.is-open ~ .cart-fab, .is-open ~ .cart-fab{display:none}
/* ---------- quick view ---------------------------------------------------- */
.qv, .ck{
position:fixed; inset:0; z-index:1170;
display:grid; place-items:center; padding:20px;
opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.qv.is-open, .ck.is-open{opacity:1; visibility:visible}
.qv__panel{
position:relative; width:min(860px, 100%); max-height:min(92vh, 640px);
background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl);
box-shadow:0 40px 100px rgba(var(--shadow-rgb),.4);
overflow:auto; display:grid; grid-template-columns:1fr 1fr;
transform:translateY(26px) scale(.97); transition:transform .35s var(--ease);
}
.qv.is-open .qv__panel{transform:none}
.qv__x{position:absolute; top:16px; right:16px; z-index:5; background:var(--panel)}
.qv__media{position:relative; background:var(--wall-2); min-height:300px}
.qv__media img{width:100%; height:100%; object-fit:cover}
.qv__machine{
position:absolute; left:16px; bottom:16px;
padding:7px 14px; border-radius:99px; font-size:11px; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color:#fff;
background:rgba(10,10,11,.66); backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.2);
}
.qv__info{padding:34px 32px; display:flex; flex-direction:column; gap:14px}
.qv__info h3{font-size:27px; letter-spacing:-.025em}
.qv__price{font-family:var(--font-d); font-size:32px; font-weight:800; letter-spacing:-.03em}
.qv__ticks{list-style:none; display:grid; gap:8px; margin:2px 0 4px; padding:0}
.qv__ticks li{display:flex; gap:9px; align-items:center; font-size:13.5px; color:var(--ink-2)}
.qv__ticks span{
width:19px; height:19px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
font-size:10.5px; font-weight:800; color:#0A0A0B;
background:linear-gradient(145deg,#9AA0A6,#C0C2C5);
}
.qv__row{display:flex; gap:12px; align-items:center; margin-top:auto}
.qv__row .btn{flex:1}
.qv__info > .btn--ghost{width:100%; justify-content:center}
.detail__buy{display:flex; gap:12px; flex-wrap:wrap}
.detail__buy .btn{flex:1; min-width:170px; justify-content:center}
/* ---------- checkout ------------------------------------------------------ */
.ck{z-index:1180}
.ck__panel{
width:min(600px, 100%); max-height:94vh; overflow:auto;
background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl);
box-shadow:0 40px 110px rgba(var(--shadow-rgb),.45);
display:flex; flex-direction:column;
transform:translateY(26px) scale(.97); transition:transform .35s var(--ease);
}
.ck.is-open .ck__panel{transform:none}
.ck__head{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:22px 26px 0;
}
.ck__steps{display:flex; gap:6px; flex-wrap:wrap}
.ck__steps span{
padding:8px 14px; border-radius:99px; font-size:12.5px; font-weight:700;
color:var(--muted); background:var(--wall-2); border:1px solid var(--line-soft);
transition:all .3s var(--ease);
}
.ck__steps span.is-on{
background:linear-gradient(145deg,#9AA0A6,#C0C2C5); color:#0A0A0B;
border-color:#B8BABE; box-shadow:0 4px 14px rgba(154,160,166,.3);
}
.ck__body{padding:22px 26px 6px; display:grid; gap:18px}
.ck__msg{
padding:12px 15px; border-radius:11px; font-size:13.5px; font-weight:600;
background:rgba(225,29,72,.09); border:1px solid rgba(225,29,72,.3); color:#BE123C;
}
[data-theme="dark"] .ck__msg{color:#FB7185}
.ck__grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ck__grid .field[style*="1/-1"]{grid-column:1/-1}
.ck__opts{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.ck__opts--pay{grid-template-columns:1fr}
.ck__opt{
display:flex; gap:12px; align-items:flex-start; cursor:pointer;
padding:14px 16px; border-radius:var(--r-m);
background:var(--panel-2); border:1.5px solid var(--line-soft);
transition:border-color .2s, background .2s, box-shadow .2s;
}
.ck__opt:hover{border-color:var(--line)}
.ck__opt.is-on{
border-color:#9AA0A6; background:var(--brand-soft);
box-shadow:0 0 0 3px rgba(154,160,166,.16);
}
.ck__opt input{accent-color:#9AA0A6; margin-top:3px}
.ck__opt b{display:block; font-size:14.5px; font-weight:800}
.ck__opt em{display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:2px}
/* structured delivery address */
.ck__addr-grid{display:grid; grid-template-columns:1.2fr 1fr .8fr; gap:8px}
.ck__addr-grid select,.ck__addr-grid input{width:100%; min-width:0}
/* delivery options (loaded once the address is known) */
.ck__ship{display:grid; gap:11px; margin-top:16px}
.ck__ship-label{font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--ink-2)}
.ck__opt--ship{align-items:center}
.ck__opt--ship > span{flex:1; min-width:0}
.ck__ship-fee{font-family:var(--font-d); font-weight:800; font-size:15px; white-space:nowrap}
/* cost breakdown on the review step */
.ck__break{display:grid; gap:8px; padding:15px 16px; margin-top:10px; background:var(--wall-2); border-radius:var(--r-m); border:1px solid var(--line-soft)}
.ck__break div{display:flex; justify-content:space-between; gap:16px; font-size:13.5px}
.ck__break span{color:var(--muted)}
.ck__break b{font-weight:700}
.ck__group{
background:var(--panel-2); border:1px solid var(--line-soft);
border-radius:var(--r-m); padding:14px 16px; margin-bottom:10px;
}
.ck__group h4{
font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
color:var(--muted); margin-bottom:9px;
}
.ck__group ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.ck__group li{display:flex; justify-content:space-between; gap:14px; font-size:14px}
.ck__group li b{font-family:var(--font-d); font-weight:800}
.ck__meta{display:grid; gap:9px; padding:15px 16px; background:var(--wall-2); border-radius:var(--r-m); border:1px solid var(--line-soft)}
.ck__meta div{display:flex; justify-content:space-between; gap:16px; font-size:13.5px}
.ck__meta span{color:var(--muted)}
.ck__meta b{text-align:right; font-weight:700}
.ck__total{
display:flex; align-items:center; justify-content:space-between;
padding:16px 4px 2px; border-top:1px dashed var(--line);
}
.ck__total span{font-size:15px; font-weight:700; color:var(--muted)}
.ck__total b{font-family:var(--font-d); font-size:30px; font-weight:800; letter-spacing:-.03em}
.ck__foot{
display:flex; gap:12px; justify-content:flex-end; align-items:center;
padding:16px 26px 24px; border-top:1px solid var(--line-soft); margin-top:8px;
}
.ck__foot .btn--ghost{margin-right:auto}
.ck__done{text-align:center; padding:14px 6px 10px; display:grid; gap:10px; justify-items:center}
.ck__done h3{font-size:26px}
.ck__tick{color:#16A34A; animation:tickpop .6s var(--ease)}
.ck__tick svg path{stroke-dasharray:48; stroke-dashoffset:48; animation:tickdraw .7s .25s var(--ease) forwards}
@keyframes tickpop{0%{transform:scale(.5); opacity:0}100%{transform:scale(1); opacity:1}}
@keyframes tickdraw{to{stroke-dashoffset:0}}
.ck__refs{font-size:14.5px; color:var(--ink-2)}
.ck__refs b{font-family:var(--font-d); font-weight:800; color:var(--ink)}
/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1180px){
.shop__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
.hero3d__layout{grid-template-columns:1fr; gap:44px; text-align:center}
.hero3d__copy .lead{margin-inline:auto}
.hero3d__cta{justify-content:center}
.hero3d__chips{justify-content:center}
.mv__layout{grid-template-columns:1fr; gap:44px}
.qv__panel{grid-template-columns:1fr; max-height:94vh}
.qv__media{min-height:230px; max-height:290px}
}
@media (max-width:820px){
.shop__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.ck__grid, .ck__opts, .ck__addr-grid{grid-template-columns:1fr}
.s3{--s3depth:120px}
.s3__rig{width:284px; height:506px}
}
@media (max-width:560px){
.hero3d{padding:64px 0 64px}
.cart-fab{right:16px; bottom:16px; width:54px; height:54px}
.s3{--s3depth:96px}
.s3__rig{width:252px; height:455px}
.s3__marquee span{font-size:11px; letter-spacing:.26em}
.s3__screen{min-width:70px; font-size:9px}
.qv__info{padding:24px 20px}
.ck__head, .ck__body, .ck__foot{padding-inline:18px}
.detail__buy .btn{min-width:0; width:100%}
}
@media (prefers-reduced-motion: reduce){
.s3__body{animation:none}
.s3__led{animation:none}
.s3__strip{animation:none}
.mv__chart i{animation:none}
.s3__rig{transition:none}
}
/* ---------- commerce fixes ----------------------------------------------- */
.ck [hidden], [data-veil][hidden]{display:none !important}
section[data-ckpanel]{display:grid; gap:18px}
.ck__done{gap:10px}
.qv__panel > [data-qv-body]{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-width:0}
.qv__media{min-height:340px}
@media (max-width:1024px){
.qv__panel > [data-qv-body]{grid-template-columns:1fr}
}
.qv__panel{display:block; grid-template-columns:none}
.qv__media{min-height:340px; height:100%}
/* ============================================================================
27. DIGITAL DARK DEFAULT · LUXURY SPOTLIGHT · MACHINE LANDING
========================================================================== */
/* ---------- dark page: grid + top glow (digital showroom) ----------------- */
[data-theme="dark"]{
--wall-0:rgba(8,9,12,.55);
--wall-1:rgba(10,11,15,.72);
--wall-2:#14151A;
--recess:#15161B;
}
[data-theme="dark"] body{
background-color:#08090C;
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
radial-gradient(1000px 460px at 50% -150px, rgba(154,160,166,.15), transparent 65%);
background-size:64px 64px, 64px 64px, 100% 100%;
}
[data-theme="dark"] .mobile-menu{backdrop-filter:blur(16px)}
[data-theme="dark"] .nav{backdrop-filter:saturate(1.3) blur(16px)}
/* ---------- luxury spotlight: rays from top onto the machine -------------- */
.s3__hint{position:relative; z-index:2}
/* ---------- bigger machine for machine landing pages ---------------------- */
.s3--xl{max-width:600px}
.s3--xl .s3__rig{width:388px; height:710px}
.s3--xl .s3__room{padding-top:24px}
@media (max-width:600px){
.s3--xl .s3__rig{width:min(340px, 84vw); height:min(624px, 156vw)}
.s3--xl{max-width:100%}
}
/* ---------- mini 3D machine cards (store wall) ---------------------------- */
.s3--mini{cursor:pointer; --s3depth:96px}
.s3--mini .s3__shadow{width:min(190px, 86%)}
.s3--mini .s3__hint{display:none}
.s3--mini .s3__cord{display:none}
.s3--mini .s3__rig{width:min(214px, calc(100% - 72px)); height:396px}
/* Variant of the mini 3D machine used inside the Interactive store
wall: bigger than the hero-grid mini so the LED strip and the
3×3 product grid both register clearly. */
.s3--wall{--s3depth:120px}
.s3--wall .s3__rig{width:min(282px, 100%); height:516px}
.s3--wall .s3__shadow{width:min(240px, 84%)}
.s3--wall .s3__marquee span{font-size:11px}
.s3--wall .s3__marquee em{font-size:9px}
.s3--wall .s3__back-plate{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.4))}
.s3--wall .s3__strip-glow{filter:blur(14px) saturate(1.25); opacity:.95}
.s3--wall .s3__strip-glow em{padding:9px}
.s3--wall .s3__strip-core{filter:saturate(1.05) brightness(1.05)}
.s3--mini .s3__led{height:4px}
.s3--mini .s3__slots{gap:6px; grid-template-columns:repeat(3,1fr)}
.s3--mini .s3__slot-tag{padding:2px 4px; font-size:8.5px}
.s3--mini .s3__slot-tag em{font-size:8.5px}
.s3--mini .s3__panel{margin:0 9px; padding:8px 9px; border-radius:10px}
.s3--mini .s3__tray{margin:8px 9px; height:38px; border-radius:10px}
.s3--mini .s3__flap{height:22px; font-size:8px}
.s3--mini .s3__brandbar{padding:0 0 7px; font-size:7px; letter-spacing:.24em}
.niche--3d{
padding:0; border-radius:16px;
background:linear-gradient(180deg, var(--wall-1), var(--wall-0));
border:1px solid var(--line-soft); box-shadow:var(--sh-s);
overflow:hidden;
display:flex; flex-direction:column;
}
.niche--3d::after{display:none}
.niche--3d:hover{
border-color:color-mix(in srgb, var(--accent, #9AA0A6) 55%, transparent);
box-shadow:0 18px 44px rgba(0,0,0,.34);
}
[data-theme="light"] .niche--3d:hover{box-shadow:0 18px 44px rgba(var(--shadow-rgb),.22)}
/* ---------- card banner (merchant's storefront banner) ---------- */
.card-banner{
position:relative; width:100%; height:120px; overflow:hidden;
background:var(--recess);
flex-shrink:0;
}
.card-banner__media{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; display:block;
}
.card-banner__scrim{
position:absolute; inset:0;
background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55));
}
/* Accent glow on the banner edge */
.card-banner::after{
content:""; position:absolute; bottom:0; left:0; right:0; height:3px;
background:linear-gradient(90deg, var(--accent, #9AA0A6), transparent);
opacity:.7;
}
/* ---------- card brand strip (logo + name + category) ---------- */
.card-brand{
display:flex; align-items:center; gap:10px;
padding:14px 16px 0;
}
.card-brand__logo{
width:36px; height:36px; border-radius:8px;
object-fit:contain; background:var(--panel); flex-shrink:0;
box-shadow:0 0 0 1px var(--line-soft);
}
.card-brand__initial{
width:36px; height:36px; border-radius:8px;
display:grid; place-items:center;
background:linear-gradient(150deg, color-mix(in srgb, var(--accent,#9AA0A6) 18%, transparent), color-mix(in srgb, var(--accent,#9AA0A6) 8%, transparent));
color:var(--accent, #9AA0A6); font-weight:800; font-size:15px;
font-family:var(--font-d); flex-shrink:0;
box-shadow:0 0 0 1px var(--line-soft);
}
.card-brand__text{min-width:0; flex:1}
.card-brand__text h4{
font-size:15px; font-weight:800; letter-spacing:-.01em;
margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-brand__text span{
font-size:12px; color:var(--muted); display:block; margin-top:2px;
}
/* ---------- card tagline ---------- */
.card-tagline{
font-size:12.5px; color:var(--ink-2); line-height:1.45;
margin:8px 16px 0; padding:0;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* ---------- card machine stage ---------- */
.niche--3d .s3__room{flex:1; min-height:0}
/* ---------- card CTA ---------- */
.card-cta{
margin:10px 16px 14px; text-align:center; justify-content:center;
gap:6px;
}
.card-cta svg{width:14px; height:14px}
.mini3d__info{text-align:center; margin-top:20px}
.mini3d__info h4{font-size:16px; font-weight:800; letter-spacing:-.01em}
.mini3d__info p{font-size:12.5px; color:var(--muted); margin:5px 0 13px}
/* Slide a card underneath the 3D machine so the Explore button is
reliably visible on every card in the Interactive store wall.
Slot grid uses 3 rows × 3 cols = 9 so each card stays compact. */
.wall-grid .niche--3d{
padding:0; gap:0;
width:100%;
min-height:480px;
}
.wall-grid .card-brand{padding:12px 14px 0}
.wall-grid .card-tagline{margin:6px 14px 0}
.wall-grid .card-cta{margin:8px 14px 12px}
.wall-grid .mini3d__info{margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft)}
/* Wall cards are static (no rotation), so their stage must not
restrict touch panning: the ancestor chain would otherwise
intersect to "none" and kill both the page's vertical scroll and
the carousel's horizontal swipe over the machine. */
.wall-grid .s3__room{touch-action:auto}
/* ---------- machine landing hero (mhero) ---------------------------------- */
.mhero{position:relative; overflow:hidden; padding:62px 0 54px}
.mhero::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(54% 46% at 72% 42%, color-mix(in srgb, var(--stage-accent,#9AA0A6) 17%, transparent), transparent 70%),
radial-gradient(120% 66% at 50% -8%, rgba(255,255,255,.05), transparent 60%);
}
.mhero__grid{
position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
gap:54px; align-items:center;
}
.mhero__copy .eyebrow{margin-bottom:16px}
.mhero__copy h1{
font-family:var(--font-d); font-size:clamp(34px,4.4vw,54px); font-weight:800;
line-height:1.04; letter-spacing:-.02em; margin:0;
}
.mhero__tag{
font-family:var(--font-d); font-weight:700; font-size:19px; line-height:1.45;
color:var(--ink); margin:16px 0 0;
}
.mhero .lead{margin-top:14px; max-width:540px}
.mhero__feat{list-style:none; display:grid; gap:12px; margin:26px 0 0; padding:0}
.mhero__feat li{display:flex; align-items:center; gap:12px; font-size:15.5px; font-weight:600; color:var(--ink-2)}
/* Hero background banner media */
.mhero__bg{
position:absolute; inset:0; overflow:hidden; z-index:0;
pointer-events:none;
}
.mhero__bgimg,
.mhero__bgvideo{
width:100%; height:100%; object-fit:cover; object-position:center top;
filter:saturate(1.08);
}
.mhero__bgscrim{
position:absolute; inset:0;
background:radial-gradient(140% 90% at 30% 0%, rgba(8,8,10,0.14) 0%, rgba(8,8,10,0.62) 70%, rgba(8,8,10,0.92) 100%);
/* Overlay opacity controlled by --mhero-bg-overlay (0-1) */
background:linear-gradient(180deg, rgba(8,8,10, calc(0.38 * var(--mhero-bg-overlay, 0.5))) 0%, rgba(8,8,10, calc(0.78 * var(--mhero-bg-overlay, 0.5))) 68%, rgba(8,8,10, calc(0.98 * var(--mhero-bg-overlay, 0.5))) 100%);
}
.mhero__bg + .mhero__grid{z-index:1; position:relative}
.mhero__bg::after{
content:""; position:absolute; inset:0;
background:radial-gradient(70% 48% at 78% 40%, color-mix(in srgb, var(--stage-accent,#9AA0A6) 16%, transparent), transparent 72%);
}
.mhero__feat i{
flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
background:var(--brand-soft); color:var(--ink); border:1px solid rgba(154,160,166,.4);
}
.mhero__cta{margin-top:30px}
.mhero__meta{
display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:28px;
font-size:13.5px; color:var(--muted);
}
.mhero__meta b{color:var(--ink-2); font-weight:700}
.mhero__dot{
width:9px; height:9px; border-radius:50%;
box-shadow:0 0 0 4px var(--brand-soft), 0 0 16px var(--stage-accent, var(--brand));
}
.mhero__sep{width:1px; height:14px; background:var(--line)}
.mhero__stage{position:relative; display:flex; justify-content:center; min-width:0}
.s3-halo{
position:absolute; left:50%; top:46%; translate:-50% -50%;
width:min(560px, 98%); aspect-ratio:1; pointer-events:none;
background:radial-gradient(circle, color-mix(in srgb, var(--stage-accent,#9AA0A6) 20%, transparent) 0%, transparent 62%);
}
@media (max-width:1024px){
.mhero__grid{grid-template-columns:1fr; gap:44px}
.mhero__copy{text-align:center}
.mhero .lead{margin-inline:auto}
.mhero__cta{justify-content:center}
.mhero__feat li{justify-content:center}
.mhero__meta{justify-content:center}
.mhero{padding-top:48px}
}
@media (max-width:460px){
.brand{gap:8px}
.brand__mark{width:32px; height:32px; border-radius:9px}
.brand__word{height:20px}
.nav__in{gap:10px}
.nav__right{gap:8px}
}
/* ---------- customer account ---------------------------------------------- */
.acct__tabs{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:18px 0 22px}
[data-wish][aria-pressed="true"]{color:#F43F5E; border-color:#F43F5E; background:rgba(244,63,94,.08)}
[data-wish]{display:inline-flex;align-items:center;justify-content:center;gap:6px}
/* ---------- 27. Walk-in store room (CSS-3D showroom) --------------------- */
@property --focus-x{syntax:"";inherits:true;initial-value:0px}
@property --focus-y{syntax:"";inherits:true;initial-value:0px}
@property --focus-z{syntax:"";inherits:true;initial-value:0px}
@property --focus-ry{syntax:"";inherits:true;initial-value:0deg}
.storeroom{position:relative; width:100vw; margin-left:calc(50% - 50vw)}
.storeroom__scene{
position:relative; overflow:hidden;
perspective:940px; perspective-origin:50% 44%;
background:#07080B;
padding:clamp(64px,9vw,120px) 0 clamp(150px,22vw,300px);
transition:perspective .6s var(--ease);
}
.storeroom__room{
--depth:640px; --walk:-210px; --rx:0deg; --ry:0deg;
--focus-x:0px; --focus-y:0px; --focus-z:0px; --focus-ry:0deg;
--cell-min:130px; --cols:8;
position:relative; width:100%; transform-style:preserve-3d;
/* room's own box lives AT the back-wall plane so it never occludes the machines behind it
(Chrome hit-tests 3D front-to-back by z) */
transform:
rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--focus-ry)))
translateZ(calc(var(--depth) * -1 + var(--walk) + var(--focus-z)))
translateX(var(--focus-x)) translateY(var(--focus-y));
transition:
--focus-x .6s var(--ease), --focus-y .6s var(--ease),
--focus-z .6s var(--ease), --focus-ry .6s var(--ease);
}
/* solver mode — lets the focus routine sample camera states without animating */
.storeroom.is-instant .storeroom__room,
.storeroom.is-instant .storeroom__scene{transition:none !important}
/* back wall — machines are recessed in this plane and stand ON the floor
(room box = wall plane, so no extra Z here) */
.storeroom__back{
position:relative; transform-style:preserve-3d;
padding:2px clamp(14px,2vw,26px) 14px;
background:
radial-gradient(52% 30% at 50% 3%, rgba(214,226,242,.12), transparent 72%),
linear-gradient(90deg, rgba(0,0,0,.55), transparent 13%, transparent 87%, rgba(0,0,0,.55)),
repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 172px),
repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 124px),
linear-gradient(180deg, #161A20 0%, #0F1216 55%, #090B0E 100%);
box-shadow:inset 0 -46px 70px -30px rgba(0,0,0,.85);
}
.storeroom__back::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none;
background:linear-gradient(to top, rgba(198,212,232,.2), rgba(198,212,232,0));
}
.storeroom__sign{
text-align:center; font-family:var(--font-d); font-weight:800;
font-size:clamp(14px,1.5vw,21px); letter-spacing:.44em; text-indent:.44em;
color:#F0F2F5; margin:0 0 10px;
text-shadow:0 0 8px rgba(255,255,255,.5), 0 0 26px rgba(174,182,192,.55), 0 0 72px rgba(154,160,166,.4);
animation:signHum 7s ease-in-out infinite;
}
@keyframes signHum{0%,100%{opacity:.94}45%{opacity:1}60%{opacity:.9}75%{opacity:1}}
.storeroom__grid{
display:grid; grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));
gap:14px 12px; position:relative; z-index:1; transform-style:preserve-3d;
transition:opacity .17s ease, transform .17s ease;
}
.storeroom__grid.is-swapping{opacity:0; transform:translateX(-16px)}
.storeroom__cell{
position:relative; width:100%;
display:flex; flex-direction:column; gap:7px;
transform-style:preserve-3d;
}
/* merchant nameplate above each machine */
.storeroom__name{
width:100%; padding:6px 8px; border-radius:6px;
font:700 clamp(10px,.85vw,13px)/1.2 var(--font-d);
letter-spacing:.16em; text-transform:uppercase; text-align:center;
color:#E8EBEF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
background:linear-gradient(180deg, rgba(24,28,36,.9), rgba(12,14,18,.9));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 6px 16px -6px rgba(0,0,0,.8);
text-shadow:0 0 12px color-mix(in srgb, var(--accent,#9AA0A6) 55%, transparent);
transform:translateZ(2px);
transition:transform .5s var(--ease), opacity .45s var(--ease);
}
/* the name rides along with the machine when it pops / focuses */
.storeroom__cell:has(.niche:hover) .storeroom__name,
:root{--storeroom-has:0}
@supports selector(:has(*)){:root{--storeroom-has:1}}
/* :has() is unavailable on older Safari/Firefox. The rule below only takes
effect where it is supported, so add the same reveal on plain :focus-within
for everything else — otherwise keyboard users lose the label entirely. */
.storeroom__cell .niche:focus-within .storeroom__name{transform:translateZ(150px)}
.storeroom__cell:has(.niche:focus-within) .storeroom__name{transform:translateZ(150px)}
.storeroom__cell.is-focus .storeroom__name{transform:translateZ(230px)}
/* downlight above each niche + contact shadow under it — depth cue on the wall */
.storeroom__cell::before{
content:""; position:absolute; left:-8%; right:-8%; top:-11px; height:24px; pointer-events:none;
transform:translateZ(1px);
background:radial-gradient(50% 100% at 50% 100%, rgba(222,233,248,.17), transparent 74%);
}
.storeroom__cell::after{
content:""; position:absolute; left:2%; right:2%; bottom:-7px; height:16px; pointer-events:none;
transform:translateZ(1px);
background:radial-gradient(50% 0% at 50% 0%, rgba(0,0,0,.62), transparent 72%);
}
.storeroom__cell .niche{
width:100%; padding:9px; border-radius:9px;
background:linear-gradient(180deg,#090B0E,#06070A);
box-shadow:
inset 0 3px 10px rgba(0,0,0,.95),
inset 0 -1px 0 rgba(255,255,255,.05),
inset 0 0 0 1px rgba(255,255,255,.05),
0 0 26px -8px color-mix(in srgb, var(--accent,#9AA0A6) 40%, transparent);
transform:translateZ(2px);
transition:transform .5s var(--ease), box-shadow .5s var(--ease), opacity .45s var(--ease);
}
.storeroom__cell .niche::after{border-color:rgba(255,255,255,.07); box-shadow:0 0 0 1px rgba(0,0,0,.85)}
.storeroom__cell .niche:hover,.storeroom__cell .niche:focus-within{
transform:translateZ(150px);
box-shadow:
inset 0 3px 10px rgba(0,0,0,.9),
0 40px 64px -20px rgba(0,0,0,.9),
0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent),
0 0 52px -6px color-mix(in srgb, var(--accent) 60%, transparent);
z-index:20;
}
.storeroom__cell .machine{aspect-ratio:9/20.4}
.storeroom .niche:hover .machine,.storeroom .machine:hover{transform:none}
/* Go-closer floor marks — one decal per machine, click to walk up close */
.storeroom__marks{
position:absolute; left:0; right:0; top:44px;
display:grid; grid-template-columns:repeat(var(--cols,8),minmax(0,1fr));
gap:14px 12px; transform:translateZ(8px);
}
.storeroom__mark{
position:relative; justify-self:center;
width:130px; height:80px; padding:0; border:0; background:none; cursor:pointer;
filter:drop-shadow(0 0 16px rgba(224,234,248,.8)) drop-shadow(0 6px 14px rgba(0,0,0,.7));
transition:filter .3s var(--ease), transform .3s var(--ease);
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
.storeroom__mark-glyph{
position:absolute; left:50%; top:2px; width:44px; height:42px;
transform:translateX(-50%);
background:linear-gradient(180deg, #FFFFFF, #D0D7E0 62%, #9AA5B5);
clip-path:polygon(50% 4%, 96% 92%, 66% 74%, 50% 96%, 34% 74%, 4% 92%);
animation:markNudge 2.2s ease-in-out infinite;
animation-delay:calc(var(--d, 0) * 1ms);
filter:drop-shadow(0 0 5px rgba(255,255,255,.8));
}
.storeroom__mark-text{
position:absolute; left:50%; bottom:0; transform:translateX(-50%);
display:block; padding:5px 14px;
background:rgba(8,10,14,.88); border:1px solid rgba(255,255,255,.22);
color:#fff; font:700 12px/1 var(--font-d); letter-spacing:.1em;
border-radius:999px; white-space:nowrap;
backdrop-filter:blur(4px);
transition:transform .3s var(--ease);
}
.storeroom__mark:hover,.storeroom__mark:focus-visible{
filter:drop-shadow(0 0 16px rgba(255,255,255,.9)) drop-shadow(0 8px 14px rgba(0,0,0,.65));
}
.storeroom__mark:hover .storeroom__mark-glyph,
.storeroom__mark:focus-visible .storeroom__mark-glyph{animation-play-state:paused}
.storeroom__mark:hover .storeroom__mark-text,
.storeroom__mark:focus-visible .storeroom__mark-text{
transform:translateX(-50%) translateY(-3px);
border-color:rgba(255,255,255,.3);
}
@keyframes markNudge{
0%,100%{transform:translateX(-50%) translateY(0); opacity:.7}
50% {transform:translateX(-50%) translateY(-6px); opacity:1}
}
/* focused state — camera moved in, siblings recede */
.storeroom.is-focused .storeroom__cell:not(.is-focus){pointer-events:none}
.storeroom.is-focused .storeroom__cell:not(.is-focus) .niche{opacity:.28}
.storeroom.is-focused .storeroom__cell:not(.is-focus) .storeroom__name{opacity:.4}
/* side-wall close-up: the walked-to machine is everything, the room recedes */
.storeroom__back,.storeroom__floor,.storeroom__ceil{transition:opacity .45s var(--ease)}
/* closeup: the merchant subdomain hero machine (s3--xl) swapped into the cell */
.storeroom__xl{ pointer-events:auto; }
.storeroom__xl .s3{ margin:0 auto; }
.storeroom__xl .s3__rig{ filter:drop-shadow(0 50px 80px rgba(0,0,0,.95)); }
.storeroom.is-focused .storeroom__xl{ z-index:25; }
.storeroom__cell.is-focus .niche{
transform:translateZ(230px);
box-shadow:
inset 0 3px 10px rgba(0,0,0,.9),
0 50px 80px -24px rgba(0,0,0,.95),
0 0 0 1.5px color-mix(in srgb, var(--accent) 80%, transparent),
0 0 70px -6px color-mix(in srgb, var(--accent) 72%, transparent);
z-index:25;
}
/* sticky control dock under the room — exit + pager + music stay reachable while scrolling */
.storeroom__dock{
position:sticky; bottom:16px; z-index:50;
display:flex; gap:10px; justify-content:center; align-items:center;
width:max-content; max-width:calc(100% - 32px);
margin:18px auto 0;
}
.storeroom__dock:not(:has(> :not([hidden]))){display:none}
.storeroom__exit{
display:inline-flex; align-items:center; gap:8px;
padding:11px 20px; border-radius:999px; cursor:pointer;
background:rgba(8,10,14,.85); border:1px solid rgba(255,255,255,.24);
color:#EDEFF2; font:600 13px/1 var(--font-d); letter-spacing:.03em;
backdrop-filter:blur(6px);
box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.04);
animation:roomIn .35s var(--ease) both;
}
.storeroom__exit:hover{background:rgba(24,28,36,.92); border-color:rgba(255,255,255,.4)}
.storeroom__exit[hidden],.storeroom__pager[hidden],.storeroom__sound[hidden]{display:none}
.storeroom.is-focused .storeroom__pager{display:none}
/* Mobile HUD: shown when the camera walks to a machine on phones.
Sits centred just below the dock and surfaces the machine's
name + category + a one-line hint, so the user knows what they're
looking at without rotating the 3D scene. */
.storeroom__hud{
position:absolute; left:50%; bottom:96px; transform:translateX(-50%);
display:flex; align-items:center; gap:10px;
padding:10px 16px; border-radius:999px;
background:rgba(8,10,14,.86); border:1px solid rgba(255,255,255,.18);
color:#EDEFF2; font:600 13px/1 var(--font-d); letter-spacing:.02em;
box-shadow:0 12px 34px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.04);
backdrop-filter:blur(6px);
max-width:calc(100% - 32px);
animation:roomIn .35s var(--ease) both;
z-index:30;
}
.storeroom__hud[hidden]{display:none}
.storeroom__hud-name{font-size:14px; font-weight:800; color:#fff}
.storeroom__hud-cat{
padding:3px 8px; border-radius:99px;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
color:rgba(255,255,255,.78);
}
.storeroom__hud-hint{
font-size:11.5px; font-weight:600; color:rgba(255,255,255,.7);
letter-spacing:.04em;
}
@media (max-width: 720px){
.storeroom__hud{
flex-direction:column; align-items:flex-start; gap:5px;
bottom:120px; padding:12px 16px; border-radius:14px;
text-align:left;
}
.storeroom__hud-name{font-size:15px}
.storeroom__hud-cat{align-self:flex-start}
}
/* Mobile: keep the dock reachable on smaller screens and prevent
the HUD from sliding off. */
@media (max-width: 720px){
.storeroom__dock{gap:8px; bottom:20px; max-width:calc(100% - 32px)}
.storeroom__exit{padding:14px 18px; font-size:13px; min-height:48px}
.storeroom__sound,.storeroom__pgbtn{width:48px; height:48px; font-size:18px}
}
/* ambient music toggle */
.storeroom__sound{
width:40px; height:40px; border-radius:50%; cursor:pointer;
display:grid; place-items:center; padding:0;
background:rgba(8,10,14,.85); border:1px solid rgba(255,255,255,.24);
color:#C9CFD8; font-size:17px; line-height:1;
backdrop-filter:blur(6px);
box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.04);
transition:color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.storeroom__sound:hover{color:#fff; border-color:rgba(255,255,255,.4)}
.storeroom__sound.is-on{
color:#fff;
border-color:color-mix(in srgb, var(--accent,#9AA0A6) 75%, transparent);
box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 18px -2px color-mix(in srgb, var(--accent,#9AA0A6) 65%, transparent);
animation:soundPulse 2.6s ease-in-out infinite;
}
@keyframes soundPulse{0%,100%{box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 14px -2px color-mix(in srgb, var(--accent,#9AA0A6) 55%, transparent)}50%{box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 26px -2px color-mix(in srgb, var(--accent,#9AA0A6) 85%, transparent)}}
/* pager — shown only when machines exceed 2 wall rows */
.storeroom__pager{
display:flex; align-items:center; gap:4px;
padding:6px 8px; border-radius:999px;
background:rgba(8,10,14,.8); border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(6px);
box-shadow:0 12px 34px rgba(0,0,0,.5);
}
.storeroom__pgbtn{
width:34px; height:34px; border-radius:50%; cursor:pointer;
display:grid; place-items:center; padding:0;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
color:#E8EAEE; font-size:19px; line-height:1;
transition:background .25s var(--ease), border-color .25s var(--ease);
}
.storeroom__pgbtn:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4)}
.storeroom__pgnum{
font:600 12px/1 var(--font-d); color:#C9CED6;
min-width:46px; text-align:center; letter-spacing:.06em;
}
/* floor — lies flat from the wall base, extending past the camera plane so it fills the bottom */
.storeroom__floor{
position:absolute; left:0; right:0; top:100%; height:calc(var(--depth) + 700px);
transform-origin:top center; transform:rotateX(90deg);
transform-style:preserve-3d;
background:
linear-gradient(180deg, transparent 7%, rgba(224,235,250,.085) 14%, transparent 21%),
linear-gradient(180deg, transparent 37%, rgba(224,235,250,.085) 44%, transparent 51%),
linear-gradient(180deg, transparent 67%, rgba(224,235,250,.07) 74%, transparent 81%),
linear-gradient(180deg, rgba(0,0,0,.72), transparent 24%),
repeating-conic-gradient(#141922 0% 25%, #0B0E13 0% 50%) 0 0/150px 150px,
linear-gradient(180deg,#0E1116,#090B0E);
box-shadow:inset 0 34px 60px -22px rgba(205,218,238,.18);
}
/* ceiling — above the wall, extending back over the viewer's head */
.storeroom__ceil{
position:absolute; left:0; right:0; bottom:100%; height:calc(var(--depth) + 700px);
transform-origin:bottom center; transform:rotateX(-90deg);
background:linear-gradient(180deg,#090B0F,#0E1116 60%,#12161C);
}
.storeroom__ceil i{
position:absolute; left:14%; right:14%; height:9px; border-radius:8px;
background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92) 14%, #fff 50%, rgba(255,255,255,.92) 86%, rgba(255,255,255,0));
box-shadow:0 0 22px rgba(255,255,255,.55), 0 0 80px rgba(214,224,238,.32);
}
.storeroom__ceil i:nth-child(1){top:14%}
.storeroom__ceil i:nth-child(2){top:44%}
.storeroom__ceil i:nth-child(3){top:74%}
/* atmosphere overlays (flat, painted over the room) */
.storeroom__vignette{
position:absolute; inset:0; pointer-events:none;
background:radial-gradient(118% 86% at 50% 44%, transparent 44%, rgba(2,3,5,.8) 100%);
}
.storeroom__door{position:absolute; inset:0; pointer-events:none}
.doorjamb{
position:absolute; top:0; bottom:0; width:clamp(22px,3.6vw,54px);
background:linear-gradient(90deg,#05060A 0%,#151920 58%,#0B0D11 100%);
}
.doorjamb--l{left:0; border-right:1px solid rgba(255,255,255,.18); box-shadow:6px 0 30px rgba(0,0,0,.8), inset 1px 0 0 rgba(255,255,255,.1)}
.doorjamb--r{right:0; transform:scaleX(-1); border-right:1px solid rgba(255,255,255,.18); box-shadow:6px 0 30px rgba(0,0,0,.8), inset 1px 0 0 rgba(255,255,255,.1)}
.doorhead{
position:absolute; top:0; left:0; right:0; height:clamp(18px,2.6vw,40px);
background:linear-gradient(180deg,#181C23,#0A0C10);
box-shadow:0 10px 34px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.1);
}
.doorsheen{
position:absolute; inset:0;
background:linear-gradient(103deg, transparent 28%, rgba(255,255,255,.05) 36%, transparent 44%, transparent 62%, rgba(255,255,255,.03) 70%, transparent 78%);
}
/* staggered machine entrance when the room becomes visible / filters change */
.storeroom.is-visible .storeroom__cell{
animation:roomIn .55s var(--ease) both;
animation-delay:calc(var(--i,0) * 65ms + 130ms);
}
@keyframes roomIn{from{opacity:0; transform:translateY(30px) scale(.94)} to{opacity:1; transform:none}}
@media (max-width:820px){
.storeroom__scene{perspective:800px; padding-top:56px; padding-bottom:170px}
.storeroom__room{--depth:390px; --cell-min:72px}
.storeroom__grid{gap:12px 8px}
.storeroom__cell .niche{padding:7px}
.doorjamb{width:16px} .doorhead{height:13px}
}
@media (max-width:480px){
.storeroom__scene{perspective:700px; padding-bottom:140px}
.storeroom__room{--depth:310px; --cell-min:68px}
}
@media (prefers-reduced-motion:reduce){
.storeroom__room{--walk:0px}
}
/* ---------- 11. Mobile parity pass -------------------------------
Touch targets ≥ 44 px; tap-stable sticky-hover lift; FAQ/contact
form on mobile; cart-fab clears chat-fab; smooth-scroll anchor
offset for the sticky nav; focus rings restored where outline:none
hid them. The 3D /showroom scene is intentionally excluded. */
html{scroll-padding-top:calc(var(--nav-h, 64px) + 8px)}
/* Chat-fab and cart-fab both anchored at bottom-right on mobile.
Lift the cart-fab above the chat-fab so taps don't collide. */
@media (max-width: 520px){
.cart-fab{bottom:90px; width:54px; height:54px; right:14px}
/* Hide the cart-fab's lift-on-hover on touch (sticky-hover shield) */
.cart-fab:hover{transform:none}
}
/* Focus visibility: pull back outline:none that hid keyboard focus
on category pills; bring a brand-soft ring back. */
.cat:focus{outline:none}
.cat:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
.field input:focus,.field textarea:focus,.field select:focus{
/* brand focus ring stays the same — made a touch more visible */
box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent)
}
/* FAQ accordion: block emits .faq__item, CSS historically targeted .qa.
Apply the same look to .faq__item so it doesn't fall back to UA. */
.faq{display:grid; gap:10px}
.faq__item{
border:1px solid var(--line);
background:var(--panel-2); border-radius:var(--r-m);
transition:border-color .2s, box-shadow .2s;
overflow:hidden;
}
.faq__item[open]{box-shadow:var(--sh-m); border-color:var(--line)}
.faq__item > summary{
list-style:none; cursor:pointer;
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:14px 16px; font-weight:700; font-size:14.5px;
color:var(--ink);
min-height:48px;
user-select:none;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
.faq__item > summary::-webkit-details-marker{display:none}
.faq__item > .faq__a{padding:0 16px 14px; color:var(--ink-2); font-size:13.6px; line-height:1.6}
/* Contact form (custom_html block, inline-style inputs/textarea/button).
Reinforce tap-target sizing on mobile without disturbing the inline
styles. */
.card input,.card textarea,.card button[type="submit"]{
font-size:15px;
}
@media (max-width: 520px){
.card input,
.card textarea,
.card button{ padding:14px 14px }
.card button[type="submit"]{ min-height:48px }
}
/* CTA band: keep buttons full-width on phone so they don't overflow */
@media (max-width: 640px){
.cta-band .btn-row{flex-direction:column; align-items:stretch}
.cta-band .btn-row > .btn{width:100%}
}
/* kpis: keep 4-col desktop, 2-col tablet, but force single column
on phones so the cards aren't squeezed. */
@media (max-width: 520px){
.kpis{grid-template-columns:1fr; gap:8px}
.hero-feature{padding:14px 14px; min-height:48px}
.hero-feature h4{font-size:13.5px}
.hero-feature p{font-size:12.5px; line-height:1.45}
.mhero__cta .btn{width:100%; min-height:48px}
/* mhero features already flex-wrap; keep buttons usable when stacked. */
}
/* Cart drawer touch targets */
.cartd__qty button{
/* keep 26-px compact on desktop, but ≥44 px on touch */
}
@media (max-width: 520px){
.cartd__qty button{width:44px; height:44px; font-size:18px}
.cartd__qty--lg button{width:44px; height:44px; font-size:18px}
.cartd__rm{width:44px; height:44px}
.iconbtn{width:44px; height:44px}
}
/* Touch-action:manipulation + tap-highlight removal on small icons
so taps feel native and tunnellers don't capture long-press */
.nav__burger,.nav__cart,.nav__theme,.nav__login,
.cart-fab,.cat,.niche,.cta-band .btn, .btn,
.storeroom__exit,.storeroom__pgbtn,.storeroom__sound,
.faq__item > summary{
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
/* Hover-only decorations: only lift on devices that hover. The base
styles stay so non-hover devices don't get an unresponsive state
when the user releases a tap. */
@media (hover: hover){
.hero-feature:hover{border-color:var(--brand); box-shadow:0 4px 12px rgba(var(--shadow-rgb),.06)}
.cart-fab:hover{transform:translateY(-4px) scale(1.04)}
.pcard:hover,
.sg:hover,
.niche:hover,
.jcard:hover,
.plan:hover,
.cat:hover,
.hero-feature:hover{transform:translateY(-4px)}
}
@media (hover: none){
/* Strip any transform-based hover decorations on touch devices. */
.hero-feature:hover,
.cart-fab:hover,
.pcard:hover,
.sg:hover,
.niche:hover,
.jcard:hover,
.plan:hover,
.cat:hover{transform:none}
}
/* ---------- end mobile parity pass -------------------------------- */
/* ---------- 12. Mobile parity pass: showroom 3D room ----------
Touch targets ≥ 44 px, tap-action manipulation, calmer nudge
animation on small screens. Hover transforms behind hover:hover;
no transform animation drift on touch devices (the arrows don't
hold a "pressed" state when sticky-hover never decays). */
@media (hover: hover){
.storeroom__exit:hover,
.storeroom__pgbtn:hover,
}
@media (hover: none){
/* keep nudging but pause on touch to avoid constant repaints */
.storeroom__pgbtn:hover,
.storeroom__exit:hover,
.storeroom__sound:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.32);color:#fff}
}
/* Larger tap targets so fingers don't miss the dock */
@media (max-width: 520px){
.storeroom__pgbtn{width:44px; height:44px; font-size:20px}
.storeroom__sound{width:48px; height:48px; font-size:18px}
.storeroom__dock{gap:14px; padding-inline:20px}
.storeroom__exit{padding:14px 22px; min-height:48px; font-size:14px}
}
/* Touch-action on entire scene so two-finger pinches / taps don't
chain-scroll into machine parallax unexpectedly. */
.storeroom__scene,
.s3,
.s3__room,
.storeroom__mark,
.storeroom__pgbtn,
.storeroom__exit,
.storeroom__sound{
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
/* The default focus-visible outline (2 px brand) is hard to see on
the dark 3D scene. Brighten the strokes for the showroom cluster. */
.storeroom__mark:focus-visible,
.storeroom__pgbtn:focus-visible,
.storeroom__exit:focus-visible,
.storeroom__sound:focus-visible{
outline:2px solid #FFFFFF; outline-offset:4px;
}
/* iOS notch / safe area — push the dock above home indicator. */
@supports(padding: max(0px)){
.storeroom__dock{
bottom:calc(16px + env(safe-area-inset-bottom));
padding-bottom:max(0px, env(safe-area-inset-bottom));
}
}
/* ---------- end showroom mobile parity pass --------------------- */
/* ==========================================================================
Cabinet recess (opt-in per machine with data-depth, currently the home
hero). No 3D is applied to the products themselves any more - they are flat
transparent cut-outs. What is left describes the CABINET, which is what
makes an empty dark slot read as a real compartment:
1. a recessed compartment per slot (occlusion in the corners)
2. a shelf floor with a lit front lip for the product to stand on
3. a glass pane over the whole interior, so products sit behind glass
========================================================================== */
.s3--depth .s3__slot-pic{
background:
linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 34%),
linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 72%, rgba(0,0,0,.55) 100%),
linear-gradient(180deg, #0D1117 0%, #080A0E 58%, #0A0D12 100%);
box-shadow:
inset 0 12px 18px -8px rgba(0,0,0,.9),
inset 0 -10px 16px -10px rgba(0,0,0,.75),
inset 3px 0 10px -6px rgba(0,0,0,.7),
inset -3px 0 10px -6px rgba(0,0,0,.7);
}
/* shelf floor + lit front lip, painted behind the product */
.s3--depth .s3__slot-pic::before{
content:""; position:absolute; left:0; right:0; bottom:0; height:38%; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.68) 100%);
border-top:1px solid rgba(255,255,255,.07);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
/* the product sits on the floor */
.s3--depth .s3__slot-pic img{position:relative; z-index:2}
/* the front pane: everything below now reads as being behind glass */
.s3--depth .s3__glass::after{
content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
background:
linear-gradient(101deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 60%, rgba(255,255,255,.07) 76%, rgba(255,255,255,0) 100%),
linear-gradient(180deg, rgba(198,220,255,.06) 0%, rgba(255,255,255,0) 24%, rgba(0,0,0,.05) 74%, rgba(0,0,0,.14) 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 20px 34px -20px rgba(255,255,255,.12);
}
/* ==========================================================================
Hero riffs: 12 Vendifys brand pillars rendered into the hero machine
compartments as inline-svg cards. See js/site.js RIFFMARKS for the
glyph set and data/riffs.js for the words.
Each compartment stays 1:1 (aspect-ratio on the slot, aspect set by
the row height), centred in its column. The riff card lays out as a
24x24 mark, the word in display type, a one-clause tagline - nothing
stretches, nothing overflows. The three accent colours of the brand
palette rotate through the wall so the array reads as composed.
========================================================================== */
.s3--riff .s3__slot-tag{display:none}
.s3--riff .s3__slots{justify-items:center}
.s3--riff .s3__slot{
background:rgba(255,255,255,.035);
height:100%; max-height:100%; width:auto; max-width:100%; aspect-ratio:1/1;
justify-self:center;
}
.s3--riff .s3__slot-pic{
padding:6px 5px;
display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
gap:3px;
}
.s3--riff .riff{cursor:default}
/* Brand triad: red, amber, sage. Each riff rotates to a different one so
the 12-card wall reads as a mood-board, not a wallpaper. */
.s3--riff .riff--a0{--riff-accent:#E34E4E}
.s3--riff .riff--a1{--riff-accent:#D89E3A}
.s3--riff .riff--a2{--riff-accent:#6FA886}
.s3--riff .riff__mark{
width:22px; height:22px; display:block;
color:var(--riff-accent,#E34E4E);
flex:0 0 auto;
filter:drop-shadow(0 1px 0 rgba(0,0,0,.5));
}
.s3--riff .riff__word{
font-family:var(--font-display, Manrope, system-ui, sans-serif);
font-weight:800; font-size:8.5px; letter-spacing:.07em; line-height:1.05;
color:#F4F5F6; text-transform:uppercase;
margin-top:auto; white-space:nowrap;
}
.s3--riff .riff__tag{
font-family:var(--font-body, Inter, system-ui, sans-serif);
font-weight:500; font-size:6.5px; line-height:1.2;
color:rgba(244,245,246,.55); margin-top:1px; text-transform:uppercase;
letter-spacing:.05em;
}
.s3--riff .s3__slot--riff:hover .riff__word{color:var(--riff-accent,#E34E4E)}
/* ---------- Partner program page -------------------------------------- */
.partner-hero{padding:96px 0 64px;background:radial-gradient(60% 80% at 50% 0%,rgba(227,78,78,.10),transparent 60%),var(--wall-0);color:var(--ink);text-align:left}
[data-theme="dark"] .partner-hero{background:radial-gradient(60% 80% at 50% 0%,rgba(227,78,78,.16),transparent 60%),#0B0D11;color:#EDEDF0}
.partner-hero h1{font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.05;letter-spacing:-.02em;margin:.4em 0}
.partner-hero__inner>[data-shimmer]{background:linear-gradient(90deg,--partner-accent,#FF9F4B 40%,--partner-accent 80%);background-clip:text;-webkit-background-clip:text;color:transparent}
.partner-hero .lead{font-size:1.05rem;color:rgba(0,0,0,.65);max-width:60ch;margin:0 0 22px}
[data-theme="dark"] .partner-hero .lead{color:rgba(255,255,255,.7)}
.partner-pillars{padding:80px 0;border-top:1px solid var(--line);background:var(--wall-0)}
[data-theme="dark"] .partner-pillars{background:#0B0D11}
.partner-pillars h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:0 0 28px;text-align:center}
.partner-pillars__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.partner-pillar{padding:22px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);transition:transform .25s var(--ease),border-color .25s}
.partner-pillar:hover{transform:translateY(-3px);border-color:rgba(227,78,78,.4)}
.partner-pillar__mark{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;background:rgba(227,78,78,.12);color:var(--partner-accent,#E34E4E);margin-bottom:14px}
.partner-pillar h3{margin:0 0 6px;font-size:1.05rem}
.partner-pillar p{margin:0;color:rgba(0,0,0,.7);font-size:.92rem;line-height:1.5}
[data-theme="dark"] .partner-pillar p{color:rgba(255,255,255,.7)}
.partner-pitch{padding:80px 0;background:var(--wall-1)}
[data-theme="dark"] .partner-pitch{background:#101218}
.partner-pitch__card{max-width:780px;margin-inline:auto;padding:38px 32px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02)}
.partner-pitch .kicker{display:inline-block;padding:4px 10px;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--partner-accent,#E34E4E);background:rgba(227,78,78,.12);border-radius:999px;margin-bottom:14px}
.partner-pitch h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 14px;line-height:1.15}
.partner-pitch p{margin:0 0 10px;color:rgba(0,0,0,.75);font-size:.98rem;line-height:1.55}
.partner-pitch .note{font-weight:600;color:rgba(0,0,0,.9);margin-top:14px}
.partner-pitch .note span{color:var(--partner-accent,#E34E4E);margin-right:6px}
[data-theme="dark"] .partner-pitch p{color:rgba(255,255,255,.75)}
.partner-faq{padding:80px 0;background:var(--wall-0)}
[data-theme="dark"] .partner-faq{background:#0B0D11}
.partner-faq h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:0 0 28px;text-align:center}
.partner-faq__list{display:grid;grid-template-columns:1fr;gap:12px;max-width:780px;margin-inline:auto}
.partner-faq details{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.partner-faq summary{cursor:pointer;font-weight:700;list-style:none;color:var(--ink)}
.partner-faq summary::-webkit-details-marker{display:none}
.partner-faq details[open] summary{color:var(--partner-accent,#E34E4E)}
.partner-faq details[open]{border-color:rgba(227,78,78,.4)}
.partner-faq__a{padding:10px 0 4px;color:rgba(0,0,0,.7);font-size:.92rem;line-height:1.55}
[data-theme="dark"] .partner-faq summary{color:#F1F2F4}
[data-theme="dark"] .partner-faq__a{color:rgba(255,255,255,.7)}
.partner-cta{padding:80px 0 96px;background:var(--wall-1)}
[data-theme="dark"] .partner-cta{background:#101218}
.partner-cta__card{max-width:720px;margin-inline:auto;padding:40px 32px;border-radius:22px;text-align:center;background:var(--gradient,linear-gradient(135deg,#171a21,#0e1014));color:var(--ink)}
[data-theme="dark"] .partner-cta__card{color:#F1F2F4}
.partner-cta .kicker{display:inline-block;padding:4px 12px;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--partner-accent,#E34F4F);background:rgba(227,78,78,.14);border-radius:999px;margin-bottom:14px}
.partner-cta h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:0 0 10px;line-height:1.15}
.partner-cta .note{color:rgba(0,0,0,.6);margin-bottom:24px}
[data-theme="dark"] .partner-cta .note{color:rgba(255,255,255,.7)}
.partner-cta .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ---------- Footer affiliate highlight ------------------------------ */
.footer__affiliate{margin:24px 0 8px;grid-column:1 / -1}
.footer__affiliate-callout{
margin:0;
padding:18px 22px;
border-radius:14px;
background:linear-gradient(110deg,rgba(227,78,78,.10),rgba(227,78,78,.02) 60%,transparent);
border:1px solid rgba(227,78,78,.22);
display:flex;gap:18px;align-items:center;flex-wrap:wrap;
}
.footer__affiliate-callout__copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 220px}
.footer__affiliate-callout__copy b{font-size:.92rem;font-weight:700}
.footer__affiliate-callout__copy span{font-size:.78rem;color:rgba(255,255,255,.62);line-height:1.4}
[data-theme="dark"] .footer__affiliate-callout__copy span{color:rgba(255,255,255,.7)}
/* The CTA itself uses .btn.btn--brand.btn--sm so it inherits the site's
brand-button look, hover, and focus treatment. We just nudge the chevron
icon and let it live where the chrome currently lives. */
.footer__affiliate-callout .btn--brand{flex:0 0 auto}
/* ==========================================================================
Vendifys storefront hero - dynamic chrome wired through data attrs.
The page block emits data-led-color / data-led-color-2 / data-led-pattern
on the stage mount. We turn them into CSS custom properties and update
the LED strip / glass border accordingly. The pattern selectors
.hero3d--led-aurora / .hero3d--led-vu / .hero3d--led-reef / .hero3d--led-none
swap the LED gradient between four schemes:
aurora - multicolor rainbow (the default)
vu - two-colour gradient, slow shift
reef - two-colour gradient, gentle pulse
none - static, two-colour gradient, no animation
========================================================================== */
[data-led-color]{--led-c1:attr(data-led-color color, #E34E4E)}
[data-led-color-2]{--led-c2:attr(data-led-color-2 color, #D89E3A)}
/* Core gradient: page-level LED presets may set --led-c1/2 (data-led-color),
otherwise the merchant's AI accent (--led-1/2, set by applyMachineTheme)
drives it. No hardcoded rainbow and no !important. */
.s3__strip-core,.s3__strip-glow em{
background:linear-gradient(120deg, var(--led-c1, var(--led-1, #E34E4E)), var(--led-c2, var(--led-2, #D89E3A)));
background-size:100% 100%;
}
.hero3d--led-aurora .s3__strip,.hero3d--led-aurora .s3__strip-glow em{
animation:s3hue 18s linear infinite;
}
.hero3d--led-vu .s3__strip,.hero3d--led-vu .s3__strip-glow em{
animation:s3vu 12s ease-in-out infinite;
}
.hero3d--led-reef .s3__strip,.hero3d--led-reef .s3__strip-glow em{
animation:s3reef 6s ease-in-out infinite;
}
.hero3d--led-none .s3__strip,.hero3d--led-none .s3__strip-glow em{
animation:none;
}
@keyframes s3vu{
0%,100%{filter:hue-rotate(0deg) saturate(1)}
50%{filter:hue-rotate(40deg) saturate(1.18)}
}
@keyframes s3reef{
0%,100%{filter:brightness(.96) saturate(.92)}
50%{filter:brightness(1.08) saturate(1.18)}
}
/* The block's LED colours drive an ambient bloom behind the cabinet when the
machine is a photograph (the CSS LED strip itself is hidden then). */
.s3--machine-active .s3__room::before{
content:""; position:absolute; left:-78%; right:-78%; top:-55%; bottom:-45%;
background:radial-gradient(46% 34% at 50% 54%,
color-mix(in srgb, var(--led-c1,#5FA8FF) 62%, transparent) 0%, transparent 92%);
filter:blur(50px); opacity:.6; pointer-events:none;
}
@supports not (background: color-mix(in srgb, red 1%, transparent)){
.s3--machine-active .s3__room::before{background:radial-gradient(46% 34% at 50% 54%, rgba(95,168,255,.6) 0%, transparent 92%)}
}
/* the bloom keeps its blur while it animates, so it needs its own keyframes
rather than reusing the strip's bare filter animations */
@keyframes glowAurora{
0%{filter:blur(52px) hue-rotate(0deg)}
100%{filter:blur(52px) hue-rotate(360deg)}
}
@keyframes glowVu{
0%,100%{filter:blur(52px) saturate(1); opacity:.44}
50%{filter:blur(58px) saturate(1.35); opacity:.82}
}
@keyframes glowReef{
0%,100%{filter:blur(52px) brightness(.94) saturate(.94); opacity:.46}
50%{filter:blur(46px) brightness(1.3) saturate(1.25); opacity:.78}
}
.hero3d--led-aurora .s3--machine-active .s3__room::before{animation:glowAurora 20s linear infinite}
.hero3d--led-vu .s3--machine-active .s3__room::before{animation:glowVu 2.6s ease-in-out infinite}
.hero3d--led-reef .s3--machine-active .s3__room::before{animation:glowReef 4.4s ease-in-out infinite}
.hero3d--led-none .s3--machine-active .s3__room::before{animation:none; opacity:.5}
.no-anim .s3--machine-active .s3__room::before{animation:none}
/* When the photograph is the front face, none of the CSS chrome it replaces
should ever be drawn (marquee, slots, keypad, tray, LED strip, sheen). */
.s3--machine-active .s3__slots{display:none}
.s3--machine-active .s3__marquee,
.s3--machine-active .s3__panel,
.s3--machine-active .s3__brandbar,
.s3--machine-active .s3__strip,
.s3--machine-active .s3__sheen,
.s3--machine-active .s3__glass,
.s3--machine-active .s3__tray{display:none}
/* Front-of-machine banner text/image — sits above the riff row but
inside the cabinet. */
.hero3d__banner{
display:flex; align-items:center; gap:8px; padding:6px 10px;
font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--accent,#E34E4E);
}
.hero3d__banner-img{height:22px;width:auto;display:block}
/* Product chip - text-only slot (no image, no riff glyph) used when the
block provides a products list with image-less items. Designed for the
compact compartments of the machine - single-line name, short tag,
micro-font. */
.s3--riff .product-chip{padding:6px 5px;gap:1px;justify-content:flex-end}
.s3--riff .product-chip .riff__word{font-size:7px;line-height:1.05;letter-spacing:.04em}
.s3--riff .product-chip__name{font-size:7.5px;font-weight:800;color:#F4F5F6;line-height:1.05;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.s3--riff .product-chip .product__tag{margin-top:1px;color:rgba(244,245,246,.55);font-size:5.5px;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.s3--riff .product-chip .product__price{margin-top:auto;color:var(--accent,#E34E4E);font-size:7.5px;font-weight:800;line-height:1.1}
.s3--riff .product-chip .riff__word.product-chip__name{margin:0}
/* ==========================================================================
Machine-image mode - the page block supplies a cut-out photo of a real
machine. The photo becomes the box's FRONT FACE and the existing sides /
cap / back / cord faces give it genuine depth, so drag-to-rotate (plus a
slow idle sway) turns a flat picture into an object.
========================================================================== */
.s3--machine-active .s3{--s3depth:172px}
.s3--machine-active .s3__rig{height:auto; aspect-ratio:464 / 720}
.s3--machine-active .s3__front{
display:block; overflow:visible;
background:none; border:none; border-radius:0; box-shadow:none;
}
.s3--machine-active .s3__room{padding-top:6px}
/* the cabinet side/top/back the photograph cannot show: glossy black with a
lit leading edge so it reads as the same machine, not a void */
.s3--machine-active .s3__side,
.s3--machine-active .s3__cap{
background:
linear-gradient(105deg, rgba(255,255,255,.16) 0 1px, rgba(255,255,255,0) 1px),
linear-gradient(105deg,#1B1E23 0%, #0C0D11 42%, #050608 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset -1px 0 0 rgba(255,255,255,.05);
}
/* Media layer sits behind the machine photo so banner + product windows show
through the transparent areas of the front design, while the physical frame,
glass and dividers stay in front. */
.s3__media-back{
position:absolute; inset:0; z-index:0;
overflow:hidden; border-radius:inherit;
pointer-events:none;
}
.s3__media-back > *{pointer-events:auto}
/* When the page block provides a machine photo it is the front face of the
cabinet - absolutely filling .s3__front, whose size already matches the
image's own aspect ratio (set in JS from the natural size). */
.s3__machine-image{
position:absolute; inset:0; width:100%; height:100%;
object-fit:contain;
filter:drop-shadow(0 26px 44px rgba(0,0,0,.6)) drop-shadow(0 4px 12px rgba(0,0,0,.45));
pointer-events:none; -webkit-user-drag:none;
z-index:1;
}
/* ==========================================================================
Showcase machine face - super-admin configurable overlays
--------------------------------------------------------------------------
The photograph already contains a banner, six labelled compartments, the
PUSH ring and the Select Category button. All of that content is owned by
the platform (settings.machine_*), so it is painted as an opaque overlay
on top of the photo rather than read out of it. Every percentage below is
the rect scripts/machine-face.js crops at, so a fresh install lines up
pixel for pixel, an edited value simply replaces what is underneath, and a
photo that fails to load still has its baked content covered.
Text/icon offsets are in container query units because the rig is 326px
wide on desktop and 253px on mobile: 1 image px = 0.2155cqw, identical at
both breakpoints. Each cqw declaration is preceded by its px fallback so
an engine without container queries degrades instead of collapsing.
========================================================================== */
.s3__face{
position:absolute; inset:0;
container-type:size;
z-index:1;
}
/* ---------- top banner --------------------------------------------------- */
.s3__banner{
position:absolute; left:8.19%; top:3.89%; width:83.62%;
/* The banner lives in the screen area at the top of the cabinet photo. Its
bottom edge is the top of the compartment area (--lm-top), so it can never
reach down and cover the bays or the PUSH tray. On a front part whose
banner screen is in a different position, --lm-top still keeps the banner
above the bays. */
bottom:auto; height:calc(var(--lm-top, 24%) - 3.89%);
overflow:hidden; border-radius:5px; border-radius:1.6cqw;
background:#07080A;
/* Machine elements (compartments, tray, touch panel) sit in front of the
banner. If the user's slide image is tall enough to overlap the bays, the
bays still win and the slide is clipped behind them. */
z-index:1;
}
.s3__slide{
position:absolute; inset:0; display:block; overflow:hidden;
text-decoration:none;
opacity:0; visibility:hidden;
transition:opacity .5s ease, visibility .5s;
background-color:var(--acc,#1D4ED8);
background-image:radial-gradient(125% 135% at 86% 10%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%);
}
.s3__slide.is-on{opacity:1; visibility:visible}
.s3__slide-media{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; display:block;
}
.s3__slide-tint{
position:absolute; inset:0;
background:
linear-gradient(96deg, rgba(3,5,9,.82) 0%, rgba(3,5,9,.48) 46%, rgba(3,5,9,.06) 78%, rgba(3,5,9,.26) 100%),
linear-gradient(180deg, rgba(3,5,9,.28) 0%, rgba(3,5,9,0) 36%, rgba(3,5,9,.44) 100%);
}
.s3__slide-copy{
position:absolute; left:11%; bottom:14%; max-width:64%;
display:flex; flex-direction:column; align-items:flex-start;
gap:2.6px; gap:.8cqw;
/* .s3 is text-align:center; the machine's copy is left-set like the photo */
text-align:left;
}
.s3__slide-title{
display:block; font-size:14px; font-size:4.2cqw;
font-weight:800; line-height:1.04; letter-spacing:-.015em;
color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.55);
}
.s3__slide-sub{
display:block; font-size:8px; font-size:2.4cqw;
font-weight:500; line-height:1.25;
color:rgba(255,255,255,.88); text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.s3__slide-cta{
display:inline-block; margin-top:4px; margin-top:1.2cqw;
padding:3.2px 8.5px; padding:1cqw 2.6cqw;
border-radius:99px; background:#fff; color:#0A0B0E;
font-size:7px; font-size:2.2cqw;
font-weight:800; letter-spacing:.02em; line-height:1.15;
box-shadow:0 1.6px 5px rgba(0,0,0,.35);
}
.s3__bn{
position:absolute; top:50%;
width:22px; width:6.5cqw; height:22px; height:6.5cqw;
min-width:22px; min-height:22px; max-width:34px; max-height:34px;
padding:0; border-radius:50%; z-index:3;
display:grid; place-items:center; cursor:pointer;
background:rgba(8,10,14,.58); color:#fff;
border:1px solid rgba(255,255,255,.28);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
transition:background .2s ease, border-color .2s ease;
}
.s3__bn:hover{background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.55)}
.s3__bn--p{left:4.4%; transform:translate(-50%,-50%)}
.s3__bn--n{right:4.1%; transform:translate(50%,-50%)}
.s3__bn i{
display:block; width:7px; width:2.1cqw; height:7px; height:2.1cqw;
min-width:6px; min-height:6px;
border-right:1.4px solid currentColor; border-right:.42cqw solid currentColor;
border-bottom:1.4px solid currentColor; border-bottom:.42cqw solid currentColor;
}
.s3__bn--p i{transform:rotate(135deg); margin-left:1.2px; margin-left:.35cqw}
.s3__bn--n i{transform:rotate(-45deg); margin-right:1.2px; margin-right:.35cqw}
.s3__dots{
position:absolute; left:50%; bottom:4%; transform:translateX(-50%);
display:flex; align-items:center; gap:5.8px; gap:1.8cqw; z-index:3;
}
.s3__dots i{
display:block; width:6px; width:1.8cqw; height:6px; height:1.8cqw;
min-width:5px; min-height:5px;
border-radius:50%; background:rgba(255,255,255,.45);
box-shadow:0 0 0 1px rgba(0,0,0,.32);
transition:background .2s ease, transform .2s ease;
}
.s3__dots i.is-on{background:#fff; transform:scale(1.2)}
/* ---------- six compartments -------------------------------------------- */
.s3__cells{position:absolute; inset:0; pointer-events:none; z-index:3}
.s3__cell{
position:absolute; display:block; overflow:hidden;
pointer-events:auto;
background:#07080A; text-decoration:none; color:#F4F6FA;
border-radius:6px; border-radius:1.8cqw;
transition:filter .2s ease;
}
/* The hardcoded positions below are the FALLBACK for any cell rendered without
inline layout styles (the classic photo's 3x2 grid). When faceCells emits
layout-driven inline styles — as it does for every front part that declares
a bay grid — those inline styles win by specificity and these rules are
ignored, so the cells sit precisely on the photograph's own bays. */
.s3__cells:not(.s3__cells--layout) > .s3__cell:nth-child(1){left:6.25%; width:24.14%; top:30.14%; height:18.75%}
.s3__cells:not(.s3__cells--layout) > .s3__cell:nth-child(2){left:33.62%; width:23.28%; top:30.14%; height:18.75%}
.s3__cells:not(.s3__cells--layout) > .s3__cell:nth-child(3){left:59.70%; width:23.28%; top:30.14%; height:18.75%}
.s3__cells:not(.s3__cells--layout) > .s3__cell:nth-child(4){left:6.25%; width:24.14%; top:54.44%; height:18.47%}
.s3__cells:not(.s3__cells--layout) > .s3__cell:nth-child(5){left:33.62%; width:23.28%; top:54.44%; height:18.47%}
.s3__cells:not(.s3__cells--layout) > .s3__cell:nth-child(6){left:59.70%; width:23.28%; top:54.44%; height:18.47%}
.s3__cell-win{
position:absolute; left:0; right:0; top:0; bottom:22.22%;
overflow:hidden; background:#07080A;
}
.s3__cell:nth-child(n+4) .s3__cell-win{bottom:22.56%}
.s3__cell-win img{width:100%; height:100%; object-fit:cover; display:block}
.s3__cell-bar{
position:absolute; left:0; right:0; bottom:0; height:22.22%;
display:block; background:#0A0B0F;
transition:background .2s ease;
}
.s3__cell:nth-child(n+4) .s3__cell-bar{height:22.56%}
.s3__cell:hover{filter:brightness(1.12)}
.s3__cell:hover .s3__cell-bar{background:#14171E}
.s3__cell:focus-visible{outline:2px solid #fff; outline-offset:-2px}
.s3__cell-ico{
position:absolute; left:3.5px; left:1.08cqw;
top:50%; transform:translateY(-50%);
height:90%; aspect-ratio:1; display:block;
}
.s3__cell-lbl{
position:absolute; left:25px; left:7.76cqw; right:9.3px; right:2.85cqw;
top:56%; transform:translateY(-50%);
font-size:6.35px; font-size:1.95cqw;
font-weight:700; line-height:1.15; letter-spacing:0;
text-align:left;
color:#F4F6FA; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
text-shadow:0 1px 2px rgba(0,0,0,.75);
}
.s3__cell-chev{
position:absolute; right:5px; right:1.51cqw;
top:56%; transform:translateY(-50%);
width:4px; width:1.2cqw; height:6.4px; height:2cqw;
color:rgba(255,255,255,.74);
filter:drop-shadow(0 1px 1px rgba(0,0,0,.7));
}
/* ---------- product compartments (six windows) -------------------------- */
.s3__cells--products{pointer-events:none}
.s3__cells--products > .s3__prod{pointer-events:auto}
.s3__prod{
position:absolute; display:block; overflow:hidden;
padding:0; border:none; background:transparent;
cursor:pointer; border-radius:inherit;
transition:transform .2s ease, filter .2s ease;
}
.s3__prod:hover{transform:scale(1.03); filter:brightness(1.08)}
.s3__prod:focus-visible{outline:2px solid #fff; outline-offset:-2px}
.s3__prod-win{
position:absolute; inset:0; overflow:hidden;
background:#07080A;
}
.s3__prod-win img{
width:100%; height:100%; object-fit:cover; display:block;
}
/* ---------- dynamic light: PUSH ring + Select Category -------------------
The ring itself was recoloured to white by scripts/machine-face.js; this
is the bloom, timed to the same 2.5s as @keyframes metallicWhiteShadow so
the machine and the site's brand buttons breathe together. */
@keyframes s3PushPulse{
0%,100%{
box-shadow:0 0 5px 1px rgba(255,255,255,.22), 0 0 20px 3px rgba(236,244,255,.14);
}
50%{
box-shadow:0 0 10px 2px rgba(255,255,255,.44), 0 0 30px 5px rgba(236,244,255,.26);
}
}
@keyframes s3CatPulse{
0%,100%{box-shadow:0 0 4px 1px rgba(255,255,255,.26)}
50%{box-shadow:0 0 9px 2px rgba(255,255,255,.52)}
}
.s3__pushglow{
position:absolute; left:9.91%; top:78.33%; width:70.47%; height:14.44%;
border-radius:32px; border-radius:10cqw;
pointer-events:none; z-index:2;
box-shadow:0 0 5px 1px rgba(255,255,255,.22), 0 0 20px 3px rgba(236,244,255,.14);
animation:s3PushPulse 2.5s infinite;
}
.s3__catglow{
position:absolute; left:88.58%; top:65.42%; width:7.76%; height:4.72%;
border-radius:5px; border-radius:1.6cqw;
pointer-events:none; z-index:2;
background:radial-gradient(58% 58% at 50% 50%, rgba(255,255,255,.16), rgba(255,255,255,0) 76%);
box-shadow:0 0 4px 1px rgba(255,255,255,.26);
animation:s3CatPulse 2.5s infinite;
}
@media (prefers-reduced-motion: reduce){
.s3__pushglow, .s3__catglow{animation:none}
.s3__slide{transition:none}
}
.no-anim .s3__pushglow, .no-anim .s3__catglow{animation:none}
/* ---------- merchant-selectable 3D machine shell styles -------------------- */
/* Preset looks merchants pick in the machine editor. Each style overrides the
CSS-built cabinet only; photo-front machines keep their photograph. */
.s3--style-classic{/* default dark cabinet */}
/* Minimal — clean white/silver, monochrome accents */
.s3--style-minimal .s3__front{
background:
linear-gradient(115deg, rgba(255,255,255,0) 13%, rgba(255,255,255,.35) 25%, rgba(255,255,255,.08) 35%, rgba(255,255,255,0) 43%),
linear-gradient(115deg, rgba(255,255,255,0) 57%, rgba(255,255,255,.14) 65%, rgba(255,255,255,0) 72%),
linear-gradient(165deg, #F4F5F7 0%, #E8EAED 18%, #DEE1E6 52%, #E8EAED 86%, #F4F5F7 100%);
border-color:rgba(0,0,0,.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.04),
inset 0 0 60px rgba(0,0,0,.05),
0 44px 90px rgba(0,0,0,.22), 0 12px 26px rgba(0,0,0,.14);
}
.s3--style-minimal .s3__side{
background:linear-gradient(105deg,#E4E6EA 0%, #C8CCD2 45%, #B8BDC4 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset -1px 0 0 rgba(255,255,255,.25);
}
.s3--style-minimal .s3__cap{
background:
linear-gradient(100deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.25) 48%, rgba(255,255,255,0) 62%),
linear-gradient(90deg,#E8EAED,#D1D5DB 55%, #B8BDC4);
}
.s3--style-minimal .s3__back{
background:
linear-gradient(125deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.12) 56%, rgba(255,255,255,0) 67%),
linear-gradient(160deg, #E4E6EA 0%, #C8CCD2 45%, #B8BDC4 100%);
border-color:rgba(0,0,0,.06);
}
.s3--style-minimal .s3__bottom{background:linear-gradient(180deg,#D1D5DB,#B8BDC4)}
.s3--style-minimal .s3__strip-core,.s3--style-minimal .s3__strip-glow em,.s3--style-minimal .s3__led{
background:repeating-linear-gradient(90deg,
#9CA3AF 0 34px, #9CA3AF 34px 68px, #9CA3AF 68px 102px, #9CA3AF 102px 136px,
#9CA3AF 136px 170px, #9CA3AF 170px 204px, #9CA3AF 204px 238px, #9CA3AF 238px 272px);
background-size:272px 100%;
}
.s3--style-minimal .s3__strip{animation:none}
.s3--style-minimal .s3__led{animation:none; box-shadow:0 0 10px rgba(156,163,175,.18), 0 0 20px rgba(156,163,175,.10)}
.s3--style-minimal .s3__marquee{
background:linear-gradient(180deg,#FFFFFF,#E8EAED);
box-shadow:inset 0 1px 0 rgba(255,255,255,1), inset 0 -8px 18px rgba(0,0,0,.08);
}
.s3--style-minimal .s3__marquee span{color:#15171B; text-shadow:none}
.s3--style-minimal .s3__marquee em{color:#059669; text-shadow:none}
.s3--style-minimal .s3__glass{
background:linear-gradient(170deg,#FFFFFF 0%, #F4F5F7 55%, #E8EAED 100%);
box-shadow:
inset 0 0 0 2px rgba(0,0,0,.08),
inset 0 14px 34px rgba(0,0,0,.08),
inset 0 -10px 26px rgba(0,0,0,.05);
}
.s3--style-minimal .s3__panel{
background:linear-gradient(180deg,#FFFFFF,#E8EAED);
box-shadow:inset 0 1px 0 rgba(255,255,255,1), inset 0 -8px 16px rgba(0,0,0,.08);
}
.s3--style-minimal .s3__screen{background:#E8EAED; color:#166534; box-shadow:inset 0 2px 6px rgba(0,0,0,.12), 0 0 10px rgba(22,101,52,.08)}
.s3--style-minimal .s3__slot{background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.10)}
.s3--style-minimal .s3__slot:hover,.s3--style-minimal .s3__slot:focus-visible{background:rgba(0,0,0,.08); border-color:rgba(0,0,0,.25); box-shadow:0 8px 22px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.10)}
.s3--style-minimal .s3__slot-tag{background:linear-gradient(180deg,#FFFFFF,#E8EAED); border-top-color:rgba(0,0,0,.10)}
.s3--style-minimal .s3__slot-tag b{color:#6B7280}
.s3--style-minimal .s3__slot-tag em{color:#111827}
.s3--style-minimal .s3__tray{background:linear-gradient(180deg,#E8EAED,#D1D5DB)}
.s3--style-minimal .s3__flap{background:linear-gradient(180deg,#FFFFFF,#E8EAED); color:#374151}
.s3--style-minimal .s3__brandbar{color:#6B7280}
/* Neon — black cabinet with electric magenta/cyan glow */
.s3--style-neon .s3__front{
background:
linear-gradient(115deg, rgba(255,255,255,0) 13%, rgba(0,255,255,.10) 25%, rgba(255,255,255,.02) 35%, rgba(255,255,255,0) 43%),
linear-gradient(115deg, rgba(255,255,255,0) 57%, rgba(255,0,255,.08) 65%, rgba(255,255,255,0) 72%),
linear-gradient(165deg, #0A0A0F 0%, #050508 18%, #020203 52%, #08080C 86%, #010102 100%);
border-color:rgba(0,255,255,.22);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,255,255,.08),
inset 0 0 60px rgba(0,0,0,.6),
0 0 30px rgba(0,255,255,.18), 0 0 60px rgba(255,0,255,.10),
0 44px 90px rgba(0,0,0,.45), 0 12px 26px rgba(0,0,0,.3);
}
.s3--style-neon .s3__side{
background:linear-gradient(105deg,#0F0F16 0%, #050508 45%, #020203 100%);
box-shadow:inset 0 1px 0 rgba(0,255,255,.12), inset -1px 0 0 rgba(255,0,255,.08);
}
.s3--style-neon .s3__cap{
background:
linear-gradient(100deg, rgba(255,255,255,0) 32%, rgba(0,255,255,.10) 48%, rgba(255,255,255,0) 62%),
linear-gradient(90deg,#15151E,#09090C 55%, #030304);
}
.s3--style-neon .s3__back{
background:
linear-gradient(125deg, rgba(255,255,255,0) 42%, rgba(255,0,255,.06) 56%, rgba(255,255,255,0) 67%),
linear-gradient(160deg, #0C0C12 0%, #050508 45%, #020203 100%);
border-color:rgba(0,255,255,.12);
}
.s3--style-neon .s3__bottom{background:linear-gradient(180deg,#0A0A0F,#000)}
.s3--style-neon .s3__strip-core,.s3--style-neon .s3__strip-glow em,.s3--style-neon .s3__led{
background:repeating-linear-gradient(90deg,
#FF00FF 0 68px, #00FFFF 68px 136px, #FF00FF 136px 204px, #00FFFF 204px 272px);
background-size:272px 100%;
}
.s3--style-neon .s3__strip{animation:s3hue 12s linear infinite}
.s3--style-neon .s3__led{box-shadow:0 0 12px rgba(255,0,255,.35), 0 0 24px rgba(0,255,255,.18)}
.s3--style-neon .s3__marquee{
background:linear-gradient(180deg,#0E0E14,#16161E);
box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -8px 18px rgba(0,0,0,.6), 0 0 18px rgba(255,0,255,.18);
}
.s3--style-neon .s3__marquee span{color:#00FFFF; text-shadow:0 0 14px rgba(0,255,255,.9)}
.s3--style-neon .s3__marquee em{color:#FF00FF; text-shadow:0 0 12px rgba(255,0,255,.8)}
.s3--style-neon .s3__glass{
background:linear-gradient(170deg,#0B0B12 0%, #06060A 55%, #08080D 100%);
box-shadow:
inset 0 0 0 2px rgba(0,255,255,.18),
inset 0 14px 34px rgba(0,0,0,.7),
inset 0 -10px 26px rgba(0,0,0,.55);
}
.s3--style-neon .s3__panel{
background:linear-gradient(180deg,#15151E,#0A0A0F);
box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -8px 16px rgba(0,0,0,.6);
}
.s3--style-neon .s3__screen{background:#050508; color:#00FFFF; box-shadow:inset 0 2px 6px rgba(0,0,0,.9), 0 0 14px rgba(0,255,255,.35)}
.s3--style-neon .s3__slot{background:rgba(255,255,255,.04); border-color:rgba(0,255,255,.18)}
.s3--style-neon .s3__slot:hover,.s3--style-neon .s3__slot:focus-visible{background:rgba(0,255,255,.12); border-color:rgba(0,255,255,.55); box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(0,255,255,.35)}
.s3--style-neon .s3__slot-tag{background:linear-gradient(180deg,#15151E,#0A0A0F); border-top-color:rgba(255,255,255,.08)}
.s3--style-neon .s3__slot-tag b{color:#9CA3AF}
.s3--style-neon .s3__slot-tag em{color:#00FFFF}
.s3--style-neon .s3__tray{background:linear-gradient(180deg,#15151E,#0A0A0F)}
.s3--style-neon .s3__flap{background:linear-gradient(180deg,#FF00FF,#C026D3); color:#fff}
.s3--style-neon .s3__brandbar{color:#9CA3AF}
/* Retro — warm cream body with wood trim and vintage red marquee */
.s3--style-retro .s3__front{
background:
linear-gradient(115deg, rgba(255,255,255,0) 13%, rgba(255,255,255,.25) 25%, rgba(255,255,255,.08) 35%, rgba(255,255,255,0) 43%),
linear-gradient(115deg, rgba(255,255,255,0) 57%, rgba(255,255,255,.12) 65%, rgba(255,255,255,0) 72%),
linear-gradient(165deg, #F5E6C8 0%, #EAD5A8 18%, #E0C58C 52%, #EAD5A8 86%, #F5E6C8 100%);
border-color:rgba(101,67,33,.25);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(101,67,33,.12),
inset 0 0 60px rgba(101,67,33,.12),
0 44px 90px rgba(0,0,0,.35), 0 12px 26px rgba(0,0,0,.22);
}
.s3--style-retro .s3__side{
background:linear-gradient(105deg,#8B5A2B 0%, #6F4320 45%, #4A2C12 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset -1px 0 0 rgba(0,0,0,.18);
}
.s3--style-retro .s3__cap{
background:
linear-gradient(100deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.18) 48%, rgba(255,255,255,0) 62%),
linear-gradient(90deg,#A07040,#7A4E25 55%, #5C3818);
}
.s3--style-retro .s3__back{
background:
linear-gradient(125deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.10) 56%, rgba(255,255,255,0) 67%),
linear-gradient(160deg, #7A4E25 0%, #5C3818 45%, #3E2610 100%);
border-color:rgba(0,0,0,.20);
}
.s3--style-retro .s3__bottom{background:linear-gradient(180deg,#5C3818,#3E2610)}
.s3--style-retro .s3__strip-core,.s3--style-retro .s3__strip-glow em,.s3--style-retro .s3__led{
background:repeating-linear-gradient(90deg,
#F59E0B 0 68px, #EF4444 68px 136px, #F59E0B 136px 204px, #EF4444 204px 272px);
background-size:272px 100%;
}
.s3--style-retro .s3__strip{animation:s3hue 18s linear infinite}
.s3--style-retro .s3__led{box-shadow:0 0 10px rgba(245,158,11,.25), 0 0 20px rgba(239,68,68,.12)}
.s3--style-retro .s3__marquee{
background:linear-gradient(180deg,#991B1B,#7F1D1D);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -8px 18px rgba(0,0,0,.35);
}
.s3--style-retro .s3__marquee span{color:#FEF3C7; text-shadow:0 0 10px rgba(251,191,36,.7)}
.s3--style-retro .s3__marquee em{color:#FDE68A; text-shadow:none}
.s3--style-retro .s3__glass{
background:linear-gradient(170deg,#4A3B2A 0%, #3A2E20 55%, #4A3B2A 100%);
box-shadow:
inset 0 0 0 2px rgba(251,191,36,.18),
inset 0 14px 34px rgba(0,0,0,.55),
inset 0 -10px 26px rgba(0,0,0,.4);
}
.s3--style-retro .s3__panel{
background:linear-gradient(180deg,#A07040,#6F4320);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -8px 16px rgba(0,0,0,.35);
}
.s3--style-retro .s3__screen{background:#1C1917; color:#F59E0B; box-shadow:inset 0 2px 6px rgba(0,0,0,.8), 0 0 10px rgba(245,158,11,.18)}
.s3--style-retro .s3__slot{background:rgba(255,255,255,.07); border-color:rgba(251,191,36,.22)}
.s3--style-retro .s3__slot:hover,.s3--style-retro .s3__slot:focus-visible{background:rgba(251,191,36,.16); border-color:rgba(251,191,36,.55); box-shadow:0 8px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(251,191,36,.35)}
.s3--style-retro .s3__slot-tag{background:linear-gradient(180deg,#F5E6C8,#EAD5A8); border-top-color:rgba(101,67,33,.16)}
.s3--style-retro .s3__slot-tag b{color:#7C2D12}
.s3--style-retro .s3__slot-tag em{color:#431407}
.s3--style-retro .s3__tray{background:linear-gradient(180deg,#A07040,#6F4320)}
.s3--style-retro .s3__flap{background:linear-gradient(180deg,#F59E0B,#D97706); color:#431407}
.s3--style-retro .s3__brandbar{color:#F5E6C8}
/* Banner toggle — hides the promotional top strip/marquee (CSS cabinet) and
the overlay banner (photo-front cabinet). */
.s3--no-banner .s3__marquee,
.s3--no-banner .s3__strip,
.s3--no-banner .s3__banner{display:none}
/* ---------- auth modal (header login / signup) -------------------------- */
.auth-modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;padding:14vh 16px}
.auth-modal.is-open{display:flex}
.auth-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
.auth-modal__box{position:relative;width:100%;max-width:260px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--sh-l);animation:authPop .2s var(--ease)}
@keyframes authPop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.auth-modal__close{position:absolute;top:6px;right:10px;width:26px;height:26px;border:0;background:transparent;font-size:18px;color:var(--ink-2);cursor:pointer;border-radius:6px;line-height:1}
.auth-modal__close:hover{background:rgba(var(--shadow-rgb),.08);color:var(--ink)}
.auth-modal__mode,.auth-modal__tabs{display:flex;gap:3px;background:var(--panel-2);border-radius:10px;padding:3px;margin-bottom:10px}
.auth-modal__mode button,.auth-modal__tabs button{flex:1;border:0;background:transparent;padding:6px 4px;border-radius:7px;font-size:11px;font-weight:650;color:var(--ink-2);cursor:pointer}
.auth-modal__mode button.active,.auth-modal__tabs button.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(var(--shadow-rgb),.08)}
.auth-modal__body .field{margin-bottom:8px}
.auth-modal__body label{display:block;font-size:10px;font-weight:600;margin-bottom:3px;color:var(--ink-2)}
.auth-modal__body input{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--wall-0);color:var(--ink);font-size:12px}
.auth-modal__body .btn{width:100%;margin-top:2px;padding:9px 12px;font-size:13px}
.auth-modal__note{font-size:10px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.4}
.auth-modal__error{font-size:10px;color:#B3261E;margin-top:4px}
.nav__auth-combo{font-size:13px;font-weight:650;padding:7px 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink-2);cursor:pointer;white-space:nowrap}
/* There was no search anywhere on the site. This is the way in: one link in
the header on every page, plus an entry in the mobile menu. */
.nav__search{
display:grid; place-items:center; width:36px; height:36px; flex:none;
border-radius:9px; border:1px solid var(--line); background:var(--panel);
color:var(--ink-2); text-decoration:none;
}
.nav__search:hover{background:rgba(var(--shadow-rgb),.06); color:var(--ink)}
.nav__search svg{width:17px; height:17px}
.mobile-menu__search{
display:block; margin-top:6px; padding:11px 14px; border-radius:10px;
border:1px solid var(--line); font-weight:650; color:var(--ink);
}
.nav__auth-combo:hover{background:rgba(var(--shadow-rgb),.06);color:var(--ink)}
.mobile-menu button{display:flex;align-items:center;width:100%;padding:15px 4px;border:0;border-bottom:1px solid var(--line-soft);background:transparent;font-weight:650;font-size:17px;color:inherit;text-align:left;cursor:pointer}
.mobile-menu button:hover{color:var(--brand)}
/* ---------- Machine Designs preview --------------------------------------
/machine-preview renders ONLY the merchant's machine, for the console's live
preview. Everything else the theme layout emits is hidden, the hero copy is
dropped, and the machine is drawn at 50% of its storefront size so the whole
cabinet fits comfortably in the console panel.
`zoom` (not transform:scale) is deliberate: it scales layout as well as
pixels, so the surrounding box collapses to the smaller size and the machine
stays centred instead of floating in a half-empty frame. */
html.vfy-preview, html.vfy-preview body{height:100%}
html.vfy-preview body{
background:
radial-gradient(1100px 620px at 50% 18%, rgba(var(--brand-rgb, 244,67,67), .12), transparent 62%),
linear-gradient(180deg, #0c0d11 0%, #08090c 100%);
overflow:hidden;
}
/* Hide the whole site around the preview block. */
html.vfy-preview .nav,
html.vfy-preview .mobile-menu,
html.vfy-preview .footer,
html.vfy-preview .site-footer,
html.vfy-preview .chat-fab,
html.vfy-preview .chat-launcher,
html.vfy-preview .skin-banner,
html.vfy-preview .widgets,
html.vfy-preview .auth-modal,
html.vfy-preview .topbar,
html.vfy-preview .toast-host,
/* storefront shopping + chat widgets are part of the page, not the machine */
html.vfy-preview .cart-fab,
html.vfy-preview .cartd,
html.vfy-preview #vfy-chat,
html.vfy-preview #vfy-chat-root{display:none !important}
/* The preview block itself fills the viewport, with nothing else in flow. The
machine is anchored near the TOP rather than centred, so the panel reads as a
machine on a stage instead of floating in empty space. */
html.vfy-preview .vfy-preview{
min-height:100vh; min-height:100dvh; display:grid; place-items:start center;
align-content:start;
margin:0 !important; padding:10px !important; background:none !important;
}
html.vfy-preview .mhero{
min-height:0 !important; height:auto !important; padding:0 !important;
margin:0 !important; background:none !important; display:grid;
place-items:start center; align-content:start;
position:static !important;
}
html.vfy-preview .mhero__grid{
display:block !important; padding:0 !important; margin:0 !important;
gap:0 !important; max-width:none !important; width:auto !important;
}
/* Only the machine: drop the hero headline, description, CTAs and meta row. */
html.vfy-preview .mhero__copy{display:none !important}
html.vfy-preview .mhero__stage{
display:grid !important; place-items:center; padding:0 !important; margin:0 !important;
width:auto !important; min-height:0 !important;
}
html.vfy-preview .mhero__bg, html.vfy-preview .mhero__bgvideo, html.vfy-preview .mhero__bgimg{display:none !important}
/* The machine, at half its storefront size. */
html.vfy-preview .mhero__stage [data-vs="stage3d"]{zoom:.5}
html.vfy-preview .mhero__stage .s3-halo{display:none !important}
@media(max-width:640px){ html.vfy-preview .mhero__stage [data-vs="stage3d"]{zoom:.42} }
/* ---- Lollipop: kid-friendly bubble, arched door, dotted candy chaser ---- */
.s3--shell-lollipop .s3__front{border-radius:52px}
.s3--shell-lollipop .s3__back{border-radius:52px}
.s3--shell-lollipop .s3__cap{border-radius:26px 26px 0 0; height:calc(var(--s3depth) * .72)}
.s3--shell-lollipop .s3__bottom{border-radius:14px 14px 30px 30px}
.s3--shell-lollipop .s3__glass{border-radius:40px; margin:20px}
.s3--shell-lollipop .s3__marquee{border-radius:999px; margin:20px 20px 0; padding:8px 0}
.s3--shell-lollipop .s3__panel,
.s3--shell-lollipop .s3__tray{border-radius:22px}
.s3--shell-lollipop .s3__slot{border-radius:14px}
/* a dotted ring of lights, like a candy necklace */
.s3--shell-lollipop .s3__strip{inset:12px; border-radius:46px}
.s3--shell-lollipop .s3__strip-glow{inset:-8px; border-radius:52px; opacity:.5}
.s3--shell-lollipop .s3__strip-core,
.s3--shell-lollipop .s3__strip-glow em{
background:repeating-linear-gradient(90deg, var(--led-1) 0 10px, transparent 10px 26px);
background-size:auto;
}
/* ---- Bloom: boutique arch, warm halo behind the glass ---- */
.s3--shell-bloom .s3__front{
border-radius:30px;
clip-path:polygon(50% 0, 78% 7%, 94% 26%, 100% 52%, 100% 100%, 0 100%, 0 52%, 6% 26%, 22% 7%);
}
.s3--shell-bloom .s3__back{border-radius:30px}
.s3--shell-bloom .s3__cap{border-radius:18px 18px 0 0; height:calc(var(--s3depth) * .55)}
.s3--shell-bloom .s3__glass{border-radius:46px 46px 22px 22px; margin:22px 24px}
.s3--shell-bloom .s3__marquee{border-radius:24px 24px 0 0; margin:24px 24px 0}
.s3--shell-bloom .s3__panel{border-radius:16px}
.s3--shell-bloom .s3__tray{border-radius:16px}
.s3--shell-bloom .s3__slot{border-radius:16px 16px 8px 8px}
/* soft warm bloom rather than a hard edge */
.s3--shell-bloom .s3__strip{inset:16px; border-radius:34px; opacity:.55}
.s3--shell-bloom .s3__strip-glow{inset:0; border-radius:44px; opacity:.6; filter:blur(6px)}
.s3--shell-bloom .s3__strip-core{background:linear-gradient(180deg, var(--led-2), var(--led-1))}
/* ---- Arena: angular parallelogram, fast diagonal sweep ---- */
.s3--shell-arena .s3__front{
border-radius:2px;
clip-path:polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.s3--shell-arena .s3__back{border-radius:2px}
.s3--shell-arena .s3__cap{border-radius:0; height:calc(var(--s3depth) * .46)}
.s3--shell-arena .s3__bottom{border-radius:0}
.s3--shell-arena .s3__glass{margin:10px 18px; border-radius:2px}
.s3--shell-arena .s3__marquee{margin:10px 18px 0; border-radius:2px; clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%)}
.s3--shell-arena .s3__panel{border-radius:2px}
.s3--shell-arena .s3__tray{border-radius:2px}
.s3--shell-arena .s3__slot{border-radius:2px}
/* racing stripes chasing fast across the frame */
.s3--shell-arena .s3__strip{inset:8px; border-radius:2px}
.s3--shell-arena .s3__strip-glow{inset:-6px; border-radius:2px; opacity:.65}
.s3--shell-arena .s3__strip-core,
.s3--shell-arena .s3__strip-glow em{
background:repeating-linear-gradient(115deg, var(--led-1) 0 14px, var(--led-2) 14px 28px);
background-size:220% 100%;
animation:s3drift 2.6s linear infinite;
}
/* ---- Vita: calm clinical white, single quiet light line ---- */
.s3--shell-vita .s3__front{border-radius:6px; box-shadow:
inset 0 1px 0 var(--shell-hi), inset 0 -1px 0 var(--shell-lo),
inset 0 0 44px var(--shell-vignette),
0 40px 80px rgba(0,0,0,.28), 0 10px 24px rgba(0,0,0,.2)}
.s3--shell-vita .s3__back{border-radius:6px}
.s3--shell-vita .s3__cap{border-radius:4px 4px 0 0; height:calc(var(--s3depth) * .58)}
.s3--shell-vita .s3__bottom{border-radius:0 0 4px 4px}
.s3--shell-vita .s3__glass{margin:14px; border-radius:4px; padding-top:10px}
.s3--shell-vita .s3__marquee{margin:14px 14px 0; border-radius:4px; border-bottom:1px solid var(--shell-line)}
.s3--shell-vita .s3__panel{border-radius:4px; margin:0 14px 10px}
.s3--shell-vita .s3__tray{border-radius:4px; margin:0 12px 12px}
.s3--shell-vita .s3__slot{border-radius:3px}
/* one thin, steady line of light - deliberately not animated */
.s3--shell-vita .s3__strip{inset:10px; border-radius:4px}
.s3--shell-vita .s3__strip-glow{inset:-4px; border-radius:8px; opacity:.28}
.s3--shell-vita .s3__strip-core,
.s3--shell-vita .s3__strip-glow em{
background:linear-gradient(180deg, var(--led-1) 0 4px, transparent 4px);
animation:none;
}
/* ==========================================================================
LED breathing glow
A soft, gradual breath on every LED, drawn where the LEDs actually are.
Three rules drove this rewrite:
1. the glow must trace the real LED positions, so on a photographic front
it is drawn from .s3__ledmap (frame edge, compartment rings, tray bar)
rather than as one diffuse haze over the whole cabinet;
2. it must breathe - slow, smooth, symmetrical fade in and out, never a
hard on/off blink;
3. it must not rotate hue, because that turns a chosen accent colour into
a rainbow and reads as a cheap LED sign rather than real lighting.
========================================================================== */
/* One shared breath. 6.5s with a sine-ish ease makes the rise and fall read as
the same curve, which is what "gradual" means here - the old 3.6s 0.55/1/0.55
had a visibly sharper midpoint. Opacity, blur and spread move together so the
light appears to swell and sink rather than just blink. */
@keyframes s3breatheSoft{
0%,100%{opacity:.34; filter:blur(6px) saturate(1.02)}
22% {opacity:.62; filter:blur(9px) saturate(1.12)}
50% {opacity:.92; filter:blur(13px) saturate(1.24)}
78% {opacity:.62; filter:blur(9px) saturate(1.12)}
}
@keyframes s3breatheWide{
0%,100%{opacity:.20; filter:blur(10px) saturate(1)}
50% {opacity:.52; filter:blur(22px) saturate(1.2)}
}
@keyframes s3breatheCell{
0%,100%{opacity:.30; filter:blur(5px)}
50% {opacity:.85; filter:blur(10px)}
}
/* ---------- the LED map on a photographic front ---------- */
.s3__ledmap{position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; container-type:size}
/* Frame edge strip: follows the cabinet's own outline. Soft, never a hard line. */
.s3__ledmap .lm-frame{
position:absolute; inset:var(--lm-frame, 3.5%);
border-radius:var(--lm-frame-r, 7%);
background:none;
box-shadow:
0 0 6px var(--led-c1, var(--led-1, #E34E4E)),
0 0 16px color-mix(in srgb, var(--led-c1, var(--led-1, #E34E4E)) 70%, transparent),
inset 0 0 5px var(--led-c2, var(--led-2, #D89E3A));
animation:s3breatheSoft 6.5s cubic-bezier(.45,0,.55,1) infinite;
}
/* Compartment rings, laid out by the front part's own geometry. */
.s3__ledmap .lm-cells{position:absolute; left:var(--lm-left,8%); right:var(--lm-right,26%); top:var(--lm-top,24%); bottom:var(--lm-bottom,25%); display:grid; gap:var(--lm-gap,3.5%); grid-template-columns:repeat(var(--lm-cols,2),1fr); grid-template-rows:repeat(var(--lm-rows,3),1fr)}
.s3__ledmap .lm-cells i{
display:block; border-radius:var(--lm-cell-r, 9px);
box-shadow:
0 0 5px var(--led-c1, var(--led-1, #E34E4E)),
0 0 13px color-mix(in srgb, var(--led-c1, var(--led-1, #E34E4E)) 62%, transparent),
inset 0 0 4px var(--led-c2, var(--led-2, #D89E3A));
animation:s3breatheCell 6.5s cubic-bezier(.45,0,.55,1) infinite;
}
/* Stagger the cells very slightly so the cabinet is not one single pulse. */
.s3__ledmap .lm-cells i:nth-child(2n){animation-delay:-1.1s}
.s3__ledmap .lm-cells i:nth-child(3n){animation-delay:-2.2s}
/* Bar of light over the dispense tray. */
.s3__ledmap .lm-tray{
position:absolute; left:var(--lm-tray-l,17%); right:var(--lm-tray-r,33%);
top:var(--lm-tray-t,79%); height:var(--lm-tray-h,1.6%);
border-radius:99px;
box-shadow:0 0 7px var(--led-c2, var(--led-2, #D89E3A)), 0 0 18px color-mix(in srgb, var(--led-c2, var(--led-2, #D89E3A)) 55%, transparent);
animation:s3breatheSoft 6.5s cubic-bezier(.45,0,.55,1) infinite;
}
/* A wide, very soft bloom sitting under all of it, so the machine also lights
the space around itself a little. Kept subtle so it never looks like fog. */
.s3--machine-active .s3__room::before{animation:s3breatheWide 6.5s cubic-bezier(.45,0,.55,1) infinite}
.hero3d--led-none .s3__ledmap .lm-frame,
.hero3d--led-none .s3__ledmap .lm-cells i,
.hero3d--led-none .s3__ledmap .lm-tray{animation:none; opacity:.7}
.no-anim .s3__ledmap .lm-frame,
.no-anim .s3__ledmap .lm-cells i,
.no-anim .s3__ledmap .lm-tray{animation:none}
/* Respect a reduced-motion preference: hold a steady, lit state. */
@media(prefers-reduced-motion:reduce){
.s3__ledmap .lm-frame,
.s3__ledmap .lm-cells i,
.s3__ledmap .lm-tray,
.s3--machine-active .s3__room::before{animation:none !important; opacity:.75}
}
/* ---------- the CSS-branch interior bar stops being a flat line ---------- */
.s3__led{
height:7px; border-radius:99px;
background:linear-gradient(90deg, var(--led-1), var(--led-2));
box-shadow:0 0 12px var(--led-halo), 0 0 26px var(--led-halo);
animation:s3breathe 6.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes s3breathe{
0%,100%{opacity:.42; filter:blur(1px)}
22% {opacity:.66; filter:blur(1.5px)}
50% {opacity:1; filter:blur(2px)}
78% {opacity:.66; filter:blur(1.5px)}
}
/* Super Admin LED settings applied to the photographic front LED map */
.s3__ledmap .lm-frame,
.s3__ledmap .lm-cells i,
.s3__ledmap .lm-tray{
--led-active: var(--led-c1, var(--led-1, #E34E4E));
--led-active-2: var(--led-c2, var(--led-2, #D89E3A));
--led-bright: calc(var(--led-brightness, 70) / 100);
--led-spread: calc(var(--led-glow-intensity, 50) * 0.16px);
--led-blur: calc(var(--led-glow-softness, 60) * 0.2px);
--led-duration: max(0.8s, calc((101 - var(--led-breathing-speed, 50)) * 0.12s));
box-shadow:
0 0 var(--led-spread) var(--led-active),
0 0 calc(var(--led-spread) * 2.6) color-mix(in srgb, var(--led-active) 70%, transparent),
inset 0 0 calc(var(--led-spread) * 0.8) var(--led-active-2);
opacity: var(--led-bright);
filter: blur(var(--led-blur)) saturate(1.1);
animation-duration: var(--led-duration);
}
/* Pattern variants */
.s3--led-glow .s3__ledmap .lm-frame,
.s3--led-glow .s3__ledmap .lm-cells i,
.s3--led-glow .s3__ledmap .lm-tray{animation:none; opacity:var(--led-bright)}
.s3--led-wave .s3__ledmap .lm-cells i{animation-name:s3breatheCellWave}
@keyframes s3breatheCellWave{
0%,100%{opacity:calc(var(--led-bright) * 0.35); filter:blur(var(--led-blur))}
50% {opacity:var(--led-bright); filter:blur(calc(var(--led-blur) * 1.6))}
}
.s3--led-flow .s3__ledmap .lm-frame,
.s3--led-flow .s3__ledmap .lm-tray{animation-name:s3breatheSoft}
.s3--led-flow .s3__ledmap .lm-cells i{animation-name:s3breatheCell}
/* LEDs off */
.s3--led-off .s3__ledmap .lm-frame,
.s3--led-off .s3__ledmap .lm-cells i,
.s3--led-off .s3__ledmap .lm-tray,
.s3--led-off .s3--machine-active .s3__room::before{animation:none; opacity:0}
/* Breathing disabled but LEDs on: steady glow */
.s3--led-steady .s3__ledmap .lm-frame,
.s3--led-steady .s3__ledmap .lm-cells i,
.s3--led-steady .s3__ledmap .lm-tray{animation:none; opacity:var(--led-bright)}
/* the frame strip on a CSS cabinet breathes on the same curve */
.s3__strip-glow{animation:s3breatheWide 6.5s cubic-bezier(.45,0,.55,1) infinite}
/* aurora used to rotate hue 360deg - that is a rainbow sign, not real light.
It now breathes in the operator's chosen colour instead. */
.hero3d--led-aurora .s3__strip,
.hero3d--led-aurora .s3__strip-glow em{animation:s3breatheSoft 6.5s cubic-bezier(.45,0,.55,1) infinite}
.hero3d--led-vu .s3__strip,
.hero3d--led-vu .s3__strip-glow em{animation:s3breatheSoft 7.8s cubic-bezier(.45,0,.55,1) infinite}
.hero3d--led-reef .s3__strip,
.hero3d--led-reef .s3__strip-glow em{animation:s3breatheCell 5.4s cubic-bezier(.45,0,.55,1) infinite}
.hero3d--led-none .s3__strip,
.hero3d--led-none .s3__strip-glow em{animation:none}
/* Layout custom properties sit on [data-front-part] (the stage host) so both
the LED glow and the compartment overlay can read them from one place. */
[data-front-part="gold"]{
--lm-frame:3.2%; --lm-frame-r:6%;
--lm-left:11.5%; --lm-right:26%; --lm-top:23.5%; --lm-bottom:25.5%;
--lm-cols:2; --lm-rows:3; --lm-gap:3.2%; --lm-cell-r:10px;
--lm-tray-l:16%; --lm-tray-r:31%; --lm-tray-t:79.5%; --lm-tray-h:1.5%;
}
[data-front-part="classic"]{
--lm-frame:3.5%; --lm-frame-r:8%;
--lm-left:10%; --lm-right:27%; --lm-top:24%; --lm-bottom:24%;
--lm-cols:3; --lm-rows:2; --lm-gap:3.4%; --lm-cell-r:12px;
--lm-tray-l:14%; --lm-tray-r:30%; --lm-tray-t:80%; --lm-tray-h:1.4%;
}
[data-front-part="futuristic"]{
--lm-frame:3%; --lm-frame-r:7%;
--lm-left:23%; --lm-right:35%; --lm-top:27%; --lm-bottom:29%;
--lm-cols:2; --lm-rows:3; --lm-gap:8%; --lm-cell-r:12px;
--lm-tray-l:20%; --lm-tray-r:38%; --lm-tray-t:79%; --lm-tray-h:1.4%;
}
[data-front-part="machine4"]{
--lm-frame:2.5%; --lm-frame-r:5%;
--lm-left:12%; --lm-right:12%; --lm-top:18%; --lm-bottom:18%;
--lm-cols:2; --lm-rows:3; --lm-gap:5%; --lm-cell-r:14px;
--lm-tray-l:18%; --lm-tray-r:18%; --lm-tray-t:83%; --lm-tray-h:1.2%;
}
/* ---------- rich text (legal pages, long-form copy) ----------
Headings and lists inside .rte had no styling, so section titles inherited
body text and ran into the preceding paragraph. */
.rte{color:var(--ink-2)}
.rte > *:first-child{margin-top:0}
.rte > *:last-child{margin-bottom:0}
.rte h2,.rte h3,.rte h4{
font-family:var(--font-d);font-weight:800;letter-spacing:-.02em;
color:var(--ink);line-height:1.25;margin:34px 0 12px;
}
.rte h2{font-size:26px}
.rte h3{font-size:20px}
.rte h4{font-size:17px}
.rte p{margin:0 0 16px;line-height:1.75;text-align:justify;text-justify:inter-word;hyphens:auto}
.rte ul,.rte ol{margin:0 0 18px;padding-left:24px;line-height:1.75}
.rte li{margin-bottom:9px}
.rte li:last-child{margin-bottom:0}
.rte ul{list-style:disc}
.rte ol{list-style:decimal}
.rte strong{color:var(--ink);font-weight:700}
.rte a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.rte a:hover{opacity:.75}
/* ---------- FAQ search ---------- */
/* Sits above the questions, pushed right on wide screens, full-width on
small ones. Deliberately compact so it never competes with the questions. */
.faq__search{
display:flex;align-items:center;justify-content:flex-end;gap:12px;
margin:0 0 18px;flex-wrap:wrap;
}
.faq__search input[type="search"]{
width:min(320px,100%);
background:var(--panel,var(--wall-0));
border:1px solid var(--line);border-radius:9999px;
padding:9px 16px;color:var(--ink);font:inherit;font-size:14px;
outline:none;transition:border-color .15s,box-shadow .15s;
}
.faq__search input[type="search"]::placeholder{color:var(--muted);opacity:.85}
.faq__search input[type="search"]:focus{
border-color:var(--ink);
box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);
}
.faq__count{
font-size:12.5px;color:var(--muted);white-space:nowrap;
min-width:0;order:-1;
}
.faq__none{
margin:10px 0 0;padding:16px;text-align:center;color:var(--muted);
border:1px dashed var(--line);border-radius:12px;font-size:14px;
}
@media(max-width:640px){
.faq__search{justify-content:stretch}
.faq__search input[type="search"]{width:100%}
.faq__count{order:0}
}
/* ---------- Self-hosted fonts ----------
Inter and Manrope are variable fonts: one file each covers every weight we
use (Google was serving the same woff2 for all four weights). Orbitron is
static and only used for the futuristic hero headline.
Previously these came from fonts.googleapis.com, which added two external
origins to the critical path on every cold visit. font-display:swap paints
fallback text immediately rather than blocking on the font. */
@font-face{
font-family:"Inter";
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url("/fonts/inter-var.65850a37.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:"Manrope";
font-style:normal;
font-weight:200 800;
font-display:swap;
src:url("/fonts/manrope-var.101877a7.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:"Orbitron";
font-style:normal;
font-weight:700;
font-display:swap;
src:url("/fonts/orbitron-700.6d502f61.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Arabic. Inter, Manrope and Orbitron all carry Latin glyphs only, so an
Arabic page had nothing to draw Arabic with. Noto Sans Arabic (SIL OFL) is
self-hosted and split the same way Google serves it: the Arabic subset
carries the script, the Latin subset keeps prices, brand names and Western
digits rendering instead of falling back to a system face mid-sentence.
unicode-range keeps the Latin fonts ahead of these for Latin text, so an
English page never downloads a byte of Arabic. */
@font-face{
font-family:"Noto Sans Arabic";
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url("/fonts/noto-arabic-var.59387876.woff2") format("woff2");
unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face{
font-family:"Noto Sans Arabic";
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url("/fonts/noto-latin-var.c951ffe2.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}