/* ============================================================ Blog & article styling — built on the same design tokens as the landing page (variables come from site.css :root). ============================================================ */ .blogpage{ } .content{ position:relative; z-index:2; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,52px); } /* --- nav: always solid on inner pages --- */ #nav.nav-solid{ background:rgba(6,8,16,.72); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); } #nav .navlinks a.is-current{ color:var(--text); } #nav .navlinks a.is-current::after{ width:100%; } /* --- page header --- */ .blog-hero{ padding:140px 0 30px; } .blog-hero .eyebrow{ font-family:"Space Grotesk",sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--dapi); margin-bottom:16px; display:flex; align-items:center; gap:10px; } .blog-hero .eyebrow::before{ content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--dapi),transparent); } .rtl .blog-hero .eyebrow::before{ background:linear-gradient(270deg,var(--dapi),transparent); } .blog-hero h1{ font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:clamp(30px,5vw,52px); line-height:1.1; margin:0 0 16px; background:linear-gradient(100deg,var(--text) 0%,#c8d2ee 60%,var(--dapi) 120%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .blog-hero p.lead{ color:var(--muted); font-size:clamp(15px,1.7vw,18px); max-width:640px; line-height:1.7; margin:0; } /* --- filters --- */ .blog-filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:26px 0 8px; } .chip{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); padding:8px 15px; border:1px solid var(--line-2); border-radius:30px; text-decoration:none; transition:.25s var(--ease); background:rgba(255,255,255,.015); } .chip:hover{ color:var(--text); border-color:var(--dapi); box-shadow:0 0 24px -12px var(--dapi); } .chip.active{ color:#02030a; background:linear-gradient(100deg,var(--dapi),var(--gfp)); border-color:transparent; font-weight:600; } .chip .count{ opacity:.7; font-size:11px; } .blog-search{ margin-inline-start:auto; position:relative; } .blog-search input{ background:rgba(4,6,12,.6); border:1px solid var(--line-2); border-radius:30px; color:var(--text); padding:9px 16px; font-family:inherit; font-size:13.5px; min-width:210px; } .blog-search input:focus{ outline:none; border-color:var(--dapi); box-shadow:0 0 0 3px rgba(34,230,255,.12); } /* --- post grid --- */ .post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; margin:34px 0 20px; } .post-card{ position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--panel); text-decoration:none; color:inherit; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; min-height:260px; } .post-card:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:0 26px 60px -34px rgba(34,230,255,.5); } .post-card .thumb{ aspect-ratio:16/9; background:#0a0d18 center/cover no-repeat; position:relative; overflow:hidden; } .post-card .thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(4,5,10,.6)); } .post-card .thumb.placeholder{ background: radial-gradient(120px 80px at 30% 30%, rgba(34,230,255,.25), transparent 70%), radial-gradient(140px 90px at 75% 70%, rgba(255,55,211,.22), transparent 70%), #0a0d18; } .post-card .pc-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; } .post-card .pc-meta{ display:flex; gap:10px; align-items:center; font-size:11.5px; color:var(--muted-2); font-family:"Space Grotesk",sans-serif; letter-spacing:.03em; } .post-card .pc-cat{ color:var(--gfp); } .post-card .lang-badge{ margin-inline-start:auto; border:1px solid var(--line-2); border-radius:20px; padding:2px 9px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; } .post-card h3{ font-family:"Space Grotesk",sans-serif; font-size:19px; line-height:1.3; margin:0; color:var(--text); } .post-card p{ color:var(--muted); font-size:13.6px; line-height:1.65; margin:0; } .post-card .pc-more{ margin-top:auto; color:var(--dapi); font-size:13px; font-weight:600; display:inline-flex; gap:6px; } /* fa posts inside an en listing keep their own direction */ [dir="rtl"] .post-card, .post-card[data-lang="fa"]{ } .post-card[data-lang="fa"] h3, .post-card[data-lang="fa"] p{ direction:rtl; } /* --- empty state --- */ .blog-empty{ text-align:center; padding:70px 0; color:var(--muted); } /* --- pagination --- */ .pagination{ position:static; display:flex; gap:8px; justify-content:center; align-items:center; margin:30px 0 90px; } .pagination a, .pagination span{ min-width:42px; text-align:center; padding:10px 12px; border-radius:11px; border:1px solid var(--line-2); color:var(--muted); text-decoration:none; font-size:14px; } .pagination a:hover{ color:var(--text); border-color:var(--dapi); } .pagination .current{ background:linear-gradient(100deg,var(--dapi),var(--gfp)); color:#02030a; border-color:transparent; font-weight:700; } .pagination .disabled{ opacity:.35; } /* ============================================================ Single article ============================================================ */ .article-wrap{ max-width:760px; margin:0 auto; padding:0 clamp(20px,5vw,40px); } /* position:static + display:block undo the global