Merge pull request 'refactor styles for consistency and maintainability; replace hardcoded values with CSS variables' (#26) from shelby into feature/all

Reviewed-on: #26

FencerJudgeFront/src/app/components/home/home.component.css

@@ -270,7 +270,7 @@
             rgba(255, 215, 0, 0.1) 100%);
     border: 2px solid;
     border-image: linear-gradient(45deg, #dc2626, var(--primary-color), #dc2626) 1;
-    border-radius: 12px;
+    border-radius: var(--border-radius);
     padding: 20px;
     position: relative;
     overflow: hidden;
@@ -393,7 +393,7 @@
             rgba(26, 26, 46, 0.9) 50%,
             rgba(0, 0, 0, 0.8) 100%);
     border: 1px solid var(--primary-color);
-    border-radius: 8px;
+    border-radius: var(--border-radius);
     position: relative;
     transition: all 0.3s ease;
     cursor: pointer;
@@ -507,7 +507,7 @@
 .stat-value {
     font-size: 16px;
     font-weight: 700;
-    color: #ffffff;
+    color: white;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 
@@ -618,7 +618,7 @@
     position: relative;
     background-size: cover;
     background-position: center;
-    border-radius: 12px;
+    border-radius: var(--border-radius);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     width: 400px;
     height: 500px;
@@ -643,7 +643,7 @@
         inset 0 1px 0 rgba(255, 255, 255, 0.1);
     transform: translateY(-2px);
     /* Léger lift au hover */
-    border: 2px solid rgba(212, 175, 55, 0.6);
+    border: 2px solid var(--primary-color);
     background: var(--card-gradient) !important;
 }
 
@@ -655,10 +655,10 @@
     background-image: inherit;
     background-size: cover;
     background-position: center;
-    filter: blur(10px) brightness(1.1) contrast(1.1);
+    filter: var(--blur-effect);
     opacity: .6;
     z-index: 1;
-    transition: all .6s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: var(--transition-smooth);
     /* Courbe plus fluide */
 }
 
@@ -666,7 +666,7 @@
 .diplomes-card:hover:before {
     transform: scale(1.2);
     /* Zoom uniquement sur l'image */
-    filter: blur(8px) brightness(1.3);
+    filter: var(--blur-hover);
     /* Moins de blur + plus lumineux au hover */
     opacity: .8;
     /* Plus visible au hover */
@@ -696,7 +696,7 @@
 }
 
 .weapon-card p {
-    color: #ffffff;
+    color: white;
     font-size: 0.95em;
 }
 

FencerJudgeFront/src/styles.css

@@ -14,3 +14,20 @@
       rgba(16, 16, 16, 0.95) 100%);
   --h-f-bg: #2c2c2c;
 }
+
+/* Filters */
+:root {
+  --blur-effect: blur(10px) brightness(1.1) contrast(1.1);
+  --blur-hover: blur(8px) brightness(1.3);
+}
+
+/* Transitions */
+:root {
+  --transition-smooth: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-quick: all 0.3s ease;
+}
+
+/* Borders */
+:root {
+  --border-radius: 12px;
+}