:root {
--ink: #0d0d0d;
--ink-mid: #2a2a2a;
--ink-light: #5a5a5a;
--ink-faint: #8a8a8a;
--paper: #f7f4ee;
--paper-warm: #ede9e0;
--paper-mid: #e0dbd0;
--accent: #c0392b;
--accent-dark: #922b21;
--accent-warm: #e8734a;
--gold: #b5942a;
--border: #c8c3b8;
--col-width: 700px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Vazirmatn', sans-serif;
background-color: var(--paper);
color: var(--ink);
line-height: 1.9;
font-size: 17px;
direction: rtl;
}
/* ── Breaking News Banner ── */
.breaking-bar {
background: var(--accent);
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 10px 24px;
display: flex;
align-items: center;
gap: 16px;
overflow: hidden;
position: sticky;
top: 0;
z-index: 100;
}
.breaking-bar .label {
background: #fff;
color: var(--accent);
padding: 2px 10px;
font-size: 11px;
border-radius: 2px;
white-space: nowrap;
flex-shrink: 0;
}
.ticker-wrap { overflow: hidden; flex: 1; }
.ticker {
display: inline-block;
white-space: nowrap;
animation: ticker 22s linear infinite;
}
@keyframes ticker {
0%   { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ── Site Header ── */
.site-header {
border-bottom: 3px double var(--border);
padding: 20px 24px 16px;
text-align: center;
}
.site-header .category-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
color: var(--accent);
text-transform: uppercase;
border-top: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
display: inline-block;
padding: 4px 14px;
margin-bottom: 0;
}
/* ── Hero / Headline Block ── */
.hero {
max-width: 860px;
margin: 0 auto;
padding:0;
}
.hero-eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 16px;
}
h1.headline {
font-size: clamp(26px, 4vw, 42px);
font-weight: 800;
line-height: 1.35;
color: var(--ink);
border-right: 5px solid var(--accent);
padding-right: 20px;
margin-bottom: 20px;
}
.deck {
font-size: 19px;
font-weight: 400;
color: var(--ink-mid);
line-height: 1.7;
border-bottom: 1px solid var(--border);
padding-bottom: 24px;
margin-bottom: 24px;
}
.byline-row {
display: flex;
align-items: center;
gap: 20px;
font-size: 13px;
color: var(--ink-faint);
flex-wrap: wrap;
}
.byline-row .date { color: var(--ink-light); font-weight: 600; }
.byline-row .separator { width: 4px; height: 4px; background: var(--border); border-radius: 50%; }
/* ── Hero Image ── */
.hero-image-wrap {
max-width: 860px;
margin: 28px auto 0;
padding: 0 24px;
}
.hero-image-placeholder {
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(135deg, #1a2a3a 0%, #0d1f2d 40%, #1a3040 100%);
border-radius: 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
position: relative;
overflow: hidden;
}
.hero-image-placeholder::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 60%, rgba(192,57,43,0.15) 0%, transparent 60%);
}
.ship-icon {
font-size: 64px;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
animation: sway 6s ease-in-out infinite;
}
@keyframes sway {
0%, 100% { transform: rotate(-2deg) translateY(0); }
50% { transform: rotate(2deg) translateY(-6px); }
}
.waves {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 60px;
overflow: hidden;
}
.waves svg { width: 100%; height: 100%; }
.image-caption {
font-size: 12.5px;
color: var(--ink-faint);
margin-top: 8px;
padding-right: 4px;
border-right: 2px solid var(--border);
padding-right: 8px;
}
/* ── Article Layout ── */
.article-body {
max-width: var(--col-width);
margin: 36px auto 0;
padding: 0 10px;
}
/* Drop Cap */
.article-body > p:first-of-type::first-letter {
font-size: 4.2em;
font-weight: 800;
float: right;
line-height: 0.8;
margin-left: 10px;
margin-top: 6px;
color: var(--accent);
}
.article-body p {
color: var(--ink-mid);
font-size: 17px;
}
h2.section-title {
font-size: 22px;
font-weight: 800;
color: var(--ink);
margin: 44px 0 16px;
position: relative;
padding-bottom: 10px;
}
h2.section-title::after {
content: '';
position: absolute;
bottom: 0; right: 0;
width: 48px; height: 3px;
background: var(--accent);
}
h3.sub-title {
font-size: 18px;
font-weight: 700;
color: var(--ink);
margin: 32px 0 12px;
}
/* ── Stat Cards ── */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin: 32px 0;
}
.stat-card {
background: var(--paper-warm);
border: 1px solid var(--border);
border-top: 3px solid var(--accent);
padding: 16px 14px;
text-align: center;
border-radius: 3px;
}
.stat-card .num {
font-size: 30px;
font-weight: 800;
color: var(--accent);
display: block;
line-height: 1;
margin-bottom: 6px;
}
.stat-card .lbl {
font-size: 12px;
color: var(--ink-light);
font-weight: 600;
}
/* ── Pullquote ── */
blockquote.pullquote {
border: none;
background: var(--paper-warm);
border-right: 5px solid var(--gold);
margin: 36px 0;
padding: 22px 24px;
font-size: 19px;
font-weight: 600;
color: var(--ink);
line-height: 1.65;
position: relative;
}
blockquote.pullquote::before {
content: '❝';
position: absolute;
top: -12px; right: 20px;
font-size: 48px;
color: var(--gold);
opacity: 0.4;
line-height: 1;
}
blockquote.pullquote cite {
display: block;
font-size: 13px;
font-weight: 400;
color: var(--ink-faint);
margin-top: 12px;
font-style: normal;
}
/* ── Timeline ── */
.timeline {
margin: 36px 0;
position: relative;
padding-right: 32px;
}
.timeline::before {
content: '';
position: absolute;
right: 10px; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--accent), var(--border));
}
.tl-item {
position: relative;
margin-bottom: 24px;
padding-right: 28px;
}
.tl-item::before {
content: '';
position: absolute;
right: -26px; top: 6px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--accent);
border: 2px solid var(--paper);
box-shadow: 0 0 0 2px var(--accent);
}
.tl-item.death::before { background: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.tl-date {
font-size: 12px;
font-weight: 800;
color: var(--accent);
letter-spacing: 0.06em;
margin-bottom: 4px;
}
.tl-text {
font-size: 15px;
color: var(--ink-mid);
line-height: 1.6;
}
/* ── Info Box ── */
.info-box {
background: var(--paper-mid);
border: 1px solid var(--border);
border-radius: 4px;
padding: 22px 24px;
margin: 32px 0;
}
.info-box h3 {
font-size: 15px;
font-weight: 800;
color: var(--ink);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.info-box ul {
list-style: none;
padding: 0;
}
.info-box ul li {
font-size: 14.5px;
color: var(--ink-mid);
padding: 6px 0;
border-bottom: 1px dotted var(--border);
display: flex;
gap: 10px;
align-items: baseline;
}
.info-box ul li:last-child { border-bottom: none; }
.info-box ul li::before { content: '▸'; color: var(--accent); flex-shrink: 0; }
/* ── Warning Banner ── */
.who-notice {
background: #fef9e7;
border: 1px solid #f0c030;
border-right: 4px solid #f0c030;
border-radius: 3px;
padding: 16px 20px;
margin: 30px 0;
font-size: 14.5px;
color: #5d4e00;
display: flex;
gap: 12px;
align-items: flex-start;
}
.who-notice .icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
/* ── Tags ── */
.tags {
margin: 48px 0 24px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
background: var(--paper-warm);
border: 1px solid var(--border);
color: var(--ink-light);
font-size: 12px;
font-weight: 600;
padding: 5px 12px;
border-radius: 2px;
letter-spacing: 0.04em;
}
.tag:first-child { background: var(--accent); color: #fff; border-color: var(--accent); }
/* ── Footer ── */
footer {
border-top: 3px double var(--border);
margin-top: 60px;
padding: 24px;
text-align: center;
font-size: 12.5px;
color: var(--ink-faint);
}
@media (max-width: 600px) {
h1.headline { font-size: 24px; }
.article-body > p:first-of-type::first-letter { font-size: 3.2em; }
.stat-grid { grid-template-columns: repeat(2, 1fr); }
  }
/* 222222222222222222222222222222222222222222222222222222222222222222222222 */
:root { --gap: 14px; }
* { box-sizing: border-box; margin: 0; padding: 0; }

.page { padding: 1.5rem 0; font-family: var(--font-sans); direction: rtl; }

.header { text-align: center; margin-bottom: 2rem; }
.header h1 { font-size: 22px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 6px; }
.header p { font-size: 14px; color: var(--color-text-secondary); }

.planet-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 2rem; padding: 1rem; background: var(--color-background-secondary); border-radius: var(--border-radius-lg); }
.planet-tag { font-size: 12px; color: var(--color-text-secondary); padding: 4px 10px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); }
.planet-tag span { color: var(--color-text-primary); font-weight: 500; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.5rem; justify-content: center; }
.tab { font-size: 13px; padding: 6px 12px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); background: var(--color-background-primary); color: var(--color-text-secondary); cursor: pointer; transition: all 0.15s; }
.tab:hover { background: var(--color-background-secondary); }
.tab.active { background: var(--color-background-info); color: var(--color-text-info); border-color: var(--color-border-info); }

