/* ========================================================================== RASA Public — design tokens + reset + shared components Tokens sourced verbatim from the claude.ai/design canvas (RASA.dc.html). No CDN. No @import http(s). All fonts self-hosted via fonts.css. ========================================================================== */ :root { /* Palette Day (default) */ --paper: #FAF9F5; --paper2: #EFE8DB; --card: #FBF8F2; /* Result-card fill (op 2026-07-07) : a very light beige, LIGHTER than the comparables card fill (--paper2 #EFE8DB) yet warm enough to read as a card. --card-result-2 is the lighter end of the card's lightening gradient. */ --card-result: #F7F1E7; --card-result-2: #F9F4EA; /* Same-object badge text (op 2026-07-07) : a sober, desaturated forest green (NOT neon) — reads on the light beige card. */ --badge-green: #4E7A3A; --ink: #1A1611; --inksoft: #4A423A; --line: #D8CDBA; --gold: #967736; --gold-accent: #C9A24B; --logo-gold: #B8923F; /* Nav header colour — switchable live via ?nav=ink|paper|bordeaux */ --nav-bg: #b10c0c; --nav-fg: #ffffff; --nav-line: rgba(255,255,255,.32); --nav-fg-dim: rgba(255,255,255,.7); /* Type */ --font-serif: 'Bodoni Moda', 'Bodoni Moda Fallback', Georgia, serif; --font-sans: 'Libre Franklin', 'Libre Franklin Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Radii + shadows (parsimonious) */ --shadow-lot: 0 18px 50px -34px rgba(0,0,0,.4); --shadow-thumb:0 10px 26px -20px rgba(0,0,0,.5); /* Widths */ --content-max: 1500px; --content-pad: 30px; --facet-rail: 268px; --nav-height: 70px; } /* Night variant — via `data-theme="night"` on . */ html[data-theme="night"] { --paper: #0E0C0D; --paper2: #14100F; --card: #17130F; --card-result: #1A1511; --card-result-2: #221C16; --badge-green: #86AE64; --ink: #ECE3D4; --inksoft: #B0A896; --line: #302A22; --gold: #B4914E; --gold-accent: #D2A85A; --nav-bg: #0E0C0D; --nav-fg: #ECE3D4; --nav-line: rgba(236,227,212,.28); --nav-fg-dim: rgba(236,227,212,.68); } /* Nav-colour presets (switchable via body attr for A/B) */ html[data-nav="ink"] { --nav-bg: #1A1611; } html[data-nav="paper"] { --nav-bg: #F4EFE6; --nav-fg: #1A1611; --nav-line: #D8CDBA; --nav-fg-dim: rgba(26,22,17,.6); } html[data-nav="bordeaux"] { --nav-bg: #b10c0c; } /* ========================================================================== Reset ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); } body { min-height: 100vh; } /* Contain overscroll bounce so scrolling past the top or bottom doesn't momentarily reveal content sliding into the 25 px interstice between the nav and the sticky lot header (bounce briefly pushes content past its fixed-position mask). */ html { overscroll-behavior-y: none; } body { overscroll-behavior-y: none; } ::selection { background: var(--gold); color: var(--paper); } img, svg { display: block; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } /* Scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--paper2); border: 3px solid var(--paper); } /* Skip-to-content (a11y) */ .skip-link { position: absolute; left: -9999px; top: 0; padding: 8px 14px; background: var(--ink); color: var(--paper); z-index: 1000; } .skip-link:focus { left: 12px; top: 12px; } /* ========================================================================== Utility text ========================================================================== */ .mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; } .serif { font-family: var(--font-serif); } .italic { font-style: italic; } /* Tabular numerals + widened thousand separator (~+15% of a normal space) for readability of grouped digits like `79 737 €`. */ .tnum { font-feature-settings: 'tnum' 1; word-spacing: 0.04em; } /* ± step buttons flanking the range-slider number inputs (10k € per click) */ .rasa-stepbtn { width: 20px; height: 34px; flex: none; background: none; border: 1px solid var(--line); color: var(--inksoft); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; } .rasa-stepbtn:hover { border-color: var(--inksoft); color: var(--ink); } .eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--inksoft); font-weight: 600; } .eyebrow-gold { color: var(--gold); } /* ========================================================================== NAV ========================================================================== */ .rasa-nav { position: sticky; top: 0; z-index: 60; background: var(--nav-bg); color: var(--nav-fg); border-bottom: 1px solid var(--line); height: var(--nav-height); } .rasa-nav__inner { max-width: none; margin: 0; padding: 0 40px; height: var(--nav-height); display: flex; align-items: center; gap: 34px; } .rasa-nav__brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--nav-fg); } .rasa-nav__brand-word { font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: .2em; padding-left: .2em; } .rasa-nav__links { display: flex; align-items: stretch; height: var(--nav-height); gap: 0; } .rasa-nav__link { display: flex; align-items: center; padding: 0 18px; font-size: 13px; letter-spacing: .04em; color: var(--nav-fg); opacity: .82; text-decoration: none; border-bottom: 2px solid transparent; } .rasa-nav__link:hover, .rasa-nav__link.is-active { opacity: 1; border-bottom-color: var(--gold-accent); } .rasa-nav__right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .rasa-nav__search { display: flex; align-items: center; height: 38px; background: rgba(255,255,255,.07); border: 1px solid var(--nav-line); } .rasa-nav__search:hover, .rasa-nav__search:focus-within { border-color: var(--nav-fg); } .rasa-nav__search-btn { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 14px 0 13px; color: var(--nav-fg); text-decoration: none; font-size: 13px; min-width: 168px; } .rasa-nav__search-form { display: flex; align-items: center; gap: 9px; height: 100%; padding: 0 12px 0 13px; min-width: 168px; } .rasa-nav__search-ico { font-size: 14px; line-height: 1; color: var(--nav-fg); flex: none; } .rasa-nav__search-input { flex: 1 1 auto; min-width: 0; height: 100%; background: none; border: none; outline: none; color: var(--nav-fg); font-size: 13px; font-family: inherit; letter-spacing: inherit; } .rasa-nav__search-input::placeholder { color: var(--nav-fg-dim); opacity: 1; } /* Safari search-input chrome (cancel button / inner decorations) removed. */ .rasa-nav__search-input::-webkit-search-decoration, .rasa-nav__search-input::-webkit-search-cancel-button { -webkit-appearance: none; } .rasa-nav__search-sep { width: 1px; height: 20px; background: var(--nav-line); flex: none; } .rasa-nav__search-img { width: 38px; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--nav-fg-dim); } .rasa-nav__search-img:hover { color: var(--nav-fg); } .rasa-nav__cta { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; color: var(--nav-fg); text-decoration: none; font-size: 13px; } .rasa-nav__cta:hover { color: var(--gold-accent); } .rasa-nav__cta-count { font-family: var(--font-mono); font-size: 12px; color: var(--nav-fg-dim); font-weight: 600; } .rasa-nav__avatar { width: 38px; height: 38px; border-radius: 50%; color: #5c5850; background: #e3dacc; border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: .04em; font-weight: 300; margin-left: 18px; text-decoration: none; } .rasa-nav__lang { display: inline-flex; margin-right: 4px; border: 1px solid var(--nav-line); height: 26px; align-items: stretch; } .rasa-nav__lang-btn { padding: 0 8px; font-size: 11px; letter-spacing: .06em; color: var(--nav-fg-dim); background: none; text-transform: uppercase; } .rasa-nav__lang-btn.is-active { color: var(--nav-fg); background: rgba(255,255,255,.09); } /* ========================================================================== Layout containers ========================================================================== */ .rasa-container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--content-pad); } .rasa-section { padding: 28px var(--content-pad) 0; } .rasa-page-title { font-family: var(--font-serif); font-weight: 500; font-size: 38px; line-height: 1; color: var(--ink); margin: 0; } /* ========================================================================== Buttons + chips ========================================================================== */ .rasa-btn { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 22px; border: 1px solid var(--ink); color: var(--ink); background: none; font-size: 13px; letter-spacing: .02em; text-decoration: none; } .rasa-btn:hover { background: var(--paper2); } .rasa-btn--primary { background: var(--ink); color: var(--paper); border: none; } .rasa-btn--primary:hover { background: var(--gold); color: var(--paper); } .rasa-btn--gold { background: var(--gold); color: var(--paper); border: none; } .rasa-btn--gold:hover { background: var(--ink); } /* Compare-toggle button : alternate label + subdued state when the item is already in the cart. Any button carrying `data-rasa-select-key` opts in. */ .rasa-btn[data-rasa-select-key] .cmp-label-remove { display: none; } .rasa-btn[data-rasa-select-key].is-on { background: var(--inksoft); color: var(--paper); } .rasa-btn[data-rasa-select-key].is-on:hover { background: var(--ink); } .rasa-btn[data-rasa-select-key].is-on .cmp-label-add { display: none; } .rasa-btn[data-rasa-select-key].is-on .cmp-label-remove { display: inline; } .rasa-btn[data-rasa-select-key].is-on .cmp-icon { transform: rotate(180deg); } .cmp-icon { display: inline-block; transition: transform .15s ease; } .rasa-btn--ghost { background: none; border: 1px solid var(--line); } .rasa-btn--ghost:hover { border-color: var(--ink); } .rasa-btn--tall { height: 50px; padding: 0 30px; font-size: 14px; } .rasa-chip { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px 0 12px; background: var(--ink); color: var(--paper); font-size: 12px; } .rasa-chip__facet { opacity: .6; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } .rasa-chip__x { opacity: .7; font-size: 13px; } /* ========================================================================== Facet rail (Explore) — 268px sticky ========================================================================== */ /* Explore layout : full-bleed grid — the rail always hugs the LEFT viewport edge, results fill everything else. No artificial max-width so cards always fill the available space (no dead space on wide screens). */ .rasa-container:has(> .rasa-explore) { max-width: none; padding: 0; margin: 0; } .rasa-explore { display: grid; grid-template-columns: var(--facet-rail) minmax(0, 1fr); gap: 0; align-items: start; } .rasa-facet-rail { border-right: 1px solid var(--line); padding: 28px 26px 64px 30px; position: sticky; top: var(--nav-height); /* --searchhead-h : published by rasa.js bindSearchHead on /search/keyword only (the sticky parameters band) — 0px anywhere else, so the rail never slides under that band. */ max-height: calc(100vh - var(--nav-height) - var(--searchhead-h, 0px)); overflow-y: auto; overflow-x: visible; box-sizing: border-box; } .rasa-facet-rail::-webkit-scrollbar { width: 6px; } .rasa-facet-rail::-webkit-scrollbar-thumb { background: var(--paper2); border: none; } .rasa-facet-rail__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; } .rasa-facet-group { border-top: 1px solid var(--line); padding: 15px 0 14px; } .rasa-facet-group__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; } .rasa-facet-group__label { font-size: 12.5px; letter-spacing: .04em; color: var(--ink); font-weight: 600; } .rasa-facet-group__body { margin-top: 13px; } .rasa-facet-group[data-closed="1"] .rasa-facet-group__body { display: none; } .rasa-facet-opt { width: 100%; display: flex; align-items: center; gap: 9px; padding: 5px 0; text-align: left; } .rasa-facet-opt:hover { opacity: .72; } .rasa-facet-opt__label { font-size: 13px; color: var(--ink); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rasa-facet-opt__count { font-family: var(--font-mono); font-size: 12px; color: var(--inksoft); } .rasa-check { width: 15px; height: 15px; border: 1px solid var(--ink); background: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex: none; } .rasa-check.is-on { background: var(--ink); color: var(--paper); } /* Facet range slider */ .rasa-range { height: 3px; background: var(--line); position: relative; margin: 18px 4px 14px; } .rasa-range__fill { position: absolute; height: 3px; background: var(--gold); } .rasa-range__handle { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); top: 50%; transform: translate(-50%, -50%); } /* Dual-thumb range slider (min + max on one track). */ .rasa-dslider { position: relative; padding: 24px 6px 10px; } .rasa-dslider__track { position: relative; height: 3px; background: var(--line); } .rasa-dslider__fill { position: absolute; height: 3px; background: var(--gold); } .rasa-dslider__lo, .rasa-dslider__hi { position: absolute; left: -6px; right: -6px; width: calc(100% + 12px); top: -8px; height: 20px; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; margin: 0; padding: 0; } .rasa-dslider__lo::-webkit-slider-thumb, .rasa-dslider__hi::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); cursor: pointer; pointer-events: auto; } .rasa-dslider__lo::-moz-range-thumb, .rasa-dslider__hi::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); cursor: pointer; pointer-events: auto; } .rasa-dslider__lo::-webkit-slider-runnable-track, .rasa-dslider__hi::-webkit-slider-runnable-track { background: transparent; } .rasa-dslider__vals { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--inksoft); font-feature-settings: 'tnum' 1; } .rasa-dslider__hint { font-size: 10px; color: var(--inksoft); opacity: .7; margin-top: 4px; text-align: center; } /* Autocomplete input */ .rasa-input { width: 100%; height: 34px; padding: 0 11px; background: var(--card); border: 1px solid var(--line); font-size: 13px; color: var(--ink); outline: none; } .rasa-input:focus { border-color: var(--ink); background: var(--paper); } /* ========================================================================== Results header + sort + view mode selector ========================================================================== */ .rasa-results { padding: 28px 30px 0; min-height: 80vh; min-width: 0; } /* Pinned header : keeps eyebrow + h1 + tools + chips visible under the nav. */ .rasa-results__pinned { position: sticky; top: var(--nav-height); background: var(--paper); z-index: 10; padding-top: 28px; margin-top: -28px; padding-bottom: 12px; } .rasa-results__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .rasa-results__tools { display: flex; align-items: center; gap: 18px; padding-bottom: 4px; } .rasa-sort .rasa-sort__menu { display: none; } .rasa-sort.is-open .rasa-sort__menu { display: block !important; } .rasa-sort__menu a:hover { background: var(--paper2); } .rasa-viewmodes { display: flex; border: 1px solid var(--line); } .rasa-viewmodes__btn { width: 36px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--inksoft); font-size: 16px; } .rasa-viewmodes__btn.is-active { background: var(--ink); color: var(--paper); } .rasa-viewmodes__btn:hover { color: var(--ink); } /* Sticky search parameters (op 2026-07-08, v2 PROGRESSIVE) — /search/keyword. rasa.js bindSearchHead drives --shrink from 0 (top of page) to 1 over the first scroll range (rAF-throttled) ; every dimension below interpolates via calc(), so the scroll literally compresses the band instead of snapping it. The title/tabs live OUTSIDE the band (template) and get pushed up with the page ; the results summary stays visible at all times. */ .rasa-searchhead { position: sticky; top: var(--nav-height); z-index: 40; background: var(--paper); padding-top: calc(22px - 12px * var(--shrink, 0)); padding-bottom: calc(16px - 6px * var(--shrink, 0)); /* Slot effect : shadow fades in with the shrink, clipped to the BOTTOM edge only (no lateral shadows) — the band reads as a slit the results slide under, not a floating card. */ box-shadow: 0 10px 22px -16px rgba(0, 0, 0, calc(.45 * var(--shrink, 0))); clip-path: inset(0 0 -30px 0); } /* Query field shrinks progressively (overrides the inline height/font-size). */ .rasa-searchhead #kwsearch input[name="q"] { height: calc(56px - 14px * var(--shrink, 0)) !important; font-size: calc(19px - 3px * var(--shrink, 0)) !important; } .rasa-searchhead .rasa-corpus-chips { margin-top: calc(14px - 5px * var(--shrink, 0)); } /* Disclaimer folds away progressively (height + fade). */ .rasa-searchhead .rasa-searchhead__note { overflow: hidden; max-height: calc(30px * (1 - var(--shrink, 0))); opacity: calc(1 - 1.4 * var(--shrink, 0)); margin-top: calc(14px * (1 - var(--shrink, 0))); } /* Results summary is ALWAYS visible in the band (op 2026-07-08 v2). */ .rasa-searchhead .rasa-searchhead__summary { display: block; } /* Keyword-search corpus toggles (op 2026-07-06) : check one or several. */ .rasa-corpus-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; } .rasa-corpus-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: 1px solid var(--line); color: var(--inksoft); background: var(--card); font-size: 12.5px; letter-spacing: .02em; cursor: pointer; user-select: none; } .rasa-corpus-chip:hover { border-color: var(--ink); color: var(--ink); } /* On-state : server `.is-on` is the socle ; `:has(:checked)` makes the click feel instant (before the auto-submit reload). */ .rasa-corpus-chip.is-on, .rasa-corpus-chip:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); } /* The native checkbox drives state (form submit) but is visually replaced by the chip. */ .rasa-corpus-chip input { position: absolute; opacity: 0; width: 0; height: 0; } /* Per-corpus result count on a checked chip (op 2026-07-08). Inherits the chip's text colour (ink, or paper when the chip is on). */ .rasa-corpus-chip__count { font-size: 10.5px; opacity: .68; margin-left: 3px; } .rasa-corpus-chip::before { content: ""; width: 12px; height: 12px; border: 1px solid currentColor; flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } /* Checked chip : the square carries an actual ✓ (op 2026-07-08), ink on paper. */ .rasa-corpus-chip.is-on::before, .rasa-corpus-chip:has(input:checked)::before { content: "✓"; background: var(--paper); border-color: var(--paper); color: var(--ink); font-size: 10px; line-height: 1; font-weight: 700; } /* « Tous » — an elegant link-chip (no checkbox square) : small caps, gold accent on hover ; is-on (every corpus selected) inherits the dark chip look. */ .rasa-corpus-chip--all { text-decoration: none; } .rasa-corpus-chip--all::before { content: none !important; } .rasa-corpus-chip--all span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; } .rasa-corpus-chip--all:hover { border-color: var(--gold); color: var(--gold); } .rasa-corpus-chip--all.is-on:hover { color: var(--paper); border-color: var(--ink); } .rasa-corpus-chip input:focus-visible + span { text-decoration: underline; } /* Opt-in to show image-less results (op 2026-07-06). */ .rasa-noimg-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--inksoft); cursor: pointer; user-select: none; } .rasa-noimg-toggle:hover { color: var(--ink); } .rasa-noimg-toggle input { width: 14px; height: 14px; accent-color: var(--ink); cursor: pointer; } /* Sort + filter controls row under the search box (op 2026-07-06). */ .rasa-search-controls { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 14px; } .rasa-search-controls .rasa-noimg-toggle { margin-top: 0; } /* Same opt-in as a link toggle in the museum browse tools row (op 2026-07-07). */ .rasa-results__tools .rasa-noimg-toggle { margin-top: 0; text-decoration: none; white-space: nowrap; } .rasa-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--inksoft); } .rasa-sort > span { letter-spacing: .1em; text-transform: uppercase; } .rasa-sort select { height: 30px; padding: 0 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 12.5px; cursor: pointer; } .rasa-sort select:hover { border-color: var(--ink); } /* Per-corpus facet rail on the keyword results (op 2026-07-06, Phase 1). */ .rasa-search-sec.has-rail { display: grid; grid-template-columns: 216px 1fr; gap: 32px; align-items: start; } .rasa-search-sec.has-rail .rasa-search-sec__head { grid-column: 1 / -1; } .rasa-facet-rail { position: sticky; top: calc(var(--nav-height) + var(--searchhead-h, 0px) + 14px); } .rasa-facet { margin-bottom: 22px; } /* Category headers pin at the top of the SCROLLING rail while their values scroll (op 2026-07-08) — each label sticks within its own .rasa-facet block, so consecutive labels hand over naturally. Used only by /search/keyword. */ .rasa-facet__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); font-weight: 600; margin-bottom: 9px; position: sticky; top: 0; z-index: 2; background: var(--paper); padding: 4px 0; } .rasa-facet__val { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--inksoft); cursor: pointer; padding: 2px 0; } .rasa-facet__val:hover { color: var(--ink); } .rasa-facet__val.is-on { color: var(--ink); } .rasa-facet__val input { position: absolute; opacity: 0; width: 0; height: 0; } .rasa-facet__val::before { content: ""; width: 11px; height: 11px; border: 1px solid var(--line); flex: none; box-sizing: border-box; } .rasa-facet__val.is-on::before { background: var(--ink); border-color: var(--ink); } .rasa-facet__v { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rasa-facet__c { flex: none; font-size: 11px; color: var(--inksoft); } /* Unified left rail in multi-corpus mode (op 2026-07-06) : one filter panel for all selected corpora, sub-grouped by corpus, with the result sections stacked right. */ .rasa-multi.has-rail { display: grid; grid-template-columns: 216px 1fr; gap: 32px; align-items: start; } .rasa-facet-rail--global { position: sticky; top: calc(var(--nav-height) + var(--searchhead-h, 0px) + 14px); } .rasa-facet-rail__title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--inksoft); font-weight: 600; margin-bottom: 16px; } .rasa-facet-corpus { margin-bottom: 24px; } .rasa-facet-corpus__head { font-size: 12px; letter-spacing: .04em; color: var(--ink); font-weight: 700; margin-bottom: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--line); } @media (max-width: 900px) { .rasa-search-sec.has-rail { grid-template-columns: 1fr; } .rasa-facet-rail { position: static; margin-bottom: 24px; } .rasa-multi.has-rail { grid-template-columns: 1fr; } .rasa-facet-rail--global { position: static; margin-bottom: 24px; } } /* ========================================================================== Card / Grid item ========================================================================== */ .rasa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(317px, 1fr)); gap: 47px 34px; } /* Whole-card lightening gradient (op 2026-07-07, inverted) : a single continuous gradient over the card — lighter beige at top → deeper beige at bottom. The image box is transparent (below) so the gradient shows through the letterbox = one surface. */ .rasa-card { display: flex; flex-direction: column; padding-bottom: 12px; background: linear-gradient(160deg, var(--card-result-2) 0%, var(--card-result) 100%); } .rasa-card__img { position: relative; aspect-ratio: 4/5; /* Transparent so the card's lightening gradient shows through the letterbox (object-fit:contain) — one continuous surface across the whole card. */ background: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden; } .rasa-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .rasa-card__glyph { font-family: var(--font-serif); font-style: italic; font-size: 21px; color: var(--ink); opacity: .28; text-align: center; padding: 14px; } .rasa-card__cap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--inksoft); margin-top: 9px; } .rasa-card__actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .rasa-card__img:hover .rasa-card__actions, .rasa-card__actions:focus-within { opacity: 1; pointer-events: auto; } .rasa-card__act { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--ink); color: var(--ink); font-size: 14px; } .rasa-card__select { position: absolute; top: 8px; left: 8px; z-index: 2; width: 22px; height: 22px; background: var(--paper); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .15s ease; } /* Visible when the card is hovered OR the item is already picked (the .is-on indicator must always show its state). The comparable tiles (.rasa-cmpcard__img) reuse the same overlay. */ .rasa-card__img:hover .rasa-card__select, .rasa-cmpcard__img:hover .rasa-card__select, .rasa-card__select.is-on, .rasa-card__select:focus-visible { opacity: 1; pointer-events: auto; } .rasa-card__select.is-on { background: var(--gold); color: var(--paper); border-color: var(--gold); } /* Quick-compare badge on comparable tiles (op 2026-07-05 v2) — mirrors the ✓ overlay but top-RIGHT, revealed on hover of the WHOLE card. Clicking it opens the 1-vs-1 duo pop-up (bindDuo) ; clicking anywhere else on the card navigates to the object page. */ .rasa-cmpcard__duo { position: absolute; top: 8px; right: 8px; z-index: 2; width: 22px; height: 22px; background: var(--paper); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; color: var(--ink); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .rasa-cmpcard:hover .rasa-cmpcard__duo, .rasa-cmpcard__duo:focus-visible { opacity: 1; pointer-events: auto; } .rasa-cmpcard__duo:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); } /* "Unsold / Invendu" tag — sits in the card footer's price slot */ .rasa-card__unsold { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--inksoft); border: 1px solid var(--line); padding: 2px 7px; white-space: nowrap; } /* ========================================================================== Comparables — design canvas RASA.dc.html §Comparables + screenshots/final.png Sticky head (title + live count + view toggle + controls) parks under the nav by default ; the lot page drives --cmp-head-top per frame (real band bottom). z25 : over the band backdrop (20), under the band itself (30) — ejects invisibly through the band like .rasa-lot__sec-head. ========================================================================== */ .rasa-cmp__head { position: sticky; top: var(--cmp-head-top, var(--nav-height)); z-index: 25; background: var(--paper); } .rasa-cmp__tbtn { height: 27px; padding: 0 12px; background: none; color: var(--inksoft); border: 1px solid var(--line); font-size: 12px; cursor: pointer; } .rasa-cmp__tbtn + .rasa-cmp__tbtn { border-left: none; } .rasa-cmp__tbtn.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); } .rasa-cmp__ctl-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--inksoft); } .rasa-cmp__srcbtn { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0; font-size: 13px; color: var(--ink); } .rasa-cmp__srcbtn:hover { opacity: .72; } .rasa-cmp__srcbox { width: 15px; height: 15px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 10px; border: 1px solid var(--inksoft); background: transparent; color: transparent; } .rasa-cmp__srcbtn.is-on .rasa-cmp__srcbox { border-color: var(--gold); background: var(--gold); color: var(--paper); } .rasa-cmp__range { width: 128px; accent-color: var(--gold); cursor: pointer; } .rasa-cmp__mosaic { display: grid; gap: 30px 22px; grid-template-columns: repeat(auto-fill, minmax(max(245px, calc((100% - 88px)/5)), 1fr)); } .rasa-cmp__cols { display: flex; gap: 30px; align-items: flex-start; } .rasa-cmp__col { flex: 1; min-width: 0; } /* With 1-2 sources checked the surviving columns get very wide — cap the ratio-driven tile so a card never exceeds 1000px tall (op 2026-07-05) ; the contained image letterboxes inside the capped box. */ .rasa-cmp__col .rasa-cmpcard__img { max-height: 1000px; } /* ── Duo compare pop-up (op 2026-07-05) — clicked comparable vs page object. Overlay shell built by rasa.js (bindDuo) ; the panel ships as the /compare/duo partial. data-mode="overlay" stacks the two figures in ONE box (images contained + centered → aligned superposition, B's opacity driven by --duo-op — the operator chains-review full-size compare idiom). */ .rasa-duo-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(20, 16, 12, .78); display: flex; align-items: center; justify-content: center; padding: 24px; } .rasa-duo__panel { background: var(--paper); border: 1px solid var(--ink); width: min(1500px, 96vw); max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; } .rasa-duo__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--line); flex: none; } .rasa-duo__stage { display: flex; gap: 22px; padding: 18px 22px 6px; min-height: 0; flex: 1 1 auto; } .rasa-duo__fig { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; min-height: 0; } .rasa-duo__imgbox { flex: 1 1 auto; min-height: 220px; max-height: 58vh; background: var(--paper2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .rasa-duo__imgbox img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; transition: transform .25s ease; } .rasa-duo__cap { font-size: 11px; letter-spacing: .08em; color: var(--inksoft); margin-top: 8px; text-transform: uppercase; } /* Superposition : les deux figures dans la MÊME boîte, B par-dessus. */ .rasa-duo__stage[data-mode="overlay"] { position: relative; } .rasa-duo__stage[data-mode="overlay"] .rasa-duo__fig { position: absolute; inset: 18px 22px 6px; } .rasa-duo__stage[data-mode="overlay"] .rasa-duo__imgbox { max-height: none; } .rasa-duo__stage[data-mode="overlay"] [data-duo-fig="b"] .rasa-duo__imgbox { background: transparent; border-color: transparent; } .rasa-duo__stage[data-mode="overlay"] [data-duo-fig="b"] img { opacity: var(--duo-op, .5); } .rasa-duo__stage[data-mode="overlay"] .rasa-duo__cap { position: absolute; bottom: -2px; } .rasa-duo__stage[data-mode="overlay"] [data-duo-fig="b"] .rasa-duo__cap { right: 0; } .rasa-duo__cartel { overflow: auto; padding: 10px 22px 18px; flex: none; max-height: 34vh; } .rasa-duo__cartel table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ink); } .rasa-duo__cartel th { text-align: left; font-size: 12px; font-weight: 600; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--ink); vertical-align: bottom; } .rasa-duo__cartel td { padding: 7px 14px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .rasa-duo__cartel th:first-child, .rasa-duo__cartel td:first-child { width: 140px; } .rasa-duo__rowlabel { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--inksoft); } /* final.png : light column header — label + count over a 2px ink rule. Sticky (op 2026-07-04) : pins flush under the sticky comparables head — --cmp-head-top follows the lot-page dock, --cmp-head-h is measured by bindCmpControls (92px fallback = compact head). z5 sits above the card hover overlays (z2) and below every band mask (z20+) ; paper background so the cards scroll cleanly under the rule. Releases naturally at the end of its own column (sticky is bounded by the parent .rasa-cmp__col). */ .rasa-cmp__colhead { position: sticky; top: calc(var(--cmp-head-top, var(--nav-height)) + var(--cmp-head-h, 92px)); z-index: 5; background: var(--paper); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 18px; } .rasa-cmp__colhead .tnum { font-family: var(--font-mono); font-size: 11px; color: var(--inksoft); font-weight: 400; } .rasa-cmp__colbody { display: flex; flex-direction: column; gap: 24px; } .rasa-cmp__empty { font-size: 12px; color: var(--inksoft); font-style: italic; padding: 10px 0; } /* Cards */ /* Same treatment as the result cards (op 2026-07-07) : the whole comparable card carries the lightening beige gradient (lighter top → deeper bottom) and its image box is transparent/borderless so the gradient is one continuous surface. */ .rasa-cmpcard { padding-bottom: 10px; background: linear-gradient(160deg, var(--card-result-2) 0%, var(--card-result) 100%); } .rasa-cmpcard__link { all: unset; cursor: pointer; display: block; } .rasa-cmpcard__link:hover { opacity: .82; } .rasa-cmpcard__img { background: transparent; border: none; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; /* anchors the hover .rasa-card__select overlay */ } .rasa-cmpcard__img img { width: 100%; height: 100%; object-fit: contain; display: block; } .rasa-cmpcard__glyph { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--ink); opacity: .4; } .rasa-cmpcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; } .rasa-cmpcard__detail { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rasa-cmpcard__sim { font-size: 10.5px; color: var(--inksoft); } /* Confirmed same-object badge (op 2026-07-07) — replaces the similarity % on a comparable that is a validated reconciliation link with the page object. */ .rasa-cmpcard__same { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--badge-green); white-space: nowrap; flex: none; } .rasa-cmpcard__bar { height: 2px; background: var(--line); margin-top: 6px; } .rasa-cmpcard__bar > div { height: 2px; background: var(--gold); } .rasa-cmpcard__bar--same > div { background: var(--badge-green); } /* Fixed-height text block = title margin (10) + 2 title lines (2×1.2×14px) + context margin (5) + 1 context line (1.35×11px). Uniform card height in BOTH views (op 2026-07-04) while the context line hugs a 1-line title — the slack sits at the wrapper bottom. overflow:hidden also keeps the title's margin-top from collapsing out of the wrapper. */ .rasa-cmpcard__text { height: calc(10px + 2 * 1.2 * 14px + 5px + 1.35 * 11px); overflow: hidden; } .rasa-cmpcard__title { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink); margin-top: 10px; line-height: 1.2; /* Max 2 lines (ellipsis) at NATURAL height (op 2026-07-04 rev 2) : a 1-line title lets the context line rise to hug it — the slack sits at the card bottom, not as a hole between title and context. Rows still top-align (grid). */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* One fixed line — rendered unconditionally (empty keeps the slot) so cards with no context line stay the same height as their neighbours. */ .rasa-cmpcard__ext { font-size: 11px; color: var(--inksoft); margin-top: 5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 1.35em; } /* Agnostic (blind) mode : source, similarity and context rows disappear. */ .rasa-cmp.is-agnostic [data-cmp-ext] { display: none !important; } .rasa-card__topline { margin-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .rasa-card__toplabel { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--inksoft); } .rasa-card__topright { font-family: var(--font-mono); font-size: 10px; color: var(--inksoft); } .rasa-card__title { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 11.375px; line-height: 1.22; color: var(--ink); margin-top: 7px; text-wrap: pretty; text-transform: uppercase; letter-spacing: .04em; /* Constant card height : the title box is ALWAYS exactly 2 lines tall — longer titles are clamped with an ellipsis, shorter ones keep the slot. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: calc(2 * 1.22em); } .rasa-card__meta { font-size: 12.5px; color: var(--inksoft); margin-top: 6px; line-height: 1.4; } /* Museum attribution on museum cards (op 2026-07-07) : name left, logo flag-right on the SAME line (logo pushed to the right edge via margin-left:auto ; when a museum has no logo the name simply keeps the left). */ .rasa-card__museum { display: flex; align-items: center; gap: 7px; margin-top: 7px; min-width: 0; } .rasa-card__museum-logo { height: 15px; width: auto; max-width: 42px; object-fit: contain; flex: none; margin-left: auto; } .rasa-card__museum-name { text-align: left; font-size: 11px; color: var(--inksoft); letter-spacing: .02em; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rasa-card__foot { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 9px; display: flex; align-items: baseline; justify-content: space-between; } .rasa-card__foot-l { font-size: 11px; color: var(--inksoft); letter-spacing: .02em; } .rasa-card__price { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--ink); } .rasa-card__price--sold { color: var(--gold); } /* Gallery (masonry) */ .rasa-gallery { column-gap: 18px; } .rasa-gallery__item { break-inside: avoid; margin-bottom: 18px; position: relative; background: var(--paper); overflow: hidden; } /* Caption overlay hidden until hover — the image itself is the primary viewing target in gallery mode. */ .rasa-gallery__cap { opacity: 0; transition: opacity .18s ease; } .rasa-gallery__item:hover .rasa-gallery__cap, .rasa-gallery__item:focus-within .rasa-gallery__cap { opacity: 1; } /* Table */ .rasa-table { width: 100%; } .rasa-table__head, .rasa-table__row { display: grid; grid-template-columns: 32px 60px 70px 1fr 180px 200px 120px 120px; align-items: center; padding: 12px 12px; border-bottom: 1px solid var(--line); } .rasa-table__head { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--inksoft); font-weight: 600; } .rasa-table__row:hover { background: var(--card); } /* Skeleton (loading) */ .rasa-sk { animation: rasaSh 1.3s linear infinite; background: linear-gradient(90deg, var(--paper2) 25%, var(--card) 50%, var(--paper2) 75%); background-size: 720px 100%; } @keyframes rasaSh { 0% { background-position: -360px 0; } 100% { background-position: 360px 0; } } @keyframes rasaPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } } /* Empty state */ .rasa-empty { text-align: center; padding: 90px 20px 110px; } .rasa-empty__title { font-family: var(--font-serif); font-style: italic; font-size: 34px; color: var(--ink); } .rasa-empty__body { font-size: 14px; color: var(--inksoft); margin: 16px auto 26px; max-width: 430px; line-height: 1.6; } /* Pagination */ .rasa-pager { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 54px; padding-top: 30px; border-top: 1px solid var(--line); } .rasa-pager__btn { height: 36px; padding: 0 14px; border: 1px solid var(--line); color: var(--ink); font-size: 13px; } .rasa-pager__btn:hover { border-color: var(--ink); } .rasa-pager__num.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ========================================================================== Comparison tray (persistent bottom bar) ========================================================================== */ .rasa-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--ink); border-top: 2px solid var(--gold); display: none; } .rasa-tray.is-open { display: block; } .rasa-tray__inner { max-width: var(--content-max); margin: 0 auto; padding: 13px var(--content-pad); display: flex; align-items: center; gap: 18px; } .rasa-tray__label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,239,230,.55); flex: none; line-height: 1.4; } .rasa-tray__thumbs { display: flex; gap: 7px; flex: 1; overflow-x: auto; padding: 2px 0; } .rasa-tray__thumb { flex: none; width: 46px; height: 46px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-family: var(--font-serif); font-style: italic; font-size: 15px; overflow: hidden; position: relative; } .rasa-tray__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .rasa-tray__thumb:hover { border-color: var(--gold); opacity: .7; } .rasa-tray__clear { color: rgba(244,239,230,.55); font-size: 12px; } .rasa-tray__clear:hover { color: var(--paper); } .rasa-tray__compare { height: 44px; padding: 0 26px; background: var(--gold); color: var(--paper); font-size: 13.5px; letter-spacing: .02em; display: flex; align-items: center; gap: 10px; } .rasa-tray__compare:hover { background: var(--paper); color: var(--ink); } /* When tray visible, reserve space so content isn't hidden behind it */ /* Tray clearance : bar height (78) + breathing room so the page end never sits flush against — or under — the fixed bar (op 2026-07-04). */ body.has-tray { padding-bottom: 140px; } /* ========================================================================== Lightbox ========================================================================== */ .rasa-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(14,12,13,.94); display: none; flex-direction: column; color: var(--paper); } .rasa-lightbox.is-open { display: flex; } .rasa-lightbox__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; } .rasa-lightbox__stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .rasa-lightbox__nav { position: absolute; width: 50px; height: 50px; border: 1px solid rgba(244,239,230,.3); color: var(--paper); font-size: 22px; } .rasa-lightbox__nav.prev { left: 24px; } .rasa-lightbox__nav.next { right: 24px; } .rasa-lightbox__nav:hover { background: rgba(244,239,230,.1); } /* Single-image object → no prev/next arrows (nothing to scroll). Set by rasa.js openList(). */ .rasa-lightbox[data-lb-single="1"] .rasa-lightbox__nav { display: none; } .rasa-lightbox__foot { text-align: center; padding: 14px; font-family: var(--font-mono); font-size: 11px; color: rgba(244,239,230,.45); } .rasa-lightbox__ctl { width: 38px; height: 38px; background: none; border: 1px solid rgba(244,239,230,.3); color: var(--paper); font-size: 17px; } .rasa-lightbox__zoom { font-family: var(--font-mono); font-size: 12px; color: rgba(244,239,230,.7); width: 54px; text-align: center; } /* Zoom slider (between − and + buttons) */ .rasa-lightbox__slider { -webkit-appearance: none; appearance: none; width: 160px; height: 4px; background: rgba(244,239,230,.25); border-radius: 2px; outline: none; cursor: pointer; } .rasa-lightbox__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.15); } .rasa-lightbox__slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); cursor: pointer; border: none; box-shadow: 0 0 0 1px rgba(0,0,0,.15); } .rasa-lightbox__slider:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(244,239,230,.35); } .rasa-lightbox__slider:focus::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(244,239,230,.35); } /* Pan cursor when the zoomed image is draggable */ .rasa-lightbox[data-lb-zoomed="1"] [data-rasa-lb-img] { cursor: grab; } .rasa-lightbox[data-lb-panning="1"] [data-rasa-lb-img] { cursor: grabbing; } /* ========================================================================== Add-to-folder popover ========================================================================== */ .rasa-popover-bg { position: fixed; inset: 0; z-index: 90; background: rgba(20,16,12,.32); display: none; align-items: center; justify-content: center; } .rasa-popover-bg.is-open { display: flex; } .rasa-popover { background: var(--paper); border: 1px solid var(--ink); width: 360px; max-width: 90vw; padding: 26px; } /* ========================================================================== Alerts / flash ========================================================================== */ .rasa-alert { padding: 12px 16px; background: var(--card); border-left: 3px solid var(--gold); font-size: 13px; color: var(--ink); margin: 12px 0; } .rasa-alert--error { border-left-color: #b10c0c; color: #b10c0c; } /* ========================================================================== Responsive Breakpoints : ≥1100px : full desktop layout (facet rail sticky left, results large) 900-1099 : rail narrows, page padding tightens 600-899 : rail collapses to a top strip, results full-width <600 : mobile — nav compacts, cards shrink, tray becomes minimal ========================================================================== */ @media (max-width: 1099px) { :root { --content-pad: 20px; --facet-rail: 232px; } } @media (max-width: 899px) { .rasa-explore { grid-template-columns: 1fr; } .rasa-facet-rail { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--line); padding: 20px 20px 24px; overflow: visible; } .rasa-results { padding: 20px 20px 0; } .rasa-nav__inner { padding: 0 20px; gap: 18px; } .rasa-nav__links { display: none; } .rasa-nav__search-btn { min-width: 0; padding: 0 12px; } .rasa-nav__search-form { min-width: 0; padding: 0 10px; } .rasa-nav__search-btn span:last-child { display: none; } .rasa-nav__cta span:not(.rasa-nav__cta-count) { display: none; } .rasa-page-title { font-size: 30px; } } @media (max-width: 599px) { :root { --content-pad: 14px; } .rasa-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 12px; } .rasa-container { padding: 0 14px; } .rasa-nav__inner { padding: 0 14px; gap: 12px; } .rasa-nav__brand-word { font-size: 20px; letter-spacing: .16em; } .rasa-nav__avatar { margin-left: 6px; } .rasa-results { padding: 14px 14px 0; } .rasa-facet-rail { padding: 14px 14px 20px; } .rasa-results__head { flex-direction: column; align-items: flex-start; gap: 10px; } .rasa-page-title { font-size: 24px; } .rasa-viewmodes__btn { width: 32px; height: 30px; font-size: 14px; } .rasa-tray__inner { padding: 10px 14px; gap: 10px; } .rasa-tray__label { display: none; } .rasa-table__head, .rasa-table__row { grid-template-columns: 28px 44px 1fr 90px; } .rasa-table__head > span:nth-child(n+5), .rasa-table__row > span:nth-child(n+5) { display: none; } } /* ========================================================================== Native currency reveal (op 2026-07-09 — mutualisé depuis le template lot) : the EUR-normalized value stays primary ; the source-currency equivalent reveals on hover of its row. Base class here ; each page wires its own hover trigger (lot fieldrow dans son template / compare price row ici). ========================================================================== */ .rasa-native { display: inline-block; opacity: 0; margin-left: 12px; color: var(--inksoft); font-family: var(--font-serif); font-style: italic; font-size: 11.5px; font-weight: 400; letter-spacing: 0; transition: opacity .15s ease; pointer-events: none; } .rasa-native::before { content: "≈ "; font-style: normal; color: var(--inksoft); opacity: .7; } [data-attr-row="price"] > div:hover .rasa-native { opacity: 1; } /* ========================================================================== Cartel sections (op 2026-07-09) — shared by the lot AND museum detail pages (filter `cartel`, routes/public/cartel_text.py). Real

blocks, 90ch reading measure (op choice ; the 1120px frame stays for the sticky sec-heads). NO hyphens:auto — pages are lang=fr, texts mostly English → wrong French hyphenation ("tra-ced", "Pun-jab"), seen on the design mockup. ========================================================================== */ /* Single-column content sits in the 2-column GRID : capped at the LEFT column's width (50% − half the 44px gap), so provenance / bibliographie / exposé and short prose all read as « colonne de gauche » under the 2-col prose above (op 2026-07-09 — replaces the earlier 90ch cap). */ .rasa-cartel p { white-space: pre-line; margin: 0 0 12px; max-width: calc(50% - 22px); text-wrap: pretty; } .rasa-cartel p:last-child { margin-bottom: 0; } /* V2 sub-heads (op choice, faithful to the source treatment) : serif italic, ink, one blank line above — embedded "Provenance"/"Literature"… titles detected by the closed bilingual list. */ .rasa-cartel__sub { display: block; font-family: var(--font-serif); font-style: italic; font-size: 1.05em; color: var(--ink); font-weight: 500; margin: 20px 0 8px; } .rasa-cartel > .rasa-cartel__sub:first-child { margin-top: 0; } /* Reference lists (Bibliographie / Exposé / exhibitions / after an embedded list-like heading) : one entry per line, left-column width like the rest, turnovers FLUSH LEFT (op 2026-07-09 — the 20px hanging indent read as an accidental indentation). text-wrap normal (NOT pretty) : pretty's last-line balancing broke « Philip / Wilson » mid-publisher ; the NBSP bindings in cartel_text._bind_ref keep the turnovers semantic instead. */ .rasa-cartel p.rasa-cartel__ref { margin: 0 0 6px; line-height: 1.55; text-wrap: initial; } /* Long prose blocks (op 2026-07-09 : 90ch jugé trop étroit sur les longues Descriptions) : the LEADING prose of a cols-enabled section (Description / Notice / Overview) flows in 2 CSS columns across the 1120px frame — each column ≈ 76ch. Embedded provenance/literature blocks live in the single-column tail, and short prose (< 700 chars) stays single-column. */ .rasa-cartel__body--cols { columns: 2; column-gap: 44px; } .rasa-cartel__body--cols p { max-width: none; } /* Narrow viewports : one column everywhere, single-col caps lifted. */ @media (max-width: 899px) { .rasa-cartel__body--cols { columns: 1; } .rasa-cartel p { max-width: none; } } /* ========================================================================== Print ========================================================================== */ @media print { .rasa-nav, .rasa-tray, .rasa-lightbox { display: none !important; } }