Update style.css

style.css

@@ -1,16 +1,19 @@
 :root {
-    --bg-primary: #0a0e1a;
-    --bg-secondary: #141824;
-    --bg-card: #1a1f2e;
-    --text-primary: #e8eaed;
-    --text-secondary: #9aa0a8;
+    --bg-primary: #F6F6F8;
+    --bg-secondary: #ffffff;
+    --bg-card: #ffffff;
+    --text-primary: #333333;
+    --text-secondary: #86868B;
+    --accent-orange: #FF9D00;
+    --accent-yellow: #FFD21E;
     --accent-blue: #3BB0D1;
     --accent-cyan: #2E4787;
     --accent-purple: #8b5cf6;
-    --border-color: rgba(255, 255, 255, 0.1);
+    --border-color: #E0E0E0;
+    --radius: 0.75rem;
     --hover-bg: rgba(59, 130, 246, 0.1);
     --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
-    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 0px 5px rgba(0, 0, 0, 0.1);
 }
 
 * {
@@ -36,7 +39,7 @@ body {
 /* Header */
 .header {
     border-bottom: 1px solid var(--border-color);
-    background: rgba(26, 31, 46, 0.5);
+    background: var(--bg-primary);
     backdrop-filter: blur(10px);
 }
 
@@ -64,7 +67,7 @@ body {
 .title {
     font-size: 2rem;
     font-weight: bold;
-    background: linear-gradient(to right, var(--accent-blue), var(--accent-cyan));
+    background: var(--text-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -111,7 +114,7 @@ body {
 .intro-title {
     font-size: 2.5rem;
     font-weight: bold;
-    background: linear-gradient(to right, var(--accent-blue), var(--accent-cyan), var(--accent-blue));
+    background: var(--text-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -142,11 +145,10 @@ body {
     top: 1.5rem;
     left: 1.5rem;
     z-index: 10;
-    background: #2E4787;
+    background: var(--bg-secondary);
     backdrop-filter: blur(10px);
     padding: 0.75rem 1.5rem;
     border-radius: 12px;
-    box-shadow: var(--shadow-sm);
 }
 
 .step-counter-text {
@@ -202,7 +204,7 @@ body {
 /* Controls */
 .controls {
     padding: 2rem;
-    background: linear-gradient(to top, var(--bg-card), rgba(26, 31, 46, 0.8));
+    background: var(--bg-card);
     border-top: 1px solid var(--border-color);
 }
 
@@ -232,13 +234,13 @@ body {
 
 .btn-secondary {
     background: var(--bg-secondary);
-    color: var(--text-primary);
+    color: var(--text-secondary);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .btn-secondary:hover:not(:disabled) {
-    background: rgba(20, 24, 36, 0.8);
-    border-color: rgba(59, 130, 246, 0.5);
+    background: var(--bg-secondary);
+    border-color: var(--bg-secondary);
 }
 
 .btn-secondary .icon-left {
@@ -250,15 +252,15 @@ body {
 }
 
 .btn-primary {
-    background: var(--accent-blue);
-    color: var(--text-primary);
-    border: 1px solid rgba(59, 130, 246, 0.5);
-    box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
+    background: var(--bg-secondary);
+    color: var(--accent-orange);
+    border: 1px solid var(--accent-orange);
 }
 
 .btn-primary:hover:not(:disabled) {
-    background: rgba(59, 130, 246, 0.9);
-    border-color: var(--accent-cyan);
+    background: var(--bg-secondary);
+    border-color: var(--accent-orange);
+    box-shadow: 0 0 5px var(--accent-orange, 0.01);
 }
 
 .btn-primary .icon-right {
@@ -307,7 +309,7 @@ body {
 
 .indicator.active {
     width: 48px;
-    background: var(--accent-blue);
+    background: var(--accent-orange);
     box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
 }
 
@@ -322,59 +324,88 @@ body {
 
 .progress-fill {
     height: 100%;
-    background: linear-gradient(to right, var(--accent-blue), var(--accent-cyan));
+    background: linear-gradient(to right, var(--accent-yellow), var(--accent-orange));
     transition: width 0.5s ease-out;
     border-radius: 9999px;
 }
-
-/* Tips Section */
-.tips-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 1.5rem;
+/* Video Section */
+.video-section {
     margin-top: 3rem;
+    margin-right: 4.5rem;
+    margin-left: 4.5rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    align-items: start;
 }
 
-.tip-card {
-    background: var(--bg-card);
-    border-radius: 12px;
-    padding: 1.5rem;
-    border: 1px solid var(--border-color);
-    transition: border-color 0.3s ease;
+.video-wrapper {
+    aspect-ratio: 16/9;
+}
+
+.video-wrapper iframe {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--radius);
+    box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.3);
 }
 
-.tip-card:hover {
-    border-color: rgba(59, 130, 246, 0.5);
+.video-text h2 {
+    font-size: 1.875rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+    color: var(--foreground);
 }
 
-.tip-icon {
-    width: 48px;
-    height: 48px;
-    background: rgba(59, 130, 246, 0.2);
-    border-radius: 8px;
+.video-description {
+    color: var(--muted-foreground);
+    margin-bottom: 1.5rem;
+}
+
+.tips-list {
     display: flex;
-    align-items: center;
-    justify-content: center;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.tip-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+}
+
+.tip-icon {
     font-size: 1.5rem;
-    margin-bottom: 1rem;
 }
 
-.tip-title {
-    font-size: 1.25rem;
+.tip-item h4 {
     font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: 0.5rem;
+    color: var(--foreground);
+    margin-bottom: 0.25rem;
 }
 
-.tip-text {
-    color: var(--text-secondary);
+.tip-item p {
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
 }
 
+
 /* Footer */
 .footer {
     border-top: 1px solid var(--border-color);
     margin-top: 5rem;
-    background: rgba(26, 31, 46, 0.3);
+    background: var(--bg-secondary);
+}
+
+.footer a {
+    color: var(--text-primary);
+    text-decoration: none;
+    transition: text-decoration 0.2s;
+}
+
+.footer a:hover {
+    color: var(--accent-orange);
+    text-decoration: underline;
 }
 
 .footer-text {
@@ -406,4 +437,10 @@ body {
         width: 100%;
         justify-content: center;
     }
+    .video-section {
+        grid-template-columns: 1fr;
+        margin-top: 3rem;
+        margin-right: 0rem;
+        margin-left: 0rem;
+    }
 }