/* Fiche produit : pochette vinyle à gauche, informations d'achat à droite. * * Chargée par l'accueil ET par les fiches. Barba ne remplace que le conteneur, * jamais le : une feuille déclarée seulement sur la fiche serait absente * lors d'une arrivée en SPA depuis l'accueil. * * Typographie, couleurs et rythme viennent des classes du site (heading-*, * subheading-xs, paragraph-m, divider-horizontal) : on n'invente pas un second * système. Ce fichier ne fait que de la mise en page. */ .product-hero { --sleeve: clamp(15rem, 25vw, 26rem); /* Le disque sort de la pochette vers la droite. La scène réserve cette * largeur en dur : la colonne de droite ne peut donc pas être chevauchée, * quelle que soit la taille d'écran. C'est une garantie structurelle, pas un * réglage à retoucher écran par écran. */ --slide: 0.52; --stage: calc(var(--sleeve) * (1 + var(--slide))); display: grid; grid-template-columns: var(--stage) minmax(0, 1fr); gap: clamp(2rem, 3.5vw, 4rem); align-items: center; min-height: 100svh; padding: clamp(1rem, 4vw, 4rem); /* Réserve la barre de verre en haut et le lecteur fixé en bas. */ padding-top: max(6rem, 12vh); padding-bottom: 7rem; background-color: var(--_theme---background); } /* Desktop : le panneau d'achat est plus haut que l'écran ; centrer la * pochette sur lui la poussait sous la ligne de flottaison (à moitié hors * écran en 1366×650). Elle se cale en haut et reste en vue (sticky), centrée * dans la hauteur visible, pendant qu'on parcourt le panneau. */ @media (min-width: 1025px) { .product-hero { align-items: start; } /* Spécificité renforcée : `.vinyl-stage { position: relative }` plus bas * (repère du CD) l'emporterait sinon. Sticky reste un repère valable. */ .product-hero .vinyl-stage { position: sticky; top: max(6rem, calc(50svh - var(--sleeve) / 2)); } } /* Le panneau d'achat descend sous la barre (demande de la cliente) : 1 cm * (38 px) partout, 2 cm sur desktop. La pochette ne bouge pas. */ .product-hero__panel { margin-top: 2.375rem; } @media (min-width: 1025px) { .product-hero__panel { margin-top: 4.75rem; } /* Grand écran : la colonne du panneau s'arrête à la largeur maximale du * panneau (48rem + son décalage), et le groupe pochette + panneau se centre * comme la barre et le lecteur. Sans ça, en ultra-large, tout restait * collé à gauche avec un grand vide à droite. En dessous (≤ 1440 px * environ) les colonnes remplissent déjà la largeur : rien ne change. */ .product-hero { grid-template-columns: var(--stage) minmax(0, calc(48rem + 2.375rem)); justify-content: center; } /* 1 cm (38 px) de marge à gauche du panneau : il s'écarte de la pochette, * son bord droit ne bouge pas. */ .product-hero__panel { margin-left: 2.375rem; } /* Le CD vu de face déborde la pochette d'environ 1 cm à gauche (il occupe * ~67 % de sa boîte, plus large que la pochette) : décalé d'1 cm, son bord * s'aligne sur celui de la pochette. `translate`, pas `transform` : la * bascule vinyle ↔ CD anime déjà `transform`. */ .cd-stage { translate: 2.375rem 0; } } /* ---- Pochette et disque ------------------------------------------------- */ .vinyl-stage { display: flex; flex-flow: column; gap: 1.25rem; align-items: flex-start; width: var(--stage); } .vinyl { position: relative; width: var(--sleeve); height: var(--sleeve); } .vinyl__sleeve { position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 2px; overflow: hidden; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .28); transition: transform .55s cubic-bezier(.22, .61, .36, 1); } .vinyl__sleeve img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Le pli et le vernis de la pochette : un liseré clair en haut, une ombre * d'ouverture à droite. Sans ça le carré reste une image, pas un objet. */ .vinyl__sleeve:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, .35) 0, transparent 4%), linear-gradient(to right, transparent 92%, rgba(0, 0, 0, .35) 100%); } .vinyl__record { position: absolute; z-index: 1; top: 4%; left: 4%; width: 92%; height: 92%; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: translateX(0) rotate(0deg); transition: transform .75s cubic-bezier(.22, .61, .36, 1); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .45); background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .055) 0 1px, transparent 1px 4px), conic-gradient(from 210deg at 50% 50%, transparent 44%, rgba(255, 255, 255, .10) 49%, rgba(255, 255, 255, .16) 51%, transparent 57%), conic-gradient(from 30deg at 50% 50%, transparent 44%, rgba(255, 255, 255, .08) 49%, rgba(255, 255, 255, .14) 51%, transparent 57%), #0a0a0b; } .vinyl__label { width: 33%; height: 33%; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 .35rem #0a0a0b; } /* Le trou central. */ .vinyl__label:after { content: ""; position: absolute; top: 50%; left: 50%; width: 2.2%; height: 2.2%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--_theme---background, #eceae5); } .vinyl[data-open="true"] .vinyl__record, .vinyl:hover .vinyl__record, .vinyl:focus-within .vinyl__record { transform: translateX(calc(var(--slide) * 100%)) rotate(360deg); } .vinyl[data-open="true"] .vinyl__sleeve, .vinyl:hover .vinyl__sleeve, .vinyl:focus-within .vinyl__sleeve { transform: translateX(-2.5%) rotate(-1.4deg); } /* ---- Vinyle ↔ CD -------------------------------------------------------- * * Le CD est la galerie 3D de l'accueil réduite à ce seul disque * (.cd-stage). Passer d'un format à l'autre fait tourner l'objet sur * lui-même : la pochette pivote et se tourne de profil pendant que le CD * arrive par l'autre face, comme une carte qu'on retourne. Transitions CSS * pilotées par `data-format` : un clic en pleine course repart de la * position courante, sans à-coup. * * Jamais de display:none sur .cd-stage : le canvas WebGL mesurerait 0×0 * (« Framebuffer is incomplete »). On le cache par opacité et rotation. */ .vinyl-stage { position: relative; } .vinyl { transform-origin: 50% 50%; transition: transform 0.75s cubic-bezier(0.34, 1.3, 0.5, 1) 0.3s, opacity 0.25s 0.3s; } .vinyl-stage[data-format="cd"] .vinyl { transform: perspective(1400px) rotateY(88deg) scale(0.72); opacity: 0; pointer-events: none; transition: transform 0.4s cubic-bezier(0.55, 0, 0.8, 0.2), opacity 0.2s 0.2s; } /* Disque sorti ou non, il rentre dans sa pochette avant de partir. */ .vinyl-stage[data-format="cd"] .vinyl .vinyl__record { transform: none; } .vinyl-stage[data-format="cd"] .vinyl .vinyl__sleeve { transform: none; } .cd-stage { /* La caméra du bundle cadre le disque d'après la hauteur du canvas : de * face (product.js), il occupe ~55 % de sa boîte. Boîte carrée, centrée * sur la pochette, taillée pour que le CD ait la taille de la pochette. */ --cd-box: calc(var(--sleeve) * 1.8); position: absolute; top: calc(var(--sleeve) / 2 - var(--cd-box) / 2); left: calc(var(--sleeve) / 2 - var(--cd-box) / 2); width: var(--cd-box); height: var(--cd-box); pointer-events: none; opacity: 0; transform: perspective(1400px) rotateY(-88deg) scale(0.72); transition: transform 0.4s cubic-bezier(0.55, 0, 0.8, 0.2), opacity 0.2s 0.2s; } .vinyl-stage[data-format="cd"] .cd-stage { opacity: 1; pointer-events: auto; /* survol, boucles autour du disque, glisser */ transform: none; transition: transform 0.75s cubic-bezier(0.34, 1.3, 0.5, 1) 0.3s, opacity 0.25s 0.3s; } .cd-stage .film-data { display: none; } /* ---- Panneau d'achat ---------------------------------------------------- * * Même grammaire que la fiche de l'accueil (disc-card.css) : panneau de * verre arrondi, traits noirs à bouts ronds, Archivo + JetBrains Mono, * commandes en pastilles. Principe : le moins d'étiquettes possible — pas de * « FORMAT », pas de « PRIX », pas de sous-titre sous chaque édition. Le * détail d'une édition n'apparaît que sous celle qu'on a choisie. */ .buy { --ink: #0b0b0c; --ink-2: rgba(11, 11, 12, 0.56); --ink-3: rgba(11, 11, 12, 0.14); --paper: #f2f0ec; --mono: "JetBrains Mono Sillon", ui-monospace, "SF Mono", Menlo, monospace; --grot: "Archivo Sillon", "Helvetica Neue", Arial, sans-serif; --spring: cubic-bezier(0.34, 1.36, 0.5, 1); box-sizing: border-box; width: 100%; max-width: 48rem; padding: 1.25rem 1.75rem 1.5rem; border-radius: 1.75rem; color: var(--ink); container-type: inline-size; box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, 0.28), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.07); } .buy .lg__border { background: radial-gradient(16rem 9rem at var(--mx, 30%) var(--my, -10%), rgba(255, 255, 255, 0.55), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.06)); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.95), inset 0 -1px 0.5px rgba(255, 255, 255, 0.4), inset 0 0 0 0.5px rgba(255, 255, 255, 0.55), inset 0 0 1.25rem rgba(0, 0, 0, 0.06); } /* Remises à zéro en :where() : spécificité nulle, les règles des composants * ci-dessous gagnent toujours. */ :where(.buy) :where(p, figure, blockquote) { margin: 0; } :where(.buy) blockquote { padding: 0; border: 0; } :where(.buy) fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } :where(.buy) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .buy__inner::before, .buy__inner::after { content: ""; display: block; height: 6px; border-radius: 999px; background: var(--ink); } .buy__inner::after { content: none; } .buy__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ink); font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } .buy__swatch { width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; background: rgb(var(--disc-accent, 11, 11, 12)); } /* Nom d'artiste → /collections/cecil. Même bouton qu'« Explore collections » * de la section Discover (.dsc__btn) : texte en Archivo 500, flèche dans un * rond cerclé qui pivote de −45° au survol (interaction Webflow a-17 / a-18 * de la page Cecil : 0,4 s outBack à l'aller, 0,3 s inBack au retour). * Marges négatives : le rond ne doit pas épaissir la ligne de tête. */ .buy__artist { margin: -0.375rem 0 -0.375rem auto; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.25em; color: inherit; font: 500 0.8125rem/1 var(--grot); letter-spacing: -0.005em; text-transform: none; white-space: pre; text-decoration: none; } .buy__artist:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; } .buy__arrow { display: flex; flex: none; align-items: center; justify-content: center; width: 2.5em; height: 2.5em; border: 1px solid var(--ink); border-radius: 50%; transition: rotate 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045); } .buy__arrow svg { height: 0.5em; } .buy__artist:hover .buy__arrow, .buy__artist:focus-visible .buy__arrow { rotate: -45deg; transition: rotate 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Le mot le plus long tient toujours sur une ligne : --fit-chars posé par le * générateur ; 0.56 em ≈ une capitale Archivo 900 à chasse 62 %. */ .buy__title { margin: 0; padding: 1rem 0 0; font-family: var(--grot); font-weight: 900; font-stretch: 62%; font-size: min(6rem, 100cqi / (var(--fit-chars, 8) * 0.56)); line-height: 0.84; letter-spacing: -0.005em; text-transform: uppercase; } /* ---- Une seule ligne d'infos sous le titre ---- */ .buy__facts { display: flex; flex-wrap: wrap; gap: 0.25rem 0; padding: 0.75rem 0 0; font: 500 0.6875rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); } .buy__facts span + span::before { content: "·"; margin: 0 0.625rem; } /* ---- Choix : format puis édition ---- */ .buy__choose { padding-top: 1.5rem; } .seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 0.25rem; border-radius: 999px; background: rgba(11, 11, 12, 0.06); box-shadow: inset 0 0 0 1px var(--ink-3); } .seg__opt { position: relative; z-index: 1; display: flex; justify-content: center; padding: 0.75rem; border-radius: 999px; cursor: pointer; } .seg__opt input { position: absolute; opacity: 0; pointer-events: none; } .seg__label { font-family: var(--grot); font-weight: 900; font-stretch: 62%; font-size: 1.5rem; line-height: 1; text-transform: uppercase; color: var(--ink-2); transition: color 0.2s; } .seg__opt:has(input:checked) .seg__label { color: var(--ink); } .seg__opt:has(input:focus-visible) { outline: 2px solid #0a84ff; outline-offset: -2px; } .seg__knob { position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0.25rem; width: calc(50% - 0.25rem); border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0.25rem 0.75rem -0.25rem rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.08), inset 0 1px 0 #fff; transition: transform 0.55s var(--spring); } .seg:has(.seg__opt:nth-child(2) input:checked) .seg__knob { transform: translateX(100%); } /* ≈ 1 cm (38 px) au-dessus et au-dessous des éditions : elles respirent * entre le choix Vinyle / CD et la ligne d'achat (demande de la cliente). */ .buy__editions { margin-top: 2.375rem; } .buy__editions[hidden] { display: none; } .edition { position: relative; display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; align-items: center; column-gap: 0.875rem; margin: 0 -0.75rem; padding: 0.875rem 0.75rem; border-radius: 1rem; cursor: pointer; transition: background-color 0.2s, box-shadow 0.3s; } .edition + .edition::before { content: ""; position: absolute; top: 0; left: 0.75rem; right: 0.75rem; border-top: 1px solid var(--ink-3); } .edition:hover { background: rgba(255, 255, 255, 0.45); } .edition:has(input:checked) { background: rgba(255, 255, 255, 0.85); box-shadow: 0 0.25rem 1rem -0.5rem rgba(0, 0, 0, 0.22); } .edition:has(input:checked)::before, .edition:has(input:checked) + .edition::before { border-color: transparent; } .edition:has(input:focus-visible) { outline: 2px solid #0a84ff; outline-offset: 0; } .edition input { position: absolute; opacity: 0; pointer-events: none; } .edition__mark { width: 1.125rem; height: 1.125rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); transition: box-shadow 0.25s var(--spring); } .edition:has(input:checked) .edition__mark { box-shadow: inset 0 0 0 5px var(--ink); } .edition__name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; font-family: var(--grot); font-weight: 700; font-stretch: 88%; font-size: 1.0625rem; line-height: 1.15; } /* Tirage d'une édition limitée : en petit, dans le gris des infos. Jamais * de « stock restant » (voir CLAUDE.md). */ .edition__run { font: 500 0.625rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); } .edition__price { font-family: var(--grot); font-weight: 800; font-stretch: 75%; font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---- Quantité · bouton (qui porte le prix), sur une ligne ---- */ .buy__total { display: flex; align-items: center; gap: 0.75rem; margin-top: 2.375rem; } .qty { display: flex; align-items: center; padding: 0.25rem; border-radius: 999px; background: rgba(11, 11, 12, 0.06); box-shadow: inset 0 0 0 1px var(--ink-3); } .qty__btn { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font: 500 1.125rem/1 var(--mono); transition: background-color 0.2s, transform 0.35s var(--spring); } .qty__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.9); } .qty__btn:active:not(:disabled) { transform: scale(0.9); } .qty__btn:disabled { opacity: 0.3; cursor: default; } .qty__value { min-width: 1.75rem; text-align: center; font: 500 0.9375rem/1 var(--mono); font-variant-numeric: tabular-nums; } /* Bouton désactivé tant qu'il n'y a pas de panier, et il en a l'air : la * mention dessous dit pourquoi. */ .buy__cta { box-sizing: border-box; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.0625rem 1.5rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--grot); font-weight: 900; font-stretch: 62%; font-size: 1.375rem; line-height: 1; /* Même correction que le bouton de /login : l'espace se perdait en * condensé (« AJOUTERAUPANIER »). */ letter-spacing: 0; word-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .buy__cta:disabled { opacity: 0.5; cursor: not-allowed; } .buy__cta-total { font: 500 0.875rem/1 var(--mono); font-variant-numeric: tabular-nums; } .buy__note { margin-top: 0.75rem; font: 500 0.625rem/1.6 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); } .buy__dot { display: inline-block; width: 0.4375rem; height: 0.4375rem; margin-right: 0.4375rem; border-radius: 50%; background: #2f9e5b; vertical-align: 0.0625rem; } /* ---- « À propos du disque » : tout ce qui ne sert pas à acheter ---- * * Fermé à l'arrivée. Même rond cerclé que les boutons du site ; son « + » * pivote en « × » à l'ouverture (même ressort outBack que la flèche). Le * contenu s'ouvre en hauteur (grille 0fr → 1fr). */ .buy__more { margin-top: 1.5rem; border-top: 1px solid var(--ink-3); } .buy__more-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 0 0.125rem; font: 500 0.8125rem/1 var(--grot); letter-spacing: -0.005em; text-align: left; } .buy__more-toggle:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 0.25rem; } .buy__plus { position: relative; flex: none; width: 2rem; height: 2rem; border: 1px solid var(--ink); border-radius: 50%; transition: rotate 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045); } .buy__plus::before, .buy__plus::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 0.625rem; height: 1.5px; border-radius: 999px; background: currentColor; translate: -50% -50%; } .buy__plus::after { rotate: 90deg; } .buy__more[data-open] .buy__plus { rotate: 45deg; transition: rotate 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .buy__more-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.45s var(--spring), opacity 0.25s; } .buy__more[data-open] .buy__more-body { grid-template-rows: 1fr; opacity: 1; } .buy__more-inner { overflow: hidden; display: grid; gap: 1rem; } .buy__more[data-open] .buy__more-inner { padding-top: 1rem; } .buy__desc { max-width: 38rem; font-family: var(--grot); font-weight: 450; font-stretch: 92%; font-size: 1rem; line-height: 1.45; text-wrap: pretty; } .buy__credits { font: 500 0.6875rem/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); } .buy__editions-notes { display: grid; gap: 0.5rem; margin: 0; } .buy__editions-notes[hidden] { display: none; } .buy__editions-notes div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; } .buy__editions-notes dt { font: 700 0.8125rem/1.35 var(--grot); font-stretch: 88%; } .buy__editions-notes dd { margin: 0; font: 450 0.8125rem/1.45 var(--grot); font-stretch: 92%; color: var(--ink-2); } .buy__press blockquote { font-family: var(--grot); font-weight: 800; font-stretch: 75%; font-size: 1.25rem; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; } /* Source de la citation en , pas en
: le CSS d'origine * masque toutes les figcaption (display:none !important). */ .buy__source { display: block; font-style: normal; margin-top: 0.5rem; font: 500 0.625rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .buy__artist-link { justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; font: 500 0.8125rem/1 var(--grot); color: inherit; text-decoration: none; } /* Panneau étroit : le bouton passe sous le prix, pleine largeur. */ @container (max-width: 26rem) { .buy__cta { padding-inline: 1.125rem; font-size: 1.25rem; } .buy__editions-notes div { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; } } /* ---- Tablette et mobile -------------------------------------------------- */ @media (max-width: 1024px) { .product-hero { /* La pochette est dimensionnée pour que la scène ENTIÈRE — pochette plus * la course du disque — tienne dans la largeur. Caler `--sleeve` sur la * seule pochette laisserait le disque sortir de l'écran et se faire * rogner, sans même déclencher de débordement horizontal puisque le site * masque l'axe X. */ --sleeve: min(58vw, 20rem); grid-template-columns: minmax(0, 1fr); gap: 2.5rem; justify-items: center; padding-top: 5.5rem; padding-bottom: 7rem; } /* La scène garde sa largeur réservée (`--stage`) et c'est elle qu'on centre, * pas la pochette : l'ensemble ouvert reste donc dans le cadre. */ .vinyl-stage { align-items: flex-start; } /* En CD, la pochette s'efface : le CD se centre sur la scène entière, pas * sur la pochette (calée à gauche de la scène), sinon il penche à gauche. */ .cd-stage { left: calc(var(--stage) / 2 - var(--cd-box) / 2); } /* `.buy` est un conteneur de requêtes (titre ajusté en cqi) : il n'a donc * plus de largeur propre, et la grille centrée le réduirait à rien. */ .product-hero__panel { width: 100%; display: flex; justify-content: center; } .buy { max-width: 44rem; } } /* Sans survol, l'animation serait invisible : le disque est déjà sorti à * l'arrivée. (Pas de légende d'invite : le geste se découvre.) */ @media (hover: none) { .vinyl__record { transform: translateX(calc(var(--slide) * 100%)) rotate(360deg); } .vinyl__sleeve { transform: translateX(-2.5%) rotate(-1.4deg); } } @media (max-width: 560px) { .buy { padding: 1rem 1.125rem 1.25rem; border-radius: 1.5rem; } } @media (prefers-reduced-motion: reduce) { .vinyl__record, .vinyl__sleeve, .seg__knob, .edition__mark, .buy__more-body, .buy__plus, .vinyl, .cd-stage { transition: none; } } /* ---- « Discover the Palmer Collection » (sous le panneau d'achat) -------- * * Copie de la section de /collections/cecil : mêmes règles que le CSS Webflow * de Palmer (grille 20/30/20/10/20 %, décalages des disques, marges), mêmes * points de rupture. Tout est en em sur l'échelle de Palmer : 16 px pour une * maquette de 1920 px, bornée par format (--dsc-min/max/ideal). * Seul écart : la police. Palmer compose en TWK Lausanne, licence de Palmer ; * ici l'Archivo du site (OFL), en maigre comme l'original. * Les disques sont des images (tools/make-discs.cjs) ; ils apparaissent en * s'agrandissant, l'un après l'autre (product.js pose --d et .is-in). */ .dsc { --dsc-min: 1280px; --dsc-max: 1920px; --dsc-ideal: 1920; font-size: calc(clamp(var(--dsc-min), 100vw, var(--dsc-max)) / (var(--dsc-ideal) / 16)); padding: 16em 1.25em; /* Le lecteur fixe ne doit pas couvrir le bas du dernier disque. */ padding-bottom: max(16em, 7rem); background: #f5f6ee; color: #222; font-family: "Archivo Sillon", "Helvetica Neue", Arial, sans-serif; font-weight: 300; line-height: 1.4; overflow: hidden; } .dsc__grid { display: grid; grid-template-columns: 20% 30% 20% 10% 20%; justify-items: center; width: 100%; } .dsc__cell { position: relative; width: 100%; aspect-ratio: 1; } .dsc__cell.is-large { margin-top: -4em; place-self: center; } .dsc__cell.is-vcenter { align-self: center; } .dsc__cell.is-medium { width: 70%; place-self: center; } .dsc__cell.is-span-2 { grid-column: span 2; } .dsc__row { grid-column: span 5; display: grid; grid-template-columns: repeat(5, 20%); width: 100%; } .dsc__disc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; /* translate et scale séparés : le décalage de la case reste pendant * l'apparition (Palmer : transform sur l'image + GSAP scale). */ scale: 0; opacity: 0; transition: scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s), opacity 0.8s ease var(--d, 0s); } .dsc.is-in .dsc__disc { scale: 1; opacity: 1; } .dsc__disc.is-down-8 { translate: 0 8em; } .dsc__disc.is-up-4 { translate: 0 -4em; } .dsc__disc.is-up-8 { translate: 0 -8em; } .dsc__text { grid-column: span 3; display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 1.25em; width: 100%; padding: 12em 0 6em; text-align: center; } .dsc__title { width: 100%; max-width: calc((100vw - 1.25em) / 12 * 5); margin: 0; font-family: inherit; /* le site pose sa propre police sur les h2 */ font-size: 6em; font-weight: 300; line-height: 0.9; letter-spacing: -0.03em; color: inherit; text-wrap: balance; } .dsc__lede { width: 100%; max-width: calc((100vw - 1.25em) / 12 * 4); margin: 0; font-family: inherit; font-weight: inherit; font-size: 1.25em; letter-spacing: -0.01em; text-wrap: balance; } .dsc__btn { display: flex; align-items: center; gap: 0.5em; padding: 0.25em; color: inherit; font-weight: 500; white-space: pre; text-decoration: none; } .dsc__arrow { display: flex; align-items: center; justify-content: center; width: 2.5em; height: 2.5em; border: 1px solid #222; border-radius: 50%; /* Même animation que « Explore collections » sur /collections/cecil * (interaction Webflow a-17 / a-18) : au survol, le rond de la flèche pivote * de −45° en 0,4 s (outBack) ; en sortie, il revient en 0,3 s (inBack). */ transition: rotate 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045); } .dsc__arrow svg { height: 0.5em; } .dsc__btn:hover .dsc__arrow, .dsc__btn:focus-visible .dsc__arrow { rotate: -45deg; transition: rotate 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .dsc__btn:focus-visible { outline: 1px solid #222; outline-offset: 2px; } .dsc__mobile { display: none; } @media (max-width: 991px) { .dsc { --dsc-min: 768px; --dsc-max: 991px; --dsc-ideal: 834; padding: 10em 1em calc(10em + 5rem); } .dsc__title { font-size: 5em; max-width: calc((100vw - 1em) / 8 * 5); } .dsc__lede { max-width: calc((100vw - 1em) / 8 * 4); } .dsc__text { padding: 10em 0 4em; } } @media (max-width: 767px) { .dsc { --dsc-min: 480px; --dsc-max: 767px; --dsc-ideal: 767; } } /* Mobile : six disques posés en couronne autour du texte. */ @media (max-width: 479px) { .dsc { --dsc-min: 320px; --dsc-max: 479px; --dsc-ideal: 479; padding: 5em 1em calc(5em + 5rem); } .dsc__grid { position: relative; display: block; height: 48em; } .dsc__grid > .dsc__cell, .dsc__row { display: none; } /* Le texte couvre toute la couronne : il laisse passer les clics vers les * disques, sauf sur son bouton. */ .dsc__text { position: relative; z-index: 1; height: 100%; padding: 10em 0 4em; pointer-events: none; } .dsc__btn { pointer-events: auto; } .dsc__title { font-size: 3.5em; max-width: 100%; } .dsc__lede { max-width: none; } .dsc__mobile { position: absolute; inset: 0; display: block; } .dsc__mobile .dsc__cell { position: absolute; width: 15em; } .dsc__cell.is-mobile-1 { top: 2.5em; left: -10em; } .dsc__cell.is-mobile-2 { top: -2.5em; left: calc(50% - 7.5em); } .dsc__cell.is-mobile-3 { top: 2.5em; right: -10em; } .dsc__cell.is-mobile-4 { bottom: 2.5em; left: -10em; } .dsc__cell.is-mobile-5 { bottom: -2.5em; left: calc(50% - 7.5em); } .dsc__cell.is-mobile-6 { bottom: 2.5em; right: -10em; } } @media (prefers-reduced-motion: reduce) { .dsc__disc { scale: 1; opacity: 1; transition: none; } }