/* SCNT site — modelled on davidprotein.com (structure, rhythm, behaviour), SCNT content. Fonts: Cocogoose Pro (display; TRIAL files, licence before going public) + Geist Mono / Geist (OFL). */ @font-face { font-family: "Cocogoose"; src: url("../fonts/cocogoose-pro-light.otf") format("opentype"); font-weight: 300; font-display: swap; } /* numbers: the trial cuts draw "TRIAL FONT" in place of every digit, so digits come from the licensed Light (bold synthesised where a heading is bold) */ @font-face { font-family: "Cocogoose Num"; src: url("../fonts/cocogoose-pro-light.otf") format("opentype"); font-weight: 300; font-display: swap; unicode-range: U+0030-0039; } @font-face { font-family: "Cocogoose"; src: url("../fonts/Cocogoose-Pro-Cocogoose-Pro-Regular-Trial.ttf") format("truetype"); font-weight: 400; font-display: swap; unicode-range: U+0000-002F, U+003A-FFFF; } @font-face { font-family: "Cocogoose"; src: url("../fonts/Cocogoose-Pro-Cocogoose-Pro-Bold-Trial.ttf") format("truetype"); font-weight: 700; font-display: swap; unicode-range: U+0000-002F, U+003A-FFFF; } @font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Geist"; src: url("../fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Geist"; src: url("../fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } /* Cocogoose Pro Compressed: the licensed web files from the August Shopify theme; same cut as the bottle and vial labels. */ @font-face { font-family: "Coco Comp"; src: url("../fonts/cocogoose-comp-semilight.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Coco Comp"; src: url("../fonts/cocogoose-comp-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } :root { --black: #000; --ink: #0b0b0b; --panel: #141414; --line: #2a2a2a; --white: #fff; --paper: #f3f1ee; /* David's off-white page (third-party testing) → our /ingredients */ --paper-line: #dedad4; --grey: #8a8a8a; --wordmark: #8c8c8c; /* the three liquids (Pantone targets; screen approximations) */ --se: #9b7bd0; /* 2577C violet — Smells Expensive */ --cos: #f3b33d; /* 1235C gold — Croissants on Sunday */ --tul: #19b9ad; /* 3262C teal — 1 Night in Tulum */ --display: "Cocogoose", "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, Menlo, monospace; --sans: "Geist", system-ui, -apple-system, sans-serif; --gutter: clamp(16px, 1.25vw, 24px); --header-h: 68px; --bar-h: 32px; --radius: 10px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } [id] { scroll-margin-top: calc(var(--header-h) + 48px); } /* anchors land below the sticky header + mobile strip */ body { margin: 0; background: var(--black); color: var(--white); font-family: var(--mono); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ---------- type ---------- */ .h1, .h2, .h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; margin: 0; text-transform: none; } .h1 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1.04; } .h2 { font-size: clamp(28px, 3.2vw, 48px); line-height: 1.08; } .h3 { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; } .lede { font-family: var(--mono); font-size: 13px; max-width: 46ch; margin: 14px 0 0; } .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .muted { color: var(--grey); } /* ---------- buttons (David's pill) ---------- */ .pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 26px; border-radius: 999px; font-family: var(--mono); font-size: 13px; white-space: nowrap; transition: opacity .2s, background .2s, color .2s; } .pill--white { background: var(--white); color: var(--black); } .pill--black { background: var(--black); color: var(--white); } .pill--ghost { border: 1px solid currentColor; } .pill--big { height: 56px; width: 100%; font-size: 14px; } .pill:hover { opacity: .82; } .pill .tt { width: 14px; height: 14px; } /* ---------- announcement bar ---------- */ .bar { height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); background: var(--black); border-bottom: 1px solid var(--line); font-size: 12px; } .bar__msgs { position: relative; flex: 1; height: 100%; overflow: hidden; text-align: center; } .bar__msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s; text-decoration: underline; text-underline-offset: 3px; } .bar__msg.is-on { opacity: 1; } .bar__arrow { width: 24px; height: 24px; display: grid; place-items: center; opacity: .7; } /* ---------- header ---------- */ .header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; gap: 28px; padding: 0 var(--gutter); background: var(--black); border-bottom: 1px solid var(--line); } .logo { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: 0.01em; line-height: 1; } .nav { display: flex; gap: 22px; font-size: 13px; } .nav a { opacity: .92; } .nav a:hover { opacity: .6; } .header__right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 13px; } .burger { display: none; width: 28px; height: 28px; } .burger span { display: block; height: 1.5px; background: var(--white); margin: 6px 3px; } /* mobile category strip (David mobile) */ .strip { display: none; gap: 18px; overflow-x: auto; padding: 10px var(--gutter); border-bottom: 1px solid var(--line); scrollbar-width: none; background: var(--black); position: sticky; top: var(--header-h); z-index: 49; } .strip::-webkit-scrollbar { display: none; } .strip a { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; } .strip i { width: 22px; height: 22px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line); display: block; } .strip i.se { background: var(--se); } .strip i.cos { background: var(--cos); } .strip i.tul { background: var(--tul); } .drawer { position: fixed; inset: 0; z-index: 80; background: var(--black); padding: 24px var(--gutter); transform: translateX(-100%); transition: transform .35s ease; display: flex; flex-direction: column; gap: 22px; } .drawer.is-open { transform: none; } .drawer a { font-family: var(--display); font-size: 30px; } .drawer__close { align-self: flex-end; font-size: 26px; } /* ---------- placeholders (each one is a line on the shot list) ---------- */ .ph { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 70% 40%, #1f1f1f 0%, #0a0a0a 60%, #000 100%); border: 1px dashed #333; display: flex; align-items: flex-end; } .ph::after { content: "PHOTO · " attr(data-shot); position: absolute; left: 12px; bottom: 12px; right: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #7d7d7d; line-height: 1.4; } .ph[data-kind="video"]::after { content: "VIDEO · " attr(data-shot); } .ph--light { background: radial-gradient(120% 90% at 50% 40%, #fff 0%, #ecebe8 100%); border-color: #cfcac2; } .ph--light::after { color: #8a857c; } .ph .glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; } .glow.se { background: var(--se); } .glow.cos { background: var(--cos); } .glow.tul { background: var(--tul); } /* ---------- hero (full-bleed slides) ---------- */ .hero { position: relative; height: calc(100svh - var(--header-h) - var(--bar-h)); min-height: 560px; max-height: 900px; overflow: hidden; } .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; } .hero__slide.is-on { opacity: 1; pointer-events: auto; } .hero__slide .ph { position: absolute; inset: 0; border: 0; } .hero__copy { position: absolute; left: calc(var(--gutter) * 2.4); top: 50%; transform: translateY(-50%); max-width: 520px; z-index: 2; } .hero__copy .pill { margin-top: 22px; } .hero__copy .hero__line { margin-top: 6px; } .band__eyebrow { margin: 0 0 10px; color: #6e6e6e; } .band__title .h2 { margin: 0; } .band__title { min-width: 0; flex: 1 1 auto; } .band__tools { flex: none; } /* Scents band head (Kurt, 20 Oct): title at the bloom title's size, bigger line under it, air above and below. */ .scents3 .band__head { flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 24px 0 20px; margin-bottom: 28px; } html:not(.font-pro) .scents3 .band__title .h2 { font-size: clamp(42px, 5.4vw, 88px); line-height: .92; font-weight: 400; } .scents3 .band__sub { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; margin: 18px auto 0; max-width: 48ch; color: #444; } .scents3 .band__tools { justify-content: center; } .band.scents3 { padding-top: 60px; } .cta-text { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 500; font-size: 20px; letter-spacing: .02em; text-transform: uppercase; color: var(--black); text-decoration: none; } .cta-text__arrow { font-size: 18px; transition: transform .25s var(--ease-ui); } .cta-text:hover .cta-text__arrow { transform: translate(2px, -2px); } .hero__dots { position: absolute; left: calc(var(--gutter) * 2.4); bottom: 30px; display: flex; gap: 8px; z-index: 3; } .hero__dots button { width: 34px; height: 2px; background: rgba(255,255,255,.3); position: relative; overflow: hidden; } .hero__dots button.is-on::after { content: ""; position: absolute; inset: 0; background: var(--white); transform-origin: left; animation: fill 6s linear forwards; } @keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ---------- ticker ---------- */ .ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); height: 40px; display: flex; align-items: center; background: var(--black); } .ticker--light { background: var(--white); color: var(--black); border-color: var(--paper-line); } .ticker__track { display: flex; gap: 0; white-space: nowrap; animation: tick 40s linear infinite; font-size: 12px; } .ticker__track span { padding: 0 14px; } .ticker__track span::before { content: "•"; margin-right: 14px; } @keyframes tick { to { transform: translateX(-50%); } } /* ---------- section scaffolding ---------- */ .sec { padding: 72px var(--gutter); background: var(--black); } .sec--white { background: var(--white); color: var(--black); } .sec--paper { background: var(--paper); color: var(--black); } .sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .sec__head--center { justify-content: center; text-align: center; } .arrows { display: flex; gap: 8px; } .arrows button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #d9d9d9; color: var(--black); } .arrows button + button { background: var(--black); color: var(--white); } .sec:not(.sec--white):not(.sec--paper) .arrows button { background: #333; color: var(--white); } .sec:not(.sec--white):not(.sec--paper) .arrows button + button { background: var(--white); color: var(--black); } .link-u { text-decoration: underline; text-underline-offset: 3px; font-size: 12px; white-space: nowrap; } /* horizontal rails */ .rail { display: grid; grid-auto-flow: column; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); } .rail::-webkit-scrollbar { display: none; } .rail > * { scroll-snap-align: start; } /* ---------- "Shop all" tiles ---------- */ .tiles { grid-auto-columns: calc((100% - 32px) / 4.6); } .tile { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; } .tile .ph { position: absolute; inset: 0; border-radius: 4px; } .tile .ph::after { bottom: auto; top: 12px; } .tile__name { position: absolute; left: 16px; bottom: 14px; font-family: var(--display); font-size: clamp(18px, 1.6vw, 24px); z-index: 2; color: var(--white); } /* ---------- tabs with media (black split) ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; min-height: 820px; background: var(--black); } .split__copy { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px var(--gutter); position: relative; } .toggle { position: absolute; top: 40px; display: inline-flex; padding: 3px; border-radius: 999px; background: #262626; } .toggle button { height: 30px; padding: 0 16px; border-radius: 999px; font-size: 12px; color: #9a9a9a; } .toggle button.is-on { background: var(--black); color: var(--white); border: 1px solid #555; } .split__panel { display: none; } .split__panel.is-on { display: block; } .split__panel ul { list-style: none; padding: 0; margin: 16px 0 22px; font-size: 13px; line-height: 1.8; } .split__panel li::before { content: "• "; } .split__media { position: relative; } .split__media .ph { position: absolute; inset: 0; border: 0; display: none; } .split__media .ph.is-on { display: flex; } /* ---------- creator video rail (David "Discipline never tasted so good.") ---------- */ .ugc { grid-auto-columns: 232px; gap: 12px; align-items: start; } .ugc__item { display: flex; flex-direction: column; gap: 0; } .ugc__item .ph { aspect-ratio: 9 / 13; border-radius: 6px 6px 0 0; } .ugc__item.is-center { transform: translateY(-14px); } /* scent dots */ .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot.se { background: var(--se); } .dot.cos { background: var(--cos); } .dot.tul { background: var(--tul); } .ugc__card { background: var(--white); color: var(--black); border-radius: 0 0 6px 6px; padding: 12px; display: grid; grid-template-columns: 40px 1fr; gap: 4px 10px; font-size: 11.5px; } .ugc__card .thumb { width: 40px; height: 58px; object-fit: contain; border-radius: 0; grid-row: span 2; align-self: center; } /* Kurt 20 Oct: the vial, not a colour */ .ugc__card .pill { grid-column: 1 / -1; height: 30px; margin-top: 8px; border: 1px solid var(--black); font-size: 12px; } .ugc__handle { font-size: 11px; color: #666; } /* Kurt 20 Oct: no prices under the videos; scent + handle + a discreet shop action */ .ugc__card { grid-template-columns: 40px 1fr auto; align-items: center; } .ugc__card .thumb { grid-row: span 2; } .ugc__scent { font-weight: 500; } .ugc__shop { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--black); text-decoration: none; border-bottom: 1px solid var(--black); padding-bottom: 1px; } .ugc__shop span { font-size: 10px; } .sec__eyebrow { margin: 0 0 12px; color: #909090; } /* Kurt 20 Oct: slight scale on hover over a creator card */ .ugc__item .ph { overflow: hidden; } .ugc__item .ph > video, .ugc__item .ph > img { transition: transform .6s cubic-bezier(.2,.8,.2,1); } @media (hover: hover) { .ugc__item:hover .ph > video, .ugc__item:hover .ph > img { transform: scale(1.04); } } .ugc__card { transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease; transform-origin: 50% 0; } @media (hover: hover) { .ugc__card:hover { transform: scale(1.03); box-shadow: 0 10px 30px rgba(0,0,0,.35); } } .home-rail .sec__head--center { flex-direction: column; align-items: center; gap: 0; } /* ---------- how it works (David's interactive chart) ---------- */ .how { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; } .how__viz { position: relative; height: 520px; display: grid; place-items: end center; } .bottle { position: relative; width: 190px; height: 480px; } .bottle svg { width: 100%; height: 100%; overflow: visible; } .bottle .water { transition: y .7s cubic-bezier(.2,.8,.2,1), height .7s cubic-bezier(.2,.8,.2,1), fill .5s; } .bottle .lineLabel { transition: transform .7s cubic-bezier(.2,.8,.2,1); } .how__legend { position: absolute; left: 0; bottom: 0; font-size: 11px; color: var(--grey); max-width: 46ch; } .how__copy .toggle { position: static; margin: 22px 0 8px; display: inline-flex; } .steps { margin-top: 18px; border-top: 1px solid var(--line); } .step { border-bottom: 1px solid var(--line); padding: 18px 0; } .step .h3 { font-size: 22px; } .step p { margin: 6px 0 0; color: #cfcfcf; font-size: 12.5px; max-width: 52ch; } /* ---------- reviews (planned: hidden until we have real ones) ---------- */ .reviews { grid-auto-columns: 330px; gap: 10px; } .review { background: var(--white); color: var(--black); border-radius: 4px; padding: 18px; min-height: 230px; display: flex; flex-direction: column; gap: 8px; font-family: var(--sans); font-size: 13px; } .review .stars { letter-spacing: 2px; color: #b8860b; } .review strong { font-family: var(--sans); font-size: 15px; } .review .who { font-size: 12px; color: #555; display: flex; justify-content: space-between; } .review .prod { margin-top: auto; font-size: 12px; color: #666; display: flex; align-items: center; gap: 8px; } [data-ready="false"] { position: relative; } [data-ready="false"]::before { content: "PLANNED · " attr(data-planned); position: absolute; top: 14px; right: var(--gutter); z-index: 5; font-size: 10.5px; letter-spacing: .06em; padding: 4px 8px; border-radius: 3px; background: #ffe36e; color: #000; } body.is-live [data-ready="false"] { display: none; } body.is-live .pending { display: none; } /* ---------- FAQ (numbered accordion) ---------- */ .faq { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; } .qa { border-bottom: 1px solid var(--paper-line); } .sec:not(.sec--white):not(.sec--paper) .qa { border-color: var(--line); } .qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; padding: 18px 0; font-family: var(--sans); font-size: 14.5px; } .qa summary::-webkit-details-marker { display: none; } .qa summary .n { font-family: var(--mono); font-size: 11px; color: var(--grey); } .qa summary .chev { transition: transform .25s; justify-self: end; } .qa[open] summary .chev { transform: rotate(180deg); } .qa .a { padding: 0 0 20px 34px; font-family: var(--mono); font-size: 12.5px; color: inherit; opacity: .8; max-width: 70ch; } /* ---------- footer ---------- */ .footer { background: var(--black); padding: 64px var(--gutter) 0; border-top: 1px solid var(--line); } .footer__grid { display: grid; grid-template-columns: 2.2fr repeat(4, 1fr); gap: 32px; } .footer h4 { margin: 0 0 14px; font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--grey); letter-spacing: .06em; text-transform: uppercase; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12.5px; } .footer__lead p { font-size: 12.5px; max-width: 34ch; margin: 0 0 16px; } .footer__fine { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 44px; font-size: 11px; color: var(--grey); } .wordmark { font-family: var(--display); font-weight: 700; color: var(--wordmark); font-size: 31vw; line-height: .78; letter-spacing: -0.02em; text-align: center; margin-top: 40px; overflow: hidden; height: .66em; user-select: none; } /* ---------- product page (PDP) ---------- */ .pdp { display: grid; grid-template-columns: 1.85fr 1fr; gap: 24px; padding: 22px var(--gutter) 60px; background: var(--white); color: var(--black); } .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .gallery .ph { aspect-ratio: 1 / 1; border-radius: 4px; } .gallery .ph--hero { grid-column: 1 / -1; aspect-ratio: 16 / 10; } .buy { position: sticky; top: calc(var(--header-h) + 18px); align-self: start; font-family: var(--sans); } .buy__rating { display: flex; justify-content: flex-end; font-size: 12px; color: #444; min-height: 18px; } .buy h1 { font-family: var(--display); font-weight: 400; font-size: 26px; margin: 6px 0 8px; line-height: 1.1; } .buy__desc { font-size: 13px; color: #333; margin: 0 0 14px; } .buy__price { display: flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 13px; padding: 10px 0; } .buy__price span + span::before { content: "|"; margin-right: 10px; color: #bbb; } .picker { border: 1px solid #ddd; border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 6px 0 12px; } .picker .vials { display: flex; gap: 4px; } .picker .vials i { width: 10px; height: 26px; border-radius: 3px; display: block; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; } .chip { border: 1px solid #ccc; border-radius: 999px; padding: 6px 12px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; } .chip.is-on { border-color: #000; background: #000; color: #fff; } .ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 11.5px; color: #333; margin: 12px 0 14px; } .ticks span::before { content: "✓ "; } .note { background: #f1f1f1; border-radius: 6px; padding: 12px; font-size: 11.5px; color: #333; margin: 12px 0; text-align: center; } .acc { border-top: 1px solid #e3e3e3; } .acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; padding: 14px 0; font-size: 13px; } .acc summary::-webkit-details-marker { display: none; } .acc[open] summary .chev { transform: rotate(90deg); } .acc .chev { transition: transform .2s; } .acc .a { font-size: 12.5px; color: #333; padding: 0 0 14px; } .sticky-buy { position: fixed; right: 18px; bottom: 18px; z-index: 60; background: #fff; color: #000; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.35); padding: 10px 10px 10px 14px; display: flex; align-items: center; gap: 14px; font-size: 12px; transform: translateY(220%); transition: transform .35s ease; } .sticky-buy.is-on { transform: none; } /* ---------- ingredients page (David's /third-party-testing) ---------- */ /* ingredient disclosure: plain utility page (footer + PDP links only) */ .disclosure { max-width: 880px; margin: 0 auto; padding: 56px var(--gutter) 88px; color: var(--black); font-family: var(--sans); font-size: 14px; line-height: 1.6; } .disclosure__head { margin-bottom: 40px; } .disclosure__head .h2 { margin: 8px 0 12px; } .disclosure section { margin-top: 40px; } .disclosure h2.label { font-size: 12px; margin: 32px 0 12px; } .disclosure section > h2.label:first-child { margin-top: 0; } .disclosure .muted { color: #6d6860; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap .table { min-width: 560px; } .table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13px; } .table th, .table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--paper-line); vertical-align: top; } .table th { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6d6860; } .pending { background: #ffe36e; color: #000; padding: 1px 6px; border-radius: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; white-space: nowrap; } .docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .doc { border: 1px solid var(--paper-line); background: #fff; border-radius: 6px; padding: 16px; display: flex; justify-content: space-between; align-items: center; font-family: var(--sans); font-size: 13px; } /* simple text pages */ .page-hero { text-align: center; padding: 56px var(--gutter); } .prose { max-width: 720px; margin: 0 auto; padding: 56px var(--gutter) 80px; font-family: var(--sans); font-size: 15px; line-height: 1.65; } .prose h2 { font-family: var(--display); font-weight: 400; font-size: 24px; margin: 36px 0 10px; } /* ---------- responsive (David collapses to the mobile strip + stacked sections) ---------- */ @media (max-width: 900px) { :root { --header-h: 58px; } .nav, .header__right .hide-m { display: none; } .burger { display: block; } .header { gap: 12px; } .header .logo { font-size: 22px; } .strip { display: flex; } .hero { height: auto; min-height: 0; max-height: none; } .hero__slide { position: relative; display: none; } .hero__slide.is-on { display: block; } .hero__slide .ph { position: relative; aspect-ratio: 4 / 5; } .hero__copy { position: relative; left: auto; top: auto; transform: none; padding: 20px var(--gutter) 64px; } .hero__dots { left: var(--gutter); bottom: 26px; } .tiles { grid-auto-columns: 62%; } .split { grid-template-columns: 1fr; } .split__media { order: -1; aspect-ratio: 1 / 1; } .split__copy { padding-top: 84px; } .how { grid-template-columns: 1fr; gap: 28px; } .how__viz { height: 420px; } .bottle { height: 380px; width: 150px; } .faq { grid-template-columns: 1fr; gap: 10px; } .footer__grid { grid-template-columns: 1fr 1fr; } .footer__lead { grid-column: 1 / -1; } .pdp { grid-template-columns: 1fr; padding-top: 12px; } .gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; } .gallery .ph, .gallery .ph--hero { grid-column: auto; aspect-ratio: 1 / 1; scroll-snap-align: start; } .buy { position: static; } .docs { grid-template-columns: 1fr; } .sec { padding: 52px var(--gutter); } .sticky-buy { left: 12px; right: 12px; justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } .hero__slide { transition: none; } } /* ---------- type switch: Compressed (default, matches the pack) vs rounded Pro (?font=pro) ---------- */ html:not(.font-pro) .h1, html:not(.font-pro) .h2, html:not(.font-pro) .h3, html:not(.font-pro) .tile__name, html:not(.font-pro) .buy h1, html:not(.font-pro) .drawer a, html:not(.font-pro) .prose h2 { font-family: "Coco Comp", var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em; line-height: .95; } html:not(.font-pro) .h1 { font-size: clamp(48px, 6.4vw, 104px); } html:not(.font-pro) .h2 { font-size: clamp(38px, 4.6vw, 72px); } html:not(.font-pro) .h3 { font-size: clamp(22px, 1.9vw, 28px); } html:not(.font-pro) .tile__name { font-size: clamp(24px, 2.2vw, 34px); } html:not(.font-pro) .buy h1 { font-size: 40px; } html:not(.font-pro) .logo, html:not(.font-pro) .wordmark { font-family: "Coco Comp", var(--display); font-weight: 700; } html:not(.font-pro) .logo { font-size: 34px; } html:not(.font-pro) .wordmark { font-size: 46vw; } /* ---------- placeholder images (AI renders, 12 Oct; replace with the Dubai shoot) ---------- */ .ph.has-img { border: 0; } .ph.has-img > img, .ph.has-img > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ph.has-img::after { display: none; } /* was the "AI PLACEHOLDER" corner tag; Kurt 20 Oct: removed. The data-shot attributes still mark every slot the Dubai shoot replaces. */ .ph.has-img .glow { display: none; } /* hero: portrait render sits on the right of the black slide, fading into it (David's hero has the copy left, product right) */ .ph--hero-img { background: #000; } .ph.has-img.ph--hero-img > img { left: auto; right: 6%; width: auto; max-width: 62%; object-fit: contain; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%); mask-composite: intersect; } @media (max-width: 900px) { .ph.has-img.ph--hero-img > img { right: 0; max-width: none; width: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); } } /* full-bleed landscape hero image, darkened on the copy side for legibility */ .ph--bleed { background: #000; } .ph--bleed::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 38%, rgba(0,0,0,0) 60%); } @media (max-width: 900px) { .ph--bleed::before { background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 40%); } } /* ---------- the scents: full-width panels, one colour each ---------- */ .scents { background: var(--black); padding: 72px 0 24px; } .scents__head { margin-bottom: 32px; } .scent { --c: var(--se); position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; margin: 0 var(--gutter) 16px; border-radius: 10px; overflow: hidden; background: radial-gradient(120% 90% at 85% 50%, color-mix(in srgb, var(--c) 34%, transparent), transparent 60%), #0d0d0d; } .scent--cos { --c: var(--cos); } .scent--tul { --c: var(--tul); } .scent:nth-child(odd) .scent__media { order: 2; } .scent:nth-child(odd) { background: radial-gradient(120% 90% at 15% 50%, color-mix(in srgb, var(--c) 34%, transparent), transparent 60%), #0d0d0d; } .scent__media .ph { position: absolute; inset: 0; border: 0; border-radius: 0; background: transparent; } .scent__media { position: relative; } .scent__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 56px calc(var(--gutter) * 2.4); } .scent__no { display: inline-flex; gap: 8px; align-items: center; color: var(--grey); } .scent__name { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 6vw, 92px); line-height: .92; margin: 14px 0 18px; color: var(--c); } .scent__tag { font-family: var(--display); font-size: clamp(20px, 2.2vw, 30px); line-height: 1.1; margin: 0 0 22px; } .scent__notes { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; } .scent__story { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: #bdbdbd; max-width: 420px; margin: 0 0 28px; } @media (max-width: 900px) { .scent { grid-template-columns: 1fr; min-height: 0; } .scent__media { order: -1 !important; aspect-ratio: 4 / 5; } .scent__copy { padding: 28px 22px 36px; } } html:not(.font-pro) .scent__name, html:not(.font-pro) .scent__tag { font-family: "Coco Comp", var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; } html:not(.font-pro) .scent__tag { font-weight: 400; } .buy__profile { font-family: var(--sans); font-size: 13px; color: #555; margin: -4px 0 18px; min-height: 2.6em; } button.chip { font: inherit; cursor: pointer; background: transparent; color: inherit; } /* ---------- motion (David: images ease on hover, sections rise in) ---------- */ .tile .ph > img, .scent__media .ph > img { transition: transform .9s cubic-bezier(.2,.8,.2,1); } .tile:hover .ph > img, .scent:hover .scent__media .ph > img { transform: scale(1.04); } .tile .ph > img + img { opacity: 0; transition: opacity .4s; } /* optional second image: swaps on hover */ .tile:hover .ph > img + img { opacity: 1; } .js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); } .js-reveal .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } .tile .ph > img, .scent__media .ph > img { transition: none; transform: none !important; } } /* ---------- creator rail as a slow marquee (JS adds .is-marquee) ---------- */ .rail.ugc.is-marquee { display: block; overflow: hidden; scroll-snap-type: none; padding-top: 40px; padding-bottom: 36px; padding-left: 0; padding-right: 0; } .ugc__track { display: flex; align-items: center; gap: 32px; width: max-content; will-change: transform; } .is-marquee .ugc__item { flex: none; width: 300px; transform: scale(.94); transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 1.1s; } .is-marquee .ugc__item.is-center { transform: scale(1.12); position: relative; z-index: 2; } .is-marquee .ugc__item .ph { aspect-ratio: 9 / 14; overflow: hidden; } .is-marquee .ugc__item .ph > img, .is-marquee .ugc__item .ph > video { transform-origin: 50% 40%; } .is-marquee .ugc__item.is-center .ph > img { animation: ugc-play 9s ease-out forwards; } @keyframes ugc-play { from { transform: scale(1); } to { transform: scale(1.09); } } .ugc__play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(0,0,0,.42); backdrop-filter: blur(4px); z-index: 3; transition: opacity .5s, transform .5s; } .ugc__play::after { content: ""; position: absolute; left: 23px; top: 18px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; } .is-center .ugc__play { opacity: 0; transform: scale(.7); } .ugc__bar { position: absolute; left: 10px; right: 10px; top: 10px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); z-index: 3; overflow: hidden; opacity: 0; transition: opacity .4s; } .ugc__bar i { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; } .is-center .ugc__bar { opacity: 1; } /* .ugc__bar i width is set by JS from the card's position (fills exactly as the next card takes the centre) */ @media (max-width: 900px) { } /* ---------- Shop all: two big tiles (Kurt, 12 Oct) ---------- */ .tiles--two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tiles--two .tile { aspect-ratio: 3 / 2; } .tile__price { position: absolute; right: 16px; bottom: 16px; z-index: 2; font-family: var(--mono); font-size: 13px; color: var(--white); background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 999px; } @media (max-width: 900px) { .tiles--two { gap: 6px; } .tiles--two .tile { aspect-ratio: 4 / 5; } .tile__price { right: 10px; bottom: 10px; font-size: 11px; } } /* ---------- PDP, David's layout: light grey page, wide gallery, narrow buy column with a video reel ---------- */ .pdp { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); gap: 76px; padding: 34px 80px 72px var(--gutter); background: #f4f4f5; } .gallery .ph--hero { aspect-ratio: 4 / 3; background: #ececee; } .gallery .ph { border-radius: 2px; } .gallery__tag { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 4px; background: rgba(255,255,255,.9); color: #333; font-family: var(--mono); font-size: 12px; } .gallery__tag .dot { width: 6px; height: 6px; } .buy__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; } .buy__badge { display: inline-block; background: var(--black); color: var(--white); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; padding: 6px 9px; border-radius: 3px; } .buy__top .buy__rating { min-width: 120px; min-height: 22px; } html body .pdp .buy h1 { font-family: var(--sans); font-weight: 500; font-size: 24px; letter-spacing: 0; text-transform: none; line-height: 1.2; margin: 0 0 8px; } .pdp .buy__desc { font-size: 14px; line-height: 1.5; color: #222; margin: 0 0 18px; } .pdp .buy__price { font-family: var(--sans); font-size: 15px; padding: 0 0 22px; } .pdp .buy__price strong { font-weight: 600; } .pdp .buy__price span:nth-child(2) { font-weight: 600; } .pdp .chips { margin: -6px 0 12px; } .pdp .pill--big { width: 100%; height: 56px; font-size: 15px; letter-spacing: .04em; } .buy__rows { margin-top: 36px; border-top: 1px dashed #cfcfd3; } .buy__rows .acc { border-top: 0; border-bottom: 1px dashed #cfcfd3; } .buy__rows .acc summary { padding: 20px 0; font-size: 14px; font-weight: 500; } .buy__rows .acc .a { font-size: 13px; line-height: 1.55; } .buy__rows .acc .a p { margin: 0 0 8px; } .acc--link { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 14px; font-weight: 500; color: inherit; text-decoration: none; } .acc--link small { display: block; font-weight: 400; font-size: 13px; color: #444; margin-top: 3px; } .buy__reel { margin-top: 30px; min-width: 0; } .buy__reel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } html body .buy__reel-head .h2 { color: var(--black); font-size: clamp(26px, 2.1vw, 34px); line-height: .95; } .reel-toggle { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 2px solid var(--black); background: transparent; cursor: pointer; position: relative; } .reel-toggle::before, .reel-toggle::after { content: ""; position: absolute; top: 9px; width: 3px; height: 10px; background: var(--black); border-radius: 1px; } .reel-toggle::before { left: 10px; } .reel-toggle::after { left: 15px; } .reel-toggle.is-paused::after { display: none; } .reel-toggle.is-paused::before { left: 11px; top: 8px; width: 0; height: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--black); border-radius: 0; } .buy__reel .rail.ugc.is-marquee { margin: 0 -80px 0 0; padding: 14px 0 14px; } .ugc--mini .ugc__item .ph { border-radius: 4px; } .ugc--mini .ugc__play { width: 44px; height: 44px; margin: -22px 0 0 -22px; } .ugc--mini .ugc__play::after { left: 17px; top: 13px; border-width: 9px 0 9px 14px; } .buy__reel[data-ready="false"]::before { top: -22px; right: 0; } @media (max-width: 900px) { .pdp { grid-template-columns: minmax(0, 1fr); padding: 12px var(--gutter) 48px; gap: 24px; } .buy__reel .rail.ugc.is-marquee { margin-right: calc(var(--gutter) * -1); } } /* ---------- footer sign-up (David: "Don't miss out on David updates.") ---------- */ .signup { position: relative; max-width: 520px; } .signup__title { font-family: var(--sans); font-size: 22px !important; max-width: none !important; margin: 0 0 22px !important; } .signup__field { display: flex; align-items: center; background: #1c1c1c; border-radius: 6px; padding: 6px 6px 6px 16px; } .signup__field input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--white); font: 15px var(--sans); padding: 14px 0; outline: none; } .signup__field input::placeholder { color: #8a8a8a; } .signup__field button { width: 40px; height: 40px; border: 0; border-radius: 6px; background: #3a3a3a; color: var(--white); font-size: 18px; cursor: pointer; } .signup__field:focus-within { box-shadow: 0 0 0 1px #6b6b6b; } .signup__fine { font-family: var(--sans); font-size: 12.5px !important; color: #bdbdbd; max-width: 46ch !important; margin: 14px 0 0 !important; } .signup__fine a { text-decoration: underline; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .footer__social { display: flex !important; gap: 14px !important; } .footer__social svg { width: 20px; height: 20px; } .signup[data-ready="false"]::before { position: static; display: inline-block; margin-bottom: 14px; } .buy__top .buy__rating[data-ready="false"]::before { position: static; white-space: nowrap; } .tile .ph.has-img::after { top: 12px; bottom: auto; } /* creator cards (David): video and shop card are two separate rounded boxes */ .ugc__item { gap: 14px; } .ugc__item .ph, .is-marquee .ugc__item .ph { border-radius: 12px; } .ugc__card { border-radius: 12px; padding: 16px; gap: 6px 12px; font-size: 13px; } .ugc__card .pill { height: 38px; margin-top: 12px; font-size: 13px; } .prose .pending { white-space: normal; } /* ---------- creator rail v3: equal gaps, loud motion ---------- */ .rail.ugc.is-marquee { --w: 300px; --s: 1.14; --gap: 12px; position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; padding-top: 56px; padding-bottom: 56px; } .rail.ugc.is-marquee img { -webkit-user-drag: none; pointer-events: none; } .ugc__track { gap: var(--gap); position: relative; z-index: 1; transform-origin: 50% 50%; } .is-marquee .ugc__item { width: var(--w); transform: none; transition: transform .9s cubic-bezier(.2,.8,.2,1); } .is-marquee .ugc__item.is-before { transform: translateX(calc(var(--w) * (1 - var(--s)) / 2)); } .is-marquee .ugc__item.is-after { transform: translateX(calc(var(--w) * (var(--s) - 1) / 2)); } .is-marquee .ugc__item.is-center { transform: scale(var(--s)); z-index: 2; } .ugc--mini.is-marquee { --w: 190px; --s: 1.08; --gap: 8px; padding-top: 18px; padding-bottom: 18px; } @media (max-width: 900px) { .rail.ugc.is-marquee { --w: 230px; --s: 1.1; } .ugc--mini.is-marquee { --w: 160px; } } /* centre: scent-coloured glow + a sheen sweep */ .is-marquee .ugc__item .ph { transition: box-shadow .9s ease, transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--i, 0) * 90ms), opacity .9s ease calc(var(--i, 0) * 90ms); } .is-marquee .ugc__item.is-center .ph { box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 90px -12px color-mix(in srgb, var(--glow, #ffffff) 75%, transparent), 0 0 140px -30px var(--glow, #ffffff); } .ugc__sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%); transform: translateX(-130%); } .is-center .ugc__sheen { animation: ugc-sheen 1.3s .25s cubic-bezier(.3,.7,.2,1); } @keyframes ugc-sheen { to { transform: translateX(130%); } } /* entrance: everything rises in, staggered */ .is-marquee .ugc__item > * { transition: transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--i, 0) * 90ms), opacity .9s ease calc(var(--i, 0) * 90ms); } .is-marquee:not(.is-in) .ugc__item > * { opacity: 0; transform: translateY(120px) rotate(5deg); } /* giant outlined line running the other way */ .ugc__ghost { position: absolute; left: 0; top: 50%; margin-top: -.5em; z-index: 0; display: flex; white-space: nowrap; pointer-events: none; font-family: "Coco Comp", var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(120px, 15vw, 250px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.16); } .ugc__ghost span { padding-right: .3em; } /* cursor bubble */ .is-marquee { cursor: none; } .is-marquee .ugc__card, .is-marquee .ugc__card a { cursor: pointer; } .ugc__cursor { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%; background: var(--white); color: var(--black); display: grid; place-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; z-index: 6; opacity: 0; scale: .3; transition: opacity .25s, scale .35s cubic-bezier(.2,.8,.2,1); mix-blend-mode: difference; } .ugc__cursor.is-on { opacity: 1; scale: 1; } .is-dragging .ugc__cursor { scale: .7; } .ugc--mini .ugc__cursor { width: 64px; height: 64px; left: -32px; top: -32px; font-size: 10px; } @media (hover: none) { .ugc__cursor { display: none; } .is-marquee { cursor: auto; } } /* ---------- Kit/Refill split: taller, roomier buttons (David) ---------- */ .split .pill { height: 56px; padding: 0 38px; font-size: 14px; margin-top: 10px; } .split__panel .h2 { margin-bottom: 8px; } .split__panel ul { margin: 22px 0 34px; font-size: 14px; line-height: 2; } @media (max-width: 900px) { .split { min-height: 0; } } /* ---------- the oil ---------- */ .oil { --c: var(--se); position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; min-height: 900px; padding: 96px calc(var(--gutter) * 3); background: radial-gradient(70% 60% at 25% 50%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), var(--black); overflow: hidden; animation: oil-hue 18s linear infinite; } @keyframes oil-hue { 0%, 100% { --c: var(--se); } 33% { --c: var(--cos); } 66% { --c: var(--tul); } } @property --c { syntax: ""; inherits: true; initial-value: #9b7bd0; } .oil__viz { position: relative; height: 640px; display: grid; place-items: center; } .oil__aura { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 55%, transparent), transparent 65%); filter: blur(30px); animation: oil-breathe 6s ease-in-out infinite; } @keyframes oil-breathe { 50% { transform: scale(1.18); opacity: .7; } } .oil__vial { position: relative; height: 560px; width: auto; filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); animation: oil-float 7s ease-in-out infinite; } @keyframes oil-float { 50% { transform: translateY(-18px) rotate(-2deg); } } .oil__c1 { stop-color: color-mix(in srgb, var(--c) 85%, #fff); } .oil__c2 { stop-color: color-mix(in srgb, var(--c) 70%, #000); } .oil__wave { animation: oil-wave 3.2s linear infinite; } @keyframes oil-wave { to { transform: translateX(-60px); } } .oil__bubbles circle { fill: rgba(255,255,255,.55); animation: oil-bubble 4s ease-in infinite; } .oil__bubbles circle:nth-child(2) { animation-delay: .8s; } .oil__bubbles circle:nth-child(3) { animation-delay: 1.6s; } .oil__bubbles circle:nth-child(4) { animation-delay: 2.3s; } .oil__bubbles circle:nth-child(5) { animation-delay: 3.1s; } @keyframes oil-bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 90% { opacity: .8; } 100% { transform: translateY(-140px); opacity: 0; } } .oil__drops { position: absolute; inset: 0; pointer-events: none; } .oil__drops i { position: absolute; left: 50%; bottom: 18%; width: 10px; height: 10px; border-radius: 50%; background: var(--c); filter: blur(1px); box-shadow: 0 0 18px var(--c); opacity: 0; animation: oil-rise 7s ease-out infinite; } .oil__drops i:nth-child(1) { --dx: -160px; animation-delay: 0s; } .oil__drops i:nth-child(2) { --dx: 140px; animation-delay: .9s; } .oil__drops i:nth-child(3) { --dx: -90px; animation-delay: 1.8s; } .oil__drops i:nth-child(4) { --dx: 200px; animation-delay: 2.7s; } .oil__drops i:nth-child(5) { --dx: -220px; animation-delay: 3.6s; } .oil__drops i:nth-child(6) { --dx: 70px; animation-delay: 4.5s; } .oil__drops i:nth-child(7) { --dx: -40px; animation-delay: 5.4s; } .oil__drops i:nth-child(8) { --dx: 170px; animation-delay: 6.3s; } @keyframes oil-rise { 0% { transform: translate(-50%, 0) scale(.4); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(calc(-50% + var(--dx)), -520px) scale(1.6); opacity: 0; } } .oil__copy .label { color: var(--c); } .oil__copy .h2 { font-size: clamp(56px, 7vw, 120px); line-height: .9; margin: 14px 0 22px; } .oil__lede { font-family: var(--sans); font-size: 17px; color: #cfcfcf; max-width: 44ch; margin: 0 0 40px; } .oil__proof { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .proof--wide { grid-column: 1 / -1; } .proof { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); transition: transform .4s, border-color .4s; } .proof:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, transparent); } .proof__n { font-family: "Coco Comp", var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 3.4vw, 54px); line-height: 1; color: var(--c); } .proof__t { font-family: var(--sans); font-size: 14px; color: #e6e6e6; } .proof .pending { align-self: flex-start; white-space: normal; margin-top: 6px; } .oil__anchor { font-family: var(--mono); font-size: 13px; color: #bdbdbd; margin: 28px 0 0; } @media (max-width: 900px) { .oil { grid-template-columns: 1fr; padding: 64px var(--gutter); min-height: 0; gap: 8px; } .oil__viz { height: 420px; } .oil__vial { height: 380px; } .oil__aura { width: 340px; height: 340px; } .oil__proof { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .oil, .oil__aura, .oil__vial, .oil__wave, .oil__bubbles circle, .oil__drops i { animation: none !important; } .oil__drops { display: none; } } /* ---------- micro-interactions (Emil Kowalski's rules: ease-out, under 300 ms, press = .97, open from .95 never 0). Applies to controls only. The showcase motion (hero, creator rail, the oil) is deliberately bigger. ---------- */ :root { --ease-out: cubic-bezier(.23, 1, .32, 1); } .pill, .chip, .reel-toggle, .signup__field button, .burger, .drawer__close, .hero__dots button { transition: transform .16s var(--ease-out), opacity .2s, background .2s, color .2s, border-color .2s; } .pill:active, .chip:active, .reel-toggle:active, .signup__field button:active, .burger:active, .drawer__close:active, .hero__dots button:active { transform: scale(.97); } .signup__field button:hover { background: #4a4a4a; } /* drawer slides from where the burger is, links follow a beat later */ .drawer { transition: transform .3s var(--ease-out); } .drawer a, .drawer__close { opacity: 0; transform: translateX(-12px); transition: opacity .2s, transform .28s var(--ease-out); } .drawer.is-open a, .drawer.is-open .drawer__close { opacity: 1; transform: none; } .drawer.is-open a:nth-of-type(1) { transition-delay: 60ms; } .drawer.is-open a:nth-of-type(2) { transition-delay: 90ms; } .drawer.is-open a:nth-of-type(3) { transition-delay: 120ms; } .drawer.is-open a:nth-of-type(4) { transition-delay: 150ms; } .drawer.is-open a:nth-of-type(5) { transition-delay: 180ms; } .drawer.is-open a:nth-of-type(n+6) { transition-delay: 210ms; } .drawer.is-open a:active, .drawer.is-open .drawer__close:active { transform: scale(.97); } /* accordions: content eases in from just above, chevron turns on the same curve */ .qa summary .chev, .acc .chev { transition: transform .2s var(--ease-out); } details[open] > .a { animation: acc-in .22s var(--ease-out); } @keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } } .sticky-buy { transition: transform .3s var(--ease-out); } .proof { transition: transform .25s var(--ease-out), border-color .25s; } /* sign-up confirmation pops in from .95 */ .signup.is-done .signup__fine { animation: pop-in .24s var(--ease-out); transform-origin: left top; } @keyframes pop-in { from { opacity: 0; transform: scale(.95); } } /* hover effects only where there is a real pointer (no sticky hover after a tap on phones) */ @media (hover: none) { .pill:hover, .nav a:hover { opacity: 1; } .tile:hover .ph > img, .scent:hover .scent__media .ph > img { transform: none; } .tile:hover .ph > img + img { opacity: 0; } .proof:hover { transform: none; border-color: rgba(255,255,255,.08); } } @media (prefers-reduced-motion: reduce) { .pill:active, .chip:active, .reel-toggle:active, .signup__field button:active, .burger:active, .drawer__close:active, .hero__dots button:active { transform: none; } .drawer, .drawer a, .drawer__close { transition: none; } .drawer a, .drawer__close { opacity: 1; transform: none; } details[open] > .a, .signup.is-done .signup__fine { animation: none; } } /* ---------- PDP sized to David's live page (measured 13 Oct at a 1475px window: gallery 931 · gap 41 · buy column 440 incl. 15px side padding; title 18/450, desc 12, price 14/500, button 45 tall, rows 47 tall at 12/500, reel = two still 9:16 cards) ---------- */ .pdp { grid-template-columns: minmax(0, 1fr) 440px; column-gap: 41px; padding: 25px 43px 72px 20px; } .gallery { gap: 10px; } .pdp .buy { padding: 0 15px; } .buy__top { margin-bottom: 10px; } .buy__badge { font-size: 12px; letter-spacing: 0; padding: 5px 8px; border-radius: 5px; } html body .pdp .buy h1 { font-size: 18px; font-weight: 500; line-height: 1.35; letter-spacing: .01em; margin: 0 0 5px; } .pdp .buy__desc { font-size: 12.5px; line-height: 1.4; color: #222; margin: 0 0 16px; } .pdp .buy__price { font-size: 14px; font-weight: 500; gap: 10px; padding: 0 0 18px; } .pdp .buy__price strong, .pdp .buy__price span:nth-child(2) { font-weight: 500; } .pdp .buy__price strong + span::before { content: "|"; margin-right: 10px; color: #bbb; } .pdp .buy__price span:last-child:not(:nth-child(2)) { font-size: 12px; font-weight: 400; } .pdp .chips { margin: -4px 0 14px; } .pdp .pill--big { height: 45px; font-size: 14px; letter-spacing: 0; } .buy__rows { margin-top: 30px; } .buy__rows .acc summary { padding: 15px 0; font-size: 12px; font-weight: 500; align-items: center; } .buy__rows .acc .a { font-size: 12px; } .acc--link { padding: 15px 0; font-size: 12px; } .acc--link small { font-size: 12px; margin-top: 2px; } .buy__reel { margin-top: 30px; } .buy__reel-head { margin-bottom: 18px; } html body .buy__reel-head .h2 { font-size: 26px; } .reel-toggle { width: 28px; height: 28px; } .reel-toggle::before, .reel-toggle::after { top: 7px; } .reel-toggle::before { left: 8px; } .reel-toggle::after { left: 13px; } .reel-toggle.is-paused::before { left: 9px; top: 6px; } .rail.ugc--mini { display: grid; grid-auto-flow: column; grid-auto-columns: min(calc(50% - 7px), 240px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; padding: 0; } .rail.ugc--mini::-webkit-scrollbar { display: none; } .rail.ugc--mini .ugc__item { width: auto; scroll-snap-align: start; } .rail.ugc--mini .ugc__item .ph { aspect-ratio: 9 / 16; border-radius: 4px; } @media (max-width: 900px) { .pdp { grid-template-columns: minmax(0, 1fr); padding: 12px var(--gutter) 48px; } .pdp .buy { padding: 0; } } /* ---------- PDP responsive, per David's source: one column under 1024px (Tailwind lg = 64rem), 2xl container caps at 1536px. Main tile 9.22:7, then a 2-up grid of squares 10px apart. Under 1024: 300px square slides, 16px apart, 15px in from the edge, swipe with snap, a thumbnail strip below ((100vw − 56px) / 4.5 each, 3px black border on the current one). ---------- */ .gallery-wrap { min-width: 0; } .gallery .ph--hero { aspect-ratio: 9.22 / 7; } .gallery__thumbs { display: none; } .pdp .ph.is-playing .ugc__play { opacity: 0; transform: scale(.9); } @media (min-width: 1536px) { .pdp { padding-left: calc(50% - 748px); padding-right: calc(50% - 725px); } } @media (max-width: 1023px) { .pdp { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 30px; padding: 15px 0 48px; } .pdp .buy { position: static; padding: 0 15px; } .pdp .gallery { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 15px; padding: 0 15px; scrollbar-width: none; } .pdp .gallery::-webkit-scrollbar { display: none; } .pdp .gallery .ph, .pdp .gallery .ph--hero { flex: none; width: 300px; max-width: calc(100vw - 30px); aspect-ratio: 1 / 1; grid-column: auto; scroll-snap-align: start; border-radius: 4px; } .gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px; margin-top: 12px; scrollbar-width: none; } .gallery__thumbs::-webkit-scrollbar { display: none; } .gallery__thumbs button { flex: none; width: calc((100vw - 56px) / 4.5); aspect-ratio: 1 / 1; padding: 0; border: 3px solid transparent; border-radius: 4px; overflow: hidden; background: #e6e6e8; cursor: pointer; } .gallery__thumbs button[aria-current="true"] { border-color: var(--black); } .gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; } } /* ---------- PDP additions, 14 Oct (SCNT_PDP_Copy_v1_2026-10-14.md): fine print under the buy button, credentials row in the bloom block, the per-bottle block + category price card ---------- */ .buy__fine { font-family: var(--mono); font-size: 11px; color: #777; margin: 10px 0 18px; } .creds { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 32px; } .creds li { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: #e6e6e6; } .creds li.is-pending { border-style: dashed; color: #9a9a9a; display: inline-flex; gap: 8px; align-items: center; } .creds li .pending { margin: 0; } .worth { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; } .worth__body { font-family: var(--sans); font-size: 17px; max-width: 42ch; margin: 18px 0 0; color: #222; } .worth__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .wcard { display: flex; flex-direction: column; gap: 8px; padding: 26px 22px; border-radius: 12px; border: 1px solid #e3e3e3; background: #fafafa; min-height: 200px; } .wcard__k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #666; } .wcard__n { font-family: "Coco Comp", var(--display); font-weight: 700; font-size: clamp(32px, 3.2vw, 48px); line-height: 1; margin-top: auto; } .wcard__t { font-family: var(--sans); font-size: 13px; color: #444; } .wcard--us { background: var(--black); color: var(--white); border-color: var(--black); } .wcard--us .wcard__k { color: #bbb; } .wcard--us .wcard__t { color: #ddd; } .worth__fine { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; color: #888; margin: 0; } @media (max-width: 900px) { .worth { grid-template-columns: 1fr; gap: 28px; } .worth__cards { grid-template-columns: 1fr; } .wcard { min-height: 0; } } /* ---------- home v2 (14 Oct): the short bloom block ---------- */ .oil--home { min-height: 760px; } .oil--home .oil__lede { margin-bottom: 28px; } .oil__cta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; } .oil__more { font-family: var(--mono); font-size: 12px; color: #cfcfcf; } .proof__src { font-family: var(--mono); font-size: 10px; color: #8d8d8d; margin-top: 4px; } /* ===================================================================================================== HOME v3 + chrome, styled on davidprotein.com (measured 14 Oct at 1440×900 and 390×844 via headless Chrome). David → ours: Instrument Serif → Coco Comp caps (sized up a touch: compressed caps read smaller); Suisse → Geist; ABC Monument Mono → Geist Mono. Everything else (sizes, gaps, radii, timings) is David's. ===================================================================================================== */ :root { --header-h: 69px; --bar-h: 40px; --ease-ui: cubic-bezier(.4, 0, .2, 1); } /* announcement bar: 40px, 12px underlined line, two 20px arrows framing an 880px message area */ .bar { height: 40px; justify-content: center; gap: 0; border-bottom: 0; } .bar__msgs { flex: 0 1 840px; } .bar__msg { font-family: var(--sans); font-size: 12px; letter-spacing: .01em; color: #dcdcdc; text-underline-offset: 2px; } .bar__arrow { width: 20px; height: 20px; border-radius: 50%; opacity: 1; color: #dcdcdc; font-size: 15px; line-height: 1; transition: color .2s var(--ease-ui), background-color .2s var(--ease-ui); } .bar__arrow:hover { background: #222; } /* header: 69px; nav 14px sans 15px apart; the TikTok button = David's cart pill (36px, 14px sans) */ .header { height: 69px; gap: 30px; padding: 0 20px; border-bottom: 0; } .nav { gap: 15px; font-family: var(--sans); font-size: 14px; letter-spacing: .01em; } .nav a { opacity: 1; transition: opacity .2s var(--ease-ui); } .nav a:hover { opacity: .65; } .header__right { gap: 15px; font-family: var(--sans); font-size: 14px; } .header .pill { height: 36px; padding: 0 15px; font-family: var(--sans); font-size: 14px; letter-spacing: .01em; } html:not(.font-pro) .logo { font-size: 34px; } /* pills everywhere: David's 45px button, 14px mono, 20px side padding, .15s colour transitions */ .pill { height: 45px; padding: 0 20px; font-size: 14px; transition: transform .16s var(--ease-out), background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out, opacity .15s; } .pill--white:hover { opacity: 1; background: #e6e6e6; } .pill--black:hover { opacity: 1; background: #2a2a2a; } .link-u { font-family: var(--mono); font-size: 14px; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: opacity .15s; } .link-u:hover { opacity: .65; } /* ticker: 40px, 14px sans, bullets, round pause at the right (David) */ .ticker { position: relative; height: 40px; border: 0; } .ticker__track { font-family: var(--sans); font-size: 14px; letter-spacing: .01em; } .ticker__track span { padding: 0 9px; } .ticker__track span::before { margin-right: 9px; } .ticker--v3 .ticker__track span { text-transform: uppercase; letter-spacing: .04em; font-size: 12px; padding: 0 16px; } .ticker--v3 .ticker__track span::before { content: "✦"; font-size: 9px; margin-right: 16px; position: relative; top: -1px; } .ticker.is-paused .ticker__track { animation-play-state: paused; } .ticker__pause { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: #333; z-index: 2; } .ticker__pause::before, .ticker__pause::after { content: ""; position: absolute; top: 6px; width: 2px; height: 8px; background: #fff; } .ticker__pause::before { left: 7px; } .ticker__pause::after { left: 11px; } .ticker.is-paused .ticker__pause::after { display: none; } .ticker.is-paused .ticker__pause::before { left: 8px; top: 5px; width: 0; height: 0; background: none; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent #fff; } /* hero: David's slider. Height = viewport − chrome (701px at 900), copy 70px in, 55px headline, 14px line, 45px pill 39px below */ .hero--v3 { height: calc(100svh - 199px); min-height: 560px; max-height: 1000px; } .hero--v3 .hero__copy { left: 70px; top: 50%; transform: translateY(-50%); max-width: 560px; } html:not(.font-pro) .hero--v3 .h1 { font-size: clamp(44px, 4.4vw, 66px); line-height: .98; font-weight: 400; } .hero--v3 .lede { font-family: var(--sans); font-size: clamp(16px, 1.3vw, 19px); font-weight: 400; line-height: 1.35; letter-spacing: .005em; max-width: 44ch; margin: 18px 0 0; } .hero--v3 .hero__copy .hero__line { margin-top: 0; } .hero--v3 .hero__copy .pill { margin-top: 36px; transition: transform .35s var(--ease-ui), background-color .2s ease, color .2s ease, box-shadow .35s var(--ease-ui); } @media (hover: hover) { .hero--v3 .hero__copy .pill:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 28px rgba(0,0,0,.28); } } .hero--v3 .hero__copy .pill:active { transform: scale(.97); } .hero--v3 .hero__dots { left: 70px; bottom: 50px; gap: 5px; } .hero--v3 .hero__dots button { width: 40px; height: 2px; background: rgba(255,255,255,.35); } .hero--v3 .hero__dots button::before { content: ""; position: absolute; inset: -10px 0; } /* bigger tap target, same look */ .hero--v3 .ph--bleed::before { background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,0) 62%); } .hero--v3 .hero__slide .ph > img { transform: scale(1.04); transition: transform 7s linear; } .hero--v3 .hero__slide.is-on .ph > img { transform: scale(1); } /* bands (David alternates full-bleed → white → black → white) */ .band { padding: 80px 20px; } .band--white { background: var(--white); color: var(--black); } .band--black { background: var(--black); color: var(--white); } .band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; } html:not(.font-pro) .band .h2 { font-size: clamp(36px, 3.2vw, 48px); line-height: .95; } .band__tools { display: flex; align-items: center; gap: 30px; } .band__cta { display: flex; justify-content: center; margin-top: 40px; } /* carousel arrows: 30px circles; David on white = grey (disabled) / black; on black = #161616 / white */ .arrows { gap: 5px; } .arrows button { position: relative; width: 30px; height: 30px; border-radius: 30px; background: var(--black); color: var(--white); transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui), opacity .2s; } .arrows button + button { background: var(--black); color: var(--white); } .arrows button::before { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M1 6h10M6.5 1.5 11 6l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M1 6h10M6.5 1.5 11 6l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat; } .arrows button[data-dir="prev"]::before { transform: scaleX(-1); } .arrows button:disabled { background: #dcdcdc; color: var(--white); cursor: default; } .band--black .arrows button { background: var(--white); color: var(--black); } .band--black .arrows button:disabled { background: #161616; color: #6e6e6e; } .arrows.is-static { display: none; } /* progress line under swipe rails (David's core-carousel-progress: 256px, 2px) */ .band__progress { display: none; position: relative; width: min(256px, 60%); height: 2px; margin: 28px auto 0; background: rgba(0,0,0,.18); overflow: hidden; } .band--black .band__progress { background: rgba(255,255,255,.25); } .band__progress i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: currentColor; transition: transform .1s linear; } /* 3. THE SCENTS: David's best-seller card (5px radius, 20px padding, mono chips, swatch label, 18px name, round + button) */ .cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .scard { position: relative; display: flex; flex-direction: column; border-radius: 5px; overflow: hidden; background: #f4f4f5; color: var(--black); } .scard__media { position: relative; aspect-ratio: 4 / 5; border: 0; border-radius: 0; } .scard__media > img { transition: transform .9s cubic-bezier(.16,1,.3,1); } .scard:hover .scard__media > img { transform: scale(1.12); } .scard__chips { position: absolute; top: 20px; left: 20px; right: 20px; z-index: 3; display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; } .scard__chips li { font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--white); padding: 5px; border-radius: 5px; border: 1px solid rgba(255,255,255,.45); background: rgba(0,0,0,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .scard__info { padding: 20px 70px 22px 20px; display: grid; gap: 4px; } .scard__no { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; } .scard__no .dot { width: 7px; height: 7px; } .scard__name { margin: 2px 0 0; font-family: var(--sans); font-weight: 500; font-size: 18px; letter-spacing: .01em; line-height: 1.35; } .scard__tag { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.4; } .scard__story { margin: 4px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.4; color: #6e6e6e; } .scard__notes { margin: 4px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.4; color: #6e6e6e; } .pill--arrow { gap: 10px; } .pill__arrow { font-size: 15px; transition: transform .25s var(--ease-ui); } .pill--arrow:hover .pill__arrow { transform: translate(2px, -2px); } .scard__plus { position: absolute; right: 20px; bottom: 22px; width: 28px; height: 28px; border-radius: 50%; background: var(--black); transition: transform .3s var(--ease-ui), background-color .3s var(--ease-ui); } .scard__plus::before, .scard__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--white); } .scard__plus::after { transform: rotate(90deg); } .scard:hover .scard__plus { transform: rotate(90deg); } .scard .ph.has-img::after { top: auto; bottom: 12px; } .scard--se .scard__media { background: #2a2140; } .scard--cos .scard__media { background: #3a2a10; } .scard--tul .scard__media { background: #0e2e2c; } /* 4. SHOP: David's collection tiles (5px radius, name bottom-left 18px in, chip top-left) */ .tiles3 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tile3 { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 5px; overflow: hidden; } .tile3 .ph { position: absolute; inset: 0; border: 0; } .tile3 .ph > img { transition: transform .9s var(--ease-ui); } .tile3:hover .ph > img { transform: scale(1.04); } .tile3 .ph::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 35%); } .tile3__name { position: absolute; left: 18px; bottom: 16px; z-index: 2; font-family: "Coco Comp", var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(32px, 2.8vw, 44px); line-height: 1; color: var(--white); } .tile3__chip { position: absolute; left: 18px; top: 18px; z-index: 2; font-family: var(--mono); font-size: 12px; line-height: 1.4; padding: 5px; border-radius: 2px; background: #e5deca; color: var(--black); } .tile3 .ph.has-img::after { top: 12px; bottom: auto; } /* 5. THE BLOOM: David's chart block (media left; a 400px column: mono label, 40px headline, hairline rows with 35px titles) */ .bloom3 { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: clamp(40px, 10vw, 150px); align-items: center; padding: 80px 70px 80px 20px; } .bloom3__media { aspect-ratio: 4 / 3; border: 0; border-radius: 5px; background: #ececee; } .bloom3__label { margin: 0 0 10px; font-family: var(--mono); font-size: 12px; } html:not(.font-pro) .bloom3 .h2 { font-size: clamp(36px, 3.2vw, 48px); line-height: .95; } .bloom3__lede { margin: 18px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.4; } .bloom3__chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 22px 0 8px; padding: 0; list-style: none; } .bloom3__chips li { font-family: var(--mono); font-size: 12px; line-height: 1.4; padding: 5px; border-radius: 5px; border: 1px solid #c8c8c8; } .bloom3__row { border-top: 1px solid var(--black); padding: 16px 0 18px; margin-top: 16px; } .bloom3__row h3 { margin: 0; font-family: "Coco Comp", var(--display); font-weight: 700; text-transform: uppercase; font-size: 30px; line-height: 1; letter-spacing: .005em; } .bloom3__row p { margin: 6px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.4; } .bloom3__row--pending[data-ready="false"]::before { position: static; display: inline-block; margin-bottom: 8px; } .bloom3__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 26px; } /* 6. CREATOR RAIL: kept; Kurt 14 Oct: no glow. Heading centred, David's 50px feature size. */ .is-marquee .ugc__item.is-center .ph { box-shadow: none !important; } .home-rail { padding-top: 70px; } html:not(.font-pro) .home-rail .h2 { font-size: clamp(42px, 5.4vw, 88px); line-height: .92; font-weight: 400; -webkit-text-stroke: 0.6px var(--black); paint-order: stroke fill; } /* Kurt 20 Oct: same as the scents band title; the hairline black stroke trims the optical gain of white on black ("weight feels thicker") */ /* footer: David's (18px sign-up line, 54px dark field, mono 12 column heads, 14px links 13px apart, grey wordmark) */ .footer { padding: 40px 70px 0; border-top: 0; } .footer__grid { grid-template-columns: minmax(0, 397px) repeat(4, minmax(0, 1fr)); column-gap: 40px; } .footer__lead { padding-right: 70px; } .signup__title { font-size: 18px !important; margin: 0 0 20px !important; } .signup__field { background: #1f1f1f; border-radius: 2px; padding: 0 6px 0 10px; height: 54px; } .signup__field input { font-size: 14px; padding: 0; } .signup__field button { background: transparent; width: 40px; height: 40px; font-size: 20px; } .signup__field button:hover { background: #2c2c2c; } .signup__fine { font-size: 14px !important; color: var(--white); line-height: 1.45; margin-top: 12px !important; } .footer h4 { font-size: 12px; color: var(--white); letter-spacing: 0; text-transform: none; margin: 0 0 25px; } .footer ul { gap: 13px; font-family: var(--sans); font-size: 14px; letter-spacing: .01em; } .footer ul a { transition: opacity .15s; } .footer ul a:hover { opacity: .65; } .footer__fine { margin-top: 60px; font-family: var(--mono); font-size: 12px; color: var(--white); gap: 20px; } .wordmark { color: #808080; margin-top: 60px; } /* ---------- under 1024px: David's tablet/phone behaviour ---------- */ @media (max-width: 1023px) { .bloom3 { grid-template-columns: minmax(0, 1fr); row-gap: 30px; padding: 50px 15px; } .footer { padding: 40px 15px 0; } .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; } .footer__lead { grid-column: 1 / -1; padding-right: 0; } } @media (max-width: 900px) { .header { height: 64px; padding: 0 15px; gap: 14px; } .bar__msgs { flex-basis: 300px; } .hero--v3 { height: min(calc(100svh - 200px), 640px); min-height: 520px; } .hero--v3 { height: min(calc(100svh - 190px), 680px); } .hero--v3 .hero__slide { position: absolute; display: block; } .hero--v3 .hero__slide .ph { position: absolute; inset: 0; aspect-ratio: auto; } .hero--v3 .hero__copy { position: absolute; left: 15px; right: 15px; top: 28px; padding: 0; transform: none; } html:not(.font-pro) .hero--v3 .h1 { font-size: 42px; } .hero--v3 .hero__copy .pill { margin-top: 26px; } .hero--v3 .hero__dots { left: 15px; bottom: 22px; } .hero--v3 .ph--bleed::before { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%); } .band { padding: 50px 15px; } .band__head { margin-bottom: 20px; } .scents3 .band__title { flex: 1 1 100%; } .scents3 .band__head { padding: 12px 0 8px; margin-bottom: 20px; } .band.scents3 { padding-top: 38px; } .cta-text { font-size: 17px; } .band__tools .arrows { display: none; } .cards3, .tiles3 { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 15px; margin: 0 -15px; padding: 0 15px; scrollbar-width: none; } .cards3::-webkit-scrollbar, .tiles3::-webkit-scrollbar { display: none; } .scard { flex: none; width: 86%; scroll-snap-align: start; } .tile3 { flex: none; width: 86%; aspect-ratio: 4 / 5; scroll-snap-align: start; } .band__progress { display: block; } .band__cta .pill { width: 100%; } .ticker__pause { right: 6px; } } @media (prefers-reduced-motion: reduce) { .hero--v3 .hero__slide .ph > img { transition: none; transform: none; } } /* ---------- THE BLOOM v4: editorial chapters (Byredo's campaign layout, our type and colour) ---------- Byredo: 12px page edge, half-width tall images, text column centred in the other half (~460px), uppercase tracked heads, 14px body, underlined links, a label in the image corner, a product card floating over an image. Ours adds the giant stat. */ .bloom4 { background: var(--white); color: var(--black); padding: 120px 12px 0; overflow: hidden; } /* bottom was 110px; Kurt 20 Oct: the last chapter meets the creator rail */ .bloom4__intro { max-width: 640px; margin: 0 auto 110px; text-align: center; } .bloom4__label, .chap__no { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 18px; } html:not(.font-pro) .bloom4__intro .h2 { font-size: clamp(48px, 6.4vw, 104px); line-height: .9; font-weight: 400; } /* Kurt 20 Oct: same weight as the other section titles */ .bloom4__lede { font-family: var(--sans); font-size: 16px; line-height: 1.45; margin: 24px auto 0; max-width: 40ch; color: #444; } .chap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; min-height: min(92vh, 980px); margin-bottom: 0; } /* Kurt 20 Oct: the boxes meet (was gap 12px / margin 12px) */ .bloom4 .chap:last-of-type { margin-bottom: 0; } .chap--flip .chap__media { order: 2; } .chap__media { position: relative; height: 100%; min-height: 560px; max-height: 980px; border: 0; border-radius: 0; background: #ececee; clip-path: inset(0 0 0 0); } .chap__media > img { transform: scale(1); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); will-change: transform; } .chap__tag { position: absolute; left: 20px; top: 20px; z-index: 3; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 12px rgba(0,0,0,.35); } .chap--flip .chap__tag { left: auto; right: 20px; } .chap__copy { justify-self: center; width: min(460px, 100% - 48px); padding: 40px 0; } .chap__no { display: flex; align-items: center; gap: 12px; } .chap__no i { flex: 0 0 48px; height: 1px; background: currentColor; } .chap__title { margin: 0 0 22px; font-family: "Coco Comp", var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(36px, 3.4vw, 54px); line-height: .92; letter-spacing: .005em; } .chap__copy > p:not(.chap__no):not(.chap__stat):not(.chap__fine) { font-family: var(--sans); font-size: 15px; line-height: 1.5; margin: 0 0 14px; max-width: 42ch; } .chap__fine { font-family: var(--mono); font-size: 11px; color: #777; margin: 18px 0 0; } .chap__line { margin: 6px 0 0; font-family: var(--sans); font-weight: 500; font-size: 17px; line-height: 1.3; text-transform: uppercase; letter-spacing: .01em; } .chap--pending .chap__line { color: #b4b4b8; } .chap__fine--it { font-family: var(--sans); font-style: italic; font-size: 13px; } .chap__line--sent { text-transform: none; letter-spacing: 0; font-size: 16px; margin-top: 10px; } .chap__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--sans); font-weight: 500; font-size: 17px; letter-spacing: .01em; text-transform: uppercase; color: var(--black); text-decoration: none; } .chap__cta span { transition: transform .25s var(--ease-ui); } .chap__cta:hover span { transform: translate(2px, -2px); } @media (max-width: 640px) { .chap__copy p br { display: none; } } .chap__copy .link-u { display: inline-block; margin-top: 10px; } /* the giant number, filled with the three scent colours */ .chap__stat { margin: 0 0 6px; font-family: "Coco Comp", var(--display); font-weight: 700; font-size: clamp(120px, 15vw, 240px); line-height: .8; letter-spacing: -.01em; background: linear-gradient(100deg, var(--se) 0%, var(--cos) 50%, var(--tul) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .chap__chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 22px 0 0; padding: 0; list-style: none; } .chap__chips li { font-family: var(--mono); font-size: 12px; line-height: 1.4; padding: 5px 8px; border-radius: 5px; border: 1px solid #c8c8c8; } .chap__chips li a { text-decoration: underline; text-underline-offset: 3px; } .chap__chips li.is-pending { border-style: dashed; color: #8a8a8a; } /* Byredo's floating product card over the image */ .chap__card { position: absolute; z-index: 4; left: 50%; bottom: 48px; transform: translateX(-50%); display: grid; grid-template-columns: 120px 1fr 28px; align-items: stretch; width: min(400px, calc(100% - 40px)); background: rgba(245,245,245,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--black); border-radius: 5px; overflow: hidden; transition: transform .3s var(--ease-ui), box-shadow .3s var(--ease-ui); } .chap__card:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); } .chap__card-img { position: relative; background: #fff; min-height: 120px; } .chap__card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 60%; } .chap__card-txt { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 16px; } .chap__card-txt small { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #555; } .chap__card-txt strong { font-family: "Coco Comp", var(--display); font-weight: 700; font-size: 26px; line-height: 1; } .chap__card-txt span { font-family: var(--sans); font-size: 13px; } .chap__card-go { position: relative; margin: 12px 12px 0 0; width: 28px; height: 28px; border-radius: 50%; background: var(--black); } .chap__card-go::before { content: ""; position: absolute; inset: 0; margin: auto; width: 11px; height: 11px; background: var(--white); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M2 10 10 2M4 2h6v6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M2 10 10 2M4 2h6v6'/%3E%3C/svg%3E") center / contain no-repeat; } .chap--pending .chap__media { background: radial-gradient(120% 90% at 50% 40%, #f4f4f4 0%, #e4e4e6 100%); border: 1px dashed #c8c8c8; } .chap--pending .chap__media.has-img { border: 0; background: #ececee; } .chap--pending .chap__stat { -webkit-text-fill-color: #d4d4d8; background: none; } .chap[data-ready="false"]::before { position: absolute; } .chap--pending { position: relative; } .bloom4__close { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 110px; } /* scroll choreography: the image unmasks and settles, the copy rises; the number counts up (JS) */ /* Kurt 20 Oct: the scroll unmask (clip-path inset + zoom) made the boxes sit inset with soft edges mid-scroll; removed. Copy fade kept. */ .js-reveal .chap .chap__media { clip-path: inset(0 0 0 0); } .js-reveal .chap .chap__media > img { transform: none; } .js-reveal .chap__copy > * { transition: opacity .9s ease, transform 1s cubic-bezier(.16, 1, .3, 1); } .js-reveal .chap:not(.is-in) .chap__copy > * { opacity: 0; transform: translateY(28px); } .js-reveal .chap.is-in .chap__copy > *:nth-child(2) { transition-delay: .08s; } .js-reveal .chap.is-in .chap__copy > *:nth-child(3) { transition-delay: .16s; } .js-reveal .chap.is-in .chap__copy > *:nth-child(4) { transition-delay: .24s; } .js-reveal .chap.is-in .chap__copy > *:nth-child(n+5) { transition-delay: .32s; } .js-reveal .chap:not(.is-in) .chap__card { opacity: 0; transform: translateX(-50%) translateY(24px); } .js-reveal .chap .chap__card { transition: opacity .8s ease .5s, transform 1s cubic-bezier(.16, 1, .3, 1) .5s, box-shadow .3s; } @media (max-width: 900px) { .bloom4 { padding: 70px 0 0; } .bloom4__intro { margin-bottom: 50px; padding: 0 15px; } .chap { grid-template-columns: 1fr; min-height: 0; gap: 0; margin-bottom: 40px; } .chap--flip .chap__media { order: 0; } .chap__media { height: auto; min-height: 0; aspect-ratio: 4 / 5; } .chap--flip .chap__tag { left: 15px; right: auto; } .chap__tag { left: 15px; top: 15px; } .chap__copy { width: auto; padding: 28px 15px 0; justify-self: stretch; } .chap__stat { font-size: 120px; } .chap__card { bottom: 15px; grid-template-columns: 96px 1fr 28px; } .chap__card-img { min-height: 96px; } .bloom4__close { margin-top: 30px; padding: 0 15px; } .bloom4__close .pill { width: 100%; } } @media (prefers-reduced-motion: reduce) { .js-reveal .chap .chap__media, .js-reveal .chap__copy > *, .js-reveal .chap .chap__card { transition: none !important; clip-path: none !important; opacity: 1 !important; } .chap__media > img { transition: none; transform: none !important; } } .chap__stat { white-space: nowrap; } .chap__stat--long { font-size: clamp(88px, 9.5vw, 156px); } @media (max-width: 900px) { .chap__stat--long { font-size: 96px; } } .chap--pending .chap__tag { display: none; } /* ---------- 4. SHOP = David's tabs_with_media ("Bundle bars."), measured at 1440: section 839 tall; toggle 60px from the top, two 47px pills (12px sans, 15/30 padding) in a #1f1f1f track, inactive text #909090, .7s colour change; headline 45px; bullets 16/22.4 centred; 45px white pill 20px below; image = the right 47%, full height, edge to edge. ---------- */ .tabs4 { display: grid; grid-template-columns: 53fr 47fr; min-height: clamp(640px, 58vw, 900px); background: var(--black); color: var(--white); } .tabs4__copy { position: relative; display: flex; align-items: center; justify-content: center; padding: 140px 40px 100px; } .tabs4__toggle { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); display: flex; padding: 0; border-radius: 999px; background: #1f1f1f; } .tabs4__toggle button { height: 47px; padding: 0 30px; border-radius: 999px; border: 1px solid transparent; font-family: var(--sans); font-size: 12px; letter-spacing: .01em; color: #909090; transition: color .7s var(--ease-ui), background-color .7s var(--ease-ui), border-color .7s var(--ease-ui); } .tabs4__toggle button.is-on { background: var(--black); color: var(--white); border-color: #5a5a5a; } .tabs4__toggle button:not(.is-on):hover { color: #d0d0d0; } .tabs4__panels { display: grid; } .tabs4__panel { grid-area: 1 / 1; text-align: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s ease, transform .7s var(--ease-ui), visibility 0s linear .5s; } .tabs4__panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease .1s, transform .7s var(--ease-ui) .1s, visibility 0s; } .tabs4__title { margin: 0 0 22px; font-family: "Coco Comp", var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 3.9vw, 58px); line-height: .95; letter-spacing: .005em; } .tabs4__list { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 16px; line-height: 22.4px; letter-spacing: .01em; } .tabs4__list li::before { content: "•"; margin-right: 5px; } .tabs4__panel .pill { margin-top: 20px; } .tabs4__eyebrow { margin: 0 0 18px; color: #909090; } .tabs4__sub { margin: 0; font-family: var(--sans); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.2; } .tabs4__para { margin: 18px auto 0; max-width: 44ch; font-family: var(--sans); font-size: 16px; line-height: 1.5; color: #d6d6d6; } html:not(.font-pro) .tabs4__para { font-family: "Cocogoose", var(--display); font-weight: 300; font-size: clamp(13px, 1vw, 15px); line-height: 1.5; letter-spacing: .01em; max-width: 48ch; } .tabs4__fine { margin: 16px 0 0; font-family: var(--sans); font-size: 13px; color: #909090; } @media (max-width: 640px) { .tabs4__para br { display: none; } } .tabs4__media { position: relative; overflow: hidden; min-height: 100%; } .tabs4__media .ph { position: absolute; inset: 0; border: 0; border-radius: 0; opacity: 0; transition: opacity .8s ease; } .tabs4__media .ph.is-on { opacity: 1; } .tabs4__media .ph > img { transform: scale(1.04); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); } .tabs4__media .ph.is-on > img { transform: scale(1); } @media (max-width: 900px) { .tabs4 { grid-template-columns: 1fr; min-height: 0; } .tabs4__media { order: -1; aspect-ratio: 1 / 1; min-height: 0; } .tabs4__copy { flex-direction: column; padding: 30px 15px 60px; } .tabs4__toggle { position: static; transform: none; margin-bottom: 50px; } } @media (prefers-reduced-motion: reduce) { .tabs4__panel, .tabs4__media .ph, .tabs4__media .ph > img { transition: none; transform: none; } } /* ---------- 14 Oct, Kurt's pass ---------- */ /* every button = the shop toggle's pill: 47px tall, 30px each side */ .pill, .pill--big, .pdp .pill--big, .header .pill, .split .pill, .ugc__card .pill { height: 47px; padding: 0 30px; } .tabs4__toggle { top: 96px; } /* the bloom images run to the page edge */ .bloom4 { padding-left: 0; padding-right: 0; } .bloom4__intro, .bloom4__close { padding-left: 15px; padding-right: 15px; } /* creator rail: more air above the title */ .home-rail { padding-top: 130px; } @media (max-width: 900px) { .home-rail { padding-top: 80px; } } /* announcement bar: the line under it is back; messages slide like David's */ .bar { border-bottom: 1px solid var(--line); } .bar__msgs { overflow: hidden; } .bar__track { display: flex; height: 100%; transition: transform .7s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .bar__track .bar__msg { position: static; flex: 0 0 100%; opacity: 1; } /* ticker: David's 12px */ .ticker__track { font-size: 12px; } .ticker__track span { padding: 0 8px; } .ticker__track span::before { margin-right: 8px; } @media (prefers-reduced-motion: reduce) { .bar__track { transition: none; } } /* PDP (14 Oct late): the bloom's media (the pour replaces the SVG), the how-it-works band, the refill scents band sub-line */ .oil__media { position: relative; height: 640px; border-radius: 12px; border: 0; } .oil__media.ph.has-img::after { right: 12px; bottom: 12px; } .steps { background: var(--white); color: var(--black); padding: 80px 20px; } .steps--grey { background: #f4f4f5; } .steps__head { margin-bottom: 30px; } html:not(.font-pro) .steps .h2 { font-size: clamp(36px, 3.2vw, 48px); line-height: .95; } .steps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .step__media { position: relative; aspect-ratio: 4 / 5; border-radius: 5px; border: 0; background: #ececee; } .step__n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; margin: 18px 0 6px; } .step__t { margin: 0 0 8px; font-family: "Coco Comp", var(--display); font-weight: 700; text-transform: uppercase; font-size: 28px; line-height: 1; } .step__p { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.45; max-width: 36ch; } .steps__fine { font-family: var(--mono); font-size: 11px; color: #777; margin: 28px 0 0; } .band__sub { margin: 8px 0 0; font-family: var(--sans); font-size: 14px; color: #6e6e6e; } @media (max-width: 900px) { .oil__media { height: auto; aspect-ratio: 4 / 5; width: 100%; margin-bottom: 24px; } .steps { padding: 50px 15px; } .steps__grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 15px; margin: 0 -15px; padding: 0 15px; scrollbar-width: none; } .steps__grid::-webkit-scrollbar { display: none; } .step { flex: none; width: 76%; scroll-snap-align: start; } } /* footer: big grey wordmark removed (Kurt 23 Oct); the header logo sits above the sign-up line instead */ .footer { padding-bottom: 40px; } .footer__logo { display: inline-block; margin-bottom: 20px; } /* yellow PLANNED badges hidden (Kurt 23 Oct); the data-planned notes stay in the markup and is-live still hides gated blocks */ [data-ready="false"]::before { content: none !important; display: none !important; } /* ---------- body copy in Cocogoose Pro (Kurt 23 Oct: "all body copy should be cocogoose pro except the buttons and the scnt / drop section headers and the no.01 stuff") ---------- --mono / --sans now resolve to Cocogoose, so every paragraph, lede, note, list and review follows; Light (300) as on the shop block. Kept in Geist Mono via --ui: buttons and pills, the nav and top bar, the eyebrow labels, the No. / 01 numbering, footer column heads, small UI tags. */ :root { --ui: "Geist Mono", ui-monospace, Menlo, monospace; --mono: "Cocogoose", "Geist", system-ui, sans-serif; --sans: "Cocogoose", "Geist", system-ui, sans-serif; } body { font-weight: 300; } .lede, .scard__notes, .chap__line, .chap__copy p, .review, .qa summary, .qa .a, .footer ul, .signup__title, .signup__fine, .scent__story, .buy__profile, .prose, .disclosure { font-weight: 300; } .review strong { font-weight: 400; } button, .pill, .cta-text, .nav, .header__right, .label, .bloom4__label, .scard__no, .chap__no, .footer h4, .footer__fine, .qa summary .n, .table th, .ph::after, .pending, .tile__price, .gallery__tag, .ugc__shop, .buy__price, .scent__notes { font-family: var(--ui) !important; } /* Kurt 23 Oct: hero line light, nav / scents sub-line / card notes smaller, shop paragraph more line spacing */ html .hero--v3 .lede { font-weight: 300; } html .nav, html .header__right { font-size: 12px; } html .scents3 .band__sub { font-size: clamp(14px, 1.1vw, 16px); } html .scard__notes { font-size: 12.5px; } html:not(.font-pro) .tabs4__para { line-height: 1.8; } /* Kurt 23 Oct (2): numbers in Cocogoose via the licensed Light; chapter copy + hero line spacing; footer type smaller; nav gap */ :root { --display: "Cocogoose", "Cocogoose Num", "Geist", system-ui, sans-serif; --mono: "Cocogoose", "Cocogoose Num", "Geist", system-ui, sans-serif; --sans: "Cocogoose", "Cocogoose Num", "Geist", system-ui, sans-serif; } .chap__copy > p:not(.chap__no):not(.chap__stat):not(.chap__fine) { line-height: 1.75; } html .hero--v3 .lede { font-weight: 300; line-height: 1.5; } html .footer ul { font-size: 12.5px; gap: 11px; } html .signup__fine { font-size: 11px !important; line-height: 1.55; } html .signup__title { font-size: 16px !important; } html .signup__field input { font-weight: 300; } html .nav { gap: 26px; } .num { -webkit-text-stroke: .05em currentColor; } /* Kurt 23 Oct: every pill gets the hero button's hover (lift, grow, shadow, press) */ .pill { transition: transform .35s var(--ease-ui), background-color .2s ease, color .2s ease, box-shadow .35s var(--ease-ui), opacity .2s; } @media (hover: hover) { .pill:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 28px rgba(0,0,0,.28); } } .pill:active { transform: scale(.97); } /* hero: bottle cut-out on the right, centred vertically (Kurt 23 Oct) */ .hero__bottle { position: absolute; z-index: 2; right: 4%; top: 50%; height: 62%; width: auto; transform: translateY(-50%); filter: drop-shadow(0 36px 60px rgba(0,0,0,1)); pointer-events: none; } @media (max-width: 900px) { .hero__bottle { height: 52%; right: 5%; top: auto; bottom: 6%; transform: none; } } /* Kurt 23 Oct: hero sub-lines slightly smaller with more line spacing; top announcement smaller */ html .hero--v3 .lede { font-size: clamp(14.5px, 1.15vw, 17px); line-height: 1.65; } html .bar__msg { font-size: 10.5px; } /* ticker: equal space either side of the star (Kurt 23 Oct) — the gap before it was two paddings (32px), after it one margin (16px) */ .ticker--v3 .ticker__track span { padding: 0 24px 0 0; } .ticker--v3 .ticker__track span::before { margin-right: 24px; } /* ---------- your move: closing CTA under the creator rail (Kurt 23 Oct) ---------- */ .move { background: var(--black); color: var(--white); display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 40px 70px 20px; gap: 40px; } .move__copy { text-align: center; display: flex; flex-direction: column; align-items: center; } .move__eyebrow { margin: 0 0 18px; color: #909090; } .move__title { margin: 0 0 18px; font-family: "Coco Comp", var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 3.9vw, 58px); line-height: .95; letter-spacing: .005em; } .move__sub { margin: 0 0 30px; font-family: var(--sans); font-weight: 300; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.3; } .move__media { display: flex; justify-content: center; } .move__media img { width: 100%; max-width: 640px; height: auto; display: block; } @media (max-width: 900px) { .move { grid-template-columns: 1fr; padding: 60px 15px 10px; gap: 10px; } .move__media img { max-width: 460px; } } /* Kurt 23 Oct: less space between the creator rail and Your move; the tighter trio image (pre-canvas version) */ .home-rail { padding-bottom: 24px; } .move { padding-top: 0; } @media (max-width: 900px) { .move { padding-top: 20px; } } /* Kurt 23 Oct: back to the wide fade-to-black trio, smaller */ .move__media img { max-width: 560px; } @media (max-width: 900px) { .move__media img { max-width: 380px; } } /* Kurt 23 Oct: copy and trio each ~3% nearer the centre; eyebrow one weight up (Geist Mono 400 -> 500) */ @media (min-width: 901px) { .move { padding-left: calc(70px + 3vw); padding-right: calc(70px + 3vw); } } .move__eyebrow { font-weight: 500; } /* Kurt 23 Oct: scent card names one weight down (Regular -> the licensed Light); the "1" no longer needs the bold-matching stroke */ html .scard__name { font-weight: 300; } .scard__name .num { -webkit-text-stroke: 0; } /* Kurt 23 Oct: "Good luck picking a favourite." as its own line, same weight and colour as the body; "You get all three." ~12% smaller */ html .tabs4__sub { font-size: clamp(18px, 1.5vw, 23px); } html:not(.font-pro) .tabs4__kicker { margin-top: 14px; } /* Kurt 23 Oct: "Everyone knows you cleaned." to match the weight of "We don't name scents after flowers." Same face, size and weight already; white on black reads heavier. The old 0.6px stroke sat UNDER the fill (paint-order: stroke) so it trimmed nothing: draw a black stroke OVER the fill so it shaves each edge. */ html:not(.font-pro) .home-rail .h2 { -webkit-text-stroke: 1px var(--black); paint-order: normal; } /* Kurt 23 Oct: Dallas hero (T73d). Desktop: centred. Phones show only the middle third, so shift right to keep her, the vial and the skyline */ .hero__img--dallas { object-position: center center; } @media (max-width: 900px) { .hero__img--dallas { object-position: 66% center; } } /* Kurt 23 Oct (late): scent card names slightly heavier than Light without the trial Regular: a hairline stroke on the licensed Light */ html .scard__name { -webkit-text-stroke: 0.35px currentColor; paint-order: stroke fill; } /* LIVE build */ .is-dead { cursor: default; }