Update static/styles.css

static/styles.css

@@ -1,5 +1,4 @@
 :root {
-    --rosewater: #f4dbd6;
     --flamingo: #f0c6c6;
     --pink: #f5bde6;
     --mauve: #c6a0f6;
@@ -52,11 +51,11 @@ body {
 
 .ascii-logo {
     font-family: monospace;
-    font-size: 0.7em;
+    font-size: 2.1em;
     line-height: 1.2;
     white-space: pre;
     text-align: center;
-    background: linear-gradient(to right, #7dc4e4, #c6a0f6);
+    background: linear-gradient(to right, var(--sapphire), var(--mauve));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     display: inline-block;
@@ -72,12 +71,11 @@ body {
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 }
 
-.gradio-container .menu-button {
+.gradio-container .menu-button,
+.gradio-container button.menu-button {
     color: var(--text) !important;
-    background: rgba(73, 77, 100, 0.3) !important;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    background: linear-gradient(to right, var(--sapphire), var(--mauve)) !important;
+    border: none !important;
     padding: 15px 20px !important;
     width: 80% !important;
     margin-left: 10% !important;
@@ -90,19 +88,18 @@ body {
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
 }
 
-.gradio-container .menu-button:hover {
-    background: rgba(91, 96, 120, 0.5) !important;
-    color: var(--subtext1) !important;
+.gradio-container .menu-button:hover,
+.gradio-container button.menu-button:hover {
+    background: linear-gradient(to right, var(--sky), var(--pink)) !important;
+    color: var(--base) !important;
     transform: translateY(-2px) !important;
     box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
 }
 
 .gradio-container .gr-button-primary {
-    background: rgba(138, 173, 244, 0.3) !important;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    color: var(--text) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    background: linear-gradient(to right, var(--sapphire), var(--mauve)) !important;
+    color: var(--base) !important;
+    border: none !important;
     border-radius: 25px !important;
     padding: 12px 24px !important;
     font-size: 1.2em !important;
@@ -111,11 +108,9 @@ body {
 }
 
 .gradio-container .gr-button-secondary {
-    background: rgba(73, 77, 100, 0.3) !important;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    color: var(--text) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    background: linear-gradient(to right, var(--lavender), var(--pink)) !important;
+    color: var(--base) !important;
+    border: none !important;
     border-radius: 25px !important;
     padding: 12px 24px !important;
     font-size: 1.2em !important;
@@ -127,7 +122,8 @@ body {
 .gradio-container .gr-button-secondary:hover {
     transform: translateY(-2px) !important;
     box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
-    background: rgba(91, 96, 120, 0.5) !important;
+    background: linear-gradient(to right, var(--sky), var(--flamingo)) !important;
+    color: var(--base) !important;
 }
 
 .gradio-container .gr-input,
@@ -143,8 +139,8 @@ body {
 
 .gradio-container .gr-input:focus,
 .gradio-container .gr-textarea:focus {
-    border-color: rgba(138, 173, 244, 0.6) !important;
-    box-shadow: 0 0 0 2px rgba(138, 173, 244, 0.3) !important;
+    border-color: var(--sapphire) !important;
+    box-shadow: 0 0 0 2px rgba(125, 196, 228, 0.3) !important;
 }
 
 .gradio-container .gr-form {
@@ -196,6 +192,6 @@ body {
 /* Media query for larger screens */
 @media (min-width: 1200px) {
     .ascii-logo {
-        font-size: 1em;
+        font-size: 2.5em;
     }
 }