/* =============================================================
EliteZoneJ — Design System Tokens (Phase 1)
Single source of truth. All components must read from here.
============================================================= */
:root {
/* ---------- Typography ---------- */
/* --ezj-font-* are self-hosted next/font vars wired in app/layout.tsx
(also re-applied inline on to win over disturbia.css). */
--font-display: var(--ezj-font-display), "Cormorant Garamond", "EB Garamond", Georgia, serif;
--font-body: var(--ezj-font-body), "Montserrat", -apple-system, "Helvetica Neue", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
/* Weights — only ship these. Drop Montserrat 300 + 700. */
/* display: 500, 600 | body: 400, 500 | mono: 500 */
/* Type scale */
--t-display-xl-size: clamp(40px, 6vw, 80px);
--t-display-xl-lh: 1.05;
--t-display-xl-ls: -0.02em;
--t-display-lg-size: clamp(32px, 4vw, 56px);
--t-display-lg-lh: 1.1;
--t-display-lg-ls: -0.015em;
--t-display-md-size: 24px;
--t-display-md-lh: 1.2;
--t-display-md-ls: -0.01em;
--t-body-lg-size: 17px;
--t-body-lg-lh: 1.7;
--t-body-size: 15px;
--t-body-lh: 1.6;
--t-body-sm-size: 13px;
--t-label-size: 12px;
--t-label-ls: 0.08em;
--t-mono-size: 13px;
--t-mono-ls: 0.06em;
--t-mono-xs-size: 10px;
--t-mono-xs-ls: 0.18em;
/* ---------- Color ---------- */
/* Surfaces */
--paper: #FAF7F2;
--paper-2: #F2EDE4;
--paper-3: #E8E2D7;
/* Ink */
--ink: #1A1613;
--ink-2: #55493E;
--ink-3: #6F6353; /* darkened from #9A8E7F to meet WCAG AA 4.5:1 on --paper */
--ink-4: #C9BC9F;
/* Brand accent — locked: oxblood */
--accent: #7A1C1C;
--accent-hi: #A02828;
/* System (state only — never decoration) */
--success: #2D7A4F;
--warning: #B07A1A;
--error: #B23A3A;
--info: #2B5C8A;
/* ---------- Spacing (4px base) ---------- */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
/* ---------- Lines ---------- */
--rule: 1px solid var(--paper-3);
--rule-strong: 1px solid var(--ink);
--rule-soft: 1px solid var(--ink-4);
/* ---------- Layout ---------- */
--container: 1440px;
--pad-x-d: var(--s-7);
--pad-x-m: var(--s-4);
--pad-y-d: var(--s-9);
--pad-y-m: var(--s-7);
/* ---------- Motion ---------- */
--ease: cubic-bezier(.2,.7,.2,1);
--ease-in: cubic-bezier(.77,0,.18,1);
--d-fast: 180ms;
--d-mid: 350ms;
--d-slow: 600ms;
}
/* =============================================================
Resets
============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-weight: 400;
font-size: var(--t-body-size);
line-height: var(--t-body-lh);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--paper); }
/* =============================================================
Typography utilities
============================================================= */
.t-display-xl { font-family: var(--font-display); font-weight: 500;
font-size: var(--t-display-xl-size); line-height: var(--t-display-xl-lh);
letter-spacing: var(--t-display-xl-ls); }
.t-display-lg { font-family: var(--font-display); font-weight: 500;
font-size: var(--t-display-lg-size); line-height: var(--t-display-lg-lh);
letter-spacing: var(--t-display-lg-ls); }
.t-display-md { font-family: var(--font-display); font-weight: 500;
font-size: var(--t-display-md-size); line-height: var(--t-display-md-lh);
letter-spacing: var(--t-display-md-ls); }
.t-body-lg { font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); color: var(--ink-2); }
.t-body { font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--ink-2); }
.t-body-sm { font-size: var(--t-body-sm-size); line-height: 1.55; color: var(--ink-2); }
.t-label { font-family: var(--font-body); font-weight: 500;
font-size: var(--t-label-size); letter-spacing: var(--t-label-ls); }
.t-mono { font-family: var(--font-mono); font-weight: 500;
font-size: var(--t-mono-size); letter-spacing: var(--t-mono-ls); }
.t-mono-xs { font-family: var(--font-mono); font-weight: 500;
font-size: var(--t-mono-xs-size); letter-spacing: var(--t-mono-xs-ls);
text-transform: uppercase; color: var(--ink-3); }
/* =============================================================
Buttons
============================================================= */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--font-body); font-weight: 500; font-size: 13px;
letter-spacing: 0.04em; padding: 14px 28px; min-height: 48px;
border: 1px solid; border-radius: 0; background: transparent;
cursor: pointer; transition: background var(--d-mid) var(--ease),
color var(--d-mid) var(--ease), border-color var(--d-mid) var(--ease);
}
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-secondary { color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }
.btn-tertiary { background: none; border: 0; padding: 0; min-height: 0;
color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px;
text-decoration-thickness: 1px; }
.btn-tertiary:hover { color: var(--accent); }
.btn-sm { min-height: 40px; padding: 10px 20px; font-size: 12px; }
.btn-lg { min-height: 56px; padding: 18px 36px; font-size: 14px; }
.btn-block { width: 100%; }
/* =============================================================
Form fields
============================================================= */
input, select, textarea {
font-family: var(--font-body); font-size: var(--t-body-size);
background: transparent; color: var(--ink);
border: 1px solid var(--paper-3); border-radius: 0;
padding: 12px 14px; width: 100%; outline: none;
transition: border-color var(--d-mid) var(--ease);
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); }
label { display: block; margin-bottom: var(--s-2);
font-family: var(--font-mono); font-weight: 500;
font-size: var(--t-mono-xs-size); letter-spacing: var(--t-mono-xs-ls);
text-transform: uppercase; color: var(--ink-3); }
/* =============================================================
Section scaffolding
============================================================= */
.container { max-width: var(--container); margin: 0 auto;
padding-left: var(--pad-x-d); padding-right: var(--pad-x-d); }
section.page { padding-top: var(--pad-y-d); padding-bottom: var(--pad-y-d); }
@media (max-width: 720px) {
.container { padding-left: var(--pad-x-m); padding-right: var(--pad-x-m); }
section.page { padding-top: var(--pad-y-m); padding-bottom: var(--pad-y-m); }
}
.sec-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--s-5); padding-bottom: var(--s-4);
border-bottom: var(--rule-strong); margin-bottom: var(--s-7);
}
.sec-head h2 { margin: 0; }
.sec-head .meta { color: var(--ink-3); }
/* =============================================================
Reveal-on-scroll
============================================================= */
.rev { opacity: 0; transform: translateY(24px);
transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.rev.in { opacity: 1; transform: none; }
.rev[data-d="1"] { transition-delay: 80ms; }
.rev[data-d="2"] { transition-delay: 160ms; }
.rev[data-d="3"] { transition-delay: 240ms; }
.rev[data-d="4"] { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.rev { opacity: 1; transform: none; }
}
/* =============================================================
Mega-menu (shared across all pages)
============================================================= */
.nav-primary li.has-mega { position: relative; }
.nav-primary li.has-mega > a::after {
content: ""; display: inline-block; width: 5px; height: 5px;
border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
transform: translateY(-2px) rotate(45deg); margin-left: 6px;
transition: transform var(--d-fast) var(--ease);
}
.nav-primary li.has-mega:hover > a::after,
.nav-primary li.has-mega:focus-within > a::after { transform: translateY(0) rotate(225deg); }
.mega {
position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
min-width: 720px; max-width: 92vw;
background: var(--paper); border: var(--rule);
padding: var(--s-6) var(--s-6) var(--s-5);
box-shadow: 0 24px 48px -16px rgba(26, 22, 19, 0.14);
opacity: 0; pointer-events: none;
transition: opacity var(--d-mid) var(--ease), transform var(--d-mid) var(--ease);
z-index: 90;
}
.nav-primary li.has-mega:hover > .mega,
.nav-primary li.has-mega:focus-within > .mega {
opacity: 1; pointer-events: auto;
transform: translate(-50%, 0);
}
.mega .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.mega h5 {
margin: 0 0 var(--s-3); padding-bottom: 8px;
border-bottom: 1px solid var(--paper-3);
font-family: var(--font-mono); font-weight: 500; font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
}
.mega ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mega ul a {
font-family: var(--font-display); font-weight: 500; font-size: 16px;
letter-spacing: -0.005em; color: var(--ink-2);
border-bottom: 0; padding: 0;
transition: color var(--d-fast) var(--ease), padding-left var(--d-fast) var(--ease);
}
.mega ul a:hover { color: var(--accent); padding-left: 6px; }
.mega ul a .meta {
display: block; font-family: var(--font-body); font-weight: 400;
font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3);
margin-top: 2px; text-transform: none;
}
.mega .footer {
margin-top: var(--s-5); padding-top: var(--s-4);
border-top: 1px solid var(--paper-3);
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-3);
}
.mega .footer a { color: var(--ink); }
.mega .footer a:hover { color: var(--accent); }
@media (max-width: 1100px) { .mega { min-width: 600px; } .mega .row { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
@media (max-width: 900px) { .nav-primary li.has-mega .mega { display: none; } /* mobile collapses to category page */ }
/* =============================================================
Wishlist heart + Quick-add button (used across product cards)
============================================================= */
.wl-btn {
background: rgba(250, 247, 242, 0.92);
border: 1px solid rgba(26, 22, 19, 0.08);
color: var(--ink);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center; justify-content: center;
border-radius: 999px;
transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease), border-color 200ms var(--ease);
}
.wl-sm { width: 32px; height: 32px; }
.wl-md { width: 42px; height: 42px; }
.wl-btn:hover { background: var(--paper); transform: scale(1.06); }
.wl-btn.on { color: var(--accent); border-color: rgba(106, 26, 32, 0.18); }
.wl-btn.on svg { fill: var(--accent); }
.wl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wl-overlay {
position: absolute;
top: 10px; right: 10px;
z-index: 4;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* Quick-add: overlay variant slides up from bottom of image on hover.
Inline variant sits in the meta row below the image. */
.qa-btn {
display: inline-flex;
align-items: center; justify-content: center;
gap: 6px;
font-family: var(--font-body);
font-weight: 500;
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
padding: 11px 18px;
background: var(--ink);
color: var(--paper);
border: 1px solid var(--ink);
transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.qa-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.qa-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qa-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.qa-overlay {
position: absolute;
left: 10px; right: 10px; bottom: 10px;
z-index: 4;
opacity: 0;
transform: translateY(8px);
transition: opacity 250ms var(--ease), transform 250ms var(--ease);
pointer-events: none;
}
.qa-host:hover .qa-overlay,
.qa-host:focus-within .qa-overlay { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Inline size strip when the user clicks Quick add on a tailored card */
.qa-sizes {
background: var(--paper);
border: 1px solid var(--ink);
padding: 8px 8px 8px 14px;
display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
color: var(--ink);
}
.qa-sizes.qa-overlay {
position: absolute;
left: 10px; right: 10px; bottom: 10px;
z-index: 5;
opacity: 1;
transform: none;
pointer-events: auto;
}
.qa-sizes .qa-label { color: var(--ink-3); flex: 0 0 auto; }
.qa-size-row { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.qa-size {
background: transparent;
border: 1px solid var(--paper-3);
color: var(--ink);
padding: 6px 10px;
font-family: var(--font-mono); font-size: 11px; cursor: pointer;
transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.qa-size:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qa-size.oos { color: var(--ink-3); border-style: dashed; cursor: not-allowed; text-decoration: line-through; }
.qa-size:disabled:hover { background: transparent; color: var(--ink-3); }
.qa-close {
flex: 0 0 auto;
background: transparent; border: 0;
color: var(--ink-3); font-size: 18px; line-height: 1;
cursor: pointer; padding: 0 4px;
}
.qa-close:hover { color: var(--ink); }
/* Mobile: Quick-add is always visible (no hover) and sits below the image */
@media (max-width: 720px) {
.qa-overlay {
opacity: 1;
transform: none;
pointer-events: auto;
/* Slightly smaller padding on mobile */
padding: 10px 14px;
font-size: 11px;
}
.wl-overlay { top: 8px; right: 8px; }
.wl-sm { width: 36px; height: 36px; } /* bigger tap target */
}
/* PDP title row — product name + wishlist heart on the same line */
.title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.title-row h1 { flex: 1; min-width: 0; }
/* When ProductCard wraps the image in a , that is the
's immediate parent — make it block + relative so
next/image can position correctly. */
.pcard .plate > a,
.fabric-card .swatch > a,
.wl-card .plate > a,
.search-card-img > a { display: block; position: relative; width: 100%; height: 100%; }
/* =============================================================
Header utility-icon count badge (wishlist + bag)
============================================================= */
.icon-btn { position: relative; }
.icon-btn .util-count {
position: absolute;
top: -2px; right: -8px;
min-width: 18px; height: 18px;
padding: 0 4px;
border-radius: 999px;
background: var(--accent);
color: var(--paper);
font-family: var(--font-mono);
font-size: 9.5px; font-weight: 500; letter-spacing: 0.04em;
display: inline-flex; align-items: center; justify-content: center;
pointer-events: none;
}
/* WCAG 2.2 AA SC 2.5.8 — minimum 24x24 (we use 36) interactive target size
for small icon/close controls that previously had tight padding. */
.search-x,
.search-close,
.promo-modal-close,
.promo-sticker-dismiss {
min-width: 36px;
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
}