Update styles.css

Author: omarakhmedov-web

styles.css

@@ -1,15 +1,12 @@
-/* Metridex v0.2.4 — Black & Gold preset + centered About band */
+/* Metridex v0.2.5 — Fixed navbar + About perfect centering (Black & Gold base) */
 :root{
-  /* Luxury palette */
   --bg:#070709;
-  --ink:#f5f3eb;           /* ivory text */
-  --muted:#b9b3a3;         /* warm gray */
+  --ink:#f5f3eb;
+  --muted:#b9b3a3;
   --glass:#0c0d11;
   --stroke:rgba(255,255,255,.10);
-  --gold1:#f7e3a1;         /* soft gold */
-  --gold2:#b88a2a;         /* deep gold */
-  --link:#f0c65a;          /* gold link */
-  --link-visited:#d0b36e;
+  --gold1:#f7e3a1; --gold2:#b88a2a;
+  --link:#f0c65a; --link-visited:#d0b36e;
 }
 *{box-sizing:border-box}
 html{scroll-behavior:smooth}
@@ -31,9 +28,11 @@ a:visited{color:var(--link-visited)}
 /* 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(150%) blur(8px); background:rgba(7,7,9,.65)}
+/* Navbar — fixed + shadow */
+.nav{position:fixed; top:0; left:0; right:0; z-index:100;
+  border-bottom:1px solid var(--stroke);
+  backdrop-filter:saturate(150%) blur(8px);
+  background:rgba(7,7,9,.70); box-shadow:0 6px 18px rgba(0,0,0,.35)}
 .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:34px; height:34px; border-radius:10px;
@@ -48,6 +47,9 @@ a:visited{color:var(--link-visited)}
 .burger{display:none; margin-left:8px; background:transparent; border:1px solid var(--stroke); color:var(--ink);
   border-radius:10px; padding:8px 10px; cursor:pointer}
 
+/* Ensure page content starts below fixed nav (JS also sets padding-top precisely) */
+body.has-fixed-nav{padding-top:72px}
+
 /* Hero */
 .hero{padding:96px 0 56px}
 .hero-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:32px; align-items:center}
@@ -77,11 +79,14 @@ a:visited{color:var(--link-visited)}
 /* Sections */
 .section{padding:68px 0}
 .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}
+.center{min-height:260px; padding:0}
+.band-inner{display:flex; align-items:center; min-height:260px}
+.band-copy{display:block}
+.band-copy h2{margin:0 0 10px}
+.band-copy p{margin:0}
 
 /* Headings */
 h1{font-size:40px; margin:0 0 12px}
@@ -94,11 +99,6 @@ h2{font-size:32px; margin:0 0 14px}
 .card{padding:18px}
 .card .price{font-size:22px; font-weight:900}
 
-/* Articles */
-.articles{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
-.post{padding:16px}
-.post h3{margin:0 0 6px}
-
 /* Footer */
 .footer{padding:36px 0; border-top:1px solid var(--stroke); color:var(--muted)}
 
@@ -113,14 +113,14 @@ h2{font-size:32px; margin:0 0 14px}
   .nav-links.open{display:flex}
 }
 
-/* Light theme (kept, but tuned for luxury) */
+/* Light theme */
 :root.light{
   --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,.9); border-bottom-color:var(--stroke)}
+:root.light .nav{background:rgba(255,255,255,.90); border-bottom-color:var(--stroke); box-shadow:0 6px 18px rgba(0,0,0,.08)}
 :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)}