feat: heleo#

public/style.css

@@ -61,14 +61,16 @@ header {
 
 .counter-cardglass {
     background: var(--glass-bg);
-    backdrop-filter: blur( 12px );
-    -webkit-backdrop-filter: blur( 12px );
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
     border-radius: 24px;
     border: 1px solid var(--glass-border);
-    padding: 3rem 2rem;
+    padding: 4rem 2rem;
     text-align: center;
     box-shadow: var(--shadow);
     transition: transform 0.2s;
+    margin-bottom: 2rem;
+    /* Added spacing */
 }
 
 .counter-cardglass:hover {
@@ -76,83 +78,107 @@ header {
 }
 
 #counter-display {
-    font-size: 5rem;
+    font-size: 6rem;
+    /* Increased size */
     font-weight: 700;
     color: var(--primary);
     line-height: 1;
     margin-bottom: 0.5rem;
     font-feature-settings: "tnum";
     font-variant-numeric: tabular-nums;
+    text-shadow: 2px 4px 10px rgba(255, 107, 107, 0.2);
 }
 
 .label {
     text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 0.8rem;
+    letter-spacing: 3px;
+    font-size: 0.85rem;
     color: #636e72;
+    font-weight: 500;
 }
 
 .controls-container {
-    background: var(--glass-bg);
-    padding: 2rem;
+    background: white;
+    /* Clean white bg for form */
+    padding: 2.5rem;
     border-radius: 24px;
     box-shadow: var(--shadow);
     display: flex;
     flex-direction: column;
-    gap: 1.2rem;
+    gap: 1.5rem;
+    position: relative;
+    overflow: hidden;
 }
 
 .input-group {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 0.6rem;
 }
 
 .input-group label {
-    font-size: 0.9rem;
-    font-weight: 500;
+    font-size: 0.85rem;
+    font-weight: 600;
     margin-left: 0.5rem;
+    color: #4b5563;
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    letter-spacing: 1px;
 }
 
 input {
-    padding: 1rem;
-    border-radius: 12px;
-    border: 2px solid transparent;
-    background: var(--input-bg);
+    padding: 1.2rem;
+    border-radius: 16px;
+    border: 2px solid #edf2f7;
+    background: #f8fafc;
     font-family: inherit;
-    font-size: 1rem;
-    transition: all 0.3s;
+    font-size: 1.05rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     outline: none;
+    color: var(--text-color);
+}
+
+input:hover {
+    background: #fff;
+    border-color: #cbd5e1;
 }
 
 input:focus {
+    background: #fff;
     border-color: var(--primary);
-    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1);
+    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.15);
+    transform: translateY(-1px);
 }
 
 .primary-btn {
     position: relative;
-    background: var(--primary);
+    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
     color: white;
     border: none;
-    padding: 1.2rem;
-    border-radius: 16px;
+    padding: 1.4rem;
+    border-radius: 18px;
     font-size: 1.2rem;
     font-weight: 700;
     cursor: pointer;
     overflow: hidden;
-    transition: all 0.2s;
-    margin-top: 0.5rem;
-}
-
-.primary-btn:hover {
-    background: var(--primary-hover);
-    transform: scale(1.02);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    margin-top: 1rem;
+    letter-spacing: 0.5px;
     box-shadow: 0 10px 20px rgba(255, 107, 107, 0.3);
 }
 
+.primary-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 15px 30px rgba(255, 107, 107, 0.4);
+}
+
 .primary-btn:active {
-    transform: scale(0.98);
+    transform: translateY(1px);
+    box-shadow: 0 5px 10px rgba(255, 107, 107, 0.2);
+}
+
+.chart-container {
+    height: 300px;
 }
 
 .primary-btn:disabled {
@@ -182,11 +208,19 @@ input:focus {
 
 /* Animations */
 @keyframes pop {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.1); }
-    100% { transform: scale(1); }
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.1);
+    }
+
+    100% {
+        transform: scale(1);
+    }
 }
 
 .pop-anim {
     animation: pop 0.15s ease-out;
-}
+}