Update app/frontend/style.css

app/frontend/style.css

@@ -1,5 +1,10 @@
 /* LionGuard 2 - Warm, Inviting, and Bright Design */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap');
+
+/* Icons alignment */
+.bx {
+    vertical-align: middle;
+    line-height: 1;
+}
 
 :root {
     /* Modern color palette inspired by logo */
@@ -105,7 +110,7 @@ main {
     margin-left: auto;
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 24px; /* Increased gap for better spacing */
     flex-wrap: wrap;
     justify-content: flex-end;
     background: transparent;
@@ -130,8 +135,10 @@ main {
 
 .logo-text h1 {
     font-family: 'Poppins', sans-serif;
-    font-size: 1.4rem;
-    color: var(--primary-red);
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary-dark);
+    letter-spacing: -0.02em;
     margin-bottom: 0px;
     line-height: 1.2;
 }
@@ -321,7 +328,7 @@ body.dark-mode .toggle-icon-moon {
     display: inline-flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 18px;
+    gap: 24px; /* Increased gap for better spacing */
     margin-bottom: 0;
     background: transparent;
     border: none;
@@ -373,11 +380,12 @@ body.dark-mode .toggle-icon-moon {
 }
 
 .tab-icon {
-    font-size: 1.2rem;
+    font-size: 1.25rem;
+    margin-bottom: 1px;
 }
 
 .dropdown-toggle {
-    padding-right: 22px;
+    /* padding-right: 22px; removed to fix gap */
 }
 
 .dropdown-caret {
@@ -942,39 +950,45 @@ body.dark-mode .score-chip.bad {
     background: var(--warm-cream);
     border: 1px solid var(--warm-tan);
     border-radius: var(--border-radius);
-    padding: 10px 14px;
-    margin-top: 8px;
+    padding: 16px 20px; /* Increased padding */
+    margin-top: 12px;
     text-align: center;
 }
 
 .feedback-prompt {
     color: var(--text-secondary);
-    margin-bottom: 4px;
+    margin-bottom: 12px; /* Balanced spacing */
     font-weight: 500;
-    font-size: 0.78rem;
+    font-size: 0.85rem; /* Slightly larger */
 }
 
 .feedback-buttons {
     display: flex;
-    gap: 8px;
-    margin-bottom: 6px;
+    gap: 12px; /* More gap between buttons */
+    margin-bottom: 0; /* Remove bottom margin, let padding handle it unless message appears */
     flex-wrap: wrap;
     justify-content: center;
 }
 
-.feedback-buttons .btn {
-    flex: 0 0 auto;
-    padding: 6px 12px;
-    font-size: 0.8rem;
-    justify-content: center;
-}
-
 .feedback-message {
-    padding: 8px;
+    /* Removed default padding to avoid ghost space */
     border-radius: var(--border-radius-sm);
     font-weight: 600;
     text-align: center;
     font-size: 0.85rem;
+    margin-top: 0;
+    transition: all 0.3s ease;
+    opacity: 0;
+    height: 0;
+    overflow: hidden;
+}
+
+.feedback-message.success,
+.feedback-message.info {
+    padding: 10px;
+    margin-top: 12px; /* Add space only when message appears */
+    opacity: 1;
+    height: auto;
 }
 
 .feedback-message.success {
@@ -1287,3 +1301,153 @@ body.dark-mode .score-chip.bad {
         grid-template-columns: 1fr;
     }
 }
+
+/* Get Started Tab Styles */
+.get-started-container {
+    max-width: 1000px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.option-card.full-width-card {
+    width: 100%;
+    background: var(--soft-white);
+    border: 1px solid var(--warm-tan);
+    border-radius: var(--border-radius);
+    padding: 16px; /* Restored to a slightly larger padding */
+    box-shadow: var(--shadow-soft);
+    display: flex;
+    flex-direction: column;
+    gap: 12px; /* Slightly reduced gap */
+}
+
+.option-header {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start; /* Reverted to align-items: flex-start */
+}
+
+.option-icon {
+    font-size: 1.5rem;
+    color: var(--primary-red);
+    background: var(--warm-cream);
+    padding: 8px;
+    border-radius: 50%;
+}
+
+.option-header h2 {
+    font-family: 'Poppins', sans-serif;
+    font-size: 1.15rem;
+    color: var(--primary-dark);
+    margin-bottom: 4px;
+}
+
+.option-header p {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.code-section {
+    background: #2d2d2d; /* Prism Tomorrow bg match */
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    margin-top: 4px;
+}
+
+.code-tabs-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #1f1f1f; /* Slightly darker */
+    border-bottom: 1px solid #3d3d3d;
+    padding-right: 10px;
+}
+
+.code-tabs {
+    display: flex;
+    overflow-x: auto;
+}
+
+.code-tab {
+    background: transparent;
+    border: none;
+    color: #94A3B8;
+    padding: 8px 16px;
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-family: 'Inter', sans-serif;
+    font-weight: 500;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+}
+
+.code-tab:hover {
+    color: #E2E8F0;
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.code-tab.active {
+    color: #FFFFFF;
+    border-bottom-color: var(--primary-red);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.copy-btn {
+    background: transparent;
+    border: 1px solid #475569;
+    color: #cbd5e1;
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    transition: all 0.2s ease;
+}
+
+.copy-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: #94a3b8;
+    color: white;
+}
+
+.code-display {
+    padding: 16px;
+    background: #2d2d2d; /* Match Prism theme */
+    overflow-x: auto;
+}
+
+.code-block {
+    display: none;
+}
+
+.code-block.active {
+    display: block;
+    animation: fadeIn 0.3s ease;
+}
+
+/* Override Prism margins */
+.code-block pre[class*="language-"] {
+    margin: 0 !important;
+    padding: 0 !important;
+    background: transparent !important;
+    text-shadow: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+}
+
+.code-block code[class*="language-"] {
+    font-family: 'Menlo', 'Monaco', 'Courier New', monospace !important;
+    font-size: 0.85rem !important;
+    line-height: 1.5 !important;
+}
+
+.option-action {
+    display: flex;
+    justify-content: flex-start; /* Align button to the left */
+    margin-top: 0; /* Relies on parent gap */
+}