From 15126424a2e7b14fdbad97fbcfd73b878a676968 Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Wed, 26 Nov 2025 03:48:39 +0200
Subject: [PATCH] Fix css

---
 index.html | 120 ++++++++++++++++++++++++++---------------------------
 1 file changed, 58 insertions(+), 62 deletions(-)

diff --git a/index.html b/index.html
index 929237e..3d29b99 100644
--- a/index.html
+++ b/index.html
@@ -13,15 +13,15 @@
 
   <style>
     :root {
-      --bg: #050816;
-      --bg-card: rgba(15, 23, 42, 0.9);
+      --bg: #020617;
+      --bg-card: rgba(15, 23, 42, 0.98);
       --accent: #38bdf8;
       --accent-soft: rgba(56, 189, 248, 0.18);
-      --text-main: #f9fafb;
+      --text-main: #e5e7eb;
       --text-muted: #9ca3af;
-      --border-subtle: rgba(148, 163, 184, 0.35);
-      --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.85);
-      --radius-xl: 18px;
+      --border-subtle: rgba(148, 163, 184, 0.3);
+      --shadow-soft: 0 24px 80px rgba(15, 23, 42, 0.9);
+      --radius-xl: 22px;
       --transition-fast: 180ms ease-out;
     }
 
@@ -35,33 +35,31 @@
       min-height: 100vh;
       font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       background:
-        radial-gradient(circle at top left, #1d2538 0, transparent 55%),
-        radial-gradient(circle at bottom right, #020617 0, transparent 50%),
-        var(--bg);
+        radial-gradient(circle at top left, #020617 0, #020617 40%, #020617 100%),
+        radial-gradient(circle at bottom right, #020617 0, #000 60%);
       color: var(--text-main);
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 24px;
+      padding: 32px 16px;
     }
 
     .shell {
       width: 100%;
-      max-width: 960px;
+      max-width: 1100px;
       border-radius: 26px;
-      background: radial-gradient(circle at top, rgba(148, 163, 184, 0.08) 0, transparent 60%),
-                  linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.98));
-      border: 1px solid rgba(148, 163, 184, 0.3);
+      background: linear-gradient(145deg, #020617, #020617);
+      border: 1px solid rgba(30, 64, 175, 0.55);
       box-shadow: var(--shadow-soft);
-      padding: 26px 26px 22px;
-      backdrop-filter: blur(22px);
+      padding: 24px 26px 20px;
+      backdrop-filter: blur(20px);
     }
 
     .shell-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 22px;
+      margin-bottom: 20px;
     }
 
     .brand {
@@ -71,8 +69,8 @@
     }
 
     .logo-circle {
-      width: 44px;
-      height: 44px;
+      width: 40px;
+      height: 40px;
       border-radius: 999px;
       background: radial-gradient(circle at 30% 10%, #e5f9ff 0, #0ea5e9 40%, #0369a1 100%);
       display: inline-flex;
@@ -81,19 +79,19 @@
       color: #0b1120;
       font-weight: 800;
       letter-spacing: 0.05em;
-      font-size: 16px;
-      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.6), 0 16px 30px rgba(8, 47, 73, 0.9);
+      font-size: 15px;
+      box-shadow: 0 12px 26px rgba(8, 47, 73, 0.9);
     }
 
     .brand-text-main {
-      font-size: 20px;
+      font-size: 18px;
       font-weight: 700;
       letter-spacing: 0.04em;
       text-transform: uppercase;
     }
 
     .brand-text-sub {
-      font-size: 12px;
+      font-size: 11px;
       text-transform: uppercase;
       color: var(--text-muted);
       letter-spacing: 0.16em;
@@ -101,18 +99,17 @@
     }
 
     .status-pill {
-      font-size: 12px;
+      font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.12em;
-      padding: 4px 12px 4px 10px;
+      padding: 4px 11px 4px 9px;
       border-radius: 999px;
-      border: 1px solid rgba(56, 189, 248, 0.4);
+      border: 1px solid rgba(56, 189, 248, 0.7);
       color: var(--accent);
-      background: radial-gradient(circle at left, rgba(56, 189, 248, 0.32), rgba(15, 23, 42, 0.95));
+      background: radial-gradient(circle at left, rgba(56, 189, 248, 0.4), rgba(15, 23, 42, 0.96));
       display: inline-flex;
       align-items: center;
       gap: 6px;
-      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.8);
     }
 
     .status-dot {
@@ -120,21 +117,21 @@
       height: 7px;
       border-radius: 999px;
       background: #22c55e;
-      box-shadow: 0 0 8px rgba(34, 197, 94, 0.95);
+      box-shadow: 0 0 10px rgba(34, 197, 94, 0.95);
     }
 
     .content {
       display: grid;
-      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+      grid-template-columns: minmax(0, 3fr) minmax(0, 2.2fr);
       gap: 22px;
     }
 
