Modification de la home page Boutique
Changelog Site Web FunCube.
27 octobre 2025
Changelog
🛒 Boutique — Bandeau promo S5 — v2025.10.27
Ajout d’un bandeau promotionnel sticky en haut de la Boutique : -20% jusqu’au 09/11, badge « Promo lancement S5 » et CTA direct vers les offres limitées. Effet shine discret, intégration bord-à-bord avec le cadre, responsive et accessible (role="note", aria-label). Tout est éditable (%/date/lien) et le sticky est désactivable en 1 ligne.
✨ Ajouts
- Bloc top
<aside class="promo-bar" role="note" aria-label="Promotion de lancement Saison 5"> inséré avant .wrap.
- Structure dédiée :
.inner (layout), .promo-badge (badge or), .promo-title + .off (mise en valeur du %), .promo-cta (lien d’action).
- Animation
@keyframes promoShine (gloss transversal) avec overlay non intrusif.
- Contenu par défaut : -20% jusqu’au 09/11 + CTA
/shop/categories/limite.
- Compatibilité mobile/desktop et respect des tokens CSS existants (
--gold, --accent, --hair, --w…).
🧩 Modifications
- Mise en page « bord-à-bord » via marges négatives du bandeau (
margin:-28px -18px 18px) pour épouser le cadre de .shop-page.
- Arrondis synchronisés avec le conteneur (angles supérieurs), séparation visuelle par bordure (
border-bottom) et ombre portée.
- Comportement sticky activé (
position:sticky; top:0; z-index:60;) avec fallback non bloquant.
- Hiérarchisation visuelle renforcée (badge « S5 », % en or, date avec
title explicite).
🐞 Corrections
- Uniformisation de la typographie (apostrophes courbes, jusqu’au), et micro-espaces insécables sur la date
09/11.
- Clarté des attributs d’accessibilité (
aria-label, role) et des libellés CTA.
- Nettoyage de styles superflus sur le bandeau (pas d’override agressif, tokens réutilisés).
🎛️ Améliorations UX
- Focus bénéfice immédiat (pourcentage en surbrillance, badge promo, date limite visible).
- Accès direct aux offres limitées (CTA primaire, zone de clic confortable, lisible mobile).
- Non-intrusif : bandeau compact, effet shine léger, lisibilité préservée du hero.
- Contrôle simple : désactiver le sticky = retirer
position:sticky; top:0; (tout le reste reste fonctionnel).