/*! * fx.css — socle d'intégration des effets Fragment440 (shader de fond, texte * liquide, signature sonore). Chargé APRÈS style.css. * * Rôle unique : porter la couche de fond. Les effets eux-mêmes vivent dans * shader-bg.css et morphing-text.css. */ /* Le fond du site remonte de vers . Pourquoi : l'hôte du shader est un enfant de posé en z-index -1. Un z-index négatif se peint SOUS le contenu en flux mais AU-DESSUS du fond du canvas racine — donc au-dessus du fond de , mais SOUS un fond opaque porté par , qui le masquerait complètement. Déplacer la couleur sur est la correction minimale : rien d'autre ne bouge, et une page sans WebGL reste noire comme avant. */ html { background-color: #090909; } /* !important assumé : reseaux.html porte un fond en style inline (background:#050505) qu'aucune règle de feuille ne peut battre autrement. L'écart entre #050505 et #090909 est invisible à l'œil, et le shader recouvre les deux. */ body { background-color: transparent !important; } /* L'hôte du shader : fixe et de la taille du viewport — jamais de la hauteur du document. Sur une page longue, un canvas à la hauteur du document coûterait des dizaines de millions de pixels pour un résultat identique. */ .fx-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* Impression : pas de fond animé sur papier. */ @media print { .fx-bg { display: none; } } /* ========================================================================== VARIANTE CLAIRE — contact.html -------------------------------------------------------------------------- Cette page porte un fond clair voulu (#d0cfcd, posé par .contact-body avec !important dans contact.css). Deux corrections sont nécessaires pour que le fond animé s'y voie : 1. Le fond de la page doit remonter de vers , comme pour les pages sombres — sinon le fond opaque de masque le canvas, qui est un enfant en z-index négatif. Le sélecteur doit battre `.contact-body` (spécificité 0,1,0 + !important), d'où `body.contact-body` (0,1,1), et `:has()` porte la couleur sur la racine sans avoir à ajouter une classe dans le HTML de la page. 2. L'hôte du shader peint #090909 par défaut (shader-bg.css) : sur cette page il doit peindre le beige, y compris pendant le fondu d'apparition du canvas et si WebGL manque. ========================================================================== */ body.contact-body { background-color: transparent !important; } :root:has(body.contact-body) { background-color: #f0efed; } [data-shader-variant="clair"] { background-color: #f0efed; } /* Repli sans WebGL, en clair : même famille que PALETTE_CLAIRE. */ [data-shader-variant="clair"].shader-bg--fallback { background-color: #f0efed; background-image: radial-gradient(120% 90% at 22% 18%, #fdfcfb 0%, rgba(253, 252, 251, 0) 58%), radial-gradient(90% 80% at 82% 72%, #f5f4f2 0%, rgba(245, 244, 242, 0) 62%), radial-gradient(140% 120% at 50% 50%, rgba(0, 0, 0, 0) 40%, #e6e5e2 100%); }