From e676397baec1a49d51b1f772bfdf25f28d7cb9e7 Mon Sep 17 00:00:00 2001 From: "amirhosein.ashourloo" Date: Sun, 6 Sep 2026 08:01:06 +0330 Subject: [PATCH] Fix hero slider pagination dots showing swiper's black/blue defaults .swiper-pagination-bullet{background:#fff} had the same specificity as swiper's own .swiper-pagination-bullet{background:var(...)} rule and lost the cascade depending on chunk order, so dots rendered swiper's actual defaults (black inactive, iOS-blue active) instead of white. Fix: set swiper's own theming variables (--swiper-pagination-bullet- inactive-color, --swiper-pagination-color, etc.) scoped to .hero-dots instead of fighting the background property directly - this is swiper's documented way to theme bullets and is cascade-order-proof. The active pill shape (22px, 4px radius) has no variable of its own, so that rule stays as a plain override, scoped under .hero-dots for higher specificity instead of !important. Co-Authored-By: Claude Sonnet 5 --- src/app/globals.css | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index ec240ed..74b5e79 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -65,15 +65,24 @@ font-family: var(--font-en), var(--font-fa), sans-serif; } -/* Swiper: the package ships its own CSS, these are the site-level overrides. */ -.swiper-pagination-bullet { - background: #ffffff; - opacity: 0.55; - width: 8px; - height: 8px; +/* Swiper theming: its own CSS reads these custom properties when drawing + bullets (background: var(--swiper-pagination-bullet-inactive-color, #000) + etc.) — setting a plain .swiper-pagination-bullet{background} rule has the + same specificity as swiper's own rule and lost the cascade depending on + chunk order, which is why the dots were showing swiper's black/blue + defaults instead of white. Setting the variables is the way swiper itself + documents for overriding bullet colors, and it's cascade-order-proof. */ +.hero-dots { + --swiper-pagination-bullet-inactive-color: #ffffff; + --swiper-pagination-bullet-inactive-opacity: 0.55; + --swiper-pagination-color: #ffffff; + --swiper-pagination-bullet-width: 8px; + --swiper-pagination-bullet-height: 8px; } -.swiper-pagination-bullet-active { - opacity: 1; +/* The active pill shape has no swiper variable of its own — .hero-dots + raises specificity (0,2,0) above swiper's base bullet rule (0,1,0) so + this wins without !important. */ +.hero-dots .swiper-pagination-bullet-active { width: 22px; border-radius: 4px; }