/* ============================================================================ banner-gradients.css — Dégradés de fond partagés pour les bannières Digily ============================================================================ À charger UNE SEULE FOIS par site, dans le , à la suite du CSS du site (peu importe l'ordre exact : les règles ci-dessous ciblent .banner ET .banner-gradient-N ensemble, donc leur spécificité l'emporte de toute façon sur un simple ".banner { background: ... }" du site) : banner-loader.js pose automatiquement la classe .banner-gradient-N (1 à 12) sur l'élément .banner injecté, d'après le champ `gradientId` de la bannière (ex: "gradient-2" → classe "banner-gradient-2"). Si `gradientId` est vide ou inconnu (bannières créées avant cette fonctionnalité), la classe "banner-gradient-1" (Or Précieux) est appliquée par défaut — c'est le dégradé qui reproduit à l'identique le fond actuellement codé en dur sur les sites clients, donc aucune bannière existante ne change d'aspect. 1-6 : dégradés FONCÉS (texte doré/blanc par défaut, adapté à ces fonds). 7-12 : dégradés CLAIRS pastel — voir le bloc dédié plus bas dans ce fichier, et GRADIENTS_CLAIRS dans shared/banner-loader.js pour l'adaptation automatique de la couleur de texte par défaut sur ces 6 derniers. ============================================================================ */ /* 1. Or Précieux — doré/brun (dégradé par défaut, identique au rendu actuel) */ .banner.banner-gradient-1 { background: linear-gradient(135deg, #1a0a0c 0%, #2d1810 50%, #1a0a0c 100%); } /* 2. Rose Poudré */ .banner.banner-gradient-2 { background: linear-gradient(135deg, #2b141b 0%, #6b3a4a 50%, #2b141b 100%); } /* 3. Vert Émeraude */ .banner.banner-gradient-3 { background: linear-gradient(135deg, #0b1f17 0%, #1f4d3a 50%, #0b1f17 100%); } /* 4. Bleu Nuit */ .banner.banner-gradient-4 { background: linear-gradient(135deg, #0a0e1f 0%, #1b2a4a 50%, #0a0e1f 100%); } /* 5. Bordeaux */ .banner.banner-gradient-5 { background: linear-gradient(135deg, #1f0a0d 0%, #5c1a24 50%, #1f0a0d 100%); } /* 6. Noir Charbon */ .banner.banner-gradient-6 { background: linear-gradient(135deg, #0d0d0d 0%, #2a2a2a 50%, #0d0d0d 100%); } /* ---------------------------------------------------------------------------- Dégradés CLAIRS (7-12) — même structure 3 arrêts à 135deg que les 6 foncés ci-dessus, mais inversée : arrêts quasi-blancs (teinte de base éclaircie d'~50% vers le blanc) aux bords, teinte de base pleine au centre, pour un effet "halo pastel" au lieu du "vignettage sombre" des dégradés foncés. Voir shared/banner-loader.js (GRADIENTS_CLAIRS) : le texte par défaut (logo/texte/phrase/prix) bascule automatiquement sur une couleur foncée quand l'un de ces 6 dégradés est sélectionné et qu'aucune couleur n'a été personnalisée sur l'élément — sans ça, les couleurs par défaut (doré/blanc, pensées pour un fond foncé) deviendraient illisibles ici. ---------------------------------------------------------------------------- */ /* 7. Rose Dragée */ .banner.banner-gradient-7 { background: linear-gradient(135deg, #fbf1f6 0%, #f7e3ec 50%, #fbf1f6 100%); } /* 8. Lavande */ .banner.banner-gradient-8 { background: linear-gradient(135deg, #faf0fc 0%, #f5e1f9 50%, #faf0fc 100%); } /* 9. Bleu Ciel */ .banner.banner-gradient-9 { background: linear-gradient(135deg, #f0f3fc 0%, #e1e6f9 50%, #f0f3fc 100%); } /* 10. Vert Menthe */ .banner.banner-gradient-10 { background: linear-gradient(135deg, #f1fcf0 0%, #e3f9e1 50%, #f1fcf0 100%); } /* 11. Vanille */ .banner.banner-gradient-11 { background: linear-gradient(135deg, #fafcf0 0%, #f5f9e1 50%, #fafcf0 100%); } /* 12. Pêche */ .banner.banner-gradient-12 { background: linear-gradient(135deg, #f9f2e9 0%, #f3e4d3 50%, #f9f2e9 100%); }