.sign-card { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 1.25rem; display: none; }
.sign-card.visible { display: block; }

.sign-header { display: flex; align-items: center; gap: 14px; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 0.5px solid var(--color-border-tertiary); }
.sign-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.sign-title { }
.sign-title h2 { font-size: 18px; font-weight: 500; color: var(--color-text-primary); }
.sign-title p { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }

.ratings { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 1.25rem; }
.rating-item { background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 10px 12px; }
.rating-label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 6px; }
.stars { font-size: 14px; letter-spacing: 1px; }
.star-on { color: #E9A800; }
.star-off { color: var(--color-border-tertiary); filter: saturate(0); opacity: 0.4; }

.sections { display: grid; gap: 12px; }
.section { border-radius: var(--border-radius-md); padding: 14px 16px; border: 0.5px solid var(--color-border-tertiary); }
.section-title { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.section-text { font-size: 14px; color: var(--color-text-primary); line-height: 1.7; }

.lucky { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.lucky-item { font-size: 12px; padding: 4px 10px; border-radius: var(--border-radius-md); }
.lucky-num { background: var(--color-background-success); color: var(--color-text-success); }
.lucky-color { background: var(--color-background-warning); color: var(--color-text-warning); }
.lucky-day { background: var(--color-background-info); color: var(--color-text-info); }

.advice { margin-top: 1rem; padding: 12px 14px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); border-right: 3px solid var(--color-border-info); font-size: 13px; color: var(--color-text-secondary); line-height: 1.7; font-style: italic; }