fix: scope footer stat styles

Author: Abhash-Chakraborty

src/css/custom.css

@@ -1351,7 +1351,7 @@ html {
 [data-theme="dark"] .enhanced-footer .footer-main,
 [data-theme="dark"] .enhanced-footer .footer-stats,
 [data-theme="dark"] .enhanced-footer .footer-bottom,
-[data-theme="dark"] .enhanced-footer .stat-item {
+[data-theme="dark"] .enhanced-footer .footer-stat-item {
   background: #191919 !important;
   background-image: none !important;
 }

src/theme/Footer/Layout/enhanced-footer.css

@@ -218,7 +218,7 @@
   background: var(--footer-canvas);
 }
 
-.stat-item {
+.footer-stat-item {
   display: flex;
   align-items: baseline;
   justify-content: center;
@@ -230,11 +230,11 @@
   border-right: 1px solid var(--footer-hairline);
 }
 
-.stat-item:last-child {
+.footer-stat-item:last-child {
   border-right: 0;
 }
 
-.stat-number {
+.footer-stat-number {
   color: var(--footer-steel);
   background: none !important;
   -webkit-background-clip: border-box !important;
@@ -246,7 +246,7 @@
   text-shadow: none !important;
 }
 
-.stat-number > div {
+.footer-stat-number > div {
   display: inline;
   color: inherit;
   background: none !important;
@@ -256,7 +256,7 @@
   text-shadow: none !important;
 }
 
-.stat-label {
+.footer-stat-label {
   color: var(--footer-stone);
   background: none !important;
   -webkit-background-clip: border-box !important;
@@ -385,7 +385,7 @@
 .enhanced-footer.dark-theme .footer-main,
 .enhanced-footer.dark-theme .footer-stats,
 .enhanced-footer.dark-theme .footer-bottom,
-.enhanced-footer.dark-theme .stat-item {
+.enhanced-footer.dark-theme .footer-stat-item {
   background: var(--footer-canvas) !important;
   background-image: none !important;
 }
@@ -460,7 +460,7 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .stat-item:nth-child(2n) {
+  .footer-stat-item:nth-child(2n) {
     border-right: 0;
   }
 
@@ -525,14 +525,14 @@
     grid-template-columns: 1fr;
   }
 
-  .stat-item {
+  .footer-stat-item {
     justify-content: space-between;
     text-align: left;
     border-right: 0;
     border-bottom: 1px solid var(--footer-hairline);
   }
 
-  .stat-item:last-child {
+  .footer-stat-item:last-child {
     border-bottom: 0;
   }
 

src/theme/Footer/Layout/index.tsx

@@ -261,32 +261,38 @@ export default function FooterLayout(): ReactNode {
 
         <div className="footer-stats" aria-label="Community statistics">
           <div
-            className="stat-item"
+            className="footer-stat-item"
             title="Growing community of active learners"
           >
-            <div className="stat-number">
+            <div className="footer-stat-number">
               <Counter value={parseInt(stats.activeUsers)} suffix="K+" />
             </div>
-            <div className="stat-label">Active Learners</div>
+            <div className="footer-stat-label">Active Learners</div>
           </div>
           <div
-            className="stat-item"
+            className="footer-stat-item"
             title="Comprehensive tutorials and courses"
           >
-            <div className="stat-number">
+            <div className="footer-stat-number">
               <Counter value={parseInt(stats.tutorials)} suffix="+" />
             </div>
-            <div className="stat-label">Tutorials</div>
+            <div className="footer-stat-label">Tutorials</div>
           </div>
-          <div className="stat-item" title="People sponsored by the community">
-            <div className="stat-number">
+          <div
+            className="footer-stat-item"
+            title="People sponsored by the community"
+          >
+            <div className="footer-stat-number">
               <Counter value={parseInt(stats.peopleSponsored)} suffix="+" />
             </div>
-            <div className="stat-label">People Sponsored</div>
+            <div className="footer-stat-label">People Sponsored</div>
           </div>
-          <div className="stat-item" title="Round-the-clock community support">
-            <div className="stat-number">{stats.supportHours}</div>
-            <div className="stat-label">Support</div>
+          <div
+            className="footer-stat-item"
+            title="Round-the-clock community support"
+          >
+            <div className="footer-stat-number">{stats.supportHours}</div>
+            <div className="footer-stat-label">Support</div>
           </div>
         </div>