Update style

index.css

@@ -1,12 +1,12 @@
 :root{
-  --bg: #05020f;
-  --glass: rgba(12,8,35,.82);
-  --border: rgba(0,255,240,.38);
-  --text: #f8f9ff;
-  --muted: #9ed4ff;
-  --accent: #00ffea;
-  --accent-2: #ff00c8;
-  --glow: #00ffea;
+  --bg: #060402;
+  --glass: rgba(18,10,3,.90);
+  --border: rgba(255,165,0,.30);
+  --text: #fdf0d8;
+  --muted: #c49a5e;
+  --accent: #ffaa00;
+  --accent-2: #e05418;
+  --glow: #ffaa00;
 
   --outer-pad: clamp(16px, 1.8vw, 80px);
   --gap: clamp(12px, 1.3vw, 56px);
@@ -32,9 +32,9 @@ body{
   font-family:var(--font);
   color:var(--text);
   background:
-    radial-gradient(1200px 600px at 20% 10%, rgba(0,255,234,.18), transparent 60%),
-    radial-gradient(900px 500px at 85% 20%, rgba(255,0,200,.14), transparent 55%),
-    radial-gradient(800px 600px at 50% 100%, rgba(120,0,255,.08), transparent 55%),
+    radial-gradient(1200px 600px at 20% 10%, rgba(255,140,0,.15), transparent 60%),
+    radial-gradient(900px 500px at 85% 20%, rgba(200,55,10,.12), transparent 55%),
+    radial-gradient(800px 600px at 50% 100%, rgba(110,20,55,.09), transparent 55%),
     var(--bg);
   overflow:hidden;
   -webkit-font-smoothing:antialiased;
@@ -60,12 +60,12 @@ body{
   border-radius:var(--radius);
   background:var(--glass);
   border:1px solid var(--border);
-  box-shadow:0 10px 30px #00000059, inset 0 1px #ffffff0f, 0 0 0 1px rgba(0,255,234,.12);
+  box-shadow:0 10px 30px rgba(0,0,0,.65), inset 0 1px rgba(255,190,60,.07), 0 0 0 1px rgba(255,120,0,.10);
   overflow:hidden;
   backdrop-filter:blur(16px);
 }
 
-/* -------- Top Left - weather description/logo NOW SAFELY to the RIGHT of date/time -------- */
+/* -------- Top Left -------- */
 .topLeft{
   display:flex;
   flex-direction:column;
@@ -77,15 +77,15 @@ body{
   flex:0 0 auto;
   min-width:0;
   display: grid;
-  grid-template-columns: 1fr 38%;   /* fully responsive % — no more fixed px clipping */
+  grid-template-columns: 1fr 38%;
   gap: clamp(8px, 0.9vh, 20px) clamp(24px, 2.8vw, 110px);
   padding:clamp(14px, 1.6vh, 38px) clamp(18px, 2vw, 80px);
   border-radius:var(--radius-sm);
-  background:rgba(8,4,28,.85);
-  border:1px solid rgba(0,255,234,.35);
+  background:rgba(10,6,1,.88);
+  border:1px solid rgba(255,165,0,.38);
   position: relative;
   align-items: start;
-  min-height: auto;                 /* prevents collapse */
+  min-height: auto;
 }
 
 #date{
@@ -105,10 +105,10 @@ body{
   letter-spacing:.8px;
   line-height:1.02;
   color:var(--text);
-  text-shadow:0 0 20px var(--glow);
+  text-shadow:0 0 28px var(--glow);
 }
 
-/* weather description + logo moved to right column (flex column so they stack nicely) */
+/* weather description + logo in right column */
 .dateTime > div {
   grid-column: 2;
   grid-row: 1 / span 2;
@@ -124,8 +124,8 @@ body{
 #weatherDescription{
   font-size:clamp(36px, 3.5vh, 82px);
   font-weight:700;
-  color:#fff;
-  text-shadow:0 0 15px var(--accent);
+  color:var(--text);
+  text-shadow:0 0 18px var(--accent);
   margin:0;
   text-align:right;
   line-height:1.05;
@@ -149,7 +149,7 @@ body{
     pointer-events: none;
 }
 
-/* -------- weather block below (unchanged proportions) -------- */
+/* -------- weather block below -------- */
 .weather{
   flex:1 1 auto;
   min-width:0;
@@ -178,14 +178,14 @@ body{
   margin:0;
   padding:clamp(6px, 1.1vh, 26px) clamp(9px, 1.3vw, 52px);
   border-radius:clamp(14px, 0.9vw, 36px);
-  background:rgba(255,255,255,.09);
-  border:1px solid rgba(0,255,234,.25);
+  background:rgba(255,160,0,.07);
+  border:1px solid rgba(255,165,0,.22);
   font-size:var(--info-size);
   line-height:1.00;
   display:flex;
   align-items:center;
   justify-content:center;
-  box-shadow:0 4px 20px rgba(0,0,0,.4);
+  box-shadow:0 4px 20px rgba(0,0,0,.45);
 }
 
 #temp,#feels,#wind,#dewPoint{
@@ -204,18 +204,17 @@ body{
   display:flex;
   align-items:center;
   justify-content:center;
-  background:radial-gradient(800px 520px at 70% 10%, rgba(255,0,200,.12), transparent 55%), rgba(8,4,28,.85);
+  background:radial-gradient(800px 520px at 70% 10%, rgba(200,60,0,.10), transparent 55%), rgba(10,6,1,.88);
 }
 
 #radar{
   width:100%;
   height:100%;
-  object-fit:scale-down;
-  object-position:center 52%;
-  transform:scale(1.08);
+  object-fit:contain;
+  object-position:center center;
   border-radius:calc(var(--radius) - 6px);
-  border:1px solid rgba(0,255,234,.45);
-  box-shadow:0 14px 40px #00000073, 0 0 25px rgba(0,255,234,.3);
+  border:1px solid rgba(255,165,0,.40);
+  box-shadow:0 14px 40px rgba(0,0,0,.70), 0 0 28px rgba(255,140,0,.18);
   background:#00000038;
   display:block;
 }
@@ -230,8 +229,8 @@ table{
   border-spacing:0;
   overflow:hidden;
   border-radius:calc(var(--radius) - 6px);
-  background:rgba(8,4,28,.75);
-  border:1px solid rgba(0,255,234,.3);
+  background:rgba(10,6,1,.78);
+  border:1px solid rgba(255,165,0,.28);
   table-layout:fixed;
 }
 
@@ -239,11 +238,11 @@ thead th{
   padding:clamp(8px, 1.1vh, 26px) clamp(8px, 1.1vw, 44px);
   font-size:var(--table-head);
   line-height:1.1;
-  color:#fff;
+  color:var(--text);
   letter-spacing:.4px;
   text-transform:uppercase;
-  background:linear-gradient(90deg, rgba(0,255,234,.25), rgba(255,0,200,.2));
-  border-bottom:1px solid rgba(0,255,234,.35);
+  background:linear-gradient(90deg, rgba(255,150,0,.28), rgba(200,60,0,.22));
+  border-bottom:1px solid rgba(255,150,0,.35);
 }
 
 tbody td{
@@ -251,34 +250,34 @@ tbody td{
   font-size:var(--table-cell);
   line-height:1.1;
   color:var(--muted);
-  border-bottom:1px solid rgba(255,255,255,.06);
+  border-bottom:1px solid rgba(255,255,255,.05);
 }
 
 tbody td:first-child{
   width:44%;
-  color:#e0f8ff;
+  color:var(--text);
   font-weight:760;
-  background:rgba(0,255,234,.1);
-  border-right:1px solid rgba(0,255,234,.25);
+  background:rgba(255,150,0,.09);
+  border-right:1px solid rgba(255,165,0,.22);
 }
 
 tbody td:not(:first-child),thead th:not(:first-child){text-align:center}
-tbody tr:nth-child(odd) td{background:rgba(255,255,255,.04)}
-tbody tr:nth-child(2n) td{background:rgba(255,255,255,.07)}
+tbody tr:nth-child(odd) td{background:rgba(255,255,255,.03)}
+tbody tr:nth-child(2n) td{background:rgba(255,160,0,.05)}
 tbody tr:last-child td{border-bottom:none}
 
 /* -------- Bottom Right -------- */
 .bottomRight{
   padding:clamp(12px, 1.2vw, 54px);
-  background:radial-gradient(900px 600px at 20% 20%, rgba(0,255,234,.1), transparent 55%), rgba(8,4,28,.85);
+  background:radial-gradient(900px 600px at 20% 20%, rgba(255,130,0,.09), transparent 55%), rgba(10,6,1,.88);
 }
 
 .bottomRight iframe{
   width:100%;
   height:100%;
-  border:1px solid rgba(0,255,234,.35);
+  border:1px solid rgba(255,165,0,.35);
   border-radius:calc(var(--radius) - 6px);
-  box-shadow:0 18px 50px #0000008c, 0 0 30px rgba(255,0,200,.3);
+  box-shadow:0 18px 50px rgba(0,0,0,.80), 0 0 30px rgba(200,60,0,.22);
   background:#000;
   display:block;
 }