Update styles.css

Author: omarakhmedov-web

styles.css

@@ -1,4 +1,5 @@
-/* Metridex v0.2.5 — Fixed navbar + About perfect centering (Black & Gold base) */
+/* Metridex v0.2.6 — Restore Screens + FAQ; Articles left padding; image placeholders */
+/* (Black & Gold base + fixed navbar + centered About band) */
 :root{
   --bg:#070709;
   --ink:#f5f3eb;
@@ -28,11 +29,9 @@ a:visited{color:var(--link-visited)}
 /* Containers */
 .container{width:min(1120px, 92%); margin:0 auto}
 
-/* 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)}
+/* Navbar — fixed */
+.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;
@@ -47,7 +46,7 @@ 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) */
+/* Content offset for fixed nav */
 body.has-fixed-nav{padding-top:72px}
 
 /* Hero */
@@ -61,13 +60,10 @@ body.has-fixed-nav{padding-top:72px}
   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)}
-/* Aura with gold shimmer */
 .cta-bot{position:relative; overflow:hidden}
-.cta-bot .aura{
-  position:absolute; inset:-2px; border-radius:18px; pointer-events:none;
+.cta-bot .aura{position:absolute; inset:-2px; border-radius:18px; pointer-events:none;
   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;
-}
+  filter:blur(8px); animation:spin 3s linear infinite}
 @keyframes spin{to{transform:rotate(360deg)}}
 
 /* Glass cards */
@@ -80,25 +76,44 @@ body.has-fixed-nav{padding-top:72px}
 .section{padding:68px 0}
 .section.alt{background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
 
-/* Centered band variant for About */
+/* Centered band for About */
 .band{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00))}
 .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}
-h2{font-size:32px; margin:0 0 14px}
+/* Screens */
+.screens-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
+.screen{padding:16px}
+.viewport{border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.02); overflow:hidden;
+  aspect-ratio:16/10; display:grid; place-items:center}
+.viewport img{width:100%; height:100%; object-fit:cover; display:block}
+.viewport.placeholder{background:
+  linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
+  radial-gradient(600px 300px at 80% 10%, rgba(247,227,161,.10), transparent 60%),
+  rgba(0,0,0,.15)}
+.screen figcaption{margin-top:8px; font-weight:700}
+.hint{color:var(--muted); font-size:.9rem}
 
-/* Features & cards */
+/* Cards & Features */
 .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}
 
+/* FAQ */
+.faq{display:grid; gap:12px}
+.qa{padding:12px}
+.qa > summary{cursor:pointer; font-weight:800; outline:none}
+.qa[open] > summary{margin-bottom:8px}
+
+/* Articles */
+.articles{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
+.post{padding:16px 18px 16px 22px} /* extra left padding */
+.post h3{margin:0 0 6px}
+
 /* Footer */
 .footer{padding:36px 0; border-top:1px solid var(--stroke); color:var(--muted)}