Update rt-ai-html.css

therealtimex · Dec 13, 2024 · d61d8c4 · d61d8c4
1 parent f680a43
commit d61d8c4
Showing 1 changed file with 29 additions and 1 deletion.
diff --git a/css/rt-ai-html.css b/css/rt-ai-html.css
@@ -86,6 +86,9 @@
     font-weight: 500;
     text-align: center;
     -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+    line-height: 1.4;
+    font-weight: 500;
 }
 
 .btn-shade {
@@ -94,16 +97,21 @@
     padding: 0.75rem 1.25rem;
     border: none;
     border-radius: var(--border-radius);
+    background: linear-gradient(to right, var(--primary-color) 0%, var(--secondary-color) 100%);
+    background-size: 200% auto;
     color: white;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
-    transition: all var(--transition-speed);
+    transition: background-position var(--transition-speed);
     font-weight: 500;
     text-align: center;
     -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+    line-height: 1.4;
+    font-weight: 500;
     background-color: color-mix(in srgb,
             var(--primary-color) 70%,
             var(--secondary-color));
@@ -127,6 +135,23 @@
     transition: transform var(--transition-speed);
 }
 
+.btn-shade:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    background-position: right center;
+}
+
+.btn-shade::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    transform: translateX(-100%);
+    transition: transform var(--transition-speed);
+}
 .btn svg {
     width: 1em;
     /* Reduced from 1.25em */
@@ -144,6 +169,9 @@
 @media screen and (max-width: 600px) {
     .btn {
         flex: 1 1 100%;
+        width: 100%; /* Full width on mobile */
+        font-size: 17px; /* Slightly larger for better readability */
+        padding: 12px 24px;
     }
 }