Update styles.css

Author: omarakhmedov-web

styles.css

@@ -1,15 +1,15 @@
-/* Metridex v0.2.3 — Contrast fixes, light navbar, link colors, articles page */
+/* Metridex v0.2.4 — Black & Gold preset + centered About band */
 :root{
-  --bg:#090b0f;
-  --ink:#e9eef6;
-  --muted:#9aa7b6;
-  --glass:#0f141b;
-  --stroke:rgba(255,255,255,.08);
-  --gold1:#f2d58c;
-  --gold2:#b38a3a;
-  --teal:#23d6c6;
-  --link:#2bd3c8;
-  --link-visited:#8cd4ff;
+  /* Luxury palette */
+  --bg:#070709;
+  --ink:#f5f3eb;           /* ivory text */
+  --muted:#b9b3a3;         /* warm gray */
+  --glass:#0c0d11;
+  --stroke:rgba(255,255,255,.10);
+  --gold1:#f7e3a1;         /* soft gold */
+  --gold2:#b88a2a;         /* deep gold */
+  --link:#f0c65a;          /* gold link */
+  --link-visited:#d0b36e;
 }
 *{box-sizing:border-box}
 html{scroll-behavior:smooth}
@@ -18,26 +18,25 @@ body{
   margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
   color:var(--ink);
   background:
-    radial-gradient(800px 400px at 80% 10%, rgba(35,214,198,.10), transparent 60%),
-    radial-gradient(900px 500px at 10% 20%, rgba(242,213,140,.10), transparent 60%),
-    radial-gradient(1200px 600px at 70% 70%, rgba(255,255,255,.04), transparent 60%),
+    radial-gradient(900px 500px at 10% 15%, rgba(247,227,161,.08), transparent 60%),
+    radial-gradient(800px 420px at 80% 8%, rgba(184,138,42,.10), transparent 60%),
+    radial-gradient(1200px 600px at 70% 70%, rgba(255,255,255,.05), transparent 60%),
     var(--bg);
   line-height:1.6;
 }
 a{color:var(--link); text-decoration:none}
 a:hover{text-decoration:underline}
 a:visited{color:var(--link-visited)}
-.link{color:var(--link)}
 
 /* Containers */
 .container{width:min(1120px, 92%); margin:0 auto}
 
 /* Navbar */
 .nav{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--stroke);
-  backdrop-filter:saturate(140%) blur(6px); background:rgba(9,11,15,.6)}
+  backdrop-filter:saturate(150%) blur(8px); background:rgba(7,7,9,.65)}
 .nav-inner{display:flex; align-items:center; gap:16px; padding:12px 0}
 .brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px}
