/** Shopify CDN: Minification failed Line 407:0 All "@import" rules must come first **/ /*short description block*/ ul.smpshultitle { list-style: none; margin-top: 15px; padding-left: 0; font-size: 14px; margin-bottom: 35px !important; } ul.smpshultitle li { margin-bottom: 10px; font-size: 14px; color: #646464; } ul.smpshultitle li img { width: 18px; position: relative; top: 0px; margin-right: 10px; display: inline-block; } .smpshultitle { list-style: none; padding-left: 0; } .smpshultitle li { position: relative; padding-left: 32px; margin-bottom: 10px; } .smpshultitle li::before { content: ""; background-image: url(/cdn/shop/files/tick-badge-64px_be63b814-e59a-4ecf-b67d-1700a9b39b6d.png?v=1747583220); background-size: 18px 18px; background-repeat: no-repeat; width: 18px; height: 18px; position: absolute; top: 4px; left: 0; } /*product swatched*/ label.block-swatch { border: 1px solid #fff; min-width: 65px; padding: 10px; background-color: #fff; border-radius: 5px; color: #878282; font-size: 12px; margin: 4px; } label.block-swatch > span { text-transform: uppercase; text-align: center; display: block; width: 100%; } .block-swatch.gemswatch { display: block; width: 100%; border-radius: 5px; border: 1px solid #fff; height: auto; box-shadow: none !important; outline: none; padding: 10px; background: #fff; text-decoration: none; margin: 4px; -webkit-box-shadow: 0 3px 25px rgba(0, 0, 0, 0.06); box-shadow: 0 3px 25px rgba(0, 0, 0, 0.06); -webkit-transition: .4s ease all; transition: .4s ease all; } .block-swatch::before { box-shadow: none; } .gemswra { width: 100%; } .gem-price { position: absolute; top: 10px; right: 10px; } .gem-desc { color: #878282; font-size: 14px; } .gemswra strong { font-size: 14px; font-weight: 600; } :checked + .block-swatch { border-color: #ff6600; background-color: #f8eae4; } .gem-price span { font-size: 14px; } .gem-price .price-regular { text-decoration: line-through; color: #585757; } .gem-price .price-sale { color: #ff6600; } .gemhelpli { position: relative; margin: 4px; } a.gemhelpwraps { border: 1px solid #e6e6e6 !important; padding: 10px !important; background-color: #e6e6e6 !important; border-radius: 5px !important; width: 100% !important; font-size: 14px !important; min-height: 50px !important; box-shadow: 0 3px 25px rgba(0, 0, 0, 0.06) !important; transition: 0.4s ease all !important; display: block !important; margin-top: 10px; } .clzslgemslrt { width: 14px; height: auto !important; position: absolute; right: 10px; top: 10px; cursor: pointer; } /*Ring Size Popup*/ .rngsizes{ width: 666px; } .rngsizes .rte .table-wrap { margin-bottom: 14px; } .rngsizes .table-wrap { max-width: 100%; overflow: auto; border-radius: 0; -webkit-overflow-scrolling: touch; } .table-wrap { color: #000; font-size: 14px; line-height: 1.8; } .rngsizes div.text-center{ text-align: center; } .rngsizes table { width: 100%; border-spacing: 0; border: 1px solid #faf8ff; border-radius: 0; table-layout: auto; overflow: hidden; text-align: center; } .rngsizes table { border-spacing: 0; text-align: center; } .rngsizes table th, table td { padding: 16px; border-right: 1px solid #faf8ff; border-bottom: 1px solid #faf8ff; } .rngsizes table th { padding: 8px 16px; background-color: #ff6600; color: #fff; font-weight: 400; font-style: normal; text-transform: initial; letter-spacing: 0px; font-size: 14px; text-align: center; } .rngsizes .overlay-content table th, .overlay-content table td { border-color: #faf8ff !important; } .rngsizes table thead tr:last-child th, table thead tr:last-child td { border-bottom: 1px solid #faf8ff; } .rngsizes .overlay-content table tbody tr:nth-of-type(2n+1) { background-color: #fff9; } .rngsizes table td { padding: 16px; font-size: 14px; text-align: center; } .rngsizes p { text-rendering: optimizeLegibility; margin-top: 0; margin-bottom: 14px; font-size: 14px; line-height: 1.2; } .rngsizes h4{ font-size: 15px; font-weight: 600; font-style: normal; text-transform: initial; letter-spacing: .1px; line-height: 1.2; } .rngsizes h4.modal-title.gmtypeh{ font-size: 16px; } .rngsizes .modal-header { border-bottom: 1px solid #faf8ff; border-color: #faf8ff; padding: 16px; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; padding-left: 0px; padding-right: 0px; margin-bottom: 16px; } .rngsizes .modal-title { margin-bottom: 0; margin-right: 7px; text-align: left; white-space: nowrap; text-overflow: ellipsis; } #hidden-contentx, #hidden-contentgems { padding: 16px; padding-top: 0px; height: 745px; overflow-x: hidden; overflow-y: auto; } #hidden-contentgems{ height: auto; } #hidden-contentx .fancybox-slide--html .fancybox-close-small, #hidden-contentgems .fancybox-slide--html .fancybox-close-small{ top: 5px; } .clzimgbottomrng{ max-width: 666px; } .btnclosegem, .btncloseschm{ width: 24px; height: 24px; position: absolute; top: -4px; right: 3px; outline: none !important; border: 0; text-align: center; font-weight: 600; font-size: 22px; } a.stsizechart{ text-decoration: none; color: #ff6600; font-size: 12px; -webkit-transition: .4s ease all; transition: .4s ease all; } #looxReviews::before { content: ""; background-color: #fff; height: 52px; width: 30%; position: absolute; z-index: 99; background-image: url(/cdn/shop/files/10792-reviews-bg.png?v=1747900625); background-size: 250px auto !important; background-repeat: no-repeat; background-position: left bottom; visibility: visible !important; height: 60px !important; } .loox-rating-content .loox-rating-label { visibility: hidden; } @media (max-width: 768px) { .doubly-nice-select.right .list { left: 0 !important; right: auto !important; } .rngsizes { width: 100%; } label.block-swatch{ margin: 0px; } #looxReviews::before { background-size: 204px auto !important; height: 53px !important; width: 54%; } } /* === PDP v2 BUILD START === */ /* Generated 2026-05-03 — matches pdp-v4.html EXACTLY for: pillars, marquee, atmospheric-banner, real-reviews, faq */ /* ---------- DESIGN TOKENS (from pdp-v4.html) ---------- */ :root { --color-signature: #E55B28; --color-signature-deep: #C04512; --color-signature-glow: #F08558; --color-ivory: #F5EDE3; --color-paper: #FBF8F1; --color-warm-white: #FAF7F2; --color-linen: #EEE6D6; --color-stone: #D4C5B3; --color-gold: #B8986A; --color-gold-deep: #8B6F44; --color-gold-light: #D9C9A2; --color-ink: #1A1614; --color-charcoal: #3A332C; --color-warm-gray: #6B6057; --color-soft-gray: #B5ADA5; --color-hairline: rgba(26, 22, 20, 0.10); --color-line: rgba(26, 22, 20, 0.22); --color-noir: #0D0A08; --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-editorial: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', system-ui, -apple-system, sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px; --space-12: 96px; --space-16: 128px; --space-20: 160px; --ease-sateur: cubic-bezier(0.2, 0.6, 0.2, 1); --motion-quick: 200ms; --motion-smooth: 400ms; --motion-editorial: 800ms; } /* Load Sateur fonts (in case theme doesn't already include them) */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap'); /* ---------- PILLARS ---------- */ .pillars { padding: var(--space-16) 48px; background: var(--color-ivory); max-width: 1440px; margin: 0 auto; } .pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .pillar__image { aspect-ratio: 4/5; background: var(--color-paper); margin-bottom: 24px; overflow: hidden; } .pillar__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-editorial) var(--ease-sateur); display: block; } .pillar:hover .pillar__image img { transform: scale(1.03); } .pillar__eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold-deep); font-weight: 500; margin-bottom: 12px; } .pillar__eyebrow sup { font-size: 0.6em; vertical-align: super; line-height: 0; } .pillar__title { font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--color-ink); margin-bottom: 14px; line-height: 1.15; } .pillar__body { font-family: var(--font-editorial); font-style: italic; font-size: 17px; color: var(--color-charcoal); line-height: 1.5; } @media (max-width: 900px) { .pillars__grid { grid-template-columns: 1fr; gap: 56px; } .pillars { padding: var(--space-10) 24px; } } /* ---------- MARQUEE ---------- */ .marquee { background: var(--color-signature); color: var(--color-ivory); padding: 22px 0; overflow: hidden; } .marquee__track { display: flex; gap: 60px; white-space: nowrap; animation: marquee-scroll 60s linear infinite; font-family: var(--font-editorial); font-style: italic; font-size: 26px; font-weight: 400; } .marquee__item { display: inline-flex; align-items: center; gap: 32px; } .marquee__item sup { font-size: 0.55em; vertical-align: super; line-height: 0; } .marquee__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ivory); flex-shrink: 0; } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ---------- ATMOSPHERIC BANNER ---------- */ .atmospheric-banner { position: relative; height: 620px; overflow: hidden; background: var(--color-noir); display: flex; align-items: center; justify-content: center; text-align: center; } @media (max-width: 768px) { .atmospheric-banner { height: 460px; } } .atmospheric-banner__bg { position: absolute; inset: 0; z-index: 1; } .atmospheric-banner__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; display: block; } .atmospheric-banner__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.1) 0%, rgba(13,10,8,0.05) 50%, rgba(13,10,8,0.55) 100%); } .atmospheric-banner__inner { position: relative; z-index: 3; padding: 0 48px; max-width: 780px; color: var(--color-ivory); } .atmospheric-banner__eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-signature); margin-bottom: 22px; font-weight: 500; } .atmospheric-banner__title { font-family: var(--font-display); font-weight: 400; font-size: 50px; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 22px; color: var(--color-ivory); } .atmospheric-banner__title em { font-family: var(--font-editorial); font-style: italic; color: var(--color-gold-light); font-weight: 400; } .atmospheric-banner__sub { font-family: var(--font-editorial); font-style: italic; font-size: 19px; color: var(--color-gold-light); line-height: 1.55; } @media (max-width: 768px) { .atmospheric-banner__title { font-size: 30px; } .atmospheric-banner__sub { font-size: 16px; } .atmospheric-banner__inner { padding: 0 24px; } } /* ---------- REAL REVIEWS WITH LOAD MORE ---------- */ .real-reviews { padding: var(--space-16) 48px; background: var(--color-paper); } @media (max-width: 768px) { .real-reviews { padding: var(--space-10) 24px; } } .real-reviews__header { max-width: 1100px; margin: 0 auto var(--space-8); text-align: center; } .real-reviews__eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-gold-deep); font-weight: 500; margin-bottom: 18px; } .real-reviews__stars-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .real-reviews__stars { color: var(--color-signature); font-size: 22px; letter-spacing: 3px; line-height: 1; } .real-reviews__score { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--color-ink); } .real-reviews__count { font-family: var(--font-editorial); font-style: italic; font-size: 16px; color: var(--color-warm-gray); } .real-reviews__title { font-family: var(--font-display); font-size: 44px; font-weight: 400; color: var(--color-ink); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 18px; } .real-reviews__title em { font-family: var(--font-editorial); font-style: italic; } .real-reviews__sub { font-family: var(--font-editorial); font-style: italic; font-size: 18px; color: var(--color-charcoal); } .filter-bar { max-width: 1240px; margin: 0 auto 32px; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--color-warm-white); border: 1px solid var(--color-hairline); flex-wrap: wrap; gap: 12px; } .filter-chips { display: flex; gap: 8px; flex-wrap: wrap; } .filter-chip { padding: 6px 14px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--color-charcoal); border: 1px solid var(--color-line); background: transparent; border-radius: 2px; transition: all var(--motion-quick) var(--ease-sateur); cursor: pointer; } .filter-chip sup { font-size: 0.6em; vertical-align: super; line-height: 0; } .filter-chip.active { background: var(--color-ink); color: var(--color-ivory); border-color: var(--color-ink); } .filter-chip:hover:not(.active) { border-color: var(--color-ink); } .filter-sort { font-family: var(--font-editorial); font-size: 12px; color: var(--color-warm-gray); font-style: italic; } .real-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1240px; margin: 0 auto; } @media (max-width: 1024px) { .real-reviews__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .real-reviews__grid { grid-template-columns: 1fr; } } .real-review { background: var(--color-warm-white); border: 1px solid var(--color-hairline); overflow: hidden; display: flex; flex-direction: column; } .real-review.hidden { display: none; } .real-review__image { aspect-ratio: 1; overflow: hidden; background: var(--color-paper); } .real-review__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-editorial) var(--ease-sateur); display: block; } .real-review:hover .real-review__image img { transform: scale(1.03); } .real-review__body { padding: 24px 22px; flex: 1; display: flex; flex-direction: column; } .real-review__stars { color: var(--color-signature); font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; } .real-review__quote { font-family: var(--font-editorial); font-style: italic; font-size: 16px; color: var(--color-ink); line-height: 1.5; margin-bottom: 16px; flex: 1; } .real-review__meta { padding-top: 14px; border-top: 1px solid var(--color-hairline); display: flex; justify-content: space-between; align-items: baseline; } .real-review__name { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--color-ink); } .real-review__badge { font-family: var(--font-body); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold-deep); font-weight: 500; } .load-more-wrapper { text-align: center; margin-top: 40px; } .load-more-btn { padding: 16px 48px; border: 1px solid var(--color-ink); background: transparent; color: var(--color-ink); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; border-radius: 2px; transition: all var(--motion-quick) var(--ease-sateur); cursor: pointer; } .load-more-btn:hover { background: var(--color-ink); color: var(--color-ivory); } /* ---------- FAQ ---------- */ .faq { padding: var(--space-16) 48px; background: var(--color-paper); } @media (max-width: 768px) { .faq { padding: var(--space-10) 24px; } } .faq__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; } @media (max-width: 900px) { .faq__inner { grid-template-columns: 1fr; gap: 40px; } } .faq__header { text-align: left; position: sticky; top: 104px; } .faq__eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-gold-deep); font-weight: 500; margin-bottom: 18px; } .faq__title { font-family: var(--font-display); font-size: 40px; font-weight: 400; color: var(--color-ink); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 18px; } .faq__title em { font-family: var(--font-editorial); font-style: italic; } .faq__sub { font-family: var(--font-editorial); font-style: italic; font-size: 17px; color: var(--color-charcoal); line-height: 1.55; } .faq__image { margin-top: 32px; aspect-ratio: 4/5; overflow: hidden; background: var(--color-ivory); } .faq__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .faq-list { border-top: 1px solid var(--color-hairline); } .faq-item { border-bottom: 1px solid var(--color-hairline); } .faq-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 22px 0; text-align: left; font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--color-ink); cursor: pointer; } .faq-trigger sup { font-size: 0.55em; vertical-align: super; line-height: 0; } .faq-icon { width: 18px; height: 18px; transition: transform var(--motion-smooth) var(--ease-sateur); flex-shrink: 0; margin-left: 20px; } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-body { max-height: 0; overflow: hidden; transition: max-height var(--motion-smooth) var(--ease-sateur); } .faq-item.open .faq-body { max-height: 400px; } .faq-body-inner { padding: 0 0 24px; font-family: var(--font-body); font-size: 15px; color: var(--color-charcoal); line-height: 1.7; max-width: 800px; } /* === PDP v2 BUILD END === */ /* === PDP v4 MOBILE + LIGHTBOX START === */ /* Adds: tighter mobile sizes for reviews, 2-col on mobile (overrides v2 1-col), lightbox styles */ /* ---- Reviews — 2-column on mobile (override the <640px 1-col rule from v2) ---- */ @media (max-width: 640px) { .real-reviews__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; } } /* ---- Reviews — mobile text/padding tightening (≤640px) ---- */ @media (max-width: 640px) { .real-reviews { padding: 56px 16px; } .real-reviews__header { margin-bottom: 32px; } .real-reviews__eyebrow { font-size: 9px; letter-spacing: 0.28em; margin-bottom: 12px; } .real-reviews__stars-row { gap: 10px; margin-bottom: 10px; } .real-reviews__stars { font-size: 16px; letter-spacing: 2px; } .real-reviews__score { font-size: 17px; } .real-reviews__count { font-size: 12px; } .real-reviews__title { font-size: 24px; line-height: 1.15; margin-bottom: 12px; } .real-reviews__sub { font-size: 13px; } .filter-bar { padding: 10px 12px; margin-bottom: 20px; gap: 8px; } .filter-chip { padding: 5px 10px; font-size: 9px; letter-spacing: 0.10em; } .filter-sort { font-size: 10px; } .real-review__body { padding: 14px 12px; } .real-review__stars { font-size: 11px; letter-spacing: 1px; margin-bottom: 8px; } .real-review__quote { font-size: 12.5px; line-height: 1.45; margin-bottom: 10px; } .real-review__meta { padding-top: 10px; gap: 6px; flex-wrap: wrap; } .real-review__name { font-size: 11.5px; } .real-review__badge { font-size: 8px; letter-spacing: 0.18em; } .load-more-wrapper { margin-top: 28px; } .load-more-btn { padding: 13px 28px; font-size: 10px; letter-spacing: 0.20em; } } /* ---- Reviews — even tighter at very narrow widths (≤380px / older iPhones) ---- */ @media (max-width: 380px) { .real-reviews__grid { gap: 8px; } .real-reviews { padding: 48px 12px; } .real-review__body { padding: 12px 10px; } .real-review__quote { font-size: 11.5px; } .real-review__name { font-size: 11px; } } /* ---- Click-to-zoom lightbox ---- */ .real-review__image img { cursor: zoom-in; } .rv-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(13, 10, 8, 0.94); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; animation: rv-lightbox-fade 200ms cubic-bezier(0.2, 0.6, 0.2, 1); } @keyframes rv-lightbox-fade { from { opacity: 0; } to { opacity: 1; } } .rv-lightbox__img { max-width: 100%; max-height: 92vh; object-fit: contain; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6); display: block; } .rv-lightbox__close { position: absolute; top: 20px; right: 24px; background: transparent; border: 0; color: var(--color-ivory); font-family: var(--font-body); font-size: 28px; line-height: 1; padding: 10px 14px; cursor: pointer; opacity: 0.85; transition: opacity 200ms var(--ease-sateur); } .rv-lightbox__close:hover { opacity: 1; } .rv-lightbox__caption { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: var(--color-gold-light); font-family: var(--font-editorial); font-style: italic; font-size: 14px; } @media (max-width: 640px) { .rv-lightbox { padding: 16px; } .rv-lightbox__close { top: 12px; right: 12px; font-size: 26px; padding: 8px 12px; } .rv-lightbox__caption { font-size: 12px; bottom: 16px; } } body.rv-lightbox-open { overflow: hidden; } /* === PDP v4 MOBILE + LIGHTBOX END === */ /* === PDP v6 BUYBOX START === */ /* Buy box styling — matches pdp-v4.html exactly. Reviews stars, promise, bullets, compare-badge, variant picker. */ /* ---- REVIEWS STARS ROW ---- */ .reviews { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-family: var(--font-body); font-size: 13px; color: var(--color-warm-gray); } .reviews__stars { color: var(--color-signature); letter-spacing: 2px; font-size: 13px; } .reviews__count { color: var(--color-warm-gray); } .reviews__sep { color: var(--color-stone); } .reviews__link { color: var(--color-warm-gray); text-decoration: underline; text-underline-offset: 2px; } .reviews__link:hover { color: var(--color-ink); } /* ---- PROMISE ---- */ .product__promise { font-family: var(--font-body); font-size: 15px; color: var(--color-charcoal); line-height: 1.5; margin: 18px 0 24px; font-weight: 500; } /* ---- BULLETS ---- */ .product__bullets { list-style: none; margin: 0 0 28px; padding: 20px 0; border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); } .product__bullets li { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; font-family: var(--font-body); font-size: 14px; color: var(--color-charcoal); line-height: 1.5; } .product__bullets li::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--color-gold); margin-top: 9px; flex-shrink: 0; } /* ---- PRICE BLOCK + COMPARE BADGE (replaces v5 .pdp-compare-pill) ---- */ .price-block { margin: 18px 0 24px; } .compare-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: var(--color-linen); border: 1px solid var(--color-hairline); border-radius: 2px; font-family: var(--font-body); font-size: 12px; color: var(--color-charcoal); position: relative; line-height: 1.4; margin-top: 8px; flex-wrap: wrap; } .compare-badge__label { font-weight: 400; color: var(--color-charcoal); letter-spacing: 0.01em; } .compare-badge__amount { font-family: var(--font-body); font-weight: 600; color: var(--color-signature); font-size: 13px; letter-spacing: -0.005em; } .compare-badge__context { font-family: var(--font-editorial); font-style: italic; color: var(--color-warm-gray); font-size: 13px; } .compare-badge__info { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border: 1px solid var(--color-warm-gray); border-radius: 50%; font-size: 8px; font-family: var(--font-editorial); font-style: italic; color: var(--color-warm-gray); cursor: help; margin-left: 2px; background: transparent; } .compare-badge__info:hover + .compare-tooltip, .compare-badge__info:focus + .compare-tooltip { opacity: 1; pointer-events: auto; } .compare-tooltip { position: absolute; top: calc(100% + 10px); left: 0; max-width: 340px; padding: 14px 18px; background: var(--color-ink); color: var(--color-ivory); font-size: 12px; line-height: 1.55; font-family: var(--font-body); font-style: normal; border-radius: 2px; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-sateur); z-index: 10; box-shadow: 0 12px 32px rgba(0,0,0,0.18); } .compare-tooltip sup { font-size: 0.6em; vertical-align: super; line-height: 0; } /* ---- VARIANT PICKER OVERRIDES — match .selector-option / .stone-tile look ---- */ /* Impact theme renders with .block-swatch labels. Override to look like pdp-v4 selector pills */ variant-picker fieldset, .variant-picker fieldset { border: 0; padding: 0; margin: 0 0 28px; } variant-picker legend, .variant-picker legend { display: block; width: 100%; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink); font-weight: 500; margin-bottom: 12px; } variant-picker .block-swatch__list, .variant-picker .block-swatch__list, variant-picker .variant-picker__option-values, .variant-picker .variant-picker__option-values { display: flex; flex-wrap: wrap; gap: 8px; } variant-picker .block-swatch, .variant-picker .block-swatch { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 12px 16px; border: 1px solid var(--color-line) !important; background: var(--color-paper) !important; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--color-ink) !important; text-align: center; cursor: pointer; border-radius: 2px; transition: all 200ms var(--ease-sateur); position: relative; } variant-picker .block-swatch input[type="radio"], .variant-picker .block-swatch input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } variant-picker .block-swatch:hover, .variant-picker .block-swatch:hover { border-color: var(--color-ink) !important; } variant-picker .block-swatch:has(input:checked), .variant-picker .block-swatch:has(input:checked) { background: var(--color-ink) !important; color: var(--color-ivory) !important; border-color: var(--color-ink) !important; } variant-picker .block-swatch > span, .variant-picker .block-swatch > span { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: inherit; } variant-picker .block-swatch sup { font-size: 0.6em; vertical-align: super; line-height: 0; } /* ---- MOBILE buy box tightening ---- */ @media (max-width: 640px) { .reviews { font-size: 12px; gap: 6px; margin-bottom: 14px; } .reviews__stars { font-size: 12px; letter-spacing: 1.5px; } .product__promise { font-size: 13.5px; margin: 12px 0 18px; line-height: 1.45; } .product__bullets { padding: 14px 0; margin-bottom: 18px; } .product__bullets li { font-size: 13px; padding: 4px 0; gap: 10px; } .compare-badge { padding: 5px 10px; font-size: 11px; gap: 5px; } .compare-badge__amount { font-size: 12px; } .compare-badge__context { font-size: 12px; } .compare-tooltip { left: 0; right: 0; max-width: none; font-size: 11px; padding: 10px 12px; } variant-picker .block-swatch, .variant-picker .block-swatch { min-width: 60px; padding: 10px 12px; font-size: 11px; } variant-picker legend, .variant-picker legend { font-size: 11px; margin-bottom: 10px; } variant-picker fieldset, .variant-picker fieldset { margin-bottom: 20px; } } /* === PDP v6 BUYBOX END === */ /* === PDP v20 START === */ /* v18 — full-width via direct section ID selectors (no :has()) + FAQ mobile fix */ /* ---- VISUALLY HIDDEN ---- */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* ============================================================ FULL-WIDTH BREAKOUT — v20 fixed (scroll-smooth + correct class names) ============================================================ */ html { overflow-x: clip; } /* No body overflow — was causing scroll jank on mobile */ /* Direct section IDs */ #shopify-section-pdp_hero_banner, #shopify-section-pdp_atmospheric, #shopify-section-pdp_marquee, #shopify-section-pdp_manifesto, #shopify-section-pdp_influencer, #shopify-section-pdp_social, #shopify-section-pdp_gem_compare, #shopify-section-pdp_reviews, #shopify-section-pdp_faq, [id*="pdp_hero_banner"], [id*="pdp_atmospheric"], [id*="pdp_marquee"], [id*="pdp_manifesto"], [id*="pdp_influencer"], [id*="pdp_social"], [id*="pdp_gem_compare"], [id*="pdp_reviews"], [id*="pdp_faq"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } /* Inner element direct breakout — corrected class names */ .hero-banner, .atmospheric-banner, /* was .pdp-atmos in selector — actual class is .atmospheric-banner */ .marquee, /* was .pdp-marquee in selector — actual class is .marquee */ .pdp-influencer, .pdp-manifesto, .pdp-social, .pdp-gem-compare, .faq, .real-reviews { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* Override any container max-width */ .shopify-section--custom-liquid { max-width: none !important; width: 100% !important; padding: 0 !important; } /* ============================================================ HERO BANNER ============================================================ */ .hero-banner { background: var(--color-noir); color: var(--color-ivory); padding: 96px 48px; text-align: center; width: 100%; } .hero-banner__eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-signature); margin-bottom: 20px; font-weight: 500; } .hero-banner__eyebrow sup { font-size: 0.55em; vertical-align: super; line-height: 0; } .hero-banner__title { font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 60px); font-weight: 400; line-height: 1.05; max-width: 980px; margin: 0 auto 24px; letter-spacing: -0.015em; color: var(--color-ivory); } .hero-banner__title em { font-family: var(--font-editorial); font-style: italic; font-weight: 400; color: var(--color-signature); } .hero-banner__sub { font-family: var(--font-editorial); font-style: italic; font-size: clamp(17px, 1.8vw, 22px); color: var(--color-gold-light); max-width: 640px; margin: 0 auto; line-height: 1.5; } @media (max-width: 768px) { .hero-banner { padding: 56px 24px; } } /* ============================================================ INFLUENCER ============================================================ */ .pdp-influencer { padding: 96px 48px; background: var(--color-linen); width: 100%; } .pdp-influencer__header { max-width: 1240px; margin: 0 auto 48px; text-align: center; } .pdp-influencer__eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-gold-deep); font-weight: 500; margin-bottom: 18px; } .pdp-influencer__title { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 400; line-height: 1.08; color: var(--color-ink); letter-spacing: -0.015em; margin-bottom: 18px; } .pdp-influencer__title em { font-family: var(--font-editorial); font-style: italic; font-weight: 400; } .pdp-influencer__sub { font-family: var(--font-editorial); font-style: italic; font-size: clamp(15px, 1.6vw, 18px); color: var(--color-charcoal); max-width: 620px; margin: 0 auto; line-height: 1.55; } .pdp-influencer__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 1440px; margin: 0 auto; } .pdp-influencer__tile { aspect-ratio: 1; overflow: hidden; background: var(--color-paper); } .pdp-influencer__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms var(--ease-sateur); } .pdp-influencer__tile:hover img { transform: scale(1.05); } @media (max-width: 1024px) { .pdp-influencer__grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .pdp-influencer { padding: 48px 16px; } .pdp-influencer__header { margin-bottom: 28px; } .pdp-influencer__grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } .pdp-influencer__title { font-size: 22px; margin-bottom: 12px; } .pdp-influencer__sub { font-size: 13px; } } /* ============================================================ MANIFESTO ============================================================ */ .pdp-manifesto { position: relative; padding: 140px 48px; background: var(--color-noir); color: var(--color-ivory); text-align: center; overflow: hidden; width: 100%; } .pdp-manifesto__bg { position: absolute; inset: 0; z-index: 1; opacity: 0.25; } .pdp-manifesto__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3); } .pdp-manifesto__inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; } .pdp-manifesto__eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-signature); margin-bottom: 28px; font-weight: 500; } .pdp-manifesto__slogan { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 36px; color: var(--color-ivory); } .pdp-manifesto__slogan em { font-family: var(--font-editorial); font-weight: 300; color: var(--color-signature); } .pdp-manifesto__body { font-family: var(--font-editorial); font-style: italic; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; color: var(--color-gold-light); max-width: 640px; margin: 0 auto 28px; } .pdp-manifesto__body--small { font-size: 17px !important; margin-top: -10px; } .pdp-manifesto__sig { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-gold); font-weight: 500; margin-top: 28px; } @media (max-width: 768px) { .pdp-manifesto { padding: 64px 24px; } .pdp-manifesto__slogan { font-size: 26px; margin-bottom: 20px; } .pdp-manifesto__body { font-size: 14.5px; margin-bottom: 16px; line-height: 1.6; } .pdp-manifesto__body--small { font-size: 13px !important; } .pdp-manifesto__sig { font-size: 11px; margin-top: 16px; letter-spacing: 0.26em; } .pdp-manifesto__eyebrow { font-size: 10px; margin-bottom: 18px; letter-spacing: 0.28em; } } /* ============================================================ SOCIAL / STATS ============================================================ */ .pdp-social { padding: 96px 48px; background: var(--color-ivory); width: 100%; } .pdp-social__header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1440px; margin: 0 auto 56px; align-items: end; } .pdp-social__title { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px); font-weight: 400; line-height: 1.08; color: var(--color-ink); letter-spacing: -0.02em; } .pdp-social__title em { font-family: var(--font-editorial); font-style: italic; font-weight: 400; } .pdp-social__intro { font-family: var(--font-editorial); font-style: italic; font-size: clamp(15px, 1.5vw, 18px); color: var(--color-charcoal); line-height: 1.55; } .pdp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1440px; margin: 0 auto; padding: 36px 0; border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); } .pdp-stat { text-align: center; padding: 0 12px; } .pdp-stat__num { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 40px); font-weight: 400; color: var(--color-ink); letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px; } .pdp-stat__num em { font-family: var(--font-editorial); font-style: italic; color: var(--color-gold); } .pdp-stat__label { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-charcoal); font-weight: 500; } @media (max-width: 900px) { .pdp-social__header { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; } .pdp-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; padding: 24px 0; } .pdp-social { padding: 48px 20px; } .pdp-stat__num { font-size: 24px; } .pdp-stat__label { font-size: 9.5px; letter-spacing: 0.16em; } } /* ============================================================ GEM COMPARE ============================================================ */ .pdp-gem-compare { padding: 96px 48px; background: var(--color-ivory); width: 100%; } .pdp-gem-compare__inner { max-width: 1100px; margin: 0 auto; } .pdp-gem-compare__header { text-align: center; margin-bottom: 56px; } .pdp-gem-compare__title { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 400; color: var(--color-ink); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 18px; } .pdp-gem-compare__sub { font-family: var(--font-editorial); font-style: italic; font-size: clamp(15px, 1.6vw, 18px); color: var(--color-charcoal); } .pdp-gem-compare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .pdp-gem-card { background: var(--color-warm-white); border: 1px solid var(--color-hairline); position: relative; overflow: hidden; } .pdp-gem-card--signature { border-color: var(--color-ink); } .pdp-gem-card__badge { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--color-ink); color: var(--color-ivory); padding: 6px 14px; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; } .pdp-gem-card__badge sup { font-size: 0.55em; vertical-align: super; line-height: 0; } .pdp-gem-card__image { aspect-ratio: 4/3; overflow: hidden; background: var(--color-paper); } .pdp-gem-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms var(--ease-sateur); } .pdp-gem-card:hover .pdp-gem-card__image img { transform: scale(1.03); } .pdp-gem-card__body { padding: 32px 36px; } .pdp-gem-card__title { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--color-ink); margin-bottom: 8px; } .pdp-gem-card__title sup { font-size: 0.55em; vertical-align: super; line-height: 0; } .pdp-gem-card__tag { font-family: var(--font-editorial); font-style: italic; font-size: 16px; color: var(--color-gold); margin-bottom: 18px; } .pdp-gem-card__desc { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--color-charcoal); margin-bottom: 18px; } .pdp-gem-card__desc sup { font-size: 0.6em; vertical-align: super; line-height: 0; } .pdp-gem-card__note { padding-top: 16px; border-top: 1px solid var(--color-hairline); font-family: var(--font-editorial); font-style: italic; font-size: 13px; color: var(--color-warm-gray); line-height: 1.55; } @media (max-width: 768px) { .pdp-gem-compare { padding: 48px 20px; } .pdp-gem-compare__header { margin-bottom: 28px; } .pdp-gem-compare__grid { grid-template-columns: 1fr; gap: 14px; } .pdp-gem-card__body { padding: 18px 20px; } .pdp-gem-card__title { font-size: 19px; } .pdp-gem-card__tag { font-size: 13px; margin-bottom: 10px; } .pdp-gem-card__desc { font-size: 13px; margin-bottom: 12px; } .pdp-gem-card__note { font-size: 12px; padding-top: 12px; } } /* ============================================================ FAQ — DESKTOP 2-col + MOBILE 1-col with image AFTER text ============================================================ */ .faq { padding: 96px 48px; background: var(--color-paper); width: 100%; } .faq__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; } .faq__header { text-align: left; position: sticky; top: 104px; } .faq__eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-gold-deep); font-weight: 500; margin-bottom: 18px; } .faq__title { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 40px); font-weight: 400; color: var(--color-ink); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 18px; } .faq__title em { font-family: var(--font-editorial); font-style: italic; } .faq__sub { font-family: var(--font-editorial); font-style: italic; font-size: clamp(14px, 1.5vw, 17px); color: var(--color-charcoal); line-height: 1.55; } .faq__image { margin-top: 32px; aspect-ratio: 4/5; overflow: hidden; background: var(--color-ivory); } .faq__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .faq-list { border-top: 1px solid var(--color-hairline); } .faq-item { border-bottom: 1px solid var(--color-hairline); } .faq-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 22px 0; text-align: left; cursor: pointer; font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--color-ink); background: transparent; border: 0; } .faq-trigger sup { font-size: 0.55em; vertical-align: super; line-height: 0; } .faq-icon { width: 18px; height: 18px; transition: transform 400ms var(--ease-sateur); flex-shrink: 0; margin-left: 20px; } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-body { max-height: 0; overflow: hidden; transition: max-height 400ms var(--ease-sateur); } .faq-item.open .faq-body { max-height: 400px; } .faq-body-inner { padding: 0 0 24px; font-family: var(--font-body); font-size: 15px; color: var(--color-charcoal); line-height: 1.7; max-width: 800px; } /* MOBILE FAQ — square image AFTER text, no sticky, max-height limit */ @media (max-width: 900px) { .faq { padding: 48px 20px; } .faq__inner { grid-template-columns: 1fr; gap: 28px; } .faq__header { position: static !important; top: auto !important; } .faq__title { font-size: 24px; margin-bottom: 12px; } .faq__sub { font-size: 14px; } .faq__image { aspect-ratio: 1 / 1 !important; /* SQUARE on mobile */ max-height: 320px !important; /* hard cap */ margin-top: 22px !important; border-radius: 2px; } .faq-trigger { padding: 18px 0; font-size: 15.5px; } .faq-body-inner { font-size: 14px; padding-bottom: 20px; } } /* ============================================================ ATMOSPHERIC (already exists) ============================================================ */ .pdp-atmos { width: 100% !important; } /* ============================================================ MARQUEE ============================================================ */ .pdp-marquee { width: 100%; } /* ============================================================ ALL EXISTING v17 STYLES — KEPT ============================================================ */ /* MAIN PRICE */ .pdp-main-price { display: flex !important; align-items: baseline !important; gap: 14px !important; margin: 6px 0 0 !important; padding: 0 !important; flex-wrap: wrap !important; } .pdp-main-price__sale, .pdp-main-price__regular { font-family: var(--font-display) !important; font-size: 32px !important; font-weight: 400 !important; color: var(--color-ink) !important; line-height: 1 !important; letter-spacing: -0.01em !important; text-decoration: none !important; } .pdp-main-price__compare { font-family: var(--font-body) !important; font-size: 18px !important; color: var(--color-signature) !important; font-weight: 400 !important; text-decoration: line-through !important; text-decoration-thickness: 1.5px !important; text-decoration-color: var(--color-signature) !important; font-style: normal !important; line-height: 1 !important; opacity: 0.85 !important; } /* FIELDSETS / LABELS */ variant-picker.variant-picker fieldset.variant-picker__option { border: 0 !important; padding: 0 !important; margin: 0 0 18px !important; } variant-picker.variant-picker .variant-picker__option-info { width: 100% !important; margin-bottom: 10px !important; } variant-picker.variant-picker .variant-picker__option-info .h-stack { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; flex-wrap: wrap !important; gap: 12px !important; } .sateur-vp-legend { font-family: var(--font-body) !important; font-size: 12px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--color-ink) !important; font-weight: 500 !important; display: inline-block !important; padding: 0 !important; margin: 0 !important; } .sateur-vp-value { font-family: var(--font-editorial) !important; font-style: italic !important; font-size: 14px !important; color: var(--color-charcoal) !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; margin-left: auto !important; } .stsizechart, a.stsizechart { font-family: var(--font-body) !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-transform: uppercase !important; color: var(--color-gold-deep) !important; font-weight: 500 !important; font-style: normal !important; margin-left: 8px !important; } variant-picker.variant-picker .variant-picker__option-values { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } variant-picker.variant-picker .scroll-area { overflow: visible !important; margin: 0 !important; padding: 0 !important; } /* TITLE→PRICE */ product-rerender .product__title, product-rerender h1, .product__title { margin-bottom: 14px !important; } .product__promise { font-family: var(--font-body) !important; font-size: 15px !important; color: var(--color-charcoal) !important; line-height: 1.5 !important; margin: 6px 0 16px !important; font-weight: 500 !important; } .product__bullets { list-style: none !important; margin: 0 0 14px !important; padding: 14px 0 !important; border-top: 1px solid var(--color-hairline) !important; border-bottom: 1px solid var(--color-hairline) !important; } .product__bullets li { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 5px 0 !important; font-family: var(--font-body) !important; font-size: 14px !important; color: var(--color-charcoal) !important; line-height: 1.5 !important; } .product__bullets li::before { content: "" !important; display: inline-block !important; width: 4px !important; height: 4px !important; border-radius: 50% !important; background: var(--color-gold) !important; margin-top: 9px !important; flex-shrink: 0 !important; } .price-block { margin: 0 0 14px !important; padding: 0 !important; } .price-block .compare-badge { margin-top: 0 !important; } /* CARAT/SIZE PILLS + STONE TILES + HELP BOX + ATC + popups + reviews + everything else from v17 */ variant-picker.variant-picker label.block-swatch:not(.gemswatch) { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 72px !important; padding: 11px 16px !important; border: 1px solid var(--color-line) !important; background: var(--color-paper) !important; border-radius: 2px !important; color: var(--color-ink) !important; font-family: var(--font-body) !important; font-size: 12px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-weight: 500 !important; margin: 0 !important; box-shadow: none !important; text-align: center !important; cursor: pointer !important; transition: all 200ms var(--ease-sateur) !important; position: relative !important; } variant-picker.variant-picker label.block-swatch:not(.gemswatch):hover { border-color: var(--color-ink) !important; } variant-picker.variant-picker label.block-swatch:not(.gemswatch) > span { font-family: var(--font-body) !important; font-size: 12px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-weight: 500 !important; color: inherit !important; text-align: center !important; display: block !important; } label.block-swatch.sateur-checked:not(.gemswatch), input:checked + label.block-swatch:not(.gemswatch) { background: var(--color-ink) !important; color: var(--color-ivory) !important; border-color: var(--color-ink) !important; } label.block-swatch.sateur-checked:not(.gemswatch) > span, input:checked + label.block-swatch:not(.gemswatch) > span { color: var(--color-ivory) !important; } variant-picker.variant-picker label.block-swatch.gemswatch { display: block !important; position: relative !important; padding: 18px 160px 18px 22px !important; border: 1px solid var(--color-line) !important; background: var(--color-paper) !important; border-radius: 2px !important; margin: 0 0 10px !important; width: 100% !important; text-align: left !important; box-shadow: none !important; cursor: pointer !important; transition: all 200ms var(--ease-sateur) !important; min-height: 92px !important; overflow: visible !important; } variant-picker.variant-picker label.block-swatch.gemswatch:hover { border-color: var(--color-ink) !important; } label.block-swatch.gemswatch.sateur-checked, input:checked + label.block-swatch.gemswatch { border-color: var(--color-ink) !important; background: var(--color-linen) !important; } label.block-swatch.gemswatch.sateur-checked::before, input:checked + label.block-swatch.gemswatch::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3px !important; background: var(--color-signature) !important; } variant-picker.variant-picker label.gemswatch .gemswra { width: 100% !important; padding: 0 !important; margin: 0 !important; position: static !important; text-align: left !important; } variant-picker.variant-picker label.gemswatch .gemswra strong { font-family: var(--font-display) !important; font-size: 16px !important; font-weight: 500 !important; color: var(--color-ink) !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 6px !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; text-align: left !important; } variant-picker.variant-picker label.gemswatch .gem-desc { font-family: var(--font-editorial) !important; font-style: italic !important; font-size: 13.5px !important; color: var(--color-charcoal) !important; line-height: 1.45 !important; text-align: left !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; } variant-picker.variant-picker label.gemswatch .gem-price { position: absolute !important; top: 18px !important; right: 22px !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 1px !important; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: right !important; font-family: var(--font-display) !important; white-space: nowrap !important; } variant-picker.variant-picker label.gemswatch .gem-price .price-sale { font-family: var(--font-display) !important; font-size: 18px !important; color: var(--color-ink) !important; font-weight: 500 !important; text-decoration: none !important; line-height: 1.1 !important; display: block !important; } variant-picker.variant-picker label.gemswatch .gem-price .price-regular { font-family: var(--font-display) !important; font-style: normal !important; font-size: 13px !important; color: var(--color-warm-gray) !important; text-decoration: line-through !important; text-decoration-thickness: 1px !important; text-decoration-color: var(--color-warm-gray) !important; font-weight: 400 !important; margin-top: 0 !important; display: block !important; line-height: 1.2 !important; opacity: 0.7 !important; } .gemswatch .sateur-save-badge { display: none !important; } .sateur-stone-anchor { display: block !important; font-family: var(--font-editorial) !important; font-style: italic !important; font-size: 11px !important; color: var(--color-warm-gray) !important; font-weight: 400 !important; margin-top: 6px !important; text-align: right !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.2 !important; opacity: 0.85 !important; } .sateur-signature-badge { display: inline-flex !important; align-items: center !important; background: var(--color-ink) !important; color: var(--color-ivory) !important; padding: 3px 8px !important; font-family: var(--font-body) !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-style: normal !important; line-height: 1 !important; border-radius: 2px !important; vertical-align: middle !important; white-space: nowrap !important; } variant-picker.variant-picker .gemhelpli, .gemhelpli { list-style: none !important; margin: 12px 0 0 !important; padding: 0 !important; position: relative !important; } variant-picker.variant-picker .gemhelpli .gemhelpwraps, .gemhelpli a.gemhelpwraps { display: grid !important; grid-template-columns: auto 1fr !important; grid-template-areas: "icon title" "icon desc" !important; align-items: center !important; gap: 0 14px !important; padding: 12px 16px !important; background: var(--color-paper) !important; border: 0 !important; border-left: 2px solid var(--color-gold) !important; border-radius: 0 !important; font-family: var(--font-body) !important; font-size: 13px !important; color: var(--color-charcoal) !important; margin: 0 !important; min-height: 0 !important; box-shadow: none !important; text-align: left !important; font-weight: 400 !important; text-decoration: none !important; position: relative !important; } variant-picker.variant-picker .gemhelpli .gemhelpwraps::before, .gemhelpli a.gemhelpwraps::before { grid-area: icon !important; content: "i" !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; border: 1px solid var(--color-gold-deep) !important; border-radius: 50% !important; font-family: var(--font-editorial) !important; font-style: italic !important; font-size: 11px !important; font-weight: 400 !important; color: var(--color-gold-deep) !important; flex-shrink: 0 !important; background: transparent !important; align-self: center !important; } variant-picker.variant-picker .gemhelpli .gemhelpwraps:hover, .gemhelpli a.gemhelpwraps:hover { background: var(--color-linen) !important; } variant-picker.variant-picker .gemhelpli .gemhelpwraps span:first-of-type, .gemhelpli a.gemhelpwraps span:first-of-type { grid-area: title !important; font-family: var(--font-body) !important; font-size: 13px !important; font-style: normal !important; font-weight: 500 !important; color: var(--color-ink) !important; display: block !important; margin: 0 0 2px 0 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; } variant-picker.variant-picker .gemhelpli .gemhelpwraps span:last-of-type, .gemhelpli a.gemhelpwraps span:last-of-type { grid-area: desc !important; font-family: var(--font-body) !important; font-size: 13px !important; font-style: normal !important; font-weight: 400 !important; color: var(--color-charcoal) !important; display: block !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; } variant-picker.variant-picker .gemhelpli .gemhelpwraps br, .gemhelpli a.gemhelpwraps br { display: none !important; } .clzslgemslrt, variant-picker.variant-picker .clzslgemslrt { display: none !important; } .product-form button[type="submit"], button.product-form__cart-submit, .product__submit-button, button[name="add"], .add-to-cart, [data-product-form] button[type="submit"] { background: var(--color-ink) !important; color: var(--color-ivory) !important; font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; padding: 18px 32px !important; border-radius: 2px !important; border: 0 !important; width: 100% !important; cursor: pointer !important; transition: background 200ms var(--ease-sateur) !important; line-height: 1 !important; min-height: 0 !important; height: auto !important; } .product-form button[type="submit"]:hover, button[name="add"]:hover { background: var(--color-charcoal) !important; } .product-form button[type="submit"] *, button[name="add"] * { color: inherit !important; font: inherit !important; } [data-shopify="payment-button"] button, .shopify-payment-button button { font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.16em !important; border-radius: 2px !important; height: auto !important; padding: 18px 32px !important; min-height: 0 !important; } .product [data-block-type="image"] { margin: 24px 0 18px !important; padding-top: 24px !important; position: relative !important; border-top: 1px solid var(--color-hairline) !important; } .product [data-block-type="image"]::before { content: "AS FEATURED IN" !important; display: block !important; text-align: center !important; font-family: var(--font-body) !important; font-size: 10px !important; letter-spacing: 0.32em !important; text-transform: uppercase !important; color: var(--color-warm-gray) !important; font-weight: 500 !important; margin-bottom: 16px !important; } .trust-row { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; margin: 16px 0 0 !important; padding: 0 !important; border: 0 !important; } .trust-item { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 8px !important; font-family: var(--font-body) !important; font-size: 10px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--color-charcoal) !important; font-weight: 500 !important; line-height: 1.3 !important; } .trust-item__icon { color: var(--color-gold-deep) !important; width: 22px !important; height: 22px !important; } @media (max-width: 640px) { .trust-row { grid-template-columns: repeat(2, 1fr) !important; gap: 16px 8px !important; } .trust-item { font-size: 9.5px !important; gap: 6px !important; } } /* POPUPS */ .fancybox-bg { background: rgba(13, 10, 8, 0.85) !important; } .fancybox-content { background: var(--color-ivory) !important; padding: 0 !important; border-radius: 2px !important; max-width: 720px !important; width: 92vw !important; font-family: var(--font-body) !important; color: var(--color-charcoal) !important; box-shadow: 0 30px 80px rgba(13, 10, 8, 0.35) !important; } .fancybox-button { background: var(--color-ink) !important; color: var(--color-ivory) !important; border-radius: 50% !important; } .fancybox-button:hover { background: var(--color-signature) !important; } .fancybox-content .rngsizes, .rngsizes { width: 100% !important; max-width: 720px !important; padding: 36px 40px !important; background: var(--color-ivory) !important; font-family: var(--font-body) !important; color: var(--color-charcoal) !important; } .fancybox-content #hidden-contentx, .fancybox-content #hidden-contentgems, #hidden-contentx, #hidden-contentgems { height: auto !important; max-height: 80vh !important; padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; } .rngsizes .modal-header { border: 0 !important; border-bottom: 1px solid var(--color-hairline) !important; padding: 0 0 18px 0 !important; margin-bottom: 22px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; } .rngsizes .modal-title, .rngsizes h4.modal-title.gmtypeh { font-family: var(--font-display) !important; font-size: 22px !important; font-weight: 500 !important; color: var(--color-ink) !important; margin: 0 !important; letter-spacing: -0.01em !important; text-transform: none !important; text-align: left !important; white-space: normal !important; display: flex !important; align-items: center !important; gap: 12px !important; } .rngsizes .modal-title img { display: none !important; } .rngsizes .modal-title::before { content: "" !important; display: inline-block !important; width: 28px !important; height: 28px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; vertical-align: middle !important; flex-shrink: 0 !important; } #hidden-contentx .rngsizes .modal-title::before, .fancybox-content[id*="contentx"] .rngsizes .modal-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%238B6F44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='20' r='9'/%3E%3Cpath d='M11 11l-2-6h14l-2 6'/%3E%3Ccircle cx='16' cy='5.5' r='1' fill='%238B6F44'/%3E%3C/svg%3E") !important; } #hidden-contentgems .rngsizes .modal-title::before, .fancybox-content[id*="contentgems"] .rngsizes .modal-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%238B6F44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4l8 8-8 16-8-16 8-8z'/%3E%3Cpath d='M8 12h16M16 4l-4 8M16 4l4 8M12 12l4 16M20 12l-4 16'/%3E%3C/svg%3E") !important; } .rngsizes .modal-body { padding: 0 !important; } .rngsizes .rte { padding: 0 !important; } .rngsizes p { font-family: var(--font-body) !important; font-size: 14px !important; line-height: 1.65 !important; color: var(--color-charcoal) !important; margin: 0 0 14px !important; text-align: left !important; } .rngsizes p strong, .rngsizes strong { color: var(--color-ink) !important; font-weight: 500 !important; font-family: var(--font-display) !important; font-size: 15px !important; } .rngsizes em, .rngsizes p em { font-family: var(--font-editorial) !important; font-style: italic !important; color: var(--color-charcoal) !important; } .rngsizes h4:not(.modal-title) { font-family: var(--font-display) !important; font-size: 17px !important; font-weight: 500 !important; color: var(--color-ink) !important; margin: 22px 0 10px !important; letter-spacing: -0.005em !important; } .rngsizes .table-wrap { margin: 16px 0 !important; border: 0 !important; padding: 0 !important; background: transparent !important; } .rngsizes .table-wrap:has(table) { border: 1px solid var(--color-hairline) !important; border-radius: 2px !important; overflow: auto !important; -webkit-overflow-scrolling: touch !important; } .rngsizes .table-wrap img { max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto !important; border: 0 !important; border-radius: 0 !important; } .rngsizes table { width: 100% !important; border-spacing: 0 !important; border: 0 !important; border-radius: 0 !important; text-align: center !important; background: var(--color-warm-white) !important; font-family: var(--font-body) !important; } .rngsizes table th { padding: 11px 14px !important; background: var(--color-ink) !important; color: var(--color-ivory) !important; font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; text-align: center !important; border: 0 !important; border-right: 1px solid rgba(245, 237, 227, 0.15) !important; } .rngsizes table th:last-child { border-right: 0 !important; } .rngsizes table td { padding: 12px 14px !important; font-family: var(--font-body) !important; font-size: 13.5px !important; color: var(--color-charcoal) !important; border: 0 !important; border-bottom: 1px solid var(--color-hairline) !important; border-right: 1px solid var(--color-hairline) !important; text-align: center !important; background: transparent !important; } .rngsizes table tr:last-child td { border-bottom: 0 !important; } .rngsizes table td:last-child { border-right: 0 !important; } .rngsizes table tbody tr:nth-of-type(2n+1) { background: var(--color-paper) !important; } @media (max-width: 640px) { .fancybox-content .rngsizes, .rngsizes { padding: 24px 22px !important; } .rngsizes .modal-title, .rngsizes h4.modal-title.gmtypeh { font-size: 18px !important; } .rngsizes .modal-title::before { width: 22px !important; height: 22px !important; } .rngsizes p { font-size: 13px !important; } .rngsizes table th, .rngsizes table td { padding: 9px 8px !important; font-size: 11.5px !important; } } @media (max-width: 640px) { .pdp-main-price__sale, .pdp-main-price__regular { font-size: 26px !important; } .pdp-main-price__compare { font-size: 15px !important; } variant-picker.variant-picker fieldset.variant-picker__option { margin-bottom: 16px !important; } variant-picker.variant-picker .variant-picker__option-info { margin-bottom: 8px !important; } .sateur-vp-legend { font-size: 11px !important; letter-spacing: 0.16em !important; } .sateur-vp-value { font-size: 13px !important; } variant-picker.variant-picker label.block-swatch:not(.gemswatch) { min-width: 58px !important; padding: 9px 12px !important; font-size: 11px !important; } variant-picker.variant-picker label.block-swatch:not(.gemswatch) > span { font-size: 11px !important; } variant-picker.variant-picker label.block-swatch.gemswatch { padding: 14px 130px 14px 16px !important; min-height: 80px !important; } variant-picker.variant-picker label.gemswatch .gem-price { top: 14px !important; right: 16px !important; } variant-picker.variant-picker label.gemswatch .gemswra strong { font-size: 14.5px !important; gap: 8px !important; margin-bottom: 4px !important; } variant-picker.variant-picker label.gemswatch .gem-desc { font-size: 12.5px !important; } variant-picker.variant-picker label.gemswatch .gem-price .price-sale { font-size: 16px !important; } variant-picker.variant-picker label.gemswatch .gem-price .price-regular { font-size: 12px !important; } .sateur-stone-anchor { font-size: 10px !important; margin-top: 4px !important; } .sateur-signature-badge { font-size: 8.5px !important; padding: 2px 7px !important; letter-spacing: 0.16em !important; } .product-form button[type="submit"], button[name="add"] { padding: 16px 24px !important; font-size: 11.5px !important; letter-spacing: 0.20em !important; } } /* === PDP FAQ packaging mobile fix v2 (2026-05-05) === */ /* Replaces v1 which caused horizontal viewport overflow on mobile. v1 used `width: 100vw` + negative-margin breakout INSIDE a parent that already had its own 100vw breakout — stacking two breakouts under html { overflow-x: clip } broke on mobile Safari and shifted the entire page right. v2 keeps the image visually large but uses width: 100% (relative to .faq__inner), plus overflow: hidden on the section as a safety net. To revert: delete this whole sub-block. */ .faq { overflow: hidden !important; } @media (max-width: 900px) { .faq__image { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 22px !important; aspect-ratio: 1 / 1 !important; max-height: none !important; overflow: hidden !important; border-radius: 2px !important; } .faq__image img { width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover !important; display: block !important; } } /* === END PDP FAQ packaging mobile fix v2 === */ /* === PDP v20 END === */ /* === HOME v1 START === */ /* Sateur Homepage — full-width custom-liquid sections matching homepage-v6.html */ :root { --home-signature: #E55B28; --home-signature-deep: #C04512; --home-ivory: #F5EDE3; --home-paper: #FBF8F1; --home-warm-white: #FAF7F2; --home-linen: #EEE6D6; --home-gold: #B8986A; --home-gold-deep: #8B6F44; --home-gold-light: #D9C9A2; --home-ink: #1A1614; --home-charcoal: #3A332C; --home-warm-gray: #6B6057; --home-hairline: rgba(26,22,20,0.10); --home-hairline-strong: rgba(26,22,20,0.16); --home-noir: #0D0A08; --home-f-display: 'Playfair Display', Georgia, serif; --home-f-editorial: 'Cormorant Garamond', Georgia, serif; --home-f-body: 'Jost', system-ui, sans-serif; --home-ease: cubic-bezier(0.2, 0.6, 0.2, 1); } /* === HOME FULL-WIDTH BREAKOUT — 4-strategy fix (PDP pattern, applied 2026-05-03 v2) === */ html { overflow-x: clip; } /* Do NOT add body { overflow-x: hidden } — causes mobile scroll jank */ /* Strategy 1: Direct section IDs */ #shopify-section-home_three_moments_header, #shopify-section-home_value_banner, #shopify-section-home_categories, #shopify-section-home_selected_banner, #shopify-section-home_collections, #shopify-section-home_influencer, #shopify-section-home_marquee, #shopify-section-home_press, #shopify-section-home_story, #shopify-section-home_about, #shopify-section-home_view_all_cta, #shopify-section-home_hero_video, #shopify-section-home_ending_banner, #shopify-section-home_featured_grid, /* Strategy 2: Substring match (catches Shopify template-prefixed IDs) */ [id*="home_three_moments_header"], [id*="home_value_banner"], [id*="home_categories"], [id*="home_selected_banner"], [id*="home_collections"], [id*="home_influencer"], [id*="home_marquee"], [id*="home_press"], [id*="home_story"], [id*="home_about"], [id*="home_view_all_cta"], [id*="home_hero_video"], [id*="home_ending_banner"], [id*="home_featured_grid"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } /* Strategy 3: Inner-element direct breakout — MOST RELIABLE. These are the wrapper class names on each custom-liquid's outer div. */ .home-3m-head, .home-value, .home-cats, .home-sel-banner, .home-coll, .home-inf, .home-marquee, .home-press, .home-story, .home-about, .home-vac, .home-hero, .home-ending, .home-featured { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* Strategy 4: Override any container max-width on parent custom-liquid wrappers */ .shopify-section--custom-liquid { max-width: none !important; width: 100% !important; padding: 0 !important; } .shopify-section--custom-liquid > .shopify-section--custom-liquid__content, .shopify-section--custom-liquid .container { max-width: none !important; padding: 0 !important; } /* === END HOME FULL-WIDTH BREAKOUT === */ /* --- 1. Three Moments header --- */ .home-3m-head { padding: 80px 24px 32px; text-align: center; max-width: 760px; margin: 0 auto; background: var(--home-ivory); } .home-3m-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .home-3m-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.015em; color: var(--home-ink); margin: 0 0 16px; } .home-3m-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 400; } .home-3m-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 18px; color: var(--home-charcoal); margin: 0; } @media (max-width: 768px) { .home-3m-head { padding: 56px 20px 24px; } } /* --- 2. Value Banner --- */ .home-value { background: var(--home-noir); color: var(--home-ivory); padding: 100px 48px; text-align: center; } .home-value-inner { max-width: 880px; margin: 0 auto; } .home-value-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 22px; } .home-value-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 24px; color: var(--home-ivory); text-wrap: balance; } .home-value-title em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); } .home-value-body { font-family: var(--home-f-editorial); font-style: italic; font-size: 19px; line-height: 1.7; color: var(--home-gold-light); max-width: 680px; margin: 0 auto; text-wrap: pretty; } @media (max-width: 768px) { .home-value { padding: 80px 28px 88px; } .home-value-eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 22px; } .home-value-title { font-size: 30px; line-height: 1.18; margin-bottom: 30px; max-width: 320px; margin-left: auto; margin-right: auto; } .home-value-body { font-size: 15.5px; line-height: 1.78; max-width: 340px; } } /* --- 3. Categories --- */ .home-cats { padding: 100px 48px; background: var(--home-paper); } @media (max-width: 768px) { .home-cats { padding: 64px 20px; } } .home-cats-head { max-width: 1440px; margin: 0 auto 48px; text-align: center; } .home-cats-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .home-cats-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.015em; color: var(--home-ink); margin: 0 0 16px; max-width: 760px; margin-left: auto; margin-right: auto; } .home-cats-title em { font-family: var(--home-f-editorial); font-style: italic; } .home-cats-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 18px; color: var(--home-charcoal); max-width: 580px; margin: 0 auto; } .home-cats-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 900px) { .home-cats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } .home-cat { position: relative; aspect-ratio: 3/4; overflow: hidden; cursor: pointer; background: var(--home-warm-white); display: block; text-decoration: none; } .home-cat-img, .home-cat-img img { width: 100%; height: 100%; object-fit: cover; } .home-cat-img img { transition: transform 800ms var(--home-ease); } .home-cat:hover .home-cat-img img { transform: scale(1.05); } .home-cat-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0) 50%, rgba(13,10,8,0.65) 100%); pointer-events: none; } .home-cat-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 24px; color: var(--home-ivory); } .home-cat-name { font-family: var(--home-f-display); font-size: 22px; font-weight: 500; color: var(--home-ivory); margin-bottom: 4px; } .home-cat-cap { font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-gold-light); } /* --- 4. Selected Pieces banner --- */ .home-sel-banner { position: relative; height: 560px; overflow: hidden; background: var(--home-noir); } @media (max-width: 900px) { .home-sel-banner { height: 460px; } } @media (max-width: 600px) { .home-sel-banner { height: 420px; } } .home-sel-img { position: absolute; inset: 0; z-index: 1; } .home-sel-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.94) contrast(1.04); } .home-sel-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.06) 0%, rgba(13,10,8,0) 30%, rgba(13,10,8,0.40) 70%, rgba(13,10,8,0.78) 100%), linear-gradient(90deg, rgba(13,10,8,0.40) 0%, rgba(13,10,8,0) 55%); } .home-sel-content { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; max-width: 1440px; margin: 0 auto; padding: 0 56px 64px; color: var(--home-ivory); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; } @media (max-width: 768px) { .home-sel-content { padding: 0 24px 36px; grid-template-columns: 1fr; gap: 18px; } } .home-sel-text { max-width: 580px; } .home-sel-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 18px; } .home-sel-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--home-signature); } .home-sel-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0 0 16px; } .home-sel-title em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); font-weight: 300; } .home-sel-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--home-gold-light); line-height: 1.5; max-width: 480px; margin: 0; } .home-sel-cta { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-ivory); font-weight: 500; padding-bottom: 6px; border-bottom: 1px solid var(--home-ivory); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; transition: all 250ms var(--home-ease); text-decoration: none; } .home-sel-cta:hover { color: var(--home-signature); border-color: var(--home-signature); } /* --- 5. Collections --- */ .home-coll { padding: 100px 48px; background: var(--home-paper); } @media (max-width: 768px) { .home-coll { padding: 64px 20px; } } .home-coll-head { max-width: 1440px; margin: 0 auto 48px; display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; } .home-coll-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 16px; } .home-coll-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.015em; color: var(--home-ink); max-width: 600px; margin: 0; } .home-coll-title em { font-family: var(--home-f-editorial); font-style: italic; } .home-coll-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 16px; color: var(--home-charcoal); max-width: 380px; margin: 0; } .home-coll-grid { max-width: 1440px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .home-coll-card { flex: 0 1 calc(20% - 10px); aspect-ratio: 3/4; position: relative; overflow: hidden; cursor: pointer; display: block; text-decoration: none; } @media (max-width: 1024px) { .home-coll-card { flex: 0 1 calc(50% - 6px); } .home-coll-card:nth-child(5) { display: none; } } @media (max-width: 600px) { .home-coll-grid { gap: 8px; } .home-coll-card { flex: 0 1 calc(50% - 4px); } } .home-coll-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .home-coll-card:hover img { transform: scale(1.05); } .home-coll-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0) 45%, rgba(13,10,8,0.72) 100%); pointer-events: none; } .home-coll-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px; color: var(--home-ivory); } .home-coll-name { font-family: var(--home-f-display); font-style: italic; font-size: 20px; font-weight: 400; margin-bottom: 4px; color: var(--home-ivory); } .home-coll-cap { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--home-gold-light); font-weight: 500; } /* --- 6. Influencer wall --- */ .home-inf { padding: 100px 48px; background: var(--home-linen); } @media (max-width: 768px) { .home-inf { padding: 64px 20px; } } .home-inf-header { max-width: 1240px; margin: 0 auto 48px; text-align: center; } .home-inf-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .home-inf-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.015em; color: var(--home-ink); margin: 0 0 16px; } .home-inf-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 400; } .home-inf-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 18px; color: var(--home-charcoal); max-width: 620px; margin: 0 auto; line-height: 1.55; } .home-inf-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } @media (max-width: 1024px) { .home-inf-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .home-inf-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } } .home-inf-tile { aspect-ratio: 1; overflow: hidden; background: var(--home-paper); cursor: pointer; } .home-inf-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .home-inf-tile:hover img { transform: scale(1.05); } /* --- 7. Orange marquee --- */ .home-marquee { background: var(--home-signature); color: var(--home-ivory); padding: 22px 0; overflow: hidden; } .home-marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: home-marquee-scroll 60s linear infinite; font-family: var(--home-f-editorial); font-style: italic; font-size: 26px; font-weight: 400; } .home-marquee-item { display: inline-flex; align-items: center; gap: 32px; } .home-marquee-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--home-ivory); flex-shrink: 0; } @keyframes home-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* --- 8. Press strip --- */ .home-press { padding: 56px 48px; background: var(--home-linen); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } .home-press-inner { max-width: 1240px; margin: 0 auto; text-align: center; } .home-press-label { display: block; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 24px; } .home-press-logos { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 56px); flex-wrap: wrap; } .home-press-logo { font-family: var(--home-f-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); color: var(--home-charcoal); opacity: 0.7; transition: opacity 250ms var(--home-ease); } .home-press-logo:hover { opacity: 1; color: var(--home-ink); } /* --- 9. Brand Story --- */ .home-story { padding: 100px 48px; background: var(--home-ivory); } .home-story-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } @media (max-width: 900px) { .home-story-inner { grid-template-columns: 1fr; gap: 32px; } } .home-story-media { aspect-ratio: 4/5; overflow: hidden; background: var(--home-paper); } .home-story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .home-story-media:hover img { transform: scale(1.03); } .home-story-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .home-story-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -0.015em; color: var(--home-ink); margin: 0 0 24px; } .home-story-title em { font-family: var(--home-f-editorial); font-style: italic; } .home-story-body { font-family: var(--home-f-editorial); font-style: italic; font-size: 18px; line-height: 1.6; color: var(--home-charcoal); margin: 0 0 22px; } .home-story-cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; background: var(--home-ink); color: var(--home-ivory); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: all 250ms var(--home-ease); text-decoration: none; } .home-story-cta:hover { background: var(--home-signature); } @media (max-width: 768px) { .home-story { padding: 32px 20px; } .home-story-inner { gap: 16px; } .home-story-media { aspect-ratio: auto; overflow: visible; background: transparent; } .home-story-media picture, .home-story-media img { width: 100%; height: auto; max-height: none; display: block; } .home-story-eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 12px; } .home-story-title { font-size: 28px; line-height: 1.1; margin-bottom: 14px; } .home-story-body { font-size: 15px; line-height: 1.55; margin-bottom: 12px; } .home-story-cta { padding: 13px 24px; font-size: 10px; letter-spacing: 0.22em; margin-top: 4px; } } /* --- 10. About --- */ .home-about { padding: 80px 48px; background: var(--home-paper); text-align: center; } @media (max-width: 768px) { .home-about { padding: 56px 20px; } } .home-about-inner { max-width: 720px; margin: 0 auto; } .home-about-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.15; letter-spacing: -0.01em; color: var(--home-ink); margin: 0 0 18px; } .home-about-title em { font-family: var(--home-f-editorial); font-style: italic; } .home-about-body { font-family: var(--home-f-editorial); font-style: italic; font-size: 17px; color: var(--home-charcoal); margin: 0 0 28px; line-height: 1.6; } .home-about-links { display: inline-flex; gap: 24px; flex-wrap: wrap; justify-content: center; } .home-about-link { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: var(--home-ink); padding-bottom: 4px; border-bottom: 1px solid var(--home-ink); text-decoration: none; } .home-about-link:hover { color: var(--home-signature); border-color: var(--home-signature); } /* --- 11. View All Pieces CTA (after featured products) --- */ .home-vac { padding: 24px 24px 80px; background: #EFE8E0; text-align: center; } .home-vac-link { display: inline-flex; align-items: center; gap: 12px; padding: 18px 40px; border: 1px solid var(--home-ink); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: var(--home-ink); transition: all 250ms var(--home-ease); text-decoration: none; } .home-vac-link:hover { background: var(--home-ink); color: var(--home-ivory); } .home-vac-link svg { transition: transform 250ms var(--home-ease); } .home-vac-link:hover svg { transform: translateX(4px); } @media (max-width: 768px) { .home-vac { padding: 16px 20px 56px; } .home-vac-link { padding: 16px 32px; font-size: 10px; letter-spacing: 0.22em; } } /* --- 12. Hero video (full-bleed, autoplay loop muted) --- */ .home-hero { position: relative; min-height: 720px; height: calc(100vh - 90px); max-height: 920px; overflow: hidden; background: var(--home-noir); display: flex; align-items: center; } @media (max-width: 768px) { .home-hero { height: auto; min-height: 0; max-height: 90vh; aspect-ratio: 462 / 720; } } .home-hero-bg { position: absolute; inset: 0; z-index: 1; background: var(--home-noir); } .home-hero-bg video, .home-hero-bg .home-hero-poster { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; } .home-hero-poster { transition: opacity 600ms var(--home-ease); z-index: 1; } .home-hero-bg video { z-index: 2; } .home-hero-scrim { position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, rgba(13,10,8,0.62) 0%, rgba(13,10,8,0.28) 45%, rgba(13,10,8,0) 80%), linear-gradient(180deg, rgba(13,10,8,0) 50%, rgba(13,10,8,0.45) 100%); pointer-events: none; } .home-hero-inner { position: relative; z-index: 4; max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 56px; color: var(--home-ivory); } @media (max-width: 768px) { .home-hero-inner { padding: 0 24px; } } .home-hero-content { max-width: 540px; } .home-hero-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 14px; } .home-hero-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--home-signature); } .home-hero-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 18px; color: var(--home-ivory); text-wrap: balance; } .home-hero-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 400; color: var(--home-gold-light); } .home-hero-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--home-gold-light); line-height: 1.5; margin: 0 0 28px; max-width: 440px; } .home-hero-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; background: var(--home-ivory); color: var(--home-ink); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: all 250ms var(--home-ease); text-decoration: none; } .home-hero-cta:hover { background: var(--home-signature); color: var(--home-ivory); } .home-hero-cta svg { transition: transform 250ms var(--home-ease); } .home-hero-cta:hover svg { transform: translateX(4px); } @media (max-width: 768px) { .home-hero-eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 16px; } .home-hero-title { font-size: 44px; margin-bottom: 16px; } .home-hero-sub { font-size: 17px; margin-bottom: 28px; } .home-hero-cta { padding: 15px 28px; font-size: 10px; } } /* --- 13. Hero transparent-header coordination (uses theme's own store-header mechanism) --- */ /* When .home-hero has [allow-transparent-header] attribute AND is in the first .shopify-section, the theme's auto-mirrors `allow-transparency` onto itself (theme.js line 4250). We just need to pull the hero up under the header and pad the text down. */ .home-hero[allow-transparent-header] { margin-block-start: calc(-1 * var(--header-height, 90px) * var(--section-is-first, 0)); } .home-hero[allow-transparent-header] .home-hero-inner { padding-top: calc(var(--header-height, 90px) + 24px); padding-bottom: 48px; } @media (max-width: 768px) { .home-hero[allow-transparent-header] .home-hero-inner { padding-top: calc(var(--header-height, 70px) + 16px); padding-bottom: 32px; } } /* --- 14. Ending banner (Maison closer, "Enough is the rarest thing.") --- */ .home-ending, .home-featured { position: relative; min-height: 340px; height: 45vh; max-height: 500px; overflow: hidden; background: var(--home-noir); display: flex; align-items: center; justify-content: center; } .home-ending-img { position: absolute; inset: 0; z-index: 1; } .home-ending-img img { width: 100%; height: 100%; object-fit: cover; } .home-ending-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.18) 0%, rgba(13,10,8,0) 38%, rgba(13,10,8,0.40) 72%, rgba(13,10,8,0.78) 100%), radial-gradient(ellipse at center, rgba(13,10,8,0.45) 0%, rgba(13,10,8,0.18) 60%, rgba(13,10,8,0) 100%); pointer-events: none; } .home-ending-content { position: relative; z-index: 3; max-width: 760px; padding: 0 40px; text-align: center; color: var(--home-ivory); } .home-ending-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 14px; } .home-ending-eyebrow::before, .home-ending-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--home-signature); } .home-ending-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--home-ivory); text-wrap: balance; } .home-ending-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 400; color: var(--home-gold-light); } .home-ending-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; color: var(--home-gold-light); max-width: 620px; margin: 0 auto; text-wrap: pretty; } @media (max-width: 768px) { .home-ending, .home-featured { min-height: 280px; height: 48vh; max-height: 380px; } .home-ending-content { padding: 0 24px; } .home-ending-eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 12px; } .home-ending-eyebrow::before, .home-ending-eyebrow::after { width: 18px; } .home-ending-title { font-size: 28px; line-height: 1.12; margin-bottom: 12px; } .home-ending-sub { font-size: 14.5px; line-height: 1.55; } } /* --- 15. Featured product grid (Maison-style cards with dynamic carat + caption) --- */ .home-featured { padding: 80px 48px; background: var(--home-ivory); } @media (max-width: 768px) { .home-featured { padding: 48px 20px; } } .home-featured-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } @media (max-width: 900px) { .home-featured-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } .home-featured-card { background: var(--home-warm-white); border: 1px solid var(--home-hairline); display: flex; flex-direction: column; position: relative; cursor: pointer; text-decoration: none; transition: border-color 300ms var(--home-ease), transform 300ms var(--home-ease), box-shadow 300ms var(--home-ease); } .home-featured-card:hover { border-color: var(--home-hairline-strong); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(13,10,8,0.06); } .home-featured-media { aspect-ratio: 1 / 1; overflow: hidden; position: relative; background: var(--home-paper); } .home-featured-media-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 600ms var(--home-ease), transform 1000ms var(--home-ease); } .home-featured-media-img--2 { position: absolute; inset: 0; opacity: 0; } .home-featured-card:hover .home-featured-media-img--1 { transform: scale(1.04); } .home-featured-card:hover .home-featured-media-img--2 { opacity: 1; } .home-featured-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--home-ivory); color: var(--home-ink); padding: 6px 11px; font-family: var(--home-f-body); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--home-hairline); } .home-featured-quick { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; padding: 12px 16px; background: var(--home-ivory); color: var(--home-ink); font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--home-ease), transform 300ms var(--home-ease); } .home-featured-card:hover .home-featured-quick { opacity: 1; transform: translateY(0); } .home-featured-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; gap: 6px; } .home-featured-name { font-family: var(--home-f-display); font-size: 17px; font-weight: 500; color: var(--home-ink); line-height: 1.25; letter-spacing: -0.005em; margin: 0; } .home-featured-cap { font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-warm-gray); line-height: 1.4; margin: 0; min-height: 1.4em; } .home-featured-cap:empty::before { content: "—"; color: var(--home-hairline-strong); font-style: normal; } /* home_featured_grid carat — match sitewide pill style for consistency */ .home-featured-carat { position: absolute; top: 14px; right: 14px; z-index: 3; background: rgba(245, 237, 227, 0.92); color: var(--home-charcoal); padding: 5px 10px; font-family: var(--home-f-body); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--home-hairline); pointer-events: none; margin: 0; display: inline-block; } .home-featured-price-row { display: flex; align-items: baseline; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--home-hairline); width: 100%; } .home-featured-price-row > .home-featured-price { margin-right: 4px; } .home-featured-price { font-family: var(--home-f-display); font-size: 17px; color: var(--home-ink); font-weight: 500; letter-spacing: -0.005em; } .home-featured-strike { font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-warm-gray); text-decoration: line-through; text-decoration-thickness: 1px; } .home-featured-save { margin-left: auto; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.18em; color: var(--home-signature); text-transform: uppercase; font-weight: 500; } @media (max-width: 768px) { .home-featured-body { padding: 16px 16px 18px; } .home-featured-name { font-size: 15px; } .home-featured-cap { font-size: 13px; } .home-featured-carat { font-size: 9px; letter-spacing: 0.16em; } .home-featured-price { font-size: 16px; } .home-featured-strike { font-size: 13px; } .home-featured-quick, .home-featured-badge { font-size: 8.5px; padding: 8px 12px; } .home-featured-quick { padding: 10px 14px; } } /* --- 16. SITEWIDE Maison product card overrides (Impact theme .product-card family) --- Applied to ALL product cards across this draft theme: collections, search, related, featured. Adds: card_caption metafield render + carat indicator + Maison color/typography. Scoped strictly to .product-card so doesn't leak to PDP / cart / drawers. */ /* New elements injected by snippets/product-card.liquid patch */ .product-card .product-card__sateur-cap { font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-warm-gray); line-height: 1.4; margin: 4px 0 2px; min-height: 1.4em; } .product-card .product-card__sateur-cap--placeholder { /* Keep layout space when caption empty — invisible but reserves rhythm */ visibility: hidden; } /* OLD carat below-body removed in v12 — now image overlay (.product-card__sateur-carat-pill) */ /* Carat pill — image overlay, top-right corner */ .product-card .product-card__figure { position: relative; } .product-card .product-card__sateur-carat-pill { position: absolute; top: 14px; right: 14px; z-index: 3; background: rgba(245, 237, 227, 0.92); color: var(--home-charcoal); padding: 5px 10px; font-family: var(--home-f-body); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--home-hairline); pointer-events: none; backdrop-filter: blur(2px); } /* Price row — wraps Impact's price-list + my save% in a flex row, left-aligned */ .product-card .product-card__sateur-price-row { display: flex !important; align-items: baseline; gap: 10px; width: 100% !important; flex-basis: 100% !important; align-self: stretch !important; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--home-hairline); } .product-card .product-card__sateur-price-row .price-list, .product-card .product-card__sateur-price-row sale-price-list, .product-card .product-card__sateur-price-row [class*="price-list"] { display: inline-flex !important; align-items: baseline; gap: 10px; flex-wrap: nowrap; } .product-card .product-card__sateur-save { margin-left: auto; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.18em; color: var(--home-signature); text-transform: uppercase; font-weight: 500; white-space: nowrap; } /* FORCE LEFT ALIGN — override Impact's text_alignment=center variant */ .product-card .product-card__info, .product-card .product-card__info--center { text-align: left !important; align-items: flex-start !important; justify-items: start !important; } .product-card .product-card__info--center .v-stack, .product-card .product-card__info .v-stack { text-align: left !important; align-items: flex-start !important; justify-items: start !important; width: 100%; } .product-card .product-card__info--center .product-card__title, .product-card .product-card__info .product-card__title { text-align: left !important; justify-self: start !important; } .product-card .product-card__info--center .rating-with-text, .product-card .product-card__info .rating-with-text { justify-content: flex-start !important; } /* Card outer + hover (Maison-feel, scoped to .product-card) */ .product-card { --product-card-border-color: var(--home-hairline); } .product-card:hover { --product-card-border-color: var(--home-hairline-strong); } /* Title — Playfair, slightly larger, no bold */ .product-card .product-card__title a, .product-card .product-card__title { font-family: var(--home-f-display) !important; font-weight: 500 !important; font-size: 16px; letter-spacing: -0.005em; line-height: 1.25; color: var(--home-ink) !important; } /* Price block — sale price = ink, compare = orange strike (matches PDP doctrine) */ .product-card .price-list .price--highlight, .product-card .price-list [data-price], .product-card .price-list sale-price { font-family: var(--home-f-display) !important; font-weight: 500; color: var(--home-ink) !important; } .product-card .price-list .price--compare, .product-card .price-list compare-at-price { font-family: var(--home-f-editorial) !important; font-style: italic; color: var(--home-signature) !important; text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.85; } /* Vendor — small uppercase tracked, gold */ .product-card .product-card__info [class*="vendor"], .product-card .product-card__info .text-xs { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--home-gold-deep) !important; font-weight: 500; } @media (max-width: 768px) { .product-card .product-card__sateur-cap { font-size: 13px; } .product-card .product-card__sateur-carat { font-size: 9px; letter-spacing: 0.20em; } .product-card .product-card__title a, .product-card .product-card__title { font-size: 14.5px; } } /* --- 17. Price row bottom-align (consistent price position across all cards in a grid) --- */ /* Grid forces all cards to equal height. Inside each card, push the price row to the bottom so it sits at the same vertical position regardless of title/caption length. */ .product-card { display: flex !important; flex-direction: column !important; height: 100%; } .product-card .product-card__info { flex: 1 !important; display: flex !important; flex-direction: column !important; } .product-card .product-card__info .v-stack { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } .product-card .product-card__info .v-stack > * { align-self: stretch !important; width: 100% !important; } /* The marker — push my injected price+save row to bottom */ .product-card .product-card__sateur-price-row { margin-top: auto !important; } /* === HOME MOBILE TUNE-UP v14 — PDP scale alignment (added 2026-05-04) === To revert: find this comment + the matching END comment, delete everything between. No other CSS touched. Sizes follow the PDP scale tables locked after 20 PDP iterations. */ @media (max-width: 768px) { /* --- Hero video (HERO scale) --- */ .home-hero-eyebrow { font-size: 10px; letter-spacing: 0.32em; margin-bottom: 16px; } .home-hero-title { font-size: 34px; line-height: 1.05; margin-bottom: 16px; } .home-hero-sub { font-size: 14.5px; line-height: 1.5; margin-bottom: 24px; max-width: none; } .home-hero-cta { padding: 14px 26px; font-size: 10px; letter-spacing: 0.22em; } /* --- Value banner (MANIFESTO scale) --- */ .home-value { padding: 64px 24px; } .home-value-eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 16px; } .home-value-title { font-size: 28px; line-height: 1.15; margin-bottom: 22px; max-width: 360px; } .home-value-body { font-size: 14.5px; line-height: 1.65; max-width: 360px; } /* --- Selected pieces banner (HERO scale) --- */ .home-sel-banner { height: 460px; } .home-sel-content { padding: 0 24px 36px; gap: 14px; } .home-sel-eyebrow { font-size: 10px; letter-spacing: 0.32em; margin-bottom: 16px; } .home-sel-title { font-size: 34px; line-height: 1.05; margin-bottom: 14px; } .home-sel-sub { font-size: 14.5px; line-height: 1.5; } .home-sel-cta { font-size: 10px; letter-spacing: 0.28em; } /* --- Three Moments header (SECTION TITLE scale) --- */ .home-3m-head { padding: 56px 24px 24px; } .home-3m-eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 14px; } .home-3m-title { font-size: 24px; line-height: 1.15; margin-bottom: 12px; } .home-3m-sub { font-size: 14.5px; line-height: 1.5; } /* --- Categories (SECTION TITLE scale) --- */ .home-cats { padding: 56px 24px; } .home-cats-head { margin-bottom: 32px; } .home-cats-eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 14px; } .home-cats-title { font-size: 24px; line-height: 1.15; margin-bottom: 12px; } .home-cats-sub { font-size: 14.5px; line-height: 1.5; } .home-cat-name { font-size: 18px; } .home-cat-cap { font-size: 12.5px; } /* --- Collections (SECTION TITLE scale) --- */ .home-coll { padding: 56px 24px; } .home-coll-head { margin-bottom: 32px; gap: 16px; } .home-coll-eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 12px; } .home-coll-title { font-size: 24px; line-height: 1.15; } .home-coll-sub { font-size: 14.5px; line-height: 1.5; } .home-coll-name { font-size: 17px; } .home-coll-cap { font-size: 9px; letter-spacing: 0.22em; } /* --- Influencer wall (SECTION TITLE scale) --- */ .home-inf { padding: 48px 20px; } .home-inf-header { margin-bottom: 32px; } .home-inf-eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 14px; } .home-inf-title { font-size: 24px; line-height: 1.15; margin-bottom: 12px; } .home-inf-sub { font-size: 14.5px; line-height: 1.5; } /* --- Marquee (scrolling italic) --- */ .home-marquee-track { font-size: 18px; gap: 40px; } .home-marquee { padding: 16px 0; } /* --- Press strip --- */ .home-press { padding: 40px 24px; } .home-press-label { font-size: 9.5px; letter-spacing: 0.28em; margin-bottom: 18px; } .home-press-logo { font-size: 18px; } /* --- Brand story (SECTION TITLE scale) --- */ .home-story-eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 12px; } .home-story-title { font-size: 24px; line-height: 1.15; margin-bottom: 14px; } .home-story-body { font-size: 14.5px; line-height: 1.55; margin-bottom: 12px; } .home-story-cta { padding: 14px 26px; font-size: 10px; letter-spacing: 0.22em; } /* --- About (smaller section title) --- */ .home-about { padding: 48px 24px; } .home-about-title { font-size: 22px; line-height: 1.2; margin-bottom: 14px; } .home-about-body { font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; } .home-about-link { font-size: 10px; letter-spacing: 0.22em; } /* --- View All CTA --- */ .home-vac { padding: 16px 20px 48px; } .home-vac-link { padding: 14px 28px; font-size: 10px; letter-spacing: 0.22em; } /* --- Ending banner (MANIFESTO scale, 1 step smaller than hero) --- */ .home-ending-eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 12px; } .home-ending-title { font-size: 28px; line-height: 1.1; margin-bottom: 12px; } .home-ending-sub { font-size: 14.5px; line-height: 1.55; } } /* === Phone tightening (≤640px) — slightly smaller, never below readability floor === */ @media (max-width: 640px) { /* Hero */ .home-hero-title { font-size: 28px; line-height: 1.05; } .home-hero-sub { font-size: 13px; } .home-hero-eyebrow { font-size: 9.5px; letter-spacing: 0.28em; } /* Value banner */ .home-value { padding: 48px 20px; } .home-value-title { font-size: 26px; } .home-value-body { font-size: 13px; line-height: 1.65; } /* Selected banner */ .home-sel-banner { height: 420px; } .home-sel-content { padding: 0 20px 28px; } .home-sel-title { font-size: 28px; } .home-sel-sub { font-size: 13px; } /* Three moments */ .home-3m-head { padding: 48px 20px 20px; } .home-3m-title { font-size: 22px; } .home-3m-sub { font-size: 13px; } /* Categories */ .home-cats { padding: 48px 16px; } .home-cats-title { font-size: 22px; } .home-cats-sub { font-size: 13px; } .home-cat-name { font-size: 16px; } .home-cat-cap { font-size: 12px; } /* Collections */ .home-coll { padding: 48px 16px; } .home-coll-title { font-size: 22px; } .home-coll-sub { font-size: 13px; } .home-coll-name { font-size: 16px; } /* Influencer */ .home-inf { padding: 48px 16px; } .home-inf-title { font-size: 22px; } .home-inf-sub { font-size: 13px; } /* Marquee + Press */ .home-marquee-track { font-size: 15px; gap: 32px; } .home-press { padding: 32px 20px; } .home-press-label { font-size: 9px; letter-spacing: 0.24em; margin-bottom: 14px; } .home-press-logo { font-size: 15px; } /* Brand story */ .home-story-title { font-size: 22px; } .home-story-body { font-size: 13px; line-height: 1.55; } /* About */ .home-about { padding: 40px 20px; } .home-about-title { font-size: 20px; } .home-about-body { font-size: 13px; } /* CTA */ .home-vac { padding: 12px 16px 40px; } .home-vac-link { padding: 13px 24px; font-size: 9.5px; } /* Ending */ .home-ending-title { font-size: 24px; } .home-ending-sub { font-size: 13px; } } /* === Tiny phone (≤380px) — only emergency tightening for older iPhone SE-class === */ @media (max-width: 380px) { .home-hero-title { font-size: 26px; } .home-value-title { font-size: 24px; } .home-sel-title { font-size: 26px; } .home-3m-title { font-size: 20px; } .home-cats-title { font-size: 20px; } .home-coll-title { font-size: 20px; } .home-inf-title { font-size: 20px; } .home-story-title { font-size: 20px; } .home-ending-title { font-size: 22px; } .home-marquee-track { font-size: 14px; } } /* === END HOME MOBILE TUNE-UP v14 === */ /* === CARD POLISH v20 (kept from prior session — v-stack stretching) === */ .product-card, .product-card .product-card__info { background: #FBF8F1 !important; } .product-card .product-card__info .v-stack { display: grid !important; grid-template-columns: 1fr !important; justify-items: stretch !important; width: 100% !important; gap: 4px !important; } .product-card .product-card__info .v-stack > * { width: 100% !important; justify-self: stretch !important; } .product-card .product-card__sateur-price-wrap { flex: 0 1 auto !important; display: inline-flex !important; align-items: baseline !important; gap: 8px !important; } .product-card .product-card__sateur-save { flex: 0 0 auto !important; white-space: nowrap !important; font-family: var(--home-f-body) !important; font-size: 10px !important; letter-spacing: 0.18em !important; color: var(--home-signature) !important; text-transform: uppercase !important; font-weight: 500 !important; } .product-card .product-card__sateur-cap, .product-card .product-card__sateur-cap--placeholder { margin-bottom: 14px !important; } /* === END CARD POLISH v20 === */ /* === CARD POLISH v21 (added 2026-05-04) — price row pinned to card bottom === Prereq: snippet now renders price-row as DIRECT CHILD of .product-card__info (sibling of .v-stack). With info as flex column + price-row at end + margin-top:auto, price ALWAYS pins to bottom of card. This ensures all cards in a grid show prices on the same Y position regardless of caption length. To revert: delete this block (search "CARD POLISH v21"). === */ .product-card .product-card__info { display: flex !important; flex-direction: column !important; flex: 1 !important; width: 100% !important; } /* v-stack (title + caption) takes content height — does NOT grow */ .product-card .product-card__info > .v-stack, .product-card .product-card__info .v-stack { flex: 0 0 auto !important; width: 100% !important; } /* Price row — direct child of info, pinned to bottom */ .product-card .product-card__info > .product-card__sateur-price-row { margin-top: auto !important; width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: baseline !important; border-top: 1px solid var(--home-hairline) !important; padding-top: 16px !important; gap: 10px !important; } /* Disable any leftover ::before from v18/v19/v20 attempts */ .product-card .product-card__sateur-price-row::before { display: none !important; content: none !important; } /* === END CARD POLISH v21 === */ /* === CARD POLISH v22 (added 2026-05-04) — final bottom-pinning fix === Issue: v13's height: 100% on .product-card was WITHOUT !important — Impact's CSS overrides. Fix: use CSS Grid on .product-card itself with grid-template-rows: auto 1fr. Image gets auto height, info gets 1fr (fills remaining card height deterministically). Inside info, flex column with margin-top: auto on price-row pins it to bottom. To revert: delete this block (search "CARD POLISH v22"). === */ /* CSS Grid on outer card: image auto, info fills remaining vertical space */ .product-card { display: grid !important; grid-template-rows: auto 1fr !important; height: 100% !important; min-height: 100% !important; } /* Info gets the 1fr row → guaranteed full remaining height */ .product-card .product-card__info { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; width: 100% !important; } /* Direct children of info: v-stack content-height, anything else content-height */ .product-card .product-card__info > .v-stack { flex: 0 0 auto !important; } .product-card .product-card__info > [class*="product-card__aside"], .product-card .product-card__info > .rating-with-text { flex: 0 0 auto !important; } /* THE PIN: price-row uses margin-top: auto in a flex column with extra space → bottom */ .product-card .product-card__info > .product-card__sateur-price-row { margin-top: auto !important; flex: 0 0 auto !important; } /* === END CARD POLISH v22 === */ /* === HOME v1 END === */ /* === COLL 1RING v1 START === */ /* Sateur — /collections/the-1-ring custom-liquid sections (13 total) Full-width breakout via 4-strategy pattern (matches PDP/HOME approach) Mobile typography aligned to PDP scale (Felix's tuned values) */ /* === FULL-WIDTH BREAKOUT === */ #shopify-section-coll1ring_breadcrumb, #shopify-section-coll1ring_banner_hero, #shopify-section-coll1ring_intro, #shopify-section-coll1ring_mwt_film, #shopify-section-coll1ring_press, #shopify-section-coll1ring_manifesto, #shopify-section-coll1ring_media_grid, #shopify-section-coll1ring_featured_header,#shopify-section-coll1ring_featured_grid, #shopify-section-coll1ring_atmospheric, #shopify-section-coll1ring_marquee, #shopify-section-coll1ring_mwt_reverse, #shopify-section-coll1ring_press_2, #shopify-section-coll1ring_faq, [id*="coll1ring_breadcrumb"], [id*="coll1ring_banner_hero"], [id*="coll1ring_intro"], [id*="coll1ring_mwt_film"], [id*="coll1ring_press"], [id*="coll1ring_manifesto"], [id*="coll1ring_media_grid"], [id*="coll1ring_featured_header"],[id*="coll1ring_featured_grid"], [id*="coll1ring_atmospheric"], [id*="coll1ring_marquee"], [id*="coll1ring_mwt_reverse"], [id*="coll1ring_press_2"], [id*="coll1ring_faq"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } .coll1ring-breadcrumb, .coll1ring-banner, .coll1ring-intro, .coll1ring-mwt, .coll1ring-press, .coll1ring-manifesto-rt, .coll1ring-media-grid, .coll1ring-featured, .coll1ring-atmos, .coll1ring-marquee, .coll1ring-faq-section { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* === BREADCRUMB === */ .coll1ring-breadcrumb { background: var(--home-ivory); border-bottom: 1px solid var(--home-hairline); } .coll1ring-breadcrumb-inner { max-width: 1440px; margin: 0 auto; padding: 14px 48px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--home-warm-gray); font-weight: 400; } .coll1ring-breadcrumb-inner a { color: var(--home-warm-gray); transition: color 200ms var(--home-ease); } .coll1ring-breadcrumb-inner a:hover { color: var(--home-ink); } .coll1ring-breadcrumb-sep { margin: 0 12px; color: rgba(26,22,20,0.22); } .coll1ring-breadcrumb-current { color: var(--home-ink); } @media (max-width: 768px) { .coll1ring-breadcrumb-inner { padding: 12px 24px; font-size: 10px; } } /* === BANNER HERO === */ .coll1ring-banner { position: relative; min-height: 540px; height: 70vh; max-height: 760px; overflow: hidden; background: var(--home-noir); display: flex; align-items: center; } .coll1ring-banner-bg { position: absolute; inset: 0; z-index: 1; } .coll1ring-banner-bg img { width: 100%; height: 100%; object-fit: cover; } .coll1ring-banner-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.20) 0%, rgba(13,10,8,0) 40%, rgba(13,10,8,0.55) 100%); } .coll1ring-banner-inner { position: relative; z-index: 3; max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 48px; color: var(--home-ivory); text-align: center; } .coll1ring-banner-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 22px; display: inline-flex; align-items: center; gap: 14px; } .coll1ring-banner-eyebrow::before, .coll1ring-banner-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--home-signature); } .coll1ring-banner-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 18px; color: var(--home-ivory); text-wrap: balance; } .coll1ring-banner-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; color: var(--home-gold-light); } .coll1ring-banner-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--home-gold-light); line-height: 1.5; max-width: 540px; margin: 0 auto; } .coll1ring-banner-meta { display: inline-flex; gap: 20px; align-items: center; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(245,237,227,0.22); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: var(--home-ivory); } .coll1ring-banner-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--home-signature); } @media (max-width: 768px) { .coll1ring-banner { min-height: 460px; height: 55vh; } .coll1ring-banner-inner { padding: 0 24px; } .coll1ring-banner-title { font-size: 34px; } .coll1ring-banner-sub { font-size: 14.5px; } } @media (max-width: 640px) { .coll1ring-banner { min-height: 400px; height: 50vh; } .coll1ring-banner-eyebrow { font-size: 10px; margin-bottom: 18px; } .coll1ring-banner-title { font-size: 28px; } .coll1ring-banner-sub { font-size: 13px; } .coll1ring-banner-meta { font-size: 9.5px; gap: 12px; flex-wrap: wrap; justify-content: center; } } /* === INTRO === */ .coll1ring-intro { padding: 96px 48px; background: var(--home-ivory); text-align: center; } .coll1ring-intro-inner { max-width: 880px; margin: 0 auto; } .coll1ring-intro-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 22px; } .coll1ring-intro-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin-bottom: 20px; } .coll1ring-intro-title em { font-family: var(--home-f-editorial); font-style: italic; } .coll1ring-intro-body { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--home-charcoal); max-width: 620px; margin: 0 auto; } @media (max-width: 768px) { .coll1ring-intro { padding: 64px 24px; } .coll1ring-intro-title { font-size: 24px; } .coll1ring-intro-body { font-size: 14.5px; } } @media (max-width: 640px) { .coll1ring-intro { padding: 56px 20px; } .coll1ring-intro-eyebrow { font-size: 10px; margin-bottom: 18px; } .coll1ring-intro-title { font-size: 22px; margin-bottom: 16px; } .coll1ring-intro-body { font-size: 13px; line-height: 1.55; } } /* === MWT (media + text) === */ .coll1ring-mwt { padding: 96px 48px; background: var(--home-paper); } .coll1ring-mwt--ivory { background: var(--home-ivory); } .coll1ring-mwt--reverse .coll1ring-mwt-inner { direction: rtl; } .coll1ring-mwt--reverse .coll1ring-mwt-inner > * { direction: ltr; } .coll1ring-mwt-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .coll1ring-mwt-media { aspect-ratio: 4/5; overflow: hidden; background: var(--home-linen); position: relative; } .coll1ring-mwt-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .coll1ring-mwt-media:hover img { transform: scale(1.03); } .coll1ring-mwt-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .coll1ring-mwt-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin-bottom: 20px; } .coll1ring-mwt-title em { font-family: var(--home-f-editorial); font-style: italic; } .coll1ring-mwt-body { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; color: var(--home-charcoal); margin-bottom: 18px; } .coll1ring-mwt-body:last-of-type { margin-bottom: 24px; } .coll1ring-mwt-cta { display: inline-flex; align-items: center; gap: 12px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--home-ink); font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid var(--home-ink); transition: all 200ms var(--home-ease); text-decoration: none; } .coll1ring-mwt-cta:hover { color: var(--home-signature); border-color: var(--home-signature); } @media (max-width: 900px) { .coll1ring-mwt-inner { grid-template-columns: 1fr; gap: 32px; } .coll1ring-mwt--reverse .coll1ring-mwt-inner { direction: ltr; } } @media (max-width: 768px) { .coll1ring-mwt { padding: 64px 24px; } .coll1ring-mwt-title { font-size: 24px; } .coll1ring-mwt-body { font-size: 14.5px; line-height: 1.6; } } @media (max-width: 640px) { .coll1ring-mwt { padding: 48px 20px; } .coll1ring-mwt-eyebrow { font-size: 10px; margin-bottom: 14px; } .coll1ring-mwt-title { font-size: 22px; margin-bottom: 16px; } .coll1ring-mwt-body { font-size: 13px; } .coll1ring-mwt-cta { font-size: 10px; } } /* === PRESS === */ .coll1ring-press { padding: 48px 48px; background: var(--home-linen); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } .coll1ring-press-inner { max-width: 1240px; margin: 0 auto; text-align: center; } .coll1ring-press-label { display: block; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 22px; } .coll1ring-press-logos { display: flex; justify-content: center; align-items: center; gap: clamp(24px, 4.5vw, 56px); flex-wrap: wrap; } .coll1ring-press-logo { font-family: var(--home-f-display); font-style: italic; font-weight: 400; font-size: clamp(18px, 2vw, 26px); color: var(--home-charcoal); opacity: 0.7; } @media (max-width: 640px) { .coll1ring-press { padding: 36px 20px; } .coll1ring-press-label { font-size: 9px; margin-bottom: 16px; } .coll1ring-press-logo { font-size: 16px; } } /* === MANIFESTO === */ .coll1ring-manifesto-rt { padding: 140px 48px; background: var(--home-ivory); text-align: center; } .coll1ring-manifesto-rt-inner { max-width: 920px; margin: 0 auto; } .coll1ring-manifesto-rt-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 24px; } .coll1ring-manifesto-rt-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin-bottom: 24px; text-wrap: balance; } .coll1ring-manifesto-rt-title em { font-family: var(--home-f-editorial); font-style: italic; } .coll1ring-manifesto-rt-body { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.65; color: var(--home-charcoal); max-width: 680px; margin: 0 auto; } @media (max-width: 768px) { .coll1ring-manifesto-rt { padding: 72px 24px; } .coll1ring-manifesto-rt-title { font-size: 28px; line-height: 1.1; margin-bottom: 20px; } .coll1ring-manifesto-rt-body { font-size: 14.5px; line-height: 1.6; } } @media (max-width: 640px) { .coll1ring-manifesto-rt { padding: 64px 20px; } .coll1ring-manifesto-rt-eyebrow { font-size: 10px; margin-bottom: 18px; } .coll1ring-manifesto-rt-title { font-size: 26px; } .coll1ring-manifesto-rt-body { font-size: 13px; } } /* === MEDIA GRID === */ .coll1ring-media-grid { padding: 96px 48px; background: var(--home-paper); } .coll1ring-media-grid-inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .coll1ring-media-tile { aspect-ratio: 4/5; overflow: hidden; background: var(--home-linen); position: relative; cursor: pointer; } .coll1ring-media-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .coll1ring-media-tile:hover img { transform: scale(1.05); } .coll1ring-media-tile-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0) 50%, rgba(13,10,8,0.55) 100%); } .coll1ring-media-tile-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px; color: var(--home-ivory); } .coll1ring-media-tile-tag { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 6px; } .coll1ring-media-tile-title { font-family: var(--home-f-display); font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--home-ivory); margin: 0; } .coll1ring-media-tile-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 400; } @media (max-width: 900px) { .coll1ring-media-grid-inner { grid-template-columns: 1fr; gap: 12px; } } @media (max-width: 768px) { .coll1ring-media-grid { padding: 56px 24px; } } @media (max-width: 640px) { .coll1ring-media-grid { padding: 48px 16px; } .coll1ring-media-tile-tag { font-size: 9px; margin-bottom: 4px; } .coll1ring-media-tile-title { font-size: 18px; } } /* === FEATURED CURATED + product cards === */ .coll1ring-featured { padding: 96px 48px; background: var(--home-ivory); } .coll1ring-featured-head { max-width: 1240px; margin: 0 auto 48px; text-align: center; } .coll1ring-featured-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .coll1ring-featured-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin-bottom: 14px; } .coll1ring-featured-title em { font-family: var(--home-f-editorial); font-style: italic; } .coll1ring-featured-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(15px, 1.5vw, 18px); color: var(--home-charcoal); max-width: 540px; margin: 0 auto; } .coll1ring-products-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .coll1ring-product { background: var(--home-warm-white); border: 1px solid var(--home-hairline); cursor: pointer; transition: all 300ms var(--home-ease); display: flex; flex-direction: column; position: relative; text-decoration: none; color: inherit; } .coll1ring-product:hover { border-color: var(--home-hairline-strong); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(13,10,8,0.06); } .coll1ring-product-media { aspect-ratio: 1; overflow: hidden; position: relative; background: var(--home-paper); } .coll1ring-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--home-ease), opacity 600ms var(--home-ease); display: block; } .coll1ring-product-media-2 { position: absolute; inset: 0; opacity: 0; } .coll1ring-product:hover .coll1ring-product-media img { transform: scale(1.04); } .coll1ring-product:hover .coll1ring-product-media-2 { opacity: 1; } .coll1ring-product-quick { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; padding: 10px 14px; background: var(--home-ivory); color: var(--home-ink); font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; text-align: center; opacity: 0; transform: translateY(8px); transition: all 300ms var(--home-ease); } .coll1ring-product:hover .coll1ring-product-quick { opacity: 1; transform: translateY(0); } .coll1ring-product-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; gap: 6px; } .coll1ring-product-name { font-family: var(--home-f-display); font-size: 16px; font-weight: 500; color: var(--home-ink); line-height: 1.25; letter-spacing: -0.005em; margin: 0; } .coll1ring-product-cap { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-warm-gray); line-height: 1.4; margin: 0 0 4px; min-height: 1.4em; } .coll1ring-product-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--home-hairline); width: 100%; } .coll1ring-product-price-row > .coll1ring-product-price { margin-right: 2px; } .coll1ring-product-price { font-family: var(--home-f-display); font-size: 16px; color: var(--home-ink); font-weight: 500; } .coll1ring-product-strike { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-signature); text-decoration: line-through; } .coll1ring-product-save { margin-left: auto; font-family: var(--home-f-body); font-size: 9.5px; letter-spacing: 0.16em; color: var(--home-signature); text-transform: uppercase; font-weight: 500; } @media (max-width: 1024px) { .coll1ring-products-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media (max-width: 768px) { .coll1ring-featured { padding: 64px 24px; } .coll1ring-featured-title { font-size: 24px; margin-bottom: 12px; } .coll1ring-featured-sub { font-size: 14.5px; } .coll1ring-products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .coll1ring-product-quick { display: none; } .coll1ring-product-name { font-size: 14px; } .coll1ring-product-cap { font-size: 12px; } .coll1ring-product-price { font-size: 14px; } .coll1ring-product-strike { font-size: 12px; } } @media (max-width: 640px) { .coll1ring-featured { padding: 48px 16px; } .coll1ring-featured-eyebrow { font-size: 10px; margin-bottom: 14px; } .coll1ring-featured-title { font-size: 22px; } .coll1ring-featured-sub { font-size: 13px; } .coll1ring-product-body { padding: 16px 14px 18px; gap: 5px; } .coll1ring-product-name { font-size: 13px; } .coll1ring-product-cap { font-size: 11.5px; } .coll1ring-product-price { font-size: 13px; } .coll1ring-product-strike { font-size: 11.5px; } .coll1ring-product-save { font-size: 9px; } } /* === ATMOSPHERIC === */ .coll1ring-atmos { position: relative; height: 60vh; min-height: 480px; max-height: 640px; overflow: hidden; background: var(--home-noir); display: flex; align-items: center; justify-content: center; } .coll1ring-atmos-bg { position: absolute; inset: 0; z-index: 1; } .coll1ring-atmos-bg img { width: 100%; height: 100%; object-fit: cover; } .coll1ring-atmos-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.30) 0%, rgba(13,10,8,0.10) 50%, rgba(13,10,8,0.55) 100%); } .coll1ring-atmos-inner { position: relative; z-index: 3; max-width: 880px; padding: 0 48px; text-align: center; color: var(--home-ivory); } .coll1ring-atmos-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 22px; } .coll1ring-atmos-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0; text-wrap: balance; } .coll1ring-atmos-title em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); } @media (max-width: 768px) { .coll1ring-atmos { height: 50vh; min-height: 400px; } .coll1ring-atmos-inner { padding: 0 24px; } .coll1ring-atmos-title { font-size: 24px; } } @media (max-width: 640px) { .coll1ring-atmos { height: 44vh; min-height: 360px; } .coll1ring-atmos-eyebrow { font-size: 10px; margin-bottom: 16px; } .coll1ring-atmos-title { font-size: 22px; } } /* === MARQUEE === */ .coll1ring-marquee { background: var(--home-signature); color: var(--home-ivory); padding: 22px 0; overflow: hidden; } .coll1ring-marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: home-marquee-scroll 60s linear infinite; font-family: var(--home-f-editorial); font-style: italic; font-size: 24px; } .coll1ring-marquee-item { display: inline-flex; align-items: center; gap: 32px; } .coll1ring-marquee-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--home-ivory); flex-shrink: 0; } @media (max-width: 768px) { .coll1ring-marquee-track { font-size: 20px; gap: 40px; } } @media (max-width: 640px) { .coll1ring-marquee { padding: 18px 0; } .coll1ring-marquee-track { font-size: 18px; } } /* === FAQ === */ .coll1ring-faq-section { padding: 96px 48px; background: var(--home-paper); } .coll1ring-faq-section-inner { max-width: 880px; margin: 0 auto; } .coll1ring-faq-section-head { margin-bottom: 40px; text-align: center; } .coll1ring-faq-section-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 16px; } .coll1ring-faq-section-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.015em; color: var(--home-ink); margin: 0; } .coll1ring-faq-section-title em { font-family: var(--home-f-editorial); font-style: italic; } .coll1ring-accordion { border-top: 1px solid var(--home-hairline); } .coll1ring-accordion-item { border-bottom: 1px solid var(--home-hairline); } .coll1ring-accordion-trigger { width: 100%; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; font-family: var(--home-f-display); font-weight: 500; font-size: 16px; color: var(--home-ink); transition: color 200ms var(--home-ease); cursor: pointer; background: none; border: none; } .coll1ring-accordion-trigger:hover { color: var(--home-signature); } .coll1ring-accordion-icon { width: 14px; height: 14px; flex-shrink: 0; position: relative; transition: transform 300ms var(--home-ease); } .coll1ring-accordion-icon::before, .coll1ring-accordion-icon::after { content: ""; position: absolute; background: var(--home-ink); } .coll1ring-accordion-icon::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); } .coll1ring-accordion-icon::after { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); transition: transform 300ms var(--home-ease); } .coll1ring-accordion-item--open .coll1ring-accordion-icon::after { transform: translateX(-50%) scaleY(0); } .coll1ring-accordion-body { max-height: 0; overflow: hidden; transition: max-height 400ms var(--home-ease); } .coll1ring-accordion-item--open .coll1ring-accordion-body { max-height: 600px; } .coll1ring-accordion-body-inner { padding: 0 38px 22px 0; font-family: var(--home-f-editorial); font-style: italic; font-size: 15px; line-height: 1.65; color: var(--home-charcoal); } @media (max-width: 768px) { .coll1ring-faq-section { padding: 64px 24px; } .coll1ring-faq-section-title { font-size: 24px; } } @media (max-width: 640px) { .coll1ring-faq-section { padding: 48px 20px; } .coll1ring-faq-section-head { margin-bottom: 28px; } .coll1ring-faq-section-eyebrow { font-size: 10px; margin-bottom: 12px; } .coll1ring-faq-section-title { font-size: 22px; } .coll1ring-accordion-trigger { font-size: 15px; padding: 18px 0; } .coll1ring-accordion-body-inner { font-size: 13.5px; padding-bottom: 18px; } } /* mwt media — video variant (matches home_hero_video pattern) */ .coll1ring-mwt-media--video { background: var(--home-noir); } .coll1ring-mwt-media--video .coll1ring-mwt-video { width: 100%; height: 100%; object-fit: cover; display: block; } /* coll1ring split header/grid */ .coll1ring-featured--header-only { padding-bottom: 0 !important; } .coll1ring-featured--grid-only { padding-top: 32px !important; } @media (max-width: 768px) { .coll1ring-featured--grid-only { padding-top: 24px !important; } } @media (max-width: 640px) { .coll1ring-featured--grid-only { padding-top: 20px !important; } } /* === COLL 1RING v1 — readability patch v2 (2026-05-04) === */ /* Title legibility on luminous lifestyle hero. To revert: delete this whole sub-block. */ .coll1ring-banner-scrim { background: linear-gradient( 180deg, rgba(13,10,8,0.45) 0%, rgba(13,10,8,0.28) 35%, rgba(13,10,8,0.32) 65%, rgba(13,10,8,0.62) 100% ) !important; } /* (text-shadow removed per Felix request 2026-05-05) */ .coll1ring-banner-eyebrow, .coll1ring-banner-sub { text-shadow: 0 1px 8px rgba(13,10,8,0.45); } @media (max-width: 768px) { .coll1ring-banner-scrim { background: linear-gradient( 180deg, rgba(13,10,8,0.55) 0%, rgba(13,10,8,0.38) 35%, rgba(13,10,8,0.42) 65%, rgba(13,10,8,0.65) 100% ) !important; } } /* === END COLL 1RING v1 readability patch v2 === */ /* === END COLL 1RING v1 === */ /* === ABOUT v1 START === */ /* Sateur — page.sateur-2026-about template (13 custom-liquid sections) */ /* Full-width breakout — strategy 1+2+3+4 */ #shopify-section-about_breadcrumb,#shopify-section-about_hero,#shopify-section-about_statement, #shopify-section-about_chapter1,#shopify-section-about_chapter2,#shopify-section-about_chapter3, #shopify-section-about_stats,#shopify-section-about_community,#shopify-section-about_manifesto, #shopify-section-about_featured_header,#shopify-section-about_trust,#shopify-section-about_marquee,#shopify-section-about_press, [id*="about_breadcrumb"],[id*="about_hero"],[id*="about_statement"],[id*="about_chapter1"], [id*="about_chapter2"],[id*="about_chapter3"],[id*="about_stats"],[id*="about_community"], [id*="about_manifesto"],[id*="about_featured_header"],[id*="about_trust"],[id*="about_marquee"],[id*="about_press"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } .about-breadcrumb,.about-hero,.about-statement,.about-chapter,.about-stats,.about-community, .about-manifesto-section,.about-feat-products,.about-trust-strip,.about-marquee,.about-press { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* BREADCRUMB */ .about-breadcrumb { background: var(--home-ivory); border-bottom: 1px solid var(--home-hairline); } .about-breadcrumb-inner { max-width: 1440px; margin: 0 auto; padding: 14px 48px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--home-warm-gray); } .about-breadcrumb-inner a { color: var(--home-warm-gray); transition: color 200ms var(--home-ease); } .about-breadcrumb-inner a:hover { color: var(--home-ink); } .about-breadcrumb-sep { margin: 0 12px; color: rgba(26,22,20,0.22); } .about-breadcrumb-current { color: var(--home-ink); } @media (max-width: 768px) { .about-breadcrumb-inner { padding: 12px 24px; font-size: 10px; } } /* HERO */ .about-hero { position: relative; min-height: 540px; height: 70vh; max-height: 760px; overflow: hidden; background: var(--home-noir); display: flex; align-items: center; } .about-hero-bg { position: absolute; inset: 0; z-index: 1; } .about-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .about-hero-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.30) 0%, rgba(13,10,8,0) 40%, rgba(13,10,8,0.55) 100%); } .about-hero-inner { position: relative; z-index: 3; max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 48px; color: var(--home-ivory); } .about-hero-content { max-width: 720px; } .about-hero-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 22px; display: inline-flex; align-items: center; gap: 14px; } .about-hero-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--home-signature); } .about-hero-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 18px; color: var(--home-ivory); text-wrap: balance; } .about-hero-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; color: var(--home-gold-light); } .about-hero-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--home-gold-light); line-height: 1.5; max-width: 520px; margin: 0; } @media (max-width: 768px) { .about-hero { min-height: 460px; height: 55vh; } .about-hero-inner { padding: 0 24px; } .about-hero-title { font-size: 34px; } .about-hero-sub { font-size: 14.5px; } } @media (max-width: 640px) { .about-hero { min-height: 400px; height: 50vh; } .about-hero-eyebrow { font-size: 10px; margin-bottom: 18px; } .about-hero-title { font-size: 28px; } .about-hero-sub { font-size: 13px; } } /* STATEMENT */ .about-statement { padding: 96px 48px; background: var(--home-paper); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); text-align: center; } .about-statement-inner { max-width: 760px; margin: 0 auto; } .about-statement-divider { width: 56px; height: 1px; background: var(--home-signature); margin: 0 auto 28px; } .about-statement-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 28px; } .about-statement-quote { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.25; color: var(--home-ink); margin: 0 0 18px; text-wrap: balance; } .about-statement-quote em { font-family: var(--home-f-editorial); font-style: italic; } .about-statement-sig { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--home-warm-gray); } @media (max-width: 768px) { .about-statement { padding: 64px 24px; } .about-statement-quote { font-size: 22px; } } @media (max-width: 640px) { .about-statement { padding: 56px 20px; } .about-statement-eyebrow { font-size: 10px; margin-bottom: 22px; } .about-statement-quote { font-size: 20px; line-height: 1.3; } .about-statement-sig { font-size: 10px; } } /* CHAPTERS */ .about-chapter { padding: 96px 48px; background: var(--home-paper); } .about-chapter--ivory { background: var(--home-ivory); } .about-chapter--reverse .about-chapter-inner { direction: rtl; } .about-chapter--reverse .about-chapter-inner > * { direction: ltr; } .about-chapter-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .about-chapter-media { aspect-ratio: 4/5; overflow: hidden; background: var(--home-linen); } .about-chapter-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .about-chapter-media:hover img { transform: scale(1.03); } .about-chapter-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .about-chapter-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 22px; text-wrap: balance; } .about-chapter-title em { font-family: var(--home-f-editorial); font-style: italic; } .about-chapter-body { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; color: var(--home-charcoal); margin: 0 0 18px; } .about-chapter-cta { display: inline-flex; align-items: center; gap: 12px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--home-ink); font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid var(--home-ink); transition: all 200ms var(--home-ease); text-decoration: none; margin-top: 8px; } .about-chapter-cta:hover { color: var(--home-signature); border-color: var(--home-signature); } @media (max-width: 900px) { .about-chapter-inner { grid-template-columns: 1fr; gap: 32px; } .about-chapter--reverse .about-chapter-inner { direction: ltr; } } @media (max-width: 768px) { .about-chapter { padding: 64px 24px; } .about-chapter-title { font-size: 24px; margin-bottom: 18px; } .about-chapter-body { font-size: 14.5px; line-height: 1.6; } } @media (max-width: 640px) { .about-chapter { padding: 48px 20px; } .about-chapter-eyebrow { font-size: 10px; margin-bottom: 14px; } .about-chapter-title { font-size: 22px; } .about-chapter-body { font-size: 13px; } .about-chapter-cta { font-size: 10px; } } /* STATS */ .about-stats { padding: 96px 48px; background: var(--home-noir); color: var(--home-ivory); } .about-stats-head { max-width: 1240px; margin: 0 auto 56px; text-align: center; } .about-stats-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 18px; } .about-stats-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; color: var(--home-ivory); margin: 0; } .about-stats-title em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); } .about-stats-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .about-stat { text-align: center; padding: 24px 12px; border-top: 1px solid rgba(245,237,227,0.15); } .about-stat-num { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); line-height: 1; color: var(--home-ivory); margin-bottom: 12px; } .about-stat-num em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); } .about-stat-label { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--home-gold-light); font-weight: 500; } @media (max-width: 900px) { .about-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 768px) { .about-stats { padding: 64px 24px; } .about-stats-title { font-size: 24px; } .about-stats-head { margin-bottom: 36px; } .about-stat-num { font-size: 26px; } } @media (max-width: 640px) { .about-stats { padding: 56px 20px; } .about-stats-eyebrow { font-size: 10px; } .about-stats-title { font-size: 22px; } .about-stat-num { font-size: 24px; } .about-stat-label { font-size: 9px; } } /* COMMUNITY */ .about-community { padding: 96px 48px; background: var(--home-linen); } .about-community-head { max-width: 1240px; margin: 0 auto 48px; text-align: center; } .about-community-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .about-community-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; color: var(--home-ink); margin: 0 0 16px; } .about-community-title em { font-family: var(--home-f-editorial); font-style: italic; } .about-community-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 18px; color: var(--home-charcoal); max-width: 620px; margin: 0 auto; line-height: 1.55; } .about-community-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .about-community-tile { aspect-ratio: 1; overflow: hidden; background: var(--home-paper); cursor: pointer; } .about-community-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .about-community-tile:hover img { transform: scale(1.05); } @media (max-width: 1024px) { .about-community-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .about-community { padding: 56px 20px; } .about-community-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } .about-community-title { font-size: 24px; } .about-community-sub { font-size: 14.5px; } } @media (max-width: 640px) { .about-community { padding: 48px 16px; } .about-community-eyebrow { font-size: 10px; } .about-community-title { font-size: 22px; } .about-community-sub { font-size: 13px; } } /* MANIFESTO */ .about-manifesto-section { position: relative; min-height: 480px; height: 60vh; max-height: 720px; overflow: hidden; background: var(--home-noir); display: flex; align-items: center; justify-content: center; } .about-manifesto-section-bg { position: absolute; inset: 0; z-index: 1; } .about-manifesto-section-bg img { width: 100%; height: 100%; object-fit: cover; } .about-manifesto-section-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.30) 0%, rgba(13,10,8,0.10) 50%, rgba(13,10,8,0.55) 100%); } .about-manifesto-section-inner { position: relative; z-index: 3; max-width: 880px; padding: 0 48px; text-align: center; color: var(--home-ivory); } .about-manifesto-section-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 22px; } .about-manifesto-section-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0 0 22px; text-wrap: balance; } .about-manifesto-section-title em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); } .about-manifesto-section-body { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.6; color: var(--home-gold-light); max-width: 640px; margin: 0 auto; } @media (max-width: 768px) { .about-manifesto-section { min-height: 420px; height: 55vh; } .about-manifesto-section-inner { padding: 0 24px; } .about-manifesto-section-title { font-size: 28px; line-height: 1.15; } .about-manifesto-section-body { font-size: 14.5px; } } @media (max-width: 640px) { .about-manifesto-section { min-height: 380px; } .about-manifesto-section-eyebrow { font-size: 10px; margin-bottom: 18px; } .about-manifesto-section-title { font-size: 26px; } .about-manifesto-section-body { font-size: 13px; } } /* FEATURED PRODUCTS */ .about-feat-products { padding: 96px 48px; background: var(--home-ivory); } .about-feat-products-head { max-width: 1240px; margin: 0 auto 48px; text-align: center; } .about-feat-products-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .about-feat-products-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; color: var(--home-ink); margin: 0 0 14px; } .about-feat-products-title em { font-family: var(--home-f-editorial); font-style: italic; } .about-feat-products-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(15px, 1.5vw, 18px); color: var(--home-charcoal); max-width: 540px; margin: 0 auto; } .about-feat-products-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .about-product { background: var(--home-warm-white); border: 1px solid var(--home-hairline); cursor: pointer; transition: all 300ms var(--home-ease); display: flex; flex-direction: column; position: relative; text-decoration: none; color: inherit; } .about-product:hover { border-color: var(--home-hairline-strong); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(13,10,8,0.06); } .about-product-media { aspect-ratio: 1; overflow: hidden; position: relative; background: var(--home-paper); } .about-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--home-ease); display: block; } .about-product:hover .about-product-media img { transform: scale(1.04); } .about-product-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; gap: 6px; } .about-product-name { font-family: var(--home-f-display); font-size: 16px; font-weight: 500; color: var(--home-ink); line-height: 1.25; letter-spacing: -0.005em; margin: 0; } .about-product-cap { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-warm-gray); line-height: 1.4; margin: 0; min-height: 1.4em; } .about-product-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--home-hairline); width: 100%; } .about-product-price-row > .about-product-price { margin-right: 2px; } .about-product-price { font-family: var(--home-f-display); font-size: 16px; color: var(--home-ink); font-weight: 500; } .about-product-strike { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-signature); text-decoration: line-through; } .about-product-save { margin-left: auto; font-family: var(--home-f-body); font-size: 9.5px; letter-spacing: 0.16em; color: var(--home-signature); text-transform: uppercase; font-weight: 500; } @media (max-width: 1024px) { .about-feat-products-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media (max-width: 768px) { .about-feat-products { padding: 64px 24px; } .about-feat-products-title { font-size: 24px; } .about-feat-products-sub { font-size: 14.5px; } .about-feat-products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .about-product-body { padding: 16px 14px 18px; gap: 5px; } .about-product-name { font-size: 14px; } .about-product-cap { font-size: 12px; } .about-product-price { font-size: 14px; } .about-product-strike { font-size: 12px; } } @media (max-width: 640px) { .about-feat-products { padding: 48px 16px; } .about-feat-products-eyebrow { font-size: 10px; } .about-feat-products-title { font-size: 22px; } .about-feat-products-sub { font-size: 13px; } .about-product-name { font-size: 13px; } .about-product-cap { font-size: 11.5px; } .about-product-price { font-size: 13px; } .about-product-strike { font-size: 11.5px; } .about-product-save { font-size: 9px; } } /* TRUST STRIP */ .about-trust-strip { padding: 64px 48px; background: var(--home-paper); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } .about-trust-strip-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .about-trust-item { text-align: center; padding: 0 12px; } .about-trust-item-icon { width: 36px; height: 36px; margin: 0 auto 14px; color: var(--home-gold-deep); } .about-trust-item-icon svg { width: 100%; height: 100%; display: block; } .about-trust-item-title { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--home-ink); font-weight: 500; margin-bottom: 8px; } .about-trust-item-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-warm-gray); line-height: 1.4; } @media (max-width: 900px) { .about-trust-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 768px) { .about-trust-strip { padding: 48px 24px; } .about-trust-item-icon { width: 30px; height: 30px; margin-bottom: 10px; } .about-trust-item-title { font-size: 10px; } .about-trust-item-sub { font-size: 12.5px; } } @media (max-width: 640px) { .about-trust-strip { padding: 40px 20px; } .about-trust-item { padding: 0 6px; } .about-trust-item-title { font-size: 10px; letter-spacing: 0.16em; } .about-trust-item-sub { font-size: 12px; } } /* MARQUEE */ .about-marquee { background: var(--home-signature); color: var(--home-ivory); padding: 22px 0; overflow: hidden; } .about-marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: home-marquee-scroll 60s linear infinite; font-family: var(--home-f-editorial); font-style: italic; font-size: 24px; } .about-marquee-item { display: inline-flex; align-items: center; gap: 32px; } .about-marquee-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--home-ivory); flex-shrink: 0; } @media (max-width: 768px) { .about-marquee-track { font-size: 20px; gap: 40px; } } @media (max-width: 640px) { .about-marquee { padding: 18px 0; } .about-marquee-track { font-size: 18px; } } /* PRESS */ .about-press { padding: 56px 48px; background: var(--home-linen); } .about-press-inner { max-width: 1240px; margin: 0 auto; text-align: center; } .about-press-label { display: block; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 24px; } .about-press-logos { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 56px); flex-wrap: wrap; } .about-press-logo { font-family: var(--home-f-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); color: var(--home-charcoal); opacity: 0.7; } @media (max-width: 640px) { .about-press { padding: 36px 20px; } .about-press-label { font-size: 9px; margin-bottom: 16px; } .about-press-logo { font-size: 16px; } } /* Split header/grid handling — when headed splits from grid, collapse adjacent padding for visual continuity */ .about-feat-products--header-only { padding-bottom: 0 !important; } .about-feat-products--grid-only { padding-top: 32px !important; } @media (max-width: 768px) { .about-feat-products--grid-only { padding-top: 24px !important; } } @media (max-width: 640px) { .about-feat-products--grid-only { padding-top: 20px !important; } } /* === END ABOUT v1 === */ /* === CGEN v1 START === */ /* Sateur — collection.sateur-2026-general template (8 custom-liquid sections + native main-collection) */ /* Full-width breakout */ #shopify-section-cgen_breadcrumb,#shopify-section-cgen_hero,#shopify-section-cgen_editorial_intro, #shopify-section-cgen_trust_strip,#shopify-section-cgen_related_collections_header, #shopify-section-cgen_related_collections_grid,#shopify-section-cgen_marquee,#shopify-section-cgen_press, [id*="cgen_breadcrumb"],[id*="cgen_hero"],[id*="cgen_editorial_intro"],[id*="cgen_trust_strip"], [id*="cgen_related_collections_header"],[id*="cgen_related_collections_grid"], [id*="cgen_marquee"],[id*="cgen_press"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } .cgen-breadcrumb,.cgen-hero,.cgen-editorial-intro,.cgen-trust-strip,.cgen-related-coll,.cgen-marquee,.cgen-press { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* BREADCRUMB */ .cgen-breadcrumb { background: var(--home-ivory); border-bottom: 1px solid var(--home-hairline); } .cgen-breadcrumb-inner { max-width: 1440px; margin: 0 auto; padding: 14px 48px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--home-warm-gray); } .cgen-breadcrumb-inner a { color: var(--home-warm-gray); transition: color 200ms var(--home-ease); } .cgen-breadcrumb-inner a:hover { color: var(--home-ink); } .cgen-breadcrumb-sep { margin: 0 12px; color: rgba(26,22,20,0.22); } .cgen-breadcrumb-current { color: var(--home-ink); } @media (max-width: 768px) { .cgen-breadcrumb-inner { padding: 12px 24px; font-size: 10px; } } /* HERO */ .cgen-hero { position: relative; min-height: 480px; height: 60vh; max-height: 680px; overflow: hidden; background: var(--home-noir); display: flex; align-items: center; } .cgen-hero-bg { position: absolute; inset: 0; z-index: 1; } .cgen-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .cgen-hero-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.30) 0%, rgba(13,10,8,0) 40%, rgba(13,10,8,0.55) 100%); } .cgen-hero-inner { position: relative; z-index: 3; max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 48px; color: var(--home-ivory); text-align: center; } .cgen-hero-content { max-width: 720px; margin: 0 auto; } .cgen-hero-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 20px; display: inline-flex; align-items: center; gap: 14px; } .cgen-hero-eyebrow::before, .cgen-hero-eyebrow::after { content: ""; width: 24px; height: 1px; background: var(--home-signature); } .cgen-hero-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 16px; color: var(--home-ivory); text-wrap: balance; } .cgen-hero-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; color: var(--home-gold-light); } .cgen-hero-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(15px, 1.5vw, 18px); color: var(--home-gold-light); line-height: 1.5; max-width: 540px; margin: 0 auto 24px; } .cgen-hero-meta { display: inline-flex; align-items: center; gap: 0; padding-top: 16px; border-top: 1px solid rgba(245,237,227,0.22); font-family: var(--home-f-body); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--home-ivory); flex-wrap: wrap; justify-content: center; } .cgen-hero-meta-item { display: inline-flex; align-items: center; } .cgen-hero-meta-item:not(:first-child)::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--home-signature); margin: 0 14px; flex-shrink: 0; vertical-align: middle; } @media (max-width: 640px) { .cgen-hero-meta-item:not(:first-child)::before { margin: 0 10px; } } @media (max-width: 768px) { .cgen-hero { min-height: 420px; height: 50vh; } .cgen-hero-inner { padding: 0 24px; } .cgen-hero-title { font-size: 30px; } .cgen-hero-sub { font-size: 14.5px; } } @media (max-width: 640px) { .cgen-hero { min-height: 360px; height: 45vh; } .cgen-hero-eyebrow { font-size: 10px; margin-bottom: 16px; } .cgen-hero-title { font-size: 26px; } .cgen-hero-sub { font-size: 13px; } .cgen-hero-meta { font-size: 9.5px; gap: 0; flex-wrap: wrap; justify-content: center; } } /* EDITORIAL INTRO */ .cgen-editorial-intro { padding: 96px 48px; background: var(--home-paper); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } .cgen-editorial-intro-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .cgen-editorial-intro-media { aspect-ratio: 4/5; overflow: hidden; background: var(--home-linen); } .cgen-editorial-intro-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .cgen-editorial-intro-media:hover img { transform: scale(1.03); } .cgen-editorial-intro-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .cgen-editorial-intro-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 22px; text-wrap: balance; } .cgen-editorial-intro-title em { font-family: var(--home-f-editorial); font-style: italic; } .cgen-editorial-intro-body { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; color: var(--home-charcoal); margin: 0 0 18px; } .cgen-editorial-intro-cta { display: inline-flex; align-items: center; gap: 12px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--home-ink); font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid var(--home-ink); transition: all 200ms var(--home-ease); text-decoration: none; margin-top: 8px; } .cgen-editorial-intro-cta:hover { color: var(--home-signature); border-color: var(--home-signature); } @media (max-width: 900px) { .cgen-editorial-intro-inner { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 768px) { .cgen-editorial-intro { padding: 64px 24px; } .cgen-editorial-intro-title { font-size: 24px; margin-bottom: 18px; } .cgen-editorial-intro-body { font-size: 14.5px; } } @media (max-width: 640px) { .cgen-editorial-intro { padding: 48px 20px; } .cgen-editorial-intro-eyebrow { font-size: 10px; margin-bottom: 14px; } .cgen-editorial-intro-title { font-size: 22px; } .cgen-editorial-intro-body { font-size: 13px; } } /* TRUST STRIP */ .cgen-trust-strip { padding: 64px 48px; background: var(--home-ivory); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } .cgen-trust-strip-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .cgen-trust-item { text-align: center; padding: 0 12px; } .cgen-trust-item-icon { width: 36px; height: 36px; margin: 0 auto 14px; color: var(--home-gold-deep); } .cgen-trust-item-icon svg { width: 100%; height: 100%; display: block; } .cgen-trust-item-title { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--home-ink); font-weight: 500; margin-bottom: 8px; } .cgen-trust-item-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-warm-gray); line-height: 1.4; } @media (max-width: 900px) { .cgen-trust-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 768px) { .cgen-trust-strip { padding: 48px 24px; } .cgen-trust-item-icon { width: 30px; height: 30px; } .cgen-trust-item-title { font-size: 10px; } .cgen-trust-item-sub { font-size: 12.5px; } } @media (max-width: 640px) { .cgen-trust-strip { padding: 40px 20px; } .cgen-trust-item-title { letter-spacing: 0.16em; } .cgen-trust-item-sub { font-size: 12px; } } /* RELATED COLLECTIONS */ .cgen-related-coll { padding: 96px 48px; background: var(--home-ivory); } .cgen-related-coll--header-only { padding-bottom: 0 !important; } .cgen-related-coll--grid-only { padding-top: 32px !important; padding-bottom: 96px; } .cgen-related-coll-head { max-width: 1240px; margin: 0 auto 36px; text-align: center; } .cgen-related-coll-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 16px; } .cgen-related-coll-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.015em; color: var(--home-ink); margin: 0 0 12px; } .cgen-related-coll-title em { font-family: var(--home-f-editorial); font-style: italic; } .cgen-related-coll-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(15px, 1.5vw, 17px); color: var(--home-charcoal); max-width: 540px; margin: 0 auto; } .cgen-related-coll-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .cgen-rel-coll { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--home-paper); display: block; text-decoration: none; } .cgen-rel-coll img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .cgen-rel-coll:hover img { transform: scale(1.05); } .cgen-rel-coll-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0) 50%, rgba(13,10,8,0.65) 100%); pointer-events: none; } .cgen-rel-coll-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px; color: var(--home-ivory); } .cgen-rel-coll-name { font-family: var(--home-f-display); font-size: 20px; font-weight: 500; color: var(--home-ivory); margin-bottom: 4px; } .cgen-rel-coll-cap { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-gold-light); } @media (max-width: 1024px) { .cgen-related-coll-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .cgen-related-coll { padding: 56px 24px; } .cgen-related-coll--grid-only { padding-top: 24px !important; padding-bottom: 56px; } .cgen-related-coll-title { font-size: 24px; } .cgen-related-coll-sub { font-size: 14.5px; } .cgen-rel-coll-name { font-size: 17px; } .cgen-rel-coll-cap { font-size: 12px; } } @media (max-width: 640px) { .cgen-related-coll { padding: 48px 16px; } .cgen-related-coll--grid-only { padding-top: 20px !important; padding-bottom: 48px; } .cgen-related-coll-eyebrow { font-size: 10px; margin-bottom: 12px; } .cgen-related-coll-title { font-size: 22px; } .cgen-related-coll-sub { font-size: 13px; } } /* MARQUEE */ .cgen-marquee { background: var(--home-signature); color: var(--home-ivory); padding: 22px 0; overflow: hidden; } .cgen-marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: home-marquee-scroll 60s linear infinite; font-family: var(--home-f-editorial); font-style: italic; font-size: 24px; } .cgen-marquee-item { display: inline-flex; align-items: center; gap: 32px; } .cgen-marquee-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--home-ivory); flex-shrink: 0; } @media (max-width: 768px) { .cgen-marquee-track { font-size: 20px; gap: 40px; } } @media (max-width: 640px) { .cgen-marquee { padding: 18px 0; } .cgen-marquee-track { font-size: 18px; } } /* PRESS */ .cgen-press { padding: 56px 48px; background: var(--home-linen); } .cgen-press-inner { max-width: 1240px; margin: 0 auto; text-align: center; } .cgen-press-label { display: block; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 24px; } .cgen-press-logos { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 56px); flex-wrap: wrap; } .cgen-press-logo { font-family: var(--home-f-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); color: var(--home-charcoal); opacity: 0.7; } @media (max-width: 640px) { .cgen-press { padding: 36px 20px; } .cgen-press-label { font-size: 9px; margin-bottom: 16px; } .cgen-press-logo { font-size: 16px; } } /* === CGEN v1 — readability patch v2 (2026-05-04) === */ /* Same fix as COLL 1RING — applies to sateur-2026-general collection template. To revert: delete. */ .cgen-hero-scrim { background: linear-gradient( 180deg, rgba(13,10,8,0.45) 0%, rgba(13,10,8,0.28) 35%, rgba(13,10,8,0.32) 65%, rgba(13,10,8,0.62) 100% ) !important; } .cgen-hero-title, .cgen-hero-title em { text-shadow: 0 1px 2px rgba(13,10,8,0.55), 0 4px 18px rgba(13,10,8,0.40); } .cgen-hero-eyebrow, .cgen-hero-sub { text-shadow: 0 1px 8px rgba(13,10,8,0.45); } @media (max-width: 768px) { .cgen-hero-scrim { background: linear-gradient( 180deg, rgba(13,10,8,0.55) 0%, rgba(13,10,8,0.38) 35%, rgba(13,10,8,0.42) 65%, rgba(13,10,8,0.65) 100% ) !important; } } /* === END CGEN v1 readability patch v2 === */ /* ===== CGEN — variation v3_bracket (Felix locked pattern 2026-05-05) ===== Centered + bottom-third + bracketed eyebrow rules + ornament. Mirrors coll1ring v3_bracket and sale_hero_v3_bracket. Disabled by default — Felix toggles via theme editor when ready. */ .cgen-hero--v3 { min-height: 660px !important; height: 80vh !important; max-height: 900px !important; } @media (max-width: 768px) { .cgen-hero--v3 { min-height: 540px !important; height: 70vh !important; max-height: 720px !important; } } @media (max-width: 640px) { .cgen-hero--v3 { min-height: 480px !important; height: 65vh !important; max-height: 640px !important; } } .cgen-hero--v3 .cgen-hero-scrim--v3 { background: linear-gradient(180deg, rgba(13,10,8,0.18) 0%, rgba(13,10,8,0.06) 40%, rgba(13,10,8,0.36) 100%); } .cgen-hero-inner--v3 { display: block !important; text-align: center !important; padding-top: clamp(320px, 50vh, 580px) !important; padding-bottom: clamp(64px, 12vh, 120px) !important; max-width: 1240px; width: 100%; margin: 0 auto; padding-left: 32px; padding-right: 32px; position: relative; z-index: 3; color: var(--home-ivory); } @media (max-width: 768px) { .cgen-hero-inner--v3 { padding-top: clamp(220px, 40vh, 400px) !important; padding-bottom: clamp(56px, 12vh, 100px) !important; padding-left: 24px; padding-right: 24px; } } @media (max-width: 640px) { .cgen-hero-inner--v3 { padding-top: clamp(200px, 38vh, 340px) !important; padding-bottom: clamp(48px, 10vh, 80px) !important; } } .cgen-v3-content { max-width: 720px; margin: 0 auto; text-align: center; } .cgen-v3-eyebrow { display: inline-flex; align-items: center; gap: 16px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-light); font-weight: 500; margin: 0 0 22px; } .cgen-v3-rule { width: 28px; height: 1px; background: var(--home-gold-light); display: inline-block; opacity: 0.7; } @media (max-width: 768px) { .cgen-v3-eyebrow { font-size: 10px; gap: 12px; margin-bottom: 18px; letter-spacing: 0.28em; } .cgen-v3-rule { width: 22px; } } @media (max-width: 640px) { .cgen-v3-eyebrow { font-size: 9.5px; letter-spacing: 0.24em; } } .cgen-v3-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0 0 16px; text-wrap: balance; } .cgen-v3-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; color: var(--home-gold-light); } @media (max-width: 768px) { .cgen-v3-title { font-size: 38px; margin-bottom: 14px; } } @media (max-width: 640px) { .cgen-v3-title { font-size: 30px; } } @media (max-width: 440px) { .cgen-v3-title { font-size: 26px; } } .cgen-v3-ornament { font-family: var(--home-f-display); font-style: italic; color: var(--home-gold); font-size: 14px; opacity: 0.8; margin: 0 auto 14px; line-height: 1; } @media (max-width: 640px) { .cgen-v3-ornament { font-size: 13px; margin-bottom: 12px; } } .cgen-v3-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--home-gold-light); line-height: 1.5; margin: 0 0 24px; max-width: 480px; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { .cgen-v3-sub { font-size: 16px; margin-bottom: 22px; } } @media (max-width: 640px) { .cgen-v3-sub { font-size: 14.5px; } } @media (max-width: 440px) { .cgen-v3-sub { font-size: 13px; } } .cgen-v3-meta { display: inline-flex; align-items: center; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: var(--home-ivory); flex-wrap: wrap; justify-content: center; padding-top: 14px; border-top: 1px solid rgba(245,237,227,0.22); max-width: 90%; margin: 0 auto; row-gap: 6px; } .cgen-v3-meta-item { display: inline-flex; align-items: center; padding: 0 4px; } .cgen-v3-meta-item:not(:first-child)::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--home-signature); margin: 0 14px; flex-shrink: 0; } @media (max-width: 640px) { .cgen-v3-meta { font-size: 9.5px; letter-spacing: 0.2em; } .cgen-v3-meta-item:not(:first-child)::before { margin: 0 10px; } } /* === END CGEN v1 === */ /* === CONTACT v1 START === */ /* Full-width breakout */ #shopify-section-contact_breadcrumb,#shopify-section-contact_hero,#shopify-section-contact_body, #shopify-section-contact_offices,#shopify-section-contact_partnerships, #shopify-section-contact_marquee,#shopify-section-contact_press, [id*="contact_breadcrumb"],[id*="contact_hero"],[id*="contact_body"], [id*="contact_offices"],[id*="contact_partnerships"],[id*="contact_marquee"],[id*="contact_press"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } .contact-breadcrumb,.contact-hero,.contact-body,.contact-offices,.contact-partnerships,.contact-marquee,.contact-press { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* BREADCRUMB */ .contact-breadcrumb { background: var(--home-ivory); border-bottom: 1px solid var(--home-hairline); } .contact-breadcrumb-inner { max-width: 1440px; margin: 0 auto; padding: 14px 48px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--home-warm-gray); } .contact-breadcrumb-inner a { color: var(--home-warm-gray); transition: color 200ms var(--home-ease); } .contact-breadcrumb-inner a:hover { color: var(--home-ink); } .contact-breadcrumb-sep { margin: 0 12px; color: rgba(26,22,20,0.22); } .contact-breadcrumb-current { color: var(--home-ink); } @media (max-width: 768px) { .contact-breadcrumb-inner { padding: 12px 24px; font-size: 10px; } } /* HERO (compact, no image) */ .contact-hero { padding: 80px 48px 56px; background: var(--home-paper); border-bottom: 1px solid var(--home-hairline); text-align: center; } .contact-hero-inner { max-width: 760px; margin: 0 auto; } .contact-hero-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 22px; } .contact-hero-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(34px, 4vw, 56px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 18px; text-wrap: balance; } .contact-hero-title em { font-family: var(--home-f-editorial); font-style: italic; } .contact-hero-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.6vw, 19px); color: var(--home-charcoal); line-height: 1.55; max-width: 600px; margin: 0 auto; } @media (max-width: 768px) { .contact-hero { padding: 56px 24px 40px; } .contact-hero-title { font-size: 30px; } .contact-hero-sub { font-size: 14.5px; } } @media (max-width: 640px) { .contact-hero { padding: 48px 20px 32px; } .contact-hero-eyebrow { font-size: 10px; margin-bottom: 18px; } .contact-hero-title { font-size: 26px; } .contact-hero-sub { font-size: 13px; } } /* BODY (form + info, 2-col) */ .contact-body { padding: 56px 48px 96px; background: var(--home-ivory); } .contact-body-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; } @media (max-width: 900px) { .contact-body-inner { grid-template-columns: 1fr; gap: 48px; } } @media (max-width: 768px) { .contact-body { padding: 40px 24px 64px; } } @media (max-width: 640px) { .contact-body { padding: 32px 20px 48px; } } /* FORM */ .contact-form { background: var(--home-warm-white); border: 1px solid var(--home-hairline); padding: 36px 36px 32px; } .contact-form-success { background: rgba(122, 142, 107, 0.10); border: 1px solid rgba(122, 142, 107, 0.30); padding: 14px 16px; margin-bottom: 24px; font-family: var(--home-f-body); font-size: 13px; color: #5e7350; } .contact-form-error { background: rgba(196, 91, 91, 0.10); border: 1px solid rgba(196, 91, 91, 0.30); padding: 14px 16px; margin-bottom: 24px; font-family: var(--home-f-body); font-size: 13px; color: #a64545; } .contact-form-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15; letter-spacing: -0.015em; color: var(--home-ink); margin: 0 0 8px; } .contact-form-title em { font-family: var(--home-f-editorial); font-style: italic; } .contact-form-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 15px; color: var(--home-warm-gray); margin: 0 0 28px; line-height: 1.55; } .contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .contact-form-field { display: flex; flex-direction: column; margin-bottom: 16px; } .contact-form-row > .contact-form-field { margin-bottom: 0; } .contact-form-label { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--home-ink); font-weight: 500; margin-bottom: 8px; } .contact-form-label-aux { color: var(--home-warm-gray); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; } .contact-form-input, .contact-form-select, .contact-form-textarea { font-family: var(--home-f-body); font-size: 14px; color: var(--home-ink); background: var(--home-paper); border: 1px solid var(--home-hairline); padding: 12px 14px; outline: none; transition: border-color 200ms var(--home-ease); width: 100%; box-sizing: border-box; } .contact-form-input:focus, .contact-form-select:focus, .contact-form-textarea:focus { border-color: var(--home-ink); } .contact-form-input::placeholder, .contact-form-textarea::placeholder { color: var(--home-warm-gray); font-style: italic; } .contact-form-textarea { min-height: 140px; resize: vertical; line-height: 1.5; font-family: var(--home-f-editorial); font-style: italic; font-size: 15px; } .contact-form-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; } .contact-form-submit { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--home-ink); color: var(--home-ivory); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; border: none; cursor: pointer; transition: all 200ms var(--home-ease); margin-top: 12px; } .contact-form-submit:hover { background: var(--home-signature); } .contact-form-note { font-family: var(--home-f-editorial); font-style: italic; font-size: 12.5px; color: var(--home-warm-gray); margin-top: 18px; line-height: 1.5; } @media (max-width: 640px) { .contact-form { padding: 28px 24px 24px; } .contact-form-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; } .contact-form-row > .contact-form-field { margin-bottom: 16px; } .contact-form-title { font-size: 22px; } .contact-form-sub { font-size: 13px; } .contact-form-input, .contact-form-select, .contact-form-textarea { font-size: 13.5px; } .contact-form-submit { font-size: 10px; padding: 13px 24px; } } /* INFO ASIDE */ .contact-info { display: flex; flex-direction: column; gap: 24px; } .contact-info-block { padding: 24px 0; border-top: 1px solid var(--home-hairline); } .contact-info-block:first-child { padding-top: 0; border-top: none; } .contact-info-block-eyebrow { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 8px; } .contact-info-block-title { font-family: var(--home-f-display); font-size: 18px; font-weight: 500; color: var(--home-ink); margin-bottom: 10px; line-height: 1.3; } .contact-info-block-body { font-family: var(--home-f-editorial); font-style: italic; font-size: 14.5px; color: var(--home-charcoal); line-height: 1.55; margin: 0 0 12px; } .contact-info-block-hours { font-family: var(--home-f-body); font-size: 13.5px; color: var(--home-charcoal); line-height: 1.7; margin: 0; } .contact-info-block-hours strong { font-weight: 500; color: var(--home-ink); } .contact-info-block-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--home-ink); font-weight: 500; padding-bottom: 3px; border-bottom: 1px solid var(--home-ink); transition: all 200ms var(--home-ease); text-decoration: none; } .contact-info-block-link:hover { color: var(--home-signature); border-color: var(--home-signature); } @media (max-width: 640px) { .contact-info-block-eyebrow { font-size: 9.5px; } .contact-info-block-title { font-size: 16px; } .contact-info-block-body, .contact-info-block-hours { font-size: 13px; } } /* OFFICES */ .contact-offices { padding: 80px 48px; background: var(--home-paper); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } .contact-offices-head { max-width: 1240px; margin: 0 auto 48px; text-align: center; } .contact-offices-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .contact-offices-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 14px; } .contact-offices-title em { font-family: var(--home-f-editorial); font-style: italic; } .contact-offices-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 16px; color: var(--home-charcoal); max-width: 560px; margin: 0 auto; } .contact-offices-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .contact-office { padding: 32px 24px; background: var(--home-ivory); border: 1px solid var(--home-hairline); } .contact-office-country { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 10px; } .contact-office-city { font-family: var(--home-f-display); font-weight: 500; font-size: 22px; line-height: 1.25; color: var(--home-ink); margin: 0 0 18px; } .contact-office-city em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 400; } .contact-office-address { font-family: var(--home-f-editorial); font-style: italic; font-size: 14.5px; color: var(--home-warm-gray); line-height: 1.6; margin: 0; } @media (max-width: 900px) { .contact-offices-grid { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 768px) { .contact-offices { padding: 56px 24px; } .contact-offices-title { font-size: 24px; } .contact-offices-sub { font-size: 14.5px; } } @media (max-width: 640px) { .contact-offices { padding: 48px 20px; } .contact-offices-eyebrow { font-size: 10px; } .contact-offices-title { font-size: 22px; } .contact-office { padding: 24px 20px; } .contact-office-city { font-size: 20px; } .contact-office-address { font-size: 13px; } } /* PARTNERSHIPS */ .contact-partnerships { padding: 96px 48px; background: var(--home-ivory); } .contact-partnerships-head { max-width: 1240px; margin: 0 auto 48px; text-align: center; } .contact-partnerships-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 14px; } .contact-partnerships-title em { font-family: var(--home-f-editorial); font-style: italic; } .contact-partnerships-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 16px; color: var(--home-charcoal); max-width: 600px; margin: 0 auto; } .contact-partnerships-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .contact-partner { padding: 32px 24px; background: var(--home-paper); border: 1px solid var(--home-hairline); } .contact-partner-icon { width: 32px; height: 32px; color: var(--home-gold-deep); margin-bottom: 18px; } .contact-partner-title { font-family: var(--home-f-display); font-weight: 500; font-size: 19px; color: var(--home-ink); margin: 0 0 10px; } .contact-partner-body { font-family: var(--home-f-editorial); font-style: italic; font-size: 14.5px; color: var(--home-charcoal); line-height: 1.55; margin: 0 0 18px; } .contact-partner-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--home-ink); font-weight: 500; padding-bottom: 3px; border-bottom: 1px solid var(--home-ink); transition: all 200ms var(--home-ease); text-decoration: none; } .contact-partner-link:hover { color: var(--home-signature); border-color: var(--home-signature); } @media (max-width: 900px) { .contact-partnerships-grid { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 768px) { .contact-partnerships { padding: 64px 24px; } .contact-partnerships-title { font-size: 24px; } .contact-partnerships-sub { font-size: 14.5px; } } @media (max-width: 640px) { .contact-partnerships { padding: 48px 20px; } .contact-partnerships-title { font-size: 22px; } .contact-partner { padding: 24px 20px; } .contact-partner-title { font-size: 17px; } .contact-partner-body { font-size: 13px; } } /* MARQUEE */ .contact-marquee { background: var(--home-signature); color: var(--home-ivory); padding: 22px 0; overflow: hidden; } .contact-marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: home-marquee-scroll 60s linear infinite; font-family: var(--home-f-editorial); font-style: italic; font-size: 24px; } .contact-marquee-item { display: inline-flex; align-items: center; gap: 32px; } .contact-marquee-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--home-ivory); flex-shrink: 0; } @media (max-width: 768px) { .contact-marquee-track { font-size: 20px; gap: 40px; } } @media (max-width: 640px) { .contact-marquee { padding: 18px 0; } .contact-marquee-track { font-size: 18px; } } /* PRESS */ .contact-press { padding: 56px 48px; background: var(--home-linen); } .contact-press-inner { max-width: 1240px; margin: 0 auto; text-align: center; } .contact-press-label { display: block; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 24px; } .contact-press-logos { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 56px); flex-wrap: wrap; } .contact-press-logo { font-family: var(--home-f-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); color: var(--home-charcoal); opacity: 0.7; } @media (max-width: 640px) { .contact-press { padding: 36px 20px; } .contact-press-label { font-size: 9px; margin-bottom: 16px; } .contact-press-logo { font-size: 16px; } } /* === END CONTACT v1 === */ /* === UTIL v1 START === */ /* Sateur — page.sateur-2026-utility-care template (Lifetime Care page) 8 custom-liquid sections + native page wrapper */ #shopify-section-util_breadcrumb,#shopify-section-util_hero,#shopify-section-util_body, #shopify-section-util_care_tiers,#shopify-section-util_steps,#shopify-section-util_related, #shopify-section-util_marquee,#shopify-section-util_press, [id*="util_breadcrumb"],[id*="util_hero"],[id*="util_body"],[id*="util_care_tiers"], [id*="util_steps"],[id*="util_related"],[id*="util_marquee"],[id*="util_press"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } .util-breadcrumb,.util-hero,.util-body,.util-care-tiers,.util-steps,.util-related-links,.util-marquee,.util-press { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* BREADCRUMB */ .util-breadcrumb { background: var(--home-ivory); border-bottom: 1px solid var(--home-hairline); } .util-breadcrumb-inner { max-width: 1440px; margin: 0 auto; padding: 14px 48px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--home-warm-gray); } .util-breadcrumb-inner a { color: var(--home-warm-gray); transition: color 200ms var(--home-ease); } .util-breadcrumb-inner a:hover { color: var(--home-ink); } .util-breadcrumb-sep { margin: 0 12px; color: rgba(26,22,20,0.22); } .util-breadcrumb-current { color: var(--home-ink); } @media (max-width: 768px) { .util-breadcrumb-inner { padding: 12px 24px; font-size: 10px; } } /* HERO */ .util-hero { padding: 80px 48px 56px; background: var(--home-paper); border-bottom: 1px solid var(--home-hairline); text-align: center; } .util-hero-inner { max-width: 760px; margin: 0 auto; } .util-hero-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 22px; } .util-hero-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(34px, 4vw, 56px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 18px; text-wrap: balance; } .util-hero-title em { font-family: var(--home-f-editorial); font-style: italic; } .util-hero-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.6vw, 19px); color: var(--home-charcoal); line-height: 1.55; max-width: 620px; margin: 0 auto; } @media (max-width: 768px) { .util-hero { padding: 56px 24px 40px; } .util-hero-title { font-size: 30px; } .util-hero-sub { font-size: 14.5px; } } @media (max-width: 640px) { .util-hero { padding: 48px 20px 32px; } .util-hero-eyebrow { font-size: 10px; margin-bottom: 18px; } .util-hero-title { font-size: 26px; } .util-hero-sub { font-size: 13px; } } /* BODY (TOC + content) */ .util-body { padding: 64px 48px 96px; background: var(--home-ivory); } .util-body-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: start; } .util-toc { position: sticky; top: 100px; } .util-toc-title { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--home-hairline); } .util-toc-list { list-style: none; padding: 0; margin: 0; } .util-toc-list li { margin-bottom: 12px; } .util-toc-list a { font-family: var(--home-f-body); font-size: 13px; color: var(--home-warm-gray); text-decoration: none; transition: color 200ms var(--home-ease); display: block; padding: 4px 0; } .util-toc-list a:hover, .util-toc-list a.active { color: var(--home-ink); } .util-toc-list a.active { font-weight: 500; } .util-content { font-family: var(--home-f-body); font-size: 15.5px; color: var(--home-charcoal); line-height: 1.7; } .util-content-lead { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; color: var(--home-ink); margin: 0 0 36px; padding-bottom: 28px; border-bottom: 1px solid var(--home-hairline); text-wrap: balance; } .util-content h2 { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.2; letter-spacing: -0.015em; color: var(--home-ink); margin: 32px 0 16px; } .util-content h2:first-of-type { margin-top: 0; } .util-content h2 em { font-family: var(--home-f-editorial); font-style: italic; } .util-content h3 { font-family: var(--home-f-display); font-weight: 500; font-size: 18px; color: var(--home-ink); margin: 24px 0 10px; } .util-content p { margin: 0 0 16px; } .util-content ul { padding-left: 22px; margin: 0 0 18px; } .util-content li { margin-bottom: 8px; } .util-content strong { font-weight: 500; color: var(--home-ink); } .util-content a { color: var(--home-ink); border-bottom: 1px solid var(--home-hairline); transition: border 200ms var(--home-ease); text-decoration: none; } .util-content a:hover { border-color: var(--home-signature); color: var(--home-signature); } .util-content blockquote { font-family: var(--home-f-editorial); font-style: italic; font-size: 18px; line-height: 1.55; color: var(--home-warm-gray); border-left: 2px solid var(--home-signature); padding: 6px 0 6px 22px; margin: 24px 0; } .util-content hr { border: none; border-top: 1px solid var(--home-hairline); margin: 36px 0; } @media (max-width: 900px) { .util-body-inner { grid-template-columns: 1fr; gap: 32px; } .util-toc { position: static; padding-bottom: 24px; border-bottom: 1px solid var(--home-hairline); } } @media (max-width: 768px) { .util-body { padding: 48px 24px 64px; } .util-content { font-size: 14.5px; } .util-content-lead { font-size: 16.5px; } .util-content h2 { font-size: 22px; } .util-content h3 { font-size: 16px; } } @media (max-width: 640px) { .util-body { padding: 40px 20px 56px; } .util-content { font-size: 14px; } .util-content-lead { font-size: 15px; padding-bottom: 22px; margin-bottom: 28px; } .util-content h2 { font-size: 20px; margin-top: 28px; } } /* CARE TIERS */ .util-care-tiers { padding: 80px 48px; background: var(--home-paper); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } .util-care-tiers-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .util-care-card { background: var(--home-ivory); border: 1px solid var(--home-hairline); padding: 36px 32px 32px; position: relative; } .util-care-card--feat { border: 2px solid var(--home-ink); } .util-care-card-badge { position: absolute; top: -10px; left: 32px; background: var(--home-ink); color: var(--home-ivory); padding: 5px 12px; font-family: var(--home-f-body); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; } .util-care-card-eyebrow { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 12px; } .util-care-card-title { font-family: var(--home-f-display); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--home-ink); margin: 0 0 14px; } .util-care-card-title em { font-family: var(--home-f-editorial); font-style: italic; } .util-care-card-price { font-family: var(--home-f-display); font-weight: 500; font-size: 36px; color: var(--home-ink); margin-bottom: 6px; } .util-care-card-price-note { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-warm-gray); margin: 0 0 24px; } .util-care-card-list { list-style: none; padding: 0; margin: 0 0 28px; } .util-care-card-list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--home-hairline); font-family: var(--home-f-body); font-size: 14px; color: var(--home-charcoal); line-height: 1.5; } .util-care-card-list li:last-child { border-bottom: none; } .util-care-card-list svg { flex-shrink: 0; color: var(--home-signature); margin-top: 4px; } .util-care-card-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: all 200ms var(--home-ease); text-decoration: none; } .util-care-card-cta--ghost { color: var(--home-ink); border: 1px solid var(--home-ink); } .util-care-card-cta--ghost:hover { background: var(--home-ink); color: var(--home-ivory); } .util-care-card-cta--primary { background: var(--home-ink); color: var(--home-ivory); border: 1px solid var(--home-ink); } .util-care-card-cta--primary:hover { background: var(--home-signature); border-color: var(--home-signature); } @media (max-width: 900px) { .util-care-tiers-inner { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 768px) { .util-care-tiers { padding: 56px 24px; } .util-care-card { padding: 28px 24px 24px; } .util-care-card-title { font-size: 22px; } .util-care-card-price { font-size: 30px; } } @media (max-width: 640px) { .util-care-tiers { padding: 48px 20px; } .util-care-card-title { font-size: 20px; } .util-care-card-price { font-size: 28px; } } /* STEPS */ .util-steps { padding: 96px 48px; background: var(--home-ivory); } .util-steps-head { max-width: 1240px; margin: 0 auto 48px; text-align: center; } .util-steps-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .util-steps-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin: 0; } .util-steps-title em { font-family: var(--home-f-editorial); font-style: italic; } .util-steps-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .util-step { padding: 28px 24px; background: var(--home-paper); border: 1px solid var(--home-hairline); } .util-step-num { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-signature); margin-bottom: 12px; } .util-step-title { font-family: var(--home-f-display); font-weight: 500; font-size: 18px; color: var(--home-ink); margin: 0 0 12px; } .util-step-body { font-family: var(--home-f-editorial); font-style: italic; font-size: 14.5px; color: var(--home-charcoal); line-height: 1.55; margin: 0; } @media (max-width: 900px) { .util-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 768px) { .util-steps { padding: 64px 24px; } .util-steps-title { font-size: 24px; } } @media (max-width: 640px) { .util-steps { padding: 48px 20px; } .util-steps-eyebrow { font-size: 10px; } .util-steps-title { font-size: 22px; } .util-step { padding: 20px 18px; } .util-step-title { font-size: 16px; } .util-step-body { font-size: 13px; } } /* RELATED LINKS */ .util-related-links { padding: 80px 48px; background: var(--home-paper); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } .util-related-links-head { max-width: 1240px; margin: 0 auto 36px; text-align: center; } .util-related-links-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 14px; } .util-related-links-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(24px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.015em; color: var(--home-ink); margin: 0; } .util-related-links-title em { font-family: var(--home-f-editorial); font-style: italic; } .util-related-links-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .util-related-link { background: var(--home-ivory); border: 1px solid var(--home-hairline); padding: 24px 22px; display: flex; flex-direction: column; gap: 8px; transition: all 200ms var(--home-ease); text-decoration: none; position: relative; } .util-related-link:hover { border-color: var(--home-ink); transform: translateY(-2px); } .util-related-link-title { font-family: var(--home-f-display); font-weight: 500; font-size: 17px; color: var(--home-ink); } .util-related-link-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-warm-gray); line-height: 1.5; } .util-related-link-arrow { position: absolute; top: 24px; right: 22px; color: var(--home-warm-gray); transition: color 200ms var(--home-ease); } .util-related-link:hover .util-related-link-arrow { color: var(--home-signature); } @media (max-width: 900px) { .util-related-links-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .util-related-links { padding: 56px 24px; } .util-related-links-title { font-size: 22px; } .util-related-link { padding: 20px 18px; } .util-related-link-title { font-size: 15px; } .util-related-link-sub { font-size: 12.5px; } } @media (max-width: 640px) { .util-related-links { padding: 48px 20px; } .util-related-links-grid { grid-template-columns: 1fr; } } /* MARQUEE */ .util-marquee { background: var(--home-signature); color: var(--home-ivory); padding: 22px 0; overflow: hidden; } .util-marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: home-marquee-scroll 60s linear infinite; font-family: var(--home-f-editorial); font-style: italic; font-size: 24px; } .util-marquee-item { display: inline-flex; align-items: center; gap: 32px; } .util-marquee-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--home-ivory); flex-shrink: 0; } @media (max-width: 768px) { .util-marquee-track { font-size: 20px; gap: 40px; } } @media (max-width: 640px) { .util-marquee { padding: 18px 0; } .util-marquee-track { font-size: 18px; } } /* PRESS */ .util-press { padding: 56px 48px; background: var(--home-linen); } .util-press-inner { max-width: 1240px; margin: 0 auto; text-align: center; } .util-press-label { display: block; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 24px; } .util-press-logos { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 56px); flex-wrap: wrap; } .util-press-logo { font-family: var(--home-f-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); color: var(--home-charcoal); opacity: 0.7; } @media (max-width: 640px) { .util-press { padding: 36px 20px; } .util-press-label { font-size: 9px; margin-bottom: 16px; } .util-press-logo { font-size: 16px; } } /* Courier tables (delivery page) */ .util-content .util-courier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 24px 0 28px; } .util-content .util-courier-table table { width: 100%; border-collapse: collapse; } .util-content .util-courier-table th { text-align: left; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--home-hairline); } .util-content .util-courier-table td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--home-hairline); font-family: var(--home-f-body); font-size: 13px; color: var(--home-charcoal); } .util-content .util-courier-table tr:last-child td { border-bottom: none; } @media (max-width: 768px) { .util-content .util-courier-grid { grid-template-columns: 1fr; gap: 0; } .util-content .util-courier-table td { font-size: 12.5px; } } /* === END UTIL v1 === */ /* === FAQ v1 START === */ #shopify-section-faq_breadcrumb,#shopify-section-faq_hero,#shopify-section-faq_nav, #shopify-section-faq_questions,#shopify-section-faq_contact_cta,#shopify-section-faq_press, [id*="faq_breadcrumb"],[id*="faq_hero"],[id*="faq_nav"],[id*="faq_questions"],[id*="faq_contact_cta"],[id*="faq_press"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } .faq-breadcrumb,.faq-hero,.faq-nav,.faq-all,.faq-section,.faq-contact-cta,.faq-press { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* BREADCRUMB */ .faq-breadcrumb { background: var(--home-ivory); border-bottom: 1px solid var(--home-hairline); } .faq-breadcrumb-inner { max-width: 1440px; margin: 0 auto; padding: 14px 48px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--home-warm-gray); } .faq-breadcrumb-inner a { color: var(--home-warm-gray); transition: color 200ms var(--home-ease); } .faq-breadcrumb-inner a:hover { color: var(--home-ink); } .faq-breadcrumb-sep { margin: 0 12px; color: rgba(26,22,20,0.22); } .faq-breadcrumb-current { color: var(--home-ink); } @media (max-width: 768px) { .faq-breadcrumb-inner { padding: 12px 24px; font-size: 10px; } } /* HERO */ .faq-hero { padding: 80px 48px 56px; background: var(--home-paper); border-bottom: 1px solid var(--home-hairline); text-align: center; } .faq-hero-inner { max-width: 760px; margin: 0 auto; } .faq-hero-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 22px; } .faq-hero-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(34px, 4vw, 56px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 18px; text-wrap: balance; } .faq-hero-title em { font-family: var(--home-f-editorial); font-style: italic; } .faq-hero-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.6vw, 19px); color: var(--home-charcoal); line-height: 1.55; max-width: 600px; margin: 0 auto 32px; } .faq-search { position: relative; max-width: 480px; margin: 0 auto; } .faq-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--home-warm-gray); pointer-events: none; } .faq-search-input { width: 100%; padding: 14px 18px 14px 46px; background: var(--home-ivory); border: 1px solid var(--home-hairline); font-family: var(--home-f-body); font-size: 14px; color: var(--home-ink); outline: none; transition: border-color 200ms var(--home-ease); } .faq-search-input:focus { border-color: var(--home-ink); } .faq-search-input::placeholder { color: var(--home-warm-gray); font-style: italic; } @media (max-width: 768px) { .faq-hero { padding: 56px 24px 40px; } .faq-hero-title { font-size: 30px; } .faq-hero-sub { font-size: 14.5px; margin-bottom: 24px; } .faq-search-input { font-size: 13.5px; padding: 12px 16px 12px 42px; } } @media (max-width: 640px) { .faq-hero { padding: 48px 20px 32px; } .faq-hero-eyebrow { font-size: 10px; margin-bottom: 18px; } .faq-hero-title { font-size: 26px; } .faq-hero-sub { font-size: 13px; } } /* CATEGORY NAV (sticky) */ .faq-nav { background: var(--home-ivory); border-bottom: 1px solid var(--home-hairline); position: sticky; top: 0; z-index: 20; } .faq-nav-inner { max-width: 1240px; margin: 0 auto; padding: 0 48px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .faq-nav-inner::-webkit-scrollbar { display: none; } .faq-nav-item { flex-shrink: 0; padding: 18px 18px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--home-warm-gray); font-weight: 500; text-decoration: none; transition: color 200ms var(--home-ease); border-bottom: 2px solid transparent; } .faq-nav-item:hover { color: var(--home-ink); } .faq-nav-item--active { color: var(--home-ink); border-bottom-color: var(--home-signature); } @media (max-width: 768px) { .faq-nav-inner { padding: 0 20px; } .faq-nav-item { padding: 14px 12px; font-size: 10px; letter-spacing: 0.14em; } } /* SECTIONS (questions container) */ .faq-all { background: var(--home-paper); } .faq-section { padding: 80px 48px 0; } .faq-section:last-child { padding-bottom: 112px; } .faq-section-inner { max-width: 880px; margin: 0 auto; } .faq-section-head { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--home-hairline); } .faq-section-num { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 10px; } .faq-section-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -0.015em; color: var(--home-ink); margin: 0; } .faq-section-title em { font-family: var(--home-f-editorial); font-style: italic; } @media (max-width: 768px) { .faq-section { padding: 56px 24px 0; } .faq-section:last-child { padding-bottom: 80px; } .faq-section-title { font-size: 24px; } } @media (max-width: 640px) { .faq-section { padding: 48px 20px 0; } .faq-section:last-child { padding-bottom: 64px; } .faq-section-num { font-size: 10px; } .faq-section-title { font-size: 22px; } } /* ACCORDION */ .faq-accordion { /* border-top removed in v2 — section-head bottom-border serves this purpose */ } .faq-accordion-item { border-bottom: 1px solid var(--home-hairline); } .faq-accordion-trigger { width: 100%; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; font-family: var(--home-f-display); font-weight: 500; font-size: 16px; color: var(--home-ink); transition: color 200ms var(--home-ease); cursor: pointer; background: none; border: none; } .faq-accordion-trigger:hover { color: var(--home-signature); } .faq-accordion-icon { width: 14px; height: 14px; flex-shrink: 0; position: relative; transition: transform 300ms var(--home-ease); } .faq-accordion-icon::before, .faq-accordion-icon::after { content: ""; position: absolute; background: var(--home-ink); } .faq-accordion-icon::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); } .faq-accordion-icon::after { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); transition: transform 300ms var(--home-ease); } .faq-accordion-item--open .faq-accordion-icon::after { transform: translateX(-50%) scaleY(0); } .faq-accordion-body { max-height: 0; overflow: hidden; transition: max-height 400ms var(--home-ease); } .faq-accordion-item--open .faq-accordion-body { max-height: 600px; } .faq-accordion-body-inner { padding: 0 38px 22px 0; font-family: var(--home-f-editorial); font-style: italic; font-size: 15px; line-height: 1.65; color: var(--home-charcoal); } .faq-accordion-body-inner a { color: var(--home-ink); border-bottom: 1px solid var(--home-hairline); transition: all 200ms var(--home-ease); text-decoration: none; } .faq-accordion-body-inner a:hover { color: var(--home-signature); border-color: var(--home-signature); } .faq-accordion-body-inner strong { font-style: normal; font-weight: 500; color: var(--home-ink); } @media (max-width: 640px) { .faq-accordion-trigger { font-size: 14.5px; padding: 18px 0; } .faq-accordion-body-inner { font-size: 13.5px; padding-bottom: 18px; padding-right: 24px; } } .faq-no-results { max-width: 720px; margin: 32px auto 64px; padding: 20px 24px; background: var(--home-paper); border: 1px solid var(--home-hairline); font-family: var(--home-f-editorial); font-style: italic; font-size: 14.5px; color: var(--home-warm-gray); text-align: center; } .faq-no-results a { color: var(--home-ink); border-bottom: 1px solid var(--home-ink); text-decoration: none; } /* CONTACT CTA */ .faq-contact-cta { padding: 80px 48px; background: var(--home-noir); color: var(--home-ivory); text-align: center; } .faq-contact-cta-inner { max-width: 760px; margin: 0 auto; } .faq-contact-cta-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 16px; } .faq-contact-cta-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -0.015em; color: var(--home-ivory); margin: 0 0 16px; text-wrap: balance; } .faq-contact-cta-title em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); } .faq-contact-cta-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(15px, 1.5vw, 18px); color: var(--home-gold-light); line-height: 1.55; max-width: 540px; margin: 0 auto 28px; } .faq-contact-cta-buttons { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .faq-contact-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: all 200ms var(--home-ease); text-decoration: none; } .faq-contact-cta-btn--primary { background: var(--home-ivory); color: var(--home-ink); } .faq-contact-cta-btn--primary:hover { background: var(--home-signature); color: var(--home-ivory); } .faq-contact-cta-btn--ghost { color: var(--home-ivory); border: 1px solid rgba(245,237,227,0.45); } .faq-contact-cta-btn--ghost:hover { background: var(--home-ivory); color: var(--home-ink); border-color: var(--home-ivory); } @media (max-width: 768px) { .faq-contact-cta { padding: 64px 24px; } .faq-contact-cta-title { font-size: 26px; } .faq-contact-cta-sub { font-size: 14.5px; } } @media (max-width: 640px) { .faq-contact-cta { padding: 48px 20px; } .faq-contact-cta-title { font-size: 22px; } .faq-contact-cta-btn { font-size: 10px; padding: 12px 22px; } } /* PRESS */ .faq-press { padding: 56px 48px; background: var(--home-linen); } .faq-press-inner { max-width: 1240px; margin: 0 auto; text-align: center; } .faq-press-label { display: block; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 24px; } .faq-press-logos { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 56px); flex-wrap: wrap; } .faq-press-logo { font-family: var(--home-f-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); color: var(--home-charcoal); opacity: 0.7; } @media (max-width: 640px) { .faq-press { padding: 36px 20px; } .faq-press-label { font-size: 9px; margin-bottom: 16px; } .faq-press-logo { font-size: 16px; } } /* === END FAQ v1 === */ /* === DEFAULT PAGE v1 START === */ /* Sateur — templates/404.json (8 custom-liquid sections) */ /* Order: breadcrumb, hero, cats, recs_header, recs_grid (split for swappable native recs), help, marquee, press */ /* Mockup: Output/Website/404-v1.html */ /* Strategy 1: Direct section IDs */ #shopify-section-pdef_breadcrumb, #shopify-section-pdef_hero_404, #shopify-section-pdef_cats, #shopify-section-pdef_recs_header, #shopify-section-pdef_help, #shopify-section-pdef_marquee, #shopify-section-pdef_press, /* Strategy 2: Substring match */ [id*="pdef_breadcrumb"], [id*="pdef_hero_404"], [id*="pdef_cats"], [id*="pdef_recs_header"], [id*="pdef_help"], [id*="pdef_marquee"], [id*="pdef_press"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } /* Strategy 3: Inner-element direct breakout */ .pdef-breadcrumb, .pdef-hero, .pdef-cats, .pdef-recs, .pdef-help, .pdef-marquee, .pdef-press { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* === BREADCRUMB === */ .pdef-breadcrumb { background: var(--home-ivory); border-bottom: 1px solid var(--home-hairline); } .pdef-breadcrumb-inner { max-width: 1440px; margin: 0 auto; padding: 14px 48px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--home-warm-gray); } .pdef-breadcrumb-inner a { color: var(--home-warm-gray); transition: color 200ms var(--home-ease); } .pdef-breadcrumb-inner a:hover { color: var(--home-ink); } .pdef-breadcrumb-sep { margin: 0 12px; color: rgba(26,22,20,0.22); } .pdef-breadcrumb-current { color: var(--home-ink); } @media (max-width: 768px) { .pdef-breadcrumb-inner { padding: 12px 24px; font-size: 10px; } } /* === 404 HERO === */ .pdef-hero { background: var(--home-paper); padding: 96px 48px 120px !important; overflow: hidden; border-bottom: 1px solid var(--home-hairline); } @media (max-width: 768px) { .pdef-hero { padding: 72px 24px 80px !important; } } @media (max-width: 640px) { .pdef-hero { padding: 64px 20px 72px !important; } } .pdef-hero-rings { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .pdef-hero-rings::before, .pdef-hero-rings::after { content: ""; position: absolute; border-radius: 50%; top: 50%; left: 50%; } .pdef-hero-rings::before { width: 480px; height: 480px; border: 1px solid var(--home-gold-light); transform: translate(-50%, -45%); opacity: 0.5; } .pdef-hero-rings::after { width: 720px; height: 720px; border: 1px solid var(--home-linen); transform: translate(-50%, -45%); opacity: 0.6; } @media (max-width: 768px) { .pdef-hero-rings::before { width: 320px; height: 320px; } .pdef-hero-rings::after { width: 480px; height: 480px; } } .pdef-hero-inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; text-align: center; padding: 0 24px; } .pdef-hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 32px; } .pdef-hero-eyebrow::before, .pdef-hero-eyebrow::after { content: ""; width: 32px; height: 1px; background: var(--home-gold); } .pdef-hero-eyebrow em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-signature); letter-spacing: 0.08em; text-transform: none; font-size: 14px; } @media (max-width: 640px) { .pdef-hero-eyebrow { font-size: 10px; gap: 10px; margin-bottom: 24px; } .pdef-hero-eyebrow::before, .pdef-hero-eyebrow::after { width: 22px; } .pdef-hero-eyebrow em { font-size: 12px; } } .pdef-hero-num { font-family: var(--home-f-display); font-style: italic; font-weight: 400; font-size: clamp(140px, 22vw, 280px); line-height: 0.85; letter-spacing: -0.04em; color: var(--home-ink); margin-bottom: 32px; display: inline-block; position: relative; } .pdef-hero-num span { display: inline-block; color: var(--home-signature); font-style: italic; font-family: var(--home-f-editorial); position: relative; } .pdef-hero-num span::before { content: ""; position: absolute; inset: 12% -2% 18% -2%; border: 1px solid var(--home-gold); border-radius: 50%; opacity: 0.35; pointer-events: none; } .pdef-hero-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -0.015em; color: var(--home-ink); margin: 0 0 18px; } .pdef-hero-title em { font-family: var(--home-f-editorial); font-style: italic; } @media (max-width: 768px) { .pdef-hero-title { font-size: 26px; } } @media (max-width: 640px) { .pdef-hero-title { font-size: 22px; } } .pdef-hero-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(15px, 1.6vw, 19px); color: var(--home-charcoal); line-height: 1.6; max-width: 580px; margin: 0 auto 40px; } @media (max-width: 640px) { .pdef-hero-sub { font-size: 14.5px; margin-bottom: 28px; } } .pdef-hero-search { max-width: 480px; margin: 0 auto 24px; position: relative; } .pdef-hero-search-input { width: 100%; padding: 16px 22px 16px 52px; background: var(--home-warm-white); border: 1px solid var(--home-hairline-strong); font-family: var(--home-f-body); font-size: 14px; color: var(--home-ink); outline: none; transition: border-color 200ms var(--home-ease); border-radius: 0; -webkit-appearance: none; appearance: none; } .pdef-hero-search-input::placeholder { color: var(--home-warm-gray); font-style: italic; font-family: var(--home-f-editorial); font-size: 15px; } .pdef-hero-search-input:focus { border-color: var(--home-ink); } .pdef-hero-search-icon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--home-warm-gray); pointer-events: none; } .pdef-hero-ctas { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 12px; } .pdef-hero-cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: all 250ms var(--home-ease); cursor: pointer; } .pdef-hero-cta--primary { background: var(--home-ink); color: var(--home-ivory); } .pdef-hero-cta--primary:hover { background: var(--home-signature); color: var(--home-ivory); } .pdef-hero-cta--ghost { color: var(--home-ink); border: 1px solid var(--home-ink); background: transparent; } .pdef-hero-cta--ghost:hover { background: var(--home-ink); color: var(--home-ivory); } @media (max-width: 640px) { .pdef-hero-cta { padding: 14px 24px; font-size: 10px; letter-spacing: 0.2em; } } /* === CATEGORY TILES === */ .pdef-cats { padding: 96px 48px 56px !important; background: var(--home-ivory); } @media (max-width: 768px) { .pdef-cats { padding: 64px 24px 32px !important; } } .pdef-cats-head { max-width: 1240px; margin: 0 auto 40px; text-align: center; } .pdef-cats-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 14px; } .pdef-cats-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15; color: var(--home-ink); margin: 0; } .pdef-cats-title em { font-family: var(--home-f-editorial); font-style: italic; } .pdef-cats-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 900px) { .pdef-cats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } .pdef-cat { aspect-ratio: 4/5; position: relative; overflow: hidden; background: var(--home-linen); cursor: pointer; display: block; } .pdef-cat-img { position: absolute; inset: 0; transition: transform 800ms var(--home-ease); } .pdef-cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .pdef-cat:hover .pdef-cat-img { transform: scale(1.05); } .pdef-cat-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,10,8,0.0) 40%, rgba(13,10,8,0.55) 100%); z-index: 2; } .pdef-cat-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 24px; color: var(--home-ivory); } .pdef-cat-name { font-family: var(--home-f-display); font-weight: 500; font-size: 20px; margin-bottom: 6px; letter-spacing: -0.005em; } .pdef-cat-name em { font-family: var(--home-f-editorial); font-style: italic; } .pdef-cat-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-gold-light); } .pdef-cat-arrow { position: absolute; top: 18px; right: 18px; z-index: 3; width: 36px; height: 36px; border: 1px solid rgba(245,237,227,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--home-ivory); transition: all 250ms var(--home-ease); } .pdef-cat:hover .pdef-cat-arrow { background: var(--home-ivory); color: var(--home-ink); border-color: var(--home-ivory); } @media (max-width: 640px) { .pdef-cat-body { padding: 18px; } .pdef-cat-name { font-size: 17px; } .pdef-cat-sub { font-size: 12px; } .pdef-cat-arrow { width: 30px; height: 30px; top: 14px; right: 14px; } } /* === PRODUCT RECS — split into header + grid === */ /* Both sections share .pdef-recs base + share ivory bg so they look continuous */ .pdef-recs { background: var(--home-ivory); } /* Header section: full top padding, zero bottom — when grid sits below they look continuous */ .pdef-recs--header { padding: 96px 48px 0 !important; } .pdef-recs--header .pdef-recs-head { max-width: 1240px; margin: 0 auto; text-align: center; } @media (max-width: 768px) { .pdef-recs--header { padding: 56px 24px 0 !important; } } /* Grid section: small top, full bottom — when used solo (replaced by native recs), the next section's top padding compensates */ .pdef-recs--grid { padding: 48px 48px 96px !important; } .pdef-recs--grid .pdef-recs-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } @media (max-width: 900px) { .pdef-recs--grid .pdef-recs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 768px) { .pdef-recs--grid { padding: 32px 24px 72px !important; } } /* Header typography */ .pdef-recs-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 14px; } .pdef-recs-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.015em; color: var(--home-ink); margin: 0 0 12px; } .pdef-recs-title em { font-family: var(--home-f-editorial); font-style: italic; } .pdef-recs-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 16px; color: var(--home-charcoal); max-width: 560px; margin: 0 auto; } /* Product card */ .pdef-product { background: var(--home-warm-white); border: 1px solid var(--home-hairline); cursor: pointer; transition: border-color 300ms var(--home-ease), transform 300ms var(--home-ease), box-shadow 300ms var(--home-ease); display: flex; flex-direction: column; position: relative; color: var(--home-ink); } .pdef-product:hover { border-color: var(--home-hairline-strong); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(13, 10, 8, 0.06); } .pdef-product-media { aspect-ratio: 1; overflow: hidden; position: relative; background: var(--home-paper); } .pdef-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--home-ease); } .pdef-product:hover .pdef-product-media img { transform: scale(1.04); } .pdef-product-rank { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 12px; background: rgba(251,248,241,0.95); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-family: var(--home-f-body); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; } .pdef-product-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; gap: 6px; } .pdef-product-name { font-family: var(--home-f-display); font-size: 17px; font-weight: 500; color: var(--home-ink); line-height: 1.25; margin: 0; } .pdef-product-cap { font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-warm-gray); line-height: 1.4; margin: 0 0 6px; } .pdef-product-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--home-hairline); width: 100%; } .pdef-product-price { font-family: var(--home-f-display); font-size: 17px; color: var(--home-ink); font-weight: 500; } .pdef-product-strike { font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-signature); text-decoration: line-through; } .pdef-product-save { margin-left: auto; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.18em; color: var(--home-signature); text-transform: uppercase; font-weight: 500; } @media (max-width: 768px) { .pdef-product-body { padding: 16px 14px 18px; } .pdef-product-name { font-size: 14px; } .pdef-product-cap { font-size: 12px; } .pdef-product-price { font-size: 14px; } .pdef-product-rank { font-size: 8px; padding: 5px 9px; top: 10px; left: 10px; } } /* === CARE STRIP (uses pdef-help keys) === */ .pdef-help { padding: 80px 48px !important; background: var(--home-linen); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } @media (max-width: 768px) { .pdef-help { padding: 56px 24px !important; } } .pdef-help-inner { max-width: 880px; margin: 0 auto; text-align: center; } .pdef-help-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 16px; } .pdef-help-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.015em; color: var(--home-ink); margin: 0 0 14px; } .pdef-help-title em { font-family: var(--home-f-editorial); font-style: italic; } .pdef-help-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 17px; color: var(--home-charcoal); line-height: 1.55; max-width: 600px; margin: 0 auto 28px; } .pdef-help-links { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .pdef-help-link { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; background: var(--home-warm-white); border: 1px solid var(--home-hairline-strong); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--home-ink); transition: all 250ms var(--home-ease); } .pdef-help-link:hover { background: var(--home-ink); color: var(--home-ivory); border-color: var(--home-ink); } @media (max-width: 640px) { .pdef-help-sub { font-size: 15px; } .pdef-help-link { padding: 11px 18px; font-size: 10px; } } /* === MARQUEE === */ .pdef-marquee { background: var(--home-signature); color: var(--home-ivory); padding: 22px 0 !important; overflow: hidden; } .pdef-marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: home-marquee-scroll 60s linear infinite; font-family: var(--home-f-editorial); font-style: italic; font-size: 26px; } .pdef-marquee-item { display: inline-flex; align-items: center; gap: 32px; } .pdef-marquee-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--home-ivory); flex-shrink: 0; } @media (max-width: 768px) { .pdef-marquee-track { font-size: 20px; gap: 40px; } } @media (max-width: 640px) { .pdef-marquee { padding: 18px 0 !important; } .pdef-marquee-track { font-size: 18px; } } /* === PRESS === */ .pdef-press { padding: 56px 48px !important; background: var(--home-linen); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } @media (max-width: 768px) { .pdef-press { padding: 40px 24px !important; } } .pdef-press-inner { max-width: 1240px; margin: 0 auto; text-align: center; } .pdef-press-label { display: block; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 24px; } .pdef-press-logos { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 56px); flex-wrap: wrap; } .pdef-press-logo { font-family: var(--home-f-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); color: var(--home-charcoal); opacity: 0.7; } /* === END DEFAULT PAGE v1 === */ /* === SALE v1 START === */ /* Sateur — collection.sateur-2026-sale template (15 custom-liquid + native main-collection) */ /* Mockup: Output/Website/sales-page-v9.html (Mother's Day baseline; reusable for any sale) */ /* Strategy 1+2: Direct + substring section ID breakout */ #shopify-section-sale_breadcrumb,#shopify-section-sale_hero,#shopify-section-sale_urgency, #shopify-section-sale_offer_band,#shopify-section-sale_intro,#shopify-section-sale_media_grid, #shopify-section-sale_reviews,#shopify-section-sale_mwt,#shopify-section-sale_compare, #shopify-section-sale_atmos,#shopify-section-sale_products_header,#shopify-section-sale_faq, #shopify-section-sale_final_cta,#shopify-section-sale_marquee,#shopify-section-sale_press, [id*="sale_breadcrumb"],[id*="sale_hero"],[id*="sale_urgency"],[id*="sale_offer_band"], [id*="sale_intro"],[id*="sale_media_grid"],[id*="sale_reviews"],[id*="sale_mwt"], [id*="sale_compare"],[id*="sale_atmos"],[id*="sale_products_header"],[id*="sale_faq"], [id*="sale_final_cta"],[id*="sale_marquee"],[id*="sale_press"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } /* Strategy 3: Inner-element breakout */ .sale-breadcrumb,.sale-hero,.sale-urgency,.sale-offer-band,.sale-intro, .sale-media-grid,.sale-reviews,.sale-mwt,.sale-compare,.sale-atmos, .sale-products-header,.sale-faq,.sale-final-cta,.sale-marquee,.sale-press { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* === BREADCRUMB === */ .sale-breadcrumb { background: var(--home-ivory); border-bottom: 1px solid var(--home-hairline); } .sale-breadcrumb-inner { max-width: 1440px; margin: 0 auto; padding: 14px 48px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--home-warm-gray); } .sale-breadcrumb-inner a { color: var(--home-warm-gray); transition: color 200ms var(--home-ease); } .sale-breadcrumb-inner a:hover { color: var(--home-ink); } .sale-breadcrumb-sep { margin: 0 12px; color: rgba(26,22,20,0.22); } .sale-breadcrumb-current { color: var(--home-ink); } @media (max-width: 768px) { .sale-breadcrumb-inner { padding: 12px 24px; font-size: 10px; } } /* === HERO === */ .sale-hero { position: relative; min-height: 620px; height: 75vh; max-height: 800px; overflow: hidden; background: var(--home-noir); display: flex; align-items: center; } @media (max-width: 768px) { .sale-hero { min-height: 540px; height: 70vh; } } @media (max-width: 640px) { .sale-hero { min-height: 480px; } } .sale-hero-bg { position: absolute; inset: 0; z-index: 1; } .sale-hero-bg video { width: 100%; height: 100%; object-fit: cover; } .sale-hero-video--desktop { display: block; } .sale-hero-video--mobile { display: none; } @media (max-width: 768px) { .sale-hero-video--desktop { display: none; } .sale-hero-video--mobile { display: block; } } .sale-hero-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(13,10,8,0.55) 0%, rgba(13,10,8,0.20) 50%, rgba(13,10,8,0) 80%), linear-gradient(180deg, rgba(13,10,8,0) 50%, rgba(13,10,8,0.50) 100%); } .sale-hero-inner { position: relative; z-index: 3; max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 56px; color: var(--home-ivory); } @media (max-width: 768px) { .sale-hero-inner { padding: 0 24px; } } .sale-hero-content { max-width: 680px; } .sale-hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 22px; } .sale-hero-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--home-signature); } @media (max-width: 640px) { .sale-hero-eyebrow { font-size: 10px; margin-bottom: 18px; } } .sale-hero-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(40px, 5.6vw, 80px); line-height: 1.0; letter-spacing: -0.025em; margin: 0 0 22px; color: var(--home-ivory); text-shadow: 0 1px 2px rgba(13,10,8,0.4), 0 4px 18px rgba(13,10,8,0.35); } .sale-hero-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; color: var(--home-gold-light); } @media (max-width: 768px) { .sale-hero-title { font-size: 44px; } } @media (max-width: 640px) { .sale-hero-title { font-size: 36px; } } .sale-hero-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(18px, 1.9vw, 22px); color: var(--home-gold-light); line-height: 1.5; margin: 0 0 32px; max-width: 540px; text-shadow: 0 1px 8px rgba(13,10,8,0.4); } @media (max-width: 768px) { .sale-hero-sub { font-size: 16px; } } @media (max-width: 640px) { .sale-hero-sub { font-size: 14.5px; margin-bottom: 24px; } } .sale-hero-cta { display: inline-flex; align-items: center; gap: 14px; padding: 20px 44px; background: var(--home-ivory); color: var(--home-ink); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; transition: all 250ms var(--home-ease); } .sale-hero-cta:hover { background: var(--home-signature); color: var(--home-ivory); } @media (max-width: 640px) { .sale-hero-cta { font-size: 10px; padding: 18px 36px; } } /* === URGENCY === */ .sale-urgency { background: var(--home-ink); color: var(--home-ivory); padding: 14px 24px !important; text-align: center; font-family: var(--home-f-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid rgba(245,237,227,0.10); } .sale-urgency-inner { max-width: 1240px; margin: 0 auto; display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; } .sale-urgency-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--home-signature); animation: sale-pulse 1.6s ease-in-out infinite; } @keyframes sale-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } .sale-urgency-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--home-gold); } .sale-urgency strong { font-family: var(--home-f-display); font-weight: 600; font-size: 16px; color: var(--home-ivory); letter-spacing: -0.01em; padding: 0 2px; } .sale-urgency em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); letter-spacing: 0.04em; text-transform: none; font-size: 14px; } @media (max-width: 768px) { .sale-urgency { padding: 12px 14px !important; font-size: 10px; letter-spacing: 0.12em; } .sale-urgency strong { font-size: 13px; } .sale-urgency em { font-size: 11px; } .sale-urgency-sep { display: none; } .sale-urgency-inner { gap: 10px; } } /* === OFFER BAND === */ .sale-offer-band { background: var(--home-paper); color: var(--home-ink); padding: 56px 48px !important; border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } @media (max-width: 768px) { .sale-offer-band { padding: 36px 24px !important; } } @media (max-width: 640px) { .sale-offer-band { padding: 28px 16px !important; } } .sale-offer-band-inner { max-width: 1240px; margin: 0 auto; } .sale-offer-band-head { text-align: center; margin-bottom: 32px; } @media (max-width: 640px) { .sale-offer-band-head { margin-bottom: 18px; } } .sale-offer-band-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 14px; } @media (max-width: 640px) { .sale-offer-band-eyebrow { font-size: 10px; margin-bottom: 10px; letter-spacing: 0.24em; } } .sale-offer-band-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 4vw, 50px); line-height: 1.05; letter-spacing: -0.018em; margin: 0 0 8px; color: var(--home-ink); } .sale-offer-band-title em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-deep); } @media (max-width: 768px) { .sale-offer-band-title { font-size: 28px; } } @media (max-width: 640px) { .sale-offer-band-title { font-size: 22px; line-height: 1.15; } } .sale-offer-band-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1080px; margin: 0 auto; } @media (max-width: 768px) { .sale-offer-band-tiers { grid-template-columns: 1fr; gap: 8px; } } .sale-offer-tier { background: var(--home-warm-white); border: 1px solid var(--home-hairline-strong); padding: 24px 20px; text-align: center; transition: border-color 250ms var(--home-ease); } .sale-offer-tier:hover { border-color: var(--home-gold); } @media (max-width: 768px) { .sale-offer-tier { padding: 14px 18px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 12px; text-align: left; } } @media (max-width: 380px) { .sale-offer-tier { grid-template-columns: 1fr auto; row-gap: 4px; } .sale-offer-tier-code { grid-column: 1 / -1; justify-self: start; } } .sale-offer-tier-label { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--home-warm-gray); font-weight: 500; margin-bottom: 10px; } @media (max-width: 768px) { .sale-offer-tier-label { margin-bottom: 0; font-size: 9.5px; letter-spacing: 0.22em; } } .sale-offer-tier-amount { font-family: var(--home-f-display); font-weight: 400; font-size: 28px; line-height: 1; color: var(--home-ink); margin-bottom: 10px; letter-spacing: -0.01em; } .sale-offer-tier-amount em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-signature); font-weight: 500; } @media (max-width: 768px) { .sale-offer-tier-amount { font-size: 19px; margin-bottom: 0; } } .sale-offer-tier-code { font-family: var(--home-f-body); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: var(--home-signature-deep); padding: 7px 14px; border: 1px dashed var(--home-signature); background: rgba(229,91,40,0.04); display: inline-block; margin-top: 4px; } @media (max-width: 768px) { .sale-offer-tier-code { margin-top: 0; font-size: 9.5px; padding: 6px 11px; letter-spacing: 0.18em; white-space: nowrap; } } /* === INTRO === */ .sale-intro { padding: 96px 48px !important; background: var(--home-ivory); text-align: center; } @media (max-width: 768px) { .sale-intro { padding: 64px 24px !important; } } @media (max-width: 640px) { .sale-intro { padding: 56px 20px !important; } } .sale-intro-inner { max-width: 920px; margin: 0 auto; } .sale-intro-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 22px; } @media (max-width: 640px) { .sale-intro-eyebrow { font-size: 10px; margin-bottom: 18px; } } .sale-intro-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 22px; } .sale-intro-title em { font-family: var(--home-f-editorial); font-style: italic; } @media (max-width: 768px) { .sale-intro-title { font-size: 28px; } } @media (max-width: 640px) { .sale-intro-title { font-size: 24px; margin-bottom: 16px; } } .sale-intro-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; color: var(--home-charcoal); max-width: 620px; margin: 0 auto 16px; } .sale-intro-sub em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-ink); } @media (max-width: 768px) { .sale-intro-sub { font-size: 16px; } } @media (max-width: 640px) { .sale-intro-sub { font-size: 14px; } } .sale-intro-divider { width: 48px; height: 1px; background: var(--home-gold); margin: 28px auto; } /* === MEDIA GRID === */ .sale-media-grid { padding: 96px 48px !important; background: var(--home-paper); } @media (max-width: 768px) { .sale-media-grid { padding: 64px 24px !important; } } @media (max-width: 640px) { .sale-media-grid { padding: 56px 20px !important; } } .sale-media-grid-head { max-width: 1240px; margin: 0 auto 48px; text-align: center; } @media (max-width: 640px) { .sale-media-grid-head { margin-bottom: 32px; } } .sale-media-grid-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 16px; } @media (max-width: 640px) { .sale-media-grid-eyebrow { font-size: 10px; margin-bottom: 12px; } } .sale-media-grid-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.018em; color: var(--home-ink); margin: 0 0 14px; } .sale-media-grid-title em { font-family: var(--home-f-editorial); font-style: italic; } @media (max-width: 768px) { .sale-media-grid-title { font-size: 26px; } } @media (max-width: 640px) { .sale-media-grid-title { font-size: 22px; } } .sale-media-grid-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(15px, 1.5vw, 18px); color: var(--home-charcoal); max-width: 560px; margin: 0 auto; } @media (max-width: 640px) { .sale-media-grid-sub { font-size: 14px; } } .sale-media-grid-inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 900px) { .sale-media-grid-inner { grid-template-columns: 1fr; gap: 12px; } } .sale-media-tile { aspect-ratio: 4/5; overflow: hidden; background: var(--home-linen); position: relative; cursor: pointer; } .sale-media-tile img, .sale-media-tile video { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .sale-media-tile:hover img, .sale-media-tile:hover video { transform: scale(1.04); } .sale-media-tile-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0) 50%, rgba(13,10,8,0.55) 100%); pointer-events: none; } .sale-media-tile-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px; color: var(--home-ivory); pointer-events: none; } .sale-media-tile-tag { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 6px; } @media (max-width: 640px) { .sale-media-tile-tag { font-size: 9px; margin-bottom: 4px; } } .sale-media-tile-title { font-family: var(--home-f-display); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; color: var(--home-ivory); margin: 0; } .sale-media-tile-title em { font-family: var(--home-f-editorial); font-style: italic; } @media (max-width: 640px) { .sale-media-tile-title { font-size: 19px; } } /* === REVIEWS === */ .sale-reviews { padding: 96px 48px !important; background: var(--home-ivory); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } @media (max-width: 768px) { .sale-reviews { padding: 64px 24px !important; } } @media (max-width: 640px) { .sale-reviews { padding: 56px 0 64px !important; } } .sale-reviews-head { max-width: 1240px; margin: 0 auto 56px; text-align: center; } @media (max-width: 640px) { .sale-reviews-head { margin-bottom: 28px; padding: 0 16px; } } .sale-reviews-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 16px; } @media (max-width: 640px) { .sale-reviews-eyebrow { font-size: 10px; margin-bottom: 12px; } } .sale-reviews-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.018em; color: var(--home-ink); margin: 0 0 14px; } .sale-reviews-title em { font-family: var(--home-f-editorial); font-style: italic; } @media (max-width: 640px) { .sale-reviews-title { font-size: 22px; } } .sale-reviews-rating { display: inline-flex; align-items: center; gap: 12px; } .sale-reviews-stars { display: inline-flex; gap: 2px; color: var(--home-signature); } .sale-reviews-stars svg { width: 16px; height: 16px; } .sale-reviews-rating-text { font-family: var(--home-f-editorial); font-style: italic; font-size: 15px; color: var(--home-charcoal); } .sale-reviews-rating-text strong { color: var(--home-ink); font-weight: 500; font-style: normal; font-family: var(--home-f-body); } .sale-reviews-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 1024px) { .sale-reviews-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 640px) { .sale-reviews-grid { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 4px 16px 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sale-reviews-grid::-webkit-scrollbar { display: none; } } .sale-review { background: var(--home-warm-white); border: 1px solid var(--home-hairline); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; transition: all 250ms var(--home-ease); } .sale-review:hover { border-color: var(--home-gold); transform: translateY(-2px); } @media (max-width: 640px) { .sale-review { flex: 0 0 78vw; max-width: 320px; min-width: 260px; scroll-snap-align: start; padding: 22px 20px; gap: 12px; } } .sale-review-stars { display: inline-flex; gap: 2px; color: var(--home-signature); } .sale-review-stars svg { width: 14px; height: 14px; } .sale-review-quote { font-family: var(--home-f-editorial); font-style: italic; font-size: 17px; line-height: 1.55; color: var(--home-ink); flex: 1; margin: 0; } @media (max-width: 640px) { .sale-review-quote { font-size: 15.5px; } } .sale-review-meta { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--home-hairline); } .sale-review-name { font-family: var(--home-f-display); font-size: 14px; font-weight: 500; color: var(--home-ink); letter-spacing: -0.005em; } .sale-review-location { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-warm-gray); } .sale-review-verified { font-family: var(--home-f-body); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-top: 4px; } .sale-reviews-hint { display: none; align-items: center; justify-content: center; gap: 8px; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-top: 14px; } .sale-reviews-hint svg { width: 14px; height: 14px; } @media (max-width: 640px) { .sale-reviews-hint { display: flex; } } /* === MWT === */ .sale-mwt { padding: 96px 48px !important; background: var(--home-linen); } @media (max-width: 768px) { .sale-mwt { padding: 64px 24px !important; } } @media (max-width: 640px) { .sale-mwt { padding: 48px 20px !important; } } .sale-mwt-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } @media (max-width: 900px) { .sale-mwt-inner { grid-template-columns: 1fr; gap: 32px; } } .sale-mwt-media { aspect-ratio: 3/4; overflow: hidden; background: var(--home-linen); position: relative; } .sale-mwt-media video { width: 100%; height: 100%; object-fit: cover; } .sale-mwt-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } @media (max-width: 640px) { .sale-mwt-eyebrow { font-size: 10px; margin-bottom: 14px; } } .sale-mwt-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.018em; color: var(--home-ink); margin: 0 0 20px; } .sale-mwt-title em { font-family: var(--home-f-editorial); font-style: italic; } @media (max-width: 768px) { .sale-mwt-title { font-size: 24px; } } @media (max-width: 640px) { .sale-mwt-title { font-size: 22px; margin-bottom: 16px; } } .sale-mwt-body { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--home-charcoal); margin: 0 0 16px; } @media (max-width: 768px) { .sale-mwt-body { font-size: 14.5px; } } @media (max-width: 640px) { .sale-mwt-body { font-size: 13px; } } /* === COMPARE === */ .sale-compare { padding: 96px 48px !important; background: var(--home-paper); } @media (max-width: 768px) { .sale-compare { padding: 64px 24px !important; } } @media (max-width: 640px) { .sale-compare { padding: 48px 16px !important; } } .sale-compare-head { max-width: 1240px; margin: 0 auto 48px; text-align: center; } @media (max-width: 640px) { .sale-compare-head { margin-bottom: 24px; } } .sale-compare-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 16px; } @media (max-width: 640px) { .sale-compare-eyebrow { font-size: 10px; margin-bottom: 12px; } } .sale-compare-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.018em; color: var(--home-ink); margin: 0 0 14px; } .sale-compare-title em { font-family: var(--home-f-editorial); font-style: italic; } @media (max-width: 640px) { .sale-compare-title { font-size: 22px; } } .sale-compare-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(15px, 1.5vw, 18px); color: var(--home-charcoal); max-width: 620px; margin: 0 auto; } @media (max-width: 640px) { .sale-compare-sub { font-size: 14px; } } .sale-compare-table { max-width: 980px; margin: 0 auto; background: var(--home-warm-white); border: 1px solid var(--home-hairline); } .sale-compare-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--home-hairline); gap: 12px; } .sale-compare-row:last-child { border-bottom: none; } .sale-compare-row--head { background: var(--home-linen); padding: 18px 28px; } @media (max-width: 768px) { .sale-compare-row { padding: 18px 22px; } .sale-compare-row--head { padding: 14px 22px; } } .sale-compare-label { font-family: var(--home-f-display); font-weight: 500; font-size: 15px; color: var(--home-ink); letter-spacing: -0.005em; } .sale-compare-col-head { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; } .sale-compare-col-head--theirs { color: var(--home-warm-gray); } .sale-compare-col-head--ours { color: var(--home-signature); font-weight: 600; } .sale-compare-theirs { font-family: var(--home-f-editorial); font-style: italic; font-size: 15px; color: var(--home-warm-gray); } .sale-compare-theirs--strike { text-decoration: line-through; text-decoration-color: rgba(107, 96, 87, 0.40); } .sale-compare-ours { font-family: var(--home-f-display); font-weight: 500; font-size: 15px; color: var(--home-ink); letter-spacing: -0.005em; } .sale-compare-ours em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-deep); } .sale-compare-check { display: inline-flex; align-items: center; gap: 8px; } .sale-compare-check svg { color: var(--home-signature); flex-shrink: 0; } .sale-compare-cross { display: inline-flex; align-items: center; gap: 8px; color: var(--home-warm-gray); font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; } .sale-compare-cross svg { flex-shrink: 0; opacity: 0.5; } @media (max-width: 640px) { .sale-compare-row { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "label label" "theirs ours"; background: transparent; border: none; border-bottom: 1px solid var(--home-hairline); padding: 0; margin: 0; gap: 0; } .sale-compare-row:last-child { border-bottom: none; } .sale-compare-row--head { display: none; } .sale-compare-row > .sale-compare-label { grid-area: label; text-align: left; font-family: var(--home-f-body); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 600; padding: 12px 14px 10px; margin: 0; border-bottom: 1px solid var(--home-hairline); line-height: 1.35; } .sale-compare-row > .sale-compare-theirs, .sale-compare-row > .sale-compare-cross { grid-area: theirs; display: block; padding: 12px 14px; margin: 0; border-right: 1px solid var(--home-hairline); text-align: left; font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; line-height: 1.4; color: var(--home-warm-gray); } .sale-compare-row > .sale-compare-theirs::before, .sale-compare-row > .sale-compare-cross::before { content: "Traditional"; display: block; font-size: 9px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--home-warm-gray); font-family: var(--home-f-body); font-weight: 500; font-style: normal; margin-bottom: 5px; opacity: 0.7; } .sale-compare-row > .sale-compare-ours, .sale-compare-row > .sale-compare-check { grid-area: ours; display: block; padding: 12px 14px; margin: 0; background: rgba(229, 91, 40, 0.04); text-align: left; font-family: var(--home-f-display); font-weight: 500; font-size: 14.5px; line-height: 1.4; color: var(--home-ink); } .sale-compare-row > .sale-compare-ours::before, .sale-compare-row > .sale-compare-check::before { content: "Sat\00e9 ur"; display: block; font-size: 9px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--home-signature); font-family: var(--home-f-body); font-weight: 600; margin-bottom: 5px; } .sale-compare-row > .sale-compare-ours em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-deep); font-weight: 400; } .sale-compare-row > .sale-compare-cross > svg, .sale-compare-row > .sale-compare-check > svg { display: inline-block; vertical-align: middle; margin-right: 5px; margin-top: -2px; width: 13px; height: 13px; } .sale-compare-row > .sale-compare-cross > svg { color: var(--home-warm-gray); opacity: 0.55; } .sale-compare-row > .sale-compare-check > svg { color: var(--home-signature); } .sale-compare-row > .sale-compare-cross > span, .sale-compare-row > .sale-compare-check > span { display: inline; vertical-align: middle; } .sale-compare-row > .sale-compare-theirs--strike { text-decoration: line-through; text-decoration-color: rgba(107, 96, 87, 0.45); } } /* === ATMOS === */ .sale-atmos { position: relative; height: 64vh; min-height: 520px; max-height: 720px; overflow: hidden; background: var(--home-noir); display: flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .sale-atmos { height: 52vh; min-height: 420px; } } @media (max-width: 640px) { .sale-atmos { height: 48vh; min-height: 380px; } } .sale-atmos-bg { position: absolute; inset: 0; z-index: 1; } .sale-atmos-bg img { width: 100%; height: 100%; object-fit: cover; } .sale-atmos-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.30) 0%, rgba(13,10,8,0.10) 50%, rgba(13,10,8,0.55) 100%); } .sale-atmos-inner { position: relative; z-index: 3; max-width: 920px; padding: 0 48px; text-align: center; color: var(--home-ivory); } @media (max-width: 768px) { .sale-atmos-inner { padding: 0 24px; } } .sale-atmos-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 22px; } @media (max-width: 640px) { .sale-atmos-eyebrow { font-size: 10px; margin-bottom: 16px; } } .sale-atmos-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0; text-shadow: 0 1px 2px rgba(13,10,8,0.4), 0 4px 18px rgba(13,10,8,0.35); } .sale-atmos-title em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); } @media (max-width: 768px) { .sale-atmos-title { font-size: 30px; } } @media (max-width: 640px) { .sale-atmos-title { font-size: 26px; } } /* === PRODUCTS HEADER (sits above native main-collection grid) === */ .sale-products-header { padding: 96px 48px 0 !important; background: var(--home-ivory); } @media (max-width: 768px) { .sale-products-header { padding: 64px 24px 0 !important; } } @media (max-width: 640px) { .sale-products-header { padding: 48px 16px 0 !important; } } .sale-products-header-inner { max-width: 1240px; margin: 0 auto; text-align: center; } .sale-products-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } @media (max-width: 640px) { .sale-products-eyebrow { font-size: 10px; margin-bottom: 14px; } } .sale-products-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 14px; } .sale-products-title em { font-family: var(--home-f-editorial); font-style: italic; } @media (max-width: 768px) { .sale-products-title { font-size: 24px; } } @media (max-width: 640px) { .sale-products-title { font-size: 22px; } } .sale-products-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(15px, 1.5vw, 18px); color: var(--home-charcoal); max-width: 560px; margin: 0 auto; } @media (max-width: 640px) { .sale-products-sub { font-size: 14px; } } /* === FAQ === */ .sale-faq { padding: 96px 48px !important; background: var(--home-paper); } @media (max-width: 768px) { .sale-faq { padding: 64px 24px !important; } } @media (max-width: 640px) { .sale-faq { padding: 48px 20px !important; } } .sale-faq-inner { max-width: 880px; margin: 0 auto; } .sale-faq-head { margin-bottom: 40px; text-align: center; } @media (max-width: 640px) { .sale-faq-head { margin-bottom: 28px; } } .sale-faq-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 16px; } @media (max-width: 640px) { .sale-faq-eyebrow { font-size: 10px; margin-bottom: 12px; } } .sale-faq-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.015em; color: var(--home-ink); margin: 0; } .sale-faq-title em { font-family: var(--home-f-editorial); font-style: italic; } @media (max-width: 768px) { .sale-faq-title { font-size: 24px; } } @media (max-width: 640px) { .sale-faq-title { font-size: 22px; } } .sale-accordion { border-top: 1px solid var(--home-hairline); } .sale-accordion-item { border-bottom: 1px solid var(--home-hairline); } .sale-accordion-trigger { width: 100%; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; font-family: var(--home-f-display); font-weight: 500; font-size: 16px; color: var(--home-ink); cursor: pointer; background: none; border: none; } .sale-accordion-trigger:hover { color: var(--home-signature); } @media (max-width: 640px) { .sale-accordion-trigger { font-size: 15px; padding: 18px 0; } } .sale-accordion-icon { width: 14px; height: 14px; flex-shrink: 0; position: relative; transition: transform 300ms var(--home-ease); } .sale-accordion-icon::before, .sale-accordion-icon::after { content: ""; position: absolute; background: var(--home-ink); } .sale-accordion-icon::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); } .sale-accordion-icon::after { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); transition: transform 300ms var(--home-ease); } .sale-accordion-item--open .sale-accordion-icon::after { transform: translateX(-50%) scaleY(0); } .sale-accordion-body { max-height: 0; overflow: hidden; transition: max-height 400ms var(--home-ease); } .sale-accordion-item--open .sale-accordion-body { max-height: 500px; } .sale-accordion-body-inner { padding: 0 38px 22px 0; font-family: var(--home-f-editorial); font-style: italic; font-size: 15px; line-height: 1.65; color: var(--home-charcoal); } .sale-accordion-body-inner a { color: var(--home-gold-deep); text-decoration: underline; } .sale-accordion-body-inner a:hover { color: var(--home-signature); } @media (max-width: 640px) { .sale-accordion-body-inner { font-size: 13.5px; } } /* === FINAL CTA === */ .sale-final-cta { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; padding: 96px 48px !important; overflow: hidden; background: var(--home-noir); } @media (max-width: 768px) { .sale-final-cta { padding: 80px 24px !important; min-height: 420px; } } @media (max-width: 640px) { .sale-final-cta { padding: 64px 20px !important; min-height: 380px; } } .sale-final-cta-bg { position: absolute; inset: 0; z-index: 1; } .sale-final-cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } .sale-final-cta-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.50) 0%, rgba(13,10,8,0.40) 50%, rgba(13,10,8,0.65) 100%); } .sale-final-cta-inner { position: relative; z-index: 3; max-width: 880px; text-align: center; color: var(--home-ivory); } .sale-final-cta-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 24px; } @media (max-width: 640px) { .sale-final-cta-eyebrow { font-size: 10px; margin-bottom: 18px; } } .sale-final-cta-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 28px; color: var(--home-ivory); text-shadow: 0 1px 2px rgba(13,10,8,0.4), 0 4px 18px rgba(13,10,8,0.35); } .sale-final-cta-title em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); } @media (max-width: 768px) { .sale-final-cta-title { font-size: 32px; } } @media (max-width: 640px) { .sale-final-cta-title { font-size: 26px; } } .sale-final-cta-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.8vw, 20px); line-height: 1.55; color: var(--home-gold-light); margin: 0 auto 32px; max-width: 540px; } @media (max-width: 640px) { .sale-final-cta-sub { font-size: 14px; margin-bottom: 24px; } } .sale-final-cta-btn { display: inline-flex; align-items: center; gap: 14px; padding: 20px 44px; background: var(--home-ivory); color: var(--home-ink); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; transition: all 250ms var(--home-ease); } .sale-final-cta-btn:hover { background: var(--home-signature); color: var(--home-ivory); } @media (max-width: 640px) { .sale-final-cta-btn { font-size: 10px; padding: 18px 36px; } } /* === MARQUEE === */ .sale-marquee { background: var(--home-signature); color: var(--home-ivory); padding: 22px 0 !important; overflow: hidden; } .sale-marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: home-marquee-scroll 60s linear infinite; font-family: var(--home-f-editorial); font-style: italic; font-size: 24px; } @media (max-width: 768px) { .sale-marquee-track { font-size: 20px; gap: 40px; } } @media (max-width: 640px) { .sale-marquee-track { font-size: 18px; } } .sale-marquee-item { display: inline-flex; align-items: center; gap: 32px; } .sale-marquee-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--home-ivory); flex-shrink: 0; } /* === PRESS === */ .sale-press { padding: 48px !important; background: var(--home-linen); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } @media (max-width: 640px) { .sale-press { padding: 36px 20px !important; } } .sale-press-inner { max-width: 1240px; margin: 0 auto; text-align: center; } .sale-press-label { display: block; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 22px; } .sale-press-logos { display: flex; justify-content: center; align-items: center; gap: clamp(24px, 4.5vw, 56px); flex-wrap: wrap; } .sale-press-logo { font-family: var(--home-f-display); font-style: italic; font-weight: 400; font-size: clamp(18px, 2vw, 26px); color: var(--home-charcoal); opacity: 0.7; } /* === END SALE v1 === */ /* === LKBK v1 START === */ /* Sateur — page.sateur-2026-edit-apres-table template (16 custom-liquid + native featured-collection) */ /* Mockup: Output/Website/edit-apres-table-v1.html (Volume IV — Après Table) */ /* Strategy 1+2: Section ID breakout */ #shopify-section-lkbk_issuebar,#shopify-section-lkbk_title,#shopify-section-lkbk_letter, #shopify-section-lkbk_chapter1,#shopify-section-lkbk_quote1,#shopify-section-lkbk_chapter2, #shopify-section-lkbk_spread,#shopify-section-lkbk_colstack,#shopify-section-lkbk_quote2, #shopify-section-lkbk_chapter4,#shopify-section-lkbk_chapter5,#shopify-section-lkbk_scenegrid, #shopify-section-lkbk_closing,#shopify-section-lkbk_boutique_header, #shopify-section-lkbk_colophon,#shopify-section-lkbk_marquee, [id*="lkbk_issuebar"],[id*="lkbk_title"],[id*="lkbk_letter"],[id*="lkbk_chapter1"], [id*="lkbk_quote1"],[id*="lkbk_chapter2"],[id*="lkbk_spread"],[id*="lkbk_colstack"], [id*="lkbk_quote2"],[id*="lkbk_chapter4"],[id*="lkbk_chapter5"],[id*="lkbk_scenegrid"], [id*="lkbk_closing"],[id*="lkbk_boutique_header"],[id*="lkbk_colophon"],[id*="lkbk_marquee"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } /* Strategy 3: inner-element breakout (note: lkbk_boutique_grid intentionally NOT here so native featured-collection's full_width toggle stays authoritative) */ .lkbk-issuebar,.lkbk-title-page,.lkbk-editor-letter,.lkbk-chapter,.lkbk-pull-quote, .lkbk-spread,.lkbk-colstack,.lkbk-scenegrid,.lkbk-closing-manifesto,.lkbk-boutique-header, .lkbk-colophon,.lkbk-marquee { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* === ISSUE BAR === */ .lkbk-issuebar { background: var(--home-ink); color: var(--home-ivory); padding: 8px 24px !important; text-align: center; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase; font-weight: 500; overflow: hidden; } .lkbk-issuebar em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); letter-spacing: 0.08em; text-transform: none; font-size: 13px; padding: 0 8px; } /* === TITLE PAGE === */ .lkbk-title-page { padding: 0 !important; background: var(--home-ivory); border-top: 1px solid var(--home-hairline); } .lkbk-title-page-top { padding: 80px 48px 48px; max-width: 1440px; margin: 0 auto; text-align: center; } @media (max-width: 768px) { .lkbk-title-page-top { padding: 56px 24px 32px; } } .lkbk-title-page-eyebrow { display: inline-flex; align-items: center; gap: 16px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 36px; } .lkbk-title-page-eyebrow::before, .lkbk-title-page-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--home-gold); } .lkbk-title-page-title { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; font-size: clamp(80px, 14vw, 220px); line-height: 0.95; letter-spacing: -0.04em; color: var(--home-ink); margin: 0 0 28px; } .lkbk-title-page-title strong { font-weight: 400; } .lkbk-title-page-sub { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.4; color: var(--home-charcoal); max-width: 720px; margin: 0 auto 48px; } @media (max-width: 640px) { .lkbk-title-page-sub { font-size: 17px; max-width: 92%; } } .lkbk-title-page-byline { display: inline-flex; align-items: center; gap: 12px; font-family: var(--home-f-body); font-size: 10.5px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--home-charcoal); font-weight: 500; padding-top: 24px; border-top: 1px solid var(--home-hairline); width: 280px; max-width: 80%; justify-content: center; } .lkbk-title-page-byline em { font-family: var(--home-f-editorial); font-style: italic; letter-spacing: 0.04em; text-transform: none; font-size: 13px; color: var(--home-ink); } .lkbk-byline-dot { color: var(--home-gold); } .lkbk-title-page-hero { width: 100%; aspect-ratio: 21/9; overflow: hidden; background: var(--home-noir); margin-top: 24px; } .lkbk-title-page-hero img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 768px) { .lkbk-title-page-hero { aspect-ratio: 4/5; } } .lkbk-figure-caption { font-family: var(--home-f-editorial); font-style: italic; font-size: 12.5px; color: var(--home-warm-gray); padding: 10px 48px 0; max-width: 1440px; margin: 0 auto; letter-spacing: 0.02em; } .lkbk-figure-caption strong { font-family: var(--home-f-body); font-style: normal; font-weight: 500; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--home-charcoal); margin-right: 10px; } @media (max-width: 768px) { .lkbk-figure-caption { padding: 10px 24px 0; font-size: 11.5px; } } /* === EDITOR'S LETTER === */ .lkbk-editor-letter { padding: 120px 48px !important; background: var(--home-paper); } @media (max-width: 768px) { .lkbk-editor-letter { padding: 80px 24px !important; } } .lkbk-editor-letter-inner { max-width: 720px; margin: 0 auto; } .lkbk-editor-letter-eyebrow { font-family: var(--home-f-body); font-size: 10.5px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 32px; text-align: center; } .lkbk-editor-letter-divider { width: 36px; height: 1px; background: var(--home-gold); margin: 0 auto 36px; } .lkbk-editor-letter-body { font-family: var(--home-f-editorial); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.55; color: var(--home-ink); text-align: center; } .lkbk-editor-letter-body p { margin-bottom: 26px; } .lkbk-editor-letter-body p:last-child { margin-bottom: 0; } .lkbk-editor-letter-body p:first-child::first-letter { font-family: var(--home-f-display); font-style: normal; font-weight: 400; font-size: 5.6em; float: left; line-height: 0.9; padding: 8px 16px 0 0; color: var(--home-signature); } @media (max-width: 640px) { .lkbk-editor-letter-body { font-size: 19px; text-align: left; } .lkbk-editor-letter-body p:first-child::first-letter { font-size: 4.4em; padding: 6px 12px 0 0; } } .lkbk-editor-letter-sig { text-align: center; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--home-hairline); font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-warm-gray); letter-spacing: 0.04em; } .lkbk-editor-letter-sig em { color: var(--home-ink); } /* === CHAPTER === */ .lkbk-chapter { padding: 120px 48px !important; } .lkbk-chapter--ivory { background: var(--home-ivory); } .lkbk-chapter--paper { background: var(--home-paper); } @media (max-width: 768px) { .lkbk-chapter { padding: 72px 24px !important; } } .lkbk-chapter-inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .lkbk-chapter--reverse .lkbk-chapter-inner { direction: rtl; } .lkbk-chapter--reverse .lkbk-chapter-inner > * { direction: ltr; } @media (max-width: 900px) { .lkbk-chapter-inner { grid-template-columns: 1fr; gap: 28px; } .lkbk-chapter--reverse .lkbk-chapter-inner { direction: ltr; } } .lkbk-chapter-media { aspect-ratio: 4/5; overflow: hidden; background: var(--home-noir); position: relative; } .lkbk-chapter-media video, .lkbk-chapter-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .lkbk-chapter-media-cap { font-family: var(--home-f-editorial); font-style: italic; font-size: 12px; color: var(--home-warm-gray); margin: 12px 0 0; letter-spacing: 0.04em; } .lkbk-chapter-media-cap strong { font-family: var(--home-f-body); font-style: normal; font-weight: 500; font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--home-ink); margin-right: 10px; } .lkbk-chapter-copy { padding: 0 24px; } @media (max-width: 900px) { .lkbk-chapter-copy { padding: 0; } } .lkbk-chapter-num { font-family: var(--home-f-display); font-style: italic; font-weight: 400; font-size: clamp(64px, 7vw, 100px); line-height: 0.85; color: var(--home-gold); margin: 0 0 8px; letter-spacing: -0.03em; } .lkbk-chapter-num::after { content: ""; display: block; width: 56px; height: 1px; background: var(--home-gold); margin: 24px 0 28px; } .lkbk-chapter-kicker { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .lkbk-chapter-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 24px; } .lkbk-chapter-title em { font-family: var(--home-f-editorial); font-style: italic; } .lkbk-chapter-body { font-family: var(--home-f-editorial); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.65; color: var(--home-charcoal); margin: 0 0 16px; } @media (max-width: 640px) { .lkbk-chapter-body { font-size: 17px; } } .lkbk-chapter-body strong { font-family: var(--home-f-display); font-style: normal; font-weight: 500; color: var(--home-ink); } /* === PULL QUOTE === */ .lkbk-pull-quote { padding: 140px 48px !important; background: var(--home-ivory); text-align: center; position: relative; overflow: hidden; } .lkbk-pull-quote--linen { background: var(--home-linen); } .lkbk-pull-quote--linen .lkbk-pull-quote-mark { color: var(--home-gold-deep); opacity: 0.45; } .lkbk-pull-quote--dark { background: var(--home-noir); color: var(--home-ivory); } @media (max-width: 768px) { .lkbk-pull-quote { padding: 80px 24px !important; } } .lkbk-pull-quote-inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 2; } .lkbk-pull-quote-mark { font-family: var(--home-f-display); font-style: italic; font-size: 80px; line-height: 0.7; color: var(--home-gold); margin-bottom: 28px; opacity: 0.55; } .lkbk-pull-quote--dark .lkbk-pull-quote-mark { color: var(--home-gold-light); } .lkbk-pull-quote-text { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; font-size: clamp(36px, 5vw, 72px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin: 0; } .lkbk-pull-quote--dark .lkbk-pull-quote-text { color: var(--home-ivory); } .lkbk-pull-quote-text em { font-style: italic; color: var(--home-signature); } .lkbk-pull-quote--dark .lkbk-pull-quote-text em { color: var(--home-gold-light); } .lkbk-pull-quote-attr { display: inline-flex; align-items: center; gap: 14px; margin-top: 36px; font-family: var(--home-f-body); font-size: 10.5px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; } .lkbk-pull-quote--dark .lkbk-pull-quote-attr { color: var(--home-gold-light); } .lkbk-pull-quote-attr::before { content: ""; width: 28px; height: 1px; background: var(--home-gold); } /* Dark pull quote elevated styling */ .lkbk-pull-quote--dark .lkbk-pull-quote-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.18; filter: grayscale(0.3) brightness(0.6); } .lkbk-pull-quote--dark .lkbk-pull-quote-bg img, .lkbk-pull-quote--dark .lkbk-pull-quote-bg video { width: 100%; height: 100%; object-fit: cover; } .lkbk-pull-quote--dark .lkbk-pull-quote-vignette { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, transparent 30%, rgba(13,10,8,0.85) 100%); pointer-events: none; } .lkbk-pull-quote--dark .lkbk-pull-quote-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 26px; opacity: 0.7; } .lkbk-pull-quote--dark .lkbk-pull-quote-rule::before, .lkbk-pull-quote--dark .lkbk-pull-quote-rule::after { content: ""; width: 56px; height: 1px; background: var(--home-gold-light); } .lkbk-pull-quote--dark .lkbk-pull-quote-rule-text { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-gold-light); letter-spacing: 0.34em; text-transform: uppercase; } .lkbk-pull-quote--dark .lkbk-pull-quote-stamp { margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(217, 201, 162, 0.18); display: flex; justify-content: center; gap: 28px; font-family: var(--home-f-body); font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-light); font-weight: 500; opacity: 0.7; } .lkbk-pull-quote--dark .lkbk-pull-quote-stamp em { font-family: var(--home-f-editorial); font-style: italic; letter-spacing: 0.06em; text-transform: none; font-size: 12px; color: var(--home-gold-light); } @media (max-width: 640px) { .lkbk-pull-quote--dark .lkbk-pull-quote-stamp { gap: 16px; flex-wrap: wrap; } } /* === SPREAD === */ .lkbk-spread { position: relative; height: 84vh; min-height: 600px; max-height: 840px; overflow: hidden; background: var(--home-noir); } @media (max-width: 768px) { .lkbk-spread { height: 64vh; min-height: 460px; } } .lkbk-spread-bg { position: absolute; inset: 0; z-index: 1; } .lkbk-spread-bg video, .lkbk-spread-bg img { width: 100%; height: 100%; object-fit: cover; } .lkbk-spread-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.45) 0%, rgba(13,10,8,0.20) 35%, rgba(13,10,8,0.55) 100%); } .lkbk-spread-inner { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px 48px 48px; max-width: 1440px; margin: 0 auto; color: var(--home-ivory); } @media (max-width: 768px) { .lkbk-spread-inner { padding: 40px 24px 32px; } } .lkbk-spread-num { font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-gold-light); letter-spacing: 0.04em; margin-bottom: 14px; } .lkbk-spread-title { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; font-size: clamp(56px, 9vw, 140px); line-height: 0.95; letter-spacing: -0.03em; color: var(--home-ivory); margin: 0 0 22px; text-shadow: 0 2px 12px rgba(13,10,8,0.4); } .lkbk-spread-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(18px, 1.8vw, 22px); color: var(--home-gold-light); line-height: 1.4; max-width: 540px; margin: 0; text-shadow: 0 1px 8px rgba(13,10,8,0.4); } .lkbk-spread-caption { position: absolute; bottom: 16px; right: 24px; z-index: 4; font-family: var(--home-f-editorial); font-style: italic; font-size: 11px; color: rgba(245,237,227,0.65); letter-spacing: 0.04em; } /* === COLSTACK === */ .lkbk-colstack { padding: 120px 48px !important; background: var(--home-ivory); } @media (max-width: 768px) { .lkbk-colstack { padding: 80px 24px !important; } } .lkbk-colstack-inner { max-width: 980px; margin: 0 auto; } .lkbk-colstack-head { text-align: center; margin-bottom: 56px; } .lkbk-colstack-num { font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-gold); letter-spacing: 0.04em; margin-bottom: 14px; } .lkbk-colstack-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(32px, 3.8vw, 48px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ink); margin: 0; } .lkbk-colstack-title em { font-family: var(--home-f-editorial); font-style: italic; } .lkbk-colstack-body { columns: 2; column-gap: 56px; font-family: var(--home-f-editorial); font-style: italic; font-size: 18px; line-height: 1.7; color: var(--home-charcoal); } .lkbk-colstack-body p { margin: 0 0 18px; break-inside: avoid; } @media (max-width: 768px) { .lkbk-colstack-body { columns: 1; font-size: 16px; } } /* === SCENEGRID === */ .lkbk-scenegrid { padding: 96px 48px !important; background: var(--home-ivory); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } @media (max-width: 768px) { .lkbk-scenegrid { padding: 64px 24px !important; } } .lkbk-scenegrid-inner { max-width: 1440px; margin: 0 auto; } .lkbk-scenegrid-head { text-align: center; margin-bottom: 48px; } .lkbk-scenegrid-eyebrow { font-family: var(--home-f-body); font-size: 10.5px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .lkbk-scenegrid-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; color: var(--home-ink); margin: 0; } .lkbk-scenegrid-title em { font-family: var(--home-f-editorial); font-style: italic; } .lkbk-scenegrid-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; } @media (max-width: 900px) { .lkbk-scenegrid-grid { grid-template-columns: 1fr; gap: 24px; } } .lkbk-scenegrid-media { aspect-ratio: 4/5; overflow: hidden; background: var(--home-noir); } .lkbk-scenegrid-media img { width: 100%; height: 100%; object-fit: cover; } .lkbk-scenegrid-cap { margin-top: 14px; } .lkbk-scenegrid-cap-num { font-family: var(--home-f-editorial); font-style: italic; font-size: 12px; color: var(--home-gold); margin-bottom: 4px; letter-spacing: 0.04em; } .lkbk-scenegrid-cap-title { font-family: var(--home-f-display); font-weight: 500; font-size: 16px; color: var(--home-ink); margin-bottom: 4px; letter-spacing: -0.005em; } .lkbk-scenegrid-cap-body { font-family: var(--home-f-editorial); font-style: italic; font-size: 13.5px; color: var(--home-warm-gray); line-height: 1.5; } /* === CLOSING MANIFESTO === */ .lkbk-closing-manifesto { position: relative; padding: 160px 48px !important; background: var(--home-noir); color: var(--home-ivory); text-align: center; overflow: hidden; } @media (max-width: 768px) { .lkbk-closing-manifesto { padding: 96px 24px !important; } } .lkbk-closing-manifesto-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.14; filter: brightness(0.5); } .lkbk-closing-manifesto-bg img { width: 100%; height: 100%; object-fit: cover; } .lkbk-closing-manifesto-vignette { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, transparent 25%, rgba(13,10,8,0.88) 100%), linear-gradient(180deg, rgba(13,10,8,0.4) 0%, transparent 30%, transparent 70%, rgba(13,10,8,0.4) 100%); pointer-events: none; } .lkbk-closing-manifesto-inner { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; } .lkbk-closing-manifesto-fin { display: inline-flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 36px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; } .lkbk-closing-manifesto-fin::before, .lkbk-closing-manifesto-fin::after { content: ""; width: 36px; height: 1px; background: var(--home-signature); } .lkbk-closing-manifesto-fin em { font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-gold-light); letter-spacing: 0.06em; text-transform: none; } .lkbk-closing-manifesto-attr { margin-bottom: 32px; font-family: var(--home-f-body); font-size: 10.5px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-gold-light); font-weight: 500; opacity: 0.75; } .lkbk-closing-manifesto-text { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; font-size: clamp(40px, 6vw, 92px); line-height: 1.08; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0; } .lkbk-closing-manifesto-text em { font-style: italic; color: var(--home-gold-light); } .lkbk-closing-manifesto-text br { display: block; content: ""; margin-top: 0.3em; } .lkbk-closing-manifesto-ornament { margin: 56px auto 0; width: 56px; height: 1px; background: var(--home-gold); position: relative; } .lkbk-closing-manifesto-ornament::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; background: var(--home-ink); border: 1px solid var(--home-gold); border-radius: 50%; } .lkbk-closing-manifesto-credits { margin-top: 36px; display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; font-family: var(--home-f-body); font-size: 9.5px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--home-gold-light); font-weight: 500; opacity: 0.6; } .lkbk-closing-manifesto-credits em { font-family: var(--home-f-editorial); font-style: italic; letter-spacing: 0.06em; text-transform: none; font-size: 12px; color: var(--home-gold-light); } @media (max-width: 640px) { .lkbk-closing-manifesto-credits { gap: 14px; font-size: 9px; } } /* === BOUTIQUE HEADER === */ .lkbk-boutique-header { padding: 120px 48px 64px !important; background: var(--home-linen); } @media (max-width: 768px) { .lkbk-boutique-header { padding: 80px 24px 40px !important; } } .lkbk-boutique-header-inner { max-width: 980px; margin: 0 auto; text-align: center; } .lkbk-boutique-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--home-f-body); font-size: 10.5px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 22px; } .lkbk-boutique-eyebrow::before, .lkbk-boutique-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--home-gold); } .lkbk-boutique-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 18px; } .lkbk-boutique-title em { font-family: var(--home-f-editorial); font-style: italic; } .lkbk-boutique-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; color: var(--home-charcoal); max-width: 600px; margin: 0 auto; } /* === COLOPHON === */ .lkbk-colophon { padding: 96px 48px 72px !important; background: var(--home-paper); border-top: 1px solid var(--home-hairline); text-align: center; } @media (max-width: 768px) { .lkbk-colophon { padding: 64px 24px 48px !important; } } .lkbk-colophon-inner { max-width: 720px; margin: 0 auto; } .lkbk-colophon-divider { width: 64px; height: 1px; background: var(--home-gold); margin: 0 auto 32px; } .lkbk-colophon-title { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; color: var(--home-ink); margin: 0 0 28px; } .lkbk-colophon-title em { font-style: italic; } .lkbk-colophon-credits { font-family: var(--home-f-editorial); font-style: italic; font-size: 14.5px; line-height: 1.85; color: var(--home-charcoal); margin-bottom: 32px; } .lkbk-colophon-credits strong { font-family: var(--home-f-body); font-style: normal; font-weight: 500; font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--home-ink); margin-right: 10px; } .lkbk-colophon-copy { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-warm-gray); font-weight: 500; } /* === MARQUEE === */ .lkbk-marquee { background: var(--home-signature); color: var(--home-ivory); padding: 22px 0 !important; overflow: hidden; } .lkbk-marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: home-marquee-scroll 60s linear infinite; font-family: var(--home-f-editorial); font-style: italic; font-size: 26px; } @media (max-width: 640px) { .lkbk-marquee-track { font-size: 20px; } } .lkbk-marquee-item { display: inline-flex; align-items: center; gap: 32px; } .lkbk-marquee-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--home-ivory); flex-shrink: 0; } /* === END LKBK v1 === */ /* === HOME HERO VARIATIONS v1 START === */ /* 3 hero text/layout variations on the home_hero_video wrapper. Same video bg, same transparent-header behavior. Title text "Satéur. The 1% Ring®." matches the live hero; typography sizes match original hero (title clamp 36-60px, sub clamp 16-19px). Centered alignment + bottom-third vertical positioning with breathing room. To revert: delete this whole sub-block + remove the 3 sections from index.json. */ /* All variations: centered text, bottom-third vertical alignment, max-width container */ .home-hero-inner--v2_grand, .home-hero-inner--v3_refined, .home-hero-inner--v4_edition { display: flex !important; align-items: flex-end !important; justify-content: center !important; text-align: center !important; padding-bottom: clamp(48px, 12vh, 120px) !important; } @media (max-width: 768px) { .home-hero-inner--v2_grand, .home-hero-inner--v3_refined, .home-hero-inner--v4_edition { padding-bottom: clamp(36px, 10vh, 80px) !important; } } .home-hero-content--grand, .home-hero-content--refined, .home-hero-content--edition { max-width: 720px; margin: 0 auto; text-align: center; } /* ===== V2 — GRAND CENTERED ===== */ .home-hero-grand-eyebrow { display: inline-flex; align-items: center; gap: 16px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-light); font-weight: 500; margin: 0 0 22px; } .home-hero-grand-rule { width: 28px; height: 1px; background: var(--home-gold-light); display: inline-block; opacity: 0.7; } @media (max-width: 768px) { .home-hero-grand-eyebrow { font-size: 10px; gap: 12px; margin-bottom: 18px; letter-spacing: 0.28em; } .home-hero-grand-rule { width: 22px; } } @media (max-width: 640px) { .home-hero-grand-eyebrow { font-size: 9.5px; letter-spacing: 0.24em; } } .home-hero-grand-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0 0 16px; text-wrap: balance; text-shadow: 0 2px 14px rgba(13,10,8,0.4); } .home-hero-grand-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 400; color: var(--home-gold-light); } @media (max-width: 768px) { .home-hero-grand-title { font-size: 38px; margin-bottom: 14px; } } @media (max-width: 640px) { .home-hero-grand-title { font-size: 30px; } } @media (max-width: 440px) { .home-hero-grand-title { font-size: 26px; } } .home-hero-grand-ornament { font-family: var(--home-f-display); font-style: italic; color: var(--home-gold); font-size: 14px; opacity: 0.8; margin: 0 auto 14px; line-height: 1; } @media (max-width: 640px) { .home-hero-grand-ornament { font-size: 13px; margin-bottom: 12px; } } .home-hero-grand-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--home-gold-light); line-height: 1.5; margin: 0 0 28px; max-width: 460px; text-shadow: 0 1px 6px rgba(13,10,8,0.35); } @media (max-width: 768px) { .home-hero-grand-sub { font-size: 16px; margin-bottom: 24px; } } @media (max-width: 640px) { .home-hero-grand-sub { font-size: 14.5px; } } @media (max-width: 440px) { .home-hero-grand-sub { font-size: 13px; } } .home-hero-grand-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; background: transparent; color: var(--home-ivory); border: 1px solid rgba(245,237,227,0.55); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: all 280ms var(--home-ease); } .home-hero-grand-cta:hover { background: var(--home-ivory); color: var(--home-ink); border-color: var(--home-ivory); } @media (max-width: 640px) { .home-hero-grand-cta { padding: 14px 26px; font-size: 10px; letter-spacing: 0.22em; } } /* ===== V3 — REFINED MAISON ===== */ .home-hero-refined-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0 0 18px; text-wrap: balance; text-shadow: 0 2px 14px rgba(13,10,8,0.4); } .home-hero-refined-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 400; color: var(--home-gold-light); } @media (max-width: 768px) { .home-hero-refined-title { font-size: 40px; margin-bottom: 16px; } } @media (max-width: 640px) { .home-hero-refined-title { font-size: 32px; } } @media (max-width: 440px) { .home-hero-refined-title { font-size: 28px; } } .home-hero-refined-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--home-gold-light); line-height: 1.5; margin: 0 0 28px; max-width: 480px; text-shadow: 0 1px 6px rgba(13,10,8,0.35); } @media (max-width: 768px) { .home-hero-refined-sub { font-size: 16px; margin-bottom: 24px; } } @media (max-width: 640px) { .home-hero-refined-sub { font-size: 14.5px; } } @media (max-width: 440px) { .home-hero-refined-sub { font-size: 13px; } } .home-hero-refined-rule { width: 56px; height: 1px; background: var(--home-gold); margin: 0 auto 28px; position: relative; opacity: 0.85; } .home-hero-refined-rule::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px; background: rgba(13,10,8,0.4); border: 1px solid var(--home-gold); border-radius: 50%; } @media (max-width: 640px) { .home-hero-refined-rule { margin-bottom: 24px; width: 48px; } } .home-hero-refined-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; background: var(--home-ivory); color: var(--home-ink); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: all 280ms var(--home-ease); } .home-hero-refined-cta:hover { background: var(--home-signature); color: var(--home-ivory); } @media (max-width: 640px) { .home-hero-refined-cta { padding: 14px 26px; font-size: 10px; letter-spacing: 0.22em; } } /* ===== V4 — EDITORIAL TITLE-PAGE ===== */ .home-hero-edition-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-gold-light); font-weight: 500; margin: 0 0 22px; opacity: 0.85; } .home-hero-edition-eyebrow::before, .home-hero-edition-eyebrow::after { content: ""; width: 24px; height: 1px; background: var(--home-gold-light); opacity: 0.7; } @media (max-width: 768px) { .home-hero-edition-eyebrow { font-size: 10px; gap: 10px; margin-bottom: 18px; letter-spacing: 0.30em; } .home-hero-edition-eyebrow::before, .home-hero-edition-eyebrow::after { width: 18px; } } @media (max-width: 640px) { .home-hero-edition-eyebrow { font-size: 9.5px; letter-spacing: 0.26em; } } .home-hero-edition-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0 0 16px; text-wrap: balance; text-shadow: 0 2px 14px rgba(13,10,8,0.4); } .home-hero-edition-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 400; color: var(--home-gold-light); } @media (max-width: 768px) { .home-hero-edition-title { font-size: 38px; margin-bottom: 14px; } } @media (max-width: 640px) { .home-hero-edition-title { font-size: 30px; } } @media (max-width: 440px) { .home-hero-edition-title { font-size: 26px; } } .home-hero-edition-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--home-gold-light); line-height: 1.5; margin: 0 0 22px; max-width: 480px; text-shadow: 0 1px 6px rgba(13,10,8,0.35); } @media (max-width: 768px) { .home-hero-edition-sub { font-size: 16px; margin-bottom: 20px; } } @media (max-width: 640px) { .home-hero-edition-sub { font-size: 14.5px; } } @media (max-width: 440px) { .home-hero-edition-sub { font-size: 13px; } } .home-hero-edition-byline { display: inline-flex; align-items: center; gap: 12px; font-family: var(--home-f-body); font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-ivory); font-weight: 500; padding-top: 20px; border-top: 1px solid rgba(245,237,227,0.30); width: 280px; max-width: 80%; justify-content: center; margin: 0 auto 26px; opacity: 0.92; } .home-hero-edition-byline em { font-family: var(--home-f-editorial); font-style: italic; letter-spacing: 0.04em; text-transform: none; font-size: 12.5px; color: var(--home-gold-light); } .home-hero-edition-dot { color: var(--home-gold); } @media (max-width: 640px) { .home-hero-edition-byline { font-size: 9.5px; gap: 8px; padding-top: 16px; margin-bottom: 22px; width: 240px; } .home-hero-edition-byline em { font-size: 11.5px; } } .home-hero-edition-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; background: var(--home-ivory); color: var(--home-ink); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: all 280ms var(--home-ease); } .home-hero-edition-cta:hover { background: var(--home-signature); color: var(--home-ivory); } @media (max-width: 640px) { .home-hero-edition-cta { padding: 14px 26px; font-size: 10px; letter-spacing: 0.22em; } } /* ===== V5 — REFINED + EXPLICIT BOTTOM-THIRD POSITIONING ===== Same inner design as V3 (no eyebrow, title, sub, gold rule, ivory CTA) but uses padding-top push instead of flex-end (more reliable when hero height is set by the Impact theme via min-height: 100vh on .home-hero). Content lands in the bottom-third with comfortable breathing room from the viewport bottom. */ .home-hero-inner--v5_bottom { display: block !important; text-align: center !important; padding-top: clamp(380px, 58vh, 720px) !important; padding-bottom: clamp(72px, 14vh, 140px) !important; } @media (max-width: 768px) { .home-hero-inner--v5_bottom { padding-top: clamp(220px, 40vh, 400px) !important; padding-bottom: clamp(56px, 12vh, 100px) !important; } } @media (max-width: 640px) { .home-hero-inner--v5_bottom { padding-top: clamp(200px, 38vh, 340px) !important; padding-bottom: clamp(48px, 10vh, 80px) !important; } } .home-hero-content--bottom { max-width: 720px; margin: 0 auto; text-align: center; } .home-hero-bottom-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0 0 18px; text-wrap: balance; text-shadow: 0 2px 14px rgba(13,10,8,0.4); } .home-hero-bottom-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 400; color: var(--home-gold-light); } @media (max-width: 768px) { .home-hero-bottom-title { font-size: 40px; margin-bottom: 16px; } } @media (max-width: 640px) { .home-hero-bottom-title { font-size: 32px; } } @media (max-width: 440px) { .home-hero-bottom-title { font-size: 28px; } } .home-hero-bottom-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--home-gold-light); line-height: 1.5; margin: 0 0 28px; max-width: 480px; margin-left: auto; margin-right: auto; text-shadow: 0 1px 6px rgba(13,10,8,0.35); } @media (max-width: 768px) { .home-hero-bottom-sub { font-size: 16px; margin-bottom: 24px; } } @media (max-width: 640px) { .home-hero-bottom-sub { font-size: 14.5px; } } @media (max-width: 440px) { .home-hero-bottom-sub { font-size: 13px; } } .home-hero-bottom-rule { width: 56px; height: 1px; background: var(--home-gold); margin: 0 auto 28px; position: relative; opacity: 0.85; } .home-hero-bottom-rule::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px; background: rgba(13,10,8,0.4); border: 1px solid var(--home-gold); border-radius: 50%; } @media (max-width: 640px) { .home-hero-bottom-rule { margin-bottom: 24px; width: 48px; } } .home-hero-bottom-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; background: var(--home-ivory); color: var(--home-ink); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: all 280ms var(--home-ease); } .home-hero-bottom-cta:hover { background: var(--home-signature); color: var(--home-ivory); } @media (max-width: 640px) { .home-hero-bottom-cta { padding: 14px 26px; font-size: 10px; letter-spacing: 0.22em; } } /* === END HOME HERO VARIATIONS v1 === */ /* === COLL1RING + SALE HERO TUNE v1 START === */ /* Felix tuning round (2026-05-05): - 1% Ring banner title text-shadow REMOVED (Felix wants cleaner look) - 2 new V5-style 1% Ring banner variations: --v2 (gold rule) + --v3 (bracketed) - sateur-2026-sale hero mobile heights REDUCED (was "very long" on mobile) - 2 new V5-style sale hero variations: --v2 (gold rule) + --v3 (bracketed) To revert: delete this whole sub-block + remove the 4 variation sections from their templates. */ /* ===== COLL1RING — variation v2 (centered, gold rule + diamond dot) ===== */ .coll1ring-banner--v2 .coll1ring-banner-scrim--v2 { background: linear-gradient(180deg, rgba(13,10,8,0.18) 0%, rgba(13,10,8,0.06) 40%, rgba(13,10,8,0.36) 100%); } .coll1ring-banner-inner--v2 { display: block !important; text-align: center !important; padding-top: clamp(320px, 50vh, 580px) !important; padding-bottom: clamp(64px, 12vh, 120px) !important; max-width: 1240px; width: 100%; margin: 0 auto; padding-left: 32px; padding-right: 32px; position: relative; z-index: 3; color: var(--home-ivory); } @media (max-width: 768px) { .coll1ring-banner-inner--v2 { padding-top: clamp(220px, 40vh, 400px) !important; padding-bottom: clamp(56px, 12vh, 100px) !important; padding-left: 24px; padding-right: 24px; } } @media (max-width: 640px) { .coll1ring-banner-inner--v2 { padding-top: clamp(200px, 38vh, 340px) !important; padding-bottom: clamp(48px, 10vh, 80px) !important; } } .coll1ring-v2-content { max-width: 720px; margin: 0 auto; text-align: center; } .coll1ring-v2-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin: 0 0 22px; } @media (max-width: 640px) { .coll1ring-v2-eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 18px; } } .coll1ring-v2-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0 0 18px; text-wrap: balance; } .coll1ring-v2-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; color: var(--home-gold-light); } @media (max-width: 768px) { .coll1ring-v2-title { font-size: 40px; margin-bottom: 16px; } } @media (max-width: 640px) { .coll1ring-v2-title { font-size: 32px; } } @media (max-width: 440px) { .coll1ring-v2-title { font-size: 28px; } } .coll1ring-v2-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--home-gold-light); line-height: 1.5; margin: 0 0 24px; max-width: 480px; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { .coll1ring-v2-sub { font-size: 16px; margin-bottom: 22px; } } @media (max-width: 640px) { .coll1ring-v2-sub { font-size: 14.5px; } } @media (max-width: 440px) { .coll1ring-v2-sub { font-size: 13px; } } .coll1ring-v2-rule { width: 56px; height: 1px; background: var(--home-gold); margin: 0 auto 24px; position: relative; opacity: 0.85; } .coll1ring-v2-rule::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px; background: rgba(13,10,8,0.4); border: 1px solid var(--home-gold); border-radius: 50%; } @media (max-width: 640px) { .coll1ring-v2-rule { margin-bottom: 22px; width: 48px; } } .coll1ring-v2-meta { display: inline-flex; align-items: center; gap: 18px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: var(--home-ivory); flex-wrap: wrap; justify-content: center; } .coll1ring-v2-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--home-signature); flex-shrink: 0; } @media (max-width: 640px) { .coll1ring-v2-meta { font-size: 9.5px; gap: 12px; letter-spacing: 0.2em; } } /* ===== COLL1RING — variation v3 (bracketed eyebrow rules + ornament) ===== */ .coll1ring-banner--v3 .coll1ring-banner-scrim--v3 { background: linear-gradient(180deg, rgba(13,10,8,0.18) 0%, rgba(13,10,8,0.06) 40%, rgba(13,10,8,0.36) 100%); } .coll1ring-banner-inner--v3 { display: block !important; text-align: center !important; padding-top: clamp(320px, 50vh, 580px) !important; padding-bottom: clamp(64px, 12vh, 120px) !important; max-width: 1240px; width: 100%; margin: 0 auto; padding-left: 32px; padding-right: 32px; position: relative; z-index: 3; color: var(--home-ivory); } @media (max-width: 768px) { .coll1ring-banner-inner--v3 { padding-top: clamp(220px, 40vh, 400px) !important; padding-bottom: clamp(56px, 12vh, 100px) !important; padding-left: 24px; padding-right: 24px; } } @media (max-width: 640px) { .coll1ring-banner-inner--v3 { padding-top: clamp(200px, 38vh, 340px) !important; padding-bottom: clamp(48px, 10vh, 80px) !important; } } .coll1ring-v3-content { max-width: 720px; margin: 0 auto; text-align: center; } .coll1ring-v3-eyebrow { display: inline-flex; align-items: center; gap: 16px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-light); font-weight: 500; margin: 0 0 22px; } .coll1ring-v3-rule { width: 28px; height: 1px; background: var(--home-gold-light); display: inline-block; opacity: 0.7; } @media (max-width: 768px) { .coll1ring-v3-eyebrow { font-size: 10px; gap: 12px; margin-bottom: 18px; letter-spacing: 0.28em; } .coll1ring-v3-rule { width: 22px; } } @media (max-width: 640px) { .coll1ring-v3-eyebrow { font-size: 9.5px; letter-spacing: 0.24em; } } .coll1ring-v3-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0 0 16px; text-wrap: balance; } .coll1ring-v3-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; color: var(--home-gold-light); } @media (max-width: 768px) { .coll1ring-v3-title { font-size: 38px; margin-bottom: 14px; } } @media (max-width: 640px) { .coll1ring-v3-title { font-size: 30px; } } @media (max-width: 440px) { .coll1ring-v3-title { font-size: 26px; } } .coll1ring-v3-ornament { font-family: var(--home-f-display); font-style: italic; color: var(--home-gold); font-size: 14px; opacity: 0.8; margin: 0 auto 14px; line-height: 1; } @media (max-width: 640px) { .coll1ring-v3-ornament { font-size: 13px; margin-bottom: 12px; } } .coll1ring-v3-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--home-gold-light); line-height: 1.5; margin: 0 0 24px; max-width: 480px; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { .coll1ring-v3-sub { font-size: 16px; margin-bottom: 22px; } } @media (max-width: 640px) { .coll1ring-v3-sub { font-size: 14.5px; } } @media (max-width: 440px) { .coll1ring-v3-sub { font-size: 13px; } } .coll1ring-v3-meta { display: inline-flex; align-items: center; gap: 18px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: var(--home-ivory); flex-wrap: wrap; justify-content: center; padding-top: 14px; border-top: 1px solid rgba(245,237,227,0.22); width: 320px; max-width: 80%; margin: 0 auto; } .coll1ring-v3-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--home-signature); flex-shrink: 0; } @media (max-width: 640px) { .coll1ring-v3-meta { font-size: 9.5px; gap: 12px; letter-spacing: 0.2em; } } /* ============================================================ */ /* SALE HERO — mobile height fix + 2 V5-tuned variations */ /* ============================================================ */ /* Reduced mobile heights (was: 768px=70vh/min540, 640px=min480) */ @media (max-width: 768px) { .sale-hero { min-height: 460px !important; height: 60vh !important; max-height: 640px !important; } } @media (max-width: 640px) { .sale-hero { min-height: 420px !important; height: 56vh !important; max-height: 580px !important; } } /* ===== SALE HERO v2 (centered, gold rule + diamond dot) ===== */ .sale-hero--v2 .sale-hero-scrim--v2 { background: linear-gradient(180deg, rgba(13,10,8,0.40) 0%, rgba(13,10,8,0.20) 40%, rgba(13,10,8,0.55) 100%); } .sale-hero-inner--v2 { display: block !important; text-align: center !important; padding-top: clamp(280px, 50vh, 520px) !important; padding-bottom: clamp(64px, 12vh, 120px) !important; max-width: 1240px; width: 100%; margin: 0 auto; padding-left: 32px; padding-right: 32px; position: relative; z-index: 3; color: var(--home-ivory); } @media (max-width: 768px) { .sale-hero-inner--v2 { padding-top: clamp(180px, 34vh, 300px) !important; padding-bottom: clamp(48px, 10vh, 80px) !important; padding-left: 24px; padding-right: 24px; } } @media (max-width: 640px) { .sale-hero-inner--v2 { padding-top: clamp(160px, 32vh, 240px) !important; padding-bottom: clamp(40px, 9vh, 64px) !important; } } .sale-v2-content { max-width: 680px; margin: 0 auto; text-align: center; } .sale-v2-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin: 0 0 20px; } @media (max-width: 640px) { .sale-v2-eyebrow { font-size: 10px; letter-spacing: 0.28em; margin-bottom: 16px; } } .sale-v2-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.0; letter-spacing: -0.025em; color: var(--home-ivory); margin: 0 0 18px; } .sale-v2-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; color: var(--home-gold-light); } @media (max-width: 768px) { .sale-v2-title { font-size: 40px; margin-bottom: 14px; } } @media (max-width: 640px) { .sale-v2-title { font-size: 32px; } } @media (max-width: 440px) { .sale-v2-title { font-size: 28px; } } .sale-v2-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--home-gold-light); line-height: 1.5; margin: 0 0 22px; max-width: 480px; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { .sale-v2-sub { font-size: 15px; margin-bottom: 18px; } } @media (max-width: 640px) { .sale-v2-sub { font-size: 13.5px; } } .sale-v2-rule { width: 56px; height: 1px; background: var(--home-gold); margin: 0 auto 24px; position: relative; opacity: 0.85; } .sale-v2-rule::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px; background: rgba(13,10,8,0.4); border: 1px solid var(--home-gold); border-radius: 50%; } @media (max-width: 640px) { .sale-v2-rule { margin-bottom: 18px; width: 48px; } } .sale-v2-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; background: var(--home-ivory); color: var(--home-ink); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: all 280ms var(--home-ease); } .sale-v2-cta:hover { background: var(--home-signature); color: var(--home-ivory); } @media (max-width: 640px) { .sale-v2-cta { padding: 14px 26px; font-size: 10px; letter-spacing: 0.22em; } } /* ===== SALE HERO v3 (bracketed eyebrow rules + ornament + ghost CTA) ===== */ .sale-hero--v3 .sale-hero-scrim--v3 { background: linear-gradient(180deg, rgba(13,10,8,0.40) 0%, rgba(13,10,8,0.20) 40%, rgba(13,10,8,0.55) 100%); } .sale-hero-inner--v3 { display: block !important; text-align: center !important; padding-top: clamp(280px, 50vh, 520px) !important; padding-bottom: clamp(64px, 12vh, 120px) !important; max-width: 1240px; width: 100%; margin: 0 auto; padding-left: 32px; padding-right: 32px; position: relative; z-index: 3; color: var(--home-ivory); } @media (max-width: 768px) { .sale-hero-inner--v3 { padding-top: clamp(180px, 34vh, 300px) !important; padding-bottom: clamp(48px, 10vh, 80px) !important; padding-left: 24px; padding-right: 24px; } } @media (max-width: 640px) { .sale-hero-inner--v3 { padding-top: clamp(160px, 32vh, 240px) !important; padding-bottom: clamp(40px, 9vh, 64px) !important; } } .sale-v3-content { max-width: 680px; margin: 0 auto; text-align: center; } .sale-v3-eyebrow { display: inline-flex; align-items: center; gap: 16px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-light); font-weight: 500; margin: 0 0 22px; } .sale-v3-rule { width: 28px; height: 1px; background: var(--home-gold-light); display: inline-block; opacity: 0.7; } @media (max-width: 768px) { .sale-v3-eyebrow { font-size: 10px; gap: 12px; margin-bottom: 18px; letter-spacing: 0.28em; } .sale-v3-rule { width: 22px; } } @media (max-width: 640px) { .sale-v3-eyebrow { font-size: 9.5px; letter-spacing: 0.24em; } } .sale-v3-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.0; letter-spacing: -0.025em; color: var(--home-ivory); margin: 0 0 14px; } .sale-v3-title em { font-family: var(--home-f-editorial); font-style: italic; font-weight: 300; color: var(--home-gold-light); } @media (max-width: 768px) { .sale-v3-title { font-size: 38px; margin-bottom: 12px; } } @media (max-width: 640px) { .sale-v3-title { font-size: 30px; } } @media (max-width: 440px) { .sale-v3-title { font-size: 26px; } } .sale-v3-ornament { font-family: var(--home-f-display); font-style: italic; color: var(--home-gold); font-size: 14px; opacity: 0.8; margin: 0 auto 14px; line-height: 1; } @media (max-width: 640px) { .sale-v3-ornament { font-size: 13px; margin-bottom: 12px; } } .sale-v3-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--home-gold-light); line-height: 1.5; margin: 0 0 26px; max-width: 480px; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { .sale-v3-sub { font-size: 15px; margin-bottom: 22px; } } @media (max-width: 640px) { .sale-v3-sub { font-size: 13.5px; } } .sale-v3-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; background: transparent; color: var(--home-ivory); border: 1px solid rgba(245,237,227,0.55); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: all 280ms var(--home-ease); } .sale-v3-cta:hover { background: var(--home-ivory); color: var(--home-ink); border-color: var(--home-ivory); } @media (max-width: 640px) { .sale-v3-cta { padding: 14px 26px; font-size: 10px; letter-spacing: 0.22em; } } /* Fix v3 desktop cut-off — bracket variations need taller wrapper to fit padding-top push */ .coll1ring-banner--v2, .coll1ring-banner--v3 { min-height: 660px !important; height: 80vh !important; max-height: 900px !important; } @media (max-width: 768px) { .coll1ring-banner--v2, .coll1ring-banner--v3 { min-height: 540px !important; height: 70vh !important; max-height: 720px !important; } } @media (max-width: 640px) { .coll1ring-banner--v2, .coll1ring-banner--v3 { min-height: 480px !important; height: 65vh !important; max-height: 640px !important; } } /* === END COLL1RING + SALE HERO TUNE v1 === */ /* === IDX v1 START === */ /* Sateur — templates/list-collections.sateur-2026.json (10 custom-liquid sections) */ /* Mockup: Output/Website/collections-index-v1.html ("The Maison Index" all-collections page) */ /* Strategy 1+2: Section ID breakout */ #shopify-section-idx_breadcrumb,#shopify-section-idx_hero,#shopify-section-idx_sale_strip, #shopify-section-idx_editorial,#shopify-section-idx_categories,#shopify-section-idx_heritage, #shopify-section-idx_tiers,#shopify-section-idx_edits,#shopify-section-idx_marquee,#shopify-section-idx_press, [id*="idx_breadcrumb"],[id*="idx_hero"],[id*="idx_sale_strip"],[id*="idx_editorial"], [id*="idx_categories"],[id*="idx_heritage"],[id*="idx_tiers"],[id*="idx_edits"], [id*="idx_marquee"],[id*="idx_press"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } .idx-breadcrumb,.idx-hero,.idx-sale-strip,.idx-section,.idx-marquee,.idx-press { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* === BREADCRUMB === */ .idx-breadcrumb { background: var(--home-ivory); border-bottom: 1px solid var(--home-hairline); } .idx-breadcrumb-inner { max-width: 1440px; margin: 0 auto; padding: 14px 48px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--home-warm-gray); } .idx-breadcrumb-inner a { color: var(--home-warm-gray); transition: color 200ms var(--home-ease); } .idx-breadcrumb-inner a:hover { color: var(--home-ink); } .idx-breadcrumb-sep { margin: 0 12px; color: rgba(26,22,20,0.22); } .idx-breadcrumb-current { color: var(--home-ink); } @media (max-width: 768px) { .idx-breadcrumb-inner { padding: 12px 24px; font-size: 10px; } } /* === HERO === */ .idx-hero { position: relative; min-height: 540px; height: 64vh; max-height: 720px; overflow: hidden; background: var(--home-noir); display: flex; align-items: center; } @media (max-width: 768px) { .idx-hero { min-height: 460px; height: 60vh; } } @media (max-width: 640px) { .idx-hero { min-height: 420px; } } .idx-hero-bg { position: absolute; inset: 0; z-index: 1; } .idx-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.88); } .idx-hero-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.40) 0%, rgba(13,10,8,0.10) 50%, rgba(13,10,8,0.55) 100%); } .idx-hero-inner { position: absolute; inset: 0; z-index: 3; max-width: 1240px; margin: 0 auto; padding: 0 56px; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 84px; color: var(--home-ivory); } @media (max-width: 768px) { .idx-hero-inner { padding: 0 24px 56px; } } .idx-hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin: 0 0 28px; } .idx-hero-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--home-signature); } .idx-hero-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(48px, 7vw, 100px); line-height: 1.0; letter-spacing: -0.025em; color: var(--home-ivory); margin: 0 0 22px; max-width: 840px; text-shadow: 0 2px 18px rgba(13,10,8,0.4); } .idx-hero-title em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); font-weight: 300; } .idx-hero-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(18px, 1.9vw, 22px); color: var(--home-gold-light); line-height: 1.5; max-width: 600px; margin: 0; } @media (max-width: 768px) { .idx-hero-title { font-size: 44px; } .idx-hero-sub { font-size: 16px; } } @media (max-width: 640px) { .idx-hero-title { font-size: 36px; } .idx-hero-sub { font-size: 14.5px; } } /* === SALE STRIP === */ .idx-sale-strip { background: var(--home-signature); color: var(--home-ivory); padding: 28px 48px !important; } @media (max-width: 768px) { .idx-sale-strip { padding: 22px 24px !important; } } .idx-sale-strip-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } @media (max-width: 768px) { .idx-sale-strip-inner { flex-direction: column; text-align: center; gap: 16px; } } .idx-sale-strip-copy { display: flex; align-items: center; gap: 18px; } @media (max-width: 768px) { .idx-sale-strip-copy { flex-direction: column; gap: 6px; } } .idx-sale-strip-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--home-ivory); animation: idx-pulse 1.6s ease-in-out infinite; flex-shrink: 0; } @keyframes idx-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } .idx-sale-strip-label { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: rgba(245,237,227,0.85); } .idx-sale-strip-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); color: var(--home-ivory); letter-spacing: -0.005em; } .idx-sale-strip-title em { font-family: var(--home-f-editorial); font-style: italic; } .idx-sale-strip-cta { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; background: var(--home-ivory); color: var(--home-ink); font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: all 250ms var(--home-ease); flex-shrink: 0; } .idx-sale-strip-cta:hover { background: var(--home-ink); color: var(--home-ivory); } /* === SECTION HEAD (shared) === */ .idx-section { padding: 96px 48px !important; } .idx-section--ivory { background: var(--home-ivory); } .idx-section--paper { background: var(--home-paper); } .idx-section--linen { background: var(--home-linen); } .idx-section--noir { background: var(--home-noir); color: var(--home-ivory); } @media (max-width: 768px) { .idx-section { padding: 64px 24px !important; } } .idx-section-head { max-width: 1240px; margin: 0 auto 56px; text-align: center; } @media (max-width: 768px) { .idx-section-head { margin-bottom: 36px; } } .idx-section-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin: 0 0 18px; } .idx-section--noir .idx-section-eyebrow { color: var(--home-signature); } .idx-section-eyebrow::before, .idx-section-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--home-gold); } .idx-section-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 16px; } .idx-section--noir .idx-section-title { color: var(--home-ivory); } .idx-section-title em { font-family: var(--home-f-editorial); font-style: italic; } .idx-section--noir .idx-section-title em { color: var(--home-gold-light); } .idx-section-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.7vw, 19px); color: var(--home-charcoal); max-width: 620px; margin: 0 auto; line-height: 1.55; } .idx-section--noir .idx-section-sub { color: var(--home-gold-light); } /* === EDITORIAL CARDS === */ .idx-editorial-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 1024px) { .idx-editorial-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 600px) { .idx-editorial-grid { grid-template-columns: 1fr; gap: 12px; } } .idx-ed-card { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--home-noir); cursor: pointer; display: block; } .idx-ed-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--home-ease); } .idx-ed-card:hover img { transform: scale(1.04); } .idx-ed-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.0) 35%, rgba(13,10,8,0.65) 100%); pointer-events: none; } .idx-ed-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 28px 26px; color: var(--home-ivory); pointer-events: none; } @media (max-width: 768px) { .idx-ed-body { padding: 22px 20px; } } .idx-ed-tag { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 10px; } .idx-ed-title { font-family: var(--home-f-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -0.005em; color: var(--home-ivory); margin: 0 0 8px; } .idx-ed-title em { font-family: var(--home-f-editorial); font-style: italic; } .idx-ed-cap { font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-gold-light); line-height: 1.4; margin: 0 0 14px; } .idx-ed-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--home-ivory); font-weight: 500; padding-top: 8px; border-top: 1px solid rgba(245,237,227,0.3); } /* === CATEGORY CARDS === */ .idx-cat-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } @media (max-width: 1100px) { .idx-cat-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .idx-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } .idx-cat-card { background: var(--home-warm-white); border: 1px solid var(--home-hairline); cursor: pointer; transition: all 250ms var(--home-ease); display: flex; flex-direction: column; color: var(--home-ink); } .idx-cat-card:hover { border-color: var(--home-gold); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(13,10,8,0.06); } .idx-cat-media { aspect-ratio: 1; overflow: hidden; background: var(--home-paper); } .idx-cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .idx-cat-card:hover .idx-cat-media img { transform: scale(1.05); } .idx-cat-body { padding: 18px 18px 20px; text-align: center; } @media (max-width: 768px) { .idx-cat-body { padding: 14px 12px 16px; } } .idx-cat-name { font-family: var(--home-f-display); font-weight: 500; font-size: 16px; color: var(--home-ink); line-height: 1.2; margin-bottom: 4px; letter-spacing: -0.005em; } @media (max-width: 768px) { .idx-cat-name { font-size: 14px; } } .idx-cat-count { font-family: var(--home-f-editorial); font-style: italic; font-size: 12.5px; color: var(--home-warm-gray); } /* === HERITAGE CARDS === */ .idx-heritage-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 900px) { .idx-heritage-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } .idx-her-card { padding: 36px 28px; background: var(--home-warm-white); border: 1px solid var(--home-hairline); text-align: center; transition: all 250ms var(--home-ease); cursor: pointer; display: block; color: var(--home-ink); } .idx-her-card:hover { border-color: var(--home-gold); transform: translateY(-2px); } @media (max-width: 768px) { .idx-her-card { padding: 28px 22px; } } .idx-her-num { font-family: var(--home-f-editorial); font-style: italic; font-size: 12px; color: var(--home-gold); letter-spacing: 0.06em; margin-bottom: 14px; } .idx-her-title { font-family: var(--home-f-display); font-weight: 500; font-size: 22px; color: var(--home-ink); margin: 0 0 8px; line-height: 1.2; letter-spacing: -0.005em; } .idx-her-title em { font-family: var(--home-f-editorial); font-style: italic; } .idx-her-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 14.5px; line-height: 1.5; color: var(--home-charcoal); margin: 0 0 16px; } .idx-her-divider { width: 24px; height: 1px; background: var(--home-gold); margin: 0 auto 16px; } .idx-her-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--home-ink); font-weight: 500; padding-bottom: 2px; border-bottom: 1px solid var(--home-ink); } .idx-her-card:hover .idx-her-cta { color: var(--home-signature); border-color: var(--home-signature); } /* === TIER CARDS (dark) === */ .idx-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 1240px; margin: 0 auto; } @media (max-width: 768px) { .idx-tiers { grid-template-columns: repeat(2, 1fr); gap: 10px; } } .idx-tier-card { padding: 28px 24px; background: rgba(245,237,227,0.04); border: 1px solid rgba(245,237,227,0.18); text-align: center; transition: all 250ms var(--home-ease); cursor: pointer; display: block; color: var(--home-ivory); } .idx-tier-card:hover { border-color: var(--home-gold-light); background: rgba(245,237,227,0.08); } .idx-tier-tag { font-family: var(--home-f-body); font-size: 9.5px; letter-spacing: 0.30em; text-transform: uppercase; color: var(--home-gold-light); font-weight: 500; margin-bottom: 10px; } .idx-tier-name { font-family: var(--home-f-display); font-weight: 500; font-size: 19px; color: var(--home-ivory); margin-bottom: 6px; letter-spacing: -0.005em; } .idx-tier-name em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); } .idx-tier-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-gold-light); opacity: 0.8; line-height: 1.45; } /* === EDITS GRID === */ .idx-edits-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; } @media (max-width: 1200px) { .idx-edits-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; } } @media (max-width: 700px) { .idx-edits-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } } .idx-edit-tile { background: var(--home-warm-white); border: 1px solid var(--home-hairline); cursor: pointer; transition: all 250ms var(--home-ease); display: flex; flex-direction: column; overflow: hidden; color: var(--home-ink); } .idx-edit-tile:hover { border-color: var(--home-gold); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(13,10,8,0.06); } .idx-edit-media { aspect-ratio: 4/5; overflow: hidden; background: var(--home-noir); } .idx-edit-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .idx-edit-tile:hover .idx-edit-media img { transform: scale(1.04); } .idx-edit-body { padding: 18px 16px 20px; text-align: center; display: flex; flex-direction: column; gap: 4px; } @media (max-width: 700px) { .idx-edit-body { padding: 14px 12px 16px; } } .idx-edit-vol { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-gold); letter-spacing: 0.06em; } .idx-edit-title { font-family: var(--home-f-display); font-weight: 500; font-size: 17px; color: var(--home-ink); line-height: 1.2; letter-spacing: -0.005em; margin: 0; } .idx-edit-title em { font-family: var(--home-f-editorial); font-style: italic; } @media (max-width: 700px) { .idx-edit-title { font-size: 15px; } } .idx-edit-date { font-family: var(--home-f-editorial); font-style: italic; font-size: 12px; color: var(--home-warm-gray); margin-top: 2px; } .idx-edit-divider { width: 18px; height: 1px; background: var(--home-gold); margin: 8px auto 4px; } .idx-edit-cap { font-family: var(--home-f-editorial); font-style: italic; font-size: 12.5px; color: var(--home-charcoal); line-height: 1.4; margin: 0; } /* === MARQUEE === */ .idx-marquee { background: var(--home-signature); color: var(--home-ivory); padding: 22px 0 !important; overflow: hidden; } .idx-marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: home-marquee-scroll 60s linear infinite; font-family: var(--home-f-editorial); font-style: italic; font-size: 26px; } .idx-marquee-item { display: inline-flex; align-items: center; gap: 32px; } .idx-marquee-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--home-ivory); flex-shrink: 0; } @media (max-width: 768px) { .idx-marquee-track { font-size: 20px; } } @media (max-width: 640px) { .idx-marquee-track { font-size: 18px; } } /* === PRESS === */ .idx-press { padding: 56px 48px !important; background: var(--home-linen); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } @media (max-width: 768px) { .idx-press { padding: 40px 24px !important; } } .idx-press-inner { max-width: 1240px; margin: 0 auto; text-align: center; } .idx-press-label { display: block; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 24px; } .idx-press-logos { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 56px); flex-wrap: wrap; } .idx-press-logo { font-family: var(--home-f-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); color: var(--home-charcoal); opacity: 0.7; } /* === END IDX v1 === */ /* === EIFFEL v1 START === */ /* Sateur — templates/collection.sateur-2026-eiffel-tower.json (16 custom-liquid sections) */ /* Mockup: Output/Website/collection-eiffel-tower-v2.html */ /* === FULL-WIDTH BREAKOUT (4 strategies) === */ #shopify-section-eiffel_breadcrumb, #shopify-section-eiffel_banner_hero, #shopify-section-eiffel_intro, #shopify-section-eiffel_mwt_one, #shopify-section-eiffel_variants, #shopify-section-eiffel_gallery, #shopify-section-eiffel_atmos, #shopify-section-eiffel_mwt_two, #shopify-section-eiffel_boxreveal, #shopify-section-eiffel_manifesto, #shopify-section-eiffel_boutique_header, #shopify-section-eiffel_boutique_grid, #shopify-section-eiffel_trust, #shopify-section-eiffel_faq, #shopify-section-eiffel_marquee, #shopify-section-eiffel_press, [id*="eiffel_breadcrumb"], [id*="eiffel_banner_hero"], [id*="eiffel_intro"], [id*="eiffel_mwt_one"], [id*="eiffel_variants"], [id*="eiffel_gallery"], [id*="eiffel_atmos"], [id*="eiffel_mwt_two"], [id*="eiffel_boxreveal"], [id*="eiffel_manifesto"], [id*="eiffel_boutique_header"], [id*="eiffel_boutique_grid"], [id*="eiffel_trust"], [id*="eiffel_faq"], [id*="eiffel_marquee"], [id*="eiffel_press"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } .eiffel-breadcrumb, .eiffel-banner, .eiffel-intro, .eiffel-mwt, .eiffel-variants, .eiffel-gallery, .eiffel-atmos, .eiffel-boxreveal, .eiffel-manifesto, .eiffel-boutique, .eiffel-trust, .eiffel-faq, .eiffel-marquee, .eiffel-press { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } /* === BREADCRUMB === */ .eiffel-breadcrumb { background: var(--home-ivory); border-bottom: 1px solid var(--home-hairline); } .eiffel-breadcrumb-inner { max-width: 1440px; margin: 0 auto; padding: 14px 48px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--home-warm-gray); } .eiffel-breadcrumb-inner a { color: var(--home-warm-gray); transition: color 200ms var(--home-ease); } .eiffel-breadcrumb-inner a:hover { color: var(--home-ink); } .eiffel-breadcrumb-sep { margin: 0 12px; color: rgba(26,22,20,0.22); } .eiffel-breadcrumb-current { color: var(--home-ink); } @media (max-width: 768px) { .eiffel-breadcrumb-inner { padding: 12px 24px; font-size: 10px; } } /* === BANNER HERO (16:6 widescreen) === */ .eiffel-banner { aspect-ratio: 16/6; min-height: 380px; max-height: 720px; overflow: hidden; background: var(--home-noir); } @media (max-width: 768px) { .eiffel-banner { aspect-ratio: 4/5; min-height: 480px; } } .eiffel-banner-bg { position: absolute; inset: 0; z-index: 1; } .eiffel-banner-bg img { width: 100%; height: 100%; object-fit: cover; } .eiffel-banner-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.30) 0%, rgba(13,10,8,0.10) 50%, rgba(13,10,8,0.55) 100%); } .eiffel-banner-inner { position: absolute; inset: 0; z-index: 3; max-width: 1440px; margin: 0 auto; padding: 0 56px 56px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--home-ivory); } @media (max-width: 768px) { .eiffel-banner-inner { padding: 0 24px 40px; } } .eiffel-banner-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 22px; } .eiffel-banner-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--home-signature); } .eiffel-banner-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(40px, 6.4vw, 88px); line-height: 1.0; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0 0 18px; max-width: 760px; } .eiffel-banner-title em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); font-weight: 300; } .eiffel-banner-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(18px, 2vw, 24px); color: var(--home-gold-light); line-height: 1.4; max-width: 600px; margin: 0; } /* === INTRO === */ .eiffel-intro { padding: 96px 48px !important; background: var(--home-ivory); text-align: center; } @media (max-width: 768px) { .eiffel-intro { padding: 64px 24px !important; } } .eiffel-intro-inner { max-width: 880px; margin: 0 auto; } .eiffel-intro-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 22px; } .eiffel-intro-divider { width: 36px; height: 1px; background: var(--home-gold); margin: 0 auto 26px; } .eiffel-intro-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 22px; } .eiffel-intro-title em { font-family: var(--home-f-editorial); font-style: italic; } .eiffel-intro-body { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; color: var(--home-charcoal); max-width: 700px; margin: 0 auto; } .eiffel-intro-body p { margin: 0 0 14px; } .eiffel-intro-body p:last-child { margin-bottom: 0; } /* === MEDIA + TEXT (mwt) === */ .eiffel-mwt { padding: 120px 48px !important; background: var(--home-paper); } .eiffel-mwt--ivory { background: var(--home-ivory); } @media (max-width: 768px) { .eiffel-mwt { padding: 80px 24px !important; } } .eiffel-mwt-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .eiffel-mwt--reverse .eiffel-mwt-inner { direction: rtl; } .eiffel-mwt--reverse .eiffel-mwt-inner > * { direction: ltr; } @media (max-width: 900px) { .eiffel-mwt-inner { grid-template-columns: 1fr; gap: 32px; } .eiffel-mwt--reverse .eiffel-mwt-inner { direction: ltr; } } .eiffel-mwt-media { aspect-ratio: 4/5; overflow: hidden; background: var(--home-noir); } .eiffel-mwt-media video, .eiffel-mwt-media img { width: 100%; height: 100%; object-fit: cover; } .eiffel-mwt-copy { padding: 0 16px; } @media (max-width: 900px) { .eiffel-mwt-copy { padding: 0; } } .eiffel-mwt-num { font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-gold); letter-spacing: 0.06em; margin-bottom: 14px; } .eiffel-mwt-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .eiffel-mwt-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.018em; color: var(--home-ink); margin: 0 0 22px; } .eiffel-mwt-title em { font-family: var(--home-f-editorial); font-style: italic; } .eiffel-mwt-body { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.6; color: var(--home-charcoal); margin: 0 0 16px; } /* === VARIANTS (3-up cards) === */ .eiffel-variants { padding: 96px 48px !important; background: var(--home-ivory); } @media (max-width: 768px) { .eiffel-variants { padding: 72px 24px !important; } } .eiffel-variants-head { max-width: 1240px; margin: 0 auto 56px; text-align: center; } .eiffel-variants-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .eiffel-variants-eyebrow::before, .eiffel-variants-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--home-gold); } .eiffel-variants-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 14px; } .eiffel-variants-title em { font-family: var(--home-f-editorial); font-style: italic; } .eiffel-variants-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.6vw, 19px); color: var(--home-charcoal); max-width: 600px; margin: 0 auto; line-height: 1.55; } .eiffel-variants-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .eiffel-variants-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 600px) { .eiffel-variants-grid { grid-template-columns: 1fr; gap: 12px; } } .eiffel-variant { background: var(--home-warm-white); border: 1px solid var(--home-hairline); transition: all 300ms var(--home-ease); cursor: pointer; } .eiffel-variant:hover { border-color: var(--home-gold); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(13,10,8,0.06); } .eiffel-variant-media { aspect-ratio: 1; overflow: hidden; background: var(--home-paper); position: relative; } .eiffel-variant-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--home-ease); } .eiffel-variant:hover .eiffel-variant-media img { transform: scale(1.03); } .eiffel-variant-badge { position: absolute; top: 18px; left: 18px; z-index: 2; padding: 7px 14px; background: rgba(251,248,241,0.95); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; } .eiffel-variant-body { padding: 32px 32px 36px; text-align: center; } @media (max-width: 768px) { .eiffel-variant-body { padding: 26px 24px 30px; } } .eiffel-variant-metal { font-family: var(--home-f-body); font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 12px; } .eiffel-variant-name { font-family: var(--home-f-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); color: var(--home-ink); margin: 0 0 8px; line-height: 1.2; letter-spacing: -0.005em; } .eiffel-variant-name em { font-family: var(--home-f-editorial); font-style: italic; } .eiffel-variant-cap { font-family: var(--home-f-editorial); font-style: italic; font-size: 16px; color: var(--home-charcoal); line-height: 1.4; margin: 0 0 22px; } .eiffel-variant-price-row { display: inline-flex; align-items: baseline; gap: 14px; padding-top: 18px; border-top: 1px solid var(--home-hairline); } .eiffel-variant-price { font-family: var(--home-f-display); font-size: 20px; color: var(--home-ink); font-weight: 500; } .eiffel-variant-strike { font-family: var(--home-f-editorial); font-style: italic; font-size: 16px; color: var(--home-signature); text-decoration: line-through; } .eiffel-variant-save { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.18em; color: var(--home-signature); text-transform: uppercase; font-weight: 500; } /* === GALLERY (8-up macro grid) === */ .eiffel-gallery { padding: 96px 48px !important; background: var(--home-ivory); } @media (max-width: 768px) { .eiffel-gallery { padding: 72px 16px !important; } } .eiffel-gallery-head { max-width: 1240px; margin: 0 auto 48px; text-align: center; } .eiffel-gallery-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .eiffel-gallery-eyebrow::before, .eiffel-gallery-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--home-gold); } .eiffel-gallery-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.018em; color: var(--home-ink); margin: 0 0 14px; } .eiffel-gallery-title em { font-family: var(--home-f-editorial); font-style: italic; } .eiffel-gallery-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(15px, 1.6vw, 18px); color: var(--home-charcoal); max-width: 600px; margin: 0 auto; line-height: 1.55; } .eiffel-gallery-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1024px) { .eiffel-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } } @media (max-width: 600px) { .eiffel-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } } .eiffel-g-tile { aspect-ratio: 5/6; overflow: hidden; background: var(--home-paper); cursor: pointer; } .eiffel-g-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .eiffel-g-tile:hover img { transform: scale(1.06); } /* === ATMOSPHERIC === */ .eiffel-atmos { height: 70vh; min-height: 540px; max-height: 760px; overflow: hidden; background: var(--home-noir); display: flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .eiffel-atmos { height: 56vh; min-height: 460px; } } .eiffel-atmos-bg { position: absolute; inset: 0; z-index: 1; } .eiffel-atmos-bg img { width: 100%; height: 100%; object-fit: cover; } .eiffel-atmos-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,10,8,0.30) 0%, rgba(13,10,8,0.10) 45%, rgba(13,10,8,0.50) 100%); } .eiffel-atmos-inner { position: relative; z-index: 3; max-width: 880px; padding: 0 48px; text-align: center; color: var(--home-ivory); } @media (max-width: 768px) { .eiffel-atmos-inner { padding: 0 24px; } } .eiffel-atmos-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 24px; } .eiffel-atmos-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(34px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0 0 18px; } .eiffel-atmos-title em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); } .eiffel-atmos-body { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55; color: var(--home-gold-light); max-width: 640px; margin: 0 auto; } /* === BOX REVEAL (split-screen) === */ .eiffel-boxreveal { min-height: 720px; height: 86vh; max-height: 920px; overflow: hidden; background: var(--home-noir); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } @media (max-width: 900px) { .eiffel-boxreveal { grid-template-columns: 1fr; min-height: auto; height: auto; } } .eiffel-boxreveal-media { background: var(--home-noir); display: flex; align-items: center; justify-content: center; overflow: hidden; } .eiffel-boxreveal-media img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .eiffel-boxreveal-media { aspect-ratio: 1; } } .eiffel-boxreveal-copy { background: var(--home-ink); color: var(--home-ivory); display: flex; align-items: center; justify-content: center; padding: 80px 56px; } @media (max-width: 768px) { .eiffel-boxreveal-copy { padding: 64px 24px; } } .eiffel-boxreveal-inner { max-width: 460px; } .eiffel-boxreveal-num { font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-gold-light); letter-spacing: 0.06em; margin-bottom: 18px; } .eiffel-boxreveal-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--home-signature); font-weight: 500; margin-bottom: 22px; } .eiffel-boxreveal-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ivory); margin: 0 0 22px; } .eiffel-boxreveal-title em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold-light); } .eiffel-boxreveal-body { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; color: var(--home-gold-light); margin: 0 0 18px; } .eiffel-boxreveal-features { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(217,201,162,0.20); display: grid; gap: 14px; } .eiffel-boxreveal-feature { display: flex; align-items: flex-start; gap: 12px; font-family: var(--home-f-body); font-size: 13px; color: var(--home-gold-light); line-height: 1.5; } .eiffel-boxreveal-feature svg { flex-shrink: 0; color: var(--home-signature); margin-top: 3px; } .eiffel-boxreveal-feature strong { color: var(--home-ivory); font-weight: 500; } /* === MANIFESTO === */ .eiffel-manifesto { padding: 120px 48px !important; background: var(--home-linen); text-align: center; } @media (max-width: 768px) { .eiffel-manifesto { padding: 80px 24px !important; } } .eiffel-manifesto-inner { max-width: 880px; margin: 0 auto; } .eiffel-manifesto-divider { width: 48px; height: 1px; background: var(--home-gold); margin: 0 auto 32px; } .eiffel-manifesto-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 18px; } .eiffel-manifesto-title em { font-family: var(--home-f-editorial); font-style: italic; } .eiffel-manifesto-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55; color: var(--home-charcoal); max-width: 700px; margin: 0 auto; } .eiffel-manifesto-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 720px; margin: 56px auto 0; padding-top: 40px; border-top: 1px solid var(--home-hairline); } @media (max-width: 640px) { .eiffel-manifesto-stats { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; margin-top: 36px; } } .eiffel-stat-num { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(36px, 4vw, 52px); line-height: 1; color: var(--home-ink); margin-bottom: 8px; letter-spacing: -0.02em; } .eiffel-stat-num em { font-family: var(--home-f-editorial); font-style: italic; color: var(--home-gold); } .eiffel-stat-label { font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--home-charcoal); font-weight: 500; } /* === BOUTIQUE (split header + grid) === */ .eiffel-boutique { background: var(--home-paper); } .eiffel-boutique--header { padding: 120px 48px 0 !important; } @media (max-width: 768px) { .eiffel-boutique--header { padding: 80px 24px 0 !important; } } .eiffel-boutique-head { max-width: 1240px; margin: 0 auto; text-align: center; } .eiffel-boutique-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 18px; } .eiffel-boutique-eyebrow::before, .eiffel-boutique-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--home-gold); } .eiffel-boutique-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.05; letter-spacing: -0.02em; color: var(--home-ink); margin: 0 0 14px; } .eiffel-boutique-title em { font-family: var(--home-f-editorial); font-style: italic; } .eiffel-boutique-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: clamp(16px, 1.6vw, 19px); color: var(--home-charcoal); max-width: 580px; margin: 0 auto; line-height: 1.55; } .eiffel-boutique--grid { padding: 64px 48px 120px !important; } @media (max-width: 768px) { .eiffel-boutique--grid { padding: 48px 24px 80px !important; } } .eiffel-boutique--grid .eiffel-boutique-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px) { .eiffel-boutique--grid .eiffel-boutique-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 600px) { .eiffel-boutique--grid .eiffel-boutique-grid { grid-template-columns: 1fr; gap: 12px; } } .eiffel-piece { background: var(--home-warm-white); border: 1px solid var(--home-hairline); transition: all 250ms var(--home-ease); cursor: pointer; display: flex; flex-direction: column; color: var(--home-ink); } .eiffel-piece:hover { border-color: var(--home-gold); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(13,10,8,0.06); } .eiffel-piece-media { aspect-ratio: 1; overflow: hidden; background: var(--home-paper); } .eiffel-piece-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--home-ease); } .eiffel-piece:hover .eiffel-piece-media img { transform: scale(1.04); } .eiffel-piece-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 4px; flex: 1; } @media (max-width: 768px) { .eiffel-piece-body { padding: 16px 14px 18px; } } .eiffel-piece-num { font-family: var(--home-f-editorial); font-style: italic; font-size: 12.5px; color: var(--home-gold); letter-spacing: 0.04em; margin-bottom: 4px; } .eiffel-piece-name { font-family: var(--home-f-display); font-size: 17px; font-weight: 500; color: var(--home-ink); line-height: 1.25; letter-spacing: -0.005em; margin: 0; } @media (max-width: 768px) { .eiffel-piece-name { font-size: 14px; } } .eiffel-piece-cap { font-family: var(--home-f-editorial); font-style: italic; font-size: 14px; color: var(--home-warm-gray); line-height: 1.45; margin: 0 0 6px; } @media (max-width: 768px) { .eiffel-piece-cap { font-size: 12.5px; } } .eiffel-piece-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--home-hairline); } .eiffel-piece-price { font-family: var(--home-f-display); font-size: 16px; color: var(--home-ink); font-weight: 500; } .eiffel-piece-strike { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-signature); text-decoration: line-through; } /* === TRUST STRIP === */ .eiffel-trust { padding: 64px 48px !important; background: var(--home-ivory); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } @media (max-width: 768px) { .eiffel-trust { padding: 48px 24px !important; } } .eiffel-trust-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } @media (max-width: 900px) { .eiffel-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } } .eiffel-trust-item { text-align: center; } .eiffel-trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 14px; color: var(--home-gold-deep); } .eiffel-trust-icon svg { width: 28px; height: 28px; } .eiffel-trust-title { font-family: var(--home-f-display); font-weight: 500; font-size: 14px; color: var(--home-ink); margin-bottom: 4px; letter-spacing: -0.005em; } .eiffel-trust-sub { font-family: var(--home-f-editorial); font-style: italic; font-size: 13px; color: var(--home-warm-gray); line-height: 1.4; } /* === FAQ ACCORDION === */ .eiffel-faq { padding: 96px 48px !important; background: var(--home-paper); } @media (max-width: 768px) { .eiffel-faq { padding: 64px 24px !important; } } .eiffel-faq-inner { max-width: 880px; margin: 0 auto; } .eiffel-faq-head { text-align: center; margin-bottom: 48px; } .eiffel-faq-eyebrow { font-family: var(--home-f-body); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 16px; } .eiffel-faq-title { font-family: var(--home-f-display); font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; color: var(--home-ink); margin: 0; } .eiffel-faq-title em { font-family: var(--home-f-editorial); font-style: italic; } .eiffel-accordion { border-top: 1px solid var(--home-hairline); } .eiffel-acc-item { border-bottom: 1px solid var(--home-hairline); } .eiffel-acc-trigger { width: 100%; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; font-family: var(--home-f-display); font-weight: 500; font-size: 17px; color: var(--home-ink); transition: color 200ms var(--home-ease); cursor: pointer; } .eiffel-acc-trigger:hover { color: var(--home-signature); } .eiffel-acc-icon { width: 14px; height: 14px; flex-shrink: 0; position: relative; } .eiffel-acc-icon::before, .eiffel-acc-icon::after { content: ""; position: absolute; background: var(--home-ink); } .eiffel-acc-icon::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); } .eiffel-acc-icon::after { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); transition: transform 300ms var(--home-ease); } .eiffel-acc-item--open .eiffel-acc-icon::after { transform: translateX(-50%) scaleY(0); } .eiffel-acc-body { max-height: 0; overflow: hidden; transition: max-height 400ms var(--home-ease); } .eiffel-acc-item--open .eiffel-acc-body { max-height: 500px; } .eiffel-acc-body-inner { padding: 0 38px 22px 0; font-family: var(--home-f-editorial); font-style: italic; font-size: 15px; line-height: 1.65; color: var(--home-charcoal); } .eiffel-acc-link { color: var(--home-signature); border-bottom: 1px solid var(--home-signature); } /* === MARQUEE (reuses home-marquee-scroll keyframe) === */ .eiffel-marquee { background: var(--home-signature); color: var(--home-ivory); padding: 22px 0 !important; overflow: hidden; } .eiffel-marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: home-marquee-scroll 60s linear infinite; font-family: var(--home-f-editorial); font-style: italic; font-size: 26px; } .eiffel-marquee-item { display: inline-flex; align-items: center; gap: 32px; } .eiffel-marquee-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--home-ivory); flex-shrink: 0; } @media (max-width: 768px) { .eiffel-marquee-track { font-size: 20px; gap: 40px; } } @media (max-width: 640px) { .eiffel-marquee { padding: 18px 0 !important; } .eiffel-marquee-track { font-size: 18px; } } /* === PRESS === */ .eiffel-press { padding: 56px 48px !important; background: var(--home-linen); border-top: 1px solid var(--home-hairline); border-bottom: 1px solid var(--home-hairline); } @media (max-width: 768px) { .eiffel-press { padding: 40px 24px !important; } } .eiffel-press-inner { max-width: 1240px; margin: 0 auto; text-align: center; } .eiffel-press-label { display: block; font-family: var(--home-f-body); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; margin-bottom: 24px; } .eiffel-press-logos { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 56px); flex-wrap: wrap; } .eiffel-press-logo { font-family: var(--home-f-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); color: var(--home-charcoal); opacity: 0.7; } /* === EIFFEL v1 — variants split patch (2026-05-05) === */ /* Split eiffel_variants into header + grid (so grid can be swapped for native featured-collection later). */ /* Add new section IDs to breakout selectors */ #shopify-section-eiffel_variants_header, #shopify-section-eiffel_variants_grid, [id*="eiffel_variants_header"], [id*="eiffel_variants_grid"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; padding: 0 !important; left: 0 !important; right: 0 !important; } /* Continuous-rhythm padding when both present (default). When grid is removed (Felix swaps for native section), the next section's top padding compensates. */ .eiffel-variants--header { padding: 96px 48px 0 !important; background: var(--home-ivory); } .eiffel-variants--grid { padding: 56px 48px 96px !important; background: var(--home-ivory); } @media (max-width: 768px) { .eiffel-variants--header { padding: 72px 24px 0 !important; } .eiffel-variants--grid { padding: 32px 24px 72px !important; } } .eiffel-variants--header .eiffel-variants-head { margin-bottom: 0; } /* === END EIFFEL v1 — variants split patch === */ /* === EIFFEL v1 — piece-badge CSS for new collection pages (2026-05-05) === */ /* Added because Last Supper / Mona Lisa / Versailles use boutique cards with badges (Bestseller, Gold, Necklace, etc.). Position styled like .eiffel-variant-badge. */ .eiffel-piece { position: relative; } .eiffel-piece-badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 12px; background: rgba(251,248,241,0.95); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-family: var(--home-f-body); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--home-gold-deep); font-weight: 500; } @media (max-width: 768px) { .eiffel-piece-badge { font-size: 8px; padding: 5px 9px; top: 10px; left: 10px; } } /* === END EIFFEL v1 — piece-badge patch === */ /* === EIFFEL v1 — boutique background patch (2026-05-05) === */ /* Use page-color (ivory) for boutique sections so warm-white cards have clear contrast. Was: paper #FBF8F1 (too close to card #FAF7F2 — cards disappeared). To revert: delete this sub-block. */ .eiffel-boutique { background: var(--home-ivory) !important; } /* When Felix swaps grid for native featured-collection, the new section can use any bg independently — this rule only affects the .eiffel-boutique-prefixed sections. */ /* === END EIFFEL v1 — boutique background patch === */ /* === EIFFEL v1 — featured-collection gap defensive (2026-05-05) === */ /* Impact theme collapses the product-list gap to var(--spacing-2) when stack_products=true AND section bg == card bg (the "card_blends" logic). For editorial collection pages, we want visible gaps regardless of whether Felix set explicit colors. This forces the normal row/column gap on any featured-collection section sitting on these pages. */ .shopify-section--featured-collection .product-list, [id*="featured_collection_"] .product-list { --product-list-gap: var(--product-list-row-gap, 24px) var(--product-list-column-gap, 18px) !important; } @media (max-width: 768px) { .shopify-section--featured-collection .product-list, [id*="featured_collection_"] .product-list { --product-list-gap: var(--product-list-row-gap, 14px) var(--product-list-column-gap, 12px) !important; } } /* === END EIFFEL v1 — featured-collection gap defensive === */ /* === END EIFFEL v1 === */ /* === BREADCRUMB ALIGNMENT v3 (2026-05-05) === */ /* Aligns *-breadcrumb-inner with Impact's header container. Tiered behavior: - <700px (mobile): unchanged from original (12px 24px) - 700-1440px: 48px padding, max-width 1600px (matches header's container start) - >1440px: 80px padding (Impact's container has more inset on wide screens) Felix tested: 80px on wide screens aligns HOME with Shop perfectly. */ @media (min-width: 700px) { .coll1ring-breadcrumb-inner, .about-breadcrumb-inner, .cgen-breadcrumb-inner, .contact-breadcrumb-inner, .util-breadcrumb-inner, .faq-breadcrumb-inner, .pdef-breadcrumb-inner, .sale-breadcrumb-inner, .idx-breadcrumb-inner, .eiffel-breadcrumb-inner { max-width: 1600px !important; padding-left: 48px !important; padding-right: 48px !important; } } @media (min-width: 1441px) { .coll1ring-breadcrumb-inner, .about-breadcrumb-inner, .cgen-breadcrumb-inner, .contact-breadcrumb-inner, .util-breadcrumb-inner, .faq-breadcrumb-inner, .pdef-breadcrumb-inner, .sale-breadcrumb-inner, .idx-breadcrumb-inner, .eiffel-breadcrumb-inner { padding-left: 80px !important; padding-right: 80px !important; } } /* === END BREADCRUMB ALIGNMENT v3 === */ /* === HEADER MENU STYLE v2 (2026-05-05) === */ /* Apply Sateur uppercase/tracked treatment to top-level header menu links. v2 fixes: - Includes .text-sm to catch language selector (English / chevron) - Adds line-height: 2.5 so the dropdown triggers (Shop/Collections) align with simple links (About/Sale) - Forces align-items: center on flex parents (the