/* ================================================================ raHma-TV — Branding behaviors Curseur custom + scroll smooth + scrollbar immersive Référence : docs/BRANDING.md §3.3, §5 ================================================================ */ /* -------- Scroll global doux (rahma : lent mais gracieux) -------- */ html { scroll-behavior: smooth; /* Fallback Firefox + Chrome récents : limite la vélocité du wheel */ scroll-padding-top: 80px; /* compense le header fixe */ } /* Sur les écrans qui demandent moins de mouvement */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ================================================================ SCROLLBAR — fine, rose-soft, sans flèches ================================================================ */ /* WebKit (Chrome, Safari, Edge) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgba(184, 52, 160, 0.04); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(184, 52, 160, 0.45), rgba(184, 52, 160, 0.25)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; transition: background .35s cubic-bezier(.2,.7,.2,1); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(184, 52, 160, 0.7), rgba(184, 52, 160, 0.45)); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Firefox */ html { scrollbar-width: thin; scrollbar-color: rgba(184, 52, 160, 0.45) rgba(184, 52, 160, 0.04); } /* ================================================================ CURSEUR CUSTOM — point central + halo qui suit avec délai « comme la rahma — l'amour qui enveloppe » ================================================================ */ /* Le curseur natif n'est masqué QU'APRÈS que le JS ait monté le custom (classe `rt-cursor-ready` ajoutée sur ). Sinon, l'utilisateur perdrait son curseur si le JS plante / met du temps à charger. */ @media (pointer: fine) { body.rt-cursor-ready { cursor: none; } body.rt-cursor-ready a, body.rt-cursor-ready button, body.rt-cursor-ready [role="button"], body.rt-cursor-ready input, body.rt-cursor-ready textarea, body.rt-cursor-ready select, body.rt-cursor-ready .feedback-btn, body.rt-cursor-ready .share-btn, body.rt-cursor-ready .chip, body.rt-cursor-ready .card, body.rt-cursor-ready .also-read-link, body.rt-cursor-ready label, body.rt-cursor-ready summary { cursor: none; } } /* Curseur custom — la position est pilotée par les variables CSS --x et --y injectées par branding.js. On combine translate (position) + scale (hover) sur la même propriété transform sans que le centre se décale du pointeur. */ .rt-cursor-dot, .rt-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; will-change: transform, opacity; } /* Point central — boule néon, signature raHma. JAMAIS plus gros au hover : c'est le repère visuel précis du clic. */ .rt-cursor-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 100, 200, .95), 0 0 14px rgba(184, 52, 160, .9), 0 0 26px rgba(184, 52, 160, .65), 0 0 42px rgba(184, 52, 160, .35); transform: translate3d(calc(var(--x, 0px) - 4px), calc(var(--y, 0px) - 4px), 0); transition: opacity .25s cubic-bezier(.2,.7,.2,1); } /* Logo raHma-TV qui enveloppe le pointeur — par défaut large et discret. Centré sur le pointeur via offset -24px (50% de 48px). Au hover, l'image disparaît au profit d'un cercle de focus (border). */ .rt-cursor-ring { width: 48px; height: 48px; border-radius: 50%; background-image: url("/static/img/logo-rahmatv-removebg-preview.png"); background-size: contain; background-repeat: no-repeat; background-position: center; border: 0 solid transparent; box-shadow: none; opacity: .22; filter: drop-shadow(0 0 6px rgba(184,52,160,.55)); transform: translate3d(calc(var(--x, 0px) - 24px), calc(var(--y, 0px) - 24px), 0) scale(1); transform-origin: center; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s cubic-bezier(.2,.7,.2,1), filter .35s cubic-bezier(.2,.7,.2,1), border .35s cubic-bezier(.2,.7,.2,1), background .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1); } /* État HOVER — le logo cœur DISPARAÎT et laisse place à un cercle de focus qui encercle précisément le pointeur. Plus de logo qui occulte la cible : juste un ring fin signalant l'état actif. */ .rt-cursor-ring.is-hover { background-image: none; background-color: transparent; border: 1.5px solid rgba(255, 100, 200, .85); box-shadow: 0 0 12px rgba(184, 52, 160, .6), inset 0 0 10px rgba(184, 52, 160, .25); opacity: 1; filter: none; transform: translate3d(calc(var(--x, 0px) - 24px), calc(var(--y, 0px) - 24px), 0) scale(.85); } /* État pointer down (clic) — ring contracté pour signaler la validation */ .rt-cursor-ring.is-down { background-image: none; background-color: rgba(184, 52, 160, .15); border: 1.5px solid rgba(255, 100, 200, 1); box-shadow: 0 0 18px rgba(184, 52, 160, .85); opacity: 1; filter: none; transform: translate3d(calc(var(--x, 0px) - 24px), calc(var(--y, 0px) - 24px), 0) scale(.65); } /* Si l'utilisateur quitte la fenêtre : fade-out */ .rt-cursor-dot.is-hidden, .rt-cursor-ring.is-hidden { opacity: 0; } /* Ripple au clic — onde circulaire très subtile, signature néon discrète. Un fin liseré rose qui s'étend depuis le point de clic et fond doucement. */ .rt-cursor-ripple { position: fixed; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 100, 200, .55); box-shadow: 0 0 6px rgba(184, 52, 160, .35); pointer-events: none; z-index: 9997; will-change: transform, opacity; animation: rt-ripple-emit .65s cubic-bezier(.2,.7,.2,1) forwards; } @keyframes rt-ripple-emit { 0% { opacity: .85; transform: translate3d(var(--x), var(--y), 0) scale(.5); } 100% { opacity: 0; transform: translate3d(var(--x), var(--y), 0) scale(2.6); } } /* Traînée néon — petites particules roses qui suivent le mouvement et s'évaporent élégamment. Générées dynamiquement par branding.js. */ .rt-cursor-trail { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 100, 200, .9); box-shadow: 0 0 8px rgba(184, 52, 160, .85), 0 0 18px rgba(184, 52, 160, .55); will-change: transform, opacity; /* Disparition douce — courbe signature raHma */ animation: rt-trail-fade .85s cubic-bezier(.2, .7, .2, 1) forwards; } @keyframes rt-trail-fade { 0% { opacity: 1; transform: translate3d(var(--x), var(--y), 0) scale(1); } 100% { opacity: 0; transform: translate3d(var(--x), var(--y), 0) scale(.25); } } /* Tablette / touch : on laisse tout natif */ @media (pointer: coarse) { .rt-cursor-dot, .rt-cursor-ring, .rt-cursor-trail { display: none; } body, a, button, input, textarea, select { cursor: auto; } }