-.logo-mark{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:10px;
+.logo-mark{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
   background:linear-gradient(135deg, var(--gold1), var(--gold2)); color:#0d1116; font-weight:900}
 .logo-text{font-weight:900}
 .nav-links{display:flex; gap:22px; margin-left:auto}
@@ -52,41 +51,50 @@ a:visited{color:var(--link-visited)}
 /* Hero */
 .hero{padding:96px 0 56px}
 .hero-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:32px; align-items:center}
-.hero-copy h1{font-size: clamp(34px, 5.6vw, 64px); line-height:1.08; margin:0 0 10px; font-weight:900; letter-spacing:-.02em}
-.grad{background:linear-gradient(90deg, var(--gold1) 0%, var(--teal) 60%); -webkit-background-clip:text; background-clip:text; color:transparent}
+.hero-copy h1{font-size: clamp(36px, 5.8vw, 66px); line-height:1.06; margin:0 0 10px; font-weight:900; letter-spacing:-.02em}
+.grad{background:linear-gradient(90deg, var(--gold1) 0%, var(--gold2) 38%, #fff 70%); -webkit-background-clip:text; background-clip:text; color:transparent}
 .sub{color:var(--muted); margin:0}
 .cta-row{display:flex; gap:12px; margin-top:16px}
 .cta{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; padding:12px 16px; border-radius:16px;
-  border:1px solid var(--stroke); background:linear-gradient(180deg, #141a22, #0e1318); color:var(--ink)}
+  border:1px solid var(--stroke); background:linear-gradient(180deg, #141414, #0f1115); color:var(--ink)}
 .cta:hover{transform:translateY(-1px)}
 .cta.ghost{background:transparent; color:var(--ink); border-color:var(--stroke)}
-/* Premium animated aura */
+/* Aura with gold shimmer */
 .cta-bot{position:relative; overflow:hidden}
 .cta-bot .aura{
   position:absolute; inset:-2px; border-radius:18px; pointer-events:none;
-  background:conic-gradient(from 0deg, rgba(242,213,140,.0), rgba(179,138,58,.35), rgba(35,214,198,.35), rgba(242,213,140,.0));
-  filter:blur(8px); animation:spin 2.8s linear infinite;
+  background:conic-gradient(from 0deg, rgba(247,227,161,.0), rgba(247,227,161,.35), rgba(184,138,42,.35), rgba(247,227,161,.0));
+  filter:blur(8px); animation:spin 3s linear infinite;
 }
 @keyframes spin{to{transform:rotate(360deg)}}
 
 /* Glass cards */
-.glass{background:rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius:18px; box-shadow:0 12px 36px rgba(0,0,0,.35); backdrop-filter: blur(8px)}
+.glass{background:rgba(255,255,255,.03); border:1px solid var(--stroke); border-radius:18px; box-shadow:0 18px 48px rgba(0,0,0,.45); backdrop-filter: blur(10px)}
 .hero-card{padding:18px}
 .hero-card h3{margin:0 0 8px}
 .hero-card ul{margin:0; padding-left:18px}
 
 /* Sections */
 .section{padding:68px 0}
-.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
+.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
+/* Centered band variant for About */
+.band{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00))}
+.center{display:grid; place-items:center; min-height:240px}
+.center .container h2{margin:0 0 8px}
+.center .container p{margin:0}
+
+/* Headings */
 h1{font-size:40px; margin:0 0 12px}
 h2{font-size:32px; margin:0 0 14px}
+
+/* Features & cards */
 .features-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
 .feature{padding:16px}
 .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
 .card{padding:18px}
 .card .price{font-size:22px; font-weight:900}
 
-/* Articles list */
+/* Articles */
 .articles{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
 .post{padding:16px}
 .post h3{margin:0 0 6px}
@@ -105,18 +113,18 @@ h2{font-size:32px; margin:0 0 14px}
   .nav-links.open{display:flex}
 }
 
-/* Light theme */
+/* Light theme (kept, but tuned for luxury) */
 :root.light{
-  --bg:#f7f9fc; --ink:#0d1117; --muted:#485565; --glass:#ffffff; --stroke:rgba(0,0,0,.08);
-  --link:#0b7d76; --link-visited:#0a5e9c;
+  --bg:#faf8f2; --ink:#14120e; --muted:#5a5346; --glass:#ffffff; --stroke:rgba(0,0,0,.10);
+  --link:#916c16; --link-visited:#6d5524;
   background:none;
 }
 :root.light body{background:var(--bg)}
-:root.light .nav{background:rgba(255,255,255,.85); border-bottom-color:var(--stroke)}
+:root.light .nav{background:rgba(255,255,255,.9); border-bottom-color:var(--stroke)}
 :root.light .nav-links a{color:var(--muted)}
 :root.light .nav-links a:hover, :root.light .nav-links a[aria-current="page"]{color:var(--ink)}
 :root.light .icon-btn{color:var(--ink); border-color:var(--stroke)}
-:root.light .cta{background:linear-gradient(180deg, #ffffff, #f2f5f9); color:#0d1117; border-color:var(--stroke)}
-:root.light .cta.ghost{background:transparent; color:#0d1117; border-color:var(--stroke)}
-:root.light .glass{background:rgba(255,255,255,.7); box-shadow:0 8px 24px rgba(0,0,0,.08)}
-:root.light .grad{background:linear-gradient(90deg, #0d1117 0%, #0d1117 35%, #1c8f87 65%); -webkit-background-clip:text; background-clip:text; color:transparent}
+:root.light .cta{background:linear-gradient(180deg, #ffffff, #f2efe9); color:#14120e; border-color:var(--stroke)}
+:root.light .cta.ghost{background:transparent; color:#14120e; border-color:var(--stroke)}
+:root.light .glass{background:rgba(255,255,255,.75); box-shadow:0 8px 24px rgba(0,0,0,.10)}
+:root.light .grad{background:linear-gradient(90deg, #14120e 0%, #14120e 40%, #b88a2a 80%); -webkit-background-clip:text; background-clip:text; color:transparent}