/* =========================================================
Nayya Abaya — Design System v2
Burgundy + blush · refined editorial layout
========================================================= */
:root {
/* Live header height, kept in sync by script on every page */
--header-h: 67px;
/* Brand palette */
--burgundy: #5A1018;
--burgundy-deep: #3D0810;
--burgundy-soft: #7a2230;
--blush: #E5CFC5;
--blush-light: #EFDED2;
--blush-pale: #F8ECE5;
--cream: #FBF6F1;
--ink: #1A0A0E;
--ink-soft: #5a3a3f;
--ink-mute: #7d5f64;
--line: #ebd9cf;
--line-soft: #f0e1d7;
--line-dark: rgba(229, 207, 197, 0.18);
/* Typography */
--serif-display: 'Italiana', 'Cormorant Garamond', 'Times New Roman', serif;
--serif: 'Cormorant Garamond', 'Times New Roman', serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Type scale — fluid via clamp() so text scales smoothly between breakpoints */
--text-xs: 10.5px;
--text-sm: 12px;
--text-md: clamp(13px, 0.3vw + 10.5px, 14px);
--text-base: clamp(14px, 0.35vw + 11px, 15px);
--text-lg: clamp(15px, 0.4vw + 12.5px, 17px);
--text-xl: clamp(18px, 1.1vw + 13px, 22px);
--text-2xl: clamp(22px, 1.6vw + 12px, 28px);
--text-3xl: clamp(30px, 4.4vw, 52px);
--text-4xl: clamp(44px, 8.5vw, 110px);
/* Spacing scale */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
/* Layout */
--container: 1320px;
--gutter: 32px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(26,10,14,0.04), 0 1px 1px rgba(26,10,14,0.03);
--shadow-md: 0 4px 12px rgba(26,10,14,0.05), 0 2px 4px rgba(26,10,14,0.04);
--shadow-lg: 0 20px 50px rgba(26,10,14,0.10), 0 6px 16px rgba(26,10,14,0.05);
/* Motion */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 200ms var(--ease);
--t-med: 350ms var(--ease);
--t-slow: 600ms var(--ease-out);
}
/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* ---------- Global focus (WCAG 2.4.7) ---------- */
:focus-visible {
outline: 2px solid var(--burgundy);
outline-offset: 3px;
border-radius: 2px;
transition: outline-offset 120ms var(--ease);
}
/* On burgundy surfaces, switch focus colour to blush for contrast */
.hero :focus-visible,
.editorial :focus-visible,
.bespoke :focus-visible,
.site-footer :focus-visible,
.announcement :focus-visible,
.admin-sidebar :focus-visible {
outline-color: var(--blush);
}
.btn:focus-visible { outline-offset: 4px; }
/* Visually hidden — for screen-reader-only labels */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip link — appears only when focused */
.skip-link {
position: absolute;
top: 8px;
left: 8px;
z-index: 999;
padding: 10px 16px;
background: var(--burgundy);
color: var(--blush);
font-size: var(--text-xs);
letter-spacing: 0.24em;
text-transform: uppercase;
transform: translateY(-200%);
transition: transform 200ms var(--ease);
}
.skip-link:focus { transform: translateY(0); }
body {
font-family: var(--sans);
color: var(--ink);
background: var(--cream);
font-size: var(--text-base);
line-height: 1.65;
font-weight: 300;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
-webkit-tap-highlight-color: rgba(90, 16, 24, 0.12);
}
/* Section anchors clear the sticky header on scroll-to */
section[id] { scroll-margin-top: 90px; }
/* Touch optimisation on interactive surfaces */
.btn, .nav-link, .product-card, .filter-link, .pdp-size, .pdp-thumb, .icon-btn, .menu-toggle, .footer-col a, .pdp-accordion-trigger {
touch-action: manipulation;
}
/* Tabular numerals for price/data columns */
.product-price, .pdp-price, .stat-value, .admin-table td:last-child {
font-variant-numeric: tabular-nums;
}
/* height:auto is required: without it the HTML height attribute wins over a CSS width
and the image is stretched. Rules that need a fixed height set one explicitly. */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input { font: inherit; }
ul { list-style: none; }
::selection { background: var(--burgundy); color: var(--blush); }
/* ---------- Layout primitives ---------- */
.container {
max-width: var(--container);
margin: 0 auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--s-10);
}
.section-tight { padding-block: var(--s-9); }
/* ---------- Typography ---------- */
.eyebrow {
font-family: var(--sans);
font-size: var(--text-xs);
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--burgundy);
font-weight: 500;
margin-bottom: var(--s-5);
display: inline-block;
}
.eyebrow-light { color: var(--blush); opacity: 0.85; }
.h-display {
font-family: var(--serif-display);
font-size: var(--text-4xl);
font-weight: 400;
line-height: 1;
letter-spacing: 0.04em;
}
.h1, .h2, .h3 {
font-family: var(--serif);
font-weight: 400;
line-height: 1.15;
color: var(--burgundy);
letter-spacing: 0.015em;
}
.h1 { font-size: var(--text-3xl); }
.h2 { font-size: var(--text-3xl); }
.h3 { font-size: var(--text-xl); }
.lede {
font-family: var(--serif);
font-size: var(--text-lg);
font-style: italic;
color: var(--ink-soft);
line-height: 1.6;
max-width: 540px;
}
.body-text {
font-size: var(--text-base);
line-height: 1.85;
color: var(--ink-soft);
margin-bottom: var(--s-5);
max-width: 580px;
}
.link-arrow {
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--burgundy);
border-bottom: 1px solid currentColor;
padding-bottom: 4px;
display: inline-block;
font-weight: 500;
transition: color var(--t-fast), letter-spacing var(--t-med);
}
.link-arrow:hover { color: var(--ink); letter-spacing: 0.32em; }
/* ---------- Announcement ---------- */
.announcement {
background: var(--burgundy);
color: var(--blush);
text-align: center;
padding: 11px var(--s-5);
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
}
/* ---------- Header ---------- */
.site-header {
background: rgba(251, 246, 241, 0.96);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--line-soft);
position: sticky;
top: 0;
z-index: 100;
transition: box-shadow var(--t-med);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.nav {
max-width: var(--container);
margin-inline: auto;
padding: 18px var(--gutter);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
}
.nav-list {
display: flex;
gap: 30px;
align-items: center;
}
.nav-list.right { justify-content: flex-end; }
.nav-link {
font-size: var(--text-xs);
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 400;
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
left: 50%;
bottom: -6px;
width: 0;
height: 1px;
background: var(--burgundy);
transition: width var(--t-med), background-color var(--t-med);
transform: translateX(-50%);
}
.nav-link:hover { color: var(--burgundy); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.brand {
display: flex;
align-items: center;
justify-content: center;
}
.brand-img {
height: 28px;
width: auto;
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-soft);
transition: color var(--t-fast);
}
.icon-btn:hover { color: var(--burgundy); }
.menu-toggle {
display: none;
width: 36px;
height: 36px;
color: var(--ink);
}
.menu-toggle svg { width: 22px; height: 22px; }
/* Mobile menu overlay */
.mobile-menu {
display: none;
position: fixed;
inset: 0;
background: var(--cream);
z-index: 99;
padding: 90px var(--gutter) var(--s-7);
flex-direction: column;
gap: var(--s-3);
overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
font-family: var(--serif);
font-size: 26px;
color: var(--burgundy);
padding: 14px 0;
border-bottom: 1px solid var(--line);
letter-spacing: 0.02em;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-contact {
margin-top: var(--s-7);
padding-top: var(--s-5);
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: var(--s-3);
font-size: var(--text-sm);
color: var(--ink-soft);
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 36px;
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: background-color var(--t-med), color var(--t-med), border-color var(--t-med), letter-spacing var(--t-med);
text-decoration: none;
min-width: 200px;
}
.btn-primary {
background: var(--blush);
color: var(--burgundy);
border-color: var(--blush);
}
.btn-primary:hover {
background: transparent;
color: var(--blush);
border-color: var(--blush);
}
.btn-ghost {
background: transparent;
color: var(--blush);
border-color: rgba(229, 207, 197, 0.5);
}
.btn-ghost:hover {
background: var(--blush);
color: var(--burgundy);
border-color: var(--blush);
}
.btn-dark {
background: var(--burgundy);
color: var(--blush);
border-color: var(--burgundy);
}
.btn-dark:hover {
background: var(--burgundy-deep);
border-color: var(--burgundy-deep);
}
.btn-outline {
background: transparent;
color: var(--burgundy);
border-color: var(--burgundy);
}
.btn-outline:hover {
background: var(--burgundy);
color: var(--blush);
}
/* ---------- Hero — editorial split (image | burgundy panel) ---------- */
.hero {
position: relative;
min-height: clamp(640px, 100dvh, 920px);
display: grid;
grid-template-columns: 1.15fr 1fr;
overflow: hidden;
background: var(--burgundy);
color: var(--blush);
}
.hero-image-side {
position: relative;
overflow: hidden;
background: var(--blush-pale);
}
.hero-image-side img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top; /* her head sits 37px in; anything lower clips it */
transition: transform 1200ms var(--ease-out);
}
.hero-image-side:hover img { transform: scale(1.02); }
/* No inset frame over the photograph: a hairline across a model's face reads as a flaw. */
.hero-image-tag {
position: absolute;
left: 48px;
bottom: 48px;
z-index: 2;
color: var(--cream);
font-size: var(--text-xs);
letter-spacing: 0.34em;
text-transform: uppercase;
background: rgba(26, 10, 14, 0.4);
backdrop-filter: blur(6px) saturate(140%);
-webkit-backdrop-filter: blur(6px) saturate(140%);
padding: 10px 16px;
border: 1px solid rgba(251, 246, 241, 0.25);
}
.hero-image-tag a { color: inherit; display: inline-flex; align-items: center; gap: 10px; }
.hero-image-tag a::after { content: '→'; transition: transform var(--t-med); }
.hero-image-tag a:hover::after { transform: translateX(4px); }
.hero-text-side {
position: relative;
display: flex;
align-items: center;
padding: var(--s-8) var(--s-9);
}
.hero-text-side::before {
content: '';
position: absolute;
inset: 28px;
border: 1px solid rgba(229, 207, 197, 0.14);
pointer-events: none;
}
.hero-inner {
position: relative;
z-index: 2;
max-width: 460px;
}
.hero-eyebrow {
color: var(--blush);
opacity: 0.75;
margin-bottom: var(--s-6);
}
.hero-wordmark {
width: clamp(220px, 30vw, 340px);
height: auto;
margin-bottom: var(--s-5);
display: block;
}
.hero-tagline {
font-family: var(--serif);
font-style: italic;
font-size: clamp(22px, 1.9vw, 28px);
color: var(--blush);
margin-bottom: var(--s-4);
font-weight: 300;
line-height: 1.3;
}
.hero-description {
font-size: var(--text-md);
line-height: 1.85;
color: rgba(229, 207, 197, 0.75);
max-width: 380px;
margin: 0 0 var(--s-6);
}
.hero-actions {
display: flex;
flex-direction: column;
gap: var(--s-3);
align-items: flex-start;
margin-bottom: var(--s-8);
}
.hero-actions .btn { min-width: 240px; }
.hero-meta {
display: flex;
gap: var(--s-7);
padding-top: var(--s-5);
border-top: 1px solid rgba(229, 207, 197, 0.22);
font-size: var(--text-xs);
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(229, 207, 197, 0.88);
}
.hero-meta span { display: block; }
.hero-meta strong { color: var(--blush); font-weight: 400; display: block; margin-top: 6px; font-family: var(--serif); font-style: italic; letter-spacing: 0.04em; font-size: 13px; text-transform: none; opacity: 0.95; }
@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
min-height: auto;
}
.hero-image-side {
min-height: 60vh;
aspect-ratio: 3 / 4;
}
.hero-image-tag { left: 24px; bottom: 24px; }
.hero-text-side { padding: var(--s-8) var(--s-5); }
.hero-text-side::before { inset: 16px; }
.hero-inner { max-width: none; }
}
/* ---------- Section header ---------- */
.section-header {
text-align: center;
margin-bottom: var(--s-9);
max-width: 640px;
margin-inline: auto;
}
.section-header .lede { margin: var(--s-4) auto 0; max-width: 520px; }
/* ---------- Pillars (3-up values) ---------- */
.pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-7);
text-align: center;
}
.pillar {
padding: var(--s-5) var(--s-4);
border-left: 1px solid var(--line);
}
.pillar:first-child { border-left: none; }
.pillar-icon {
width: 32px;
height: 32px;
margin: 0 auto var(--s-5);
color: var(--burgundy);
}
.pillar h3 {
font-family: var(--serif);
font-size: var(--text-xl);
color: var(--burgundy);
margin-bottom: var(--s-3);
letter-spacing: 0.02em;
}
.pillar p {
font-size: var(--text-md);
color: var(--ink-soft);
line-height: 1.7;
max-width: 280px;
margin: 0 auto;
}
/* ---------- Product cards ---------- */
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-6) var(--s-5);
}
.product-card {
cursor: pointer;
text-decoration: none;
color: inherit;
display: block;
}
.product-image-wrap {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
margin-bottom: var(--s-4);
background: var(--blush-pale);
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
/* Top-aligned: these are full-length figures in a 3:4 box, so the excess
has to come off the hem, never off the model's head. */
object-position: 50% 0%;
transition: transform 800ms var(--ease-out);
}
.product-card:hover .product-image { transform: scale(1.04); }
.product-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(26, 10, 14, 0.45) 100%);
opacity: 0;
transition: opacity var(--t-med);
display: flex;
align-items: flex-end;
justify-content: center;
padding: var(--s-5);
}
.product-card:hover .product-overlay { opacity: 1; }
.product-overlay-text {
color: var(--blush);
font-size: var(--text-xs);
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 500;
}
.product-tag {
position: absolute;
top: var(--s-3);
left: var(--s-3);
background: var(--cream);
color: var(--burgundy);
padding: 6px 12px;
font-size: 9.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 500;
z-index: 2;
}
.product-name {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 400;
color: var(--burgundy);
letter-spacing: 0.02em;
margin-bottom: 2px;
}
.product-meta {
font-size: var(--text-xs);
color: var(--ink-mute);
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 8px;
}
.product-price {
font-size: var(--text-md);
color: var(--ink);
letter-spacing: 0.04em;
}
/* ---------- Atelier section ---------- */
.atelier {
background: var(--blush-pale);
}
.atelier-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-10);
align-items: center;
}
.atelier-image {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--blush);
}
.atelier-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0%;
}
/* Same rule as the hero: no inset frame over a photograph of a person.
Frames stay on the solid burgundy panels, where they cross nothing. */
.atelier-text .h2 { margin-bottom: var(--s-5); }
/* ---------- Editorial band ---------- */
.editorial {
position: relative;
background: var(--burgundy) url('assets/photo/brand-band.jpg') center/cover no-repeat;
color: var(--blush);
padding: var(--s-10) var(--gutter);
text-align: center;
isolation: isolate;
}
.editorial::after {
content: '';
position: absolute;
inset: 28px;
border: 1px solid rgba(229, 207, 197, 0.16);
pointer-events: none;
}
.editorial-inner {
position: relative;
z-index: 2;
max-width: 760px;
margin: 0 auto;
}
.editorial-mark {
width: clamp(150px, 16vw, 210px);
margin: 0 auto var(--s-5);
}
.editorial-mark img { width: 100%; }
.editorial-quote {
font-family: var(--serif);
font-style: italic;
font-size: clamp(22px, 2.8vw, 32px);
font-weight: 300;
line-height: 1.5;
color: var(--blush);
margin: var(--s-5) 0;
}
.editorial-attribution {
font-size: var(--text-xs);
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--blush);
opacity: 0.7;
margin-top: var(--s-5);
}
/* ---------- Lookbook ---------- */
.lookbook-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5);
}
.lookbook-card {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
cursor: pointer;
}
.lookbook-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 800ms var(--ease-out);
}
.lookbook-card:hover img { transform: scale(1.04); }
.lookbook-label {
position: absolute;
bottom: var(--s-5);
left: var(--s-5);
color: var(--cream);
z-index: 2;
}
.lookbook-label .eyebrow {
color: var(--blush);
margin-bottom: 4px;
font-size: 10px;
letter-spacing: 0.32em;
}
.lookbook-label .label {
font-family: var(--serif);
font-size: var(--text-xl);
color: var(--cream);
letter-spacing: 0.02em;
}
.lookbook-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(26, 10, 14, 0.5) 100%);
pointer-events: none;
}
/* ---------- Bespoke — hospitality band ---------- */
.bespoke {
position: relative;
background: var(--burgundy);
color: var(--blush);
padding: var(--s-10) var(--gutter);
isolation: isolate;
overflow: hidden;
}
.bespoke::before {
content: '';
position: absolute;
inset: 28px;
border: 1px solid rgba(229, 207, 197, 0.16);
pointer-events: none;
}
.bespoke::after {
/* Soft warm spotlight from upper-left to give the slab depth */
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 80% at 25% 30%, rgba(229, 207, 197, 0.08) 0%, transparent 60%);
pointer-events: none;
z-index: -1;
}
.bespoke-grid {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 620px);
position: relative;
z-index: 1;
}
.bespoke-text .eyebrow { color: var(--blush); opacity: 0.7; }
.h2-light {
font-family: var(--serif);
font-size: var(--text-3xl);
font-weight: 400;
line-height: 1.15;
color: var(--blush);
letter-spacing: 0.01em;
margin-bottom: var(--s-5);
}
.bespoke-body {
font-family: var(--serif);
font-style: italic;
font-size: var(--text-lg);
line-height: 1.7;
color: rgba(229, 207, 197, 0.78);
margin-bottom: var(--s-7);
max-width: 520px;
}
.bespoke-actions {
display: flex;
align-items: center;
gap: var(--s-7);
flex-wrap: wrap;
}
.link-arrow-light {
color: var(--blush);
border-color: rgba(229, 207, 197, 0.4);
}
.link-arrow-light:hover { color: var(--cream); border-color: var(--blush); }
@media (max-width: 900px) {
.bespoke { padding: var(--s-9) var(--s-4); }
.bespoke::before { inset: 16px; }
.bespoke-actions { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
}
/* ---------- Newsletter ---------- */
.newsletter {
background: var(--blush-pale);
}
.newsletter-inner {
max-width: 580px;
margin: 0 auto;
text-align: center;
}
.newsletter-inner .body-text { margin: var(--s-5) auto var(--s-7); }
.newsletter-form {
display: flex;
border-bottom: 1px solid var(--burgundy);
padding-bottom: var(--s-3);
gap: var(--s-3);
}
.newsletter-form input {
flex: 1;
border: none;
background: transparent;
font-size: var(--text-md);
padding: 8px 0;
color: var(--ink);
}
.newsletter-form input:focus-visible {
outline: none;
box-shadow: 0 1px 0 var(--burgundy);
}
.newsletter-form input::placeholder { color: var(--ink-mute); font-style: italic; }
.newsletter-form button {
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--burgundy);
font-weight: 500;
padding: 8px 4px;
transition: color var(--t-fast);
}
.newsletter-form button:hover { color: var(--ink); }
/* ---------- Footer ---------- */
.site-footer {
background: var(--burgundy);
color: var(--blush);
padding: var(--s-9) var(--gutter) var(--s-5);
}
.footer-inner { max-width: var(--container); margin-inline: auto; }
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: var(--s-7);
padding-bottom: var(--s-7);
border-bottom: 1px solid var(--line-dark);
}
.footer-logo {
width: 220px;
margin-bottom: var(--s-4);
}
.footer-tag {
font-style: italic;
font-size: var(--text-md);
color: rgba(229, 207, 197, 0.75);
font-family: var(--serif);
margin-bottom: var(--s-5);
}
.footer-contact {
display: flex;
flex-direction: column;
gap: var(--s-3);
font-size: var(--text-sm);
color: rgba(229, 207, 197, 0.85);
letter-spacing: 0.04em;
}
.footer-contact a { color: rgba(229, 207, 197, 0.85); }
.footer-contact a:hover { color: var(--blush); }
.footer-contact-item {
display: inline-flex;
align-items: center;
gap: 10px;
}
.footer-heading {
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
margin-bottom: var(--s-5);
color: var(--blush);
font-weight: 500;
}
.footer-col a {
display: block;
font-size: var(--text-sm);
color: rgba(229, 207, 197, 0.7);
margin-bottom: 10px;
}
.footer-col a:hover { color: var(--blush); }
.footer-base {
padding-top: var(--s-5);
display: flex;
justify-content: space-between;
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(229, 207, 197, 0.88);
}
/* ---------- Shop page ---------- */
.shop-hero {
background: var(--blush-pale);
padding: var(--s-9) var(--gutter) var(--s-7);
text-align: center;
border-bottom: 1px solid var(--line);
}
.shop-hero .h1 { margin-bottom: var(--s-4); }
.shop-filters {
background: var(--cream);
border-bottom: 1px solid var(--line);
padding: var(--s-5) var(--gutter);
position: sticky;
top: var(--header-h);
z-index: 50;
}
.shop-filters-inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-5);
}
.filter-list {
display: flex;
gap: var(--s-7);
flex-wrap: wrap;
}
.filter-link {
font-size: var(--text-xs);
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ink-soft);
padding-bottom: 4px;
}
.filter-link:hover { color: var(--burgundy); }
.filter-link.active {
color: var(--burgundy);
border-bottom: 1px solid var(--burgundy);
}
.filter-meta {
font-size: var(--text-xs);
color: var(--ink-mute);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.shop-grid {
max-width: var(--container);
margin: 0 auto;
padding: var(--s-9) var(--gutter) var(--s-10);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-7) var(--s-5);
}
.shop-grid .product-image-wrap { aspect-ratio: 4 / 5; }
/* ---------- Admin / Atelier Console ---------- */
.admin-shell {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100vh;
background: var(--cream);
}
.admin-sidebar {
background: var(--burgundy);
color: var(--blush);
padding: var(--s-6) var(--s-5);
border-right: 1px solid var(--burgundy-deep);
position: sticky;
top: 0;
align-self: start;
height: 100vh;
overflow-y: auto;
}
.admin-logo-img {
width: 110px;
margin-bottom: 6px;
filter: brightness(0) invert(1) sepia(0.18) saturate(0.7) hue-rotate(330deg);
}
.admin-logo-sub {
font-size: 9.5px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(229, 207, 197, 0.72); /* was 0.55 — failed WCAG AA on burgundy */
margin-bottom: var(--s-7);
}
.admin-nav {
display: flex;
flex-direction: column;
gap: 2px;
}
.admin-nav a {
font-size: var(--text-sm);
padding: 11px 14px;
color: rgba(229, 207, 197, 0.75);
transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
letter-spacing: 0.04em;
border-left: 2px solid transparent;
display: flex;
align-items: center;
gap: var(--s-3);
}
.admin-nav a:hover {
background: rgba(229, 207, 197, 0.06);
color: var(--blush);
}
.admin-nav a.active {
background: rgba(229, 207, 197, 0.1);
color: var(--blush);
border-left-color: var(--blush);
}
.admin-section-label {
font-size: 9px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(229, 207, 197, 0.66); /* was 0.4 — failed WCAG AA on burgundy */
margin: var(--s-5) 14px var(--s-3);
}
.admin-main {
padding: var(--s-7) var(--s-7);
overflow-x: hidden;
}
.admin-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-bottom: var(--s-5);
border-bottom: 1px solid var(--line);
margin-bottom: var(--s-7);
}
.admin-title {
font-family: var(--serif);
font-size: 36px;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--burgundy);
line-height: 1.1;
}
.admin-subtitle {
font-size: var(--text-xs);
color: var(--ink-mute);
letter-spacing: 0.28em;
text-transform: uppercase;
margin-top: 8px;
}
.admin-user { font-size: var(--text-sm); color: var(--ink-soft); text-align: right; }
.admin-user strong {
color: var(--burgundy);
font-weight: 400;
display: block;
font-size: var(--text-lg);
font-family: var(--serif);
margin-bottom: 2px;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-5);
margin-bottom: var(--s-7);
}
.stat-card {
background: var(--cream);
padding: var(--s-5) var(--s-5);
border: 1px solid var(--line);
transition: border-color var(--t-fast), box-shadow var(--t-med);
}
.stat-card:hover { border-color: var(--burgundy-soft); box-shadow: var(--shadow-md); }
.stat-label {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: var(--s-3);
}
.stat-value {
font-family: var(--serif);
font-size: 36px;
font-weight: 400;
color: var(--burgundy);
line-height: 1;
letter-spacing: 0.02em;
margin-bottom: 6px;
}
.stat-change {
font-size: var(--text-xs);
color: var(--burgundy);
letter-spacing: 0.04em;
}
.stat-change.down { color: #8f574f; } /* was #a0625a — 4.45:1 on cream, just under AA */
.admin-block {
background: var(--cream);
padding: var(--s-6);
border: 1px solid var(--line);
margin-bottom: var(--s-5);
}
.admin-block-title {
font-family: var(--serif);
font-size: var(--text-2xl);
font-weight: 400;
margin-bottom: var(--s-5);
color: var(--burgundy);
letter-spacing: 0.02em;
}
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
text-align: left;
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.admin-table td {
padding: 16px 0;
font-size: var(--text-md);
color: var(--ink);
border-bottom: 1px solid var(--line-soft);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(229, 207, 197, 0.08); }
.status-pill {
display: inline-block;
padding: 4px 12px;
font-size: 9.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
border-radius: 100px;
font-weight: 500;
}
.status-pill.shipped { background: rgba(90, 16, 24, 0.1); color: var(--burgundy); }
.status-pill.processing { background: rgba(168, 122, 114, 0.16); color: #6e3a35; }
.status-pill.delivered { background: rgba(26, 10, 14, 0.06); color: var(--ink); }
.admin-two-col {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--s-5);
}
/* ---------- Product detail page ---------- */
.pdp {
background: var(--cream);
padding: var(--s-7) 0 var(--s-9);
}
.pdp-breadcrumb {
font-size: var(--text-xs);
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: var(--s-7);
}
.pdp-breadcrumb a { color: var(--ink-mute); transition: color var(--t-fast); }
.pdp-breadcrumb a:hover { color: var(--burgundy); }
.pdp-breadcrumb .sep { margin: 0 8px; color: var(--line); }
.pdp-breadcrumb .current { color: var(--ink); }
.pdp-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--s-9);
align-items: start;
}
/* Image column */
.pdp-media {
position: sticky;
top: calc(var(--header-h) + 24px);
}
.pdp-image-wrap {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--blush-pale) top center/cover no-repeat;
cursor: zoom-in;
user-select: none;
background-size: cover;
transition: background-size 350ms var(--ease), background-position 50ms linear;
}
.pdp-image-wrap > img {
/* Hidden — image is shown via background-image. We keep an ![]()
for SEO/alt. */
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.pdp-image-wrap.zooming {
cursor: zoom-out;
background-size: 240%;
transition: background-size 80ms linear, background-position 60ms linear;
}
.pdp-thumbs {
display: flex;
gap: var(--s-3);
margin-top: var(--s-4);
}
.pdp-thumb {
width: 78px;
aspect-ratio: 3 / 4;
overflow: hidden;
cursor: pointer;
border: 1px solid transparent;
transition: border-color var(--t-fast);
background: var(--blush-pale);
flex-shrink: 0;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb.active { border-color: var(--burgundy); }
.pdp-thumb:hover { border-color: var(--burgundy-soft); }
/* Details column */
.pdp-details { padding-top: var(--s-3); }
.pdp-eyebrow {
font-size: var(--text-xs);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--burgundy);
margin-bottom: var(--s-4);
font-weight: 500;
}
.pdp-name {
font-family: var(--serif);
font-size: clamp(36px, 4vw, 48px);
color: var(--burgundy);
font-weight: 400;
line-height: 1.05;
letter-spacing: 0.02em;
margin-bottom: var(--s-3);
}
.pdp-meta {
font-size: var(--text-sm);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: var(--s-5);
}
.pdp-price {
font-family: var(--serif);
font-size: var(--text-2xl);
color: var(--ink);
margin-bottom: var(--s-7);
letter-spacing: 0.02em;
}
.pdp-description {
font-family: var(--serif);
font-size: var(--text-lg);
line-height: 1.7;
color: var(--ink-soft);
font-style: italic;
margin-bottom: var(--s-7);
max-width: 460px;
}
.pdp-section-label {
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: var(--s-3);
font-weight: 500;
}
.pdp-sizes {
display: flex;
gap: 8px;
margin-bottom: var(--s-7);
flex-wrap: wrap;
}
.pdp-size {
width: 48px;
height: 48px;
border: 1px solid var(--line);
background: var(--cream);
font-size: var(--text-sm);
color: var(--ink);
letter-spacing: 0.06em;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
font-family: var(--sans);
}
.pdp-size:hover { border-color: var(--burgundy-soft); }
.pdp-size.selected {
border-color: var(--burgundy);
background: var(--burgundy);
color: var(--blush);
}
.pdp-actions {
display: flex;
flex-direction: column;
gap: var(--s-3);
margin-bottom: var(--s-8);
}
.pdp-actions .btn { width: 100%; }
.pdp-accordion {
border-top: 1px solid var(--line);
}
.pdp-accordion-item {
border-bottom: 1px solid var(--line);
}
.pdp-accordion-trigger {
width: 100%;
text-align: left;
padding: var(--s-4) 0;
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink);
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: color var(--t-fast);
}
.pdp-accordion-trigger:hover { color: var(--burgundy); }
.pdp-accordion-trigger .plus {
width: 14px; height: 14px;
position: relative;
transition: transform var(--t-med);
}
.pdp-accordion-trigger .plus::before,
.pdp-accordion-trigger .plus::after {
content: '';
position: absolute;
background: currentColor;
transition: transform var(--t-med);
}
.pdp-accordion-trigger .plus::before {
top: 50%; left: 0; right: 0; height: 1px;
transform: translateY(-50%);
}
.pdp-accordion-trigger .plus::after {
left: 50%; top: 0; bottom: 0; width: 1px;
transform: translateX(-50%);
}
.pdp-accordion-item.open .plus::after { transform: translateX(-50%) scaleY(0); }
.pdp-accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height var(--t-med), padding var(--t-med);
}
.pdp-accordion-item.open .pdp-accordion-content {
max-height: 400px;
padding: 0 0 var(--s-5);
}
.pdp-accordion-content p {
font-size: var(--text-md);
line-height: 1.85;
color: var(--ink-soft);
}
.pdp-related-title {
text-align: center;
margin-bottom: var(--s-7);
}
.pdp-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5);
}
@media (max-width: 900px) {
.pdp-grid { grid-template-columns: 1fr; gap: var(--s-7); }
.pdp-media { position: static; }
.pdp-image-wrap { cursor: default; }
.pdp-image-wrap.zooming .pdp-image { transform: none; }
.pdp-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
.pdp-related-grid { grid-template-columns: 1fr; }
}
/* ---------- Reveal animation ---------- */
@media (prefers-reduced-motion: no-preference) {
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.in {
opacity: 1;
transform: none;
}
}
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.product-grid { grid-template-columns: repeat(3, 1fr); }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
.footer-grid .footer-col:last-child { display: none; }
.atelier-grid { gap: var(--s-7); }
}
@media (max-width: 900px) {
.nav-list { display: none; }
.menu-toggle { display: inline-flex; }
.nav { grid-template-columns: auto 1fr auto; }
.brand { justify-self: center; }
.nav-list.right { display: none; }
.nav .menu-toggle { justify-self: start; }
.product-grid { grid-template-columns: repeat(2, 1fr); }
.shop-grid { grid-template-columns: repeat(2, 1fr); }
.lookbook-grid { grid-template-columns: 1fr; }
.pillars { grid-template-columns: 1fr; gap: var(--s-5); }
.pillar { border-left: none; border-top: 1px solid var(--line); padding-top: var(--s-7); }
.pillar:first-child { border-top: none; padding-top: 0; }
.atelier-grid { grid-template-columns: 1fr; gap: var(--s-7); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-grid .footer-col:last-child { display: block; }
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.admin-two-col { grid-template-columns: 1fr; }
.admin-shell { grid-template-columns: 1fr; }
.admin-sidebar { position: relative; height: auto; padding: var(--s-5); }
.admin-main { padding: var(--s-5) var(--s-5); }
:root { --s-10: 88px; --s-9: 64px; }
}
@media (max-width: 580px) {
.product-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-3); }
.shop-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-3); padding-inline: var(--s-4); }
.footer-grid { grid-template-columns: 1fr; gap: var(--s-7); }
.footer-base { flex-direction: column; gap: var(--s-3); text-align: center; }
.hero-actions { flex-direction: column; align-items: center; }
.hero-actions .btn { width: 100%; max-width: 320px; }
.editorial { padding-inline: var(--s-4); }
.nav { padding: 14px var(--s-4); }
.container { padding-inline: var(--s-4); }
.admin-header { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.admin-user { text-align: left; }
:root { --gutter: 20px; }
}
/* === Enhancement layer === */
/* Appended additions only — no selector above this line was removed or renamed. */
/* -- Border-radius scale -- */
:root {
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-pill: 999px;
}
/* -- Hover polish: cards lift with shadow, buttons get tactile feedback -- */
.product-card {
transition: transform var(--t-med);
}
.product-card:hover { transform: translateY(-4px); }
.product-image-wrap {
transition: box-shadow var(--t-med);
}
.product-card:hover .product-image-wrap { box-shadow: var(--shadow-lg); }
.lookbook-card {
transition: transform var(--t-med), box-shadow var(--t-med);
}
.lookbook-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card { transition: border-color var(--t-fast), box-shadow var(--t-med), transform var(--t-med); }
.btn {
transition: background-color var(--t-med), color var(--t-med), border-color var(--t-med),
letter-spacing var(--t-med), transform var(--t-fast), box-shadow var(--t-med);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
/* -- Utilities -- */
/* .sr-only and .skip-link are defined near the top of this file. */
/* Standalone structure for .btn-primary / .btn-outline so they work without the
.btn base class. Values mirror .btn exactly — no change when combined. */
.btn-primary, .btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 36px;
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
border-width: 1px;
border-style: solid;
text-decoration: none;
min-width: 200px;
transition: background-color var(--t-med), color var(--t-med), border-color var(--t-med),
letter-spacing var(--t-med), transform var(--t-fast), box-shadow var(--t-med);
}
.btn-primary:hover, .btn-outline:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active, .btn-outline:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
font-family: var(--sans);
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
border-radius: var(--radius-pill);
background: var(--burgundy);
color: var(--blush-light);
border: 1px solid transparent;
}
.badge-soft {
background: var(--blush-pale);
color: var(--burgundy);
border-color: var(--line);
}
.badge-outline {
background: transparent;
color: var(--burgundy);
border-color: var(--burgundy-soft);
}
/* -- Responsive: ≤768px -- */
@media (max-width: 768px) {
section[id] { scroll-margin-top: 76px; }
.section { padding-block: var(--s-9); }
.section-tight { padding-block: var(--s-8); }
.section-header { margin-bottom: var(--s-7); }
.filter-list { gap: var(--s-5); }
.hero-meta { flex-wrap: wrap; gap: var(--s-5); }
.hero-text-side { padding: var(--s-7) var(--s-5); }
.atelier-image::after { inset: 16px; }
.editorial::after { inset: 16px; }
.pdp-thumbs { overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.newsletter-form input { min-width: 0; }
.admin-table { display: block; overflow-x: auto; }
}
/* -- Responsive: ≤480px -- */
@media (max-width: 480px) {
:root { --gutter: 16px; --s-9: 56px; --s-10: 72px; }
.nav { padding: 12px var(--s-4); gap: 16px; }
.brand-img { height: 24px; }
.announcement { font-size: 9.5px; letter-spacing: 0.18em; padding-inline: var(--s-3); }
.product-grid, .shop-grid { grid-template-columns: 1fr; gap: var(--s-6); }
.pdp-related-grid { gap: var(--s-6); }
.btn, .btn-primary, .btn-outline { min-width: 0; width: 100%; max-width: 340px; padding: 15px 28px; }
.hero-image-tag { left: 16px; bottom: 16px; padding: 8px 12px; letter-spacing: 0.26em; }
.hero-text-side { padding: var(--s-7) var(--s-4); }
.hero-meta { gap: var(--s-4); letter-spacing: 0.24em; }
.mobile-menu a { font-size: 22px; padding: 12px 0; }
.footer-logo { width: 180px; }
.filter-list { gap: var(--s-4); }
.stat-grid { grid-template-columns: 1fr; }
.admin-main { padding: var(--s-4); }
}
/* === Cinematic layer === */
/* Depth, entrance choreography, and cross-page continuity.
All motion is gated behind prefers-reduced-motion: no-preference. */
/* Cross-page fade (MPA view transitions — progressive enhancement, Chromium 126+) */
@view-transition { navigation: auto; }
/* Legibility scrim behind the hero image tag */
.hero-image-side::before {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 32%;
background: linear-gradient(to top, rgba(26, 10, 14, 0.32), transparent);
pointer-events: none;
z-index: 1;
}
/* Editorial band: deepened vignette so the quote sits in light */
.editorial {
background-image:
radial-gradient(ellipse at center, rgba(26, 10, 14, 0) 35%, rgba(26, 10, 14, 0.38) 100%),
url('assets/photo/brand-band.jpg');
}
/* Nav compresses once scrolled — quiet hotel-lobby restraint */
.nav { transition: padding 320ms var(--ease); }
.brand-img { transition: height 320ms var(--ease); }
.site-header.scrolled .nav { padding-top: 12px; padding-bottom: 12px; }
.site-header.scrolled .brand-img { height: 24px; }
/* Product imagery: subtle light lift on hover */
.product-image { transition: transform 800ms var(--ease-out), filter 800ms var(--ease-out); }
.product-card:hover .product-image { filter: brightness(1.04); }
@media (prefers-reduced-motion: no-preference) {
/* Hero image settles from a gentle zoom — image stays painted from
first frame (transform only) so LCP is unaffected */
@keyframes heroSettle {
from { transform: scale(1.06); }
to { transform: scale(1); }
}
@keyframes riseIn {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-image-side img { animation: heroSettle 1.9s var(--ease-out) 0.1s backwards; }
.hero-image-tag { animation: riseIn 0.9s var(--ease-out) 0.95s backwards; }
/* Text side cascades in: eyebrow, wordmark, tagline, copy, CTA, meta */
.hero-inner > * { animation: riseIn 0.9s var(--ease-out) backwards; }
.hero-inner > :nth-child(1) { animation-delay: 0.15s; }
.hero-inner > :nth-child(2) { animation-delay: 0.27s; }
.hero-inner > :nth-child(3) { animation-delay: 0.39s; }
.hero-inner > :nth-child(4) { animation-delay: 0.51s; }
.hero-inner > :nth-child(5) { animation-delay: 0.63s; }
.hero-inner > :nth-child(6) { animation-delay: 0.75s; }
/* Featured grid: cards cascade as the section reveals (below fold on index) */
.reveal .product-grid > * {
opacity: 0;
transform: translateY(18px);
transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.in .product-grid > * { opacity: 1; transform: none; }
.reveal.in .product-grid > :nth-child(1) { transition-delay: 90ms; }
.reveal.in .product-grid > :nth-child(2) { transition-delay: 180ms; }
.reveal.in .product-grid > :nth-child(3) { transition-delay: 270ms; }
.reveal.in .product-grid > :nth-child(4) { transition-delay: 360ms; }
/* Shop hero: quiet entrance on load */
.shop-hero > :nth-child(1) { animation: riseIn 0.85s var(--ease-out) 0.05s backwards; }
.shop-hero > :nth-child(2) { animation: riseIn 0.85s var(--ease-out) 0.15s backwards; }
.shop-hero > :nth-child(3) { animation: riseIn 0.85s var(--ease-out) 0.25s backwards; }
}
/* -- Reduced motion: honour user preference (WCAG 2.3.3) -- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
.product-card:hover,
.lookbook-card:hover,
.stat-card:hover,
.btn:hover, .btn-primary:hover, .btn-outline:hover {
transform: none;
}
.hero-image-side:hover img,
.product-card:hover .product-image,
.lookbook-card:hover img {
transform: none;
}
}
/* ---------- Sticky WhatsApp bar — phones only ---------- */
.sticky-cta { display: none; }
@media (max-width: 768px) {
.sticky-cta {
display: block;
position: fixed;
inset: auto 0 0 0;
z-index: 90;
background: var(--burgundy);
border-top: 1px solid var(--burgundy-deep);
padding: 10px var(--s-4) calc(10px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -8px 28px rgba(26, 10, 14, 0.22);
}
.sticky-cta a {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 44px;
color: var(--cream);
font-family: var(--sans);
font-size: var(--text-xs);
letter-spacing: 0.2em;
text-transform: uppercase;
}
/* Never sit on top of the last line of the page, or over the open menu. */
body { padding-bottom: 72px; }
.mobile-menu.open ~ .sticky-cta { display: none; }
}
/* ---------- Plain text pages: privacy, 404 ---------- */
.page-hero {
background: var(--blush-pale);
text-align: center;
padding: var(--s-9) var(--gutter) var(--s-8);
}
.prose {
max-width: 720px;
margin-inline: auto;
padding: var(--s-8) var(--gutter) var(--s-9);
}
.prose h2 {
font-family: var(--serif-display);
font-size: var(--text-xl);
color: var(--burgundy);
margin-top: var(--s-7);
margin-bottom: var(--s-3);
font-weight: 400;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li {
font-family: var(--sans);
font-size: var(--text-sm);
line-height: 1.85;
color: var(--ink-soft);
margin-bottom: var(--s-3);
}
.prose ul { padding-inline-start: 1.2em; margin-bottom: var(--s-4); }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--burgundy); text-decoration: underline; text-underline-offset: 3px; }
.page-updated {
margin-top: var(--s-7);
padding-top: var(--s-4);
border-top: 1px solid var(--line);
font-size: var(--text-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-mute);
}
.notfound {
min-height: 64vh;
display: grid;
place-content: center;
text-align: center;
padding: var(--s-9) var(--gutter);
}
.notfound .h1 { margin-bottom: var(--s-4); }
.notfound-code {
font-family: var(--serif-display);
font-size: clamp(72px, 14vw, 150px);
line-height: 1;
color: var(--blush);
margin-bottom: var(--s-4);
}
.notfound-links {
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
justify-content: center;
margin-top: var(--s-6);
}
/* A short collection should not leave empty columns behind it. */
.product-grid:has(> :nth-child(2):last-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 760px;
margin-inline: auto;
}
.product-grid:has(> :first-child:last-child) {
grid-template-columns: minmax(0, 360px);
justify-content: center;
}
/* ---------- Instagram rail ---------- */
.instagram { background: var(--cream); }
.ig-head { text-align: center; margin-bottom: var(--s-7); }
.ig-handle {
font-family: 'Italiana', serif; /* the handle stays Latin in both languages */
font-weight: 400;
font-size: var(--text-3xl);
line-height: 1.1;
letter-spacing: 0.02em;
color: var(--burgundy);
margin: var(--s-3) 0;
direction: ltr;
unicode-bidi: isolate;
}
.ig-handle a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
.ig-handle a:hover { color: var(--burgundy-soft); }
.ig-lede {
font-family: var(--serif);
font-style: italic;
font-size: var(--text-lg);
color: var(--ink-soft);
margin: 0;
}
.ig-rail {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--s-3);
align-items: start;
}
.ig-tile {
position: relative;
display: block;
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--blush-pale);
}
/* Hung at alternating heights, like the rail the pieces were photographed on. */
.ig-tile:nth-child(even) { margin-top: var(--s-6); }
.ig-tile img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0%;
transition: transform 900ms var(--ease-out);
}
.ig-tile::after {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 0 0 0 rgba(229, 207, 197, 0);
transition: box-shadow var(--t-med);
pointer-events: none;
}
.ig-tile:hover img { transform: scale(1.04); }
.ig-tile:hover::after { box-shadow: inset 0 0 0 6px rgba(229, 207, 197, 0.9); }
.ig-cta { text-align: center; margin-top: var(--s-7); }
.ig-cta .btn { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 900px) {
.ig-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.ig-tile:nth-child(even) { margin-top: 0; }
.ig-tile:nth-child(3n+2) { margin-top: var(--s-5); }
}
@media (prefers-reduced-motion: reduce) {
.ig-tile img, .ig-tile::after { transition: none; }
.ig-tile:hover img { transform: none; }
}
.prose ol { padding-inline-start: 1.3em; margin-bottom: var(--s-4); }
.pdp-accordion-content a { color: var(--burgundy); text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Hero slideshow: the collection, unveiled one piece at a time ---------- */
.hero-slides {
--hero-interval: 5.5s;
--hero-reveal: 1.3s;
--hero-ease: cubic-bezier(0.77, 0, 0.18, 1);
isolation: isolate;
}
.hero-slide {
position: absolute;
inset: 0;
display: block;
z-index: 1;
visibility: hidden;
}
.hero-slide.is-active,
.hero-slide.is-leaving { visibility: visible; }
.hero-slide.is-active { z-index: 2; }
.hero-slide.is-entering {
z-index: 3;
animation: heroReveal var(--hero-reveal) var(--hero-ease) both;
}
/* supersede the single-photograph hero: no settle, no hover zoom */
.hero-slides .hero-slide img { animation: none; }
.hero-slides:hover .hero-slide img { transform: none; }
/* one continuous drift from a close crop, kept running while the next piece is unveiled over it */
.hero-slide.is-active img,
.hero-slide.is-leaving img {
animation: heroDrift calc(var(--hero-interval) + var(--hero-reveal)) linear both;
}
.hero-slide.is-leaving img {
filter: brightness(0.8);
transition: filter var(--hero-reveal) var(--hero-ease);
}
@keyframes heroReveal {
from { clip-path: inset(0 0 0 100%); }
to { clip-path: inset(0 0 0 0); }
}
@keyframes heroDrift {
from { transform: scale(1.12); }
to { transform: scale(1); }
}
/* the edge of light travelling with the reveal, and the soft shadow it casts on the new piece */
.hero-wipe {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: 0;
transform: translateX(100%);
}
.hero-wipe::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2px;
background: var(--blush);
box-shadow: 0 0 22px 2px rgba(229, 207, 197, 0.7);
}
.hero-wipe::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 2px;
width: 180px;
background: linear-gradient(to right, rgba(90, 16, 24, 0.42), rgba(90, 16, 24, 0));
}
.hero-wipe.is-running { animation: heroWipe var(--hero-reveal) var(--hero-ease) both; }
@keyframes heroWipe {
0% { transform: translateX(100%); opacity: 1; }
90% { opacity: 1; }
100% { transform: translateX(0); opacity: 0; }
}
/* the scrim and the tag sit above the slides */
.hero-slides::before { z-index: 5; }
.hero-slides .hero-image-tag { z-index: 6; pointer-events: none; }
.hero-tag-text {
display: inline-flex;
align-items: center;
gap: 10px;
transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.hero-tag-text::after { content: '\2192'; }
.hero-tag-text.is-swapping { opacity: 0; transform: translateY(6px); }
/* story-style progress: one bar per piece */
.hero-progress {
position: absolute;
z-index: 7;
right: 48px;
bottom: 57px;
display: none;
align-items: center;
gap: 6px;
}
.hero-slides.is-ready .hero-progress { display: flex; }
.hero-dot {
width: 30px;
height: 22px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
display: flex;
align-items: center;
}
.hero-dot-track {
position: relative;
display: block;
width: 100%;
height: 2px;
overflow: hidden;
background: rgba(251, 246, 241, 0.35);
transition: background var(--t-fast);
}
.hero-dot:hover .hero-dot-track { background: rgba(251, 246, 241, 0.6); }
.hero-dot-fill {
position: absolute;
inset: 0;
background: var(--cream);
transform: scaleX(0);
transform-origin: left center;
}
.hero-dot.is-done .hero-dot-fill { transform: scaleX(1); }
.hero-dot.is-active .hero-dot-fill { animation: heroFill var(--hero-interval) linear forwards; }
@keyframes heroFill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.hero-pause {
width: 26px;
height: 22px;
margin-inline-start: 6px;
padding: 0;
border: 0;
background: none;
color: var(--cream);
cursor: pointer;
display: grid;
place-items: center;
opacity: 0.85;
}
.hero-pause:hover { opacity: 1; }
.hero-pause svg { width: 11px; height: 11px; grid-area: 1 / 1; }
.hero-pause .icon-play { display: none; }
.hero-slides.is-user-paused .hero-pause .icon-play { display: block; }
.hero-slides.is-user-paused .hero-pause .icon-pause { display: none; }
/* holding still: hover, focus, the pause button, or a hidden tab */
.hero-slides.is-paused .hero-dot.is-active .hero-dot-fill,
.hero-slides.is-paused .hero-slide.is-active img { animation-play-state: paused; }
/* right-to-left: the curtain comes from the other side, where the panel sits */
[dir="rtl"] .hero-slide.is-entering { animation-name: heroRevealRtl; }
@keyframes heroRevealRtl {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
[dir="rtl"] .hero-wipe { transform: translateX(-100%); }
[dir="rtl"] .hero-wipe::before { left: auto; right: 0; }
[dir="rtl"] .hero-wipe::after {
left: auto;
right: 2px;
background: linear-gradient(to left, rgba(90, 16, 24, 0.42), rgba(90, 16, 24, 0));
}
[dir="rtl"] .hero-wipe.is-running { animation-name: heroWipeRtl; }
@keyframes heroWipeRtl {
0% { transform: translateX(-100%); opacity: 1; }
90% { opacity: 1; }
100% { transform: translateX(0); opacity: 0; }
}
[dir="rtl"] .hero-tag-text::after { content: '\2190'; }
[dir="rtl"] .hero-progress { right: auto; left: 48px; }
[dir="rtl"] .hero-dot-fill { transform-origin: right center; }
/* phones: the bars stretch across the width just above the piece's name, over the
darkened hem, never across the model's face or hair */
@media (max-width: 900px) {
.hero-progress,
[dir="rtl"] .hero-progress { top: auto; bottom: 76px; left: 24px; right: 24px; gap: 4px; }
.hero-dot { flex: 1; width: auto; }
}
@media (max-width: 580px) {
.hero-progress,
[dir="rtl"] .hero-progress { bottom: 60px; left: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.hero-slide.is-entering { animation: none; }
.hero-slide.is-active img,
.hero-slide.is-leaving img { animation: none; filter: none; }
.hero-wipe { display: none; }
.hero-dot.is-active .hero-dot-fill { animation: none; transform: scaleX(1); }
.hero-pause { display: none; }
.hero-tag-text { transition: none; }
}
/* ---------- Hero: exactly one screen on desktop ----------
The hero sits below the announcement bar and the header, so a plain 100vh ran
about 100px past the fold and hid the piece's name and the slideshow controls. */
@media (min-width: 901px) {
.hero { min-height: clamp(500px, calc(100svh - var(--hero-top, 104px)), 1100px); }
}
/* shorter laptop screens: tighten the text column so it still fits in one screen */
@media (min-width: 901px) and (max-height: 820px) {
.hero-text-side { padding-block: var(--s-6); }
.hero-text-side::before { inset: 16px; }
.hero-eyebrow { margin-bottom: var(--s-4); }
.hero-wordmark { width: clamp(200px, 22vw, 280px); margin-bottom: var(--s-4); }
.hero-description { margin-bottom: var(--s-5); }
.hero-actions { margin-bottom: var(--s-6); }
.hero-meta { padding-top: var(--s-4); }
}
@media (min-width: 901px) and (max-height: 660px) {
.hero-meta { display: none; }
.hero-actions { margin-bottom: 0; }
}
/* ============================================================================
Hero transition: OVAL IRIS. The Nayya double oval opens on the abaya and
reveals the next piece. Replaces the curtain wipe above (its rules are
overridden here). Chosen from six rendered designs and three judges.
============================================================================ */
/* ---------- Hero slideshow: OVAL IRIS (v3) ----------
The Nayya mark, two fine crossing ovals with the logo's small four-point stars, opens on
the abaya's chest and shows the new cloth through a small window. It breathes, draws in
a touch, gathers speed and SNAPS open past her face in one cut (no frame ever holds an
edge across her face), then glides out to the corners with a single fading hairline.
The outgoing piece falls back into a light warm shade that lifts again as the iris gathers.
Geometry is anchored to the PHOTOGRAPH, not the box. Every photo is fitted to the width of
the box and pinned to the top (object-fit: cover, object-position: top), so her face always
sits at the same share of the box WIDTH: crown at 0-4%, chin at 16-19%. Sizes and the centre
of the oval are therefore in cqw (the box is a size container), and the oval keeps one
fixed aspect at every screen shape.
Three numbers drive it, animated identically on the incoming slide (its mask) and on the
layer that carries the rings and glows:
--iris-r the small window's radius, in box widths (the opening, the breath, the
anticipation). It never exceeds the cap: the window's top edge stays below
28% of the width (on the chest, well clear of her chin) and its foot inside
the frame.
--iris-p 0 -> 1 as the window gathers speed and grows to exactly that cap, arriving at
the moment of the cut on every screen (no stall before the snap).
--iris-g after the cut: where the top of the oval stands, in box widths from the top
of the box (negative = above the photo). Before the cut it is parked at 1. */
@property --iris-r {
syntax: '';
inherits: true;
initial-value: 0;
}
@property --iris-p {
syntax: '';
inherits: true;
initial-value: 0;
}
@property --iris-g {
syntax: '';
inherits: true;
initial-value: 1;
}
@property --iris-fill {
syntax: '';
inherits: false;
initial-value: 0;
}
.hero-slides {
--hero-reveal: 1.5s;
/* a size container, so the oval can be measured in the photo's own units. The box is
sized by the grid (and by aspect-ratio on phones) and has no in-flow content, so this
changes no layout: checked at six screen sizes, both languages. */
container-type: size;
/* the centre of the oval: on the torso. On short, wide boxes (laptop windows,
ultrawides) the frame ends at her waist, so the centre rises to sit midway between
her collarbone and the foot of the frame */
--iris-cy: min(56cqw, 13cqw + 50cqh);
/* the oval's width as a share of its height: the proportion of the mark */
--iris-k: 0.72;
}
/* the radius actually drawn (declared where the numbers animate, so the children inherit
the live value) */
.hero-slide.is-entering,
.hero-slides .hero-wipe {
--iris-cap: min(var(--iris-cy) - 28cqw, 100cqh - var(--iris-cy) - 3cqw);
--iris-sig: min(var(--iris-r) * 100cqw, var(--iris-cap));
--iris-R: max(var(--iris-sig) + var(--iris-p) * (var(--iris-cap) - var(--iris-sig)),
var(--iris-cy) - var(--iris-g) * 100cqw);
}
/* ---- the opening (percentages of --hero-reveal, 1.5 s)
0-140 ms the mark opens on the abaya's chest
140-330 ms it breathes; the stars twinkle once
330-400 ms it draws in by about 4% (the anticipation)
400-470 ms it gathers speed; its top edge rises towards the collarbone, never higher
470 ms the cut: in one step the oval stands clear above her crown
470-800 ms it glides out through the corners, decelerating, a hairline riding its edge */
@keyframes heroIrisGrow {
0% { --iris-r: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
9.33% { --iris-r: 0.16; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
22% { --iris-r: 0.167; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
26.67% { --iris-r: 0.16; }
100% { --iris-r: 0.16; }
}
/* gathering speed: an ease-in that is still accelerating when the cut comes */
@keyframes heroIrisGather {
0%, 26.67% { --iris-p: 0; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.5); }
31.33%, 100% { --iris-p: 1; }
}
/* a true cut (step-end): no rendered frame, at any frame rate, can show the soft edge
part-way across her face. 0.11 above the photo puts even the inner edge of the soft rim
(93% of the radius) clear of her crown on every screen */
@keyframes heroIrisCut {
0% { --iris-g: 1; animation-timing-function: step-end; }
31.33% { --iris-g: -0.11; animation-timing-function: cubic-bezier(0.1, 0.5, 0.3, 1); }
62% { --iris-g: -0.5; animation-timing-function: linear; }
100% { --iris-g: -0.62; }
}
/* whatever the oval has not reached dissolves to the new piece: gone by 60% */
@keyframes heroIrisFill {
0%, 40% { --iris-fill: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
60%, 100% { --iris-fill: 1; }
}
/* the incoming piece: seen through the soft-edged oval, plus the corner dissolve */
.hero-slide.is-entering,
[dir="rtl"] .hero-slide.is-entering {
animation: heroIrisGrow var(--hero-reveal) linear both,
heroIrisGather var(--hero-reveal) linear both,
heroIrisCut var(--hero-reveal) linear both,
heroIrisFill var(--hero-reveal) linear both;
-webkit-mask-image: radial-gradient(closest-side, #000 93%, transparent 100%),
linear-gradient(rgba(0, 0, 0, var(--iris-fill)), rgba(0, 0, 0, var(--iris-fill)));
mask-image: radial-gradient(closest-side, #000 93%, transparent 100%),
linear-gradient(rgba(0, 0, 0, var(--iris-fill)), rgba(0, 0, 0, var(--iris-fill)));
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 50% calc(var(--iris-cy) - var(--iris-R)), 0 0;
mask-position: 50% calc(var(--iris-cy) - var(--iris-R)), 0 0;
-webkit-mask-size: calc(2 * var(--iris-k) * var(--iris-R)) calc(2 * var(--iris-R)), 100% 100%;
mask-size: calc(2 * var(--iris-k) * var(--iris-R)) calc(2 * var(--iris-R)), 100% 100%;
}
/* the outgoing piece falls back into a light, warm shade (the filter sits on the slide, so
it covers every pixel the drifting photo draws: no untinted margin at the edges), then
the shade lifts again while the iris gathers, so the cut is not a flash. It shrinks
about the point the photo drifts about (1.04 x 0.962 >= 1, so no edge ever shows) and
is gone by 62%. */
.hero-slide.is-leaving {
transform-origin: 50% 8%;
animation: heroIrisRecede var(--hero-reveal) linear both,
heroIrisShade var(--hero-reveal) linear both;
}
.hero-slide.is-leaving img { filter: none; transition: none; }
.hero-slide.is-leaving::after { content: none; }
@keyframes heroIrisRecede {
0% { transform: scale(1); opacity: 1;
animation-timing-function: cubic-bezier(0.3, 0.55, 0.35, 1); }
32% { transform: scale(0.972); opacity: 1;
animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1); }
60% { transform: scale(0.962); opacity: 1; }
62% { transform: scale(0.962); opacity: 0; }
100% { transform: scale(0.962); opacity: 0; }
}
@keyframes heroIrisShade {
0% { filter: brightness(1) sepia(0); animation-timing-function: cubic-bezier(0.3, 0.55, 0.35, 1); }
10% { filter: brightness(0.86) sepia(0.12); animation-timing-function: linear; }
22% { filter: brightness(0.86) sepia(0.12); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
31.33% { filter: brightness(0.93) sepia(0.07); }
100% { filter: brightness(0.93) sepia(0.07); }
}
/* the photograph itself: arrives a touch close and settles (the scale property), then breathes
slowly while it is shown (transform). The two compose. Scaled about a point just above her
face, so the head never slips out of the top. */
.hero-slide.is-active img,
.hero-slide.is-leaving img {
transform-origin: 50% 8%;
animation: heroIrisArrive var(--hero-reveal) cubic-bezier(0.2, 0.7, 0.2, 1) both,
heroIrisDrift calc(var(--hero-interval) + var(--hero-reveal)) linear both;
}
/* hover, focus or the pause button hold the slow drift, never the arrival */
.hero-slides.is-paused .hero-slide.is-active img { animation-play-state: running, paused; }
@keyframes heroIrisArrive {
from { scale: 1.075; }
to { scale: 1; }
}
@keyframes heroIrisDrift {
from { transform: scale(1.08); }
to { transform: scale(1.04); }
}
/* ---- the mark and its light live in .hero-wipe. The layer is masked away around her head
(in photo units, so the safe zone follows her at every screen shape), and it fades over
the hem so nothing hazes the dark cloth at the foot of the photo. */
.hero-slides .hero-wipe,
.hero-slides .hero-wipe.is-running {
opacity: 1;
transform: none;
animation: none;
-webkit-mask-image: radial-gradient(ellipse 24cqw 21cqw at 50% 10cqw, transparent 55%, #000 100%),
linear-gradient(#000 68%, rgba(0, 0, 0, 0.25) 96%);
mask-image: radial-gradient(ellipse 24cqw 21cqw at 50% 10cqw, transparent 55%, #000 100%),
linear-gradient(#000 68%, rgba(0, 0, 0, 0.25) 96%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.hero-slides .hero-wipe.is-running {
animation: heroIrisGrow var(--hero-reveal) linear both,
heroIrisGather var(--hero-reveal) linear both,
heroIrisCut var(--hero-reveal) linear both;
}
/* right to left: the mark is mirrored, so its stars and its turn run the other way */
[dir="rtl"] .hero-slides .hero-wipe,
[dir="rtl"] .hero-slides .hero-wipe.is-running { transform: scaleX(-1); }
.hero-slides .hero-wipe::before,
.hero-slides .hero-wipe::after,
[dir="rtl"] .hero-slides .hero-wipe::before,
[dir="rtl"] .hero-slides .hero-wipe::after { content: none; }
/* two fine glows, both drawn OUTSIDE the window's edge so the cloth is always seen clean.
Each box is 1.2x the oval, so the oval's edge sits at 83.3% of it and its soft rim at
77.5-83.3%: the glows start at 82.5% and peak just outside the edge. The signature glow: a thin cream rim on the small window. The after-glow: an
even thinner, fainter one that follows the edge for a moment after the cut. */
.hero-slides .iris-glow,
.hero-slides .iris-halo {
position: absolute;
left: 50%;
top: var(--iris-cy);
width: calc(2.4 * var(--iris-k) * var(--iris-R));
height: calc(2.4 * var(--iris-R));
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
}
.hero-slides .iris-glow {
background: radial-gradient(closest-side,
rgba(251, 246, 241, 0) 82.5%,
rgba(251, 246, 241, 0.46) 85.3%,
rgba(243, 227, 218, 0.14) 88.5%,
rgba(229, 207, 197, 0) 93%);
}
.hero-slides .iris-halo {
background: radial-gradient(closest-side,
rgba(251, 246, 241, 0) 82%,
rgba(251, 246, 241, 0.4) 84.3%,
rgba(251, 246, 241, 0) 87%);
}
.hero-slides .hero-wipe.is-running .iris-glow { animation: heroIrisGlow var(--hero-reveal) linear both; }
.hero-slides .hero-wipe.is-running .iris-halo { animation: heroIrisHalo var(--hero-reveal) linear both; }
/* the rim thins as the iris gathers speed, and leaves with the cut */
@keyframes heroIrisGlow {
0% { opacity: 0; }
6% { opacity: 1; }
26.67% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.9, 0.6); }
31.3% { opacity: 0.45; animation-timing-function: step-end; }
31.33% { opacity: 0; }
100% { opacity: 0; }
}
/* eases in over 75 ms after the cut instead of snapping on */
@keyframes heroIrisHalo {
0%, 31.33% { opacity: 0; animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1); }
36.33% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
42% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
54%, 100% { opacity: 0; }
}
/* the double oval: two hairlines drawn as SVG ellipses (clean anti-aliased strokes), riding
just outside the opening edge, tilted opposite ways and turning past each other like the
orbits of the mark. After the cut the first one stays on as a single hairline that
expands with the edge and fades; the second leaves at once. */
.hero-slides .iris-ring {
position: absolute;
left: 50%;
top: var(--iris-cy);
opacity: 0;
transform: translate(-50%, -50%);
pointer-events: none;
}
.hero-slides .iris-ring svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.hero-slides .iris-ring ellipse {
fill: none;
stroke: rgba(251, 246, 241, 0.86);
stroke-width: 1.35px;
shape-rendering: geometricPrecision;
}
.hero-slides .iris-ring-b ellipse { stroke: rgba(243, 227, 218, 0.78); stroke-width: 1.2px; }
.hero-slides .iris-ring-a {
width: calc(2 * var(--iris-k) * var(--iris-R) + 10px);
height: calc(2 * var(--iris-R) + 10px);
}
.hero-slides .iris-ring-b {
width: calc(2 * var(--iris-k) * var(--iris-R) + 30px);
height: calc(2 * var(--iris-R) + 30px);
}
.hero-slides .hero-wipe.is-running .iris-ring-a {
animation: heroIrisTurnA var(--hero-reveal) cubic-bezier(0.3, 0.2, 0.2, 1) both,
heroIrisRingA var(--hero-reveal) linear both;
}
.hero-slides .hero-wipe.is-running .iris-ring-b {
animation: heroIrisTurnB var(--hero-reveal) cubic-bezier(0.3, 0.2, 0.2, 1) both,
heroIrisRingB var(--hero-reveal) linear both;
}
@keyframes heroIrisTurnA {
from { rotate: -14deg; }
to { rotate: 2deg; }
}
@keyframes heroIrisTurnB {
from { rotate: 15deg; }
to { rotate: -3deg; }
}
@keyframes heroIrisRingA {
0% { opacity: 0; }
5% { opacity: 1; }
43% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
55%, 100% { opacity: 0; }
}
@keyframes heroIrisRingB {
0% { opacity: 0; }
5% { opacity: 1; }
31.33% { opacity: 1; animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); }
35%, 100% { opacity: 0; }
}
/* the small four-point star of the mark rides each ring, as on the logo: upper left on the
first oval, lower right on the second. Fine and small, with one soft twinkle. */
.hero-slides .iris-ring::before,
.hero-slides .iris-ring::after {
content: '';
position: absolute;
left: 6.7%;
top: 25%;
transform: translate(-50%, -50%);
opacity: 0;
}
.hero-slides .iris-ring-b::before,
.hero-slides .iris-ring-b::after { left: 93.3%; top: 75%; }
/* an astroid: the curved-sided star of the logo */
.hero-slides .iris-ring::before {
width: 9px;
height: 9px;
background: #FBF6F1;
clip-path: polygon(100% 50%, 95.1% 49.1%, 82.5% 43.8%, 67.7% 32.3%, 56.3% 17.5%, 50.9% 4.9%,
50% 0%, 49.1% 4.9%, 43.8% 17.5%, 32.3% 32.3%, 17.5% 43.7%, 4.9% 49.1%, 0% 50%, 4.9% 50.9%,
17.5% 56.2%, 32.3% 67.7%, 43.7% 82.5%, 49.1% 95.1%, 50% 100%, 50.9% 95.1%, 56.2% 82.5%,
67.7% 67.7%, 82.5% 56.3%, 95.1% 50.9%);
z-index: 1;
}
.hero-slides .iris-ring-b::before { width: 7px; height: 7px; background: #F3E3DA; }
/* a breath of light behind the star, only during its twinkle */
.hero-slides .iris-ring::after {
width: 14px;
height: 14px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(251, 246, 241, 0.7), rgba(251, 246, 241, 0));
}
.hero-slides .hero-wipe.is-running .iris-ring::before { animation: heroIrisStar var(--hero-reveal) linear both; }
.hero-slides .hero-wipe.is-running .iris-ring::after { animation: heroIrisGlint var(--hero-reveal) linear both; }
.hero-slides .hero-wipe.is-running .iris-ring-b::before,
.hero-slides .hero-wipe.is-running .iris-ring-b::after { animation-delay: 60ms; }
@keyframes heroIrisStar {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
10% { opacity: 0; transform: translate(-50%, -50%) scale(0.5);
animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); }
16% { opacity: 1; transform: translate(-50%, -50%) scale(1.15);
animation-timing-function: cubic-bezier(0.4, 0, 0.4, 1); }
23% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.9); }
100% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.9); }
}
@keyframes heroIrisGlint {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
11% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
16% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
24% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}
/* phones and tablets: the photo is 3:4 and shows more of her, so the oval's centre sits a
little lower on the torso and the oval is a touch slimmer */
@media (max-width: 900px) {
.hero-slides {
--iris-cy: min(64cqw, 13cqw + 50cqh);
--iris-k: 0.68;
}
.hero-slides .iris-ring ellipse { stroke-width: 1.5px; }
.hero-slides .iris-ring::before { width: 10px; height: 10px; }
.hero-slides .iris-ring-b::before { width: 8px; height: 8px; }
}
/* browsers without registered custom properties or container units (Safari < 16.4,
Firefox < 128) would step the oval in jumps: variant.js marks them .iris-plain and they
get a plain, calm cross-fade instead */
.hero-slides.iris-plain .hero-slide.is-entering,
[dir="rtl"] .hero-slides.iris-plain .hero-slide.is-entering {
animation: heroIrisPlain var(--hero-reveal) cubic-bezier(0.4, 0, 0.2, 1) both;
-webkit-mask: none;
mask: none;
}
/* the outgoing piece keeps only its shade and stays opaque under the fade */
.hero-slides.iris-plain .hero-slide.is-leaving { animation: heroIrisShade var(--hero-reveal) linear both; }
.hero-slides.iris-plain .hero-wipe,
[dir="rtl"] .hero-slides.iris-plain .hero-wipe { display: none; }
@keyframes heroIrisPlain {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hero-slide.is-entering,
[dir="rtl"] .hero-slide.is-entering,
.hero-slides.iris-plain .hero-slide.is-entering { animation: none; -webkit-mask: none; mask: none; }
.hero-slide.is-leaving { animation: none; filter: none; transform: none; }
.hero-slide.is-active img,
.hero-slide.is-leaving img { animation: none; transform: none; scale: none; }
.hero-slides .hero-wipe,
.hero-slides .hero-wipe.is-running,
[dir="rtl"] .hero-slides .hero-wipe,
[dir="rtl"] .hero-slides .hero-wipe.is-running { display: none; animation: none; }
}
/* ---------- Hero indicator: the counter ----------
01 ---- 07 with previous / next and pause, set directly above the caption like a
magazine photo credit. Replaces the story bars. The seven dots stay stacked in
.hero-line: only the current piece's line shows, and its fill is still the timer. */
.hero-progress,
[dir="rtl"] .hero-progress {
top: auto;
bottom: 100px;
left: 48px;
right: auto;
gap: 14px;
align-items: center;
}
[dir="rtl"] .hero-progress { left: auto; right: 48px; }
.hero-count,
.hero-total {
font-family: 'Italiana', serif;
line-height: 1;
direction: ltr;
font-variant-numeric: tabular-nums;
}
.hero-count { font-size: 26px; color: var(--cream); letter-spacing: 0.04em; min-width: 2ch; }
.hero-total { font-size: 14px; color: rgba(251, 246, 241, 0.62); letter-spacing: 0.08em; }
.hero-line {
position: relative;
width: 140px;
height: 22px;
pointer-events: none;
}
.hero-line .hero-dot {
position: absolute;
inset: 0;
width: auto;
height: auto;
flex: none;
}
.hero-line .hero-dot:not(.is-active) { visibility: hidden; }
.hero-line .hero-dot-track { height: 1px; background: rgba(251, 246, 241, 0.35); }
.hero-step {
width: 30px;
height: 30px;
padding: 0;
border: 1px solid rgba(251, 246, 241, 0.45);
border-radius: 50%;
background: none;
color: var(--cream);
cursor: pointer;
display: grid;
place-items: center;
transition: border-color var(--t-fast), background var(--t-fast);
}
.hero-step:hover { border-color: var(--cream); background: rgba(251, 246, 241, 0.12); }
.hero-step svg { width: 10px; height: 10px; }
[dir="rtl"] .hero-step svg { transform: scaleX(-1); }
.hero-progress .hero-pause { margin-inline-start: 2px; }
@media (max-width: 900px) {
.hero-progress,
[dir="rtl"] .hero-progress { bottom: 76px; left: 24px; right: 24px; gap: 12px; }
.hero-line { flex: 1; width: auto; }
}
@media (max-width: 580px) {
.hero-progress,
[dir="rtl"] .hero-progress { bottom: 62px; left: 16px; right: 16px; gap: 10px; }
.hero-count { font-size: 22px; }
.hero-step { width: 28px; height: 28px; }
}
/* ---------- Sizes are abaya lengths (50 to 63) plus Custom: let the row wrap ---------- */
.pdp-sizes { flex-wrap: wrap; }
.pdp-size.pdp-size-custom { width: auto; padding: 0 16px; }
/* the size guide now lists nine lengths: give the open panel room for all of them */
.pdp-accordion-item.open .pdp-accordion-content { max-height: 1000px; }