/* ═══════════════════════════════════════════════════════════════════ FABBRUCCIO — Framework v2 Three layers: Base → Components → Utilities Dark default · light via [data-theme="light"] on Philosophy: restraint, air, image-forward, quiet luxury ═══════════════════════════════════════════════════════════════════ */ /* ── 1. BASE ───────────────────────────────────────────────────────── */ /* Fonts inlined to eliminate render-blocking external stylesheet request. Preconnect + preload hints in HTML still fetch woff2 files early. */ @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.bunny.net/playfair-display/files/playfair-display-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.bunny.net/playfair-display/files/playfair-display-latin-ext-400-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(https://fonts.bunny.net/playfair-display/files/playfair-display-latin-700-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(https://fonts.bunny.net/playfair-display/files/playfair-display-latin-ext-700-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.bunny.net/playfair-display/files/playfair-display-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.bunny.net/playfair-display/files/playfair-display-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-stretch: 100%; font-display: swap; src: url(https://fonts.bunny.net/dm-sans/files/dm-sans-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-stretch: 100%; font-display: swap; src: url(https://fonts.bunny.net/dm-sans/files/dm-sans-latin-ext-300-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.bunny.net/dm-sans/files/dm-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.bunny.net/dm-sans/files/dm-sans-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(https://fonts.bunny.net/dm-sans/files/dm-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(https://fonts.bunny.net/dm-sans/files/dm-sans-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Tokens — Dark (default) */ :root { /* Surfaces */ --bg: #111010; --bg-alt: #181716; --bg-deep: #0b0a09; --sur: #1e1d1b; --sur2: #272523; /* Text */ --tx: #f2ede6; --tx2: #a89e8e; --tx3: #8a7c6e; /* passes 4.5:1 on --bg, still warm/muted */ /* Accent — used in exactly two places: price + primary CTA */ --ac: #c49840; --ac-hi: #d4a84a; /* Borders */ --bdr: rgba(255,255,255,0.06); --bdr2: rgba(255,255,255,0.12); /* Shadows */ --shadow-sm: 0 2px 12px rgba(0,0,0,0.4); --shadow: 0 8px 40px rgba(0,0,0,0.55); /* Fluid type — restraint at every size */ --t-2xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.7rem); --t-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem); --t-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.96rem); --t-md: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); --t-lg: clamp(1.125rem, 1rem + 0.6vw, 1.4rem); --t-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem); --t-2xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); --t-3xl: clamp(2.8rem, 2rem + 4vw, 5.5rem); --t-4xl: clamp(4rem, 2.8rem + 6vw, 9rem); /* Fluid spacing */ --s1: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem); --s2: clamp(0.5rem, 0.4rem + 0.5vw, 0.875rem); --s3: clamp(0.875rem, 0.7rem + 0.875vw, 1.5rem); --s4: clamp(1.25rem, 1rem + 1.25vw, 2.25rem); --s5: clamp(2rem, 1.5rem + 2.5vw, 4rem); --s6: clamp(3.5rem, 2.5rem + 5vw, 7.5rem); --s7: clamp(6rem, 4rem + 10vw, 14rem); /* Layout */ --nav: 68px; --wrap: 1380px; --wrap-mid: 1080px; --wrap-text: 660px; /* Shape */ --r: 2px; --r2: 5px; /* Motion */ --dur: 240ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Light mode */ [data-theme="light"] { --bg: #f9f7f4; --bg-alt: #f2ede6; --bg-deep: #e8e2d8; --sur: #ffffff; --sur2: #f2ede6; --tx: #1a1814; --tx2: #6b5f4d; --tx3: #9b8c78; --ac: #9a6f1e; --ac-hi: #b07f28; --bdr: rgba(0,0,0,0.07); --bdr2: rgba(0,0,0,0.14); --shadow-sm: 0 2px 12px rgba(0,0,0,0.08); --shadow: 0 8px 40px rgba(0,0,0,0.14); } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--tx); font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: var(--t-md); font-weight: 400; line-height: 1.7; min-height: 100dvh; overflow-x: hidden; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font: inherit; color: inherit; background: none; border: none; outline: none; } input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; } ul, ol { list-style: none; } address { font-style: normal; } p { max-width: 64ch; } strong { font-weight: 500; } /* Display type — light italic is the luxury register */ h1, h2, h3 { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; line-height: 1.1; letter-spacing: -0.01em; color: var(--tx); } h4, h5, h6 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--t-xs); color: var(--tx2); } h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); } h3 { font-size: var(--t-xl); } hr { border: none; border-top: 1px solid var(--bdr); margin-block: var(--s4); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ── 2. COMPONENTS ─────────────────────────────────────────────────── */ /* ── Skip link ─────────────────────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: var(--s3); background: var(--bg); color: var(--tx); padding: var(--s2) var(--s3); border: 1px solid var(--bdr2); border-radius: var(--r2); z-index: 9999; } .skip-link:focus { top: var(--s3); } /* ── Nav ───────────────────────────────────────────────────────────── */ .nav { position: fixed; inset-block-start: 0; inset-inline: 0; height: var(--nav); z-index: 900; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--s4); background: transparent; transition: background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); } .nav.scrolled { background: color-mix(in srgb, var(--bg-deep) 88%, transparent); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border-bottom: 1px solid var(--bdr); } /* Logo: centre column */ .nav__logo { grid-column: 2; display: flex; align-items: center; justify-content: center; text-decoration: none; } .nav__logo img { height: 24px; width: auto; display: block; transition: filter var(--dur) var(--ease); } [data-theme="light"] .nav__logo img { filter: invert(1); } /* Links: left */ .nav__links { grid-column: 1; display: none; gap: var(--s5); align-items: center; } .nav__links a { font-size: var(--t-2xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx2); transition: color var(--dur) var(--ease); } .nav__links a:hover { color: var(--tx); } /* Actions: right */ .nav__actions { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); } @media (min-width: 900px) { .nav__links { display: flex; } } .nav__icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--tx2); transition: color var(--dur) var(--ease); } .nav__icon-btn:hover { color: var(--tx); } .nav__icon-btn svg { width: 18px; height: 18px; } /* Hamburger */ .nav__hamburger { display: flex; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; } .nav__hamburger span { display: block; width: 22px; height: 1px; background: var(--tx2); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } @media (min-width: 900px) { .nav__hamburger { display: none; } } /* Mobile nav panel */ .nav__panel { position: fixed; inset: 0; z-index: 850; background: var(--bg-deep); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s5); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); } .nav__panel.open { opacity: 1; pointer-events: all; } .nav__panel a { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: var(--t-2xl); color: var(--tx); transition: color var(--dur) var(--ease); } .nav__panel a:hover { color: var(--tx2); } /* ── Full-bleed hero ───────────────────────────────────────────────── */ .hero-full { position: relative; height: 100svh; overflow: hidden; background: var(--bg-deep); } .hero-full__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .hero-full__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,7,6,0.7) 0%, rgba(8,7,6,0.1) 50%, transparent 100%); } .hero-full__caption { position: absolute; bottom: var(--s6); left: var(--s5); right: var(--s5); display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); } .hero-full__title { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; font-size: var(--t-3xl); color: #f2ede6; line-height: 1.05; max-width: 14ch; letter-spacing: -0.01em; } .hero-full__sub { font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(242,237,230,0.6); display: block; margin-bottom: var(--s3); } /* ── Section ───────────────────────────────────────────────────────── */ .section { padding-block: var(--s6); background: var(--bg); } .section--alt { background: var(--bg-alt); } .section--deep { background: var(--bg-deep); } .section__in { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s4); } .section__in--mid { max-width: var(--wrap-mid); margin-inline: auto; padding-inline: var(--s4); } .section__in--text { max-width: var(--wrap-text); margin-inline: auto; padding-inline: var(--s4); } /* Eyebrow label — used sparingly, not on gold */ .eyebrow { font-size: var(--t-2xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx3); display: block; margin-bottom: var(--s3); font-family: 'DM Sans', system-ui, sans-serif; } /* ── Product grid (collection) ─────────────────────────────────────── */ /* Image dominant. No card chrome. Name + price below. */ .collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s1); } .pcard { display: block; text-decoration: none; color: inherit; cursor: pointer; } .pcard__img-wrap { overflow: hidden; background: var(--sur); aspect-ratio: 4/3; } .pcard__img { width: 100%; height: 100%; object-fit: contain; transition: opacity var(--dur) var(--ease); } .pcard__img--alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 400ms var(--ease); } .pcard__img-wrap { position: relative; } .pcard:hover .pcard__img { opacity: 0; } .pcard:hover .pcard__img--alt { opacity: 1; } .pcard__info { padding: var(--s2) 0 var(--s3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); } .pcard__name { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; font-size: var(--t-sm); color: var(--tx); } .pcard__price { font-size: var(--t-xs); color: var(--tx3); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } /* ── Product page layout ───────────────────────────────────────────── */ .product-layout { display: grid; grid-template-columns: 1fr; min-height: 100svh; } @media (min-width: 900px) { .product-layout { grid-template-columns: 58% 42%; align-items: start; } .product-layout__gallery { position: sticky; top: 0; height: 100svh; } .product-layout__details { padding: var(--s6) var(--s6) var(--s7) var(--s5); max-width: 520px; } } /* Gallery */ .gallery { display: flex; flex-direction: column; height: 100%; } .gallery__main { flex: 1; position: relative; background: var(--sur); overflow: hidden; cursor: zoom-in; min-height: 320px; } .gallery__main picture, .gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity 200ms var(--ease); } .gallery__main img.swapping { opacity: 0; } /* Thumbnail strip */ .gallery__thumbs { display: flex; gap: 2px; background: var(--bg-deep); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; } .gallery__thumbs::-webkit-scrollbar { display: none; } .gallery__thumb { flex-shrink: 0; width: clamp(48px, 14%, 72px); aspect-ratio: 4/3; overflow: hidden; cursor: pointer; opacity: 0.45; background: var(--sur); transition: opacity var(--dur) var(--ease); border: none; padding: 0; } .gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .gallery__thumb:hover { opacity: 0.72; } .gallery__thumb.active { opacity: 1; } /* ── Product details panel ─────────────────────────────────────────── */ .product-details { padding-top: calc(var(--nav) + var(--s3)); display: flex; flex-direction: column; gap: var(--s4); } .product-details h1 { font-size: var(--t-3xl); margin-bottom: 0; } .product-price { font-size: var(--t-lg); color: var(--ac); font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0.02em; } /* Size selector — quiet */ .size-label { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx3); margin-bottom: var(--s2); display: flex; align-items: center; justify-content: space-between; } .size-label a { color: var(--tx3); border-bottom: 1px solid var(--bdr2); padding-bottom: 1px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .size-label a:hover { color: var(--tx2); border-color: var(--tx2); } .size-grid { display: flex; flex-wrap: wrap; gap: var(--s1); } .size-btn { width: 48px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: var(--t-xs); letter-spacing: 0.04em; border: 1px solid var(--bdr); border-radius: var(--r); color: var(--tx2); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); background: none; } .size-btn:hover { border-color: var(--bdr2); color: var(--tx); } .size-btn.selected { border-color: var(--tx); color: var(--tx); background: transparent; } .size-btn.unavailable { opacity: 0.25; cursor: not-allowed; text-decoration: line-through; } /* Add to cart — restrained */ .btn-cart { width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--tx); color: var(--tx); font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; border-radius: var(--r); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); font-family: 'DM Sans', system-ui, sans-serif; font-weight: 400; } .btn-cart:hover { background: var(--tx); color: var(--bg); } .btn-cart:disabled { opacity: 0.35; cursor: not-allowed; } /* Shipping note */ .shipping-note { font-size: var(--t-xs); color: var(--tx3); letter-spacing: 0.06em; text-align: center; } /* Product accordion — material / care / returns */ .accordion { border-top: 1px solid var(--bdr); } .accordion details { border-bottom: 1px solid var(--bdr); } .accordion summary { display: flex; align-items: center; justify-content: space-between; padding-block: var(--s3); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx2); cursor: pointer; list-style: none; user-select: none; gap: var(--s3); } .accordion summary::-webkit-details-marker { display: none; } .accordion summary::after { content: '+'; font-size: var(--t-md); font-weight: 300; color: var(--tx3); flex-shrink: 0; transition: transform var(--dur) var(--ease); line-height: 1; } .accordion details[open] summary::after { transform: rotate(45deg); } .accordion__body { padding-bottom: var(--s4); font-size: var(--t-sm); color: var(--tx2); line-height: 1.8; } /* ── Buttons ───────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s2) var(--s4); font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 400; cursor: pointer; border-radius: var(--r); text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); border: 1px solid transparent; white-space: nowrap; } .btn--outline { border-color: rgba(242,237,230,0.4); color: #f2ede6; background: transparent; } .btn--outline:hover { border-color: #f2ede6; background: rgba(242,237,230,0.08); } .btn--solid { background: var(--tx); color: var(--bg); border-color: var(--tx); } .btn--solid:hover { background: var(--tx2); border-color: var(--tx2); } /* ── Pull quote ────────────────────────────────────────────────────── */ .pullquote { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; font-size: var(--t-xl); color: var(--tx); line-height: 1.4; max-width: 34ch; } .pullquote cite { display: block; margin-top: var(--s3); font-family: 'DM Sans', system-ui, sans-serif; font-style: normal; font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx3); } /* ── UGC section ───────────────────────────────────────────────────── */ .ugc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } @media (max-width: 640px) { .ugc-grid { grid-template-columns: repeat(2, 1fr); } } .ugc-thumb { position: relative; aspect-ratio: 9/16; overflow: hidden; cursor: pointer; background: var(--sur); border: none; padding: 0; display: block; } .ugc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); } .ugc-thumb:hover img { transform: scale(1.04); } .ugc-thumb__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,9,8,0.3); transition: background var(--dur) var(--ease); } .ugc-thumb:hover .ugc-thumb__play { background: rgba(10,9,8,0.15); } .ugc-thumb__play svg { width: 44px; height: 44px; } /* ── Lightbox ──────────────────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(8,7,6,0.97); opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease); } .lightbox.open { opacity: 1; pointer-events: all; } .lightbox__img-wrap { max-width: min(92vw, 1200px); max-height: 90dvh; display: flex; align-items: center; justify-content: center; } .lightbox__img { max-width: 100%; max-height: 90dvh; width: auto; height: auto; object-fit: contain; transition: opacity 180ms var(--ease); } .lightbox__img.swapping { opacity: 0; } .lightbox__close, .lightbox__nav { position: fixed; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.07); border-radius: 50%; color: rgba(242,237,230,0.7); font-size: var(--t-lg); cursor: pointer; border: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,0.14); color: #f2ede6; } .lightbox__close { top: var(--s4); right: var(--s4); } .lightbox__prev { left: var(--s3); top: 50%; transform: translateY(-50%); } .lightbox__next { right: var(--s3); top: 50%; transform: translateY(-50%); } .lightbox__counter { position: fixed; bottom: var(--s4); left: 50%; transform: translateX(-50%); font-size: var(--t-xs); letter-spacing: 0.2em; color: rgba(242,237,230,0.3); font-family: 'DM Sans', system-ui, sans-serif; } /* ── Video modal ───────────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); } .modal.open { opacity: 1; pointer-events: all; } .modal__backdrop { position: absolute; inset: 0; background: rgba(8,7,6,0.94); cursor: pointer; } .modal__content { position: relative; z-index: 1; width: min(90vw, 720px); aspect-ratio: 9/16; max-height: 88dvh; background: #000; } .modal__content iframe { width: 100%; height: 100%; border: none; display: block; } .modal__close { position: absolute; top: calc(-1 * var(--s5)); right: 0; color: rgba(242,237,230,0.6); font-size: var(--t-lg); line-height: 1; cursor: pointer; border: none; background: none; transition: color var(--dur) var(--ease); } .modal__close:hover { color: #f2ede6; } /* ── Breadcrumb ────────────────────────────────────────────────────── */ .breadcrumb { font-size: var(--t-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx3); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .breadcrumb a { color: var(--tx3); transition: color var(--dur) var(--ease); } .breadcrumb a:hover { color: var(--tx2); } .breadcrumb__sep { color: var(--bdr2); } /* ── Newsletter ────────────────────────────────────────────────────── */ .nl { padding-block: var(--s6); background: var(--bg-alt); text-align: center; } .nl__in { max-width: 480px; margin-inline: auto; padding-inline: var(--s4); } .nl h2 { font-size: var(--t-2xl); margin-bottom: var(--s3); } .nl p { font-size: var(--t-sm); color: var(--tx2); margin: 0 auto var(--s5); max-width: 38ch; line-height: 1.8; } .nl__form { display: flex; gap: 0; border: 1px solid var(--bdr2); border-radius: var(--r); overflow: hidden; } .nl__input { flex: 1; padding: var(--s3) var(--s3); font-size: var(--t-sm); background: transparent; color: var(--tx); border: none; outline: none; min-width: 0; } .nl__input::placeholder { color: var(--tx3); } .nl__submit { padding: var(--s3) var(--s4); background: var(--tx); color: var(--bg); font-size: var(--t-2xs); letter-spacing: 0.18em; text-transform: uppercase; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; font-family: 'DM Sans', system-ui, sans-serif; transition: background var(--dur) var(--ease); } .nl__submit:hover { background: var(--tx2); } /* ── Footer ────────────────────────────────────────────────────────── */ .ft { background: var(--bg-deep); padding-block: var(--s6) var(--s4); border-top: 1px solid var(--bdr); } .ft__in { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s4); display: grid; grid-template-columns: 1fr; gap: var(--s5); } @media (min-width: 640px) { .ft__in { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .ft__in { grid-template-columns: 2fr 1fr 1fr 1fr; } } .ft__brand { font-size: var(--t-xs); color: var(--tx3); line-height: 1.9; max-width: 28ch; } .ft__col-h { font-size: var(--t-2xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx3); margin-bottom: var(--s3); } .ft__links { display: flex; flex-direction: column; gap: var(--s2); } .ft__link { font-size: var(--t-xs); color: var(--tx3); text-decoration: none; transition: color var(--dur) var(--ease); } .ft__link:hover { color: var(--tx2); } .ft__bot { max-width: var(--wrap); margin-inline: auto; padding: var(--s4) var(--s4) 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); border-top: 1px solid var(--bdr); margin-top: var(--s5); font-size: var(--t-2xs); color: var(--tx3); letter-spacing: 0.08em; } /* ── 3. UTILITIES ──────────────────────────────────────────────────── */ /* Display */ .hidden { display: none !important; } .block { display: block; } .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; } /* Flex */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } /* Grid */ .grid { display: grid; } .grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); } .grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); } .grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* Spacing */ .gap-1 { gap: var(--s1); } .gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); } .gap-4 { gap: var(--s4); } .gap-5 { gap: var(--s5); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); } .mb-3 { margin-bottom: var(--s3); } .mb-4 { margin-bottom: var(--s4); } .mb-5 { margin-bottom: var(--s5); } /* Text */ .text-center { text-align: center; } .text-left { text-align: left; } .text-muted { color: var(--tx2); } .text-dim { color: var(--tx3); } .text-gold { color: var(--ac); } .text-sm { font-size: var(--t-sm); } .text-xs { font-size: var(--t-xs); } .text-lg { font-size: var(--t-lg); } .text-xl { font-size: var(--t-xl); } .italic { font-style: italic; } .uppercase { text-transform: uppercase; letter-spacing: 0.14em; } .font-300 { font-weight: 300; } .font-serif { font-family: 'Playfair Display', Georgia, serif; font-style: italic; } /* Width */ .w-full { width: 100%; } .max-w-text { max-width: var(--wrap-text); margin-inline: auto; }