Promote version 572c87f to main

Promoted commit 572c87feecff35bbba09be7e6068605a9fee9b7c to main branch

style.css

@@ -2,90 +2,68 @@
 /* Feature Cards Styling */
 .feature-card {
     background: white;
-    border-radius: 16px;
-    padding: 32px;
-    margin-bottom: 32px;
-    box-shadow: 0 4px 20px rgba(0, 32, 96, 0.08);
-    position: relative;
-    overflow: hidden;
+    border-radius: 12px;
+    padding: 24px;
+    margin-bottom: 24px;
+    box-shadow: 0 4px 6px rgba(0, 32, 96, 0.05);
+    border-left: 4px solid var(--vlc-leaf);
     transition: all 0.3s ease;
 }
 
 .feature-card:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 12px 24px rgba(0, 32, 96, 0.12);
-}
-
-.feature-card:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 4px;
-    background: linear-gradient(90deg, var(--vlc-leaf), var(--vlc-sky));
+    transform: translateY(-4px);
+    box-shadow: 0 10px 20px rgba(0, 32, 96, 0.1);
+    border-left-color: var(--vlc-sky);
 }
 
 .feature-card h3 {
     color: var(--vlc-navy);
     font-size: 1.5rem;
-    margin-bottom: 1.5rem;
-    display: flex;
-    align-items: center;
-    gap: 12px;
+    margin-bottom: 1rem;
+    position: relative;
+    padding-left: 16px;
 }
 
 .feature-card h3:before {
     content: "";
-    display: inline-block;
-    width: 24px;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
     height: 24px;
-    background-color: var(--vlc-leaf);
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
-    mask-repeat: no-repeat;
-    mask-position: center;
-    background-color: var(--vlc-leaf);
-}
-
-.feature-card:nth-child(even) h3:before {
-    background-color: var(--vlc-sky);
+    width: 4px;
+    background: linear-gradient(to bottom, var(--vlc-leaf), var(--vlc-sky));
+    border-radius: 2px;
 }
 
 .feature-card ul {
     list-style-type: none;
     padding-left: 0;
-    display: grid;
-    gap: 12px;
 }
 
 .feature-card li {
-    padding: 12px 16px;
-    background-color: var(--vlc-tint);
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
+    padding: 8px 0;
+    position: relative;
+    padding-left: 28px;
     color: var(--vlc-ink);
-    transition: all 0.2s ease;
 }
 
-.feature-card li:hover {
-    background-color: var(--vlc-leaf-tint);
-    transform: translateX(4px);
+.feature-card li:before {
+    content: "✓";
+    position: absolute;
+    left: 0;
+    color: var(--vlc-leaf);
+    font-weight: bold;
+}
+
+.feature-card:nth-child(even) {
+    border-left-color: var(--vlc-sky);
 }
 
-.feature-card li:before {
-    content: "";
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    background-color: var(--vlc-leaf);
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-    mask-repeat: no-repeat;
-    mask-position: center;
-    flex-shrink: 0;
+.feature-card:nth-child(even):hover {
+    border-left-color: var(--vlc-leaf);
 }
 
-.feature-card:nth-child(even) li:before {
-    background-color: var(--vlc-sky);
+.feature-card:nth-child(even) h3:before {
+    background: linear-gradient(to bottom, var(--vlc-sky), var(--vlc-leaf));
 }