/* ==========================================================================
DeckDorm Theme — Main Stylesheet
Day / Night dual-theme system.
- Day: Platinum & Gold (light background, gold accents, dark text)
- Night: Black & Gold (dark background, gold accents, light text)
All colors are CSS custom properties; switch via html[data-theme].
========================================================================== */
:root {
/* Brand & layout constants */
--dd-font: "Sora", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--dd-font-body: "Inter", "Segoe UI", Arial, sans-serif;
--dd-radius: 14px;
--dd-radius-sm: 8px;
--dd-shadow: 0 10px 30px rgba(21, 24, 40, 0.08);
--dd-shadow-lg: 0 24px 60px rgba(21, 24, 40, 0.16);
/* Cathedral glass palette (available in every style) */
--glass-blue: #2f6fe4;
--glass-blue-deep: #1b3f8f;
--glass-red: #c22f3e;
--glass-ruby: #a01830;
--glass-emerald: #1f9d6b;
--glass-green-deep: #116144;
--glass-gold: #e6b84c;
--glass-amber: #b97a1f;
--glass-violet: #6d3fae;
--glass-violet-deep: #4b2a7c;
--lead-line: #07080f;
--glass-glow: rgba(230, 184, 76, 0.4);
--glass-light: rgba(255, 255, 255, 0.78);
/* ===================== LIGHT THEME (Day · Platinum & Gold) ===================== */
/* Accent (gold family — shared with dark theme) */
--color-accent: #c9a24b;
--color-accent-hover: #e6c87a;
--color-accent-strong: #a8822f;
--color-accent-soft: rgba(201, 162, 75, 0.14);
--color-accent-glow: rgba(201, 162, 75, 0.35);
/* Surfaces & text */
--color-bg: #ffffff;
--color-surface: #ffffff;
--color-surface-alt: #f5f4ee;
--color-surface-invert: #efece0;
--color-text: #1f2430;
--color-text-soft: #4b5165;
--color-heading: #161a26;
--color-muted: #6b7280;
--color-border: #e7e4d8;
--color-link: #a8822f;
--color-btn-primary-text: #1a1405;
/* Header (day: white glass) */
--color-header-bg: rgba(255, 255, 255, 0.92);
--color-header-border: rgba(21, 24, 40, 0.08);
--color-header-link: #3d4356;
/* Hero (day: warm sand band — "W4". A gold bloom top-right, a faint clay
wash bottom-left, and a sand ramp that stops well short of khaki; the
previous #e2d2a8 tail read as dirty cardboard.) */
--color-hero-bg:
radial-gradient(980px 550px at 88% -12%, rgba(201, 162, 75, 0.22), transparent 62%),
radial-gradient(720px 430px at 2% 116%, rgba(163, 86, 60, 0.08), transparent 62%),
linear-gradient(180deg, #fdf8f4, #f2e6dd);
--color-hero-heading: #161a26;
--color-hero-text: #3d4356;
--color-hero-muted: #6b7280;
--color-hero-accent: #a8822f;
--color-hero-border: rgba(21, 24, 40, 0.22);
/* Hero product tiles (`.dd-tile`) — a lift, not a drop shadow. The shadow is
warm-tinted because it falls on the sand band: neutral black over warm sand
reads grey and muddy. Three layers = contact + mid + ambient falloff. */
--dd-tile-shadow:
0 1px 3px rgba(93, 60, 45, 0.18),
0 18px 34px -12px rgba(93, 60, 45, 0.44),
0 46px 76px -26px rgba(93, 60, 45, 0.54);
--dd-tile-shadow-hover:
0 2px 6px rgba(93, 60, 45, 0.22),
0 30px 52px -16px rgba(93, 60, 45, 0.50),
0 64px 104px -32px rgba(93, 60, 45, 0.58);
/* Inverse dark blocks (topbar / wholesale / testimonials / page hero / table head) */
--color-inverse-bg: #151828;
--color-inverse-bg-2: #1e2338;
--color-inverse-surface: rgba(255, 255, 255, 0.045);
--color-inverse-border: rgba(255, 255, 255, 0.1);
--color-inverse-heading: #ffffff;
--color-inverse-text: #e9ebf5;
--color-inverse-muted: #b9bfd4;
/* Footer */
--color-footer-bg: #10121e;
--color-footer-text: #aeb4cc;
--color-footer-heading: #ffffff;
}
/* ===================== DARK THEME (Night · Black & Gold) ===================== */
html[data-theme="dark"] {
--color-accent: #c9a24b;
--color-accent-hover: #d9b95e;
--color-accent-strong: #e6c87a;
--color-accent-soft: rgba(201, 162, 75, 0.18);
--color-accent-glow: rgba(201, 162, 75, 0.5);
--color-bg: #0d0f18;
--color-surface: #161a26;
--color-surface-alt: #10131e;
--color-surface-invert: #1c2130;
--color-text: #e9ebf5;
--color-text-soft: #c3c9dd;
--color-heading: #ffffff;
--color-muted: #9aa1bb;
--color-border: #262c40;
--color-link: #e6c87a;
--color-btn-primary-text: #1a1405;
--color-header-bg: rgba(10, 12, 20, 0.92);
--color-header-border: rgba(255, 255, 255, 0.1);
--color-header-link: #d6dae8;
--color-hero-bg:
radial-gradient(1100px 600px at 85% -10%, rgba(201, 162, 75, 0.22), transparent 60%),
radial-gradient(900px 500px at 0% 110%, rgba(58, 68, 130, 0.35), transparent 60%),
linear-gradient(180deg, #151828, #0a0c14);
--color-hero-heading: #ffffff;
--color-hero-text: #e9ebf5;
--color-hero-muted: #b9bfd4;
--color-hero-accent: #e6c87a;
--color-hero-border: rgba(255, 255, 255, 0.45);
/* On the night skins the tiles sit on a dark surface, so the shadow has to be
much deeper to register at all. */
--dd-tile-shadow:
0 2px 4px rgba(0, 0, 0, 0.55),
0 20px 38px -12px rgba(0, 0, 0, 0.62),
0 52px 84px -26px rgba(0, 0, 0, 0.72);
--dd-tile-shadow-hover:
0 3px 8px rgba(0, 0, 0, 0.60),
0 34px 58px -16px rgba(0, 0, 0, 0.68),
0 70px 112px -32px rgba(0, 0, 0, 0.78);
--color-inverse-bg: #0a0c14;
--color-inverse-bg-2: #101322;
--color-inverse-surface: rgba(255, 255, 255, 0.05);
--color-inverse-border: rgba(255, 255, 255, 0.12);
--color-inverse-heading: #ffffff;
--color-inverse-text: #e9ebf5;
--color-inverse-muted: #9aa1bb;
--color-footer-bg: #06070d;
--color-footer-text: #9aa1bb;
--color-footer-heading: #ffffff;
}
/* ===================== STAINED GLASS STYLE (Cathedral · Church Window) ===================== */
/* Enabled via html[data-style="stainedglass"]. Coexists with data-theme: it builds on the
deep-night base (data-theme="dark") and layers cathedral glass variables on top. */
html[data-style="stainedglass"] {
/* Cathedral glass palette (deep, jewel-rich) */
--glass-blue: #3b76e8;
--glass-blue-deep: #1b3f8f;
--glass-red: #c22f3e;
--glass-ruby: #a01830;
--glass-emerald: #1f9d6b;
--glass-green-deep: #116144;
--glass-gold: #e6b84c;
--glass-amber: #b97a1f;
--glass-violet: #6d3fae;
--glass-violet-deep: #4b2a7c;
--lead-line: #07080f;
--glass-glow: rgba(230, 184, 76, 0.45);
--glass-light: rgba(255, 255, 255, 0.78);
/* Cathedral interior atmosphere: deep nave, gold altarpiece */
--color-accent: #e6b84c;
--color-accent-hover: #f5d67a;
--color-accent-strong: #f0ce7a;
--color-accent-soft: rgba(230, 184, 76, 0.16);
--color-accent-glow: rgba(230, 184, 76, 0.45);
--color-bg: #0a0d16;
--color-surface: #141827;
--color-surface-alt: #0e1220;
--color-surface-invert: #1d2233;
--color-text: #eef0f8;
--color-text-soft: #c6cbe0;
--color-heading: #ffffff;
--color-muted: #9aa2bd;
--color-border: #2a3050;
--color-link: #f0ce7a;
--color-btn-primary-text: #171104;
--color-header-bg: rgba(8, 10, 18, 0.94);
--color-header-border: rgba(230, 184, 76, 0.25);
--color-header-link: #d8dcee;
--color-hero-bg:
radial-gradient(1200px 700px at 82% -12%, rgba(59, 118, 232, 0.5), transparent 62%),
radial-gradient(900px 600px at 6% 112%, rgba(194, 47, 62, 0.42), transparent 58%),
radial-gradient(700px 420px at 50% 40%, rgba(230, 184, 76, 0.14), transparent 60%),
linear-gradient(180deg, #0d1120, #07080f);
--color-hero-heading: #ffffff;
--color-hero-text: #e4e7f5;
--color-hero-muted: #aab1cb;
--color-hero-accent: #f0ce7a;
--color-hero-border: rgba(255, 255, 255, 0.4);
--dd-tile-shadow:
0 2px 4px rgba(0, 0, 0, 0.55),
0 20px 38px -12px rgba(0, 0, 0, 0.62),
0 52px 84px -26px rgba(0, 0, 0, 0.72);
--dd-tile-shadow-hover:
0 3px 8px rgba(0, 0, 0, 0.60),
0 34px 58px -16px rgba(0, 0, 0, 0.68),
0 70px 112px -32px rgba(0, 0, 0, 0.78);
--color-inverse-bg: #07080f;
--color-inverse-bg-2: #101426;
--color-inverse-surface: rgba(255, 255, 255, 0.05);
--color-inverse-border: rgba(230, 184, 76, 0.28);
--color-inverse-heading: #ffffff;
--color-inverse-text: #e9ebf5;
--color-inverse-muted: #aab1cb;
--color-footer-bg: #05060b;
--color-footer-text: #9aa2bd;
--color-footer-heading: #ffffff;
}
/* Fallback when JS is unavailable: follow the OS automatically */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--color-accent: #c9a24b;
--color-accent-hover: #d9b95e;
--color-accent-strong: #e6c87a;
--color-accent-soft: rgba(201, 162, 75, 0.18);
--color-accent-glow: rgba(201, 162, 75, 0.5);
--color-bg: #0d0f18;
--color-surface: #161a26;
--color-surface-alt: #10131e;
--color-surface-invert: #1c2130;
--color-text: #e9ebf5;
--color-text-soft: #c3c9dd;
--color-heading: #ffffff;
--color-muted: #9aa1bb;
--color-border: #262c40;
--color-link: #e6c87a;
--color-btn-primary-text: #1a1405;
--color-header-bg: rgba(10, 12, 20, 0.92);
--color-header-border: rgba(255, 255, 255, 0.1);
--color-header-link: #d6dae8;
--color-hero-bg:
radial-gradient(1100px 600px at 85% -10%, rgba(201, 162, 75, 0.22), transparent 60%),
radial-gradient(900px 500px at 0% 110%, rgba(58, 68, 130, 0.35), transparent 60%),
linear-gradient(180deg, #151828, #0a0c14);
--color-hero-heading: #ffffff;
--color-hero-text: #e9ebf5;
--color-hero-muted: #b9bfd4;
--color-hero-accent: #e6c87a;
--color-hero-border: rgba(255, 255, 255, 0.45);
--dd-tile-shadow:
0 2px 4px rgba(0, 0, 0, 0.55),
0 20px 38px -12px rgba(0, 0, 0, 0.62),
0 52px 84px -26px rgba(0, 0, 0, 0.72);
--dd-tile-shadow-hover:
0 3px 8px rgba(0, 0, 0, 0.60),
0 34px 58px -16px rgba(0, 0, 0, 0.68),
0 70px 112px -32px rgba(0, 0, 0, 0.78);
--color-inverse-bg: #0a0c14;
--color-inverse-bg-2: #101322;
--color-inverse-surface: rgba(255, 255, 255, 0.05);
--color-inverse-border: rgba(255, 255, 255, 0.12);
--color-inverse-heading: #ffffff;
--color-inverse-text: #e9ebf5;
--color-inverse-muted: #9aa1bb;
--color-footer-bg: #06070d;
--color-footer-text: #9aa1bb;
--color-footer-heading: #ffffff;
}
}
/* ---- Base ---------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--dd-font-body);
font-size: 16px;
line-height: 1.65;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
transition: background-color 0.3s ease, color 0.3s ease;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--dd-font);
line-height: 1.2;
margin: 0 0 0.5em;
color: var(--color-heading);
}
p {
margin: 0 0 1em;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
.dd-container {
width: min(1200px, 92%);
margin-inline: auto;
}
.dd-site {
overflow: clip;
}
/* ---- Buttons ----------------------------------------------------------- */
.dd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 26px;
border-radius: 999px;
font-family: var(--dd-font);
font-weight: 600;
font-size: 15px;
line-height: 1;
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
}
.dd-btn:hover {
transform: translateY(-2px);
}
.dd-btn--gold {
background: var(--color-accent);
color: var(--color-btn-primary-text);
border-color: var(--color-accent);
box-shadow: 0 8px 24px var(--color-accent-glow);
}
.dd-btn--gold:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
}
.dd-btn--ghost {
background: transparent;
color: var(--color-heading);
border-color: var(--color-border);
}
.dd-btn--ghost:hover {
border-color: var(--color-accent);
}
.dd-btn--ghost-light {
color: var(--color-inverse-text);
border-color: var(--color-inverse-border);
}
.dd-btn--ghost-light:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.dd-btn--outline {
background: transparent;
color: var(--color-heading);
border-color: var(--color-heading);
}
.dd-btn--outline:hover {
background: var(--color-heading);
color: var(--color-bg);
}
.dd-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 14px;
color: var(--color-link);
}
.dd-link::after {
content: "→";
transition: transform 0.2s ease;
}
.dd-link:hover::after {
transform: translateX(4px);
}
/* ---- Eyebrow & section headings ---------------------------------------- */
.dd-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 12px;
font-weight: 700;
color: var(--color-accent-strong);
margin-bottom: 12px;
}
/* Flanking rules on the eyebrow — mirrors the "— LABEL —" treatment. */
.dd-eyebrow::before {
content: "";
flex: none;
width: 22px;
height: 2px;
border-radius: 2px;
background: currentColor;
}
.dd-section-head:not(.dd-section-head--left):not(.dd-section-head--row) .dd-eyebrow::after {
content: "";
flex: none;
width: 22px;
height: 2px;
border-radius: 2px;
background: currentColor;
}
.dd-eyebrow--gold {
color: var(--color-accent);
}
.dd-section {
padding: 88px 0;
}
.dd-section--white {
background: var(--color-bg);
}
.dd-section--mist {
background: var(--color-surface-alt);
}
.dd-section--ink {
background: var(--color-inverse-bg);
color: var(--color-inverse-text);
}
.dd-section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 48px;
}
.dd-section-head--left {
text-align: left;
margin-left: 0;
max-width: 560px;
}
.dd-section-head--light .dd-section-title {
color: var(--color-inverse-heading);
}
.dd-section-head--row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
max-width: none;
text-align: left;
}
.dd-section-title {
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
letter-spacing: -0.02em;
}
.dd-section-title--sm {
font-size: 24px;
}
.dd-section-sub {
color: var(--color-muted);
font-size: 17px;
}
.dd-section-head--light .dd-section-sub {
color: var(--color-inverse-muted);
}
/* ---- Top bar ------------------------------------------------------------
Retired 2026-09-22: the dark info strip above the header was removed on
request, and its WhatsApp block with it. The top-bar rules are gone too, so
nobody has to wonder later what they were for. */
/* ---- Header ------------------------------------------------------------- */
.dd-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--color-header-bg);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-header-border);
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.dd-header--scrolled {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
}
.dd-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 72px;
}
.dd-brand {
font-family: var(--dd-font);
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-heading);
}
.dd-brand strong {
color: var(--color-accent);
font-weight: 800;
}
.dd-brand--light {
color: #fff;
}
/* ---- Brand lock-up, image version ---------------------------------------
The header and footer render the wordmark as artwork from assets/img/.
Two copies ship: logo-light (dark ink + gold, for light grounds) and
logo-dark (cream ink + gold, for the ink ones). They are swapped with
`display`, hanging off the same four theme hooks the palette uses — the
default is light, and the other three re-declare the dark tokens.
The footer has a permanently dark ground, so it pins the reversed copy and
needs no switch of its own. The text rules above stay as a fallback for
installs that do define their own logo. */
.dd-brand--img {
display: inline-flex;
align-items: center;
line-height: 0;
}
.dd-brand--img .dd-brand__img {
display: block;
/* One size for both lock-ups. The masthead mark and the footer mark are
the same artwork, so they are sized together at every breakpoint below
and can never drift apart. */
height: 60px;
width: auto;
}
.dd-brand--img .dd-brand__img img {
display: block;
height: 100%;
width: auto;
}
/* The lock-up is fixed-size furniture — nothing may shrink it. Without this the
header's flex line squeezes the artwork and, because the global `img` rule
caps it with `max-width: 100%` while the height above stays pinned, it loses
width but not height: on a 375px phone the mark rendered at 1.97:1 against an
intrinsic 3.24:1, i.e. visibly crushed. */
.dd-header__brand,
.dd-brand--img,
.dd-brand--img .dd-brand__img {
flex: 0 0 auto;
}
.dd-brand--img .dd-brand__img img {
max-width: none;
}
.dd-brand--img .dd-brand__img--dark {
display: none;
}
html[data-theme="dark"] .dd-brand--img .dd-brand__img--light,
html[data-style="stainedglass"] .dd-brand--img .dd-brand__img--light,
.dd-footer__col--brand .dd-brand--img .dd-brand__img--light {
display: none;
}
html[data-theme="dark"] .dd-brand--img .dd-brand__img--dark,
html[data-style="stainedglass"] .dd-brand--img .dd-brand__img--dark,
.dd-footer__col--brand .dd-brand--img .dd-brand__img--dark {
display: block;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .dd-brand--img .dd-brand__img--light {
display: none;
}
:root:not([data-theme]) .dd-brand--img .dd-brand__img--dark {
display: block;
}
}
.dd-nav__menu {
display: flex;
align-items: center;
/* 20px, not 30px. The six labels are 330px of text however tightly they are
packed, so the gaps are the only slack the header has — and the masthead
mark just took 51px more of the line. Ten pixels saved per gap buys the
whole enlargement back and leaves the desktop budget exactly where it
was. Below 1121px this is overridden anyway: the nav folds. */
gap: 20px;
}
.dd-nav__menu a {
color: var(--color-header-link);
font-weight: 500;
font-size: 15px;
}
.dd-nav__menu a:hover,
.dd-nav__menu .current-menu-item > a {
color: var(--color-accent);
}
.dd-nav__toggle {
display: none;
background: none;
border: 0;
cursor: pointer;
padding: 8px;
}
.dd-nav__toggle-bar {
display: block;
width: 24px;
height: 2px;
background: var(--color-heading);
margin: 5px 0;
border-radius: 2px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.dd-header__actions {
display: flex;
align-items: center;
gap: 12px;
}
/* Day / Night toggle */
.dd-theme-toggle {
width: 42px;
height: 42px;
flex: 0 0 auto;
border-radius: 50%;
border: 1px solid var(--color-header-border);
background: transparent;
color: var(--color-header-link);
font-size: 18px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.dd-theme-toggle:hover {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-btn-primary-text);
transform: translateY(-1px);
}
/* ---- Hero --------------------------------------------------------------- */
.dd-hero {
position: relative;
background: var(--color-hero-bg);
color: var(--color-hero-text);
padding: 104px 0 96px;
overflow: hidden;
/* The day hero is a tinted band, so it needs its own bottom edge: without the
hairline + the inward ramp the warm sand bleeds into the white section below
and the two read as one flat surface. */
border-bottom: 1px solid rgba(21, 24, 40, 0.12);
box-shadow: inset 0 -44px 62px -46px rgba(21, 24, 40, 0.4);
transition: background 0.3s ease;
}
/* The night skins already separate from the section below on their own, so they
take a soft dark edge rather than the day hairline. */
html[data-theme="dark"] .dd-hero,
html[data-style="stainedglass"] .dd-hero {
border-bottom-color: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 -44px 62px -46px rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .dd-hero {
border-bottom-color: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 -44px 62px -46px rgba(0, 0, 0, 0.55);
}
}
.dd-hero__inner {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 56px;
align-items: center;
}
.dd-hero__title {
font-size: clamp(36px, 5.4vw, 60px);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--color-hero-heading);
margin-bottom: 20px;
}
.dd-hero__title span {
display: block;
color: var(--color-hero-accent);
}
.dd-hero__sub {
font-size: 18px;
color: var(--color-hero-muted);
max-width: 540px;
margin-bottom: 30px;
}
.dd-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 34px;
}
.dd-hero .dd-btn--ghost {
color: var(--color-hero-text);
border-color: var(--color-hero-border);
}
.dd-hero .dd-btn--ghost:hover {
border-color: var(--color-accent);
}
.dd-hero__deck {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
transform: rotate(-3deg);
}
/* ---- Placeholder art (no-image demo blocks) ----------------------------- */
.dd-ph {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 18px;
border-radius: var(--dd-radius);
font-family: var(--dd-font);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.92);
min-height: 160px;
position: relative;
overflow: hidden;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.dd-ph span {
position: relative;
z-index: 2;
max-width: 90%;
}
.dd-ph::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.06),
rgba(255, 255, 255, 0.06) 10px,
transparent 10px,
transparent 20px
);
}
.dd-ph--deckbox {
background: linear-gradient(135deg, #3d3f68, #1c1f3a 60%, #14172b);
border: 1px solid rgba(255, 255, 255, 0.14);
}
.dd-ph--sleeves {
background: linear-gradient(135deg, #c9a24b, #8a6b26);
}
.dd-ph--toploader {
background: linear-gradient(135deg, #5d6bb4, #333f7d);
}
.dd-ph--binder {
background: linear-gradient(135deg, #6d3f5f, #351f33);
}
.dd-ph--product {
background: linear-gradient(145deg, #3a3f63, #1c2036);
min-height: 240px;
font-size: 16px;
}
.dd-ph--post {
background: linear-gradient(145deg, #343a58, #191c30);
min-height: 180px;
font-size: 15px;
}
.dd-ph--oem {
background: linear-gradient(145deg, #c9a24b, #7c6126);
min-height: 340px;
font-size: 22px;
}
.dd-ph--story {
background:
radial-gradient(500px 300px at 30% 20%, rgba(201, 162, 75, 0.35), transparent 60%),
linear-gradient(145deg, #232842, #151828);
min-height: 420px;
font-size: 22px;
}
/* ---- Category grid (Platinum / Black & Gold / Glass showcase) -------------- */
.dd-cat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 36px;
}
.dd-cat-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--dd-radius);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.dd-cat-card:hover {
transform: translateY(-6px);
box-shadow: var(--dd-shadow-lg);
}
.dd-cat-card .dd-ph {
min-height: 190px;
border-radius: 0;
}
.dd-cat-card__body {
padding: 20px;
}
.dd-cat-card__title {
font-size: 19px;
font-weight: 700;
margin-bottom: 6px;
}
.dd-cat-card__desc {
color: var(--color-muted);
font-size: 14px;
margin-bottom: 12px;
}
/* ---- Product grid ---------------------------------------------------------- */
.dd-product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.dd-product-grid--arch {
grid-template-columns: repeat(3, 1fr);
}
.dd-product-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--dd-radius);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.dd-product-card:hover {
transform: translateY(-6px);
box-shadow: var(--dd-shadow-lg);
}
.dd-product-card__media {
display: block;
}
.dd-product-card__body {
padding: 18px 20px 22px;
}
.dd-product-card__tag {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-accent-strong);
background: var(--color-accent-soft);
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 8px;
}
.dd-product-card__title {
font-size: 17px;
font-weight: 700;
margin-bottom: 6px;
}
/* Titles link to the SKU's own page when it has one — inherit the card's own
colour so only the hover state gives the link away. */
.dd-product-card__title a {
color: inherit;
text-decoration: none;
}
.dd-product-card__title a:hover {
color: var(--color-accent);
}
.dd-product-card__price {
font-family: var(--dd-font);
font-weight: 700;
font-size: 16px;
color: var(--color-heading);
margin-bottom: 10px;
}
/* ---- Wholesale section ------------------------------------------------------ */
.dd-wholesale {
background:
radial-gradient(900px 500px at 100% 0%, rgba(201, 162, 75, 0.16), transparent 55%),
var(--color-inverse-bg);
color: var(--color-inverse-text);
transition: background 0.3s ease;
}
.dd-wholesale__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.dd-wholesale__item {
background: var(--color-inverse-surface);
border: 1px solid var(--color-inverse-border);
border-radius: var(--dd-radius);
padding: 26px;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.dd-wholesale__item:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
}
.dd-wholesale__title {
color: var(--color-accent);
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.dd-wholesale__desc {
color: var(--color-inverse-muted);
font-size: 14px;
margin: 0;
}
/* ---- Material trust ----------------------------------------------------------- */
.dd-material-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.dd-material {
text-align: center;
background: var(--color-surface-alt);
border-radius: var(--dd-radius);
padding: 40px 28px;
}
.dd-material__icon {
width: 64px;
height: 64px;
margin: 0 auto 18px;
border-radius: 50%;
background: var(--color-inverse-bg);
position: relative;
}
.dd-material__icon::before {
content: "";
position: absolute;
inset: 20px;
border: 3px solid var(--color-accent);
border-radius: 50%;
}
.dd-material__icon--acid::after {
content: "";
position: absolute;
left: 22px;
top: 26px;
width: 20px;
height: 10px;
border-left: 3px solid var(--color-accent);
border-bottom: 3px solid var(--color-accent);
transform: rotate(-45deg);
}
.dd-material__icon--pvc::before {
border: none;
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
}
.dd-material__icon--archival::before {
border-radius: 4px;
border-width: 3px;
}
.dd-material__title {
font-size: 19px;
font-weight: 700;
margin-bottom: 8px;
}
.dd-material__desc {
color: var(--color-muted);
font-size: 15px;
margin: 0;
}
/* ---- Testimonials ----------------------------------------------------------------- */
.dd-testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.dd-testimonial {
margin: 0;
background: var(--color-inverse-surface);
border: 1px solid var(--color-inverse-border);
border-radius: var(--dd-radius);
padding: 30px;
}
.dd-testimonial__stars {
color: var(--color-accent);
letter-spacing: 3px;
margin-bottom: 14px;
font-size: 15px;
}
.dd-testimonial__quote {
color: var(--color-inverse-text);
font-size: 16px;
margin-bottom: 20px;
}
.dd-testimonial__meta {
display: flex;
flex-direction: column;
font-size: 14px;
}
.dd-testimonial__meta strong {
color: var(--color-accent);
}
.dd-testimonial__meta span {
color: var(--color-inverse-muted);
}
/* ---- Story --------------------------------------------------------------------------- */
.dd-story__inner {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 56px;
align-items: center;
}
.dd-story__text {
color: var(--color-text-soft);
font-size: 16px;
}
.dd-story__sign {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: 4px;
}
.dd-story__sign span {
font-weight: 600;
}
.dd-story__slogan {
font-family: var(--dd-font);
font-weight: 800;
color: var(--color-accent-strong);
}
/* ---- Blog -------------------------------------------------------------------------------- */
.dd-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.dd-blog-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--dd-radius);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.dd-blog-card:hover {
transform: translateY(-6px);
box-shadow: var(--dd-shadow-lg);
}
.dd-blog-card__body {
padding: 20px 22px;
}
.dd-blog-card__meta {
font-size: 13px;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 8px;
}
.dd-blog-card__title {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.dd-blog-card__title a:hover {
color: var(--color-accent);
}
.dd-blog-card__excerpt {
color: var(--color-muted);
font-size: 14px;
margin: 0;
}
/* ---- Footer -------------------------------------------------------------------------------------- */
.dd-footer {
background: var(--color-footer-bg);
color: var(--color-footer-text);
transition: background-color 0.3s ease;
}
.dd-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
padding: 64px 0 48px;
}
.dd-footer__tagline {
margin-top: 14px;
font-size: 14px;
max-width: 340px;
}
.dd-footer__title {
color: var(--color-footer-heading);
font-size: 16px;
font-weight: 700;
margin-bottom: 16px;
}
.dd-footer__menu li {
margin-bottom: 8px;
font-size: 14px;
}
.dd-footer__menu a:hover {
color: var(--color-accent);
}
.dd-footer__bottom {
border-top: 1px solid var(--color-inverse-border);
}
.dd-footer__bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 18px 0;
font-size: 13px;
}
.dd-footer__legal {
display: flex;
gap: 18px;
margin: 0;
}
.dd-footer__legal a:hover {
color: var(--color-accent);
}
/* ---- Internal page hero --------------------------------------------------------------------------- */
.dd-page-hero {
background:
radial-gradient(800px 400px at 80% -20%, rgba(201, 162, 75, 0.18), transparent 60%),
var(--color-inverse-bg);
color: var(--color-inverse-text);
padding: 80px 0;
}
.dd-page-hero--slim {
padding: 56px 0;
}
.dd-page-hero__title {
color: var(--color-inverse-heading);
font-size: clamp(30px, 4.4vw, 48px);
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 14px;
}
.dd-page-hero__desc {
color: var(--color-inverse-muted);
font-size: 17px;
max-width: 640px;
margin: 0;
}
.dd-page-hero__actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 26px;
}
/* ---- Layout (sidebar pages) ------------------------------------------------------------------------- */
.dd-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 40px;
padding: 56px 0 80px;
}
.dd-posts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.dd-post-card,
.dd-widget {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--dd-radius);
overflow: hidden;
}
.dd-post-card__body {
padding: 20px 22px;
}
.dd-post-card__meta {
font-size: 13px;
color: var(--color-muted);
margin-bottom: 6px;
}
.dd-post-card__title {
font-size: 20px;
font-weight: 700;
}
.dd-post-card__title a:hover {
color: var(--color-accent);
}
.dd-post-card__excerpt {
color: var(--color-muted);
font-size: 14px;
}
.dd-pagination {
margin-top: 36px;
text-align: center;
}
.dd-pagination .nav-links {
display: inline-flex;
gap: 8px;
}
.dd-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 10px;
border: 1px solid var(--color-border);
border-radius: 999px;
font-weight: 600;
font-size: 14px;
color: var(--color-heading);
}
.dd-pagination .page-numbers.current {
background: var(--color-heading);
color: var(--color-bg);
border-color: var(--color-heading);
}
.dd-empty {
text-align: center;
padding: 80px 20px;
background: var(--color-surface-alt);
border-radius: var(--dd-radius);
}
/* ---- Wholesale page extras ------------------------------------------------------------------------------- */
.dd-note {
color: var(--color-muted);
font-size: 13px;
margin-top: 16px;
}
.dd-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.dd-checklist li {
position: relative;
padding: 10px 0 10px 30px;
border-bottom: 1px solid var(--color-border);
font-size: 15px;
}
.dd-checklist li:last-child {
border-bottom: 0;
}
.dd-checklist li::before {
content: "✓";
position: absolute;
left: 0;
top: 10px;
color: var(--color-accent-strong);
font-weight: 800;
}
.dd-cta-band {
text-align: center;
}
.dd-cta-band__title {
color: var(--color-inverse-heading);
font-size: clamp(24px, 3.4vw, 36px);
font-weight: 800;
max-width: 720px;
margin-inline: auto;
margin-bottom: 14px;
}
.dd-cta-band__text {
color: var(--color-inverse-muted);
max-width: 620px;
margin: 0 auto 28px;
}
/* ---- Product single ------------------------------------------------------------------------------------------ */
.dd-product-single {
padding-top: 40px;
}
.dd-breadcrumb {
display: flex;
gap: 10px;
font-size: 14px;
color: var(--color-muted);
margin-bottom: 28px;
}
.dd-breadcrumb a:hover {
color: var(--color-accent);
}
.dd-product-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
.dd-product-layout__image {
border-radius: var(--dd-radius);
overflow: hidden;
border: 1px solid var(--color-border);
}
.dd-product-layout__title {
font-size: clamp(26px, 3.4vw, 36px);
font-weight: 800;
}
.dd-product-layout__price {
font-family: var(--dd-font);
font-size: 26px;
font-weight: 800;
color: var(--color-accent-strong);
margin-bottom: 18px;
}
.dd-product-layout__desc {
color: var(--color-muted);
margin-bottom: 20px;
}
.dd-product-layout__buy {
margin-bottom: 24px;
}
.dd-product-layout__buy .button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 26px;
border-radius: 999px;
background: var(--color-accent);
color: var(--color-btn-primary-text);
font-weight: 700;
border: 0;
cursor: pointer;
font-size: 15px;
transition: transform 0.15s ease, background 0.2s ease;
}
.dd-product-layout__buy .button:hover {
background: var(--color-accent-hover);
transform: translateY(-2px);
}
.dd-product-layout__trust {
display: flex;
flex-direction: column;
gap: 8px;
}
.dd-product-layout__trust li {
position: relative;
padding-left: 26px;
font-size: 14px;
color: var(--color-text-soft);
}
.dd-product-layout__trust li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--color-accent-strong);
font-weight: 800;
}
.dd-prose {
color: var(--color-text-soft);
}
.dd-prose img {
border-radius: var(--dd-radius);
}
/* ---- Responsive ------------------------------------------------------------------------------------------------ */
@media (max-width: 1024px) {
.dd-cat-grid,
.dd-product-grid,
.dd-wholesale__grid {
grid-template-columns: repeat(2, 1fr);
}
.dd-hero__inner,
.dd-story__inner {
grid-template-columns: 1fr;
}
.dd-hero__deck {
max-width: 460px;
}
.dd-testimonial-grid,
.dd-blog-grid,
.dd-material-grid,
.dd-steps {
grid-template-columns: repeat(2, 1fr);
}
.dd-product-grid--arch {
grid-template-columns: repeat(2, 1fr);
}
.dd-layout {
grid-template-columns: 1fr;
}
.dd-two-col,
.dd-product-layout {
grid-template-columns: 1fr;
}
}
/* Header collapse. Measured 2026-09-24: the brand, six inline nav items, the
language pill, the theme toggle and the gold CTA need a 1250px viewport to
fit on one line. Any narrower and the container (min(1200px, 92%)) runs
short, the nav is the only child left that can shrink, and "Get a Quote"
and "About Us" break *inside their own labels* — which reads as a mistake,
far worse than folding. So the fold point is the physical minimum.
Re-measured 2026-10-28: the "Products" chevron adds 30px to the line, so the
minimum moved up to 1280px. At 1279 the same two labels wrap again — checked
by screenshot at 1250 / 1280 / 1320. Keep the two numbers in step with the
nav markup; a seventh item would move it again. */
@media (max-width: 1279px) {
.dd-nav__toggle {
display: block;
}
.dd-nav__menu {
display: none;
flex-direction: column;
align-items: flex-start;
gap: 4px;
position: absolute;
left: 0;
right: 0;
top: 100%;
background: var(--color-surface);
padding: 18px 4%;
border-top: 1px solid var(--color-header-border);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
}
.dd-nav--open .dd-nav__menu {
display: flex;
}
.dd-nav__menu li {
width: 100%;
}
.dd-nav__menu a {
display: block;
padding: 10px 0;
}
}
/* The bar grows with the mark. At 44px the lock-up sat 14px clear of the edges;
putting 60px inside an unchanged 72px bar leaves it flush against the bottom
border, which reads as a mistake. Desktop only — a phone bar is already
taller than this and must not be forced open. */
@media (min-width: 761px) {
.dd-header__inner {
min-height: 88px;
}
}
/* Narrower still: the CTA has to go so the brand, hamburger, language pill and
theme toggle keep their places. "Get a Quote" stays reachable in the menu. */
@media (max-width: 760px) {
.dd-header__cta {
display: none;
}
/* Let the language pill shrink and scroll inside its own box on phones,
instead of shouldering the theme toggle off the right edge. */
.dd-header__actions {
min-width: 0;
}
.dd-lang-switch {
flex: 0 1 auto;
min-width: 0;
-webkit-overflow-scrolling: touch;
}
/* Both lock-ups come down to 48px. The binding constraint is the header:
from 761px down to 601px it is still one line, and at 601px the six
language codes start scrolling inside their own box past 48px — i.e. a
language would go missing. Below 600px the line splits and there is room
again. */
.dd-brand--img .dd-brand__img {
height: 48px;
}
}
/* On a phone the six language codes and the lock-up cannot share one line: the
codes alone want ~246px, which a 375px container no longer has once the mark,
the menu button and the theme button are placed. Something had to give — and
what gave was the logo (see the note beside the lock-up rules). So below
600px the header runs on two lines: identity and controls first, the language
pill on a line of its own, flush with the mark. Nothing has to shrink, and
all six languages stay visible instead of hiding behind a sideways scroll. */
@media (max-width: 600px) {
.dd-header__inner {
flex-wrap: wrap;
row-gap: 12px;
}
/* Dissolving the actions wrapper makes the pill and the theme button items
of the header line itself, so the button can stay up with the menu while
the pill drops to the second line. */
.dd-header__actions {
display: contents;
}
.dd-nav {
margin-left: auto;
}
.dd-theme-toggle {
order: 1;
}
.dd-lang-switch {
order: 2;
flex: 0 1 auto;
}
/* On its own line the mark is no longer competing with the pill, so it can
go back up to the desktop-ish weight. */
.dd-brand--img .dd-brand__img {
height: 56px;
}
}
/* A 320px phone is the one place the two-line header has to wrap again: at 56px
the mark plus the menu button and the theme button no longer fit on one line
and the bar grows to three rows (106px -> 166px). Stepping the mark back down
keeps it at two. */
@media (max-width: 360px) {
.dd-brand--img .dd-brand__img {
height: 48px;
}
}
/* And one more rung under 320px, where even 48px spills: the header was clean
all the way down to 300px before the mark grew and it has to stay that way. */
@media (max-width: 320px) {
.dd-brand--img .dd-brand__img {
height: 42px;
}
}
@media (max-width: 720px) {
.dd-cat-grid,
.dd-product-grid,
.dd-wholesale__grid,
.dd-testimonial-grid,
.dd-blog-grid,
.dd-material-grid,
.dd-steps {
grid-template-columns: 1fr;
}
.dd-footer__grid {
grid-template-columns: 1fr;
gap: 28px;
}
.dd-posts {
grid-template-columns: 1fr;
}
.dd-section {
padding: 64px 0;
}
}
/* ---- Scroll reveal ------------------------------------------------------------------------------------------- */
.dd-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.dd-reveal.dd-reveal--visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.dd-reveal {
opacity: 1;
transform: none;
}
}
/* ---- Stained Glass style: gothic components & overrides ----------------- */
/* Cathedral arch helpers (pure CSS) */
html[data-style="stainedglass"] .dd-btn {
border-radius: 999px 999px 14px 14px;
}
html[data-style="stainedglass"] .dd-product-card,
html[data-style="stainedglass"] .dd-blog-card,
html[data-style="stainedglass"] .dd-post-card,
html[data-style="stainedglass"] .dd-widget,
html[data-style="stainedglass"] .dd-step {
background: #f5f0e3;
border-color: rgba(230, 184, 76, 0.55);
color: #20222f;
}
/* Product cards get a cathedral arch crown in glass style */
html[data-style="stainedglass"] .dd-product-card {
border-radius: 30% 30% 14px 14px / 20% 20% 14px 14px;
}
html[data-style="stainedglass"] .dd-product-card .dd-ph {
border-bottom: 4px solid var(--glass-gold);
}
html[data-style="stainedglass"] .dd-product-card__title,
html[data-style="stainedglass"] .dd-product-card__tag,
html[data-style="stainedglass"] .dd-blog-card__title,
html[data-style="stainedglass"] .dd-post-card__title,
html[data-style="stainedglass"] .dd-step__title {
color: #1c1e2c;
}
html[data-style="stainedglass"] .dd-product-card__price,
html[data-style="stainedglass"] .dd-product-card__desc,
html[data-style="stainedglass"] .dd-blog-card__excerpt,
html[data-style="stainedglass"] .dd-post-card__excerpt,
html[data-style="stainedglass"] .dd-step__text {
color: #565c75;
}
html[data-style="stainedglass"] .dd-btn--ghost {
border-color: rgba(240, 206, 122, 0.55);
}
/* Lead-line glass separator */
.dd-glass-divider {
height: 10px;
margin: 0;
background:
linear-gradient(90deg, transparent, var(--glass-gold) 16%, var(--glass-blue) 34%, var(--glass-emerald) 52%, var(--glass-red) 70%, var(--glass-gold) 86%, transparent);
opacity: 0.75;
}
/* Stained glass placeholder gradients (product imagery substitute) */
.dd-ph--glass-blue { background: linear-gradient(135deg, #3b76e8, #1b3f8f 60%, #0f2350); }
.dd-ph--glass-red { background: linear-gradient(135deg, #c22f3e, #7d1424 60%, #4a0a14); }
.dd-ph--glass-emerald { background: linear-gradient(135deg, #1f9d6b, #116144 60%, #0a3a28); }
.dd-ph--glass-gold { background: linear-gradient(135deg, #e6b84c, #b97a1f 60%, #6e4510); }
.dd-ph--glass-violet { background: linear-gradient(135deg, #6d3fae, #4b2a7c 60%, #2b1647); }
.dd-ph--glass-mixed {
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.10) 2px, transparent 2px) 0 0 / 26px 26px,
linear-gradient(rgba(255, 255, 255, 0.10) 2px, transparent 2px) 0 0 / 26px 26px,
conic-gradient(from 40deg at 32% 34%, #3b76e8, #1f9d6b, #c22f3e, #e6b84c, #6d3fae, #3b76e8);
background-blend-mode: normal, normal, normal;
}
/* Gothic window ornament */
.dd-window {
position: relative;
display: inline-block;
width: 118px;
height: 158px;
border-radius: 50% 50% 0 0 / 30% 30% 0 0;
border: 4px solid var(--lead-line);
box-shadow: inset 0 0 0 2px rgba(230, 184, 76, 0.22), 0 0 34px rgba(230, 184, 76, 0.35);
overflow: hidden;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.12) 2px, transparent 2px) 0 0 / 33.33% 100%,
linear-gradient(rgba(255, 255, 255, 0.12) 2px, transparent 2px) 0 0 / 100% 50%,
conic-gradient(from 0deg at 50% 62%, #3b76e8, #c22f3e 25%, #e6b84c 50%, #1f9d6b 75%, #6d3fae);
}
.dd-window::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.38), transparent 45%, rgba(0, 0, 0, 0.28) 88%);
}
/* Radiance halo behind hero / section ornaments */
.dd-radiance {
position: absolute;
inset: -45%;
border-radius: 50%;
pointer-events: none;
background: conic-gradient(
from 0deg,
transparent 0deg 14deg,
rgba(230, 184, 76, 0.20) 18deg 26deg,
transparent 30deg 52deg,
rgba(59, 118, 232, 0.16) 56deg 64deg,
transparent 68deg 96deg,
rgba(194, 47, 62, 0.14) 100deg 108deg,
transparent 112deg 142deg,
rgba(31, 157, 107, 0.14) 146deg 154deg,
transparent 158deg 186deg,
rgba(230, 184, 76, 0.18) 190deg 198deg,
transparent 202deg 230deg,
rgba(109, 63, 174, 0.16) 234deg 242deg,
transparent 246deg 276deg,
rgba(59, 118, 232, 0.14) 280deg 288deg,
transparent 292deg 320deg,
rgba(230, 184, 76, 0.16) 324deg 332deg,
transparent 336deg 360deg
);
animation: dd-radiance-spin 90s linear infinite;
}
@keyframes dd-radiance-spin {
to {
transform: rotate(360deg);
}
}
/* ---- Why DeckDorm (PokéVault-inspired) ---------------------------------------------------------- */
.dd-why {
background: var(--color-section-white);
padding: 96px 0;
}
.dd-why__head .dd-eyebrow {
color: var(--color-accent);
}
/* NOTE (2026-09-23): the PokéVault-era `.dd-feat-grid` block that used to sit
here (3 cols + gap 24px) was removed. It was fully overridden by the Round-2
block further down — identical specificity, later in the sheet — so deleting
it changes nothing. It was a trap: two "column count" declarations for the
same class is exactly how the wrong one ends up being edited. */
.dd-feat {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--dd-radius);
padding: 28px 26px;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.dd-feat:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
border-color: var(--color-accent);
}
.dd-feat__icon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 12px;
background: linear-gradient(135deg, rgba(201, 162, 75, 0.18), rgba(201, 162, 75, 0.06));
color: var(--color-accent);
margin-bottom: 16px;
}
.dd-feat__title {
font-size: 18px;
font-weight: 700;
color: var(--color-heading);
margin-bottom: 8px;
}
.dd-feat__text {
color: var(--color-muted);
font-size: 14px;
line-height: 1.65;
margin: 0;
}
/* ---- OEM / ODM Process -------------------------------------------------------------------------- */
.dd-oem {
background: var(--color-section-mist);
padding: 96px 0;
}
.dd-oem__head .dd-eyebrow {
color: var(--color-accent);
}
/* ---- Get In Touch (PokéVault-inspired) ---------------------------------------------------------- */
.dd-git {
background: linear-gradient(120deg, var(--color-inverse-bg-2), var(--color-inverse-bg));
padding: 96px 0;
transition: background 0.3s ease;
}
.dd-git__grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
align-items: start;
}
.dd-git .dd-section-title--light {
color: var(--color-inverse-heading);
}
.dd-git__head .dd-eyebrow {
color: var(--color-accent);
}
.dd-git__sub {
color: var(--color-inverse-muted);
font-size: 16px;
line-height: 1.7;
margin: 14px 0 0;
max-width: 520px;
}
.dd-git__lines {
margin-top: 28px;
display: grid;
gap: 12px;
}
.dd-contact-line {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--color-inverse-text);
font-size: 15px;
}
.dd-contact-line > span {
display: block;
line-height: 1.5;
}
/* Label on its own line, value underneath — otherwise "Emailsales01@…"
renders as "Email:sales01@…" with no separation. */
.dd-contact-line b {
display: block;
color: var(--color-inverse-heading);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
margin-bottom: 1px;
}
.dd-contact-line svg {
color: var(--color-accent);
flex: none;
margin-top: 3px;
}
.dd-contact-line a {
color: var(--color-inverse-heading);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.dd-contact-line a:hover {
color: var(--color-accent);
}
/* Social links (shared by Get In Touch & footer) */
.dd-socials {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.dd-socials__link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--color-inverse-border);
color: var(--color-inverse-heading);
background: rgba(255, 255, 255, 0.06);
transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dd-socials__link:hover {
color: var(--color-accent);
border-color: var(--color-accent);
transform: translateY(-2px);
}
.dd-footer .dd-socials {
margin-top: 18px;
}
.dd-footer .dd-socials__link {
border-color: rgba(255, 255, 255, 0.18);
color: var(--color-footer-text);
background: transparent;
}
.dd-footer .dd-socials__link:hover {
color: var(--color-accent);
border-color: var(--color-accent);
}
/* New-module responsive */
@media (max-width: 1024px) {
/* `.dd-feat-grid` used to be re-declared as 2 columns here. The later
@media (max-width: 1180px) block wins at every width this one matches,
so that declaration was dead — removed 2026-09-23. */
.dd-git__grid {
grid-template-columns: 1fr;
gap: 36px;
}
}
@media (max-width: 720px) {
.dd-feat-grid,
.dd-steps--oem {
grid-template-columns: 1fr;
}
}
/* ---- Single page & post content (page.php / single.php) ------------------------------------------------- */
.dd-layout--single {
grid-template-columns: minmax(0, 1fr);
}
.dd-entry {
max-width: 860px;
}
.dd-entry__thumb {
margin-bottom: 32px;
border-radius: var(--dd-radius);
overflow: hidden;
}
.dd-entry__thumb img {
display: block;
width: 100%;
height: auto;
}
.dd-entry__content {
color: var(--color-text-soft);
font-family: var(--dd-font-body);
font-size: 16.5px;
line-height: 1.75;
}
.dd-entry__content > * + * {
margin-top: 1.15em;
}
.dd-entry__content h2,
.dd-entry__content h3,
.dd-entry__content h4 {
color: var(--color-heading);
font-family: var(--dd-font);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.25;
margin-top: 1.9em;
margin-bottom: 0;
}
.dd-entry__content h2 { font-size: 27px; }
.dd-entry__content h3 { font-size: 21px; }
.dd-entry__content h4 { font-size: 18px; }
.dd-entry__content a {
color: var(--color-link);
text-decoration: underline;
text-underline-offset: 3px;
}
.dd-entry__content ul,
.dd-entry__content ol {
padding-left: 1.35em;
}
.dd-entry__content li + li {
margin-top: 0.45em;
}
.dd-entry__content blockquote {
margin: 1.7em 0;
padding: 4px 0 4px 22px;
border-left: 3px solid var(--color-accent);
color: var(--color-text-soft);
font-style: italic;
}
.dd-entry__content table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.dd-entry__content th,
.dd-entry__content td {
border: 1px solid var(--color-border);
padding: 10px 12px;
text-align: left;
vertical-align: top;
}
.dd-entry__content th {
background: var(--color-surface-alt);
color: var(--color-heading);
font-family: var(--dd-font);
font-weight: 700;
}
.dd-entry__content img {
max-width: 100%;
height: auto;
border-radius: var(--dd-radius-sm);
}
.dd-entry__pages {
margin-top: 26px;
}
.dd-entry__back {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--color-border);
}
/* =========================================================================================
Round 2 — header language pill, hero tiles, Why cards, OEM timeline,
Get-a-Quote module, catalog module, 3-column footer, Products page.
========================================================================================= */
/* ---- Undefined tokens used by .dd-why / .dd-oem (previously resolved to nothing) ------- */
:root {
--color-section-white: #ffffff;
--color-section-mist: #f5f4ee;
--dd-glow: 0 0 0 rgba(0, 0, 0, 0);
}
html[data-theme="dark"] {
--color-section-white: #0d0f18;
--color-section-mist: #10131e;
}
/* ---- Language switcher: compact text-code pill (EN / ES / DE / JA / 简 / 繁) -----------
Codes, never flags. A flag is not a language, and regional-indicator / emoji
flags have no glyph on Windows — they render blank, clipped or overlapping
there. Plain text is identical in every browser and OS. */
.dd-lang-switch {
--dd-lang-track: #eaedf5;
--dd-lang-text: #6b7280;
--dd-lang-text-active: #161a26;
--dd-lang-pill: #ffffff;
--dd-lang-pill-shadow: 0 1px 2px rgba(16, 22, 40, 0.14), 0 2px 8px rgba(16, 22, 40, 0.10);
display: inline-flex;
align-items: center;
gap: 2px;
padding: 4px;
border-radius: 999px;
background: var(--dd-lang-track);
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.dd-lang-switch::-webkit-scrollbar {
display: none;
}
html[data-theme="dark"] .dd-lang-switch {
--dd-lang-track: #232838;
--dd-lang-text: #98a1b8;
--dd-lang-text-active: #ffffff;
--dd-lang-pill: #3b4460;
--dd-lang-pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.32);
}
.dd-lang-switch__btn,
.dd-lang-switch__btn:link,
.dd-lang-switch__btn:visited {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 30px;
padding: 0 10px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--dd-lang-text);
font-family: var(--dd-font);
font-size: 13px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.02em;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.dd-lang-switch__btn:hover {
color: var(--dd-lang-text-active);
}
.dd-lang-switch__btn.is-active,
.dd-lang-switch__btn[aria-current="true"] {
background: var(--dd-lang-pill);
color: var(--dd-lang-text-active);
box-shadow: var(--dd-lang-pill-shadow);
}
.dd-lang-switch__code {
display: block;
}
/* Legacy adapter — only applies if a child theme still prints pll_the_languages()
markup (ul > li > a) instead of calling dd_lang_switcher(). */
.dd-lang-switch ul {
display: inline-flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.dd-lang-switch li {
margin: 0;
list-style: none;
}
.dd-lang-switch li a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 30px;
padding: 0 10px;
border-radius: 999px;
color: var(--dd-lang-text);
font-family: var(--dd-font);
font-size: 13px;
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.dd-lang-switch li a:hover {
color: var(--dd-lang-text-active);
}
.dd-lang-switch li.current-lang a,
.dd-lang-switch li.current-menu-item a {
background: var(--dd-lang-pill);
color: var(--dd-lang-text-active);
box-shadow: var(--dd-lang-pill-shadow);
}
/* ---- Buttons: catalog secondary + glowing gold ---------------------------------------- */
.dd-btn--glow {
position: relative;
box-shadow:
0 8px 24px var(--color-accent-glow),
0 0 0 0 rgba(201, 162, 75, 0.55);
animation: dd-glow-pulse 3.2s ease-in-out infinite;
}
.dd-btn--glow:hover {
box-shadow:
0 12px 32px var(--color-accent-glow),
0 0 22px rgba(201, 162, 75, 0.55),
0 0 46px rgba(201, 162, 75, 0.25);
animation-play-state: paused;
}
@keyframes dd-glow-pulse {
0%,
100% {
box-shadow: 0 8px 24px var(--color-accent-glow), 0 0 10px rgba(201, 162, 75, 0.22);
}
50% {
box-shadow: 0 10px 30px var(--color-accent-glow), 0 0 24px rgba(201, 162, 75, 0.5);
}
}
@media (prefers-reduced-motion: reduce) {
.dd-btn--glow {
animation: none;
}
}
/* ---- Hero product tiles: interactive cards -------------------------------------------- */
.dd-hero__deck {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
/* The tilted deck is the hero's signature — Round 2 flattened it to `none`
while it introduced the 3D flip. The tilt is back; `perspective` stays so
the flip still reads as depth rather than a flat swap. */
transform: rotate(-3.2deg);
perspective: 900px;
}
/* The right-hand column rides a little lower, so the four tiles read as a
hand-placed stack instead of a rigid grid. `translate` is used rather than
`transform` so the offset composes with — and is not wiped by — the hover
transform on `.dd-tile`. */
.dd-hero__deck .dd-tile:nth-child(2),
.dd-hero__deck .dd-tile:nth-child(4) {
translate: 0 20px;
}
@media (max-width: 900px) {
.dd-hero__deck {
transform: none;
}
.dd-hero__deck .dd-tile:nth-child(2),
.dd-hero__deck .dd-tile:nth-child(4) {
translate: 0 0;
}
}
/* ---- Why DeckDorm: icon cards --------------------------------------------------------- */
/* 2 x 3 — two rows of three. `grid-auto-rows: 1fr` makes both rows the same
height so the six cards read as one clean block instead of two ragged rows.
It is reset to `auto` at the 1180px / 720px breakpoints: on a 2-column or
1-column stack, equal rows would stretch every card to the tallest one. */
.dd-feat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 1fr;
gap: 22px;
}
.dd-feat {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 18px;
padding: 26px 24px 28px;
box-shadow: 0 1px 2px rgba(21, 24, 40, 0.03);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.dd-feat:hover {
transform: translateY(-5px);
box-shadow: 0 18px 40px rgba(21, 24, 40, 0.1);
border-color: rgba(201, 162, 75, 0.55);
}
.dd-feat__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 13px;
margin-bottom: 18px;
}
.dd-feat__icon--rose {
background: #fdeae7;
color: #c0392b;
}
.dd-feat__icon--sky {
background: #e8eefb;
color: #2f4f9e;
}
.dd-feat__icon--amber {
background: #fbf2da;
color: #a8821f;
}
.dd-feat__icon--indigo {
background: #e9f0fc;
color: #33579e;
}
.dd-feat__icon--peach {
background: #fdece7;
color: #c05a2b;
}
.dd-feat__icon--sand {
background: #f7f1de;
color: #9a7a20;
}
html[data-theme="dark"] .dd-feat__icon--rose {
background: rgba(192, 57, 43, 0.16);
color: #f08a7c;
}
html[data-theme="dark"] .dd-feat__icon--sky {
background: rgba(47, 79, 158, 0.2);
color: #8fb0f0;
}
html[data-theme="dark"] .dd-feat__icon--amber {
background: rgba(168, 130, 31, 0.2);
color: #e6c87a;
}
html[data-theme="dark"] .dd-feat__icon--indigo {
background: rgba(51, 87, 158, 0.2);
color: #93b3f2;
}
html[data-theme="dark"] .dd-feat__icon--peach {
background: rgba(192, 90, 43, 0.18);
color: #f0a884;
}
html[data-theme="dark"] .dd-feat__icon--sand {
background: rgba(154, 122, 32, 0.2);
color: #e6c87a;
}
.dd-feat__title {
font-size: 17.5px;
font-weight: 800;
line-height: 1.25;
color: var(--color-heading);
margin-bottom: 10px;
}
.dd-feat__text {
color: var(--color-muted);
font-size: 14px;
line-height: 1.62;
margin: 0;
}
/* ---- OEM / ODM step timeline ---------------------------------------------------------- */
.dd-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0 20px;
}
.dd-timeline::before {
content: "";
position: absolute;
top: 7px;
left: 7px;
right: 7px;
height: 1px;
background: var(--color-border);
}
.dd-tl {
position: relative;
padding-top: 0;
}
.dd-tl__title {
font-size: 15.5px;
font-weight: 800;
line-height: 1.3;
color: var(--color-heading);
margin-bottom: 8px;
}
.dd-tl__text {
color: var(--color-muted);
font-size: 13.5px;
line-height: 1.6;
margin: 0;
}
/* ---- Get a Quote module --------------------------------------------------------------- */
.dd-git__grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 52px;
align-items: start;
}
.dd-includes {
margin-top: 30px;
background: rgba(255, 255, 255, 0.045);
border: 1px solid var(--color-inverse-border);
border-radius: var(--dd-radius);
padding: 24px 26px;
}
.dd-includes__title {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--dd-font);
font-weight: 800;
font-size: 15.5px;
color: var(--color-inverse-heading);
margin: 0 0 16px;
}
.dd-includes__title svg {
color: var(--color-accent);
flex: none;
}
.dd-includes__list {
display: grid;
gap: 11px;
margin: 0;
padding: 0;
list-style: none;
}
.dd-includes__list li {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--color-inverse-text);
font-size: 14.5px;
line-height: 1.5;
}
.dd-includes__list svg {
color: var(--color-accent);
flex: none;
margin-top: 4px;
}
/* Form card */
.dd-quote-card {
background: #ffffff;
border-radius: 20px;
padding: 30px 30px 26px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
color: #1f2430;
}
.dd-quote-notice {
border-radius: 12px;
padding: 14px 16px;
font-size: 14.5px;
font-weight: 600;
margin-bottom: 20px;
border: 1px solid transparent;
}
.dd-quote-notice--ok {
background: #eaf7ef;
border-color: #bfe4cd;
color: #1d6b3f;
}
.dd-quote-notice--err {
background: #fdecea;
border-color: #f3c2bd;
color: #a4342a;
}
.dd-quote-form__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.dd-quote-form__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 18px;
}
.dd-field {
display: flex;
flex-direction: column;
gap: 7px;
margin: 0 0 16px;
}
.dd-field--full {
margin-bottom: 14px;
}
.dd-field label {
font-family: var(--dd-font);
font-size: 13px;
font-weight: 700;
color: #3d4356;
}
.dd-field label span {
color: #c0392b;
}
.dd-field input,
.dd-field textarea {
width: 100%;
font-family: var(--dd-font-body);
font-size: 15px;
color: #1f2430;
background: #f4f5f8;
border: 1px solid #e3e5ec;
border-radius: 11px;
padding: 12px 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.dd-field textarea {
resize: vertical;
min-height: 108px;
}
.dd-field input::placeholder,
.dd-field textarea::placeholder {
color: #9aa1b2;
}
.dd-field input:focus,
.dd-field textarea:focus {
outline: none;
background: #fff;
border-color: var(--color-accent);
box-shadow: 0 0 0 4px rgba(201, 162, 75, 0.16);
}
.dd-consent {
display: flex;
align-items: flex-start;
gap: 11px;
font-size: 13.5px;
line-height: 1.5;
color: #5b6172;
margin: 4px 0 20px;
cursor: pointer;
}
.dd-consent input {
flex: none;
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--color-accent);
}
.dd-quote-form__submit {
width: 100%;
padding: 16px 26px;
font-size: 16px;
}
.dd-quote-form__note {
text-align: center;
font-size: 12.5px;
color: #8b91a3;
margin: 14px 0 0;
}
/* ---- Footer: three columns ------------------------------------------------------------ */
.dd-footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 48px;
padding: 68px 0 52px;
}
.dd-footer__tagline {
margin-top: 16px;
font-size: 14px;
line-height: 1.7;
max-width: 380px;
}
.dd-footer__title {
color: var(--color-footer-heading);
font-family: var(--dd-font);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 18px;
}
.dd-footer__menu li {
margin-bottom: 11px;
font-size: 14.5px;
}
/* ---- Products page: category tabs ------------------------------------------------------ */
.dd-range__group {
scroll-margin-top: 150px;
}
.dd-range__group + .dd-range__group {
margin-top: 72px;
padding-top: 56px;
border-top: 1px solid var(--color-border);
}
.dd-range__head {
max-width: 720px;
margin-bottom: 30px;
}
.dd-range__title {
font-size: clamp(24px, 3vw, 32px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-heading);
margin-bottom: 10px;
}
.dd-range__desc {
color: var(--color-muted);
font-size: 16px;
margin: 0;
}
.dd-product-grid--range {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* A range with no SKUs yet ("others") — one sentence instead of an empty grid.
Left rule only: a filled panel here would read as a card with no photo. */
.dd-range__empty {
max-width: 68ch;
margin: 0;
padding: 4px 0 4px 20px;
border-left: 3px solid var(--color-accent);
color: var(--color-text-soft);
font-size: 15px;
line-height: 1.75;
}
.dd-range__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 30px;
padding-top: 26px;
border-top: 1px dashed var(--color-border);
}
/* ---- Empty state ---------------------------------------------------------------------- */
.dd-empty--blog {
display: grid;
justify-items: center;
gap: 14px;
padding: 64px 28px;
}
.dd-empty--blog h3 {
font-size: 22px;
font-weight: 800;
margin: 0;
}
.dd-empty--blog p {
max-width: 560px;
margin: 0;
color: var(--color-muted);
}
/* ---- Wholesale grid on light sections ------------------------------------------------- */
.dd-wholesale__grid--light .dd-wholesale__item {
background: var(--color-surface);
border-color: var(--color-border);
}
.dd-wholesale__grid--light .dd-wholesale__title {
color: var(--color-accent-strong);
}
.dd-wholesale__grid--light .dd-wholesale__desc {
color: var(--color-muted);
}
/* ---- Responsive ----------------------------------------------------------------------- */
@media (max-width: 1280px) {
.dd-lang-switch__btn {
min-width: 34px;
padding: 0 8px;
font-size: 12px;
}
}
@media (max-width: 1180px) {
.dd-timeline {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 34px 24px;
}
.dd-timeline::before {
display: none;
}
.dd-feat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: auto;
}
.dd-hero__deck {
max-width: 520px;
margin-inline: auto;
}
}
@media (max-width: 1024px) {
.dd-git__grid,
.dd-catalog__inner {
grid-template-columns: 1fr;
gap: 40px;
}
.dd-footer__grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.dd-product-grid--range {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.dd-feat-grid,
.dd-product-grid--range {
grid-template-columns: 1fr;
}
.dd-feat-grid {
grid-auto-rows: auto;
}
.dd-timeline {
grid-template-columns: 1fr;
gap: 30px;
}
.dd-footer__grid {
grid-template-columns: 1fr;
gap: 34px;
}
.dd-quote-card {
padding: 24px 20px;
border-radius: 16px;
}
.dd-quote-form__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.dd-hero__deck {
grid-template-columns: 1fr;
}
.dd-lang-switch__btn {
min-width: 30px;
padding: 0 7px;
font-size: 11.5px;
}
}
/* =========================================================================================
Round 2b — separator handling for the filtered Products groups, quote form states.
========================================================================================= */
.dd-range__group + .dd-range__group {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.dd-range__group[data-sep="1"] {
margin-top: 72px;
padding-top: 56px;
border-top: 1px solid var(--color-border);
}
.dd-quote-form.is-sending .dd-quote-form__submit {
opacity: 0.72;
pointer-events: none;
}
.dd-field.has-error input,
.dd-field.has-error textarea,
.dd-consent.has-error {
border-color: #d0483a;
}
.dd-consent.has-error {
background: #fdecea;
border-radius: 10px;
padding: 10px 12px;
}
.dd-form-error {
background: #fdecea;
border: 1px solid #f3c2bd;
color: #a4342a;
border-radius: 11px;
padding: 12px 14px;
font-size: 14px;
font-weight: 600;
margin-bottom: 16px;
}
/* =========================================================================================
Round 3 — hero tile flip, numbered OEM timeline, per-category pages, language flags,
contact page, richer Get-a-Quote module, four-column footer.
========================================================================================= */
/* ---- Hero product tiles: flip to reveal the product photo ------------------------------ */
.dd-tile {
position: relative;
display: block;
min-height: 176px;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: var(--dd-tile-shadow);
color: #fff;
text-decoration: none;
isolation: isolate;
transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease,
border-color 0.35s ease;
}
.dd-tile--deckbox {
background: linear-gradient(135deg, #3d3f68, #1c1f3a 60%, #14172b);
}
.dd-tile--sleeves {
background: linear-gradient(135deg, #c9a24b, #8a6b26);
}
.dd-tile--toploader {
background: linear-gradient(135deg, #5d6bb4, #333f7d);
}
.dd-tile--binder {
background: linear-gradient(135deg, #6d3f5f, #351f33);
}
.dd-tile__flip {
position: absolute;
inset: 0;
display: block;
transform-style: preserve-3d;
transition: transform 0.72s cubic-bezier(0.2, 0.75, 0.3, 1);
}
.dd-tile__face {
position: absolute;
inset: 0;
display: block;
overflow: hidden;
border-radius: inherit;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.dd-tile__face--front {
z-index: 1;
}
.dd-tile__face--front::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.055),
rgba(255, 255, 255, 0.055) 10px,
transparent 10px,
transparent 20px
);
pointer-events: none;
}
.dd-tile__face--back {
transform: rotateY(180deg);
background: linear-gradient(155deg, #fbfaf6, #e8e4d6);
}
.dd-tile:hover,
.dd-tile:focus-visible {
transform: translateY(-6px);
border-color: rgba(201, 162, 75, 0.85);
box-shadow:
var(--dd-tile-shadow-hover),
0 0 0 1px rgba(201, 162, 75, 0.35),
0 0 34px rgba(201, 162, 75, 0.35);
/* Carried over verbatim from the older, overridden `.dd-tile:hover` block
that used to sit further up the sheet. That block is gone; the 8% lift
itself was live (it leaked past the override) so it is preserved here
rather than dropped. `filter` is deliberately *not* in the transition
list above — that is how it behaved before, so the hover still snaps. */
filter: saturate(1.08);
outline: none;
}
.dd-tile:hover .dd-tile__flip,
.dd-tile:focus-visible .dd-tile__flip {
transform: rotateY(180deg);
}
.dd-tile__label {
position: absolute;
left: 18px;
right: 18px;
bottom: 16px;
z-index: 2;
max-width: none;
font-family: var(--dd-font);
font-weight: 800;
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.01em;
text-align: left;
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.dd-tile__label--back {
color: #1f2430;
text-shadow: none;
}
/* The photo (or the CSS mock-up used until photos are uploaded) */
.dd-tile__shot {
position: absolute;
inset: 0 0 46px 0;
display: block;
background: #fff;
}
.dd-tile__shot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.dd-tile__mock {
position: absolute;
inset: 0 0 46px 0;
display: block;
background: radial-gradient(130px 90px at 50% 34%, rgba(201, 162, 75, 0.18), transparent 72%);
}
.dd-tile__mock-card {
position: absolute;
left: 50%;
top: 46%;
width: 44%;
aspect-ratio: 5 / 7;
transform: translate(-50%, -50%) rotate(-6deg);
border-radius: 6px;
background: linear-gradient(150deg, #ffffff, #ded9c8);
box-shadow: 0 10px 22px rgba(31, 36, 48, 0.18), 0 0 0 1px rgba(31, 36, 48, 0.06);
}
.dd-tile__mock-card::after {
content: "";
position: absolute;
inset: 12% 12% auto 12%;
height: 32%;
border-radius: 4px;
background: linear-gradient(135deg, #c9a24b, #8a6b26);
opacity: 0.85;
}
@media (hover: none) {
.dd-tile__face--back {
display: none;
}
.dd-tile:hover .dd-tile__flip {
transform: none;
}
}
/* ---- Buttons: solid secondary --------------------------------------------------------- */
.dd-btn--solid {
background: var(--color-inverse-bg);
color: #fff;
border-color: var(--color-inverse-bg);
box-shadow: 0 8px 20px rgba(21, 24, 40, 0.22);
}
.dd-btn--solid:hover {
background: var(--color-inverse-bg-2);
border-color: var(--color-accent);
color: var(--color-accent-hover);
}
/* ---- Buttons: hero hierarchy -----------------------------------------------------------
The dark "Product Catalog" pill used to out-shout the primary CTA purely on
contrast, so it is dialled down to a light-weight pill (`.dd-btn--sm`).
The primary CTA is back to the stock `.dd-btn--gold` — a bespoke
`.dd-btn--gold-rich` treatment was tried in Round 7 and rejected. */
.dd-btn--sm {
padding: 9px 17px;
gap: 6px;
font-size: 13px;
border-width: 1px;
}
html[data-theme="dark"] .dd-btn--solid {
background: #e9ebf5;
color: #161a26;
border-color: #e9ebf5;
}
html[data-theme="dark"] .dd-btn--solid:hover {
background: #fff;
color: #161a26;
}
/* ---- OEM / ODM process: numbered milestone rail ---------------------------------------- */
.dd-timeline {
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 34px 20px;
}
.dd-timeline::before {
top: 19px;
left: 24px;
right: 24px;
height: 2px;
border-radius: 2px;
background: linear-gradient(
90deg,
rgba(201, 162, 75, 0.12),
rgba(201, 162, 75, 0.55),
rgba(201, 162, 75, 0.12)
);
}
.dd-tl__num {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: 18px;
border-radius: 50%;
background: var(--color-surface);
border: 2px solid var(--color-accent);
color: var(--color-accent-strong);
font-family: var(--dd-font);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
box-shadow: 0 0 0 6px var(--color-surface-alt);
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.dd-tl:hover .dd-tl__num {
background: var(--color-accent);
color: #1a1405;
transform: translateY(-2px) scale(1.06);
box-shadow: 0 0 0 6px var(--color-surface-alt), 0 10px 24px rgba(201, 162, 75, 0.32);
}
@media (max-width: 1180px) {
.dd-timeline {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dd-timeline::before {
display: none;
}
}
@media (max-width: 720px) {
.dd-timeline {
grid-template-columns: 1fr;
}
.dd-tl__num {
width: 34px;
height: 34px;
font-size: 12px;
margin-bottom: 12px;
}
}
/* ---- Get a Quote module ---------------------------------------------------------------- */
.dd-git__head {
max-width: 760px;
margin-bottom: 36px;
}
.dd-git__sub {
color: var(--color-inverse-muted);
font-size: 16.5px;
line-height: 1.6;
margin: 14px 0 0;
}
.dd-git__col {
display: flex;
flex-direction: column;
min-width: 0;
}
.dd-git__col .dd-includes {
margin-top: 0;
}
.dd-socials--inline {
margin-top: 0;
gap: 8px;
}
/* ---- Products overview: "All Products" label + More buttons ----------------------------- */
/* Section label above the first line group on the browse page. It used to be a
filled pill reading "All Products" — that label now belongs to a real page,
so this one names the section instead and drops the frame: plain gold
uppercase, same "— LABEL" treatment as .dd-eyebrow (the dash comes from
there; this rule only owns the spacing). */
.dd-range__label {
margin: 0 0 46px;
}
.dd-range__group[data-sep="1"]:first-of-type {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.dd-range__foot {
display: flex;
margin-top: 26px;
}
.dd-btn--more {
gap: 9px;
}
.dd-btn--more svg {
transition: transform 0.22s ease;
}
.dd-btn--more:hover svg {
transform: translateX(4px);
}
/* ---- Catalogue card (Products overview + category pages) -------------------
Photo and copy are two separate blocks, the way sanseking lays it out: the
picture gets its own 1:1 frame, the text sits underneath on the page — no
card border wrapping both together.
The whole article is one link. Hovering swaps the cover for the macro leather
detail of the same product, instantly (no fade — the close-up should read as
a flip, not a slow dissolve).
Text follows the site naming rule:
Micro-Grid Embossed ← effect
4-Pocket Card Binder ← specific name
For cards ← grey compatibility line */
.dd-product-card--catalog,
.dd-product-card--catalog:hover {
display: flex;
flex-direction: column;
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
transform: none;
box-shadow: none;
}
.dd-product-card__link {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
color: inherit;
text-decoration: none;
}
.dd-product-card__link:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
/* Every catalogue cover is a 1:1 slot — the photos are square, and the
placeholder art fills the same box so that dropping a photo in later never
shifts the layout. */
.dd-product-card--catalog .dd-product-card__media {
position: relative;
aspect-ratio: 1 / 1;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--dd-radius);
overflow: hidden;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.dd-product-card--catalog .dd-ph {
height: 100%;
min-height: 0;
border-radius: 0;
}
.dd-product-card--photo .dd-product-card__img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Second frame stacks on top, invisible until hover. */
.dd-product-card__img--hover {
opacity: 0;
}
.dd-product-card__link:hover .dd-product-card__img--hover {
opacity: 1;
}
.dd-product-card__link:hover .dd-product-card__media {
border-color: var(--color-accent);
box-shadow: var(--dd-shadow-lg);
}
.dd-product-card__body {
padding: 16px 2px 0;
}
.dd-product-card__effect {
margin: 0 0 7px;
font-family: var(--dd-font);
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent-strong);
}
.dd-product-card--catalog .dd-product-card__title {
margin-bottom: 0;
transition: color 0.2s ease;
}
.dd-product-card__link:hover .dd-product-card__title {
color: var(--color-accent);
}
.dd-product-card__fit {
margin: 6px 0 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--color-muted);
}
/* ---- Single product-category page ------------------------------------------------------- */
.dd-cat-note {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 52px;
padding: 26px 30px;
border-radius: var(--dd-radius);
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
}
.dd-cat-note__text {
margin: 0;
max-width: 640px;
font-size: 16px;
line-height: 1.6;
color: var(--color-text);
}
.dd-cat-more {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 30px;
}
.dd-cat-more__label {
margin-right: 6px;
font-family: var(--dd-font);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-muted);
}
.dd-cat-more__link {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-heading);
font-size: 14px;
font-weight: 600;
transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dd-cat-more__link:hover {
border-color: var(--color-accent);
color: var(--color-accent-strong);
transform: translateY(-2px);
}
/* ---- Contact page ----------------------------------------------------------------------- */
.dd-contact-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.dd-contact-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 28px 26px;
border-radius: var(--dd-radius);
background: var(--color-surface);
border: 1px solid var(--color-border);
color: inherit;
text-decoration: none;
transition: transform 0.22s ease, box-shadow 0.25s ease, border-color 0.22s ease;
}
a.dd-contact-card:hover {
transform: translateY(-6px);
box-shadow: var(--dd-shadow-lg);
border-color: var(--color-accent);
}
.dd-contact-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-bottom: 12px;
border-radius: 13px;
background: var(--color-accent-soft);
color: var(--color-accent-strong);
}
.dd-contact-card__label {
font-family: var(--dd-font);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-muted);
}
.dd-contact-card__value {
font-family: var(--dd-font);
font-size: 17px;
font-weight: 800;
line-height: 1.3;
color: var(--color-heading);
word-break: break-word;
}
.dd-contact-card__note {
font-size: 13.5px;
line-height: 1.5;
color: var(--color-muted);
}
.dd-contact-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 28px;
margin-top: 44px;
padding: 34px 36px;
border-radius: var(--dd-radius);
background:
radial-gradient(700px 320px at 100% 0%, rgba(201, 162, 75, 0.16), transparent 60%),
var(--color-inverse-bg);
color: var(--color-inverse-text);
}
.dd-contact-cta__title {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 800;
letter-spacing: -0.015em;
color: var(--color-inverse-heading);
margin-bottom: 8px;
}
.dd-contact-cta__text {
max-width: 640px;
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--color-inverse-muted);
}
.dd-contact-cta__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.dd-contact-cta__social {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.dd-contact-cta__social > span {
font-family: var(--dd-font);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-inverse-muted);
}
@media (max-width: 1180px) {
.dd-contact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.dd-contact-grid {
grid-template-columns: 1fr;
}
.dd-contact-cta {
padding: 26px 22px;
}
}
/* ---- Wholesale page: clearer OEM checklist ---------------------------------------------- */
.dd-two-col__lead {
max-width: 560px;
margin: 0 0 22px;
font-size: 16px;
line-height: 1.65;
color: var(--color-text);
}
.dd-checklist li {
font-size: 15.5px;
line-height: 1.55;
color: var(--color-text);
}
/* ---- Footer: four parallel columns ------------------------------------------------------ */
.dd-footer__grid {
display: grid;
grid-template-columns: 1.55fr 1fr 1fr 1.15fr;
gap: 44px;
align-items: start;
padding: 68px 0 52px;
}
.dd-footer__col {
min-width: 0;
}
.dd-footer__menu--contact li {
margin-bottom: 12px;
}
.dd-footer__menu--contact a {
display: flex;
align-items: flex-start;
gap: 9px;
}
.dd-footer__menu--contact svg {
flex: none;
margin-top: 3px;
color: var(--color-accent);
}
.dd-footer__menu--contact span {
word-break: break-word;
}
@media (max-width: 1180px) {
.dd-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}
}
@media (max-width: 720px) {
.dd-footer__grid {
grid-template-columns: 1fr;
gap: 34px;
}
}
/* ---- Responsive touches ----------------------------------------------------------------- */
@media (max-width: 560px) {
.dd-tile {
min-height: 148px;
}
.dd-tile__label {
font-size: 14px;
left: 14px;
right: 14px;
}
}
/* =========================================================================================
Round 7 — Our Community: five-up Instagram row + Instagram-style post viewer.
========================================================================================= */
.dd-igrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
margin: 0 0 30px;
padding: 0;
list-style: none;
}
.dd-igrid__item {
min-width: 0;
}
.dd-igrid__btn,
.dd-igrid__empty {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
padding: 0;
border: 0;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(150deg, #2b3150, #171b30 70%);
cursor: pointer;
isolation: isolate;
box-shadow: 0 10px 26px rgba(21, 24, 40, 0.12);
transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.32s ease;
}
.dd-igrid__btn:hover,
.dd-igrid__btn:focus-visible {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(21, 24, 40, 0.22);
}
/* An empty slot keeps the row five-up until the real posts are supplied. */
.dd-igrid__empty {
display: grid;
place-items: center;
cursor: default;
color: rgba(21, 24, 40, 0.22);
background: var(--color-surface-alt);
border: 1px dashed rgba(21, 24, 40, 0.14);
box-shadow: none;
}
html[data-theme="dark"] .dd-igrid__empty {
color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.14);
}
.dd-igrid__empty svg {
width: 34px;
height: 34px;
}
.dd-igrid__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dd-igrid__btn:hover .dd-igrid__img,
.dd-igrid__btn:focus-visible .dd-igrid__img {
transform: scale(1.07);
}
/* Permalink known but no picture supplied yet. */
.dd-igrid__ph {
position: absolute;
inset: 0;
background:
radial-gradient(130px 100px at 50% 40%, rgba(201, 162, 75, 0.34), transparent 72%),
linear-gradient(150deg, #2b3150, #171b30 70%);
}
.dd-igrid__veil {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16, 18, 30, 0) 42%, rgba(16, 18, 30, 0.72));
opacity: 0;
transition: opacity 0.35s ease;
}
.dd-igrid__badge {
position: absolute;
top: 10px;
right: 10px;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(16, 18, 30, 0.5);
color: #fff;
backdrop-filter: blur(6px);
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.dd-igrid__badge svg {
width: 15px;
height: 15px;
}
.dd-igrid__user {
position: absolute;
left: 12px;
right: 12px;
bottom: 11px;
font-size: 12px;
font-weight: 700;
line-height: 1.3;
color: #fff;
text-align: left;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.dd-igrid__btn:hover .dd-igrid__veil,
.dd-igrid__btn:focus-visible .dd-igrid__veil,
.dd-igrid__btn:hover .dd-igrid__user,
.dd-igrid__btn:focus-visible .dd-igrid__user {
opacity: 1;
transform: translateY(0);
}
.dd-igrid__btn:hover .dd-igrid__badge,
.dd-igrid__btn:focus-visible .dd-igrid__badge {
opacity: 1;
transform: translateY(0);
}
.dd-igrid__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.86);
color: #161a26;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.dd-community__foot {
margin: 0;
text-align: center;
}
.dd-community__foot .dd-btn svg {
width: 16px;
height: 16px;
}
/* ---- Post viewer ----------------------------------------------------------------------- */
html.dd-igview-open {
overflow: hidden;
}
.dd-igview {
position: fixed;
inset: 0;
z-index: 9000;
display: grid;
place-items: center;
padding: 24px;
}
.dd-igview[hidden] {
display: none;
}
.dd-igview__scrim {
position: absolute;
inset: 0;
background: rgba(10, 12, 20, 0.78);
backdrop-filter: blur(5px);
}
.dd-igview__box {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
width: min(1040px, 100%);
max-height: min(86vh, 720px);
background: var(--color-surface);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 44px 90px rgba(0, 0, 0, 0.55);
}
.dd-igview__close {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: rgba(16, 18, 30, 0.45);
color: #fff;
cursor: pointer;
backdrop-filter: blur(6px);
transition: background 0.2s ease, transform 0.24s ease;
}
.dd-igview__close:hover {
background: rgba(16, 18, 30, 0.78);
transform: rotate(90deg);
}
.dd-igview__media {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1 / 1;
max-height: min(86vh, 720px);
background: #0d0f18;
overflow: hidden;
}
.dd-igview__media.is-empty::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(240px 180px at 50% 42%, rgba(201, 162, 75, 0.3), transparent 70%),
linear-gradient(150deg, #2b3150, #12151f 72%);
}
.dd-igview__img,
.dd-igview__video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.dd-igview__img[hidden],
.dd-igview__video[hidden] {
display: none;
}
.dd-igview__side {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--color-surface);
}
.dd-igview__head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--color-border);
}
.dd-igview__avatar {
display: grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #c9a24b, #8a6b26);
color: #1c1503;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
}
.dd-igview__who {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.dd-igview__who b {
font-size: 14.5px;
font-weight: 700;
color: var(--color-heading);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dd-igview__who em {
font-style: normal;
font-size: 12.5px;
color: var(--color-muted);
}
.dd-igview__dots {
display: flex;
gap: 3px;
margin-left: auto;
}
.dd-igview__dots i {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-muted);
opacity: 0.7;
}
.dd-igview__body {
flex: 1 1 auto;
padding: 20px;
overflow-y: auto;
}
.dd-igview__caption {
margin: 0;
font-size: 15px;
line-height: 1.65;
color: var(--color-text);
white-space: pre-line;
}
.dd-igview__foot {
padding: 16px 20px;
border-top: 1px solid var(--color-border);
}
.dd-igview__link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--color-link);
}
.dd-igview__link svg {
transition: transform 0.22s ease;
}
.dd-igview__link:hover svg {
transform: translateX(3px);
}
/* ---- Responsive ------------------------------------------------------------------------ */
@media (max-width: 1040px) {
.dd-igrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.dd-igview {
padding: 16px;
}
.dd-igview__box {
grid-template-columns: 1fr;
max-height: 90vh;
overflow-y: auto;
}
.dd-igview__media {
aspect-ratio: 1 / 1;
max-height: none;
}
.dd-igview__close {
top: 10px;
right: 10px;
}
}
@media (max-width: 560px) {
.dd-igrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.dd-igview {
padding: 10px;
}
}
/* =========================================================================
* Product detail page — page-templates/product-detail.php
*
* Ported from the approved preview (_pdp2) with three deliberate changes so it
* belongs to the site rather than to a demo:
* 1. every class is namespaced .dd-pdp-* (the preview used generic names like
* .hero / .info which would collide site-wide);
* 2. no local palette — colours come from the theme tokens, so light and dark
* mode both work;
* 3. headings use the site font stack (Sora 800), not the preview's Georgia.
* Sora is wider, so the H1 is sized to stay on ONE line inside the 401px
* info column at 1200px container width — same requirement as v6, re-tuned.
*
* The photo stage is the one place that stays pure white in both modes: the
* product photos are white-background JPEGs, so a themed surface would tint
* them or ring them in a visible box.
* ========================================================================= */
.dd-main--pdp {
--pdp-ink: var(--color-heading);
--pdp-ink-soft: var(--color-text-soft);
--pdp-muted: var(--color-muted);
--pdp-line: var(--color-border);
--pdp-line-soft: rgba(120, 120, 120, 0.22);
--pdp-photo-bg: #ffffff;
--pdp-gold: var(--color-accent);
--pdp-gold-deep: var(--color-accent-strong);
--pdp-dark: var(--color-inverse-bg);
--pdp-dark-text: var(--color-inverse-text);
background: var(--color-bg);
color: var(--color-text);
font-family: var(--dd-font-body);
}
/* ---------- breadcrumb ---------- */
.dd-main--pdp .dd-pdp__crumb {
font-size: 11.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pdp-muted);
padding: 26px 0 0;
margin-bottom: 18px;
flex-wrap: wrap;
gap: 8px;
}
.dd-main--pdp .dd-pdp__crumb a { color: var(--pdp-muted); text-decoration: none; }
.dd-main--pdp .dd-pdp__crumb a:hover { color: var(--pdp-gold-deep); }
.dd-main--pdp .dd-pdp__crumb span { opacity: 0.55; }
.dd-main--pdp .dd-pdp__crumb [aria-current] { color: var(--pdp-ink-soft); }
/* ---------- hero grid: photo 65% / info 35% ---------- */
.dd-pdp-hero {
display: grid;
grid-template-columns: 1.85fr 1fr;
gap: 56px;
padding: 16px 0 0;
align-items: center;
}
.dd-pdp-gallery { min-width: 0; }
.dd-pdp-stage {
position: relative;
aspect-ratio: 1 / 1;
background: var(--pdp-photo-bg);
border: 1px solid var(--pdp-line);
border-radius: var(--dd-radius-sm);
overflow: hidden;
cursor: zoom-in;
}
.dd-pdp-stage img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 3%;
transition: transform 0.14s ease-out;
will-change: transform;
}
.dd-pdp-stage.is-zoom img { transform: scale(2.2); }
.dd-pdp-stage.is-zoom { cursor: zoom-out; }
/* corner badge: magnifier when idle, × when zoomed. z-index 2 is required —
the transformed ![]()
creates a stacking context that would paint over an
absolutely positioned pseudo-element without it. */
.dd-pdp-stage::after,
.dd-pdp-stage::before {
content: "";
position: absolute;
right: 12px;
bottom: 12px;
width: 26px;
height: 26px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.94);
background-position: center;
background-size: 15px 15px;
background-repeat: no-repeat;
border: 1px solid #e2ddd2;
pointer-events: none;
z-index: 2;
transition: opacity 0.18s ease;
}
.dd-pdp-stage::after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534c' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M8 10.5h5M10.5 8v5'/%3E%3C/svg%3E");
opacity: 0.9;
}
.dd-pdp-stage::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534c' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9'/%3E%3C/svg%3E");
opacity: 0;
border-color: transparent;
}
.dd-pdp-stage.is-zoom::after { opacity: 0; }
.dd-pdp-stage.is-zoom::before { opacity: 1; border-color: #e2ddd2; }
.dd-pdp-thumbs {
display: grid;
/* Column count follows the photo set (9, 8 …) so the strip always fills
its row — a fixed 9 left an empty cell on the 12-pocket page. */
grid-template-columns: repeat(var(--dd-pdp-cols, 9), minmax(0, 1fr));
gap: 6px;
margin-top: 10px;
}
.dd-pdp-thumb {
aspect-ratio: 1 / 1;
border: 1px solid var(--pdp-line);
border-radius: 4px;
background: var(--pdp-photo-bg);
padding: 0;
cursor: pointer;
overflow: hidden;
transition: border-color 0.18s ease, transform 0.18s ease;
}
.dd-pdp-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 8%;
}
.dd-pdp-thumb:hover { transform: translateY(-1px); border-color: var(--pdp-gold); }
.dd-pdp-thumb[aria-selected="true"] { border-color: var(--pdp-gold); box-shadow: inset 0 0 0 1px var(--pdp-gold); }
/* ---------- info column ---------- */
.dd-pdp-info {
min-width: 0;
padding-top: 6px;
}
/* Effect name (Micro-Grid Embossed): same size and colour as the product
title, so the pair reads as one two-line product name — effect on top,
specific name underneath (2026-10-27). */
.dd-pdp-eyebrow {
font-family: var(--dd-font);
font-size: clamp(23px, 2.15vw, 30px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--pdp-ink);
margin: 0 0 2px;
}
/* Grey compatibility line under the name. */
.dd-pdp-fit {
margin: 0 0 22px;
font-size: 13px;
line-height: 1.5;
color: var(--color-muted);
}
/* One line, always. 401px column / Sora 800 → 30px is the ceiling that fits
"4-Pocket Card Binder"; clamp keeps it there between 1080 and 1240+ too. */
.dd-pdp-title {
font-family: var(--dd-font);
font-size: clamp(23px, 2.15vw, 30px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--pdp-ink);
margin: 0 0 6px;
}
/* ---------- two figures ---------- */
.dd-pdp-figures {
display: flex;
align-items: flex-start;
justify-content: flex-start;
border-top: 1px solid var(--pdp-line);
border-bottom: 1px solid var(--pdp-line);
padding: 19px 0 20px;
margin-bottom: 26px;
}
.dd-pdp-figure {
padding: 0 38px;
border-left: 1px solid var(--pdp-line-soft);
min-width: 0;
}
.dd-pdp-figure:first-child { padding-left: 0; border-left: 0; }
.dd-pdp-figure:last-child { padding-right: 0; }
.dd-pdp-figure b {
display: block;
font-family: var(--dd-font);
font-size: 22px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--pdp-ink);
}
.dd-pdp-figure span {
display: block;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pdp-muted);
margin-top: 7px;
}
/* ---------- material / texture ---------- */
.dd-pdp-attrs {
display: grid;
grid-template-columns: auto 1fr;
gap: 9px 22px;
margin: 0 0 26px;
}
.dd-pdp-attrs dt {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pdp-muted);
padding-top: 3px;
}
.dd-pdp-attrs dd {
margin: 0;
font-size: 13.5px;
color: var(--pdp-ink);
}
/* ---------- option groups (colour / size) ---------- */
.dd-pdp-opt { margin-bottom: 26px; }
.dd-pdp-opt__label {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pdp-muted);
margin: 0 0 13px;
}
.dd-pdp-colour { display: flex; align-items: center; gap: 15px; }
/* White-on-white: a flat #fff disc reads as a hollow ring, so a very light
radial gradient gives the swatch an actual body. */
.dd-pdp-swatch {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #cfc6b4;
background: radial-gradient(circle at 50% 34%, #ffffff 42%, #f7f4ec 100%);
box-shadow: 0 1px 3px rgba(93, 60, 45, 0.1);
}
/* One swatch per shell colour, lit from the same angle as the white one so the
three read as the same object rather than as flat colour chips. */
.dd-pdp-swatch--black {
background: radial-gradient(circle at 50% 34%, #4b4b50 40%, #17171a 100%);
border-color: #2a2a2e;
}
.dd-pdp-swatch--purple {
background: radial-gradient(circle at 50% 34%, #bb8ed6 40%, #7d4da8 100%);
border-color: #8b62ad;
}
/* Two-tone shells: the box is black outside with a red lining, so the chip is
split on the diagonal instead of picking one of the two colours. Same
top-light highlight as the single-colour chips so they read as one family. */
.dd-pdp-swatch--black-red {
background:
radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 62%),
linear-gradient(135deg, #26262a 0 49.6%, #9d2f2c 49.6% 100%);
border-color: #2a2a2e;
}
/* 2026-10-30: three more shells — window box (black shell / pink lining),
1-tier case (red shell / grey lining), 2-tier case (black shell / grey
lining with tri-colour stitching). Same diagonal split, same top light. */
.dd-pdp-swatch--black-pink {
background:
radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 62%),
linear-gradient(135deg, #26262a 0 49.6%, #e0359b 49.6% 100%);
border-color: #2a2a2e;
}
.dd-pdp-swatch--red-grey {
background:
radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 62%),
linear-gradient(135deg, #c0272d 0 49.6%, #9a9a9e 49.6% 100%);
border-color: #8f1f24;
}
.dd-pdp-swatch--black-grey {
background:
radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 62%),
linear-gradient(135deg, #232327 0 49.6%, #a3a3a8 49.6% 100%);
border-color: #2a2a2e;
}
/* 2026-10-30: the two toploaders. Both are transparent PVC, so the chip is a
pale disc with a hard diagonal highlight — the read of a sheet of clear
plastic rather than a painted surface. The UV version carries the violet
cast the sheet shows edge-on, which is the only visual difference. */
.dd-pdp-swatch--clear {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, 0.92) 47%, rgba(255, 255, 255, 0) 52%),
radial-gradient(circle at 50% 34%, #ffffff 38%, #e9eff2 100%);
border-color: #b6c4cb;
}
.dd-pdp-swatch--uv {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, 0.9) 47%, rgba(255, 255, 255, 0) 52%),
radial-gradient(circle at 50% 34%, #f7f1fd 38%, #d5c0ec 100%);
border-color: #b096d4;
}
.dd-pdp-colour__note { margin: 0; }
.dd-pdp-colour__note b {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--pdp-ink);
line-height: 1.35;
}
.dd-pdp-colour__note span {
display: block;
font-size: 11.5px;
color: var(--pdp-muted);
line-height: 1.5;
margin-top: 3px;
}
.dd-pdp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-pdp-pill {
display: inline-block;
font-family: var(--dd-font);
font-size: 12.5px;
line-height: 1.35;
letter-spacing: 0.01em;
padding: 9px 19px;
border-radius: 999px;
border: 1px solid var(--pdp-line);
background: transparent;
color: var(--pdp-ink-soft);
text-decoration: none;
transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.dd-pdp-pill:hover { border-color: var(--pdp-gold); color: var(--pdp-ink); }
.dd-pdp-pill.is-on {
background: var(--pdp-ink);
border-color: var(--pdp-ink);
color: var(--color-bg);
font-weight: 600;
}
/* ---------- CTA ---------- */
.dd-pdp-acts { margin: 28px 0 16px; }
.dd-main--pdp .dd-pdp-cta {
width: 100%;
justify-content: center;
letter-spacing: 0.02em;
}
.dd-pdp-terms {
font-size: 11.5px;
color: var(--pdp-muted);
letter-spacing: 0.04em;
margin: 0;
}
/* ---------- description ---------- */
.dd-pdp-block { padding: 88px 0 0; }
.dd-pdp-block__grid {
display: grid;
grid-template-columns: 0.34fr 0.66fr;
gap: 56px;
align-items: start;
}
.dd-pdp-block__aside h2 {
font-family: var(--dd-font);
font-size: clamp(19px, 2vw, 24px);
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 10px;
color: var(--pdp-ink);
}
.dd-pdp-block__aside p {
font-size: 13px;
color: var(--pdp-muted);
margin: 0;
line-height: 1.75;
}
.dd-pdp-acc { border-top: 1px solid var(--pdp-line); min-width: 0; }
.dd-pdp-acc details { border-bottom: 1px solid var(--pdp-line); }
.dd-pdp-acc summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 19px 2px;
font-family: var(--dd-font);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
list-style: none;
color: var(--pdp-ink);
}
.dd-pdp-acc summary::-webkit-details-marker { display: none; }
.dd-pdp-acc summary::after {
content: "+";
font-weight: 400;
font-size: 19px;
color: var(--pdp-gold-deep);
line-height: 1;
}
.dd-pdp-acc details[open] summary::after { content: "–"; }
.dd-pdp-acc__body { padding: 0 2px 26px; }
.dd-pdp-acc__body p {
font-size: 13.5px;
line-height: 1.8;
color: var(--pdp-ink-soft);
margin: 0 0 18px;
max-width: 62ch;
}
.dd-pdp-feat { list-style: none; margin: 0; padding: 0; }
.dd-pdp-feat li {
font-size: 13.5px;
line-height: 1.7;
color: var(--pdp-ink-soft);
padding-left: 20px;
position: relative;
margin-bottom: 11px;
}
.dd-pdp-feat li::before {
content: "";
position: absolute;
left: 4px;
top: 9px;
width: 5px;
height: 5px;
background: var(--pdp-gold);
border-radius: 50%;
}
.dd-pdp-feat b { color: var(--pdp-ink); font-weight: 600; }
.dd-pdp-spec { width: 100%; border-collapse: collapse; font-size: 13px; }
.dd-pdp-spec th,
.dd-pdp-spec td {
text-align: left;
padding: 10px 0;
border-bottom: 1px solid var(--pdp-line-soft);
vertical-align: top;
}
.dd-pdp-spec th { width: 38%; font-weight: 400; color: var(--pdp-muted); }
.dd-pdp-spec td { color: var(--pdp-ink-soft); }
.dd-pdp-spec tr:last-child th,
.dd-pdp-spec tr:last-child td { border-bottom: 0; }
.dd-pdp-tbc { color: var(--pdp-gold-deep); font-size: 11.5px; letter-spacing: 0.06em; }
/* ---------- picture for details ---------- */
.dd-pdp-stack-block { padding: 64px 0 0; }
.dd-pdp-stack-block > .dd-container > details {
border-top: 1px solid var(--pdp-line);
border-bottom: 1px solid var(--pdp-line);
}
.dd-pdp-stack-block summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
padding: 21px 2px;
cursor: pointer;
list-style: none;
font-family: var(--dd-font);
font-size: clamp(18px, 2vw, 22px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--pdp-ink);
}
.dd-pdp-stack-block summary::-webkit-details-marker { display: none; }
.dd-pdp-stack-block summary::after {
content: "+";
font-family: var(--dd-font-body);
font-weight: 400;
font-size: 19px;
color: var(--pdp-gold-deep);
line-height: 1;
}
.dd-pdp-stack-block details[open] summary::after { content: "–"; }
.dd-pdp-stack-ttl { display: inline-flex; align-items: baseline; flex-wrap: wrap; }
.dd-pdp-stack-block summary em {
font-style: normal;
font-size: 11.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pdp-muted);
margin-left: 14px;
font-weight: 400;
}
.dd-pdp-stack {
max-width: 960px;
margin: 0 auto;
padding: 4px 0 44px;
}
.dd-pdp-stack__item {
background: var(--pdp-photo-bg);
border-bottom: 1px solid var(--pdp-line-soft);
overflow: hidden;
}
.dd-pdp-stack__item:last-child { border-bottom: 0; }
.dd-pdp-stack__item img {
width: 100%;
height: auto;
display: block;
}
/* ---------- same material ---------- */
.dd-pdp-family { padding: 96px 0 0; }
.dd-pdp-family h2 {
font-family: var(--dd-font);
font-size: clamp(19px, 2vw, 24px);
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 24px;
color: var(--pdp-ink);
}
.dd-pdp-family__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.dd-pdp-fam { text-decoration: none; color: inherit; display: block; }
.dd-pdp-fam__media {
aspect-ratio: 1 / 1;
background: var(--pdp-photo-bg);
border: 1px solid var(--pdp-line);
border-radius: var(--dd-radius-sm);
overflow: hidden;
}
.dd-pdp-fam__media img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6%;
transition: transform 0.45s ease;
}
.dd-pdp-fam:hover .dd-pdp-fam__media img { transform: scale(1.03); }
.dd-pdp-fam strong {
display: block;
font-family: var(--dd-font);
font-size: 13.5px;
font-weight: 600;
color: var(--pdp-ink);
margin: 12px 0 3px;
}
.dd-pdp-fam span { font-size: 11.5px; color: var(--pdp-muted); letter-spacing: 0.04em; }
/* ---------- closing band ---------- */
.dd-pdp-close {
margin: 90px 0 0;
background: var(--pdp-dark);
color: var(--pdp-dark-text);
padding: 62px 0;
}
.dd-pdp-close__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 36px;
flex-wrap: wrap;
}
.dd-pdp-close h2 {
font-family: var(--dd-font);
font-size: clamp(21px, 2.4vw, 29px);
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 8px;
color: var(--pdp-dark-text);
}
.dd-pdp-close p { margin: 0; font-size: 13px; opacity: 0.62; }
/* ---------- responsive ---------- */
@media (max-width: 1080px) {
.dd-pdp-hero { grid-template-columns: 1fr; gap: 34px; }
.dd-pdp-gallery { width: 100%; max-width: 560px; margin: 0 auto; }
.dd-pdp-block__grid { grid-template-columns: 1fr; gap: 28px; }
.dd-pdp-block { padding-top: 60px; }
/* Full row width is available again, so the title can breathe — still one line. */
.dd-pdp-title,
.dd-pdp-eyebrow { font-size: clamp(26px, 3.4vw, 32px); }
}
@media (max-width: 720px) {
.dd-pdp-hero { padding-top: 8px; }
.dd-pdp-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dd-pdp-family__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dd-pdp-block,
.dd-pdp-family,
.dd-pdp-stack-block { padding-top: 48px; }
.dd-pdp-close { margin-top: 60px; padding: 44px 0; }
.dd-pdp-figure { padding: 0 26px; }
.dd-pdp-close__inner .dd-btn { width: 100%; }
}
/* =========================================================================
* 2026-10-28 — Products dropdown + All Products grid
*
* The catalogue split in two: /products/ is the browse overview (three cards
* per line, "More" to the category), and a new /products/all/ lists every SKU
* four to a row. "Products" in the header therefore has to offer both.
* ========================================================================= */
/* ---- Header: "Products" opens a two-item submenu ------------------------
Desktop opens on hover and on :focus-within (keyboard). The chevron toggles
.is-open for touch screens, where hover never fires. The invisible ::after
bridge keeps the pointer inside the item while it travels the 12px gap down
to the panel — without it the menu closes mid-move. */
.dd-nav__item--sub {
position: relative;
display: flex;
align-items: center;
gap: 2px;
}
.dd-nav__sub-toggle {
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
border: 0;
border-radius: 6px;
background: none;
color: var(--color-header-link);
cursor: pointer;
}
.dd-nav__sub-toggle:hover {
color: var(--color-accent);
}
.dd-nav__sub-toggle svg {
transition: transform 0.2s ease;
}
.dd-nav__item--sub:hover .dd-nav__sub-toggle svg,
.dd-nav__item--sub.is-open .dd-nav__sub-toggle svg {
transform: rotate(180deg);
}
.dd-nav__sub {
position: absolute;
top: calc(100% + 18px);
left: -14px;
z-index: 60;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 192px;
margin: 0;
padding: 8px;
list-style: none;
border: 1px solid var(--color-border);
border-radius: var(--dd-radius);
background: var(--color-surface);
box-shadow: var(--dd-shadow-lg);
opacity: 0;
visibility: hidden;
transform: translate(0, -6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.dd-nav__item--sub::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 24px;
}
.dd-nav__item--sub:hover .dd-nav__sub,
.dd-nav__item--sub:focus-within .dd-nav__sub,
.dd-nav__item--sub.is-open .dd-nav__sub {
opacity: 1;
visibility: visible;
transform: translate(0, 0);
}
.dd-nav__menu .dd-nav__sub a {
display: block;
padding: 9px 14px;
border-radius: var(--dd-radius-sm);
color: var(--color-header-link);
font-size: 14.5px;
font-weight: 500;
white-space: nowrap;
}
.dd-nav__menu .dd-nav__sub a:hover,
.dd-nav__menu .dd-nav__sub a:focus-visible {
background: var(--color-surface-alt);
color: var(--color-accent-strong);
}
/* ---- All Products: every SKU, four to a row ---------------------------- */
.dd-product-grid--all {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 42px 26px;
}
@media (max-width: 1080px) {
.dd-product-grid--all {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
.dd-product-grid--all {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 20px;
}
}
/* ---- Folded header: the submenu becomes an indented list ---------------
There is no hover inside the phone panel, and no room for a floating card,
so "All Products" / "Browse" simply sit under "Products" with a rule on the
left. The chevron has nothing to toggle and is hidden.
Same 1279px as the header fold above — the two must match or the submenu
keeps a 30px gap between 1250 and 1279. */
@media (max-width: 1279px) {
.dd-nav__item--sub {
display: block;
}
.dd-nav__sub-toggle {
display: none;
}
.dd-nav__item--sub::after {
display: none;
}
.dd-nav__sub {
position: static;
min-width: 0;
display: flex;
margin: 0 0 6px;
padding: 0 0 0 14px;
border: 0;
border-left: 2px solid var(--color-border);
border-radius: 0;
background: none;
box-shadow: none;
opacity: 1;
visibility: visible;
/* Static, so the desktop -6px nudge would only drag the list sideways. */
transform: none;
}
/* Beat the desktop hover/focus rules, which would otherwise re-apply the
centring transform to a now-static list. */
.dd-nav__item--sub:hover .dd-nav__sub,
.dd-nav__item--sub:focus-within .dd-nav__sub,
.dd-nav__item--sub.is-open .dd-nav__sub {
transform: none;
}
.dd-nav__menu .dd-nav__sub a {
padding: 8px 0;
color: var(--color-muted);
}
.dd-nav__menu .dd-nav__sub a:hover {
background: none;
color: var(--color-accent-strong);
}
}