/* ========================================================================== BAZA-S261 — ÉCRIN MARKETING DESKTOP DE app.baza.fr -------------------------------------------------------------------------- Objet : remplacer, sur GRAND ÉCRAN uniquement, le décor beige répétitif qui entoure la coque téléphone (fond champagne lisse S194 + tuile SVG S194B répétée à l'infini) par une véritable vitrine de marque Baza : bandeau officiel, portraits détourés, fond composé, accroche, boutons d'installation. INVARIANTS RESPECTÉS - Servi depuis `public/` : Vite ne le fusionne PAS dans `assets/index-*.css`. La coque CSS GELÉE S141 reste byte-identique — aucun re-pin de hash, mise à jour PWA sans réinstallation. `src/index.css` n'est PAS touché par S261. - Les surcharges gagnent par SPÉCIFICITÉ (`html body …`) : l'ordre d'injection du CSS compilé par Vite n'a donc aucune importance. - RÈGLE ABSOLUE « responsive » : l'écrin n'existe QUE sur desktop. Sous 1024px il est `display: none` — RÉELLEMENT RETIRÉ DU FLUX, jamais simplement masqué — et aucune règle de ce fichier ne s'applique. Le rendu mobile réel (< 768px, app plein écran) et le rendu tablette (768–1023px, coque téléphone historique S63) sont STRICTEMENT INCHANGÉS. Le décor étant neutralisé par une règle de BASE (hors media query), aucun flash n'est possible au chargement sur mobile. - Mode desktop natif S224/S226 (`?bazaDesktop=1`) : écrin neutralisé. - `prefers-reduced-motion: reduce` : plus AUCUNE animation ni transition. - Aucune ressource externe : logo Baza officiel du dépôt, portraits WebP locaux, glyphes SVG inline, polices de la charte publique (piles système). ========================================================================== */ /* -------------------------------------------------------------------------- 1. ÉTAT PAR DÉFAUT, TOUTES LARGEURS — l'écrin n'existe pas. -------------------------------------------------------------------------- */ .s261-back, .s261-front { display: none; } /* -------------------------------------------------------------------------- 2. VITRINE DESKTOP — à partir de 1024px seulement. -------------------------------------------------------------------------- */ @media (min-width: 1024px) { :root { /* Palette : EXACTEMENT la charte publique baza.fr (`apps/web-seo/src/styles.css`). Aucune couleur inventée. */ --s261-cream: #fff4e4; --s261-green: #087a37; --s261-green-deep: #064b2a; --s261-gold: #d7a84f; --s261-ink: #211612; --s261-text: #3a2a20; /* Ton « discret » des TEXTES de petite taille. Le gris chaud de la charte (#6f5a4e) tombe à 4,5:1 sur le point le plus foncé du fond (#f3d3b9) : assombri d'un cran, il est mesuré à 6,0:1 et la marge AA ne dépend plus d'un arrondi. */ --s261-quiet: #5c483c; --s261-hair: rgba(33, 22, 18, 0.12); /* Typographie : les DEUX piles de la charte publique, aucune police téléchargée. Serif éditorial pour l'affichage, pile système pour l'interface, et le serif en micro-capitales espacées pour les libellés. */ --s261-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; --s261-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Géométrie de la scène. La colonne centrale est calculée à partir des tokens RÉELS de la coque téléphone : elle reste juste quelles que soient les valeurs de `--phone-screen` / `--phone-bezel`. */ --s261-head: 68px; --s261-foot: 52px; --s261-stage: calc(var(--phone-screen) + 2 * var(--phone-bezel) + 112px); --s261-gutter: clamp(20px, 2.6vw, 56px); --s261-bleed: clamp(24px, 3.4vw, 78px); --s261-edge: clamp(14px, 1.8vw, 34px); } html body .s261-back { display: block; } /* ---- 2.1 FOND DE SCÈNE ------------------------------------------------ Base ivoire → champagne → sable chaud, halos radiaux derrière chaque portrait et derrière le téléphone, lumière haute diffuse. Le motif « bulle + cœur » Baza n'est PLUS tuilé partout : il ne revient que dans deux zones d'angle, fondu au masque (§2.3). */ html body { background-color: var(--s261-cream); background-image: radial-gradient(52rem 40rem at 50% 44%, rgba(255, 255, 255, 0.92), transparent 58%), radial-gradient(40rem 34rem at 6% 76%, rgba(215, 168, 79, 0.22), transparent 62%), radial-gradient(42rem 34rem at 96% 24%, rgba(230, 111, 92, 0.15), transparent 60%), radial-gradient(58rem 40rem at 50% 112%, rgba(8, 122, 55, 0.11), transparent 62%), linear-gradient(168deg, #fffaf2 0%, #ffeeda 40%, #f9dfc7 76%, #f3d3b9 100%); background-attachment: fixed; } /* ---- 2.2 COUCHE ARRIÈRE (peinte SOUS le téléphone) -------------------- */ .s261-back { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .s261-back > * { position: absolute; display: block; } /* SIGNATURE DE LA PAGE — le « champ de proximité ». Baza, c'est la distance : des cercles de niveau très fins, centrés sur le téléphone, rognés par les bords de l'écran. Les deux portraits se tiennent à l'intérieur du même champ — le téléphone est le point où deux proximités se recouvrent. Géométrie seule : aucun chiffre, aucune donnée inventée. */ .s261-rings { top: 50%; left: 50%; width: min(185vh, 1720px); aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-radial-gradient( circle at center, transparent 0 130px, rgba(8, 122, 55, 0.085) 130px 131.1px, transparent 131.1px 132px ); -webkit-mask-image: radial-gradient(circle at center, #000 22%, rgba(0, 0, 0, 0.5) 50%, transparent 76%); mask-image: radial-gradient(circle at center, #000 22%, rgba(0, 0, 0, 0.5) 50%, transparent 76%); } /* Halo de scène : la lumière se resserre sur l'appareil. */ .s261-halo--stage { top: 50%; left: 50%; width: min(74vh, 760px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient( circle at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 248, 236, 0.55) 40%, rgba(255, 244, 228, 0) 72% ); } /* Halos chauds derrière chaque portrait. */ .s261-halo--left { left: -6%; bottom: -18%; width: min(58vh, 620px); aspect-ratio: 1; background: radial-gradient(circle at center, rgba(215, 168, 79, 0.26), transparent 66%); } .s261-halo--right { right: -6%; bottom: -14%; width: min(58vh, 620px); aspect-ratio: 1; background: radial-gradient(circle at center, rgba(230, 111, 92, 0.2), transparent 66%); } /* ---- 2.3 MOTIF BAZA, EN DEUX ZONES SEULEMENT -------------------------- */ .s261-motif { width: 42vw; height: 42vh; opacity: 0.72; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%230b7d24' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round' opacity='0.07'%3E%3Cpath d='M34 44h54a12 12 0 0 1 12 12v26a12 12 0 0 1-12 12H58l-14 14v-14h-10a12 12 0 0 1-12-12V56a12 12 0 0 1 12-12z'/%3E%3Cpath d='M196 150h48a11 11 0 0 1 11 11v22a11 11 0 0 1-11 11h-26l-12 12v-12h-10a11 11 0 0 1-11-11v-22a11 11 0 0 1 11-11z'/%3E%3Cpath d='M212 44c-7-12-27-7-27 7 0 13 27 27 27 27s27-14 27-27c0-14-20-19-27-7z'/%3E%3Cpath d='M74 196c-6-10-23-6-23 6 0 11 23 23 23 23s23-12 23-23c0-12-17-16-23-6z'/%3E%3C/g%3E%3Cg fill='%23e66f5c' opacity='0.06'%3E%3Ccircle cx='150' cy='70' r='5'/%3E%3Ccircle cx='120' cy='150' r='4'/%3E%3Ccircle cx='252' cy='96' r='4.5'/%3E%3Ccircle cx='40' cy='150' r='4'/%3E%3Ccircle cx='176' cy='238' r='5'/%3E%3Ccircle cx='100' cy='252' r='4'/%3E%3C/g%3E%3Cg fill='%230b7d24' opacity='0.05'%3E%3Ccircle cx='238' cy='222' r='4.5'/%3E%3Ccircle cx='20' cy='96' r='4'/%3E%3Ccircle cx='140' cy='200' r='4'/%3E%3C/g%3E%3C/svg%3E"); } .s261-motif--tl { top: 0; left: 0; -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 0%, transparent 68%); mask-image: radial-gradient(120% 120% at 0% 0%, #000 0%, transparent 68%); } .s261-motif--br { right: 0; bottom: 0; -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000 0%, transparent 68%); mask-image: radial-gradient(120% 120% at 100% 100%, #000 0%, transparent 68%); } /* Grain éditorial très fin — la matière « papier » du magazine. */ .s261-grain { inset: 0; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- 2.4 COUCHE AVANT (peinte AU-DESSUS de la scène `.device`) -------- Grille en trois colonnes : la colonne centrale est LAISSÉE VIDE, le téléphone la traverse. `pointer-events: none` sur le conteneur — tout ce qui n'est pas un lien laisse passer clics, molette et gestes vers l'app. */ html body .s261-front { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; display: grid; grid-template-columns: 1fr var(--s261-stage) 1fr; grid-template-rows: var(--s261-head) 1fr var(--s261-foot); grid-template-areas: 'head head head' 'left stage right' 'foot foot foot'; font-family: var(--s261-body); color: var(--s261-text); } .s261-front a { pointer-events: auto; } .s261-front a:focus-visible { outline: 2px solid var(--s261-green-deep); outline-offset: 3px; border-radius: 6px; } /* ---- 2.5 BANDEAU HAUT ------------------------------------------------- Charte Baza : logo officiel du dépôt. La bulle verte PORTE déjà le « B », le mot n'écrit donc que « aza » — convention S109I/S219A du site public. */ .s261-header { grid-area: head; position: relative; display: flex; align-items: center; gap: clamp(12px, 2vw, 40px); padding: 0 var(--s261-gutter); } .s261-header::after { content: ''; position: absolute; left: var(--s261-gutter); right: var(--s261-gutter); bottom: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(215, 168, 79, 0.55) 14%, rgba(215, 168, 79, 0.55) 86%, transparent ); } .s261-brand { display: inline-flex; align-items: center; gap: 0; flex: 0 0 auto; min-height: 44px; text-decoration: none; } .s261-brand img { display: block; width: 34px; height: 34px; border-radius: 9px; } .s261-brand span { font-family: var(--s261-display); font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--s261-ink); } .s261-nav { display: flex; align-items: center; gap: clamp(4px, 1.2vw, 22px); margin-left: auto; } .s261-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 0.83rem; font-weight: 600; color: var(--s261-text); text-decoration: none; white-space: nowrap; transition: color 200ms ease; } .s261-nav a::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 12px; height: 1px; background: var(--s261-green); transform: scaleX(0); transform-origin: left center; transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1); } .s261-nav a:hover { color: var(--s261-green-deep); } .s261-nav a:hover::after, .s261-nav a:focus-visible::after { transform: scaleX(1); } .s261-visit { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding: 0 20px; border: 1px solid rgba(8, 122, 55, 0.4); border-radius: 999px; background: rgba(255, 255, 255, 0.5); font-size: 0.82rem; font-weight: 650; color: var(--s261-green-deep); text-decoration: none; white-space: nowrap; transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease; } .s261-visit:hover { background: rgba(8, 122, 55, 0.1); border-color: rgba(8, 122, 55, 0.65); transform: translateY(-1px); } /* ---- 2.6 COLONNES LATÉRALES ------------------------------------------- Composition VERTICALE et non côte à côte : le texte tient le haut de la colonne sur toute sa largeur, le portrait se pose au bas et sort du cadre par le bord de l'écran. Conséquences voulues : (a) l'accroche dispose de la colonne entière — plus de titre haché en cinq fragments dans les fenêtres de 1280–1440px ; (b) aucune ligne de texte ne se retrouve posée sur un vêtement sombre : la lisibilité ne dépend d'aucun voile rapporté. */ .s261-side { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .s261-side--left { grid-area: left; align-items: flex-end; padding-right: var(--s261-gutter); padding-left: var(--s261-edge); } .s261-side--right { grid-area: right; align-items: flex-start; padding-left: var(--s261-gutter); padding-right: var(--s261-edge); } /* Portraits détourés. Les images ne sont déclarées QUE dans cette media query : sous 1024px le navigateur ne les télécharge JAMAIS (garantie forte, contrairement à une balise masquée). Les proportions sont posées en CSS (`aspect-ratio`) : aucun décalage de mise en page au chargement (CLS = 0). Ce sont des images de CAMPAGNE générées pour Baza : ni membres, ni témoignages ; aucune légende, purement décoratives. */ .s261-portrait { display: none; /* Le portrait prend TOUTE la hauteur qui reste sous le texte, et rien de plus : `flex: 1 1 auto` + `background-size: contain` rendent le chevauchement structurellement impossible, quelle que soit la hauteur de fenêtre ou la longueur des libellés. Il n'y a donc aucune valeur de hauteur à ré-accorder palier par palier. */ flex: 1 1 auto; /* `order` plutôt qu'un déplacement dans le HTML : l'élément décoratif reste écrit en tête du bloc, le texte est rendu EN HAUT de la colonne et le portrait se pose au bas de la scène. */ order: 2; align-self: stretch; min-height: 0; margin-top: clamp(8px, 2vh, 30px); background-repeat: no-repeat; background-size: contain; /* La découpe se fond dans le bas de la scène : jamais d'arête franche. Le fondu court sur 19% de la hauteur — assez pour que le bas d'un manteau sombre se dissolve au lieu de laisser une bande grise. */ -webkit-mask-image: linear-gradient( to top, transparent 0, rgba(0, 0, 0, 0.14) 8%, rgba(0, 0, 0, 0.45) 17%, rgba(0, 0, 0, 0.79) 26%, #000 36% ); mask-image: linear-gradient( to top, transparent 0, rgba(0, 0, 0, 0.14) 8%, rgba(0, 0, 0, 0.45) 17%, rgba(0, 0, 0, 0.79) 26%, #000 36% ); } /* Les deux fichiers ont été retournés horizontalement à la source (et non par `transform`, qui retournerait aussi le masque) : les deux regards convergent vers le téléphone, et la lumière principale vient alors du centre de la scène. Chaque portrait déborde par le bord EXTÉRIEUR de l'écran — recadrage assumé, jamais du côté du téléphone. */ .s261-portrait--left { margin-left: calc(-1 * (var(--s261-bleed) + var(--s261-edge))); background-image: url('/branding/portrait-homme.webp'); background-position: left bottom; } .s261-portrait--right { margin-right: calc(-1 * (var(--s261-bleed) + var(--s261-edge))); background-image: url('/branding/portrait-femme.webp'); background-position: right bottom; } /* ---- 2.7 ACCROCHE (colonne gauche) ------------------------------------ */ .s261-pitch { flex: 0 0 auto; max-width: min(100%, 30rem); padding-top: clamp(4px, 3.4vh, 44px); text-align: right; } /* Rôle « utilitaire » du système typographique : micro-capitales très espacées — sur-titre, signature et libellés partagent le même registre. */ .s261-eyebrow, .s261-sign, .s261-points li { font-size: 0.69rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--s261-quiet); } .s261-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; } .s261-title { margin: 0; font-family: var(--s261-display); font-size: clamp(1.8rem, 2.65vw, 3.4rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.012em; color: var(--s261-ink); } .s261-title em { display: block; font-style: italic; color: var(--s261-green-deep); } .s261-sign { position: relative; margin: 22px 0 0; padding-top: 16px; color: var(--s261-text); } .s261-sign::before { content: ''; position: absolute; top: 0; right: 0; width: 44px; height: 1px; background: var(--s261-gold); } /* ---- 2.8 ARGUMENTS + INSTALLATION (colonne droite) -------------------- */ .s261-aside { flex: 0 0 auto; max-width: min(100%, 23rem); padding-top: clamp(4px, 3.4vh, 44px); } .s261-points { margin: 0 0 22px; padding: 0; list-style: none; } .s261-points li { padding: 11px 0; border-top: 1px solid var(--s261-hair); } .s261-points li:last-child { border-bottom: 1px solid var(--s261-hair); } /* Boutons d'installation, au FORMAT des badges de store (pilule sombre, glyphe de plate-forme, sur-titre + libellé). Libellés HONNÊTES : Baza n'a À CE JOUR aucune fiche publiée sur Google Play ni sur l'App Store — les boutons mènent donc aux pages OFFICIELLES d'installation de baza.fr et ne revendiquent aucune disponibilité en magasin. >>> Le jour où les fiches existent : remplacer `href` et le libellé `.s261-badge-big` par le nom du store, et poser les badges officiels. */ .s261-stores { display: flex; flex-wrap: wrap; gap: 12px; } .s261-badge { display: inline-flex; align-items: center; gap: 11px; min-width: 168px; min-height: 52px; padding: 0 18px 0 15px; border-radius: 11px; background: #1b1512; color: #fffaf2; text-decoration: none; box-shadow: 0 12px 26px -18px rgba(33, 22, 18, 0.9); transition: transform 200ms ease, box-shadow 200ms ease; } /* Survol : élévation seule. La teinte de la pilule ne bouge PAS — les yeux du glyphe Android sont découpés dans cette teinte exacte. */ .s261-badge:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -18px rgba(33, 22, 18, 0.95); } .s261-badge svg { flex: 0 0 auto; width: 25px; height: 25px; fill: currentColor; } .s261-badge-small { display: block; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.82; } .s261-badge-big { display: block; font-size: 1.02rem; font-weight: 620; line-height: 1.15; } .s261-storenote { margin: 14px 0 0; max-width: 32ch; font-size: 0.72rem; line-height: 1.5; color: var(--s261-quiet); } /* ---- 2.9 PIED --------------------------------------------------------- */ .s261-footer { grid-area: foot; display: flex; align-items: center; gap: 16px; padding: 0 var(--s261-gutter); font-size: 0.72rem; color: var(--s261-quiet); } .s261-footer p { margin: 0; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; } .s261-legal { display: flex; align-items: center; gap: clamp(0px, 0.5vw, 10px); margin-left: auto; } .s261-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--s261-quiet); text-decoration: none; white-space: nowrap; transition: color 200ms ease; } .s261-legal a:hover { color: var(--s261-green-deep); text-decoration: underline; text-underline-offset: 3px; } /* ---- 2.10 TÉLÉPHONE : calage dans la vitrine -------------------------- La coque S63/S108 est CONSERVÉE telle quelle (cadre titane, oreillette, reflet). Deux réglages seulement, confinés à ce breakpoint : (a) la hauteur de l'écran laisse la place au bandeau et au pied, sans jamais faire apparaître de barre de défilement dans la scène ; (b) les ombres passent en tonalité CHAUDE, accordée au champagne : l'appareil se pose dans la lumière au lieu de flotter sur un aplat. Aucune règle ne touche `.device-screen > .app` : la mise en page interne de l'application est intouchée. */ html body .device { z-index: 1; } html body .device-screen { height: min(884px, calc(100dvh - 168px)); max-height: calc(100dvh - 168px); } html body .device-frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 1px 2px rgba(255, 255, 255, 0.18) inset, 0 0 0 2px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.3), 0 26px 44px -26px rgba(90, 52, 26, 0.5), 0 60px 110px -50px rgba(90, 52, 26, 0.42), 0 20px 70px -34px rgba(8, 122, 55, 0.2); } /* ---- 2.11 ANIMATION D'ARRIVÉE ---------------------------------------- Une seule séquence, à l'ouverture, sur `opacity` et `transform` seuls. Rien ne bouge ensuite : aucun mouvement permanent. */ @keyframes s261-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes s261-fade { from { opacity: 0; } to { opacity: 1; } } .s261-header, .s261-pitch, .s261-aside, .s261-footer { animation: s261-rise 760ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } .s261-header { animation-delay: 60ms; } .s261-pitch { animation-delay: 180ms; } .s261-aside { animation-delay: 260ms; } .s261-footer { animation-delay: 340ms; } .s261-portrait { animation: s261-fade 1100ms ease-out 420ms both; } .s261-rings, .s261-halo--stage, .s261-halo--left, .s261-halo--right { animation: s261-fade 1400ms ease-out both; } /* ---- 2.12 PALIERS ----------------------------------------------------- 1024–1279px : vitrine SANS portraits — les colonnes sont trop étroites pour porter à la fois un portrait et une accroche lisibles. */ @media (min-width: 1280px) { .s261-portrait { display: block; } } @media (min-width: 1600px) { :root { --s261-stage: calc(var(--phone-screen) + 2 * var(--phone-bezel) + 176px); } } /* Écrans BAS (portables 1366×768, fenêtres réduites, paysage) : la vitrine se resserre au lieu de déborder — le téléphone reste prioritaire. */ @media (max-height: 760px) { :root { --s261-head: 60px; --s261-foot: 46px; } .s261-pitch, .s261-aside { padding-top: 4px; } .s261-title { font-size: clamp(1.75rem, 2.5vw, 2.5rem); } .s261-points li { padding: 8px 0; } } @media (max-height: 620px) { .s261-portrait, .s261-points, .s261-storenote { display: none; } } } /* -------------------------------------------------------------------------- 3. MODE DESKTOP NATIF (S224/S226) : l'app occupe toute la fenêtre — la vitrine marketing n'a pas lieu d'être. -------------------------------------------------------------------------- */ @media (min-width: 900px) { :root[data-baza-desktop='1'] .s261-back, :root[data-baza-desktop='1'] .s261-front { display: none; } :root[data-baza-desktop='1'] body .device-screen { height: 100dvh; max-height: none; } } /* -------------------------------------------------------------------------- 4. « RÉDUIRE LES ANIMATIONS » — exigence non négociable. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .s261-header, .s261-pitch, .s261-aside, .s261-footer, .s261-portrait, .s261-rings, .s261-halo--stage, .s261-halo--left, .s261-halo--right { animation: none !important; } .s261-front a, .s261-nav a::after { transition: none !important; } .s261-visit:hover, .s261-badge:hover { transform: none; } }