/* ============================================================================= Rosée — Parisian haute-beauté boutique theme ============================================================================= ARCHITECTURE, in the order it matters: 1. `.rs-container` is the ONLY thing that sets horizontal insets. Every band on the site — hero included — puts its content inside one. Nothing gets hand-rolled padding. A hero with `padding: 6rem 0` while everything else sat in a max-width container is a bug this catalogue has shipped: the hero copy ends up flush against the raw viewport edge and visibly out of line with the nav directly above it. 2. The page is FLOATING CARDS ON A SILK GROUND. Section wrappers are transparent so the WebGL canvas shows in the gaps; the content itself lives on near-opaque panels. This is a legibility strategy, not only a look: body copy never sits directly on the animated background, so its contrast ratio is a property of the panel, not of whatever the shader happens to be doing. The few things that DO sit on the ground (section headings) get `.rs-head`'s own radial veil. 3. Article body copy is scoped under `.rs-prose`, and no layout class name is ever reused inside it. A global `.wl-section{padding:5rem 0}` silently overridden by a later `.wl-section{padding-top:2rem}` written for article chapters once broke every section on a sibling theme. 4. Every flex row that can contain long text carries `min-width: 0`. Flex items default to `min-width: auto`, which refuses to shrink below content size and pushes the page wider than the viewport. That bug hit one theme twice in the same build. ============================================================================= */ /* ------------------------------------------------------------------ tokens */ :root { --rs-ground: #fdf8f7; --rs-panel: #ffffff; --rs-panel-soft: #fdf3f4; --rs-ink: #2b1b22; --rs-ink-soft: #6e5a63; --rs-rose: #b76e79; --rs-rose-deep: #934c56; --rs-rose-soft: #e8b4b8; --rs-veil: #fae3dc; --rs-line: #f0d9dc; --rs-gold: #c9a25f; --rs-shadow-sm: 0 1px 2px rgba(147, 76, 86, .05), 0 6px 16px -10px rgba(147, 76, 86, .18); --rs-shadow-md: 0 2px 4px rgba(147, 76, 86, .04), 0 18px 40px -22px rgba(147, 76, 86, .28); --rs-shadow-lg: 0 4px 8px rgba(147, 76, 86, .05), 0 40px 80px -40px rgba(147, 76, 86, .38); --rs-radius: 2.5rem; --rs-radius-sm: 1.25rem; --rs-radius-xs: .75rem; --rs-gutter: clamp(1.15rem, 4vw, 3rem); --rs-max: 76rem; /* Type, bilingual. The CJK face is named through ONE indirection, `--rs-cjk`, rather than being written into each stack. In English `--rs-cjk` resolves to the Latin serif the page is already using, so naming it costs nothing; the `:root:lang(zh)` block further down swaps it for Noto Serif SC, and every stack picks the change up at once. That indirection is not decoration. Noto Serif SC is 11.4 MB of webfont and inc/setup.php does not enqueue it at all unless the active language is Chinese — but a visitor on a Chinese-locale machine may well have the face installed locally, and a stack that named it unconditionally would render the English site in it. `--rs-body-face` is separate because Chinese wants the CJK face FIRST for body copy while English wants Cormorant. */ --rs-cjk: 'Cormorant Garamond'; --rs-body-face: 'Cormorant Garamond'; --rs-display: 'Italiana', 'Playfair Display', var(--rs-cjk), Georgia, serif; --rs-serif: 'Playfair Display', 'Cormorant Garamond', var(--rs-cjk), Georgia, serif; --rs-quote: 'Cormorant Garamond', var(--rs-cjk), Georgia, serif; --rs-sans: 'Jost', var(--rs-cjk), system-ui, -apple-system, 'Segoe UI', sans-serif; --rs-body: var(--rs-body-face), Georgia, serif; --rs-ease: cubic-bezier(.16, 1, .3, 1); } /* The four customizer palettes. `data-rs-palette` is stamped on by header.php for first paint and rewritten by customizer.js on load, so the very first frame is already the saved palette instead of flashing default. */ :root[data-rs-palette="champagne-nude"] { --rs-ground: #fdfbf7; --rs-panel-soft: #fdf6ec; --rs-rose: #c59b6d; --rs-rose-deep: #8a6236; --rs-rose-soft: #e6cfae; --rs-veil: #faeedb; --rs-line: #efe0c9; --rs-gold: #b98b45; } :root[data-rs-palette="blush-peony"] { --rs-ground: #fef7f9; --rs-panel-soft: #fdeff3; --rs-rose: #d86a82; --rs-rose-deep: #9c3450; --rs-rose-soft: #f4b6c4; --rs-veil: #fce2ea; --rs-line: #f7d4de; --rs-gold: #cf9a6d; } :root[data-rs-palette="velvet-mauve"] { --rs-ground: #fbf7fb; --rs-panel-soft: #f8f0f8; --rs-rose: #9a6b8c; --rs-rose-deep: #6d4463; --rs-rose-soft: #d5b6cd; --rs-veil: #f4e5f2; --rs-line: #ecdcea; --rs-gold: #b08a6b; } /* Font pairings from the customizer. They go through `--rs-cjk` like every other stack, so switching language and switching display face stay independent of each other. */ :root[data-rs-font="playfair"] { --rs-display: 'Playfair Display', var(--rs-cjk), Georgia, serif; } :root[data-rs-font="cormorant"] { --rs-display: 'Cormorant Garamond', var(--rs-cjk), Georgia, serif; --rs-serif: 'Cormorant Garamond', var(--rs-cjk), Georgia, serif; } /* ------------------------------------------------------------- language */ /* Chinese. `:lang(zh)` matches ``, which is what inc/i18n.php emits, so the typography is driven by the document's own declared language rather than by a second source of truth. */ :root:lang(zh) { --rs-cjk: 'Noto Serif SC'; --rs-body-face: 'Noto Serif SC', 'Cormorant Garamond'; } /* LINING FIGURES, EVERYWHERE. Cormorant Garamond's default numeral set is oldstyle: 0 sits at x-height with no distinguishing shape, so `ΔE00` renders as `ΔEoo` and `1991` bobs up and down. Nobody had seen this before, because body copy used to resolve to Noto Serif SC first and Noto has only lining figures — making English resolve to Cormorant is what exposed it. Oldstyle figures are lovely in running prose and wrong here: this theme's copy is full of values a reader is meant to read as values — ΔE00, CIELAB coordinates, ITA angles, INCI percentages, prices, shade codes. Lining figures also make the two languages agree, which they now must. */ body { font-variant-numeric: lining-nums; } /* LEADING IS PER LANGUAGE. Every line-height in this file was set against Chinese, which wants a lot of air between lines — 1.85 body, 2.0 in article prose. Latin copy at the same values reads as a stack of separate lines rather than a paragraph, and Cormorant Garamond's small x-height exaggerates it further. These are the same rhythm one step tighter, which is where an English editorial serif actually sits. */ .rs-lang-en { line-height: 1.7; } .rs-lang-en .rs-prose { line-height: 1.78; } .rs-lang-en .rs-hero__sub, .rs-lang-en .rs-single__lede, .rs-lang-en .rs-lab-body { line-height: 1.75; } .rs-lang-en .rs-head__lede, .rs-lang-en .rs-footer__blurb, .rs-lang-en .rs-newsletter p { line-height: 1.72; } .rs-lang-en .rs-card__excerpt { line-height: 1.7; } /* The +0.01em body tracking opens up a CJK line usefully and only loosens a Latin one. */ .rs-lang-en { letter-spacing: normal; } /* English wants ordinary Latin wrapping. The `line-break: strict` kinsoku rules scattered through this file are inert on Latin text — they only govern where a break may fall inside a CJK run — so they can stay. What English DOES want and Chinese does not is hyphenation: without it, `overflow-wrap: break-word` is the only thing standing between a long word and a horizontal scrollbar, and it breaks mid-word with no hyphen, which looks like a rendering fault. Hyphenation is scoped to running copy; headings and UI labels are left alone, where a hyphen would read as a typo. */ .rs-lang-en .rs-prose p, .rs-lang-en .rs-prose li, .rs-lang-en .rs-head__lede, .rs-lang-en .rs-card__excerpt, .rs-lang-en .rs-note { hyphens: auto; -webkit-hyphens: auto; } /* `text-wrap: balance` is right for both languages on short headings, but on a long English lede it produces a very ragged block; `pretty` is the better default there and only costs the last line. */ .rs-lang-en .rs-head__lede { text-wrap: pretty; } /* The switcher itself. Two links, hairline divider between them, sized so the pair never becomes the widest thing in the header row at 360px. */ .rs-langsw { display: inline-flex; align-items: center; flex: none; min-width: 0; gap: .1rem; padding: .12rem; border: 1px solid var(--rs-line); border-radius: 999px; background: color-mix(in srgb, var(--rs-panel-soft) 70%, transparent); } .rs-langsw__item { display: inline-flex; align-items: center; justify-content: center; min-width: 2.35rem; padding: .3rem .5rem; border-radius: 999px; font-family: var(--rs-sans); font-size: .72rem; font-weight: 500; letter-spacing: .06em; line-height: 1; white-space: nowrap; text-decoration: none; color: var(--rs-ink-soft); transition: color .3s var(--rs-ease), background-color .3s var(--rs-ease); } a.rs-langsw__item:hover, a.rs-langsw__item:focus-visible { color: var(--rs-rose-deep); background: var(--rs-veil); } .rs-langsw__item.is-active { color: var(--rs-ground); background: var(--rs-rose-deep); } /* The mobile copy lives inside .rs-mobilenav, which is display:none until the burger opens it, so it only needs its own spacing. The header copy hides at exactly the breakpoint where the burger appears (71.99em, matching the .rs-nav / .rs-burger rule further down) so the two are never both on screen and the header row never has to fit both. */ .rs-langsw--mobile { display: none; margin-top: 1.1rem; } .rs-mobilenav .rs-langsw--mobile { display: inline-flex; } @media (max-width: 71.99em) { .rs-langsw--header { display: none; } } /* -------------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The canvas paints the ground; without this the html element's default white shows through for one frame on load. */ background: var(--rs-ground); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { margin: 0; /* Deliberately transparent so the fixed canvas behind it is visible. An opaque body background is the single most common way a persistent GPU layer ends up rendering perfectly and being seen by nobody. */ background: transparent; color: var(--rs-ink); font-family: var(--rs-body); font-size: 1rem; line-height: 1.85; letter-spacing: .01em; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } /* The `hidden` attribute has to actually hide things. The UA rule is `[hidden]{display:none}` at element specificity, so ANY class selector that sets `display` beats it — `.rs-lookbook{display:grid}` silently un-hid every `hidden` pane on the page, and both lookbook editorials and both before/after comparisons rendered at once with their tab switchers appearing to do nothing. This one line is the fix, and it is why normalize stylesheets have carried it for a decade. */ [hidden] { display: none !important; } a { color: var(--rs-rose-deep); text-decoration-thickness: 1px; text-underline-offset: .22em; } a:hover { color: var(--rs-ink); } :focus-visible { outline: 2px solid var(--rs-rose-deep); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--rs-veil); color: var(--rs-rose-deep); } .rs-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .rs-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--rs-panel); color: var(--rs-ink); padding: .8rem 1.4rem; border-radius: 999px; box-shadow: var(--rs-shadow-md); font-family: var(--rs-sans); transition: top .2s var(--rs-ease); } .rs-skip:focus { top: 1rem; } /* ------------------------------------------------------- background canvas */ .rs-silk { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } /* Static fallback for reduced-motion, Save-Data and no-WebGL2. Built to look like a deliberate ivory-and-rose ground rather than a failure state. */ .rs-no-gl body, .rs-fallback { background-color: var(--rs-ground); background-image: radial-gradient(at 0% 0%, color-mix(in srgb, var(--rs-veil) 70%, transparent) 0, transparent 52%), radial-gradient(at 100% 4%, color-mix(in srgb, var(--rs-rose-soft) 34%, transparent) 0, transparent 46%), radial-gradient(at 84% 96%, color-mix(in srgb, var(--rs-veil) 62%, transparent) 0, transparent 50%), radial-gradient(at 8% 88%, color-mix(in srgb, var(--rs-rose-soft) 26%, transparent) 0, transparent 44%); background-attachment: fixed; } @supports not (background: color-mix(in srgb, red 50%, blue)) { .rs-no-gl body { background-image: linear-gradient(160deg, #fdf8f7 0%, #faeef0 46%, #fdf8f7 100%); } } /* Every direct child of body that carries its own surface must establish a stacking context. A `position: static` element cannot sit above a fixed `z-index: 0` canvas no matter what z-index you give it — the canvas punches straight through. This one line is the fix for that bug class. */ .rs-shell, .rs-header, .rs-main, .rs-footer, .rs-drawer, .rs-modal { position: relative; z-index: 1; } /* --------------------------------------------------------------- container */ .rs-container { width: 100%; max-width: var(--rs-max); margin-inline: auto; padding-inline: var(--rs-gutter); /* min-width:0 so a wide child (a table, a long unbroken URL) shrinks instead of pushing the document wider than the viewport. */ min-width: 0; } .rs-container--wide { max-width: 88rem; } .rs-container--narrow { max-width: 46rem; } .rs-section { padding-block: clamp(3.5rem, 8vw, 7rem); } .rs-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } /* ---------------------------------------------------------------- headings */ .rs-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); position: relative; } .rs-head--center { margin-inline: auto; text-align: center; } .rs-head--start { text-align: start; } /* The scrim. Section headings are the one place text sits directly on the canvas, so they carry their own soft veil of the ground colour. */ .rs-head::before { content: ''; position: absolute; /* The inline bleed must never exceed the SMALLEST value --rs-gutter can take (1.15rem), or the veil pokes past the container and the whole document gains a horizontal scrollbar on phones. An absolutely positioned pseudo-element still contributes to scrollable overflow, and because it is a pseudo-element it is invisible to a querySelectorAll('*') overflow scan — which is exactly how this hid. Vertical bleed is free. */ inset-block: -2.5rem; inset-inline: -1rem; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--rs-ground) 92%, transparent) 0%, color-mix(in srgb, var(--rs-ground) 74%, transparent) 46%, transparent 78%); z-index: -1; pointer-events: none; border-radius: 50%; } .rs-head__index { display: block; font-family: var(--rs-sans); font-size: .68rem; font-weight: 500; letter-spacing: .42em; color: var(--rs-rose); margin-bottom: .9rem; } .rs-eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-family: var(--rs-sans); font-size: .68rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--rs-rose-deep); } .rs-eyebrow .rs-icon { color: var(--rs-rose); flex: none; } .rs-head__title { margin: 0; font-family: var(--rs-display); font-weight: 400; font-size: clamp(1.85rem, 1.1rem + 3vw, 3.4rem); line-height: 1.2; letter-spacing: .01em; color: var(--rs-ink); /* Chinese line breaking, corrected twice. `word-break: keep-all` is for Korean: in a CJK run it forbids EVERY break point, so a long Chinese headline refuses to wrap at all and pushes the document wider than the viewport. Adding `overflow-wrap: anywhere` stopped the overflow but broke at arbitrary points, stranding single characters on their own line. Chinese is supposed to break between characters. `line-break: strict` is the right tool: it keeps that natural per-character breaking while applying kinsoku — no break before 、。：！？ or after an opening bracket. `text-wrap: balance` then evens out the line lengths so a heading does not end on a lone character. */ line-break: strict; overflow-wrap: break-word; /* balance, not pretty: `pretty` only tunes the last line, which still left a two-character tail alone on line two of a centred Chinese section heading. `balance` evens the lines instead. */ text-wrap: balance; } .rs-head__lede { margin: 1.1rem 0 0; color: var(--rs-ink-soft); font-size: .95rem; line-height: 1.9; } .rs-head--center .rs-head__lede { margin-inline: auto; max-width: 38rem; } /* Hairline rule with a centred rosette — the theme's recurring divider. */ .rs-rule { display: flex; align-items: center; gap: .7rem; margin-top: 1.6rem; } .rs-head--center .rs-rule { justify-content: center; } .rs-rule i { display: block; width: clamp(2rem, 8vw, 4.5rem); height: 1px; background: var(--rs-line); } .rs-rule b { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--rs-rose); opacity: .7; } /* ------------------------------------------------------------------ header */ .rs-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--rs-ground) 82%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid transparent; transition: background .35s var(--rs-ease), border-color .35s var(--rs-ease), padding .35s var(--rs-ease); padding-block: 1.1rem; } .rs-header.is-stuck { background: color-mix(in srgb, var(--rs-ground) 94%, transparent); border-bottom-color: var(--rs-line); padding-block: .7rem; box-shadow: 0 12px 30px -26px rgba(147, 76, 86, .5); } .rs-header__bar { display: flex; align-items: center; gap: 1rem; min-width: 0; } .rs-brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; white-space: nowrap; /* min-width:0 + the marque's own truncation: without this the brand block and the action cluster fight for space and the header overflows at 360px. */ min-width: 0; flex: 0 0 auto; } .rs-brand__mark { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, var(--rs-rose), var(--rs-rose-soft) 55%, var(--rs-gold)); padding: 1.5px; } .rs-brand__mark span { width: 100%; height: 100%; border-radius: 50%; background: var(--rs-ground); display: grid; place-items: center; font-family: var(--rs-display); font-size: .95rem; color: var(--rs-rose-deep); } .rs-brand__text { min-width: 0; display: flex; flex-direction: column; line-height: 1; } .rs-brand__name { font-family: var(--rs-display); font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem); letter-spacing: .06em; color: var(--rs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-brand__tag { margin-top: .38rem; font-family: var(--rs-sans); font-size: .53rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--rs-rose-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-nav { margin-inline: auto; min-width: 0; } .rs-nav ul { display: flex; align-items: center; gap: clamp(.85rem, 1.5vw, 1.6rem); list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; } .rs-nav a { font-family: var(--rs-sans); font-size: .74rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--rs-ink); text-decoration: none; padding-block: .35rem; border-bottom: 1px solid transparent; white-space: nowrap; transition: color .2s, border-color .2s; } .rs-nav a:hover, .rs-nav .current-menu-item > a { color: var(--rs-rose-deep); border-bottom-color: var(--rs-rose); } .rs-actions { display: flex; align-items: center; gap: .4rem; flex: none; } .rs-iconbtn { appearance: none; border: 1px solid var(--rs-line); background: color-mix(in srgb, var(--rs-panel) 80%, transparent); color: var(--rs-ink); width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s var(--rs-ease); position: relative; } .rs-iconbtn:hover { background: var(--rs-veil); border-color: var(--rs-rose-soft); color: var(--rs-rose-deep); transform: translateY(-1px); } .rs-iconbtn[aria-pressed="true"] { background: var(--rs-veil); border-color: var(--rs-rose); color: var(--rs-rose-deep); } .rs-iconbtn__count { position: absolute; top: -.25rem; inset-inline-end: -.25rem; min-width: 1.15rem; height: 1.15rem; padding-inline: .22rem; border-radius: 999px; background: var(--rs-rose); color: #fff; font-family: var(--rs-sans); font-size: .6rem; font-weight: 600; display: grid; place-items: center; } .rs-iconbtn__count:empty, .rs-iconbtn__count[hidden] { display: none; } .rs-burger { display: none; } /* Mobile drawer nav */ .rs-mobilenav { display: none; border-top: 1px solid var(--rs-line); margin-top: 1rem; padding-top: 1rem; } .rs-mobilenav.is-open { display: block; } .rs-mobilenav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; } .rs-mobilenav a { display: block; padding: .7rem .25rem; font-family: var(--rs-sans); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rs-ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--rs-line) 55%, transparent); } .rs-mobilenav a:hover { color: var(--rs-rose-deep); } /* One density step before the burger. MEASURED. `.rs-brand` is `flex: 0 0 auto` and `.rs-actions` is `flex: none`, so `.rs-nav` is the only item in the header row that can give — and its list is `nowrap`, so it does not shrink, it overflows, and the overflow slides underneath the action cluster. At 1152px, the exact width where the full nav first appears, the English labels needed 1065px against 1060px available: a 6px overlap, and the language switch was painted over the last nav item. The Chinese labels fit with 156px to spare at the same width, which is the point — this is a bug a translation introduces, not one a layout change does, and it only shows up once the source language is the wordier one. Trimming the tracking and the gap for the last 50px before the burger buys about 45px, which clears it with room for a merchant whose own labels run a little longer. */ @media (max-width: 74.99em) { .rs-nav ul { gap: .8rem; } .rs-nav a { letter-spacing: .14em; } } /* The full nav needs real room: six items of tracked uppercase plus the brand lockup plus four action buttons. Below this the nav collapses to the burger rather than wrapping onto a second line and shoving the brand into an ellipsis. */ @media (max-width: 71.99em) { .rs-nav { display: none; } .rs-burger { display: grid; } .rs-actions .rs-iconbtn--optional { display: none; } } /* ------------------------------------------------------------------ panels */ .rs-panel { background: color-mix(in srgb, var(--rs-panel) 88%, transparent); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); border: 1px solid var(--rs-line); border-radius: var(--rs-radius); box-shadow: var(--rs-shadow-md); /* Establishes its own stacking context — see the note by .rs-shell. */ position: relative; z-index: 1; overflow: hidden; } .rs-panel--solid { background: var(--rs-panel); backdrop-filter: none; -webkit-backdrop-filter: none; } .rs-panel--soft { background: color-mix(in srgb, var(--rs-panel-soft) 92%, transparent); } .rs-panel--ink { background-color: #2b1b22; background-image: linear-gradient(150deg, #2b1b22, #3a222e 55%, #1f1318); border-color: rgba(232, 180, 184, .18); color: color-mix(in srgb, var(--rs-veil) 90%, #fff); } .rs-panel--ink .rs-head__title, .rs-panel--ink h2, .rs-panel--ink h3 { color: #fff; } .rs-panel--ink .rs-eyebrow { color: var(--rs-rose-soft); } /* ------------------------------------------------------------------ buttons */ .rs-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.35rem; border-radius: 999px; border: 1px solid transparent; font-family: var(--rs-sans); font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: transform .2s var(--rs-ease), background .2s, color .2s, border-color .2s, box-shadow .2s; min-width: 0; } .rs-btn:hover { transform: translateY(-1px); } .rs-btn:active { transform: translateY(0); } .rs-btn .rs-icon { flex: none; } .rs-btn--solid { background: linear-gradient(100deg, var(--rs-rose-deep), var(--rs-rose) 58%, var(--rs-rose-soft)); color: #fff; box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--rs-rose-deep) 80%, transparent); } .rs-btn--solid:hover { color: #fff; box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--rs-rose-deep) 85%, transparent); } .rs-btn--ghost { background: color-mix(in srgb, var(--rs-panel) 85%, transparent); border-color: var(--rs-line); color: var(--rs-rose-deep); } .rs-btn--ghost:hover { background: var(--rs-veil); border-color: var(--rs-rose-soft); color: var(--rs-rose-deep); } .rs-btn--quiet { background: none; border-color: transparent; color: var(--rs-ink-soft); } .rs-btn--quiet:hover { color: var(--rs-ink); } .rs-btn--sm { padding: .5rem 1rem; font-size: .66rem; } .rs-btn--block { width: 100%; } .rs-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } /* Filter pills */ .rs-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.5rem; } .rs-pill { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--rs-line); background: color-mix(in srgb, var(--rs-panel) 82%, transparent); color: var(--rs-ink-soft); font-family: var(--rs-sans); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s; } .rs-pill:hover { color: var(--rs-ink); border-color: var(--rs-rose-soft); } .rs-pill.is-active { background: linear-gradient(100deg, var(--rs-rose-deep), var(--rs-rose)); border-color: transparent; color: #fff; } .rs-pill__count { font-size: .62rem; opacity: .7; } /* -------------------------------------------------------------------- hero */ .rs-hero { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(3rem, 7vw, 6rem); } .rs-hero__frame { display: grid; grid-template-columns: 1fr; } @media (min-width: 60em) { .rs-hero__frame { grid-template-columns: 1.08fr .92fr; } } .rs-hero__copy { padding: clamp(1.9rem, 4vw, 3.6rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-width: 0; } .rs-hero__slide { min-width: 0; } .rs-hero__slide[hidden] { display: none; } .rs-hero__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.3rem; } .rs-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .8rem; border-radius: 999px; background: var(--rs-veil); color: var(--rs-rose-deep); border: 1px solid color-mix(in srgb, var(--rs-rose-soft) 60%, transparent); font-family: var(--rs-sans); font-size: .6rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; } .rs-tag--plain { background: transparent; border-color: var(--rs-line); color: var(--rs-ink-soft); } .rs-hero__french { display: block; margin-bottom: .6rem; font-family: var(--rs-quote); font-style: italic; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); letter-spacing: .05em; color: var(--rs-rose-deep); } .rs-hero__title { margin: 0; font-family: var(--rs-display); font-weight: 400; font-size: clamp(2rem, 1.1rem + 3.6vw, 3.9rem); line-height: 1.14; letter-spacing: .01em; line-break: strict; overflow-wrap: break-word; text-wrap: pretty; } .rs-hero__sub { margin: 1.15rem 0 0; max-width: 34rem; color: var(--rs-ink-soft); font-size: .95rem; line-height: 1.95; } .rs-hero__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .7rem; margin-top: 1.8rem; } .rs-fact { padding: .85rem 1rem; border-radius: var(--rs-radius-sm); background: color-mix(in srgb, var(--rs-panel-soft) 80%, transparent); border: 1px solid var(--rs-line); min-width: 0; } .rs-fact dt { display: flex; align-items: center; gap: .35rem; font-family: var(--rs-sans); font-size: .58rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--rs-rose-deep); } .rs-fact dd { margin: .35rem 0 0; font-size: .82rem; color: var(--rs-ink); line-height: 1.5; } .rs-hero__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-top: 1.6rem; border-top: 1px solid var(--rs-line); justify-content: space-between; } .rs-hero__ctas { display: flex; flex-wrap: wrap; gap: .6rem; min-width: 0; } .rs-hero__nav { display: flex; align-items: center; gap: .4rem; } .rs-dots { display: flex; align-items: center; gap: .4rem; margin-inline-end: .4rem; } .rs-dot { appearance: none; border: 0; cursor: pointer; padding: 0; width: .5rem; height: .5rem; border-radius: 999px; background: var(--rs-rose-soft); transition: width .3s var(--rs-ease), background .3s; } .rs-dot[aria-selected="true"] { width: 1.6rem; background: var(--rs-rose); } .rs-hero__media { position: relative; min-height: 22rem; background: var(--rs-veil); overflow: hidden; } .rs-hero__media img { width: 100%; height: 100%; object-fit: cover; } .rs-hero__figure { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--rs-ease); } .rs-hero__figure.is-active { opacity: 1; } .rs-hero__figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(43, 27, 34, .55), transparent 46%); } .rs-hero__caption { position: absolute; inset-inline: 1.2rem; bottom: 1.2rem; z-index: 2; padding: .9rem 1.1rem; border-radius: var(--rs-radius-sm); background: color-mix(in srgb, var(--rs-panel) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, #fff 60%, transparent); box-shadow: var(--rs-shadow-md); min-width: 0; } .rs-hero__caption b { display: block; font-family: var(--rs-serif); font-size: .88rem; font-weight: 600; } .rs-hero__caption span { display: block; margin-top: .2rem; font-size: .72rem; color: var(--rs-ink-soft); } /* ------------------------------------------------------------------- cards */ .rs-grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); } .rs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); } .rs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); } .rs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } /* Cards fill their grid track so every card in a row ends on the same line. The track stretches the wrapper; without this the card inside it is sized by its own content and a longer title leaves one card hanging lower. */ .rs-grid > * { display: flex; min-width: 0; } .rs-grid > * > .rs-card { flex: 1 1 auto; } .rs-card { position: relative; display: flex; flex-direction: column; background: color-mix(in srgb, var(--rs-panel) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--rs-line); border-radius: var(--rs-radius); overflow: hidden; box-shadow: var(--rs-shadow-sm); transition: transform .45s var(--rs-ease), box-shadow .45s var(--rs-ease), border-color .3s; min-width: 0; } .rs-card:hover { transform: translateY(-4px); box-shadow: var(--rs-shadow-lg); border-color: var(--rs-rose-soft); } .rs-card[hidden] { display: none; } .rs-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rs-veil); } .rs-card__media--tall { aspect-ratio: 3 / 4; } .rs-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--rs-ease); } .rs-card:hover .rs-card__media img { transform: scale(1.045); } .rs-thumb-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(140deg, var(--rs-veil), var(--rs-panel-soft)); } .rs-thumb-fallback span { font-family: var(--rs-display); font-size: 2.4rem; color: var(--rs-rose); opacity: .5; letter-spacing: .06em; } .rs-card__badges { position: absolute; top: 1rem; inset-inline-start: 1rem; z-index: 2; } .rs-badges { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; } .rs-badge { padding: .28rem .7rem; border-radius: 999px; font-family: var(--rs-sans); font-size: .58rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; background: color-mix(in srgb, var(--rs-panel) 94%, transparent); color: var(--rs-rose-deep); border: 1px solid var(--rs-line); box-shadow: var(--rs-shadow-sm); } .rs-badge--editor { background: var(--rs-ink); color: var(--rs-veil); border-color: transparent; } .rs-card__body { padding: clamp(1.15rem, 2.2vw, 1.7rem); display: flex; flex-direction: column; gap: .65rem; flex: 1; min-width: 0; } .rs-card__meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; min-width: 0; } .rs-card__collection, .rs-card__time { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--rs-sans); font-size: .6rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--rs-rose-deep); text-decoration: none; min-width: 0; } .rs-card__time { color: var(--rs-ink-soft); } .rs-card__french { margin: 0; font-family: var(--rs-quote); font-style: italic; /* rose-DEEP, not rose: at this size the lighter tint measures 3.6:1 on the ivory ground, under the 4.5:1 that body-sized text needs. */ font-size: .92rem; color: var(--rs-rose-deep); letter-spacing: .02em; } .rs-card__title { margin: 0; font-family: var(--rs-serif); font-weight: 600; font-size: clamp(1.05rem, .95rem + .4vw, 1.28rem); line-height: 1.45; /* balance keeps a three-line Chinese card title from ending on one stranded character, which is what unbalanced breaking produces in a 290px column. */ line-break: strict; overflow-wrap: break-word; text-wrap: balance; } .rs-card__title a { color: inherit; text-decoration: none; } .rs-card__title a:hover { color: var(--rs-rose-deep); } .rs-card__excerpt { margin: 0; font-size: .85rem; line-height: 1.85; color: var(--rs-ink-soft); } .rs-card__foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--rs-line); display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; min-width: 0; } .rs-card__actions { display: flex; gap: .4rem; flex-wrap: wrap; min-width: 0; } .rs-card__more { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--rs-sans); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rs-rose-deep); } .rs-price { display: inline-flex; align-items: baseline; gap: .5rem; min-width: 0; } .rs-price__now { font-family: var(--rs-serif); font-size: 1.2rem; font-weight: 600; color: var(--rs-ink); } .rs-price__was { font-family: var(--rs-sans); font-size: .78rem; color: var(--rs-ink-soft); } .rs-rating { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--rs-sans); font-size: .7rem; color: var(--rs-ink-soft); } .rs-rating__star { color: var(--rs-gold); fill: currentColor; } .rs-rating__num { color: var(--rs-ink); font-weight: 500; } .rs-swatches { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; min-width: 0; } .rs-swatches__label, .rs-swatches__more { font-family: var(--rs-sans); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rs-ink-soft); } .rs-swatch { width: 1.05rem; height: 1.05rem; border-radius: 50%; flex: none; background: var(--rs-swatch, var(--rs-veil)); border: 1px solid rgba(43, 27, 34, .14); box-shadow: inset 0 1px 2px rgba(255, 255, 255, .5); } .rs-byline { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; } .rs-monogram { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--rs-veil); color: var(--rs-rose-deep); border: 1px solid var(--rs-line); font-family: var(--rs-sans); font-size: .66rem; font-weight: 600; letter-spacing: .08em; } .rs-byline__text { display: flex; flex-direction: column; min-width: 0; } .rs-byline__text b { font-family: var(--rs-sans); font-size: .74rem; font-weight: 500; letter-spacing: .04em; } .rs-byline__text i { font-style: normal; font-size: .66rem; color: var(--rs-ink-soft); } .rs-spec { margin: .6rem 0 0; display: grid; gap: .4rem; } .rs-spec > div { display: flex; gap: .8rem; justify-content: space-between; align-items: baseline; min-width: 0; } .rs-spec dt { font-family: var(--rs-sans); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rs-ink-soft); flex: none; } .rs-spec dd { margin: 0; font-size: .8rem; text-align: end; min-width: 0; } /* -------------------------------------------------------- before / after */ .rs-compare { display: grid; gap: clamp(1.5rem, 3vw, 2.6rem); } @media (min-width: 64em) { .rs-compare { grid-template-columns: 1.35fr 1fr; align-items: start; } } .rs-ba { position: relative; overflow: hidden; border-radius: var(--rs-radius); aspect-ratio: 4 / 3; background: var(--rs-veil); touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; box-shadow: var(--rs-shadow-md); } .rs-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rs-ba__before { position: absolute; inset: 0; overflow: hidden; width: var(--rs-split, 50%); } /* The clipped layer's image must stay the size of the WHOLE frame, otherwise it squashes as the split moves instead of being revealed. */ .rs-ba__before img { width: var(--rs-ba-w, 100%); max-width: none; } .rs-ba__handle { position: absolute; top: 0; bottom: 0; z-index: 3; left: var(--rs-split, 50%); width: 2px; margin-inline-start: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(43, 27, 34, .18), 0 0 18px rgba(43, 27, 34, .3); pointer-events: none; } .rs-ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; background: color-mix(in srgb, var(--rs-panel) 95%, transparent); border: 2px solid var(--rs-rose); color: var(--rs-rose-deep); display: grid; place-items: center; box-shadow: var(--rs-shadow-md); pointer-events: auto; cursor: grab; } .rs-ba__grip:active { cursor: grabbing; } .rs-ba__label { position: absolute; bottom: 1rem; z-index: 4; padding: .34rem .85rem; border-radius: 999px; font-family: var(--rs-sans); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; backdrop-filter: blur(8px); } .rs-ba__label--before { inset-inline-start: 1rem; background: rgba(43, 27, 34, .72); color: #fff; } .rs-ba__label--after { inset-inline-end: 1rem; background: color-mix(in srgb, var(--rs-rose-deep) 88%, transparent); color: #fff; } .rs-ba-range { width: 100%; margin-top: 1rem; accent-color: var(--rs-rose); } /* -------------------------------------------------------------- lookbook */ .rs-lookbook { display: grid; gap: clamp(1.5rem, 3vw, 2.6rem); } @media (min-width: 64em) { .rs-lookbook { grid-template-columns: 1.5fr 1fr; align-items: start; } } .rs-shoppable { position: relative; border-radius: var(--rs-radius); overflow: hidden; box-shadow: var(--rs-shadow-md); } .rs-shoppable img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 8 / 5; } .rs-shoppable::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(43, 27, 34, .42), transparent 50%); pointer-events: none; } .rs-shoppable__meta { position: absolute; top: 1.1rem; inset-inline-start: 1.1rem; z-index: 3; padding: .8rem 1rem; border-radius: var(--rs-radius-sm); background: color-mix(in srgb, var(--rs-panel) 90%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--rs-line); font-size: .72rem; max-width: min(20rem, 70%); } .rs-shoppable__meta b { display: block; font-family: var(--rs-serif); font-size: .86rem; } .rs-shoppable__meta span { color: var(--rs-ink-soft); } .rs-hotspot { position: absolute; z-index: 4; transform: translate(-50%, -50%); } .rs-hotspot__pin { appearance: none; cursor: pointer; padding: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--rs-rose); color: #fff; border: 2px solid #fff; display: grid; place-items: center; box-shadow: 0 6px 18px -6px rgba(43, 27, 34, .55); position: relative; transition: transform .25s var(--rs-ease); } .rs-hotspot__pin:hover { transform: scale(1.12); } .rs-hotspot__pin::before { content: ''; position: absolute; inset: -.35rem; border-radius: 50%; border: 1px solid var(--rs-rose); opacity: .6; animation: rs-ping 2.4s var(--rs-ease) infinite; } @keyframes rs-ping { 0% { transform: scale(.85); opacity: .7; } 70%, 100% { transform: scale(1.6); opacity: 0; } } .rs-hotspot__card { position: absolute; bottom: 2.7rem; left: 50%; transform: translateX(-50%); width: min(17rem, 70vw); padding: .85rem; background: color-mix(in srgb, var(--rs-panel) 96%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--rs-line); border-radius: var(--rs-radius-sm); box-shadow: var(--rs-shadow-lg); display: grid; gap: .6rem; text-align: start; } .rs-hotspot__card[hidden] { display: none; } .rs-hotspot__row { display: flex; gap: .65rem; align-items: center; min-width: 0; } .rs-hotspot__row img { width: 3rem; height: 3rem; border-radius: var(--rs-radius-xs); object-fit: cover; flex: none; } .rs-hotspot__row > div { min-width: 0; } .rs-hotspot__row b { display: block; font-size: .78rem; font-family: var(--rs-serif); } .rs-hotspot__row span { display: block; font-size: .68rem; color: var(--rs-rose-deep); } .rs-hotspot__buttons { display: flex; gap: .4rem; } .rs-hotspot__buttons .rs-btn { flex: 1; } .rs-hotlist { display: grid; gap: .6rem; } .rs-hotlist__item { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .7rem; border-radius: var(--rs-radius-sm); background: color-mix(in srgb, var(--rs-panel) 82%, transparent); border: 1px solid var(--rs-line); transition: border-color .2s, background .2s; } .rs-hotlist__item:hover, .rs-hotlist__item.is-active { border-color: var(--rs-rose); background: var(--rs-panel); } .rs-hotlist__item img { width: 3.2rem; height: 3.2rem; border-radius: var(--rs-radius-xs); object-fit: cover; flex: none; } .rs-hotlist__text { min-width: 0; flex: 1; } .rs-hotlist__text b { display: block; font-family: var(--rs-serif); font-size: .84rem; } .rs-hotlist__text span { display: block; font-size: .68rem; color: var(--rs-rose-deep); } /* ------------------------------------------------------------ ingredients */ .rs-ing-tabs { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin-bottom: 2rem; } .rs-ing-tab { appearance: none; cursor: pointer; text-align: start; padding: 1.1rem; border-radius: var(--rs-radius-sm); background: color-mix(in srgb, var(--rs-panel) 82%, transparent); border: 1px solid var(--rs-line); display: grid; gap: .5rem; min-width: 0; transition: transform .3s var(--rs-ease), border-color .2s, box-shadow .3s; } .rs-ing-tab:hover { border-color: var(--rs-rose-soft); } .rs-ing-tab[aria-selected="true"] { border-color: var(--rs-rose); background: var(--rs-panel); transform: translateY(-3px); box-shadow: var(--rs-shadow-md); } .rs-ing-tab__inci { font-family: var(--rs-sans); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rs-rose-deep); overflow-wrap: anywhere; } .rs-ing-tab__name { font-family: var(--rs-serif); font-size: 1rem; font-weight: 600; } .rs-ing-tab__french { font-family: var(--rs-quote); font-style: italic; font-size: .82rem; color: var(--rs-ink-soft); } .rs-ing-panel { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); } @media (min-width: 64em) { .rs-ing-panel { grid-template-columns: 1fr 1.15fr; align-items: center; } } .rs-ing-panel[hidden] { display: none; } .rs-ing-panel__media { border-radius: var(--rs-radius); overflow: hidden; } .rs-ing-panel__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .rs-honest { margin-top: 1.2rem; padding: .95rem 1.15rem; border-inline-start: 2px solid var(--rs-rose); background: color-mix(in srgb, var(--rs-panel-soft) 80%, transparent); border-radius: 0 var(--rs-radius-xs) var(--rs-radius-xs) 0; font-size: .82rem; line-height: 1.8; color: var(--rs-ink-soft); } .rs-honest b { display: block; margin-bottom: .25rem; font-family: var(--rs-sans); font-size: .6rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--rs-rose-deep); } /* -------------------------------------------------------------- INCI table */ .rs-inci { display: grid; gap: .4rem; } .rs-inci__row { display: grid; gap: .3rem .9rem; align-items: baseline; grid-template-columns: 1fr auto; padding: .7rem .9rem; border-radius: var(--rs-radius-xs); background: color-mix(in srgb, var(--rs-panel) 70%, transparent); border: 1px solid color-mix(in srgb, var(--rs-line) 70%, transparent); min-width: 0; } .rs-inci__row:nth-child(odd) { background: color-mix(in srgb, var(--rs-panel-soft) 62%, transparent); } .rs-inci__name { font-family: var(--rs-sans); font-size: .8rem; font-weight: 500; letter-spacing: .02em; overflow-wrap: anywhere; min-width: 0; } .rs-inci__cn { font-size: .74rem; color: var(--rs-ink-soft); margin-inline-start: .5rem; } .rs-inci__class { justify-self: end; font-family: var(--rs-sans); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; background: var(--rs-veil); color: var(--rs-rose-deep); white-space: nowrap; } .rs-inci__note { grid-column: 1 / -1; font-size: .76rem; line-height: 1.75; color: var(--rs-ink-soft); } .rs-inci__flag { display: inline-flex; align-items: center; gap: .3rem; margin-inline-start: .4rem; padding: .1rem .5rem; border-radius: 999px; background: var(--rs-ink); color: var(--rs-veil); font-family: var(--rs-sans); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; } /* -------------------------------------------------------- shade diagnostic */ .rs-shade { display: grid; gap: clamp(1.5rem, 3vw, 2.4rem); } @media (min-width: 66em) { .rs-shade { grid-template-columns: 20rem 1fr; align-items: start; } } .rs-tones { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); } .rs-tone { appearance: none; cursor: pointer; text-align: start; padding: .8rem; border-radius: var(--rs-radius-sm); background: color-mix(in srgb, var(--rs-panel) 84%, transparent); border: 1px solid var(--rs-line); display: grid; gap: .5rem; min-width: 0; transition: border-color .2s, box-shadow .25s; } .rs-tone[aria-selected="true"] { border-color: var(--rs-rose); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rs-rose) 30%, transparent); } .rs-tone__chip { width: 100%; height: 2.6rem; border-radius: var(--rs-radius-xs); background: var(--rs-swatch); border: 1px solid rgba(43, 27, 34, .12); } .rs-tone__name { font-family: var(--rs-serif); font-size: .8rem; font-weight: 600; line-height: 1.4; } .rs-tone__code { font-family: var(--rs-sans); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rs-ink-soft); } .rs-readout { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); margin-bottom: 1.6rem; } .rs-readout > div { padding: .85rem 1rem; border-radius: var(--rs-radius-sm); background: color-mix(in srgb, var(--rs-panel-soft) 76%, transparent); border: 1px solid var(--rs-line); min-width: 0; } .rs-readout dt { font-family: var(--rs-sans); font-size: .56rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--rs-rose-deep); } .rs-readout dd { margin: .3rem 0 0; font-family: var(--rs-serif); font-size: 1.02rem; } .rs-readout dd small { display: block; font-family: var(--rs-body); font-size: .7rem; color: var(--rs-ink-soft); line-height: 1.6; } .rs-match { display: grid; gap: .5rem; } .rs-match__row { display: grid; align-items: center; gap: .5rem .9rem; grid-template-columns: 2.4rem 1fr auto; padding: .75rem .9rem; border-radius: var(--rs-radius-sm); background: color-mix(in srgb, var(--rs-panel) 78%, transparent); border: 1px solid var(--rs-line); min-width: 0; transition: border-color .2s, background .2s; } .rs-match__row.is-best { border-color: var(--rs-rose); background: var(--rs-panel); box-shadow: var(--rs-shadow-sm); } .rs-match__chip { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--rs-swatch); border: 1px solid rgba(43, 27, 34, .14); } .rs-match__name { min-width: 0; } .rs-match__name b { display: block; font-family: var(--rs-serif); font-size: .88rem; } .rs-match__name span { display: block; font-size: .7rem; color: var(--rs-ink-soft); } .rs-match__de { text-align: end; min-width: 0; } .rs-match__de b { display: block; font-family: var(--rs-sans); font-size: 1.02rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--rs-ink); } .rs-match__de span { display: block; font-family: var(--rs-sans); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rs-rose-deep); } .rs-match__note { grid-column: 1 / -1; font-size: .74rem; color: var(--rs-ink-soft); line-height: 1.7; } .rs-note { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--rs-radius-xs); background: color-mix(in srgb, var(--rs-veil) 45%, transparent); border: 1px dashed var(--rs-rose-soft); font-size: .78rem; line-height: 1.75; color: var(--rs-ink-soft); } /* --------------------------------------------------- drawers and modals */ /* One fixed, clipping stage for every overlay. See footer.php for why. */ .rs-layers { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; } .rs-layers > * { pointer-events: none; } .rs-layers > .is-open, .rs-layers > .is-open * { pointer-events: auto; } .rs-scrim { position: absolute; inset: 0; z-index: 1; background: rgba(43, 27, 34, .55); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .35s var(--rs-ease); } .rs-scrim.is-open { opacity: 1; pointer-events: auto; } .rs-drawer { position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 2; width: min(26rem, 100vw); background: var(--rs-ground); border-inline-start: 1px solid var(--rs-line); box-shadow: -30px 0 60px -40px rgba(43, 27, 34, .5); display: flex; flex-direction: column; transform: translateX(101%); transition: transform .42s var(--rs-ease); visibility: hidden; } .rs-drawer.is-open { transform: none; visibility: visible; } .rs-drawer__head, .rs-drawer__foot { padding: 1.2rem 1.4rem; background: color-mix(in srgb, var(--rs-panel) 92%, transparent); flex: none; } .rs-drawer__head { border-bottom: 1px solid var(--rs-line); display: flex; align-items: flex-start; gap: 1rem; } .rs-drawer__foot { border-top: 1px solid var(--rs-line); display: grid; gap: .8rem; } .rs-drawer__title { margin: 0; font-family: var(--rs-serif); font-size: 1.05rem; } .rs-drawer__sub { margin: .25rem 0 0; font-size: .74rem; color: var(--rs-ink-soft); line-height: 1.7; } .rs-drawer__head > div { min-width: 0; flex: 1; } .rs-drawer__body { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem; display: grid; gap: .8rem; align-content: start; } .rs-vanity-item { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: .8rem; align-items: center; padding: .75rem; border-radius: var(--rs-radius-sm); background: var(--rs-panel); border: 1px solid var(--rs-line); min-width: 0; } .rs-vanity-item img { width: 3.6rem; height: 3.6rem; border-radius: var(--rs-radius-xs); object-fit: cover; } .rs-vanity-item__text { min-width: 0; } .rs-vanity-item__text b { display: block; font-family: var(--rs-serif); font-size: .84rem; line-height: 1.4; } .rs-vanity-item__text span { display: block; font-size: .68rem; color: var(--rs-rose-deep); } .rs-vanity-item__side { display: grid; gap: .4rem; justify-items: end; } .rs-qty { display: inline-flex; align-items: center; border: 1px solid var(--rs-line); border-radius: 999px; background: var(--rs-panel-soft); } .rs-qty button { appearance: none; border: 0; background: none; cursor: pointer; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; color: var(--rs-ink); border-radius: 50%; } .rs-qty button:hover { background: var(--rs-veil); } .rs-qty output { min-width: 1.6rem; text-align: center; font-family: var(--rs-sans); font-size: .76rem; font-variant-numeric: tabular-nums; } .rs-empty { text-align: center; padding: 3rem 1rem; color: var(--rs-ink-soft); display: grid; gap: .8rem; justify-items: center; } .rs-empty__mark { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--rs-veil); color: var(--rs-rose); } .rs-totals { display: grid; gap: .35rem; font-size: .8rem; } .rs-totals__row { display: flex; justify-content: space-between; gap: 1rem; color: var(--rs-ink-soft); } .rs-totals__row--sum { padding-top: .55rem; margin-top: .2rem; border-top: 1px solid var(--rs-line); color: var(--rs-ink); font-family: var(--rs-serif); font-size: 1.05rem; } .rs-modal { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: clamp(.75rem, 3vw, 2.5rem); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .3s var(--rs-ease); } .rs-modal.is-open { opacity: 1; pointer-events: auto; visibility: visible; } .rs-modal__box { width: min(58rem, 100%); max-height: min(90vh, 52rem); background: var(--rs-ground); border: 1px solid var(--rs-line); border-radius: var(--rs-radius); box-shadow: var(--rs-shadow-lg); display: flex; flex-direction: column; overflow: hidden; transform: translateY(14px) scale(.985); transition: transform .35s var(--rs-ease); min-width: 0; } .rs-modal.is-open .rs-modal__box { transform: none; } .rs-modal__head { flex: none; padding: 1rem 1.4rem; border-bottom: 1px solid var(--rs-line); background: color-mix(in srgb, var(--rs-panel) 92%, transparent); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .rs-modal__body { flex: 1; overflow-y: auto; padding: clamp(1.2rem, 3vw, 2.2rem); } /* Quick view */ .rs-qv { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); } @media (min-width: 48em) { .rs-qv { grid-template-columns: 1fr 1.05fr; align-items: start; } } .rs-qv__media { border-radius: var(--rs-radius-sm); overflow: hidden; background: var(--rs-veil); } .rs-qv__media img { width: 100%; aspect-ratio: 1; object-fit: cover; } .rs-qv__title { margin: .3rem 0 0; font-family: var(--rs-serif); font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); line-height: 1.35; } .rs-qv__section { margin-top: 1.4rem; } .rs-qv__label { display: block; margin-bottom: .6rem; font-family: var(--rs-sans); font-size: .58rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--rs-rose-deep); } .rs-chiprow { display: flex; flex-wrap: wrap; gap: .45rem; } .rs-chip { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px; background: color-mix(in srgb, var(--rs-panel) 88%, transparent); border: 1px solid var(--rs-line); color: var(--rs-ink); font-family: var(--rs-sans); font-size: .7rem; letter-spacing: .04em; min-width: 0; } .rs-chip:hover { border-color: var(--rs-rose-soft); } .rs-chip[aria-pressed="true"] { border-color: var(--rs-rose); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rs-rose) 26%, transparent); } .rs-chip i { width: .95rem; height: .95rem; border-radius: 50%; background: var(--rs-swatch); border: 1px solid rgba(43, 27, 34, .14); flex: none; } .rs-checklist { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; } .rs-checklist li { display: flex; align-items: flex-start; gap: .55rem; font-size: .84rem; line-height: 1.75; min-width: 0; } .rs-checklist .rs-icon { color: var(--rs-rose); flex: none; margin-top: .38rem; } /* ---------------------------------------------------------------- search */ .rs-searchbox { display: flex; gap: .5rem; min-width: 0; } .rs-input, .rs-searchbox input[type="search"], .rs-searchbox input[type="text"] { flex: 1; min-width: 0; padding: .75rem 1.1rem; border-radius: 999px; border: 1px solid var(--rs-line); background: var(--rs-panel); color: var(--rs-ink); font-family: var(--rs-body); font-size: .88rem; } .rs-input:focus, .rs-searchbox input:focus { outline: none; border-color: var(--rs-rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-rose) 18%, transparent); } .rs-results { display: grid; gap: 1.4rem; } .rs-results__group h3 { margin: 0 0 .7rem; font-family: var(--rs-sans); font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--rs-rose-deep); } .rs-results__item { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .6rem; border-radius: var(--rs-radius-sm); text-decoration: none; color: inherit; border: 1px solid transparent; } .rs-results__item:hover { background: var(--rs-panel); border-color: var(--rs-line); } .rs-results__item img { width: 2.8rem; height: 2.8rem; border-radius: var(--rs-radius-xs); object-fit: cover; flex: none; } .rs-results__item div { min-width: 0; } .rs-results__item b { display: block; font-family: var(--rs-serif); font-size: .86rem; } .rs-results__item span { display: block; font-size: .72rem; color: var(--rs-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------------------------------------------------------- prose */ /* Scoped. No layout class name is reused inside this block. */ .rs-prose { font-size: 1.02rem; line-height: 2; color: var(--rs-ink); max-width: 42rem; } .rs-prose > * + * { margin-top: 1.5rem; } .rs-prose p { margin: 0; } .rs-prose h2 { margin: 3rem 0 0; font-family: var(--rs-serif); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); line-height: 1.45; line-break: strict; overflow-wrap: break-word; } .rs-prose h3 { margin: 2.2rem 0 0; font-family: var(--rs-serif); font-weight: 600; font-size: 1.12rem; line-break: strict; overflow-wrap: break-word; } .rs-prose a { color: var(--rs-rose-deep); } .rs-prose ul, .rs-prose ol { margin: 0; padding-inline-start: 1.4rem; } .rs-prose li + li { margin-top: .5rem; } .rs-prose code { font-size: .86em; padding: .1rem .35rem; border-radius: .3rem; background: var(--rs-veil); color: var(--rs-rose-deep); } .rs-prose img { border-radius: var(--rs-radius-sm); } .rs-prose__quote { margin: 2.4rem 0; padding: 1.6rem 1.8rem; border: 0; border-inline-start: 2px solid var(--rs-rose); background: color-mix(in srgb, var(--rs-panel-soft) 70%, transparent); border-radius: 0 var(--rs-radius-sm) var(--rs-radius-sm) 0; } .rs-prose__quote p { margin: 0; font-family: var(--rs-quote); font-style: italic; font-size: 1.25rem; line-height: 1.7; color: var(--rs-ink); } .rs-prose__quote cite { display: block; margin-top: .8rem; font-style: normal; font-family: var(--rs-sans); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rs-rose-deep); } .rs-prose__figure { margin: 2.4rem 0; } .rs-prose__figure figcaption { margin-top: .7rem; font-size: .78rem; color: var(--rs-ink-soft); font-family: var(--rs-sans); letter-spacing: .04em; } .rs-prose__step { display: flex; gap: 1.1rem; margin: 1.6rem 0; align-items: flex-start; min-width: 0; } .rs-prose__step-n { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rs-rose-soft); background: var(--rs-panel); font-family: var(--rs-sans); font-size: .74rem; color: var(--rs-rose-deep); font-variant-numeric: tabular-nums; } .rs-prose__step > div { min-width: 0; } .rs-prose__step h3 { margin: .2rem 0 .4rem; font-size: 1rem; } .rs-prose__step p { font-size: .92rem; } .rs-prose__spotlight { margin: 2.6rem 0; padding: 1.3rem; border: 1px solid var(--rs-line); border-radius: var(--rs-radius-sm); background: color-mix(in srgb, var(--rs-panel) 90%, transparent); box-shadow: var(--rs-shadow-sm); } .rs-prose__spotlight-eyebrow { display: block; margin-bottom: .8rem; font-family: var(--rs-sans); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rs-rose-deep); } .rs-prose__spotlight-body { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; min-width: 0; } .rs-prose__spotlight-media { flex: none; width: 4.4rem; height: 4.4rem; border-radius: var(--rs-radius-xs); overflow: hidden; } .rs-prose__spotlight-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .rs-prose__spotlight-text { flex: 1 1 12rem; min-width: 0; } .rs-prose__spotlight-text h4 { margin: .15rem 0 0; font-family: var(--rs-serif); font-size: 1rem; } .rs-prose__spotlight-text h4 a { color: inherit; text-decoration: none; } .rs-prose__spotlight-note { margin: .35rem 0 0; font-size: .8rem; color: var(--rs-ink-soft); } .rs-prose__spotlight-buy { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; min-width: 0; } /* ----------------------------------------------------------- single views */ .rs-crumbs { margin-bottom: 1.6rem; } .rs-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-family: var(--rs-sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; } .rs-crumbs li + li::before { content: '/'; margin-inline-end: .5rem; color: var(--rs-rose-soft); } .rs-crumbs a { color: var(--rs-ink-soft); text-decoration: none; } .rs-crumbs a:hover { color: var(--rs-rose-deep); } .rs-crumbs [aria-current] { color: var(--rs-rose-deep); } .rs-single { display: grid; gap: clamp(2rem, 4vw, 3.5rem); } @media (min-width: 66em) { .rs-single--split { grid-template-columns: 1.05fr 1fr; align-items: start; } } .rs-single__title { margin: .6rem 0 0; font-family: var(--rs-display); font-weight: 400; font-size: clamp(1.9rem, 1.2rem + 3vw, 3.3rem); line-height: 1.16; line-break: strict; overflow-wrap: break-word; text-wrap: pretty; } .rs-single__french { margin: 0; font-family: var(--rs-quote); font-style: italic; font-size: clamp(1rem, .9rem + .5vw, 1.32rem); color: var(--rs-rose-deep); } .rs-single__lede { margin: 1.2rem 0 0; font-size: 1.05rem; color: var(--rs-ink-soft); line-height: 1.95; } .rs-single__cover { border-radius: var(--rs-radius); overflow: hidden; box-shadow: var(--rs-shadow-md); } .rs-single__cover img { width: 100%; object-fit: cover; } .rs-meta-row { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--rs-line); font-family: var(--rs-sans); font-size: .68rem; letter-spacing: .1em; color: var(--rs-ink-soft); min-width: 0; } .rs-sticky { position: sticky; top: 6rem; } @media (max-width: 65.99em) { .rs-sticky { position: static; } } .rs-tags { display: flex; flex-wrap: wrap; gap: .4rem; } .rs-tags a { padding: .3rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--rs-veil) 60%, transparent); border: 1px solid var(--rs-line); font-family: var(--rs-sans); font-size: .62rem; letter-spacing: .1em; color: var(--rs-rose-deep); text-decoration: none; } .rs-tags a:hover { background: var(--rs-veil); } .rs-like { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--rs-line); background: var(--rs-panel); color: var(--rs-rose-deep); cursor: pointer; font-family: var(--rs-sans); font-size: .7rem; letter-spacing: .1em; } .rs-like[aria-pressed="true"] .rs-icon { fill: currentColor; } /* ----------------------------------------------------------- comments */ .rs-comments { margin-top: clamp(2.5rem, 5vw, 4rem); } .rs-comments ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; } .rs-comments ol ol { margin-top: 1.2rem; padding-inline-start: clamp(1rem, 4vw, 2.5rem); } .rs-comment { padding: 1.2rem; border-radius: var(--rs-radius-sm); background: color-mix(in srgb, var(--rs-panel) 84%, transparent); border: 1px solid var(--rs-line); } .rs-comment__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; flex-wrap: wrap; min-width: 0; } .rs-comment__head img { border-radius: 50%; flex: none; } .rs-comment__author { font-family: var(--rs-serif); font-size: .9rem; font-weight: 600; } .rs-comment__date { font-family: var(--rs-sans); font-size: .64rem; color: var(--rs-ink-soft); } .rs-form { display: grid; gap: .9rem; } .rs-form label { font-family: var(--rs-sans); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rs-rose-deep); } .rs-form input[type="text"], .rs-form input[type="email"], .rs-form input[type="url"], .rs-form textarea { width: 100%; padding: .8rem 1rem; border-radius: var(--rs-radius-xs); border: 1px solid var(--rs-line); background: var(--rs-panel); font-family: var(--rs-body); font-size: .9rem; color: var(--rs-ink); } .rs-form textarea { border-radius: var(--rs-radius-sm); min-height: 8rem; resize: vertical; } .rs-form input:focus, .rs-form textarea:focus { outline: none; border-color: var(--rs-rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-rose) 16%, transparent); } /* ---------------------------------------------------------- pagination */ .rs-pagination { margin-top: clamp(2rem, 4vw, 3rem); } .rs-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: center; } .rs-pagination .page-numbers { display: inline-flex; align-items: center; gap: .35rem; min-width: 2.4rem; height: 2.4rem; padding-inline: .8rem; justify-content: center; border-radius: 999px; border: 1px solid var(--rs-line); background: color-mix(in srgb, var(--rs-panel) 82%, transparent); color: var(--rs-ink); text-decoration: none; font-family: var(--rs-sans); font-size: .74rem; } .rs-pagination .page-numbers:hover { border-color: var(--rs-rose-soft); color: var(--rs-rose-deep); } .rs-pagination .page-numbers.current { background: var(--rs-rose); border-color: transparent; color: #fff; } /* --------------------------------------------------------------- footer */ .rs-footer { /* No margin here: the last section already contributes its own bottom padding, and the two were stacking into ~250px of dead ivory above the footer on every page. */ margin-top: 0; /* Solid colour first: `background: linear-gradient(...)` resets background-color to transparent, so if the gradient is ever dropped (forced-colors, print, an old engine) the light footer text would land on the light page ground and vanish. */ background-color: #241620; background-image: linear-gradient(170deg, #2b1b22, #241620 60%, #1c1017); color: color-mix(in srgb, var(--rs-veil) 88%, #fff); padding-block: clamp(3rem, 6vw, 5rem) 2rem; } .rs-footer a { color: color-mix(in srgb, var(--rs-rose-soft) 95%, #fff); text-decoration: none; } .rs-footer a:hover { color: #fff; text-decoration: underline; } .rs-newsletter { padding: clamp(1.6rem, 4vw, 2.8rem); border-radius: var(--rs-radius); background: rgba(255, 255, 255, .05); border: 1px solid rgba(232, 180, 184, .16); display: grid; gap: 1.4rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 56em) { .rs-newsletter { grid-template-columns: 1.25fr 1fr; align-items: center; } } .rs-newsletter h2 { margin: .6rem 0 0; font-family: var(--rs-display); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); color: #fff; } .rs-newsletter p { margin: .7rem 0 0; font-size: .86rem; color: color-mix(in srgb, var(--rs-rose-soft) 90%, #fff); line-height: 1.85; } .rs-newsletter .rs-eyebrow { color: var(--rs-rose-soft); } .rs-newsletter input { background: rgba(255, 255, 255, .08); border-color: rgba(232, 180, 184, .28); color: #fff; } .rs-newsletter input::placeholder { color: rgba(255, 255, 255, .5); } .rs-footer__cols { display: grid; gap: clamp(1.8rem, 4vw, 3rem); } @media (min-width: 48em) { .rs-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .rs-footer h3 { margin: 0 0 1rem; font-family: var(--rs-sans); font-size: .6rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--rs-rose-soft); } .rs-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .84rem; } .rs-footer__blurb { font-size: .84rem; line-height: 1.9; color: color-mix(in srgb, var(--rs-rose-soft) 88%, #fff); max-width: 24rem; } .rs-footer__boutique { display: grid; gap: .9rem; font-size: .8rem; } .rs-footer__boutique div { display: flex; gap: .5rem; min-width: 0; } .rs-footer__boutique .rs-icon { color: var(--rs-rose-soft); flex: none; margin-top: .3rem; } .rs-footer__boutique b { display: block; color: #fff; font-family: var(--rs-serif); font-weight: 600; } .rs-footer__base { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-family: var(--rs-sans); font-size: .68rem; letter-spacing: .06em; color: color-mix(in srgb, var(--rs-rose-soft) 80%, #fff); min-width: 0; } /* --------------------------------------------------------- reveal motion */ /* 600ms: inside the 400-700ms budget for a section reveal. 800ms read as sluggish once every card on a 12,000px page did it. */ .rs-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--rs-ease), transform .6s var(--rs-ease); } .rs-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rs-reveal { opacity: 1; transform: none; } } /* If JS never runs, nothing may stay invisible. This is the no-JS guarantee. */ .no-js .rs-reveal { opacity: 1; transform: none; } /* --------------------------------------------------------------- widgets */ .rs-widget { margin-bottom: 2rem; } .rs-widget__title { margin: 0 0 .9rem; font-family: var(--rs-sans); font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--rs-rose-deep); } .rs-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .86rem; } /* -------------------------------------------------------- narrow screens */ @media (max-width: 30em) { :root { --rs-radius: 1.75rem; --rs-radius-sm: 1rem; } .rs-btn { padding: .62rem 1.05rem; font-size: .68rem; } .rs-hero__ctas { width: 100%; } .rs-hero__ctas .rs-btn { flex: 1 1 auto; } .rs-card__actions { width: 100%; } .rs-card__actions .rs-btn { flex: 1 1 auto; } .rs-match__row { grid-template-columns: 2rem 1fr; } .rs-match__de { grid-column: 2; text-align: start; } .rs-inci__row { grid-template-columns: 1fr; } .rs-inci__class { justify-self: start; } } /* -------------------------------------------------------------- printing */ @media print { .rs-silk, .rs-header, .rs-footer, .rs-drawer, .rs-scrim, .rs-modal { display: none !important; } body { color: #000; } .rs-panel, .rs-card { box-shadow: none; border-color: #ccc; } } /* --------------------------------------------------------------- gift set */ .rs-giftset-panel { margin-top: clamp(2rem, 4vw, 3.5rem); padding: clamp(1.6rem, 4vw, 3rem); } .rs-giftset { display: grid; gap: 2rem; align-items: center; } @media (min-width: 60em) { .rs-giftset { grid-template-columns: 1.5fr 1fr; } } .rs-giftset__title { margin: .4rem 0 0; font-family: var(--rs-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); line-height: 1.25; line-break: strict; overflow-wrap: break-word; } .rs-giftset__note { margin: .9rem 0 0; max-width: 34rem; font-size: .88rem; line-height: 1.9; color: color-mix(in srgb, var(--rs-rose-soft) 90%, #fff); } .rs-giftset__list { margin-top: 1.2rem; } .rs-giftset__list a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); } .rs-giftset__list .rs-icon { color: var(--rs-rose-soft); } .rs-giftset__ribbons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; align-items: center; } .rs-giftset__ribbonlabel { margin: 0; color: var(--rs-rose-soft); } .rs-giftset__ribbons .rs-chip { background: rgba(255,255,255,.07); border-color: rgba(232,180,184,.28); color: #fff; } .rs-giftset__ribbons .rs-chip[aria-pressed="true"] { border-color: var(--rs-rose-soft); box-shadow: 0 0 0 2px rgba(232,180,184,.32); } .rs-giftset__buy { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .rs-giftset__pricelabel { color: var(--rs-rose-soft); } .rs-giftset__price { margin-top: .3rem; } .rs-giftset__price .rs-price__now { color: #fff; font-size: 1.9rem; } .rs-giftset__price .rs-price__was { color: var(--rs-rose-soft); } /* ------------------------------------------------------------- lab extras */ .rs-lab-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .rs-lab-body { margin: 0 0 1rem; font-size: .95rem; line-height: 1.95; color: var(--rs-ink-soft); } /* ------------------------------------------------------------ atelier strip */ .rs-strip { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .rs-strip figure { margin: 0; border-radius: var(--rs-radius-sm); overflow: hidden; position: relative; } .rs-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--rs-ease); } .rs-strip figure:hover img { transform: scale(1.05); } .rs-strip figcaption { position: absolute; inset-inline: .7rem; bottom: .7rem; padding: .3rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--rs-panel) 90%, transparent); font-family: var(--rs-sans); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rs-rose-deep); } /* ------------------------------------------------- figures, last word These live at the end of the file on purpose. The component rules above set their own font-family at the same specificity, so anything declared earlier loses on source order — which is exactly how the first attempt at this silently did nothing. */ /* …which the subsetted Cormorant Garamond does not honour. The `lnum` feature did not survive subsetting, so `font-variant-numeric` is a no-op on it and its oldstyle figures stand: `ΔE00` renders as `ΔEoo` and `CIEDE2000` loses its year-like shape. In running article prose that is a legitimate editorial look and it stays. In a field whose whole content IS a measured value it is a legibility bug, so those are set in the display serif, which does have lining figures — verified by rendering, not by asking the CSS. */ :root { --rs-figure: 'Playfair Display', var(--rs-cjk), Georgia, serif; } .rs-readout dd, .rs-readout dd small, .rs-match__de, .rs-match__de b, .rs-fact dd, .rs-price, .rs-price__now, .rs-price__was, .rs-rating__num, .rs-swatches__more, .rs-pill__count { font-family: var(--rs-figure); font-variant-numeric: lining-nums tabular-nums; } /* The uppercase micro-labels beside those values stay in the UI sans. */ .rs-match__de span, .rs-tone__code { font-family: var(--rs-sans); font-variant-numeric: lining-nums tabular-nums; } /* --------------------------------------------- article prose, flow spacing MEASURED BUG, pre-existing and load-bearing. `.rs-prose > * + * { margin-top: 1.5rem }` is the flow rule for article body copy, and it never applied to a single paragraph. `.rs-prose p { margin: 0 }` — written to clear the UA default — carries one more type selector, so it wins on specificity no matter what order the two appear in, and every paragraph rendered with `margin-top: 0`. Paragraphs butted straight against one another and against the heading above them, with nothing but line-height separating them. It was easy to miss while body copy sat at `line-height: 2`; at the tighter English leading it reads as one undifferentiated slab. Same defeat applies to `ul` and `ol` via `.rs-prose ul, .rs-prose ol { margin: 0 }`. Restated here at matching specificity, and later in the file, so it actually lands. Verified by measuring computed `margin-top`, not by reading the cascade. */ .rs-prose > * + p, .rs-prose > * + ul, .rs-prose > * + ol { margin-top: 1.5rem; } /* A paragraph directly under its heading belongs closer to it than to the paragraph before — proximity is what makes the heading read as a label for what follows rather than as a divider between two equal blocks. */ .rs-prose > h2 + p, .rs-prose > h3 + p { margin-top: .85rem; }