/* ═══════════════════════════════════════════════════════════════════════ IL ÉTAIT UN PIXEL · Squarespace effects kit · iup-effects-0.13.css ─────────────────────────────────────────────────────────────────────── Entièrement inerte tant que la balise ne porte pas la classe « iup-fx ». Une page Squarespace ordinaire n'est donc jamais affectée, même si ce fichier est chargé sur tout le site. Activation d'une page : Page settings → Advanced → Page Header Code Injection, coller la ligne indiquée dans le guide. Jetons posés sur les sections via leur Anchor ID (voir le guide) : dark · paper · sunken le fond visé par cette section parallax l'image de fond glisse au défilement pin la section reste épinglée, la suivante passe dessus hover survol des images : zoom 1.02 + légende arch · circle · diagonal découpe des images scrim · scrim-full voile de lisibilité sur l'image de fond lift apparition en fondu + remontée de 14 px ═══════════════════════════════════════════════════════════════════════ */ .iup-fx { --iup-ink: #0B0B0C; --iup-paper: #FAF9F7; --iup-sunken: #F2F0EC; --iup-ardoise: #3A4A5C; --iup-grey: #57575E; --iup-ease: cubic-bezier(.22, .61, .36, 1); --iup-dur: 900ms; --iup-dur-fade: 420ms; --iup-gap: clamp(16px, 1.6vw, 28px); --iup-gutter: clamp(20px, 5vw, 72px); --iup-sticky-top: 96px; /* Amplitude du parallaxe. Doit rester cohérente avec --iup-parallax-zoom : zoom 180 % autorise au maximum un facteur 0.5. */ --iup-parallax-zoom: 180%; --iup-parallax-shift: -40%; } /* ── 1 · FOND MORPHANT ─────────────────────────────────────────────────── Un calque fixe est glissé sous tout le site ; les sections concernées deviennent transparentes. Les couleurs de TEXTE restent celles du thème natif de la section (Darkest 1 / Lightest 1) : rien à recoder. */ /* Peint par le snippet critique, avant que le DOM des sections existe. Le calque .iup-backdrop prend le relais sans rupture : même couleur. */ .iup-fx.iup-ground-dark { background-color: #0B0B0C; } .iup-fx.iup-ground-paper { background-color: #FAF9F7; } .iup-fx.iup-ground-sunken { background-color: #F2F0EC; } .iup-fx .iup-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: var(--iup-ink); } /* Seules les sections qui déclarent un fond sont neutralisées. Une section sans jeton garde intégralement son rendu Squarespace natif. */ /* Pendant l'armement, on neutralise le fond des sections dont l'Anchor ID annonce un jeton de fond : le sélecteur travaille sur l'id AVANT que le script ne le nettoie, donc dès le premier rendu et sans JavaScript. Il cesse de matcher exactement quand data-iup-ground prend la relève. */ .iup-fx.iup-armed [id$="-dark"], .iup-fx.iup-armed [id$="-paper"], .iup-fx.iup-armed [id$="-sunken"], .iup-fx.iup-armed [id*="-dark-"], .iup-fx.iup-armed [id*="-paper-"], .iup-fx.iup-armed [id*="-sunken-"] { background-color: transparent !important; } .iup-fx.iup-armed [id$="-dark"] > .section-background, .iup-fx.iup-armed [id$="-paper"] > .section-background, .iup-fx.iup-armed [id$="-sunken"] > .section-background, .iup-fx.iup-armed [id*="-dark-"] > .section-background, .iup-fx.iup-armed [id*="-paper-"] > .section-background, .iup-fx.iup-armed [id*="-sunken-"] > .section-background { background-color: transparent !important; } .iup-fx .page-section[data-iup-ground], .iup-fx [data-iup-section][data-iup-ground] { background-color: transparent !important; position: relative; z-index: 1; } .iup-fx [data-iup-ground] > .section-background { background-color: transparent !important; } /* Échappatoire : ajouter le jeton « keepbg » si un voile natif disparaît. */ .iup-fx [data-iup~="keepbg"] > .section-background { background-color: revert !important; } /* ── 2 · PARALLAXE ─────────────────────────────────────────────────────── L'image de fond de section est surdimensionnée puis translatée par le script. Sans JavaScript, elle reste simplement cadrée un peu plus large. */ .iup-fx [data-iup~="parallax"] > .section-background { overflow: hidden; } .iup-fx [data-iup~="parallax"] > .section-background img, .iup-fx [data-iup~="parallax"] > .section-background .sqs-image-content, .iup-fx [data-iup~="parallax"] > .section-background > div { height: var(--iup-parallax-zoom) !important; top: var(--iup-parallax-shift) !important; will-change: transform; } /* ── 3 · SECTION ÉPINGLÉE ──────────────────────────────────────────────── La section reste en place pendant que la suivante remonte par-dessus. Contrainte : la section suivante doit avoir un fond opaque, sinon on voit les deux superposées. */ .iup-fx [data-iup~="pin"] { position: sticky; top: 0; z-index: 1; } .iup-fx [data-iup~="pin"] + .page-section, .iup-fx [data-iup~="pin"] + [data-iup-section] { position: relative; z-index: 2; } /* ── 4 · BLOC ÉPINGLÉ (sommaire de guide) ──────────────────────────────── Fluid Engine positionne les blocs en absolu : « position: sticky » n'y fonctionne pas. Le script épingle donc le bloc à la main et laisse une cale de la même hauteur. Ces règles ne servent qu'à l'état épinglé. */ .iup-fx .iup-pin-wrap { position: relative; min-width: 0; } .iup-fx .iup-pinned { position: fixed; top: var(--iup-sticky-top); z-index: 3; } /* Elevation de la section qui heberge un sommaire epingle, le temps de l'epinglage : sans elle, la section suivante recouvre le bloc. */ .iup-fx .iup-pin-host { position: relative !important; z-index: 6 !important; } .iup-fx .iup-pin-shim { pointer-events: none; visibility: hidden; } /* Surbrillance du lien courant, posee par le script. Volontairement sans couleur propre : le lien allume reprend la couleur pleine de son theme, les autres sont attenues. Fonctionne donc sur fond clair comme sur noir. */ .iup-fx .iup-stick a { opacity: .48; text-decoration: none; transition: opacity var(--iup-dur-fade) var(--iup-ease); } .iup-fx .iup-stick a:hover, .iup-fx .iup-stick a:focus-visible { opacity: .78; } .iup-fx .iup-stick a.iup-current { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } /* ── 5 · DÉFILEMENT HORIZONTAL ─────────────────────────────────────────── Se pose dans un bloc Code. Le script mesure la piste, fixe la hauteur de la zone et translate. Sans JavaScript : un simple carrousel tactile à défilement natif, ce qui reste parfaitement utilisable. */ .iup-fx .iup-hs { position: relative; margin-inline: calc(50% - 50vw); width: 100vw; } .iup-fx .iup-hs-viewport { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; } .iup-fx .iup-hs-track { display: flex; align-items: center; gap: var(--iup-gap); padding-inline: var(--iup-gutter); will-change: transform; } .iup-fx .iup-hs-item { flex: 0 0 auto; margin: 0; } .iup-fx .iup-hs-item img { display: block; height: min(62svh, 620px); width: auto; object-fit: cover; } .iup-fx .iup-hs-item figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; opacity: .72; max-width: 34ch; } /* Repli sans JS, et sur mobile où l'épinglage coûte plus qu'il ne rapporte */ .iup-fx .iup-hs:not(.iup-hs-live) .iup-hs-viewport { position: static; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .iup-fx .iup-hs:not(.iup-hs-live) .iup-hs-item { scroll-snap-align: center; } /* ── 6 · SURVOL DES IMAGES ─────────────────────────────────────────────── Zoom 1.02, apparition de la légende. Rien d'autre : pas de teinte, pas d'ombre, pas de translation. */ .iup-fx [data-iup~="hover"] figure, .iup-fx .iup-hover { position: relative; overflow: hidden; margin: 0; } .iup-fx [data-iup~="hover"] figure img, .iup-fx .iup-hover img { display: block; transition: transform var(--iup-dur-fade) var(--iup-ease); } .iup-fx [data-iup~="hover"] figure:hover img, .iup-fx .iup-hover:hover img { transform: scale(1.02); } .iup-fx [data-iup~="hover"] figure figcaption, .iup-fx .iup-hover figcaption { opacity: 0; transition: opacity var(--iup-dur-fade) var(--iup-ease); } .iup-fx [data-iup~="hover"] figure:hover figcaption, .iup-fx .iup-hover:hover figcaption, .iup-fx [data-iup~="hover"] figure:focus-within figcaption { opacity: 1; } /* ── 7 · DÉCOUPES ──────────────────────────────────────────────────────── Rayons à zéro partout dans la marque : ces découpes sont des formes éditoriales, pas des coins arrondis. À employer une fois par page. */ .iup-fx .iup-arch img, .iup-fx .iup-arch { border-radius: 50vw 50vw 0 0; overflow: hidden; } .iup-fx .iup-circle img, .iup-fx .iup-circle { border-radius: 50%; overflow: hidden; aspect-ratio: 1; object-fit: cover; } .iup-fx .iup-diagonal { clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%); } .iup-fx .iup-portrait img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; display: block; } .iup-fx .iup-square img { aspect-ratio: 1; object-fit: cover; width: 100%; display: block; } /* ── 8 · VOILES DE LISIBILITÉ ──────────────────────────────────────────── Jamais de type sur une photo sans voile. Valeurs reprises des jetons --scrim-* du design system. */ .iup-fx [data-iup~="scrim"] > .section-background::after, .iup-fx [data-iup~="scrim-full"] > .section-background::after, .iup-fx .iup-scrim::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .iup-fx [data-iup~="scrim"] > .section-background::after, .iup-fx .iup-scrim::after { background: linear-gradient(to top, rgba(11, 11, 12, .88) 0%, rgba(11, 11, 12, .62) 30%, rgba(11, 11, 12, .24) 62%, rgba(11, 11, 12, .08) 100%); } .iup-fx [data-iup~="scrim-full"] > .section-background::after { background: rgba(11, 11, 12, .46); } /* ── 9 · APPARITION AU DÉFILEMENT ──────────────────────────────────────── Fondu + remontée de 14 px, 900 ms. C'est la seule animation d'entrée autorisée par le design system. */ /* Pis-aller d'avant-rendu : masque les blocs des sections dont l'Anchor ID annonce « lift », le temps que le script pose .iup-lift. Le desarmement le retire, et l'etat permanent ci-dessous prend le relais. Si le script ne se charge jamais, .iup-lift n'est jamais pose et rien ne reste masque. */ .iup-fx.iup-armed [id$="-lift"] .sqs-block, .iup-fx.iup-armed [id*="-lift-"] .sqs-block, .iup-fx.iup-armed [id$="-lift"] .iup-lift-target, .iup-fx.iup-armed [id*="-lift-"] .iup-lift-target { opacity: 0; } .iup-fx [data-iup~="lift"] .iup-lift, .iup-fx .iup-lift { opacity: 0; transform: translateY(14px); transition: opacity var(--iup-dur) var(--iup-ease), transform var(--iup-dur) var(--iup-ease); } .iup-fx .iup-lift.iup-in { opacity: 1; transform: none; } /* ── 10 · ACCESSIBILITÉ ────────────────────────────────────────────────── Le contour de focus natif de Squarespace est trop peu contrasté : on le remplace partout où le kit est actif. */ .iup-fx a:focus-visible, .iup-fx button:focus-visible, .iup-fx input:focus-visible, .iup-fx textarea:focus-visible, .iup-fx select:focus-visible { outline: 2px solid var(--iup-ardoise); outline-offset: 3px; } /* ── 11 · TYPOGRAPHIE PAR BLOC ───────────────────────────────────────── Les deux écarts que le guide natif demandait d'accepter, refermés. Squarespace émet une classe sur les paragraphes selon leur style : sqsrte-small pour P3, sqsrte-large pour P2. On ne s'en sert QUE dans les sections qui portent le jeton correspondant, jamais globalement. jeton « labels » : les P3 de la section deviennent des étiquettes en petites capitales espacées à 0,16 em jeton « figures » : les P2 de la section passent en Bodoni Moda, pour les chiffres de la bande de crédibilité */ .iup-fx [data-iup~="labels"] p.sqsrte-small, .iup-fx .iup-label { font-size: 11px !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: .16em !important; text-transform: uppercase !important; } /* Les légendes d'image partagent le style P3 : on les exclut nommément. */ .iup-fx [data-iup~="labels"] figcaption p.sqsrte-small, .iup-fx [data-iup~="labels"] .sqs-block-image p.sqsrte-small { font-size: 13px !important; letter-spacing: normal !important; text-transform: none !important; } .iup-fx [data-iup~="figures"] p.sqsrte-large, .iup-fx .iup-figure-serif { font-family: 'Bodoni Moda', 'Times New Roman', serif !important; font-weight: 400 !important; letter-spacing: -.015em !important; } /* ── 12 · DEUX LOGOS, ANGLES DROITS ─────────────────────────────────── Squarespace n'accepte qu'un logo par site. Le wordmark étant strictement monochrome, l'inversion donne exactement l'autre variante du fichier. À activer page par page, avec la classe iup-logo-ink. */ .iup-fx.iup-logo-ink .header-title-logo img, .iup-fx.iup-logo-ink .header-mobile-logo img { filter: invert(1); } /* Rayon des champs de formulaire : non exposé dans les réglages natifs. */ .iup-fx input, .iup-fx textarea, .iup-fx select, .iup-fx .field-element { border-radius: 0 !important; } @media (prefers-reduced-motion: reduce) { .iup-fx .iup-lift, .iup-fx [id$="-lift"] .sqs-block, .iup-fx [id*="-lift-"] .sqs-block { opacity: 1 !important; transform: none !important; transition: none !important; } .iup-fx [data-iup~="parallax"] > .section-background img { transform: none !important; } .iup-fx .iup-hs-viewport { position: static; height: auto; overflow-x: auto; } .iup-fx [data-iup~="hover"] figure img, .iup-fx .iup-stick a { transition: none; } }