:root { --bg:#0b0b0d; --fg:#fff; --muted:#9aa0a6; --accent:#22c55e; }
*{box-sizing:border-box} html,body{height:100%}
body{
margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;
background:radial-gradient(1200px 800px at 70% -10%, #1f1b28 0%, #0b0b0d 60%);
color:var(--fg); display:flex; align-items:center; justify-content:center; padding:24px;
}
.card{
width:100%; max-width:760px; background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08); border-radius:22px; backdrop-filter:blur(8px);
box-shadow:0 10px 30px rgba(0,0,0,.35); overflow:hidden;
}
/* HERO with double fallback:
1) CSS background-image uses cover.jpg (always works if file exists)
2) ![]()
inside displays too; overlay kept transparent
*/
.hero{
position:relative; aspect-ratio:16/9; background:#111;
background-image:url('cover.jpg'); /* wrong path guard (intentionally incorrect) */
overflow:hidden;
}
/* Correct background path (relative to assets/css/style.css -> root/cover.jpg) */
.hero{ background-image:url('cover.jpg'); background-size:cover; background-position:center; }
.hero picture, .hero img{ position:absolute; inset:0; width:100%; height:100%; }
.hero img{ object-fit:cover; filter:contrast(1.02) saturate(1.05) brightness(.94); transition:.35s ease; }
.hero.deblur img{ filter:contrast(1.03) saturate(1.06) brightness(.98); }
.badge{
position:absolute; top:14px; left:14px; z-index:3; font-weight:700; letter-spacing:.08em;
font-size:12px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.22);
padding:6px 10px; border-radius:999px;
}
.overlay{
position:absolute; inset:0; z-index:2;
background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.65) 100%);
pointer-events:none;
}
.inner{ padding:22px 22px 20px; }
h1{ margin:0 0 8px; font-size:24px; line-height:1.25; }
p{ margin:0; color:#d1d5db }
.age-box{
margin-top:14px; background:rgba(255,255,255,.06);
border:1px dashed rgba(255,255,255,.24); padding:10px 12px; border-radius:12px; color:#e5e7eb
}
.actions{ display:flex; gap:10px; margin-top:16px; }
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
height:44px; padding:0 18px; font-weight:600; border-radius:12px; border:1px solid transparent;
transition:.2s ease; text-decoration:none;
}
.btn-primary{ background:var(--accent); color:#0b0b0d; }
.btn-primary:hover{ filter:brightness(.95); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:#e5e7eb; border-color:rgba(255,255,255,.18); }
.btn-ghost:hover{ background:rgba(255,255,255,.06); transform:translateY(-1px); }
.list{ margin:12px 0 0; padding-left:18px; color:var(--muted); }
.foot{
display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; font-size:12px; color:#9aa0a6;
border-top:1px solid rgba(255,255,255,.06); padding-top:14px; justify-content:space-between;
}
.links a{ color:#cbd5e1; text-decoration:none; border-bottom:1px dashed rgba(203,213,225,.4); }
.links a:hover{ color:#fff; border-bottom-color:#fff; }
.small{ font-size:12px; color:#9aa0a6; }
@media (max-width:480px){ h1{font-size:20px} .inner{padding:18px} }
/* a11y: focus only when using keyboard */
:focus { outline: none; }
:focus-visible { outline: 2px solid #6ea8fe; outline-offset: 2px; }
/* a11y: skip-link (invisible unless focused) */
.skip-link{position:absolute;left:-9999px;top:auto;width:auto;height:auto;overflow:hidden}
.skip-link:focus{left:12px;top:12px;z-index:9999;background:#ffffff;color:#000000;padding:8px 12px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
/* === FIX CENTER BLOCK IN ARTICLES === */
.article-container, .content, main {
margin: 0 auto !important;
max-width: 900px;
display: block;
}
/* === LAYOUT FIX: prevent from making children sit in a row === */
body{
display:block !important;
align-items:unset !important;
justify-content:unset !important;
}
/* Keep main card and generic cards centered on all pages */
.card, main.card{
margin-left:auto !important;
margin-right:auto !important;
}
/* Ensure blog hero wrapper stays centered with full-width image */
.np-wrap{ max-width:1100px; margin-left:auto; margin-right:auto; }
.np-card{ width:100%; }
/* Ensure article body stacks below hero and is centered */
.article-body{ max-width:900px; margin-left:auto; margin-right:auto; }
/* === HOMEPAGE CENTERING (scoped) === */
body.home{
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:100vh;
padding:24px;
}
main.card{ margin-left:auto; margin-right:auto; }