/* ============================================================
ITALIA — Quiet Luxury for the Modern Canadian Home
Bone / Charcoal / Brass · Cormorant Garamond + Inter + Mono
============================================================ */
:root {
--bone: #F5F1EB;
--bone-deep: #ECE6DC;
--bone-shadow: #DFD7C8;
--charcoal: #1F1F1D;
--charcoal-2: #2A2A28;
--brass: #9A7B4F;
--brass-deep: #806439;
--brand-blue: #3C81C4;
--brand-blue-deep: #2E6BA6;
--ink: #1F1F1D;
--ink-soft: #4A4A45;
--ink-mute: #8A857C;
--hair: rgba(31, 31, 29, 0.14);
--hair-soft: rgba(31, 31, 29, 0.08);
--serif: "Cormorant Garamond", "Tiempos", "Canela", Georgia, serif;
--sans: "Inter", "Söhne", "Neue Haas Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
--mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bone);
color: var(--ink);
font-family: var(--sans);
font-weight: 400;
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--brass); color: var(--bone); }
/* ---------- type primitives ---------- */
.eyebrow {
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
}
.eyebrow.brass { color: var(--brass); }
h1, h2, h3, h4 {
font-family: var(--serif);
font-weight: 400;
margin: 0;
letter-spacing: -0.005em;
color: var(--ink);
text-wrap: balance;
}
.container {
max-width: 1480px;
margin: 0 auto;
padding: 0 56px;
}
/* ---------- buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 18px;
height: 52px;
padding: 0 26px;
font-family: var(--sans);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
border: 1px solid transparent;
background: transparent;
color: inherit;
transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
white-space: nowrap;
}
.btn .arr {
width: 22px;
height: 1px;
background: currentColor;
position: relative;
transition: width 240ms ease;
}
.btn .arr::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 6px;
height: 6px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
.btn:hover .arr { width: 30px; }
.btn-primary {
background: var(--charcoal);
color: var(--bone);
}
.btn-primary:hover { background: var(--brass); }
.btn-ghost {
color: var(--ink);
border-color: var(--ink);
}
.btn-ghost.on-photo {
color: var(--bone);
border-color: rgba(245, 241, 235, 0.65);
}
.btn-ghost:hover {
background: var(--ink);
color: var(--bone);
}
.btn-ghost.on-photo:hover {
background: var(--bone);
color: var(--ink);
border-color: var(--bone);
}
.btn-brass {
background: var(--brass);
color: var(--bone);
}
.btn-brass:hover { background: var(--brass-deep); }
/* ---------- link arrow ---------- */
.link-arrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--sans);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
padding-bottom: 6px;
border-bottom: 1px solid var(--hair);
transition: color 200ms ease, border-color 200ms ease;
}
.link-arrow .arr {
width: 16px;
height: 1px;
background: currentColor;
position: relative;
transition: width 240ms ease;
}
.link-arrow .arr::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 5px;
height: 5px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
.link-arrow:hover { color: var(--brass); border-color: var(--brass); }
.link-arrow:hover .arr { width: 24px; }
/* ============================================================
NAV
============================================================ */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: var(--bone);
border-bottom: 1px solid var(--hair-soft);
backdrop-filter: saturate(140%) blur(8px);
}
.nav-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
column-gap: 28px;
align-items: center;
height: 78px;
padding: 0 40px;
max-width: 1640px;
margin: 0 auto;
}
/* ---------- brand mark (logomark, painted via mask) ---------- */
.brand {
display: inline-block;
background: currentColor;
-webkit-mask: url('assets/italia-mark-compact-white.png') no-repeat center / contain;
mask: url('assets/italia-mark-compact-white.png') no-repeat center / contain;
width: 132px;
height: 34px;
color: var(--charcoal);
vertical-align: middle;
transition: color 220ms ease;
}
.brand.brand-full {
-webkit-mask-image: url('assets/italia-mark-white.png');
mask-image: url('assets/italia-mark-white.png');
width: 220px;
height: 76px;
}
.brand.brand-sm { width: 78px; height: 20px; }
.brand.on-dark { color: var(--bone); }
/* Brand lockup with tagline (only used at large sizes) */
.brand-lockup {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
color: var(--charcoal);
}
.brand-lockup .tagline {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-mute);
padding-left: 2px;
}
.on-dark .tagline,
.brand-lockup.on-dark .tagline { color: rgba(245,241,235,0.55); }
.nav-links {
display: flex;
gap: 26px;
justify-content: center;
white-space: nowrap;
}
.nav-links a {
font-family: var(--sans);
font-size: 13px;
letter-spacing: 0.04em;
color: var(--ink);
position: relative;
padding: 6px 0;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: 2px;
height: 1px;
width: 0;
background: var(--brass);
transition: width 240ms ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-right {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 22px;
}
.nav-quote {
height: 42px;
padding: 0 20px;
background: var(--charcoal);
color: var(--bone);
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 12px;
white-space: nowrap;
transition: background 220ms ease;
}
.nav-quote:hover { background: var(--brass); }
.nav-quote .dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--brass);
transition: background 220ms ease;
}
.nav-quote:hover .dot { background: var(--bone); }
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
height: calc(100vh - 78px);
min-height: 680px;
max-height: 880px;
overflow: hidden;
background: #C9BFAE;
}
/* The hero photo is composed from layered tonal panels and a soft
silhouette to suggest a sunlit bathroom with a freestanding tub.
This is a deliberate placeholder — swap for real photography. */
.hero-photo {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(31,31,29,0.32) 100%),
linear-gradient(92deg,
#A89579 0%,
#B9A98F 16%,
#CDBE9F 32%,
#DDCFB1 48%,
#C8B89A 64%,
#A18C6E 82%,
#7E6B4F 100%
);
}
.hero-photo-light {
position: absolute;
right: 6%;
top: -4%;
width: 46%;
height: 70%;
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 248, 232, 0.55), rgba(255, 248, 232, 0) 70%);
pointer-events: none;
}
.hero-photo-floor {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 40%;
background:
linear-gradient(180deg, rgba(60,46,28,0) 0%, rgba(60,46,28,0.18) 60%, rgba(60,46,28,0.42) 100%),
repeating-linear-gradient(94deg,
rgba(80,60,36,0.06) 0 2px,
rgba(80,60,36,0) 2px 26px);
}
.hero-photo-tub {
position: absolute;
left: 12%;
top: 26%;
width: 32%;
height: 56%;
background:
radial-gradient(60% 55% at 50% 40%, rgba(245,241,235,0.55), rgba(245,241,235,0) 75%),
linear-gradient(180deg, rgba(31,31,29,0.10), rgba(31,31,29,0) 70%);
border-radius: 220px 220px 32px 32px;
box-shadow: 0 80px 100px -50px rgba(31,31,29,0.45);
}
.hero-grain {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.5;
mix-blend-mode: multiply;
pointer-events: none;
}
/* ----------------------------------------------------------------
Cinematic video hero — full-bleed footage, royal darkening,
centred message with a fine brass rule. The placeholder panels
and product orbit are removed for a quiet, editorial first frame.
---------------------------------------------------------------- */
.hero-photo--video {
background: #14120f;
}
.hero-vid {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
/* A moodier grade gives the bright glass a richer, more regal tone. */
filter: brightness(0.66) contrast(1.06) saturate(1.04);
}
/* Even tonal darkening, deepened top and bottom so the bar and copy read. */
.hero-scrim {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg,
rgba(15,13,10,0.55) 0%,
rgba(15,13,10,0.20) 26%,
rgba(15,13,10,0.22) 60%,
rgba(15,13,10,0.58) 100%);
}
/* Radial vignette draws the eye to the centre — the "royal" feel. */
.hero-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(120% 100% at 50% 46%,
rgba(15,13,10,0) 38%,
rgba(15,13,10,0.22) 68%,
rgba(15,13,10,0.62) 100%);
}
.hero-photo--video .hero-grain { opacity: 0.30; }
/* Centred content block */
.hero--cinematic .hero-center {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 32px;
color: var(--bone);
}
.hero--cinematic .hero-eyebrow {
margin-bottom: 22px;
opacity: 0.74;
letter-spacing: 0.42em;
}
.hero--cinematic h1 {
font-size: clamp(44px, 6.4vw, 92px);
font-weight: 300;
line-height: 1.02;
max-width: 16ch;
margin: 0;
text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}
/* The fine line in the middle, with a small brass diamond at its centre. */
.hero-rule {
position: relative;
display: block;
width: 168px;
height: 1px;
margin: 34px 0 30px;
background: linear-gradient(90deg,
rgba(245,241,235,0) 0%,
rgba(245,241,235,0.55) 50%,
rgba(245,241,235,0) 100%);
}
.hero-rule::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
transform: translate(-50%, -50%) rotate(45deg);
background: var(--brass);
box-shadow: 0 0 0 4px rgba(20,18,15,0.0), 0 0 14px rgba(154,123,79,0.7);
}
.hero--cinematic .hero-sub {
max-width: 56ch;
margin: 0 auto 38px;
opacity: 0.86;
}
.hero--cinematic .hero-cta {
justify-content: center;
}
@media (max-width: 860px) {
/* Keep the footage on phones too — it is light enough (~1MB). The
two-class selectors override the legacy mobile hero rules below. */
.hero.hero--cinematic {
display: block;
height: auto;
min-height: 86vh;
background: #14120f;
}
.hero--cinematic .hero-photo--video {
display: block;
position: absolute;
inset: 0;
}
.hero--cinematic .hero-center {
position: relative;
min-height: 86vh;
padding: 96px 24px;
}
.hero--cinematic h1 { font-size: clamp(36px, 9vw, 56px); }
.hero--cinematic .hero-sub { font-size: 15px; max-width: none; }
.hero-rule { width: 120px; margin: 26px 0 24px; }
}
.hero-marker {
position: absolute;
top: 36px;
left: 56px;
display: flex;
align-items: center;
gap: 14px;
color: var(--bone);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.78;
}
.hero-marker .line { width: 28px; height: 1px; background: var(--bone); }
.hero-meta {
position: absolute;
top: 36px;
right: 56px;
text-align: right;
color: var(--bone);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.78;
line-height: 1.8;
}
.hero-copy {
position: absolute;
left: 56px;
bottom: 72px;
right: 56px;
color: var(--bone);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
}
.hero-copy-left { max-width: 600px; position: relative; z-index: 3; }
.hero-eyebrow {
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--bone);
opacity: 0.82;
margin-bottom: 28px;
}
.hero h1 {
font-size: clamp(48px, 6.6vw, 104px);
line-height: 0.98;
letter-spacing: -0.018em;
color: var(--bone);
font-weight: 300;
margin-bottom: 24px;
}
.hero h1 em {
font-style: italic;
font-weight: 300;
color: var(--bone);
}
.hero-sub {
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
color: var(--bone);
opacity: 0.88;
max-width: 460px;
margin: 0 0 36px 0;
}
.hero-cta {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero-copy-right {
color: var(--bone);
text-align: right;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.82;
line-height: 1.8;
padding-bottom: 6px;
}
.hero-copy-right .pill {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(245,241,235,0.5);
padding: 8px 14px;
border-radius: 999px;
margin-bottom: 10px;
}
.hero-copy-right .pill .dot {
width: 5px; height: 5px; background: var(--brass); border-radius: 50%;
}
/* ---------- Hero 3D product orbit ---------- */
.hero-orbit {
position: absolute;
right: 2%;
top: 50%;
width: 760px;
height: 540px;
transform: translateY(-54%);
pointer-events: none;
z-index: 3;
--rx: 240;
--rz: 300;
--ry: 30;
}
.orbit-stage {
position: absolute;
inset: 0;
perspective: 1400px;
}
.orbit-item {
position: absolute;
left: 50%;
top: 50%;
width: 214.5px;
height: 297px;
margin: -148.5px 0 0 -107.25px;
background: var(--bone);
color: var(--ink);
box-shadow:
0 40px 80px -20px rgba(15, 12, 8, 0.55),
0 10px 18px -4px rgba(15, 12, 8, 0.28);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px 20px 22px;
pointer-events: auto;
cursor: pointer;
will-change: transform, opacity, filter;
transition: box-shadow 320ms ease;
border-radius: 2px;
}
.orbit-item:hover { box-shadow:
0 40px 70px -20px rgba(15, 12, 8, 0.55),
0 10px 18px -4px rgba(15, 12, 8, 0.3);
}
.oi-tag {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brass);
z-index: 2;
}
.oi-art {
position: absolute;
left: 0; right: 0; top: 0; bottom: 26%;
pointer-events: none;
}
.oi-art::before {
/* product silhouette */
content: "";
position: absolute;
background:
radial-gradient(50% 50% at 50% 35%, rgba(255,251,242,1), rgba(245,241,235,0) 78%),
linear-gradient(180deg, rgba(228,219,201,1), rgba(245,241,235,0));
box-shadow: 0 30px 40px -24px rgba(31,31,29,0.30), inset 0 -10px 18px rgba(31,31,29,0.05);
}
.oi-art::after {
/* faint counter line */
content: "";
position: absolute;
left: 8%; right: 8%; bottom: -6%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(31,31,29,0.15), transparent);
}
/* Real product photo in the orbit card (falls back to ::before silhouette if no cover) */
.oi-photo img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: contain;
background: #fff;
border-radius: 2px 2px 0 0;
z-index: 1;
}
a.orbit-item { text-decoration: none; }
/* Specific silhouettes */
.oi-tub::before { left: 14%; right: 14%; top: 26%; bottom: 8%; border-radius: 110px 110px 14px 14px; }
.oi-basin::before { left: 20%; right: 20%; top: 38%; bottom: 14%; border-radius: 50%/40%; }
.oi-faucet::before {
left: 45%; right: 45%; top: 8%; bottom: 12%;
border-radius: 4px;
background: linear-gradient(180deg, #C7A875 0%, #6E5635 100%);
box-shadow: 0 24px 28px -18px rgba(31,31,29,0.4);
}
.oi-faucet::after {
left: 30%; right: 30%; bottom: 8%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(31,31,29,0.18), transparent);
}
.oi-shower::before {
left: 46%; right: 46%; top: 4%; bottom: 18%;
border-radius: 3px;
background: linear-gradient(180deg, #5E5046 0%, #2A2520 100%);
box-shadow: 0 24px 28px -18px rgba(31,31,29,0.4);
}
.oi-shower::after {
/* water streams */
left: 49.5%; right: 49.5%; bottom: 4%;
width: 1px; height: 30%;
background: linear-gradient(180deg, rgba(94,80,70,0.4), rgba(94,80,70,0));
}
.oi-tub-2::before { left: 12%; right: 12%; top: 28%; bottom: 8%; border-radius: 18px 18px 6px 6px; }
.oi-console::before{ left: 16%; right: 16%; top: 36%; bottom: 12%; border-radius: 10px 10px 3px 3px; }
.oi-meta {
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 2;
margin-top: auto;
border-top: 1px solid var(--hair-soft);
padding-top: 12px;
}
.oi-mat {
font-family: var(--sans);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brass);
}
.oi-name {
font-family: var(--serif);
font-size: 22px;
line-height: 1.08;
font-weight: 400;
letter-spacing: -0.005em;
color: var(--ink);
}
/* Soft floor reflection beneath the orbit */
.orbit-floor {
position: absolute;
left: 8%;
right: 8%;
bottom: 4%;
height: 24px;
background: radial-gradient(50% 100% at 50% 0%, rgba(31,31,29,0.22), rgba(31,31,29,0) 70%);
filter: blur(2px);
}
/* ============================================================
SECTION SCAFFOLD
============================================================ */
section { padding: 58px 0; }
.section-head {
display: grid;
grid-template-columns: 1.4fr 1fr;
align-items: end;
gap: 64px;
margin-bottom: 72px;
}
.section-head h2 {
font-size: clamp(36px, 4.2vw, 60px);
line-height: 1.04;
letter-spacing: -0.012em;
font-weight: 300;
}
.section-head h2 em { font-style: italic; }
.section-head .h-right {
text-align: right;
color: var(--ink-soft);
font-size: 15px;
line-height: 1.6;
max-width: 400px;
margin-left: auto;
padding-bottom: 6px;
}
.section-eyebrow-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 26px;
}
.section-eyebrow-row .num {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--brass);
text-transform: uppercase;
}
.section-eyebrow-row .line {
flex: 0 0 36px;
height: 1px;
background: var(--brass);
opacity: 0.5;
}
/* ============================================================
CATEGORY GRID
============================================================ */
.cat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.cat {
display: flex;
flex-direction: column;
background: transparent;
position: relative;
color: var(--ink);
}
.cat-photo {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
}
.cat-photo .ph {
position: absolute;
inset: 0;
transition: transform 900ms cubic-bezier(.2,.7,.2,1);
}
.cat:hover .cat-photo .ph { transform: scale(1.04); }
.cat:hover .cat-photo .obj { transform: scale(1.04) translateZ(0); }
.cat-photo .ph-grain {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
opacity: 0.5;
pointer-events: none;
}
.cat-bath .cat-photo-bg { background: linear-gradient(160deg, #DDD2BF 0%, #C9BCA2 55%, #A99A7E 100%); }
.cat-basin .cat-photo-bg { background: linear-gradient(170deg, #E6DCC9 0%, #C8BA9F 60%, #8E7E62 100%); }
.cat-faucets .cat-photo-bg { background: linear-gradient(150deg, #C5B193 0%, #8B7551 50%, #4B3B25 100%); }
.cat-showers .cat-photo-bg { background: linear-gradient(180deg, #E1D7C4 0%, #B5A685 55%, #6E5C40 100%); }
/* product silhouettes drawn from gradient + radius */
.cat-photo .obj {
position: absolute;
background:
radial-gradient(60% 70% at 50% 30%, rgba(255,250,238,0.55), rgba(255,250,238,0) 70%),
linear-gradient(180deg, rgba(31,31,29,0.10), rgba(31,31,29,0));
box-shadow: 0 40px 60px -30px rgba(31,31,29,0.4);
transition: transform 900ms cubic-bezier(.2,.7,.2,1);
}
.cat-bath .obj { left: 16%; right: 16%; bottom: 20%; height: 38%; border-radius: 140px 140px 22px 22px; }
.cat-basin .obj { left: 22%; right: 22%; bottom: 26%; height: 30%; border-radius: 50% / 40%; }
.cat-faucets .obj{
left: 44%; top: 22%; bottom: 22%; width: 12%; border-radius: 6px;
background: linear-gradient(180deg, rgba(245,225,180,0.85), rgba(154,123,79,0.85));
box-shadow: 0 30px 50px -20px rgba(0,0,0,0.5);
}
.cat-showers .obj{
left: 40%; top: 16%; width: 22%; height: 5%; border-radius: 4px;
background: rgba(245,225,180,0.7);
box-shadow: 0 20px 30px -10px rgba(0,0,0,0.4);
}
.cat-showers .obj .stream {
position: absolute; left: 50%; top: 100%; width: 1px; height: 360%;
background: linear-gradient(180deg, rgba(245,225,180,0.55), rgba(245,225,180,0));
transform: translateX(-50%);
}
.cat-photo .ph-label {
position: absolute;
top: 22px; left: 22px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,241,235,0.78);
z-index: 2;
}
.cat-meta {
padding: 22px 4px 0;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
}
.cat-meta h3 {
font-size: 30px;
font-weight: 300;
letter-spacing: -0.01em;
}
.cat-meta .cat-count {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
}
.cat-link {
margin-top: 18px;
padding: 14px 4px 4px;
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink);
border-top: 1px solid var(--hair);
}
.cat-link .arr {
width: 18px; height: 1px; background: currentColor; position: relative;
transition: width 240ms ease;
}
.cat-link .arr::after {
content: ""; position: absolute; right: 0; top: 50%;
width: 5px; height: 5px;
border-top: 1px solid currentColor; border-right: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
.cat:hover .cat-link { color: var(--brass); border-top-color: var(--brass); }
.cat:hover .cat-link .arr { width: 26px; }
/* ============================================================
FEATURED COLLECTION
============================================================ */
.featured { background: var(--bone-deep); }
.feat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.prod {
background: var(--bone);
display: flex;
flex-direction: column;
color: var(--ink);
}
.prod-photo {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
/* Photos are shot on white — keep the plate white so the image edge is
invisible against the warm page ground. */
background: #fff;
}
.prod-photo .ph-grain {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.7;
pointer-events: none;
}
.prod-photo .ph-label {
position: absolute;
top: 18px; left: 18px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
}
.prod-photo .ph-tag {
position: absolute;
top: 18px; right: 18px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brass);
}
/* product silhouettes — quiet, suggestive */
.prod-photo .obj {
position: absolute;
background:
radial-gradient(50% 50% at 50% 35%, rgba(255,251,242,1), rgba(245,241,235,0) 75%),
linear-gradient(180deg, rgba(228,219,201,1), rgba(245,241,235,0));
box-shadow: 0 50px 60px -40px rgba(31,31,29,0.22), inset 0 -20px 30px rgba(31,31,29,0.04);
transition: transform 900ms cubic-bezier(.2,.7,.2,1);
}
.prod:hover .obj { transform: scale(1.03); }
.prod-1 .obj { left: 16%; right: 16%; bottom: 12%; height: 46%; border-radius: 200px 200px 18px 18px; }
.prod-2 .obj { left: 22%; right: 22%; bottom: 22%; height: 28%; border-radius: 50% / 40%; }
.prod-3 .obj {
left: 45%; top: 14%; bottom: 16%; width: 10%; border-radius: 6px;
background: linear-gradient(180deg, #C0A77A, #6E5635);
box-shadow: 0 40px 50px -30px rgba(31,31,29,0.35);
}
.prod-4 .obj { left: 18%; right: 18%; bottom: 10%; height: 52%; border-radius: 22px 22px 8px 8px; }
.prod-5 .obj { left: 20%; right: 20%; bottom: 16%; height: 40%; border-radius: 14px 14px 4px 4px; }
.prod-6 .obj {
left: 46%; top: 12%; width: 8%; bottom: 14%; border-radius: 4px;
background: linear-gradient(180deg, #5E5046, #2A2520);
box-shadow: 0 40px 50px -30px rgba(31,31,29,0.35);
}
.prod-6 .obj .stream {
position: absolute; left: 50%; top: 100%; width: 1px; height: 60%;
background: linear-gradient(180deg, rgba(94,80,70,0.4), rgba(94,80,70,0));
transform: translateX(-50%);
}
.prod-meta {
padding: 24px 24px 28px;
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px solid var(--hair-soft);
}
.prod-meta .mat {
font-family: var(--sans);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--brass);
margin-bottom: 2px;
}
.prod-meta h3 {
font-size: 28px;
line-height: 1.08;
font-weight: 300;
}
.prod-meta .prod-sub {
font-size: 13px;
color: var(--ink-mute);
margin-bottom: 4px;
}
.prod-quote {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--hair-soft);
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink);
transition: color 200ms ease;
}
.prod-quote .arr {
width: 18px; height: 1px; background: currentColor; position: relative;
transition: width 240ms ease;
}
.prod-quote .arr::after {
content: ""; position: absolute; right: 0; top: 50%;
width: 5px; height: 5px;
border-top: 1px solid currentColor; border-right: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
.prod:hover .prod-quote { color: var(--brass); }
.prod:hover .prod-quote .arr { width: 26px; }
/* ============================================================
EDITORIAL
============================================================ */
.editorial-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 88px;
align-items: stretch;
}
.ed-photo {
position: relative;
min-height: 720px;
overflow: hidden;
background:
linear-gradient(180deg, rgba(255,250,238,0) 0%, rgba(31,31,29,0.22) 100%),
linear-gradient(150deg, #D8CCB5 0%, #B8A788 50%, #7C6A4D 100%);
}
.ed-photo::after {
content: ""; position: absolute; left: 10%; top: 6%; width: 30%; height: 44%;
background: radial-gradient(60% 70% at 50% 40%, rgba(255,250,238,0.55), rgba(255,250,238,0));
pointer-events: none;
}
.ed-photo-tub {
position: absolute; left: 22%; right: 22%; bottom: 14%; height: 40%;
border-radius: 220px 220px 22px 22px;
background:
radial-gradient(60% 70% at 50% 30%, rgba(255,250,238,0.88), rgba(255,250,238,0) 70%),
linear-gradient(180deg, rgba(31,31,29,0.10), rgba(31,31,29,0));
box-shadow: 0 80px 100px -50px rgba(31,31,29,0.45);
}
.ed-photo .ph-grain {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.55;
mix-blend-mode: multiply;
}
.ed-photo .ph-label {
position: absolute; bottom: 22px; left: 24px;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--bone); opacity: 0.78;
}
.ed-content { padding-top: 40px; }
.ed-content h2 {
font-size: clamp(36px, 3.8vw, 54px);
line-height: 1.04;
font-weight: 300;
margin-bottom: 24px;
letter-spacing: -0.012em;
}
.ed-content h2 em { font-style: italic; }
.ed-lead {
font-size: 17px;
line-height: 1.6;
color: var(--ink-soft);
max-width: 480px;
margin-bottom: 56px;
}
.ed-list { display: flex; flex-direction: column; gap: 28px; }
.ed-item {
display: grid;
grid-template-columns: 72px 1fr;
gap: 24px;
padding-top: 26px;
border-top: 1px solid var(--hair);
}
.ed-item .num {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--brass);
padding-top: 8px;
}
.ed-item h4 {
font-size: 24px;
font-weight: 400;
margin-bottom: 10px;
font-family: var(--serif);
letter-spacing: -0.005em;
}
.ed-item p {
margin: 0;
color: var(--ink-soft);
font-size: 14px;
line-height: 1.65;
max-width: 52ch;
}
/* ============================================================
TRADE BAND
============================================================ */
.trade {
background: var(--charcoal);
color: var(--bone);
padding: 70px 0;
position: relative;
overflow: hidden;
}
.trade::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(45% 60% at 88% 22%, rgba(154,123,79,0.18), transparent 70%);
}
.trade-inner {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 80px;
align-items: end;
position: relative;
}
.trade .section-eyebrow-row .num { color: var(--brass); }
.trade .section-eyebrow-row .line { background: var(--brass); opacity: 0.7; }
.trade h2 {
color: var(--bone);
font-size: clamp(44px, 5.4vw, 84px);
line-height: 0.98;
font-weight: 300;
letter-spacing: -0.018em;
max-width: 16ch;
}
.trade h2 em { font-style: italic; }
.trade-right {
display: flex;
flex-direction: column;
gap: 28px;
padding-bottom: 12px;
}
.trade-right p {
font-size: 16px;
line-height: 1.65;
color: rgba(245,241,235,0.78);
margin: 0;
max-width: 460px;
}
.trade-stats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 28px;
margin-top: 12px;
border-top: 1px solid rgba(245,241,235,0.16);
padding-top: 28px;
}
.trade-stat .v {
font-family: var(--serif);
font-size: 42px;
line-height: 1;
color: var(--bone);
font-weight: 300;
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.trade-stat .l {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(245,241,235,0.6);
line-height: 1.5;
}
.trade-cta {
margin-top: 18px;
align-self: flex-start;
}
/* ============================================================
PROJECT GALLERY
============================================================ */
.gallery-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(9, 92px);
gap: 18px;
}
/* Explicit collage — tight tiling, asymmetric proportions */
.p-1 { grid-column: 1 / span 5; grid-row: 1 / span 4; } /* landscape hero */
.p-2 { grid-column: 6 / span 4; grid-row: 1 / span 4; } /* medium landscape */
.p-3 { grid-column: 10 / span 3; grid-row: 1 / span 5; } /* tall portrait */
.p-4 { grid-column: 1 / span 3; grid-row: 5 / span 5; } /* tall portrait */
.p-5 { grid-column: 4 / span 6; grid-row: 5 / span 2; } /* wide landscape band */
.p-6 { grid-column: 10 / span 3; grid-row: 6 / span 4; } /* portrait */
.p-7 { grid-column: 4 / span 3; grid-row: 7 / span 3; } /* square */
.p-8 { grid-column: 7 / span 3; grid-row: 7 / span 3; } /* square */
.proj {
position: relative;
overflow: hidden;
background: var(--bone-deep);
display: block;
color: var(--bone);
}
.proj .photo {
position: absolute; inset: 0;
transition: transform 900ms cubic-bezier(.2,.7,.2,1);
}
.proj:hover .photo { transform: scale(1.04); }
.proj .ph-grain {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
opacity: 0.5;
pointer-events: none;
z-index: 1;
}
.proj::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
}
.proj .cap {
position: absolute;
left: 24px; bottom: 22px; right: 24px;
z-index: 2;
color: var(--bone);
display: flex;
justify-content: space-between;
align-items: end;
gap: 16px;
}
.proj .cap .name {
font-family: var(--serif);
font-size: 22px;
line-height: 1.1;
font-weight: 400;
letter-spacing: -0.005em;
}
.proj .cap .city {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,241,235,0.85);
text-align: right;
white-space: nowrap;
padding-bottom: 4px;
}
.p-1 .photo { background: linear-gradient(160deg, #B5A488 0%, #80694B 100%); }
.p-2 .photo { background: linear-gradient(180deg, #D8CCB5 0%, #9C8966 100%); }
.p-3 .photo { background: linear-gradient(200deg, #6E5C40 0%, #2D241A 100%); }
.p-4 .photo { background: linear-gradient(150deg, #DDD2BF 0%, #A89579 100%); }
.p-5 .photo { background: linear-gradient(180deg, #C5B294 0%, #6F5B3E 100%); }
.p-6 .photo { background: linear-gradient(160deg, #E2D7BE 0%, #93805F 100%); }
.p-7 .photo { background: linear-gradient(200deg, #847057 0%, #3A2F22 100%); }
.p-8 .photo { background: linear-gradient(160deg, #CABA9A 0%, #8A7758 100%); }
.gallery-cta {
margin-top: 64px;
display: flex;
justify-content: center;
}
/* ============================================================
INQUIRY FORM
============================================================ */
.inquiry {
background: var(--bone-deep);
}
.inq-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 88px;
align-items: start;
}
.inq-form h2 {
font-size: clamp(40px, 4.8vw, 72px);
line-height: 1;
font-weight: 300;
margin-bottom: 18px;
letter-spacing: -0.018em;
}
.inq-form h2 em { font-style: italic; }
.inq-lead {
color: var(--ink-soft);
font-size: 16px;
line-height: 1.6;
max-width: 520px;
margin-bottom: 56px;
}
.form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--ink);
}
.field {
border-bottom: 1px solid var(--hair);
padding: 24px 0 16px;
position: relative;
}
.field.full { grid-column: 1 / -1; }
.field:nth-child(odd):not(.full) {
padding-right: 36px;
border-right: 1px solid var(--hair);
}
.field:nth-child(even):not(.full) {
padding-left: 36px;
}
.field label {
display: block;
font-family: var(--sans);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 12px;
}
.field label .req { color: var(--brass); margin-left: 4px; }
.field input,
.field select,
.field textarea {
width: 100%;
border: none;
background: transparent;
font-family: var(--serif);
font-size: 22px;
font-weight: 300;
color: var(--ink);
padding: 4px 0 8px;
outline: none;
letter-spacing: -0.005em;
}
.field textarea {
resize: vertical;
min-height: 96px;
font-family: var(--sans);
font-size: 15px;
font-weight: 400;
line-height: 1.55;
}
.field select {
appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0 center;
padding-right: 24px;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-mute); opacity: 0.55; }
.field input:focus,
.field textarea:focus,
.field select:focus { color: var(--charcoal); }
.form-actions {
margin-top: 40px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.form-fine {
font-size: 12px;
color: var(--ink-mute);
max-width: 420px;
line-height: 1.55;
margin: 0;
}
.form-fine a { color: var(--ink); border-bottom: 1px solid var(--hair); }
.submit {
height: 58px;
padding: 0 30px;
background: var(--brass);
color: var(--bone);
border: none;
font-family: var(--sans);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 20px;
transition: background 220ms ease;
}
.submit:hover { background: var(--brass-deep); }
.submit .arr {
width: 24px; height: 1px; background: currentColor; position: relative;
transition: width 240ms ease;
}
.submit .arr::after {
content: ""; position: absolute; right: 0; top: 50%;
width: 6px; height: 6px;
border-top: 1px solid currentColor; border-right: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
.submit:hover .arr { width: 34px; }
.inq-aside {
border-left: 1px solid var(--hair);
padding: 8px 0 0 56px;
display: flex;
flex-direction: column;
gap: 40px;
margin-top: 100px;
}
.inq-aside .block .eyebrow { margin-bottom: 14px; display: block; }
.inq-aside .block .v {
font-family: var(--serif);
font-size: 22px;
line-height: 1.3;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.005em;
}
.inq-aside .block .sub {
margin-top: 8px;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.55;
}
.inq-aside .hr {
height: 1px; background: var(--hair); width: 72px;
}
.inq-aside .stamp-block {
margin-top: 8px;
}
.brand-stamp {
display: block;
margin-top: 14px;
width: 200px;
height: 70px;
background-image: url('assets/italia-badge.png');
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
filter: saturate(0.92);
opacity: 0.95;
}
/* ============================================================
FOOTER
============================================================ */
footer {
background: var(--charcoal);
color: var(--bone);
padding: 72px 0 36px;
}
.foot-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 56px;
padding-bottom: 64px;
border-bottom: 1px solid rgba(245,241,235,0.16);
}
.foot-brand .brand { color: var(--bone); }
.foot-brand p {
margin: 24px 0 0;
color: rgba(245,241,235,0.65);
font-size: 14px;
line-height: 1.65;
max-width: 360px;
}
.foot-brand .newsletter {
margin-top: 36px;
display: flex;
align-items: stretch;
border-bottom: 1px solid rgba(245,241,235,0.3);
max-width: 380px;
transition: border-color 200ms ease;
}
.foot-brand .newsletter:focus-within { border-color: var(--brass); }
.foot-brand .newsletter input {
flex: 1;
background: transparent;
border: none;
color: var(--bone);
font-family: var(--sans);
font-size: 14px;
padding: 14px 0;
outline: none;
}
.foot-brand .newsletter input::placeholder { color: rgba(245,241,235,0.55); }
.foot-brand .newsletter button {
background: transparent;
border: none;
color: var(--bone);
padding: 0 4px 0 12px;
display: inline-flex;
align-items: center;
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.foot-brand .newsletter .arr {
width: 22px; height: 1px; background: currentColor; position: relative;
}
.foot-brand .newsletter .arr::after {
content: ""; position: absolute; right: 0; top: 50%;
width: 6px; height: 6px;
border-top: 1px solid currentColor; border-right: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
.foot-col {
display: flex;
flex-direction: column;
gap: 14px;
}
.foot-col .foot-h {
font-family: var(--sans);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--brass);
margin-bottom: 8px;
}
.foot-col a {
color: rgba(245,241,235,0.78);
font-size: 14px;
transition: color 200ms ease;
}
.foot-col a:hover { color: var(--bone); }
.foot-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
gap: 24px;
flex-wrap: wrap;
}
.foot-mark {
display: flex;
align-items: center;
gap: 20px;
color: rgba(245,241,235,0.55);
font-size: 12px;
}
/* (legacy wordmark-sm rules removed — replaced by .brand.brand-sm) */
.foot-social {
display: flex;
gap: 22px;
}
.foot-social .soc {
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(245,241,235,0.7);
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
transition: color 200ms ease;
}
.foot-social .soc:hover { color: var(--brass); }
/* ============================================================
FLOATING WHATSAPP
Charcoal disc that widens into a brass-hairline pill on hover.
Sits above .mobile-cta (z-index 60) and clears it on phones.
============================================================ */
.wa-float {
position: fixed;
right: 28px;
bottom: 28px;
z-index: 70;
display: inline-flex;
align-items: center;
gap: 0;
height: 56px;
padding: 0;
border-radius: 999px;
background: var(--charcoal);
color: var(--bone);
box-shadow: 0 18px 34px -12px rgba(31, 31, 29, 0.5);
/* Always-on hairline so the charcoal disc still reads against the dark
video hero, not just against the bone body sections. */
border: 1px solid rgba(154, 123, 79, 0.5);
overflow: hidden;
opacity: 0;
transform: translateY(14px);
animation: waIn 460ms cubic-bezier(0.2, 0.7, 0.3, 1) 400ms forwards;
transition: background 260ms ease, border-color 260ms ease,
box-shadow 260ms ease, gap 320ms cubic-bezier(0.2, 0.7, 0.3, 1),
padding 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes waIn {
to { opacity: 1; transform: translateY(0); }
}
.wa-float .wa-glyph {
flex: 0 0 auto;
width: 56px;
height: 56px;
display: grid;
place-items: center;
}
.wa-float .wa-label {
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
white-space: nowrap;
max-width: 0;
opacity: 0;
transition: max-width 320ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 200ms ease;
}
.wa-float:hover,
.wa-float:focus-visible {
background: var(--charcoal-2);
border-color: rgba(154, 123, 79, 0.95);
box-shadow: 0 22px 40px -12px rgba(31, 31, 29, 0.55);
padding-right: 22px;
}
.wa-float:hover .wa-label,
.wa-float:focus-visible .wa-label {
max-width: 160px;
opacity: 1;
}
.wa-float:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.wa-float { animation: none; opacity: 1; transform: none; }
.wa-float,
.wa-float .wa-label { transition: none; }
}
/* ============================================================
MOBILE STICKY CTA
============================================================ */
.mobile-cta {
position: fixed;
left: 16px; right: 16px;
bottom: 16px;
height: 56px;
background: var(--charcoal);
color: var(--bone);
display: none;
align-items: center;
justify-content: center;
gap: 14px;
font-family: var(--sans);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
z-index: 60;
opacity: 0;
transform: translateY(20px);
transition: opacity 240ms ease, transform 240ms ease, background 220ms ease;
box-shadow: 0 20px 40px -10px rgba(31,31,29,0.4);
}
.mobile-cta .dot {
width: 5px; height: 5px; border-radius: 50%; background: var(--brass);
}
.mobile-cta .arr {
width: 22px; height: 1px; background: currentColor; position: relative;
}
.mobile-cta .arr::after {
content: ""; position: absolute; right: 0; top: 50%;
width: 6px; height: 6px;
border-top: 1px solid currentColor; border-right: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
.mobile-cta.show { opacity: 1; transform: translateY(0); }
.mobile-cta:hover { background: var(--brass-deep); }
/* ============================================================
RESPONSIVE
============================================================ */
/* Between the phone breakpoint (860px) and ~1080px the full 9-item nav plus
the quote button is wider than the viewport, which pushed the button off
screen. Compress the row rather than hide it — there is no mobile menu to
fall back to at these widths. */
@media (max-width: 1080px) {
.nav-inner { padding: 0 24px; column-gap: 16px; }
.nav-links { gap: 12px; }
.nav-links a { font-size: 12px; letter-spacing: 0; }
.nav-sub a { font-size: 12px; }
.nav-quote { padding: 0 13px; font-size: 10px; letter-spacing: 0.14em; gap: 8px; }
}
@media (max-width: 920px) {
.nav-inner { padding: 0 12px; column-gap: 14px; }
.nav-links { gap: 8px; }
.nav-links a { font-size: 11.5px; }
.nav-quote { padding: 0 11px; font-size: 9.5px; letter-spacing: 0.1em; gap: 7px; }
}
@media (max-width: 884px) {
.nav-links { gap: 7px; }
.nav-links a { font-size: 11px; }
.nav-quote { padding: 0 9px; font-size: 9px; letter-spacing: 0.08em; gap: 6px; }
}
@media (max-width: 1180px) {
.container { padding: 0 36px; }
section { padding: 64px 0; }
.cat-grid { grid-template-columns: repeat(2, 1fr); }
.feat-grid { grid-template-columns: repeat(2, 1fr); }
.editorial-grid { gap: 56px; }
.inq-aside { padding-left: 40px; }
.trade-inner { gap: 56px; }
.nav-links { gap: 22px; }
/* Orbit: shrink for medium viewports */
.hero-orbit { width: 580px; height: 460px; right: 1%; --rx: 190; --rz: 240; --ry: 24; }
.orbit-item { width: 181.5px; height: 256px; margin: -128px 0 0 -90.75px; }
}
@media (max-width: 860px) {
.container { padding: 0 22px; }
section { padding: 52px 0; }
/* Orbit is too cramped to revolve on phones — flatten it into a swipeable
product carousel. !important beats the absolute 3D base rules outright. */
.hero-orbit {
display: block !important;
position: static !important;
inset: auto !important;
left: auto !important; right: auto !important; top: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
transform: none !important;
perspective: none !important;
pointer-events: auto;
z-index: auto;
}
.orbit-stage {
position: static !important;
inset: auto !important;
min-width: 0 !important;
max-width: 100% !important;
transform: none !important;
perspective: none !important;
transform-style: flat;
display: flex;
gap: 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
/* side padding (vw) centers the first/last card with a peek of the next */
padding: 18px 15vw 22px;
margin: 0;
scrollbar-width: none;
}
.orbit-stage::-webkit-scrollbar { display: none; }
.orbit-item {
position: static !important;
transform: none !important;
opacity: 1 !important;
filter: none !important;
z-index: auto !important;
/* compact portrait card sized in vw so it always fits the phone frame */
flex: 0 0 70vw;
width: 70vw !important;
height: auto !important;
aspect-ratio: 3 / 4;
max-height: 56vh;
margin: 0 !important;
padding: 18px 18px 20px;
scroll-snap-align: center;
}
/* give the product art room to breathe in the card */
.oi-art { top: 0; bottom: 22%; }
.orbit-floor { display: none; }
/* Nav: condense */
.nav-inner { grid-template-columns: 1fr auto; padding: 0 22px; height: 64px; }
.nav-links { display: none; }
.brand { width: 108px; height: 28px; }
.nav-quote { height: 38px; padding: 0 16px; font-size: 10px; }
/* Hero: portrait crop */
.hero { height: auto; min-height: 0; max-height: none; background: var(--bone); }
.hero-photo, .hero-photo-tub, .hero-photo-light, .hero-photo-floor, .hero-grain {
position: relative;
}
.hero {
display: grid;
grid-template-columns: minmax(0, 1fr); /* stop the carousel blowing the column wide */
grid-template-rows: auto auto;
}
/* Drop the empty gradient banner + its overlay text on phones — lead with the
product carousel instead of dead space. */
.hero-photo { display: none; }
.hero-marker, .hero-meta { display: none; }
.hero-copy {
position: static;
background: var(--charcoal);
color: var(--bone);
padding: 48px 22px 56px;
display: block;
}
.hero-copy-left { max-width: none; }
.hero h1 { font-size: clamp(40px, 11vw, 64px); }
.hero-sub { font-size: 15px; max-width: none; margin-bottom: 28px; }
.hero-copy-right { display: none; }
.hero-cta { gap: 10px; }
.hero-cta .btn { height: 48px; padding: 0 20px; font-size: 11px; }
/* Sections */
.section-head {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 48px;
}
.section-head .h-right { text-align: left; margin-left: 0; max-width: none; }
.cat-grid { grid-template-columns: 1fr; gap: 18px; }
.feat-grid { grid-template-columns: 1fr; gap: 18px; }
.editorial-grid { grid-template-columns: 1fr; gap: 40px; }
.ed-photo { min-height: 480px; }
.ed-content { padding-top: 0; }
.trade { padding: 90px 0; }
.trade-inner { grid-template-columns: 1fr; gap: 32px; }
.trade-stats { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
.trade-stat { display: flex; align-items: baseline; gap: 16px; }
.trade-stat .v { font-size: 32px; margin-bottom: 0; min-width: 110px; }
/* Gallery -> two columns */
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 200px;
gap: 12px;
}
.gallery-grid .proj {
grid-column: span 1 !important;
grid-row: span 2 !important;
}
.gallery-grid .proj.p-1, .gallery-grid .proj.p-6 {
grid-column: span 2 !important;
grid-row: span 2 !important;
}
/* Inquiry */
.inq-grid { grid-template-columns: 1fr; gap: 56px; }
.form { grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
.field { padding: 20px 0 12px !important; border-right: none !important; }
.field input, .field select { font-size: 19px; }
.form-actions { flex-direction: column; align-items: stretch; gap: 18px; }
.submit { justify-content: space-between; width: 100%; }
.inq-aside {
margin-top: 0;
padding: 32px 0 0;
border-left: none;
border-top: 1px solid var(--hair);
}
/* Footer */
.foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.foot-brand { grid-column: 1 / -1; }
.foot-bottom { flex-direction: column; align-items: flex-start; }
/* Sticky mobile CTA */
.mobile-cta { display: inline-flex; }
/* Clear the sticky CTA (56px tall, 16px from the bottom) and shrink the
disc; no hover on touch, so the label never expands here. */
.wa-float { right: 16px; bottom: 88px; height: 52px; }
.wa-float .wa-glyph { width: 52px; height: 52px; }
.wa-float .wa-label { display: none; }
}
@media (max-width: 480px) {
.foot-grid { grid-template-columns: 1fr; }
.gallery-grid .proj.p-1, .gallery-grid .proj.p-6,
.gallery-grid .proj {
grid-column: span 2 !important;
grid-row: span 2 !important;
}
}
/* ============================================================
STOREFRONT — category & product pages
(styles the classes referenced by category.ejs / product.ejs,
matching the quiet-luxury bone/charcoal/brass language)
============================================================ */
.wrap{
max-width:1200px;
margin:0 auto;
padding:0 56px;
}
.categories{ padding:52px 0; }
.categories .section-head{ margin-bottom:48px; }
/* Category blurb under the heading */
.cat-blurb{
font-family:var(--serif);
font-weight:300;
font-size:22px;
line-height:1.5;
color:var(--ink-soft);
max-width:640px;
margin:0 0 56px;
}
/* Responsive product grid (reuse .feat-grid sizing) */
.feat-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
}
.feat-card{
display:flex;
flex-direction:column;
background:var(--bone);
color:var(--ink);
transition:transform 600ms cubic-bezier(.2,.7,.2,1);
}
.feat-card:hover{ transform:translateY(-4px); }
.feat-photo{
position:relative;
aspect-ratio:1 / 1;
overflow:hidden;
background-color:#fff;
background-image:linear-gradient(165deg, var(--bone-deep) 0%, var(--bone-shadow) 100%);
background-repeat:no-repeat;
background-origin:content-box;
background-size:contain;
background-position:center;
padding:4%;
border:1px solid var(--bone-shadow);
box-shadow:0 2px 12px rgba(31,31,29,.05);
transition:transform 900ms cubic-bezier(.2,.7,.2,1), box-shadow 600ms ease;
}
.feat-card:hover .feat-photo{ box-shadow:0 10px 28px rgba(31,31,29,.10); }
.feat-card:hover .feat-photo{ transform:scale(1.02); }
.feat-meta{
padding:16px 4px 4px;
display:flex;
flex-direction:column;
gap:7px;
border-top:1px solid var(--hair);
}
.feat-meta h3{
font-size:28px;
font-weight:300;
letter-spacing:-0.01em;
line-height:1.05;
}
.feat-meta .prod-quote{
font-family:var(--sans);
font-weight:500;
font-size:11px;
letter-spacing:0.22em;
text-transform:uppercase;
color:var(--brass);
}
/* ---- Finish indicator dots on product cards ---- */
.card-swatches{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:7px;
}
.card-dot{
width:14px; height:14px;
border-radius:50%;
display:inline-block;
box-shadow:inset 0 0 0 1px var(--hair, rgba(31,31,29,0.14)), 0 1px 2px rgba(31,31,29,0.10);
}
.card-dot-more{
font-family:var(--sans);
font-weight:500;
font-size:10px;
letter-spacing:0.08em;
color:var(--ink-mute, #8a8578);
margin-left:2px;
}
/* ---- Product detail ---- */
.product-detail{ padding:120px 0; }
.product-grid{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
gap:72px;
align-items:start;
}
.product-gallery{ display:flex; flex-direction:column; gap:16px; min-width:0; position:sticky; top:96px; align-self:start; }
.product-photo-empty{
width:100%;
aspect-ratio:4 / 5;
background:linear-gradient(165deg, var(--bone-deep) 0%, var(--bone-shadow) 100%);
}
/* ---- Product carousel ---- */
.pd-carousel{ position:relative; }
.pd-stage{
position:relative;
width:100%;
aspect-ratio:4 / 5;
/* Never taller than the viewport; keep the 4:5 ratio by capping width too. */
max-height:min(620px, calc(100vh - 200px));
max-width:min(496px, calc((100vh - 200px) * 0.8));
margin-inline:auto;
background:#fff;
overflow:hidden;
border:1px solid var(--bone-shadow);
}
.pd-slide{
position:absolute; inset:0; margin:0;
display:flex; align-items:center; justify-content:center;
opacity:0; visibility:hidden;
transition:opacity .5s ease;
}
.pd-slide.is-active{ opacity:1; visibility:visible; }
.pd-slide img{
width:100%; height:100%;
object-fit:contain;
padding:7%;
}
.pd-nav{
position:absolute; top:50%; transform:translateY(-50%);
width:44px; height:44px; border-radius:50%;
background:rgba(255,255,255,.82); color:var(--ink);
border:1px solid var(--bone-shadow);
display:flex; align-items:center; justify-content:center;
font-size:26px; line-height:0; padding-bottom:3px; cursor:pointer;
opacity:0; transition:opacity .25s ease, background .2s, border-color .2s, color .2s;
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); z-index:2;
}
.pd-carousel:hover .pd-nav{ opacity:1; }
.pd-nav:hover{ background:#fff; border-color:var(--brass); color:var(--brass); }
.pd-prev{ left:16px; }
.pd-next{ right:16px; }
.pd-counter{
position:absolute; bottom:14px; right:16px; z-index:2;
font-family:var(--sans); font-size:11px; letter-spacing:.1em;
color:var(--ink-mute); background:rgba(255,255,255,.78);
padding:5px 11px; border-radius:20px;
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.pd-counter-sep{ margin:0 5px; opacity:.45; }
.pd-thumbs{
display:flex; gap:12px; overflow-x:auto;
scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px;
max-width:min(496px, calc((100vh - 200px) * 0.8));
margin-inline:auto; width:100%;
}
.pd-thumbs::-webkit-scrollbar{ display:none; }
.pd-thumb{
flex:0 0 auto; width:70px; height:86px;
background:#fff; border:1px solid var(--bone-shadow);
padding:0; cursor:pointer; overflow:hidden; opacity:.6;
transition:opacity .2s ease, border-color .2s ease;
}
.pd-thumb img{ width:100%; height:100%; object-fit:contain; padding:9%; }
.pd-thumb:hover{ opacity:1; }
.pd-thumb.is-active{ opacity:1; border-color:var(--brass); }
@media (hover:none){ .pd-nav{ opacity:.9; } }
.pd-finishes{ margin:0 0 40px; }
.pd-finishes-head{
display:flex; align-items:baseline; gap:14px;
margin-bottom:16px;
}
.pd-finishes-label{
font-family:var(--sans); font-weight:500; font-size:10px;
letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-mute);
}
.pd-finishes-current{
font-family:var(--serif); font-weight:300; font-size:19px; color:var(--ink);
}
.pd-swatches{ display:flex; flex-wrap:wrap; gap:22px; }
.pd-swatch{
display:flex; flex-direction:column; align-items:center; gap:8px;
background:none; border:none; padding:0; cursor:pointer;
font:inherit; color:var(--ink-mute);
}
.pd-swatch-dot{
width:34px; height:34px; border-radius:50%;
box-shadow:inset 0 0 0 1px var(--hair), 0 1px 3px rgba(31,31,29,0.12);
outline:2px solid transparent; outline-offset:3px;
transition:outline-color .2s ease, transform .2s ease;
}
.pd-swatch-name{
font-family:var(--sans); font-weight:500; font-size:9px;
letter-spacing:0.16em; text-transform:uppercase;
transition:color .2s ease;
}
.pd-swatch:hover .pd-swatch-dot{ transform:scale(1.06); }
.pd-swatch.is-active .pd-swatch-dot{ outline-color:var(--brass); }
.pd-swatch.is-active .pd-swatch-name{ color:var(--ink); }
.product-info{ padding-top:8px; }
.product-info .hero-eyebrow{
color:var(--brass);
opacity:1;
margin-bottom:20px;
}
.product-info h1{
font-size:clamp(40px,4.6vw,68px);
line-height:1.02;
letter-spacing:-0.015em;
font-weight:300;
margin-bottom:28px;
}
.product-desc{
font-family:var(--serif);
font-weight:300;
font-size:21px;
line-height:1.55;
color:var(--ink-soft);
margin-bottom:48px;
}
.product-info .form{ margin-top:8px; }
.product-info .form h3{
grid-column:1 / -1;
font-size:26px;
font-weight:300;
padding-bottom:20px;
}
.product-info .form label{
display:block;
font-family:var(--sans);
font-weight:500;
font-size:10px;
letter-spacing:0.22em;
text-transform:uppercase;
color:var(--ink-mute);
border-bottom:1px solid var(--hair);
padding:18px 0 14px;
}
.product-info .form label:nth-of-type(odd){ padding-right:28px; }
.product-info .form input,
.product-info .form textarea{
display:block;
width:100%;
border:none;
background:transparent;
font-family:var(--serif);
font-size:20px;
font-weight:300;
color:var(--ink);
padding:8px 0 4px;
outline:none;
}
.product-info .form textarea{
grid-column:1 / -1;
font-family:var(--sans);
font-size:15px;
line-height:1.55;
resize:vertical;
min-height:84px;
}
.product-info .form .submit{ grid-column:1 / -1; margin-top:28px; justify-content:center; }
/* Honeypot: off-screen, untabbable, hidden from AT — only bots fill it */
.hp{
position:absolute !important;
left:-9999px; top:auto;
width:1px; height:1px;
overflow:hidden;
}
@media (max-width:980px){
.wrap{ padding:0 32px; }
.feat-grid{ grid-template-columns:repeat(2,1fr); gap:24px; }
.product-grid{ grid-template-columns:minmax(0,1fr); gap:40px; }
.product-gallery{ position:static; }
}
@media (max-width:620px){
.wrap{ padding:0 22px; }
.categories,.product-detail{ padding:56px 0; }
/* 2-up on phones so the product name shows beside the image, not a screen-filling card */
.feat-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
.product-info .form label:nth-of-type(odd){ padding-right:0; }
}
/* ============================================================
AUTHORIZED RESELLER — brand strip + brand cards
============================================================ */
.brandstrip{ padding:44px 0; background:var(--bone); border-top:1px solid var(--bone-shadow); border-bottom:1px solid var(--bone-shadow); }
.brandstrip-label{ text-align:center; font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 26px; }
.brandstrip-logos{ display:flex; align-items:center; justify-content:center; gap:clamp(26px,6vw,74px); flex-wrap:wrap; }
.brandstrip-logos img{ height:28px; width:auto; opacity:.6; transition:opacity .25s ease; }
.brandstrip-logos img:hover{ opacity:1; }
@media (max-width:700px){ .brandstrip-logos{ gap:24px 34px; } .brandstrip-logos img{ height:22px; } }
.brandcards{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:8px; }
.brandcard{ background:#fff; border:1px solid var(--bone-shadow); padding:34px 22px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; transition:box-shadow .25s ease, transform .25s ease; }
.brandcard:hover{ box-shadow:0 14px 40px rgba(0,0,0,.07); transform:translateY(-3px); }
.brandcard .bc-logo{ height:34px; display:flex; align-items:center; }
.brandcard .bc-logo img{ height:30px; width:auto; opacity:.82; }
.brandcard p{ font-family:var(--serif); font-size:16px; line-height:1.4; color:var(--ink-soft); margin:0; font-weight:300; }
@media (max-width:980px){ .brandcards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .brandcards{ grid-template-columns:1fr; } }
/* ============================================================
REVIEWS / TESTIMONIALS
============================================================ */
.reviews{ background:var(--bone-deep); }
.rev-grid{ columns:3; column-gap:26px; margin-top:8px; }
.rev-card{
break-inside:avoid;
background:#fff;
border:1px solid var(--bone-shadow);
padding:30px 30px 26px;
margin:0 0 26px;
display:flex;
flex-direction:column;
gap:18px;
transition:box-shadow .25s ease, transform .25s ease;
}
.rev-card:hover{ box-shadow:0 16px 44px rgba(0,0,0,.07); transform:translateY(-3px); }
.rev-stars{ color:var(--brass); font-size:13px; letter-spacing:4px; line-height:1; }
.rev-quote{
font-family:var(--serif);
font-size:21px;
line-height:1.42;
font-weight:300;
color:var(--ink);
margin:0;
}
.rev-by{
display:flex;
flex-direction:column;
gap:3px;
border-top:1px solid var(--hair-soft);
padding-top:16px;
margin-top:2px;
}
.rev-name{ font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.01em; color:var(--ink); }
.rev-role{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
@media (max-width:980px){ .rev-grid{ columns:2; } }
@media (max-width:620px){ .rev-grid{ columns:1; } }
/* ============================================================
CONTENT PAGES (About, Care, Warranty, Shipping, Returns, FAQ)
============================================================ */
.content-page{ padding:120px 0 100px; }
.content-wrap{ max-width:820px; }
.content-title{ font-family:var(--serif); font-weight:300; font-size:clamp(38px,6vw,68px); line-height:1.04; letter-spacing:-.01em; color:var(--ink); margin:26px 0 0; }
.content-lede{ font-family:var(--serif); font-weight:300; font-size:clamp(19px,2.4vw,25px); line-height:1.5; color:var(--ink-soft); margin:26px 0 8px; max-width:680px; }
.content-blocks{ margin-top:46px; display:flex; flex-direction:column; gap:40px; }
.content-block{ border-top:1px solid var(--bone-shadow); padding-top:30px; }
.content-block h2{ font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin:0 0 14px; }
.content-block p{ font-family:var(--serif); font-weight:300; font-size:18px; line-height:1.65; color:var(--ink-soft); margin:0; }
.content-cta{ margin-top:56px; }
.content-page a{ color:var(--brass); }
/* Why-Italia editorial real photo */
.ed-photo.has-img{ background:#cfc6b4; }
.ed-photo-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ed-photo-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(31,31,29,0) 58%, rgba(31,31,29,0.40) 100%); }
.ed-photo.has-img .ph-label{ z-index:2; }
/* Hide leftover placeholder object shapes now that categories have real photos */
.cat-photo .obj{ display:none !important; }
/* ============================================================
SIGNATURE SERIES (#series) — own collections, poster lookbook
============================================================ */
.series{ padding:clamp(44px,4.4vw,62px) 0; background:var(--bone); }
.serieslook{
margin-top:46px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:clamp(16px,2vw,26px);
}
.series-card{
display:block; text-decoration:none; color:inherit;
background:#fff;
border:1px solid var(--bone-shadow);
transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.series-card:hover{
box-shadow:0 18px 50px rgba(0,0,0,.09);
transform:translateY(-4px);
border-color:var(--brass);
}
.series-photo{
aspect-ratio:4 / 3;
overflow:hidden;
background:#fff;
}
.series-photo img{
width:100%; height:100%;
object-fit:contain;
padding:14px;
transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.series-card:hover .series-photo img{ transform:scale(1.035); }
.series-meta{
display:flex; align-items:baseline; justify-content:space-between; gap:14px;
padding:18px 22px 22px;
border-top:1px solid var(--bone-shadow);
}
.series-meta h3{
margin:0;
font-family:var(--serif); font-weight:400; font-size:24px; letter-spacing:.01em;
color:var(--ink);
}
.series-meta h3 span{
font-style:italic; font-size:16px; color:var(--ink-mute); margin-left:4px;
}
.series-finish{
font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
color:var(--brass); text-align:right; flex-shrink:0;
}
@media (max-width:980px){ .serieslook{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
.serieslook{ grid-template-columns:1fr; }
.series-meta{ padding:16px 18px 18px; }
.series-meta h3{ font-size:21px; }
}
/* ============================================================
NAV DROPDOWNS (sub-categories)
============================================================ */
.nav-item.has-sub { position: relative; display: inline-flex; }
.nav-item.has-sub > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret {
font-size: 12px; line-height: 1; color: var(--ink-mute);
transition: transform 240ms ease, color 240ms ease;
}
.nav-item.has-sub:hover .nav-caret,
.nav-item.has-sub:focus-within .nav-caret { transform: rotate(90deg); color: var(--brass); }
.nav-sub {
position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
min-width: 184px; padding: 10px 0;
background: var(--bone); border: 1px solid var(--bone-shadow);
box-shadow: 0 18px 44px rgba(31,31,29,.13);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
z-index: 60;
}
.nav-item.has-sub:hover .nav-sub,
.nav-item.has-sub:focus-within .nav-sub {
opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.nav-sub::before { /* hover bridge so the menu doesn't close in the gap */
content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}
.nav-sub a {
display: block; padding: 8px 22px;
font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.04em;
color: var(--ink-soft); white-space: nowrap;
}
.nav-sub a::after { display: none; }
.nav-sub a:hover { color: var(--ink); background: var(--bone-deep); }
.nav-sub a:first-child { color: var(--brass); }
/* ============================================================
CATEGORY SUB-TYPE FILTER CHIPS
============================================================ */
.cat-sub-head { color: var(--brass); font-style: italic; font-weight: 400; }
.cat-filters {
display: flex; flex-wrap: wrap; gap: 10px;
margin: 0 0 38px; padding-bottom: 4px;
}
.cat-chip {
display: inline-flex; align-items: center; height: 34px; padding: 0 18px;
font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-soft); border: 1px solid var(--bone-shadow); border-radius: 999px;
transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.cat-chip:hover { color: var(--ink); border-color: var(--ink-mute); }
.cat-chip.is-active { color: var(--bone); background: var(--ink); border-color: var(--ink); }
/* ============================================================
SERIES INDEX GRID
============================================================ */
.series-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px;
}
.series-tile {
display: block; background: var(--bone); border: 1px solid var(--bone-shadow); overflow: hidden;
transition: box-shadow 260ms ease, transform 260ms ease;
}
.series-tile:hover { box-shadow: 0 22px 52px rgba(31,31,29,.14); transform: translateY(-3px); }
.series-tile-photo {
aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--bone-deep);
}
.series-tile-meta { padding: 20px 22px 24px; }
.series-tile-meta h3 { font-family: var(--serif); font-size: 26px; margin: 0 0 6px; }
@media (max-width:900px){ .series-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .series-grid{ grid-template-columns: 1fr; } }
/* ============================================================
HOME CATEGORY CAROUSEL
============================================================ */
.cat-carousel { position: relative; }
.cat-track {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 4px 2px 12px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.cat-track::-webkit-scrollbar { display: none; }
.cat-track > .cat,
.cat-track > .prod {
flex: 0 0 clamp(232px, 27vw, 292px);
scroll-snap-align: start;
}
.cat-arrow {
position: absolute;
top: 36%;
transform: translateY(-50%);
z-index: 6;
width: 46px; height: 46px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: #fff; color: var(--ink);
border: 1px solid var(--bone-shadow);
font-size: 24px; line-height: 1; padding-bottom: 3px;
cursor: pointer;
box-shadow: 0 6px 22px rgba(31,31,29,.13);
transition: opacity .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}
.cat-arrow:hover { background: var(--ink); color: #fff; transform: translateY(-50%) scale(1.05); }
.cat-arrow-prev { left: -12px; }
.cat-arrow-next { right: -12px; }
.cat-arrow.is-hidden { opacity: 0; pointer-events: none; }
@media (max-width: 860px) {
.cat-track > .cat,
.cat-track > .prod { flex-basis: 72vw; }
.cat-arrow { display: none; } /* touch users swipe the track */
}
/* ============================================================
CONTACT PAGE
============================================================ */
.ct-head {
padding: 132px 0 56px;
background: var(--bone);
}
.ct-title {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(44px, 6vw, 88px);
line-height: 0.98;
letter-spacing: -0.02em;
margin: 0 0 26px;
max-width: 15ch;
}
.ct-title em { font-style: italic; color: var(--brass); }
.ct-lede {
font-size: 17px;
line-height: 1.72;
color: var(--ink-soft);
max-width: 62ch;
margin: 0;
}
/* --- three channel cards --- */
.ct-channels { padding: 16px 0 58px; background: var(--bone); }
.ct-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--hair);
}
.ct-card {
padding: 40px 40px 36px 0;
border-right: 1px solid var(--hair);
display: flex;
flex-direction: column;
}
.ct-card:not(:first-child) { padding-left: 40px; }
.ct-card:last-child { border-right: 0; padding-right: 0; }
.ct-k {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brass);
display: block;
margin-bottom: 20px;
}
.ct-v {
font-family: var(--serif);
font-size: 26px;
line-height: 1.32;
font-weight: 300;
margin: 0 0 14px;
}
.ct-v a { transition: color 200ms ease; }
.ct-v a:hover { color: var(--brass); }
.ct-sub {
font-size: 14px;
line-height: 1.65;
color: var(--ink-soft);
margin: 0 0 22px;
max-width: 34ch;
}
.ct-hours {
margin: 0 0 22px;
padding: 0;
border-top: 1px solid var(--hair-soft);
}
.ct-hrow {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 9px 0;
border-bottom: 1px solid var(--hair-soft);
}
.ct-hrow dt {
font-size: 13px;
color: var(--ink-soft);
}
.ct-hrow dd {
margin: 0;
font-family: var(--mono);
font-size: 12px;
color: var(--ink);
white-space: nowrap;
}
.ct-link {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
transition: color 200ms ease;
}
.ct-link .arr {
width: 22px; height: 1px; background: currentColor; position: relative;
transition: width 240ms ease;
}
.ct-link .arr::after {
content: ""; position: absolute; right: 0; top: 50%;
width: 6px; height: 6px;
border-top: 1px solid currentColor; border-right: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
.ct-link:hover { color: var(--brass); }
.ct-link:hover .arr { width: 32px; }
/* --- map --- */
.ct-map-sec { padding: 62px 0; background: var(--bone-deep); }
.ct-map-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: 34px;
}
.ct-map-head h2 {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(30px, 3.4vw, 46px);
line-height: 1.06;
letter-spacing: -0.015em;
margin: 0;
max-width: 18ch;
}
.ct-map-head h2 em { font-style: italic; color: var(--brass); }
.ct-map-head .btn { border-color: var(--ink); flex: 0 0 auto; }
.ct-map-head .btn:hover { background: var(--charcoal); color: var(--bone); }
.ct-map {
position: relative;
height: 460px;
border: 1px solid var(--bone-shadow);
background: var(--bone);
overflow: hidden;
}
.ct-map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
/* Desaturate the Google tiles so the map sits inside the bone/charcoal
palette instead of shouting over it; full colour on hover. */
filter: grayscale(1) contrast(0.92);
transition: filter 420ms ease;
}
.ct-map:hover iframe { filter: grayscale(0) contrast(1); }
/* --- social --- */
.ct-social-sec { padding: 62px 0; background: var(--bone); }
.ct-social-h em { font-style: italic; color: var(--brass); }
.ct-social-h {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(30px, 3.4vw, 46px);
line-height: 1.06;
letter-spacing: -0.015em;
margin: 0 0 34px;
}
.ct-social {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.ct-soc {
display: inline-flex;
align-items: center;
gap: 12px;
height: 54px;
padding: 0 24px;
border: 1px solid var(--hair);
color: var(--ink);
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
background: var(--bone);
transition: color 240ms ease, border-color 240ms ease,
background 240ms ease, transform 240ms ease;
}
.ct-soc svg { flex: 0 0 auto; transition: transform 240ms ease; }
/* Marks sit in ink at rest and pick up their own brand colour on hover —
recognisable without turning the row into a colour swatch. */
.ct-soc:hover {
color: var(--brand, var(--brass));
border-color: var(--brand, var(--brass));
transform: translateY(-2px);
}
.ct-soc:hover svg { transform: scale(1.08); }
.ct-soc:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
@media (max-width: 1180px) {
.ct-cards { grid-template-columns: 1fr 1fr; }
.ct-card:nth-child(2) { border-right: 0; padding-right: 0; }
.ct-card:nth-child(3) {
grid-column: 1 / -1;
border-right: 0;
border-top: 1px solid var(--hair);
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 860px) {
.ct-head { padding: 104px 0 40px; }
.ct-channels { padding: 12px 0 60px; }
.ct-cards { grid-template-columns: 1fr; }
.ct-card,
.ct-card:not(:first-child),
.ct-card:nth-child(3) {
padding: 30px 0 28px;
border-right: 0;
border-bottom: 1px solid var(--hair);
padding-left: 0;
}
.ct-card:last-child { border-bottom: 0; }
.ct-map-sec, .ct-social-sec { padding: 56px 0; }
.ct-map-head { flex-direction: column; align-items: flex-start; gap: 20px; }
.ct-map { height: 340px; }
/* Touch has no hover, so show the map in full colour from the start. */
.ct-map iframe { filter: none; }
.ct-soc { flex: 1 1 100%; justify-content: center; }
}
/* ============================================================
CATEGORY PAGE — masthead, series cross-link, help band
============================================================ */
.cm-head {
padding: 118px 0 52px;
background: var(--bone);
border-bottom: 1px solid var(--hair-soft);
}
.cm-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 64px;
align-items: center;
}
.cm-title {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(42px, 5.4vw, 78px);
line-height: 0.98;
letter-spacing: -0.02em;
margin: 0 0 22px;
}
.cm-title em { font-style: italic; color: var(--brass); font-size: 0.62em; }
.cm-lede {
font-size: 16px;
line-height: 1.72;
color: var(--ink-soft);
max-width: 52ch;
margin: 0 0 30px;
}
.cm-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.cm-ghost {
font-family: var(--sans); font-weight: 500; font-size: 11px;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--ink); border-bottom: 1px solid var(--hair);
padding-bottom: 4px; transition: color 200ms ease, border-color 200ms ease;
}
.cm-ghost:hover { color: var(--brass); border-color: var(--brass); }
/* Hero plate — product shots are on white, so keep the plate white. */
.cm-figure-plate {
background: #fff;
border: 1px solid var(--bone-shadow);
aspect-ratio: 4 / 5;
max-height: 420px;
margin-inline: auto;
display: grid;
place-items: center;
overflow: hidden;
}
.cm-figure-plate img {
width: 100%; height: 100%;
object-fit: contain;
padding: 26px;
}
/* --- listing --- */
.cm-listing { padding: 46px 0 64px; background: var(--bone); }
.cat-chip-n {
margin-left: 8px;
font-family: var(--mono);
font-size: 10px;
opacity: 0.6;
}
.cm-resultline {
margin: -22px 0 30px;
font-size: 13px;
color: var(--ink-soft);
}
.cm-resultline a {
margin-left: 10px;
border-bottom: 1px solid var(--hair);
transition: color 200ms ease, border-color 200ms ease;
}
.cm-resultline a:hover { color: var(--brass); border-color: var(--brass); }
.cm-empty {
grid-column: 1 / -1;
text-align: center;
padding: 64px 24px;
border: 1px solid var(--hair);
background: #fff;
}
.cm-empty h3 {
font-family: var(--serif); font-weight: 300; font-size: 30px;
margin: 0 0 12px;
}
.cm-empty p {
color: var(--ink-soft); max-width: 46ch; margin: 0 auto 26px; line-height: 1.7;
}
/* --- series cross-link --- */
.cm-series { padding: 60px 0; background: var(--bone-deep); }
.cm-series-head {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 48px;
align-items: end;
margin-bottom: 32px;
}
.cm-series-head h2 {
font-family: var(--serif); font-weight: 300;
font-size: clamp(28px, 3.2vw, 44px); line-height: 1.06;
letter-spacing: -0.015em; margin: 0;
}
.cm-series-head h2 em { font-style: italic; color: var(--brass); }
.cm-series-note {
font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin: 0; text-align: right;
}
.cm-series-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cm-series-chip {
display: inline-flex; align-items: baseline; gap: 12px;
padding: 14px 22px;
background: var(--bone);
border: 1px solid var(--bone-shadow);
transition: border-color 220ms ease, transform 220ms ease, background 220ms ease;
}
.cm-series-chip:hover {
border-color: var(--brass);
transform: translateY(-2px);
}
.cm-series-name {
font-family: var(--serif); font-size: 21px; font-weight: 300;
}
.cm-series-n {
font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-mute);
}
/* --- closing help band --- */
.cm-help { padding: 66px 0; background: var(--charcoal); color: var(--bone); }
.cm-help .section-eyebrow-row .num { color: var(--brass); }
.cm-help .section-eyebrow-row .eyebrow { color: var(--ink-mute); }
.cm-help .section-eyebrow-row .line { background: var(--brass); opacity: 0.7; }
.cm-help-inner {
display: grid;
grid-template-columns: 1.25fr 0.75fr;
gap: 56px;
align-items: center;
}
.cm-help h2 {
font-family: var(--serif); font-weight: 300; color: var(--bone);
font-size: clamp(30px, 3.6vw, 50px); line-height: 1.04;
letter-spacing: -0.018em; margin: 0 0 16px;
}
.cm-help h2 em { font-style: italic; color: var(--brass); }
.cm-help p {
color: rgba(245, 241, 235, 0.72);
line-height: 1.72; max-width: 52ch; margin: 0;
}
.cm-help-actions {
display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.btn-onDark { background: var(--bone); color: var(--charcoal); }
.btn-onDark:hover { background: var(--brass); color: var(--bone); }
.cm-help-link {
font-family: var(--sans); font-weight: 500; font-size: 11px;
letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(245, 241, 235, 0.8);
border-bottom: 1px solid rgba(245, 241, 235, 0.28);
padding-bottom: 4px;
transition: color 200ms ease, border-color 200ms ease;
}
.cm-help-link:hover { color: var(--brass); border-color: var(--brass); }
@media (max-width: 980px) {
.cm-grid { grid-template-columns: 1fr; gap: 36px; }
.cm-figure { order: -1; }
.cm-figure-plate { max-height: 300px; aspect-ratio: 3 / 2; }
.cm-series-head { grid-template-columns: 1fr; gap: 18px; }
.cm-series-note { text-align: left; }
.cm-help-inner { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 860px) {
.cm-head { padding: 92px 0 36px; }
.cm-listing { padding: 32px 0 48px; }
.cm-series, .cm-help { padding: 46px 0; }
.cm-actions { gap: 18px; }
.cm-actions .btn { width: 100%; justify-content: space-between; }
.cm-help-actions .btn { width: 100%; justify-content: space-between; }
}