-    @media (max-width: 780px) {
+    @media (max-width: 880px) {
       .content {
         grid-template-columns: minmax(0, 1fr);
       }
       .shell {
-        padding: 20px 18px;
+        padding: 18px 16px 18px;
       }
       .shell-header {
         flex-direction: column;
@@ -148,7 +145,7 @@
       border-radius: var(--radius-xl);
       border: 1px solid var(--border-subtle);
       padding: 18px 18px 16px;
-      box-shadow: 0 20px 36px rgba(15, 23, 42, 0.7);
+      box-shadow: 0 18px 34px rgba(15, 23, 42, 0.85);
       position: relative;
       overflow: hidden;
     }
@@ -156,10 +153,10 @@
     .hero::before {
       content: "";
       position: absolute;
-      inset: -20%;
+      inset: -30%;
       background:
-        radial-gradient(circle at 10% 0%, rgba(56, 189, 248, 0.1) 0, transparent 55%),
-        radial-gradient(circle at 100% 110%, rgba(56, 189, 248, 0.05) 0, transparent 55%);
+        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.16) 0, transparent 55%),
+        radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.06) 0, transparent 55%);
       opacity: 0.9;
       pointer-events: none;
     }
@@ -189,7 +186,7 @@
       color: var(--text-muted);
       line-height: 1.6;
       margin-bottom: 16px;
-      max-width: 32rem;
+      max-width: 33rem;
     }
 
     .badge-row {
@@ -204,14 +201,14 @@
       padding: 5px 10px;
       border-radius: 999px;
       border: 1px solid rgba(148, 163, 184, 0.55);
-      background: rgba(15, 23, 42, 0.8);
+      background: rgba(15, 23, 42, 0.85);
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.12em;
     }
 
     .badge--accent {
-      border-color: rgba(56, 189, 248, 0.55);
+      border-color: rgba(56, 189, 248, 0.65);
       background: var(--accent-soft);
       color: #e0f2fe;
     }
@@ -219,9 +216,10 @@
     .hero-footer {
       display: flex;
       flex-wrap: wrap;
-      gap: 12px;
+      gap: 10px;
       align-items: center;
       justify-content: space-between;
+      margin-top: 4px;
     }
 
     .hero-meta {
@@ -243,14 +241,14 @@
       border-radius: var(--radius-xl);
       border: 1px solid var(--border-subtle);
       padding: 16px 16px 14px;
-      box-shadow: 0 16px 32px rgba(15, 23, 42, 0.7);
+      box-shadow: 0 16px 32px rgba(15, 23, 42, 0.85);
       display: flex;
       flex-direction: column;
       gap: 12px;
     }
 
     .links-title {
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 600;
       letter-spacing: 0.16em;
       text-transform: uppercase;
@@ -261,7 +259,7 @@
     }
 
     .links-title span {
-      font-size: 11px;
+      font-size: 10px;
       color: #6b7280;
     }
 
@@ -269,13 +267,8 @@
       list-style: none;
       display: grid;
       grid-template-columns: 1fr;
-      gap: 7px;
-    }
-
-    @media (min-width: 960px) {
-      .links-list {
-        grid-template-columns: 1fr;
-      }
+      gap: 8px;
+      margin-top: 4px;
     }
 
     .link-item a {
@@ -283,13 +276,17 @@
       align-items: center;
       justify-content: space-between;
       gap: 10px;
-      padding: 9px 9px;
+      padding: 9px 10px;
       border-radius: 12px;
       text-decoration: none;
       color: var(--text-main);
-      border: 1px solid rgba(30, 64, 175, 0.2);
-      background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.97));
-      transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
+      border: 1px solid rgba(30, 64, 175, 0.4);
+      background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.99));
+      transition:
+        transform var(--transition-fast),
+        box-shadow var(--transition-fast),
+        border-color var(--transition-fast),
+        background var(--transition-fast);
     }
 
     .link-main {
@@ -314,17 +311,17 @@
       letter-spacing: 0.14em;
       padding: 3px 7px;
       border-radius: 999px;
-      border: 1px solid rgba(56, 189, 248, 0.6);
+      border: 1px solid rgba(56, 189, 248, 0.8);
       color: #e0f2fe;
-      background: rgba(8, 47, 73, 0.9);
+      background: rgba(8, 47, 73, 0.95);
       white-space: nowrap;
     }
 
     .link-item a:hover {
       transform: translateY(-1px);
-      box-shadow: 0 14px 28px rgba(8, 47, 73, 0.9);
-      border-color: rgba(56, 189, 248, 0.7);
-      background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 1));
+      box-shadow: 0 14px 28px rgba(8, 47, 73, 0.95);
+      border-color: rgba(56, 189, 248, 0.9);
+      background: linear-gradient(135deg, rgba(15, 23, 42, 1), rgba(15, 23, 42, 1));
     }
 
     .link-arrow {
@@ -333,8 +330,8 @@
     }
 
     .footer {
-      margin-top: 14px;
-      padding-top: 12px;
+      margin-top: 16px;
+      padding-top: 10px;
       border-top: 1px solid rgba(51, 65, 85, 0.9);
       display: flex;
       justify-content: space-between;
@@ -354,7 +351,6 @@
     .footer a:hover {
       text-decoration: underline;
     }
-
   </style>
 </head>
 <body>