/* ========================================================= Benton Sans Wide — self-hosted (public/fonts/benton-sans-wide) Paths are relative to this stylesheet (css/style.css) so they resolve correctly regardless of how the site is mounted. ========================================================= */ @font-face { font-family: "Benton Sans Wide"; src: url("../public/fonts/benton-sans-wide/benton-sans-wide-extralight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Benton Sans Wide"; src: url("../public/fonts/benton-sans-wide/benton-sans-wide-book.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Benton Sans Wide"; src: url("../public/fonts/benton-sans-wide/benton-sans-wide-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Benton Sans Wide"; src: url("../public/fonts/benton-sans-wide/benton-sans-wide-medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Benton Sans Wide"; src: url("../public/fonts/benton-sans-wide/benton-sans-wide-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Benton Sans Wide"; src: url("../public/fonts/benton-sans-wide/benton-sans-wide-black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } :root { --bg: #ffffff; --white: #ffffff; --secondary: #e8d7bb; --ink: #111111; --black: #111111; --gray: #7a736c; --muted: #7a736c; --line: #d8c9ad; --accent: #a7604a; /* Canonical brand font token. Use --font-benton-sans-wide in all new code. */ --font-benton-sans-wide: "Benton Sans Wide", sans-serif; /* Legacy alias — kept so the ~150 existing `var(--font-geist-sans)` references resolve to Benton Sans Wide without a project-wide rename. Do not remove. */ --font-geist-sans: var(--font-benton-sans-wide); --ease: cubic-bezier(0.22, 1, 0.36, 1); --pad: clamp(22px, 5vw, 64px); /* Unified horizontal rail used by nav, footer, and product page sections. Matches the nav bar's left/right offset so every section aligns edge-to-edge with the header/footer on every viewport. */ --section-pad: max(20px, 4vw); /* Content max-width used by product page sections + footer inner grid. Wider than the legacy 1440px cap so 1600–2560px viewports actually fill, but capped so 4K screens don't stretch cards into billboards. */ --section-max: 1720px; } /* ========================================================= Font utility classes (Benton Sans Wide) .font-geistSans is aliased for backward compatibility with existing `` markup. ========================================================= */ .font-benton, .font-geistSans { font-family: var(--font-benton-sans-wide); } .font-benton-extralight { font-weight: 200; } .font-benton-book { font-weight: 300; } .font-benton-regular { font-weight: 400; } .font-benton-medium { font-weight: 500; } .font-benton-bold { font-weight: 700; } .font-benton-black { font-weight: 900; } /* ========================================================== Brand logo variants — derived from a single copper `logo.avif` via CSS filters (no extra asset files required). Usage on any that renders the Swiss Arabian mark: .logo--black → force pure black silhouette (on light bg) .logo--white → force pure white silhouette (on dark bg) .logo--copper → keep original brand copper (primary) ========================================================== */ .logo--black { filter: brightness(0); } .logo--white { filter: brightness(0) invert(1); } .logo--copper { filter: none; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-geist-sans); font-size: 16px; font-weight: 400; line-height: 1.6; overflow-x: hidden; } body.lock, body.is-loading { overflow: hidden; } /* ============================================================== LOADER — editorial theme (warm cream · ink · accent) Consumes: var(--secondary), var(--ink), var(--accent), var(--ease) ============================================================== */ .loader { --loader-fill: 0; position: fixed; inset: 0; z-index: 300; overflow: hidden; background: #ffffff; color: #000; transform: translateY(0); transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1); will-change: transform; isolation: isolate; } .loader__corner { position: absolute; width: 26px; height: 26px; border: 0 solid #000; pointer-events: none; } .loader__corner--tl { top: 22px; left: 22px; border-top-width: 1.5px; border-left-width: 1.5px; } .loader__corner--tr { top: 22px; right: 22px; border-top-width: 1.5px; border-right-width: 1.5px; } .loader__corner--bl { bottom: 22px; left: 22px; border-bottom-width: 1.5px; border-left-width: 1.5px; } .loader__corner--br { bottom: 22px; right: 22px; border-bottom-width: 1.5px; border-right-width: 1.5px; } .loader__grid { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding: clamp(28px, 4vw, 48px); } .loader__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .loader__row--mid { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: clamp(20px, 2.6vw, 34px); } .loader__brand { display: inline-flex; align-items: center; gap: 12px; } .loader__brand img { height: 32px; width: auto; object-fit: contain; } .loader__meta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-geist-sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #000; } .loader__meta i { font-style: normal; color: #000; opacity: 0.4; } .loader__stage { width: clamp(120px, 17vw, 190px); aspect-ratio: 140 / 260; display: flex; align-items: flex-end; justify-content: center; overflow: visible; } .loader__bottle { width: 100%; height: 100%; display: block; overflow: visible; } .loader__liquid-group { transform: translateY(calc(140px * (1 - var(--loader-fill, 0)))); transition: transform 0.18s linear; transform-box: fill-box; } .loader__wave { transform-origin: 50% 100%; animation: loaderWave 3.4s ease-in-out infinite; } @keyframes loaderWave { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } } .loader__wisp { fill: none; opacity: 0; transform-origin: 50% 100%; transform-box: fill-box; animation: loaderWisp 3.6s ease-in-out infinite; } .loader__wisp--2 { animation-delay: 1.2s; } .loader__wisp--3 { animation-delay: 2.4s; } @keyframes loaderWisp { 0% { opacity: 0; transform: translateY(6px) scale(0.9); } 30% { opacity: 0.7; } 75% { opacity: 0.2; } 100% { opacity: 0; transform: translateY(-22px) scale(1.05); } } .loader__status { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-geist-sans); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: #000; } .loader__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #000; animation: loaderPulse 1.6s ease-in-out infinite; } @keyframes loaderPulse { 0%, 100% { opacity: 0.2; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } .loader__num { display: inline-flex; align-items: flex-start; gap: 8px; font-family: var(--font-geist-sans); font-size: clamp(4.5rem, 13vw, 8.5rem); font-weight: 800; letter-spacing: -0.055em; line-height: 0.88; color: #000; } .loader__num i { font-family: var(--font-geist-sans); font-style: normal; font-size: 0.28em; font-weight: 800; letter-spacing: 0; color: #000; margin-top: 0.4em; } .loader__track { width: 100%; height: 2px; background: rgba(0, 0, 0, 0.1); overflow: hidden; margin-bottom: 14px; } .loader__track span { display: block; height: 100%; width: 0; background: #000; transition: width 0.16s linear; } .loader__foot { display: flex; justify-content: space-between; font-family: var(--font-geist-sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #000; } .loader.is-leave { transform: translateY(-100%); pointer-events: none; } .nav, .hero__left, .hero__sound { opacity: 0; transform: translateY(28px); } body.is-ready .nav, body.is-ready .hero__left, body.is-ready .hero__sound { opacity: 1; transform: none; transition: opacity 1s var(--ease) 0.15s, transform 1.2s var(--ease) 0.15s; } body.is-ready .hero__left { transition-delay: 0.28s, 0.28s; } body.is-ready .hero__sound { transition-delay: 0.52s, 0.52s; } img, video { display: block; width: 100%; height: 100%; object-fit: cover; } a { color: inherit; text-decoration: none; } button, input { font: inherit; color: inherit; background: none; border: 0; } button { cursor: pointer; } ::selection { background: var(--ink); color: var(--white); } .glow { position: fixed; width: 42vw; height: 42vw; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(80px); opacity: 0.4; } .glow--a { top: -12vw; left: -8vw; background: #a7604a; animation: drift 14s ease-in-out infinite; } .glow--b { right: -10vw; bottom: 10vh; background: #a7604a; animation: drift 18s ease-in-out infinite reverse; } /* Products page (`.shop-page`) is a pure editorial white listing surface. Suppress the copper ambience glows here so .pvideo, .shop-toolbar, and .collection render on a clean #fff without a warm tint bleeding through. Home page keeps the glows for hero ambience. */ body.shop-page .glow { display: none; } @keyframes drift { 50% { transform: translate(20px, -16px) scale(1.06); } } .nav, .hero, .shop, .mrq, .families, .hgallery, .manifesto, .picks, .cinema, .talk-sec, .foot, .menu { position: relative; z-index: 2; } .nav { position: fixed; top: 18px; left: var(--section-pad); right: var(--section-pad); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: auto; padding: 0; background: none; border: 0; box-shadow: none; transition: top 0.35s var(--ease); } /* Past-hero — subtle position tuck (color/theme is already light by default) */ body.is-past-hero .nav { top: 12px; } .brand { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; box-shadow: none; transition: transform 0.4s var(--ease), filter 0.4s var(--ease); } .brand:hover { transform: scale(1.06); filter: brightness(1.15); } .brand img { display: block; height: 58px; width: auto; object-fit: contain; } .nav__mid { display: flex; align-items: center; justify-content: center; flex: 0 1 auto; max-width: min(860px, 68vw); gap: 2px; padding: 5px; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 999px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: background 0.4s var(--ease), border-color 0.4s; } .nav__mid > a, .drop > button { position: relative; padding: 10px 16px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(17, 17, 17, 0.72); white-space: nowrap; transition: color 0.4s var(--ease), background 0.3s; } .nav__mid > a::after, .drop > button::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: #111; transform: translate(-50%, 6px); opacity: 0; transition: 0.3s var(--ease); } .nav__mid > a:hover::after, .drop > button:hover::after, .drop:hover > button::after { opacity: 1; transform: translate(-50%, 0); } .nav__mid > a:hover, .drop > button:hover, .drop:hover > button { color: #111; background: rgba(17, 17, 17, 0.05); } .drop { position: relative; } .drop > button { display: inline-flex; align-items: center; gap: 4px; } .drop > button span { font-size: 0.6rem; color: rgba(17, 17, 17, 0.55); transition: transform 0.3s var(--ease); } .drop:hover > button span { transform: rotate(180deg); } .drop__list { position: absolute; top: calc(100% + 14px); left: 50%; min-width: 200px; padding: 8px; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 18px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7); transform: translate(-50%, 8px); opacity: 0; visibility: hidden; transition: 0.28s var(--ease); } .drop__list a { display: block; padding: 10px 12px; border-radius: 12px; color: rgba(17, 17, 17, 0.78); font-size: 0.8rem; letter-spacing: 0.02em; } .drop__list a:hover { background: rgba(167, 96, 74, 0.12); color: var(--accent); } .drop:hover .drop__list, .drop:focus-within .drop__list { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .nav__right { display: flex; align-items: center; gap: 10px; } .nav__actions { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 999px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: background 0.4s var(--ease), border-color 0.4s; } .nav__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: rgba(17, 17, 17, 0.75); transition: 0.3s var(--ease); } .nav__ic:hover { background: rgba(17, 17, 17, 0.05); color: #111; } .nav__ic svg { width: 17px; height: 17px; } .nav__sep { width: 1px; height: 20px; background: rgba(0, 0, 0, 0.1); } .nav__bag { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 4px 0 14px; border-radius: 999px; color: #111; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; transition: 0.3s var(--ease); } .nav__bag:hover { background: rgba(17, 17, 17, 0.05); } .nav__bag b { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: 0.72rem; letter-spacing: 0; transition: background 0.25s var(--ease); } /* Empty state — JS toggles .is-empty on #cartCount when cart is 0. Soft grey pill so an empty bag doesn't scream in brand copper. Mirrors the existing pattern in .nav__bag-link b.is-empty. */ .nav__bag b.is-empty { background: rgba(17, 17, 17, 0.14); color: rgba(17, 17, 17, 0.6); } .icon-circle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.06); background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); color: #111; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); transition: 0.3s var(--ease); } .icon-circle svg { width: 18px; height: 18px; } .icon-circle:hover { background: #fff; border-color: rgba(0, 0, 0, 0.16); } .search { position: fixed; top: 84px; right: max(18px, 4vw); z-index: 41; width: min(360px, calc(100vw - 36px)); padding: 8px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; background: rgba(12, 12, 12, 0.62); backdrop-filter: blur(18px); } .search input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: #fff; } .search input::placeholder { color: rgba(255, 255, 255, 0.55); } .search input:focus { outline: none; } .arrow { color: var(--accent); display: inline-block; transition: transform 0.3s var(--ease); } .talk:hover .arrow, .btn:hover .arrow, .card__buy button:hover .arrow { transform: translate(3px, -3px); } .nav__burger { display: none; position: relative; } .nav__burger i { position: absolute; left: 14px; width: 16px; height: 1.5px; /* Match the rest of the nav iconography (search, bag, count) which all render in dark ink over the near-white `.icon-circle` pill. Previously #fff, which was invisible against the translucent-white button background. */ background: var(--ink); border-radius: 2px; transition: 0.3s var(--ease); } .nav__burger i:first-child { top: 16px; } .nav__burger i:last-child { top: 24px; width: 12px; } .nav__burger.is-open i:first-child { top: 20px; transform: rotate(45deg); } .nav__burger.is-open i:last-child { top: 20px; width: 16px; transform: rotate(-45deg); } .menu { position: fixed; top: 100px; right: max(16px, 4vw); z-index: 39; display: flex; flex-direction: column; gap: 14px; min-width: 180px; padding: 20px 22px; background: rgba(232, 215, 187, 0.92); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: 0.35s var(--ease); } .menu.open { opacity: 1; visibility: visible; transform: none; } .menu a, .menu button { text-align: left; font-size: 1.05rem; } .hero { position: relative; isolation: isolate; min-height: 100vh; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: end; padding: 110px var(--pad) 88px; overflow: hidden; color: #fff; } .hero__bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hero__bg video { transform: scale(1.06); } .hero__left { position: relative; z-index: 2; max-width: 500px; } /* Type scale tuned for laptop viewports (1280–1440px). At 1280px this resolves to ~54px (vs ~72px previously) so the h1 sits over the product photography without overwhelming it. */ .hero h1 { font-family: var(--font-geist-sans); font-size: clamp(2.4rem, 4.2vw, 4.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; color: #000; text-shadow: none; margin-bottom: 18px; } .hero h1 em { font-style: normal; font-weight: 700; color: #000; } .hero__lede { max-width: 40ch; font-size: 1.02rem; font-weight: 500; line-height: 1.55; color: #000; text-shadow: none; } .hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 26px; } .ghost-link { display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #000; transition: color 0.3s; } .ghost-link span { position: relative; padding-bottom: 4px; } .ghost-link span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(0, 0, 0, 0.55); transition: background 0.3s; } .ghost-link .arrow { font-size: 1rem; } .ghost-link:hover { color: var(--accent); } .ghost-link:hover span::after { background: var(--accent); } .ghost-link:hover .arrow { transform: translate(3px, -3px); } .shop h2, .talk-sec h2, .sheet h2 { font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; } .shop__intro, .talk-sec__left p, .sheet > div p:not(.label) { color: var(--muted); max-width: 36ch; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; margin-top: 26px; background: var(--ink); color: var(--white); border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16); } .btn--wide { width: 100%; margin-top: 28px; } .btn.btn--light { display: inline-flex; align-items: center; justify-content: flex-start; gap: 14px; min-height: 60px; margin-top: 0; padding: 6px 6px 6px 26px; background: #fff; color: #111; border-radius: 999px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22); transition: transform 0.3s var(--ease), background 0.3s; } .btn.btn--light:hover { transform: translateY(-2px); background: #f5ede2; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26); } .btn__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #111; color: #fff; font-size: 1rem; font-weight: 400; transition: background 0.3s, transform 0.3s var(--ease); } .btn.btn--light:hover .btn__ic { background: var(--accent); transform: rotate(45deg); } /* Sound / mute toggle — sits at the bottom-right of the hero, on the same vertical rail as the nav bar. Two icons live inside the pill: a play triangle (default, muted state) and an animated equaliser (live state). Visibility is swapped by the .is-live class, toggled from main.js. */ .hero__sound { position: absolute; right: var(--section-pad); bottom: clamp(24px, 3vw, 40px); z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(12, 12, 12, 0.5); backdrop-filter: blur(14px); color: #fff; font-family: var(--font-geist-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background 0.3s, border-color 0.3s; } .hero__sound:hover { background: rgba(12, 12, 12, 0.75); border-color: rgba(255, 255, 255, 0.32); } .hero__sound:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.65); outline-offset: 3px; } .hero__sound-ic { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: var(--accent); } /* Idle state: show play triangle, hide EQ. */ .hero__sound-ic--live { display: none; } /* Live state: hide play triangle, show pulsing EQ. */ .hero__sound.is-live .hero__sound-ic--play { display: none; } .hero__sound.is-live .hero__sound-ic--live { display: inline-flex; } .hero__eq { align-items: flex-end; gap: 2px; height: 10px; } .hero__eq i { width: 2px; height: 4px; background: var(--accent); } .hero__sound.is-live .hero__eq i { animation: eq 0.7s ease-in-out infinite; background: var(--accent); } .hero__sound.is-live .hero__eq i:nth-child(2) { animation-delay: 0.1s; } .hero__sound.is-live .hero__eq i:nth-child(3) { animation-delay: 0.2s; } @keyframes eq { 50% { height: 10px; } } .pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 22px; } .pill { min-height: 36px; padding: 0 14px; border: 1px solid #111; border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; transition: 0.25s var(--ease); } .pill.plus { width: 36px; padding: 0; } .pill.is-on, .pill:hover { background: var(--ink); color: var(--white); } .shop { padding: clamp(90px, 11vw, 140px) var(--pad) clamp(80px, 10vw, 120px); background: #fff; color: var(--ink); } /* .talk-sec layout is fully declared later; base rule kept minimal to avoid clashes. */ .talk-sec { background: var(--secondary); } .shop__head { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: end; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(0, 0, 0, 0.09); } .label { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 18px; } .label i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .label span { color: rgba(0, 0, 0, 0.32); letter-spacing: 0.22em; padding-left: 6px; border-left: 1px solid rgba(0, 0, 0, 0.14); } .shop h2, .talk-sec h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); } .shop__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .shop__intro { color: var(--muted); max-width: 40ch; font-size: 1rem; line-height: 1.55; } .shop__all { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); } .shop__all .arrow { color: var(--accent); } .shop__rail { --card-w: clamp(240px, 22vw, 320px); --edge-pad: 0px; position: relative; display: flex; gap: 22px; margin: 48px calc(var(--pad) * -1) 0; padding: 6px var(--pad) 44px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; /* Proximity (not mandatory) — mandatory snap fights every wheel frame, which turns diagonal trackpad gestures into visible page-scroll jitter when the cursor is over the rail. Proximity still snaps when the user releases near a card, without the intermediate tug-of-war. */ scroll-snap-type: x proximity; scroll-padding-left: var(--pad); scrollbar-width: none; -ms-overflow-style: none; cursor: grab; user-select: none; scroll-behavior: smooth; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%); } .shop__rail::-webkit-scrollbar { display: none; } .shop__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } .shop__rail:focus-visible { outline: 2px solid rgba(167, 96, 74, 0.4); outline-offset: 4px; border-radius: 24px; } .shop__rail > .card { flex: 0 0 var(--card-w); width: var(--card-w); scroll-snap-align: start; scroll-snap-stop: always; } .shop__rail.is-dragging > .card { pointer-events: none; } .shop__rail > .card .card__media img { -webkit-user-drag: none; user-select: none; } /* Register --is-hover as a numeric property so CSS can smoothly interpolate the lift/scale/Z-pop that reads var(--is-hover) inside the .card__media img transform. Without this, custom properties are treated as text and can't be transitioned. */ @property --is-hover { syntax: ""; inherits: true; initial-value: 0; } .card { --is-hover: 0; position: relative; background: #fafaf7; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04); perspective: 1000px; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s var(--ease), --is-hover 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .card:hover { transform: translateY(-6px); border-color: rgba(216, 175, 122, 0.5); box-shadow: 0 24px 44px -22px rgba(167, 96, 74, 0.26), 0 12px 22px -18px rgba(17, 17, 17, 0.14), 0 0 0 1px rgba(216, 175, 122, 0.14) inset; } .card__media { display: block; position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #f5f1ea; transform-style: preserve-3d; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } /* Anchor-wrapped h3 inherits the h3's typography so the name still looks like heading text, not a default blue underlined link. */ .card__meta h3 a { color: inherit; text-decoration: none; } .card__meta h3 a:hover { color: var(--accent); } .card__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient( 120% 70% at 50% 42%, rgba(255, 224, 178, 0.4) 0%, rgba(232, 215, 187, 0.22) 32%, rgba(167, 96, 74, 0.06) 62%, rgba(0, 0, 0, 0) 82% ), linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(17, 17, 17, 0.1) 100%); pointer-events: none; opacity: 0; transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .card:hover .card__media::after { opacity: 1; } .card__media::before { content: ""; position: absolute; top: -15%; bottom: -15%; left: -40%; width: 50%; z-index: 2; background: linear-gradient( 115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 240, 210, 0.45) 50%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 255, 255, 0) 100% ); transform: translateX(0) skewX(-16deg); opacity: 0; pointer-events: none; filter: blur(2px); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s var(--ease); } .card:hover .card__media::before { transform: translateX(300%) skewX(-16deg); opacity: 1; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s, opacity 0.25s var(--ease) 0.08s; } .card__media img { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform: translate3d( calc(var(--tx, 0) * 5px), calc(-5px * var(--is-hover, 0) + var(--ty, 0) * 4px), calc(var(--is-hover, 0) * 22px) ) rotateY(calc(var(--tx, 0) * 8deg)) rotateX(calc(var(--ty, 0) * -6deg)) scale(calc(1 + var(--is-hover, 0) * 0.035)); transform-origin: center 62%; transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s var(--ease); will-change: transform; } .card:hover .card__media img { filter: drop-shadow(0 22px 18px rgba(167, 96, 74, 0.22)); } .card__idx, .card__tag { z-index: 3; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .card:hover .card__idx { transform: translateY(-2px); } .card:hover .card__tag { transform: translateY(-2px); } .card h3 { position: relative; } .card h3::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: linear-gradient(90deg, var(--accent) 0%, rgba(216, 175, 122, 0.9) 100%); transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .card:hover h3::after { width: 38px; } .card__price { transition: color 0.4s var(--ease); } .card:hover .card__price { color: var(--accent); } .card__idx { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(17, 17, 17, 0.82); backdrop-filter: blur(10px); color: #fff; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; pointer-events: none; } .card__tag { position: absolute; top: 14px; right: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(17, 17, 17, 0.82); backdrop-filter: blur(10px); color: #fff; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; pointer-events: none; } .card__meta { padding: 22px 22px 22px; background: #fff; display: flex; flex-direction: column; gap: 8px; } /* Small-caps eyebrow — family + concentration/size on one line. segment carries a slightly lower opacity + normal weight to read as secondary metadata. */ .card__family { font-family: var(--font-geist-sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(17, 17, 17, 0.62); margin: 0; line-height: 1.4; } .card__family b { font-weight: 600; color: rgba(17, 17, 17, 0.38); letter-spacing: 0.22em; } .card__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 2px; } .card h3 { font-family: var(--font-geist-sans); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.018em; line-height: 1.18; color: var(--ink); /* Reserve two lines so cards keep uniform heights when longer product names (e.g. "Shaghaf Amber Infusion") wrap in narrow slots. */ min-height: calc(1.18em * 2); /* Grow to take remaining row space so long names wrap gracefully instead of overflowing next to the price. min-width:0 avoids the flex item's implicit min-content floor that prevents wrapping. */ flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; overflow-wrap: anywhere; } .card__price { font-family: var(--font-geist-sans); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .card__notes { font-family: var(--font-geist-sans); font-size: 0.82rem; font-weight: 500; line-height: 1.55; color: rgba(17, 17, 17, 0.62); margin: 4px 0 4px; /* Clamp to 2 lines so cards keep uniform heights when note lengths differ. min-height reserves the vertical space up-front — avoids grid jitter. */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.55em * 2); transition: color 0.35s var(--ease); } .card:hover .card__notes { color: rgba(17, 17, 17, 0.88); } /* Footer row — hairline divider, CTA on the left, secondary link on the right. */ .card__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(17, 17, 17, 0.08); } .card__add { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1 1 auto; min-height: 42px; padding: 0 6px 0 18px; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--font-geist-sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); } .card__add .arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.8rem; transition: background 0.35s var(--ease), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .card__add:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .card__add:hover .arrow { background: var(--accent); transform: translate(3px, -3px) rotate(-4deg); } .card__add:active .arrow { transform: translate(1px, -1px) scale(0.94); } /* "Details" secondary text link — sits at the right edge of the footer. Hairline underline draws through the whole word (right-anchored) at rest, then re-anchors left on hover to flip direction. */ .card__more { position: relative; flex: 0 0 auto; padding: 4px 2px; font-family: var(--font-geist-sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(17, 17, 17, 0.55); transition: color 0.3s var(--ease); } .card__more::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: rgba(17, 17, 17, 0.2); transform-origin: right; transition: background 0.3s, transform 0.4s var(--ease); } .card__more:hover { color: var(--ink); } .card__more:hover::after { background: var(--ink); transform: scaleX(1.06); transform-origin: left; } /* -- .card__go (rounded arrow) -------------------------------------- Compact circle CTA that sits at the right end of .card__foot next to .card__notes. Provides a clear "view this product" affordance without competing with the card's other links (media / h3 anchor). Uses the same ↗ arrow language and diagonal-translate hover as other CTAs on the site (.picks__cta, .fam__go, .card__add .arrow). */ .card__foot .card__notes { /* Inside the foot row, notes shares horizontal space with .card__go. flex + min-width:0 lets webkit-box line-clamp shrink correctly; margin reset removes the vertical rhythm meant for block context. */ flex: 1 1 auto; min-width: 0; margin: 0; } .card__go { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; text-decoration: none; font-size: 0.95rem; line-height: 1; transition: background 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .card__go span { display: inline-block; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .card__go:hover { background: var(--accent); transform: scale(1.06); box-shadow: 0 8px 22px -12px rgba(17, 17, 17, 0.4); } .card__go:hover span { transform: translate(3px, -3px); } .card__go:active { transform: scale(0.97); } .card__go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ========================================================== Marquee — bold running band under hero ========================================================== */ .mrq { overflow: hidden; padding: clamp(28px, 5vh, 56px) 0; background: #fff; border-top: 1px solid rgba(17, 17, 17, 0.06); border-bottom: 1px solid rgba(17, 17, 17, 0.06); } .mrq__row { display: flex; width: 100%; } .mrq__track { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(28px, 4vw, 60px); padding-right: clamp(28px, 4vw, 60px); white-space: nowrap; will-change: transform; transform: translate3d(0, 0, 0); } .mrq__item { display: inline-flex; align-items: center; flex: 0 0 auto; } .mrq__word { font-family: var(--font-geist-sans); font-size: clamp(3rem, 8vw, 7.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 0.9; text-transform: uppercase; color: var(--ink); } .mrq__ic { display: inline-grid; place-items: center; width: clamp(58px, 6vw, 96px); height: clamp(58px, 6vw, 96px); border-radius: 50%; background: var(--accent); color: #fff; font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 400; line-height: 1; transform: rotate(-2deg); } .mrq__img { overflow: hidden; width: clamp(120px, 12vw, 200px); height: clamp(80px, 8vh, 130px); border-radius: 999px; background: #f5f1ea; border: 1px solid rgba(17, 17, 17, 0.06); } .mrq__img img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (prefers-reduced-motion: reduce) { .mrq__track { transform: none !important; } } /* ========================================================== Fragrance Families — bento showcase of scent categories ========================================================== */ .families { padding: clamp(90px, 11vw, 140px) var(--pad) clamp(80px, 10vw, 120px); background: #f9f6f0; color: var(--ink); } .families__head { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: end; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } /* Section title — matches the marquee (.pbanner__title) and cinema title system: Geist sans-serif at 700, non-italic, accent color for emphasis (no serif switch). */ .families__title h2 { font-family: var(--font-geist-sans); font-size: clamp(2.2rem, 4.2vw, 3.6rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; color: var(--ink); } .families__title h2 em { font-family: inherit; font-style: normal; font-weight: 700; color: var(--accent); letter-spacing: inherit; } .families__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .families__intro { color: var(--muted); max-width: 44ch; font-size: 1rem; line-height: 1.6; } .families__all { display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 22px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); transition: 0.3s var(--ease); } .families__all .arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; transition: 0.3s var(--ease); } .families__all:hover { background: var(--ink); color: #fff; } .families__all:hover .arrow { background: var(--accent); transform: translate(2px, -2px); } .families__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; } .fam { position: relative; display: flex; flex-direction: column; gap: 18px; min-height: 360px; padding: 26px 26px 26px; border-radius: 24px; overflow: hidden; isolation: isolate; color: var(--ink); text-decoration: none; cursor: pointer; transition: transform 0.7s var(--ease), box-shadow 0.6s var(--ease); } .fam:focus-visible { outline: 2px solid rgba(167, 96, 74, 0.55); outline-offset: 4px; } .fam::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--fam-bg); transition: transform 1.2s var(--ease); } .fam::after { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(80% 60% at 0% 100%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 60%); opacity: 0.95; pointer-events: none; } .fam:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.25); } .fam:hover::before { transform: scale(1.06); } .fam--floral { --fam-bg: linear-gradient(155deg, #fce4dc 0%, #f2c1b1 55%, #d99785 100%); color: #4a2018; } .fam--woody { --fam-bg: linear-gradient(155deg, #e8d5b8 0%, #b98d5c 55%, #6b4a2a 100%); color: #2f1e10; } .fam--oriental { --fam-bg: linear-gradient(155deg, #efd39b 0%, #c67338 45%, #5a1218 100%); color: #2a0808; } .fam--fresh { --fam-bg: linear-gradient(155deg, #e5ede0 0%, #b8d3c2 55%, #7ba692 100%); color: #17332a; } .fam--musk { --fam-bg: linear-gradient(155deg, #f3e6d0 0%, #d6bd97 55%, #967651 100%); color: #2f2213; } .fam--smoke { --fam-bg: linear-gradient(155deg, #d6d0c6 0%, #6f685f 55%, #1b1815 100%); color: #f3ede2; } .fam__idx { position: relative; z-index: 2; align-self: flex-start; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.28em; padding: 6px 12px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; opacity: 0.78; text-transform: uppercase; transition: opacity 0.4s var(--ease); } .fam__product { position: absolute; top: 18px; right: 18px; width: 42%; height: calc(100% - 36px); padding: 0; background: transparent; border-radius: 0; object-fit: contain; object-position: center; z-index: 2; opacity: 0; transform: translateX(24px); transition: opacity 0.55s var(--ease), transform 0.75s var(--ease); pointer-events: none; /* Product PNGs ship with a white studio background baked into the pixels (no alpha channel). `multiply` blends every white pixel into whatever gradient sits behind it, effectively knocking the white out while the bottle's darker colored pixels (cap, label, liquid) stay fully visible. No `filter: drop-shadow` here — because these PNGs have no alpha, drop-shadow casts off the full rectangular image bounds and reads as a visible rounded-rectangle frame behind the bottle. If we ever need to re-ground the bottle on lighter gradients (Floral, Fresh), do it with a radial-gradient bloom on the .fam card background, not with a filter on the img. */ mix-blend-mode: multiply; } /* Smoke card previously used `mix-blend-mode: luminosity` to keep the older red smoke.png visible on the charcoal gradient. After swapping in heat.png (matching card 3 / Oriental), luminosity rendered the PNG's baked-in white studio background as a visible light plate behind the bottle. Removing the override lets Smoke inherit the default `multiply` blend so the presentation matches card 3 exactly — no light plate. The bottle reads as a darker silhouette against the charcoal, which is the intended visual now that both cards share the same product image. */ .fam:hover .fam__product { opacity: 1; transform: translateX(0); } .fam__mono { position: absolute; top: 22px; right: 22px; width: clamp(72px, 6vw, 96px); height: clamp(72px, 6vw, 96px); z-index: 1; opacity: 0.5; transition: opacity 0.4s var(--ease), transform 0.7s var(--ease); } .fam__mono svg { width: 100%; height: 100%; color: currentColor; } .fam:hover .fam__mono { opacity: 0; transform: scale(0.7); } .fam__body { position: relative; z-index: 2; margin-top: auto; display: flex; flex-direction: column; gap: 6px; max-width: 58%; } /* Card name — matches .pcard__row h3 typography (Geist sans, bold, tight tracking). No italic, no serif, no thin weights — same visual system as the marquee cards. */ .fam__body h3 { font-family: var(--font-geist-sans); font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; color: inherit; } .fam__notes { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: inherit; opacity: 0.7; margin-top: 6px; } .fam__desc { font-size: 0.86rem; line-height: 1.5; color: inherit; opacity: 0.78; max-width: 28ch; margin-top: 6px; } .fam__go { position: relative; z-index: 3; align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 0; color: inherit; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; } .fam__go span { opacity: 0.5; transform: translateX(-6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .fam__go b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: currentColor; font-size: 0.98rem; font-style: normal; line-height: 1; transition: transform 0.4s var(--ease), background 0.4s var(--ease); } .fam--floral .fam__go b { color: #fce4dc; } .fam--woody .fam__go b { color: #e8d5b8; } .fam--oriental .fam__go b { color: #efd39b; } .fam--fresh .fam__go b { color: #e5ede0; } .fam--musk .fam__go b { color: #f3e6d0; } .fam--smoke .fam__go b { color: #1b1815; } .fam:hover .fam__go span { opacity: 1; transform: translateX(0); } .fam:hover .fam__go b { transform: rotate(-8deg) translate(3px, -3px); } @media (max-width: 1100px) { .families__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 980px) { .families__head { grid-template-columns: 1fr; align-items: start; gap: 24px; } } @media (max-width: 640px) { .families__grid { grid-template-columns: 1fr; } .fam { min-height: 340px; } .fam__body { max-width: 60%; } .fam__product { opacity: 1; transform: none; width: 38%; } .fam__mono { opacity: 0; } .fam__go span { opacity: 1; transform: none; } } @media (hover: none) { .fam__product { opacity: 1; transform: none; } .fam__mono { opacity: 0; } .fam__go span { opacity: 1; transform: none; } } /* ========================================================== Horizontal Editorial Gallery — scroll-driven, sticky pin Palette: Obsidian / Deep Burgundy / Champagne Gold / Ivory ========================================================== */ .hgallery { --obsidian: #171310; --burgundy: #5a171d; --gold: #c6a56b; --ivory: #f5f0e8; --ivory-warm: #ede4d3; --hg-ease: cubic-bezier(0.76, 0, 0.24, 1); position: relative; min-height: 100vh; background: var(--ivory); color: var(--obsidian); font-family: var(--font-benton-sans-wide); } .hgallery__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; } .hgallery__grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; background: radial-gradient(1200px 600px at 12% 20%, rgba(198, 165, 107, 0.22) 0%, rgba(245, 240, 232, 0) 55%), radial-gradient(1000px 500px at 90% 80%, rgba(90, 23, 29, 0.14) 0%, rgba(245, 240, 232, 0) 55%); } .hgallery__sticky::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: min(40vw, 560px); z-index: 2; background: linear-gradient( 90deg, var(--ivory) 0%, var(--ivory) 55%, rgba(245, 240, 232, 0) 100% ); pointer-events: none; } .hgallery__head { position: absolute; top: 0; left: 0; z-index: 3; width: min(30vw, 460px); height: 100%; padding: clamp(90px, 12vh, 140px) clamp(28px, 4vw, 60px) clamp(50px, 7vh, 80px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; pointer-events: none; } .hgallery__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--burgundy); } .hgallery__eyebrow span { width: 26px; height: 1px; background: var(--gold); } /* Section title — matches the marquee (.pbanner__title) typography system: Geist sans at 700, non-italic. Burgundy accent color preserved for section palette identity. */ .hgallery__title { font-family: var(--font-geist-sans); font-size: clamp(2.4rem, 4.6vw, 4.4rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; color: var(--obsidian); margin: 22px 0 20px; } .hgallery__title em { font-family: inherit; font-style: normal; font-weight: 700; color: var(--accent); letter-spacing: inherit; } .hgallery__lede { max-width: 30ch; font-size: 0.95rem; line-height: 1.55; color: rgba(23, 19, 16, 0.62); } .hgallery__meter { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-geist-sans); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.06em; color: var(--obsidian); margin-top: auto; pointer-events: auto; } .hgallery__meter b { font-weight: 600; color: var(--obsidian); min-width: 1.6em; display: inline-block; } .hgallery__meter .hgallery__total { color: rgba(23, 19, 16, 0.4); } .hgallery__meter-bar { position: relative; flex: 1; min-width: 90px; height: 1px; background: rgba(23, 19, 16, 0.16); overflow: hidden; } .hgallery__meter-bar i { display: block; width: 0; height: 100%; background: var(--obsidian); transition: width 0.18s linear; } .hgallery__hint { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(23, 19, 16, 0.48); } .hgallery__hint-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(198, 165, 107, 0.18); animation: hgPulse 2.4s ease-in-out infinite; } @keyframes hgPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.6; } } .hgallery__track { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); height: 100%; padding: 0 clamp(60px, 8vw, 140px) 0 min(32vw, 480px); will-change: transform; transform: translate3d(0, 0, 0); } .hgallery__item { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: 22px; } .hgallery__item { width: clamp(320px, 32vw, 460px); } .hgallery__link { position: absolute; inset: 0; z-index: 4; border-radius: 22px; text-indent: -9999px; overflow: hidden; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow 0.4s var(--hg-ease); } .hgallery__link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ivory-warm), 0 0 0 4px var(--gold); } .hgallery__frame { position: relative; width: 100%; aspect-ratio: 3 / 4; height: clamp(440px, 66vh, 620px); overflow: hidden; border-radius: 22px; background: var(--ivory-warm); box-shadow: 0 24px 60px -20px rgba(23, 19, 16, 0.28); } .hgallery__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); opacity: 0.6; filter: blur(6px); transition: transform 1.2s var(--hg-ease), opacity 0.9s var(--hg-ease), filter 0.9s var(--hg-ease); } .hgallery__item.is-in .hgallery__frame img { transform: scale(1); opacity: 1; filter: blur(0); } .hgallery__item:hover .hgallery__frame img { transform: scale(1.035); } .hgallery__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 19, 16, 0) 55%, rgba(23, 19, 16, 0.35) 100%); opacity: 0; pointer-events: none; transition: opacity 0.5s var(--hg-ease); } .hgallery__item:hover .hgallery__frame::after { opacity: 1; } .hgallery__discover { position: absolute; left: 22px; bottom: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(245, 240, 232, 0.94); color: var(--obsidian); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--hg-ease), transform 0.5s var(--hg-ease); pointer-events: none; } .hgallery__discover::after { content: "↗"; color: var(--burgundy); font-weight: 500; } .hgallery__item:hover .hgallery__discover { opacity: 1; transform: none; } .hgallery__item figcaption { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--hg-ease) 0.15s, transform 0.8s var(--hg-ease) 0.15s; } .hgallery__item.is-in figcaption { opacity: 1; transform: none; } .hgallery__cap-i { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); } /* Card label — matches .pcard__row h3 / .fam__body h3: Geist sans, bold, tight tracking. */ .hgallery__item figcaption b { font-family: var(--font-geist-sans); font-size: clamp(1.3rem, 1.7vw, 1.7rem); font-weight: 700; letter-spacing: -0.025em; color: var(--obsidian); line-height: 1.1; } .hgallery__item figcaption em { font-style: normal; font-size: 0.82rem; color: rgba(23, 19, 16, 0.58); line-height: 1.4; max-width: 34ch; } @media (max-width: 1100px) { .hgallery__head { width: min(34vw, 420px); } .hgallery__track { padding-left: min(36vw, 460px); } } @media (max-width: 900px) { .hgallery { height: auto !important; } .hgallery__sticky { position: relative; height: auto; padding: 80px 0 60px; } .hgallery__head { position: relative; width: 100%; height: auto; padding: 0 var(--pad) 40px; } .hgallery__meter { max-width: 320px; } .hgallery__track { height: auto; padding: 20px var(--pad) 40px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; transform: none !important; scrollbar-width: none; } .hgallery__track::-webkit-scrollbar { display: none; } .hgallery__item { scroll-snap-align: start; width: 78vw; } .hgallery__frame { height: 58vh; } .hgallery__frame img { opacity: 1; filter: none; transform: none; } .hgallery__item figcaption { opacity: 1; transform: none; } } /* Kill the desktop left-side ivory fade on small phones. On desktop this ::after gradient sits behind the sticky title so cards blend in from the left. Below 900 px the title stacks above the track (see rule above), so the fade has nothing to anchor and simply paints a 40 vw ivory bar over the first card's caption — visible in QA on ≤ 500 px devices. */ @media (max-width: 500px) { .hgallery__sticky::after { display: none; } } @media (prefers-reduced-motion: reduce) { .hgallery__track { transition: none !important; } .hgallery__frame img { opacity: 1; filter: none; transform: none; transition: none; } .hgallery__item figcaption { opacity: 1; transform: none; transition: none; } } /* ============================================================== MANIFESTO — glowing editorial statement w/ scroll-fill type ============================================================== */ .manifesto { --fill: 0; --fill-pct: calc(var(--fill) * 100%); --ink-base: rgba(20, 16, 14, 0.13); --accent-base: rgba(167, 96, 74, 0.22); position: relative; padding: clamp(120px, 16vw, 220px) var(--pad); background: #ffffff; color: var(--ink); overflow: hidden; text-align: center; isolation: isolate; } .manifesto__glow { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); width: min(80vw, 1000px); height: min(60vw, 700px); border-radius: 50%; background: radial-gradient( 50% 50% at 50% 50%, rgba(230, 118, 58, 0.62) 0%, rgba(232, 160, 100, 0.38) 22%, rgba(255, 200, 140, 0.18) 46%, rgba(255, 220, 180, 0.08) 60%, transparent 74% ); filter: blur(55px); pointer-events: none; z-index: 0; animation: manifestoGlow 9s ease-in-out infinite alternate; } @keyframes manifestoGlow { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.94; } 100% { transform: translate(-48%, -47%) scale(1.05); opacity: 1; } } .manifesto__arc { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(20, 16, 14, 0.055); pointer-events: none; z-index: 1; } .manifesto__arc--outer { top: 6%; width: min(74vw, 940px); height: min(74vw, 940px); } .manifesto__arc--inner { top: 12%; width: min(58vw, 740px); height: min(58vw, 740px); border-color: rgba(20, 16, 14, 0.045); } .manifesto__grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(20, 16, 14, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 16, 14, 0.025) 1px, transparent 1px); background-size: 88px 88px; mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 82%); -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 82%); pointer-events: none; } .manifesto__ing { position: absolute; z-index: 1; pointer-events: none; opacity: 0.95; /* Warm red-tinted shadow anchors the red rose bloom without turning muddy; bottle SVG in the opposite corner still reads correctly against it. */ filter: drop-shadow(0 22px 26px rgba(120, 20, 30, 0.22)); will-change: transform; } .manifesto__ing--tr { top: clamp(40px, 6vw, 90px); right: clamp(20px, 4vw, 80px); width: clamp(120px, 14vw, 220px); --rot: 16deg; transform: rotate(var(--rot)); animation: mfIngFloatTR 9s ease-in-out infinite; } .manifesto__ing--bl { bottom: clamp(40px, 6vw, 90px); left: clamp(20px, 4vw, 80px); width: clamp(140px, 15vw, 240px); --rot: -8deg; transform: rotate(var(--rot)); animation: mfIngFloatBL 11s ease-in-out infinite -2s; } @keyframes mfIngFloatTR { 0%, 100% { transform: rotate(16deg) translateY(0); } 50% { transform: rotate(19deg) translateY(-12px); } } @keyframes mfIngFloatBL { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-11deg) translateY(-10px); } } .manifesto__inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.2vw, 30px); } .manifesto__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-geist-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(20, 16, 14, 0.6); } .manifesto__eyebrow i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(167, 96, 74, 0.14); } .manifesto__title { font-family: var(--font-geist-sans); font-style: normal; /* Benton Sans Wide reads visually larger than a normal-width sans at the same em-size, so this clamp is intentionally smaller than a Geist-tuned equivalent. Keeps "From Notes to Second Skin" comfortable across 320–2560px. */ font-size: clamp(2.4rem, 7.5vw, 6.4rem); font-weight: 500; letter-spacing: -0.035em; line-height: 0.92; max-width: 20ch; margin: 0; color: var(--ink-base); -webkit-text-fill-color: transparent; background-image: linear-gradient( to bottom, var(--ink) 0%, var(--ink) var(--fill-pct), var(--ink-base) var(--fill-pct), var(--ink-base) 100% ); -webkit-background-clip: text; background-clip: text; will-change: background-image; } .manifesto__title br { display: inline; } .manifesto__mark { position: relative; padding: 0 0.02em; font-family: inherit; font-style: normal; font-weight: 700; display: inline-block; color: var(--accent-base); -webkit-text-fill-color: transparent; background-image: linear-gradient( to bottom, var(--accent) 0%, var(--accent) var(--fill-pct), var(--accent-base) var(--fill-pct), var(--accent-base) 100% ); -webkit-background-clip: text; background-clip: text; z-index: 0; } .manifesto__mark::after { content: none; } @supports not (-webkit-background-clip: text) { .manifesto__title { color: var(--ink); -webkit-text-fill-color: currentColor; } .manifesto__mark { color: var(--accent); -webkit-text-fill-color: currentColor; } } .manifesto__lede { font-family: var(--font-geist-sans); font-size: clamp(0.95rem, 1.35vw, 1.15rem); line-height: 1.65; color: rgba(20, 16, 14, 0.9); max-width: 52ch; margin: 4px 0 0; } .manifesto__soft { color: rgba(20, 16, 14, 0.42); } .manifesto__meta { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; font-family: var(--font-geist-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(20, 16, 14, 0.5); } .manifesto__dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: rgba(20, 16, 14, 0.35); } @media (max-width: 900px) { .manifesto { padding: clamp(90px, 14vw, 140px) var(--pad); } .manifesto__title { font-size: clamp(2rem, 9vw, 4rem); } .manifesto__ing--tr { width: clamp(90px, 22vw, 140px); top: 24px; right: 14px; } .manifesto__ing--bl { width: clamp(100px, 26vw, 160px); bottom: 24px; left: 14px; } } @media (max-width: 720px) { .manifesto__arc, .manifesto__grid { display: none; } .manifesto__glow { width: 110vw; height: 70vw; filter: blur(40px); } .manifesto__ing { opacity: 0.7; } } @media (max-width: 480px) { .manifesto__ing { opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { .manifesto { --fill: 1; } .manifesto__glow { animation: none; } } /* ============================================================== TOP PICKS — split editorial: featured bestseller + chart ============================================================== */ .picks { --picks-ink: #14100e; --picks-warm: #f5f0e8; --picks-gold: #c6a56b; --picks-burgundy: #4a151a; position: relative; padding: 0; background: var(--picks-warm); color: var(--picks-ink); overflow: hidden; } .picks__inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } /* ---------- Left: editorial featured product (light) ---------- */ .picks__left { position: relative; isolation: isolate; padding: clamp(24px, 2.8vw, 40px) clamp(28px, 3.6vw, 52px); background: #ffffff; color: var(--picks-ink); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(12px, 1.4vw, 18px); overflow: hidden; min-height: clamp(340px, 44vh, 440px); border-right: 1px solid rgba(20, 16, 14, 0.06); perspective: 1000px; } .picks__grain { display: none; } .picks__glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(55% 35% at 50% 40%, rgba(198, 165, 107, 0.10) 0%, transparent 72%), radial-gradient(80% 60% at 100% 0%, rgba(74, 21, 26, 0.03) 0%, transparent 60%); pointer-events: none; } .picks__topline { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .picks__eyebrow { font-family: var(--font-geist-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(20, 16, 14, 0.62); } .picks__stock { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-geist-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(20, 16, 14, 0.62); } .picks__stock i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #4a9d5a; box-shadow: 0 0 0 3px rgba(74, 157, 90, 0.16); } .picks__feature { position: relative; z-index: 2; display: grid; place-items: center; flex: 1; min-height: 130px; transform-style: preserve-3d; } .picks__ring { position: absolute; width: clamp(170px, 20vw, 280px); height: clamp(170px, 20vw, 280px); border: 1px solid rgba(20, 16, 14, 0.12); border-radius: 50%; transform: translate3d(calc(var(--tx, 0) * -10px), calc(var(--ty, 0) * -10px), 0); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .picks__ring::before, .picks__ring::after { content: ""; position: absolute; inset: 20px; border: 1px dashed rgba(20, 16, 14, 0.08); border-radius: 50%; } .picks__ring::after { inset: 44px; border-style: solid; opacity: 0.8; } @keyframes picksRing { to { transform: rotate(360deg); } } .picks__hero { position: relative; z-index: 2; width: clamp(150px, 18vw, 230px); height: auto; object-fit: contain; filter: none; transform: rotateY(calc(var(--tx, 0) * 22deg)) rotateX(calc(var(--ty, 0) * -18deg)) translate3d(calc(var(--tx, 0) * 16px), calc(var(--ty, 0) * 16px), 40px); transform-origin: center center; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .picks__watermark { position: absolute; z-index: 1; bottom: -4%; left: 50%; transform: translateX(calc(-50% + var(--tx, 0) * 14px)) translateY(calc(var(--ty, 0) * 8px)); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--font-benton-sans-wide); font-style: normal; font-size: clamp(3.4rem, 6vw, 5.6rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.85; color: transparent; -webkit-text-stroke: 1px rgba(20, 16, 14, 0.06); text-transform: uppercase; white-space: nowrap; pointer-events: none; user-select: none; will-change: transform; } .picks__meta { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; } .picks__name { font-family: var(--font-benton-sans-wide); font-style: normal; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 400; letter-spacing: -0.02em; line-height: 0.95; color: var(--picks-ink); } .picks__notes { font-family: var(--font-geist-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--picks-burgundy); } .picks__blurb { font-family: var(--font-geist-sans); font-size: 0.95rem; line-height: 1.6; color: rgba(20, 16, 14, 0.72); max-width: 44ch; } .picks__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(20, 16, 14, 0.1); padding-top: 22px; margin-top: 10px; flex-wrap: wrap; } .picks__pricebox { display: flex; flex-direction: column; gap: 2px; } .picks__priceval { font-family: var(--font-benton-sans-wide); font-style: normal; font-size: clamp(1.7rem, 2.5vw, 2.2rem); color: var(--picks-ink); line-height: 1; } .picks__priceunit { font-family: var(--font-geist-sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(20, 16, 14, 0.5); } .picks__cta { display: inline-flex; align-items: center; gap: 12px; padding: 4px 4px 4px 22px; border-radius: 999px; background: var(--picks-ink); color: #ffffff; font-family: var(--font-geist-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; transition: transform 0.4s var(--ease), background 0.4s var(--ease); } .picks__cta b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #ffffff; color: var(--picks-ink); font-style: normal; font-size: 0.9rem; transition: transform 0.4s var(--ease); } .picks__cta:hover { transform: translateY(-2px); } .picks__cta:hover b { transform: rotate(-8deg) translate(2px, -2px); } /* ---------- Right: chart list ---------- */ .picks__right { position: relative; padding: clamp(24px, 2.8vw, 40px) clamp(28px, 3.6vw, 52px); background: var(--picks-warm); color: var(--picks-ink); display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); min-height: clamp(340px, 44vh, 440px); } .picks__head { display: flex; flex-direction: column; gap: 18px; } .picks__label { font-family: var(--font-geist-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(20, 16, 14, 0.6); } /* Section title — matches the marquee (.pbanner__title) typography system: Geist sans at 700. Burgundy accent color on the emphasis for section-palette identity. */ .picks__title { font-family: var(--font-geist-sans); font-style: normal; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; color: var(--picks-ink); } .picks__title em { font-family: inherit; font-style: normal; font-weight: 700; color: var(--picks-burgundy); letter-spacing: inherit; } .picks__lede { font-family: var(--font-geist-sans); font-size: 1rem; line-height: 1.6; color: rgba(20, 16, 14, 0.72); max-width: 44ch; } .picks__list { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; } .pick { position: relative; border-top: 1px solid rgba(20, 16, 14, 0.14); } .pick:last-child { border-bottom: 1px solid rgba(20, 16, 14, 0.14); } .pick::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--picks-burgundy); transition: width 0.6s var(--ease); pointer-events: none; } .pick:hover::after { width: 100%; } /* Real anchor wrapping row content. Owns the row grid layout so children (rank / info / price+arrow) fill columns while the anchor provides link semantics (right-click, middle-click, keyboard focus). Thumbnails were removed — their visual weight moved to a floating cursor-follow image (.picks__cursor) so each row reads as clean chart data. */ .pick__link { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 18px; padding: 18px 0; color: inherit; text-decoration: none; transition: padding 0.5s var(--ease); } .pick__link:hover { padding-left: 14px; } /* Keyboard-focus visual — compensates for the anchor having no visible box. Scoped to :focus-visible so mouse users don't see it. */ .pick:has(.pick__link:focus-visible) { outline: 2px solid var(--picks-burgundy); outline-offset: 4px; border-radius: 4px; } /* Chart rank number — Geist sans bold with tabular numerals so 01–04 align like real chart data. Higher opacity than before (0.5 → readable authority). */ .pick__rank { font-family: var(--font-geist-sans); font-style: normal; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; color: rgba(20, 16, 14, 0.5); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: color 0.4s var(--ease), transform 0.5s var(--ease); } .pick:hover .pick__rank { color: var(--picks-burgundy); transform: translateX(-2px); } .pick__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } /* Product name — matches .pcard__row h3 / .fam__body h3: Geist sans, bold, tight tracking. */ .pick__info h4 { font-family: var(--font-geist-sans); font-style: normal; font-size: clamp(1.1rem, 1.4vw, 1.35rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--picks-ink); } .pick__info p { font-family: var(--font-geist-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(20, 16, 14, 0.6); } .pick__right { display: flex; align-items: center; gap: 18px; } /* Price — Geist sans bold with tabular numerals so prices align down the column. */ .pick__price { font-family: var(--font-geist-sans); font-style: normal; font-size: 1rem; font-weight: 700; color: var(--picks-ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .pick__go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(20, 16, 14, 0.2); color: var(--picks-ink); font-size: 0.85rem; transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.5s var(--ease), border-color 0.4s var(--ease); } .pick:hover .pick__go { background: var(--picks-ink); color: var(--picks-warm); border-color: var(--picks-ink); transform: rotate(-8deg) translate(1px, -1px); } /* ------------------------------------------------------------------ Floating cursor-follow image reveal. Position (--x, --y) and tilt (--r) are written by JS every RAF frame. CSS owns the visual transform so paint stays on the compositor thread. Landscape aspect + no plate/shadow — bottle floats "naked" on the section background, following the cursor. */ .picks__cursor { position: absolute; top: 0; left: 0; z-index: 4; width: clamp(240px, 22vw, 320px); aspect-ratio: 4 / 3; pointer-events: none; opacity: 0; transform: translate3d(var(--x, 0px), var(--y, 0px), 0) translate(-50%, -50%) rotate(var(--r, 0deg)); transition: opacity 0.35s var(--ease); will-change: transform, opacity; } .picks__cursor.is-on { opacity: 1; } .picks__cursor img { width: 100%; height: 100%; object-fit: contain; transition: opacity 0.35s var(--ease); } .picks__cursor img.is-swapping { opacity: 0; } /* Reduced-motion contract: image still appears on hover for context but skips the physics-driven follow — matches accessibility expectations. */ @media (prefers-reduced-motion: reduce) { .picks__cursor { transition: opacity 0.2s linear; } .picks__cursor img { transition: opacity 0.2s linear; } } .picks__all { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; padding: 4px 4px 4px 20px; border-radius: 999px; border: 1px solid rgba(20, 16, 14, 0.2); background: transparent; color: var(--picks-ink); font-family: var(--font-geist-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; transition: background 0.4s var(--ease), color 0.4s var(--ease); } .picks__all b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--picks-ink); color: var(--picks-warm); font-style: normal; font-size: 0.88rem; transition: transform 0.4s var(--ease); } .picks__all:hover { background: var(--picks-ink); color: var(--picks-warm); } .picks__all:hover b { background: var(--picks-warm); color: var(--picks-ink); transform: rotate(-8deg) translate(2px, -2px); } @media (max-width: 900px) { .picks__inner { grid-template-columns: 1fr; } .picks__left, .picks__right { min-height: auto; padding: clamp(40px, 7vw, 64px) clamp(24px, 6vw, 44px); } .picks__left { border-right: none; border-bottom: 1px solid rgba(20, 16, 14, 0.08); } .picks__watermark { font-size: 5rem; } .pick__link { grid-template-columns: 40px 1fr auto; gap: 14px; padding: 16px 0; } .pick__right { gap: 12px; } .pick__go { display: none; } /* Floating cursor image is hidden on touch — no cursor to follow. */ .picks__cursor { display: none; } } @media (hover: none) { .picks__hero, .picks__ring, .picks__watermark { transform: none; transition: none; } .picks__watermark { transform: translateX(-50%); } .card__media img { transform: none; transition: filter 0.9s var(--ease); } } @media (max-width: 520px) { .picks__foot { flex-direction: column; align-items: flex-start; } .picks__cta { align-self: stretch; justify-content: space-between; } } /* ============================================================== CONTACT — "Let's talk" ============================================================== */ .talk-sec { position: relative; isolation: isolate; padding: clamp(80px, 10vw, 130px) var(--pad); background: var(--secondary); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 5vw, 72px); align-items: start; overflow: hidden; } .talk-sec::before { content: ""; position: absolute; top: -18%; left: -12%; width: 46vw; height: 46vw; background: radial-gradient(circle, rgba(167, 96, 74, 0.18) 0%, rgba(167, 96, 74, 0) 62%); filter: blur(50px); pointer-events: none; z-index: -1; animation: talkGlow 14s ease-in-out infinite; } @keyframes talkGlow { 50% { transform: translate(20px, -14px) scale(1.05); opacity: 0.85; } } .talk-sec__grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); z-index: -1; } /* editorial "SA" monogram watermark — sits behind the left column heading, same trick as .picks__watermark, uses site's Benton Sans Wide family */ .talk-sec__mark { position: absolute; top: clamp(48px, 8vw, 96px); left: clamp(24px, 5vw, 96px); font-family: var(--font-benton-sans-wide); font-size: clamp(9rem, 22vw, 20rem); font-weight: 400; line-height: 0.86; letter-spacing: -0.04em; color: var(--ink); opacity: 0.055; pointer-events: none; user-select: none; z-index: 0; white-space: nowrap; } .talk-sec__mark em { font-style: italic; color: var(--accent); opacity: 0.85; } .talk-sec__left { max-width: 540px; position: sticky; top: 100px; z-index: 1; } .talk-sec h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; } .talk-sec h2 em, .form h3 em { font-family: var(--font-benton-sans-wide); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -0.01em; font-size: 1.02em; text-transform: none; } .talk-sec__lede { color: var(--muted); max-width: 44ch; font-size: 1rem; line-height: 1.65; margin-top: 18px; } .talk-sec__list { margin: 30px 0 24px; padding: 22px 0; border-top: 1px solid rgba(17, 17, 17, 0.14); border-bottom: 1px solid rgba(17, 17, 17, 0.14); display: flex; flex-direction: column; gap: 14px; list-style: none; } .talk-sec__list li { display: flex; align-items: baseline; gap: 18px; font-size: 0.95rem; color: var(--ink); } .talk-sec__list li b { min-width: 32px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; color: var(--accent); } .talk-sec__trust { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(17, 17, 17, 0.08); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(17, 17, 17, 0.72); backdrop-filter: blur(6px); } .chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(167, 96, 74, 0.18); } .mail { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 22px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; transition: 0.3s var(--ease); } .mail .arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; transition: 0.3s var(--ease); } .mail:hover { background: var(--ink); color: #fff; } .mail:hover .arrow { background: var(--accent); } .talk-sec__meta { margin: 30px 0 0; padding-top: 22px; border-top: 1px dashed rgba(17, 17, 17, 0.22); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .talk-sec__meta > div { display: flex; flex-direction: column; gap: 4px; } .talk-sec__meta dt { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(17, 17, 17, 0.44); } .talk-sec__meta dd { margin: 0; font-size: 0.86rem; color: var(--ink); line-height: 1.4; } /* ============================================================== FORM CARD ============================================================== */ .form { position: relative; z-index: 1; padding: clamp(28px, 3.4vw, 42px); background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(17, 17, 17, 0.08); border-radius: 26px; backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .form::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(140deg, rgba(167, 96, 74, 0.3), transparent 42%, rgba(167, 96, 74, 0.14)); z-index: -1; opacity: 0; transition: opacity 0.45s var(--ease); } .form:focus-within::before { opacity: 1; } .form__head { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid rgba(17, 17, 17, 0.1); } .form__head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; } .form__idx { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(17, 17, 17, 0.5); } .form__idx i { font-style: normal; color: var(--accent); margin: 0 6px; } .form__badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px; border: 1px solid rgba(17, 17, 17, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.65); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(17, 17, 17, 0.7); } .form__badge i { width: 6px; height: 6px; border-radius: 50%; background: #2fa77a; box-shadow: 0 0 0 3px rgba(47, 167, 122, 0.22); animation: pulseDot 2.2s ease-in-out infinite; } @keyframes pulseDot { 50% { box-shadow: 0 0 0 5px rgba(47, 167, 122, 0.06); } } .form h3 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 0; } .form__hint { margin-top: 10px; font-size: 0.86rem; color: rgba(17, 17, 17, 0.55); line-height: 1.5; } .form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 22px; } /* Floating-label field component */ .field { position: relative; display: block; padding-top: 18px; } .field input { width: 100%; padding: 8px 0 12px; border: 0; border-bottom: 1px solid rgba(17, 17, 17, 0.24); background: transparent; font-size: 1rem; color: var(--ink); transition: border-color 0.3s; } .field input:focus { outline: none; border-bottom-color: transparent; } .field input::placeholder { color: transparent; } .field__label { position: absolute; top: 26px; left: 0; font-size: 1rem; color: rgba(17, 17, 17, 0.5); letter-spacing: 0; text-transform: none; transform-origin: left top; transition: transform 0.28s var(--ease), color 0.28s var(--ease), top 0.28s var(--ease), letter-spacing 0.28s var(--ease); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .field__label i { font-style: normal; font-size: 0.78rem; color: rgba(17, 17, 17, 0.34); margin-left: 4px; } .field input:not(:placeholder-shown) + .field__label, .field input:focus + .field__label { top: 0; transform: scale(0.72); color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; } .field__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; overflow: hidden; } .field__bar::before { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--ink)); transition: transform 0.45s var(--ease); } .field input:focus ~ .field__bar::before, .field input:not(:placeholder-shown) ~ .field__bar::before { transform: scaleX(1); } .field input:required:user-invalid ~ .field__bar::before { transform: scaleX(1); background: #b3452b; } .field--wide { grid-column: 1 / -1; margin-top: 22px; } .form__label { margin: 30px 0 14px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(17, 17, 17, 0.55); } .form .pills { justify-content: flex-start; margin-top: 0; } .form .pill { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; background: transparent; color: var(--ink); border: 1px solid rgba(17, 17, 17, 0.22); font-weight: 500; } .form .pill i { font-style: normal; font-size: 0.6rem; color: var(--accent); letter-spacing: 0.1em; } .form .pill.is-on, .form .pill:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .form .pill.is-on i, .form .pill:hover i { color: var(--accent); } .btn.btn--send { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 62px; margin-top: 30px; padding: 6px 6px 6px 26px; background: var(--ink); color: #fff; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2); transition: 0.3s var(--ease); } .btn.btn--send:hover { transform: translateY(-2px); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.26); } .btn.btn--send .btn__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 1rem; transition: 0.3s var(--ease); } .btn.btn--send:hover .btn__ic { background: var(--accent); color: #fff; transform: translate(3px, -3px); } .ok { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: rgba(47, 167, 122, 0.08); border: 1px solid rgba(47, 167, 122, 0.24); color: #1e6b52; font-size: 0.9rem; animation: okIn 0.5s var(--ease); } @keyframes okIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ok__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2fa77a; color: #fff; flex-shrink: 0; } .ok__ic svg { width: 14px; height: 14px; } .form__policy { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.72rem; color: rgba(17, 17, 17, 0.5); } .form__policy i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; flex-shrink: 0; } /* ============================================================== FOOTER — Minimal light editorial (reference-matched) Tokens used: --bg, --ink, --muted, --accent, --line, --ease, --pad ============================================================== */ .foot { position: relative; isolation: isolate; /* Horizontal edges match the nav bar so header and footer sit on the same rail. */ padding: clamp(48px, 6vw, 84px) var(--section-pad) 26px; background: var(--bg); color: var(--ink); border-top: 1px solid rgba(17, 17, 17, 0.08); } .foot__top { display: grid; grid-template-columns: minmax(280px, 1.15fr) 1fr 1fr; gap: clamp(32px, 5vw, 84px); padding-bottom: clamp(40px, 5vw, 64px); } .foot__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .foot__col--brand { gap: 22px; } /* brand lockup — logo + tagline */ .foot__logo { display: inline-block; padding: 0; background: none; border: 0; transition: transform 0.35s var(--ease); align-self: flex-start; } .foot__logo img { display: block; height: 38px; width: auto; object-fit: contain; } .foot__logo:hover { transform: translateY(-1px); } .foot__lede { margin: -6px 0 0; max-width: 340px; font-size: 0.86rem; line-height: 1.55; color: rgba(17, 17, 17, 0.62); } .foot__lede em { font-family: var(--font-benton-sans-wide); font-style: italic; font-weight: 400; color: var(--accent); font-size: 1.05em; letter-spacing: -0.005em; } /* editorial index tag beside nav headings */ .foot__hd-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; } .foot__col--nav .foot__hd-row .foot__hd { margin-bottom: 0; } .foot__idx { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; color: var(--accent); font-variant-numeric: tabular-nums; } .foot__hd { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0; line-height: 1.3; } .foot__hd--sm { font-size: 0.9rem; font-weight: 600; margin-bottom: 12px; } .foot__col--nav { gap: 10px; } .foot__col--nav .foot__hd { margin-bottom: 14px; } .foot__col--nav a { position: relative; color: var(--ink); font-size: 0.9rem; line-height: 1.5; width: fit-content; transition: color 0.25s var(--ease); } .foot__col--nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .foot__col--nav a:hover { color: var(--accent); } .foot__col--nav a:hover::after { transform: scaleX(1); } /* ---- newsletter ---- */ .foot__news { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; border: 1px solid rgba(17, 17, 17, 0.85); border-radius: 999px; background: var(--bg); transition: border-color 0.3s, box-shadow 0.3s; max-width: 380px; } .foot__news:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06); } .foot__news input { flex: 1; min-height: 38px; background: transparent; border: 0; color: var(--ink); font-size: 0.86rem; letter-spacing: 0; padding: 0 8px 0 0; min-width: 0; } .foot__news input:focus { outline: none; } .foot__news input::placeholder { color: rgba(17, 17, 17, 0.42); font-size: 0.85rem; } .foot__news button { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px 0 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.3s var(--ease), transform 0.3s var(--ease); } .foot__news button .arrow { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 0.78rem; transition: 0.3s var(--ease); } .foot__news button:hover { background: var(--accent); transform: translateY(-1px); } .foot__news button:hover .arrow { background: rgba(255, 255, 255, 0.24); transform: translate(2px, -2px); } /* ---- socials + cruelty-free badge (inline row) ---- */ .foot__badges { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .foot__social { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(17, 17, 17, 0.3); border-radius: 50%; color: var(--ink); transition: 0.25s var(--ease); } .foot__social svg { width: 14px; height: 14px; } .foot__social:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); } .foot__cf { display: inline-flex; align-items: center; gap: 8px; padding: 2px 12px 2px 4px; border-radius: 999px; } .foot__cf-ic { display: grid; place-items: center; width: 32px; height: 32px; color: var(--accent); } .foot__cf-ic svg { width: 26px; height: 26px; } .foot__cf-txt { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); line-height: 1.1; } /* ---- country select ---- */ .foot__region { margin-top: 4px; } .foot__select { position: relative; max-width: 380px; } .foot__select select { width: 100%; min-height: 44px; padding: 0 40px 0 18px; background: var(--bg); color: var(--ink); border: 1px solid rgba(17, 17, 17, 0.85); border-radius: 999px; font-family: var(--font-geist-sans); font-size: 0.88rem; font-weight: 500; letter-spacing: 0; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: border-color 0.3s, box-shadow 0.3s; } .foot__select select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06); } .foot__select-caret { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; pointer-events: none; color: var(--ink); } .foot__select-caret svg { width: 12px; height: 8px; } /* ---- centered serif wordmark with flanking hairlines + small-caps sub ---- */ .foot__wordmark { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(18px, 3vw, 40px); padding: clamp(28px, 3.4vw, 44px) 0 clamp(20px, 2.6vw, 32px); user-select: none; } .foot__wordmark-rule { height: 1px; background: linear-gradient(to right, rgba(17, 17, 17, 0), rgba(17, 17, 17, 0.18) 30%, rgba(17, 17, 17, 0.18) 70%, rgba(17, 17, 17, 0)); } .foot__wordmark-body { display: flex; flex-direction: column; align-items: center; gap: 10px; } /* Big centered footer wordmark — image mark (logo.avif). Sized to visually match the height of the previous text lockup; scales with viewport. */ .foot__wordmark-img { display: block; height: clamp(44px, 5.2vw, 72px); width: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; } .foot__wordmark-sub { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(17, 17, 17, 0.5); white-space: nowrap; } /* ---- fine legal bar ---- */ .foot__bot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; padding-top: 20px; border-top: 1px solid rgba(17, 17, 17, 0.06); font-size: 0.78rem; color: rgba(17, 17, 17, 0.6); } .foot__bot a { color: rgba(17, 17, 17, 0.72); transition: color 0.25s; } .foot__bot a:hover { color: var(--accent); } .foot__sep { color: rgba(17, 17, 17, 0.24); user-select: none; } .foot__copy { color: rgba(17, 17, 17, 0.56); } .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } .hero .reveal:nth-child(1) { transition-delay: 0.05s; } .hero .reveal:nth-child(2) { transition-delay: 0.16s; } .hero .reveal:nth-child(3) { transition-delay: 0.28s; } .veil { position: fixed; inset: 0; z-index: 50; background: rgba(17, 17, 17, 0.28); } .bag, .sheet { position: fixed; z-index: 60; background: var(--white); visibility: hidden; opacity: 0; transition: 0.4s var(--ease); } .bag { top: 0; right: 0; width: min(400px, 100%); height: 100%; display: flex; flex-direction: column; border-radius: 24px 0 0 24px; transform: translateX(18px); } .sheet { inset: 50% auto auto 50%; width: min(840px, calc(100% - 24px)); max-height: calc(100vh - 32px); overflow: auto; display: grid; grid-template-columns: 1fr 1fr; border-radius: 28px; transform: translate(-50%, -48%); } .bag.open, .sheet.open { visibility: visible; opacity: 1; } .bag.open { transform: none; } .sheet.open { transform: translate(-50%, -50%); } .bag header, .sheet__row, .line { display: flex; justify-content: space-between; align-items: center; } .bag header { padding: 24px; border-bottom: 1px solid var(--line); } .bag header h2, .sheet h2 { font-size: 1.6rem; } .bag__list { flex: 1; overflow: auto; padding: 8px 24px 24px; } .bag footer { padding: 20px 24px 24px; border-top: 1px solid var(--line); } .bag footer p { display: flex; justify-content: space-between; margin-bottom: 8px; } .line { gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); } .line img { width: 58px; height: 74px; border-radius: 10px; } .sheet img { min-height: 440px; } .sheet > div { padding: 32px; } .sheet__x { position: absolute; top: 18px; right: 18px; z-index: 2; } .empty { color: var(--muted); padding: 28px 0; } @media (max-width: 1180px) { .nav__mid, .talk { display: none; } .nav__burger { display: block; } } @media (max-width: 1100px) { .shop__rail { --card-w: clamp(240px, 34vw, 300px); } } @media (max-width: 900px) { .shop__rail { --card-w: clamp(220px, 62vw, 280px); } /* Center-snap on touch viewports: the active card sits with equal air on the left and right of the viewport rather than hugging the left edge. The formula reads --card-w dynamically, so it stays in sync with the narrower --card-w overrides at ≤640px / ≤560px / ≤480px without any per-breakpoint duplication. Vertical padding stays untouched (only padding-inline is overridden). */ .shop__rail { padding-inline: calc((100vw - var(--card-w)) / 2); scroll-padding-inline: calc((100vw - var(--card-w)) / 2); } .shop__rail > .card { scroll-snap-align: center; } } @media (max-width: 560px) { .shop__rail { --card-w: 78vw; } } @media (max-width: 980px) { .hero, .shop__head, .talk-sec, .form__grid, .sheet, .foot__top { grid-template-columns: 1fr; } .shop__head { align-items: start; gap: 24px; } .hero { padding-top: 100px; text-align: left; } .hero h1 { font-size: clamp(2.6rem, 10vw, 3.4rem); } .hero { padding: 120px var(--pad) 100px; } .talk-sec__left { position: static; top: auto; } .talk-sec__mark { top: clamp(24px, 6vw, 48px); left: clamp(12px, 4vw, 24px); font-size: clamp(7rem, 32vw, 14rem); opacity: 0.045; } /* footer collapses to a single column stack */ .foot__top { grid-template-columns: 1fr; gap: 44px; padding-bottom: 44px; } .foot__news, .foot__select { max-width: 100%; } } /* ============================================================== HERO — laptop tier (981–1280px) ------------------------------------------------------------ Desktop >1280px keeps the existing tuning (padding-bottom 88px, h1 clamp up to 4.5rem, btn--light 60px tall). On 1280px laptops two things need to happen so the hero doesn't feel oversized: 1) Bottom-align the left-column block with the .hero__sound "Play Sound" button. The sound button uses bottom: clamp(24px, 3vw, 40px); the hero's own padding-bottom is 88px on desktop — so on a laptop the "Scent that feels." block was sitting ~50px higher than the sound button. Mirror the exact same clamp on the hero's padding-bottom so both baselines resolve to the identical pixel at every viewport in this range. 2) Trim the type + button sizes ~15–20% so the hero doesn't read as if it were rendered on a 27" monitor. Tap targets still meet the 44px minimum. ============================================================== */ @media (min-width: 981px) and (max-width: 1280px) { .hero { padding: 96px var(--pad) clamp(24px, 3vw, 40px); } .hero h1 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 14px; } .hero__lede { font-size: 0.92rem; } .hero__cta { gap: 18px; margin-top: 20px; } .btn.btn--light { min-height: 52px; padding: 5px 5px 5px 22px; gap: 12px; font-size: 0.72rem; } .btn__ic { width: 40px; height: 40px; font-size: 0.9rem; } .ghost-link { height: 52px; font-size: 0.68rem; } } /* ============================================================== LOADER — laptop tier (981–1280px) ------------------------------------------------------------ Base loader sizing was tuned for 1440–1920px monitors: .loader__stage width caps at 190px (→ ~352px tall via aspect-ratio 140/260), .loader__num caps at 8.5rem (~136px), mid-row gap caps at 34px, grid padding caps at 48px. Total mid-column intrinsic height on a 1280px viewport ~750px, which is taller than a 720p laptop, so the "100%" counter was being clipped at the fold. Trim each piece proportionally so the loader fits comfortably inside 720px height. Everything scales through the same clamp() expressions, only with tighter caps — the fluid low-end still governs narrower laptops (say 1024px) so nothing snaps between viewports. ============================================================== */ @media (min-width: 981px) and (max-width: 1280px) { .loader__grid { padding: clamp(20px, 2.4vw, 32px); } .loader__brand img { height: 28px; } .loader__row--mid { gap: clamp(14px, 1.8vw, 22px); } .loader__stage { width: clamp(90px, 12vw, 140px); } .loader__status { font-size: 0.68rem; } .loader__num { font-size: clamp(3.5rem, 9vw, 6rem); } } /* ============================================================== FAMILIES — laptop tier (981–1280px) ------------------------------------------------------------ Layers cleanly over the existing column-count breakpoints: • >1280px → desktop (3-col, base sizes) • 1101–1280 → this tier + 3-col (rules in this block only) • 981–1100 → this tier + 2-col (existing 1100px rule wins) • ≤980 → head stacks (existing 980px rule) Everything here is padding + typography + card intrinsic height, orthogonal to grid column count — nothing here interferes with the responsive column cascade already in place. ============================================================== */ @media (min-width: 981px) and (max-width: 1280px) { .families { padding: clamp(64px, 8vw, 96px) var(--pad) clamp(56px, 7vw, 84px); } .families__head { padding-bottom: 32px; gap: 32px; } .families__title h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); } .families__intro { font-size: 0.92rem; } .families__grid { gap: 18px; margin-top: 36px; } .fam { min-height: 300px; padding: 22px; gap: 14px; } .fam__idx { font-size: 0.58rem; padding: 5px 10px; letter-spacing: 0.24em; } .fam__body h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); } .fam__notes { font-size: 0.58rem; } .fam__desc { font-size: 0.8rem; max-width: 24ch; } .fam__go { font-size: 0.62rem; margin-top: 12px; } .fam__go b { width: 34px; height: 34px; font-size: 0.86rem; } .fam__mono { top: 18px; right: 18px; width: clamp(60px, 5vw, 78px); height: clamp(60px, 5vw, 78px); } .fam__product { top: 14px; right: 14px; width: 40%; } } @media (max-width: 640px) { .talk-sec__meta { grid-template-columns: 1fr 1fr; } .foot__bot { justify-content: flex-start; text-align: left; } /* collapse the flanking hairlines on narrow screens */ .foot__wordmark { grid-template-columns: 1fr; } .foot__wordmark-rule { display: none; } } @media (max-width: 560px) { .foot { padding: clamp(48px, 8vw, 72px) var(--pad) 92px; } .foot__wordmark-img { height: clamp(38px, 9vw, 56px); } .foot__wordmark-sub { letter-spacing: 0.22em; font-size: 0.58rem; } } .cinema { --cinema-p: 0; position: relative; height: 240vh; background: #ffffff; color: #000; } .cinema__sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; display: block; background: #ffffff; } .cinema__grain { display: none; } .cinema__intro { position: absolute; top: clamp(80px, 12vh, 140px); left: 50%; transform: translateX(-50%) translateY(calc(var(--cinema-p) * -24px)); text-align: center; z-index: 3; width: min(720px, 90vw); opacity: calc(1 - var(--cinema-p) * 1.6); transition: opacity 0.15s linear; pointer-events: none; } .cinema__intro .label { color: #000; justify-content: center; } .cinema__intro .label i { background: #000; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08); } .cinema__intro .label span { color: rgba(0, 0, 0, 0.55); border-left-color: rgba(0, 0, 0, 0.14); } .cinema__intro h2 { font-family: var(--font-geist-sans); font-size: clamp(2.6rem, 6.4vw, 5.2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: #000; margin-top: 10px; } .cinema__intro h2 em { font-style: normal; color: #000; font-weight: 700; } .cinema__lede { margin-top: 14px; color: rgba(0, 0, 0, 0.62); font-size: clamp(0.95rem, 1.2vw, 1.05rem); font-weight: 500; line-height: 1.55; } .cinema__frame { position: absolute; inset: 0; z-index: 2; transform-origin: 50% 100%; transform: translateY(calc((1 - var(--cinema-p)) * -6vh)) scale(calc(0.32 + var(--cinema-p) * 0.68)); border-radius: calc((1 - var(--cinema-p)) * 24px); overflow: hidden; background: #000; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.28), 0 20px 40px -20px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06) inset; will-change: transform, border-radius; } .cinema__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .cinema__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%); pointer-events: none; opacity: calc(1 - var(--cinema-p) * 0.55); transition: opacity 0.2s linear; } .cinema__badge { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.06); color: #000; font-family: var(--font-geist-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; opacity: calc(1 - var(--cinema-p) * 1.4); transform: scale(calc(1 / (0.32 + var(--cinema-p) * 0.68))); transform-origin: top left; transition: opacity 0.2s linear; } .cinema__badge b { font-weight: 800; } .cinema__badge i { font-style: normal; font-weight: 500; color: rgba(0, 0, 0, 0.55); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; } .cinema__hint { position: absolute; bottom: clamp(20px, 4vh, 44px); left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 10px; color: rgba(0, 0, 0, 0.6); font-family: var(--font-geist-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; opacity: calc(1 - var(--cinema-p) * 3); pointer-events: none; } .cinema__hint b { font-style: normal; font-weight: 400; font-size: 0.9rem; animation: cinemaBob 1.8s ease-in-out infinite; } @keyframes cinemaBob { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(4px); opacity: 1; } } @media (max-width: 900px) { .cinema { --cinema-p: 1; height: auto; } .cinema__sticky { position: relative; height: auto; padding: clamp(80px, 12vw, 120px) var(--pad) clamp(80px, 12vw, 120px); } .cinema__intro { position: relative; top: auto; left: auto; transform: none; opacity: 1; margin-bottom: 32px; text-align: left; width: 100%; } .cinema__intro .label { justify-content: flex-start; } .cinema__frame { position: relative; inset: auto; width: 100%; aspect-ratio: 9 / 14; max-height: 80vh; transform: none; border-radius: 22px; box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.22); } .cinema__frame::after { opacity: 0.3; } .cinema__badge { transform: none; opacity: 1; } .cinema__hint { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal, .nav, .hero__left, .hero__sound { opacity: 1; transform: none; } .loader { display: none; } } /* ========================================================== SHOP PAGES — products / product / cart / checkout ---------------------------------------------------------- Consumes existing tokens: --accent, --ink, --bg, --secondary, --gray, --muted, --line, --ease, --pad, --font-geist-sans No new palette; layered on top of the home-page system. ========================================================== */ /* -- Inner-page nav (shop pages) ---------------------------- */ .nav--inner { position: sticky; top: 0; left: auto; right: auto; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px clamp(20px, 4vw, 48px); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid rgba(17, 17, 17, 0.06); transition: none; } .nav--inner .brand img { height: 44px; filter: none; } .nav__inner-links { display: flex; align-items: center; gap: 4px; } .nav__inner-links a { position: relative; padding: 10px 14px; border-radius: 999px; color: rgba(17, 17, 17, 0.72); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.3s var(--ease), background 0.3s; } .nav__inner-links a:hover { color: var(--ink); background: rgba(17, 17, 17, 0.04); } .nav__inner-links a.is-active { color: var(--ink); background: rgba(17, 17, 17, 0.06); } .nav__inner-right { display: inline-flex; align-items: center; gap: 8px; } .nav__inner-right .nav__ic { width: 40px; height: 40px; color: var(--ink); border: 1px solid rgba(17, 17, 17, 0.1); background: #fff; border-radius: 50%; } .nav__inner-right .nav__ic:hover { background: rgba(17, 17, 17, 0.04); } .nav__bag-link { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 16px; border: 1px solid rgba(17, 17, 17, 0.1); border-radius: 999px; background: #fff; color: var(--ink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: 0.25s var(--ease); } .nav__bag-link:hover { background: var(--ink); color: #fff; } .nav__bag-link b { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: 0.72rem; letter-spacing: 0; } .nav__bag-link b.is-empty { background: rgba(17, 17, 17, 0.14); } /* -- Page container shell ----------------------------------- */ .page { min-height: calc(100vh - 200px); background: var(--bg); color: var(--ink); } /* ========================================================== Products page — cinematic video hero (.pvideo) ---------------------------------------------------------- Structure: .pvideo — outer section; horizontal padding uses --section-pad so the section sits on the same rail as header/footer .pvideo__stage — video wrapper, capped at --section-max, rounded .pvideo__media — the