/* ══════════════════════════════════════════════════════════════════════
هویت بصری سایت شهرداری اشنویه
پالت: سبز جنگلی (کوهستانهای اطراف شهر) + طلایی گندمزار + کاغذی گرم
تایپ: Lalezar برای عنوانها/برند، Vazirmatn برای متن و رابط کاربری
عنصر امضا: خطالرأس کوهستان (skyline) — اشنویه در دل کوهستان
══════════════════════════════════════════════════════════════════════ */
:root {
--forest-900: #12291E;
--forest-700: #1F4D3A;
--leaf-500: #4C9A6A;
--gold: #D9A441;
--gold-deep: #B5842E;
--paper: #F6F3EA;
--paper-card: #FFFFFF;
--ink: #1B231D;
--muted: #6B7A6E;
--line: #E4DFD1;
--urgent: #B23A2E;
--radius: 14px;
}
html, body { overflow-x: hidden; max-width: 100%; }
/* ── نوار خبر متحرک بالای سایت ─────────────────────────────────────────── */
.news-ticker-bar {
background: var(--forest-900); display: flex; align-items: center;
overflow: hidden; padding: 7px 0; direction: rtl;
}
.news-ticker-label {
flex: none; background: var(--gold, #d3a531); color: #12291e; font-weight: 800;
font-size: 11.5px; padding: 3px 12px; border-radius: 20px; margin: 0 14px;
}
.news-ticker-track {
flex: 1; overflow: hidden; white-space: nowrap; position: relative;
/* عمداً LTR: باید کپیهای بعدی نوار پشتِ سرِ هم و چسبیده بچینن تا نوار
پیوسته (بدونِ شکاف) بهنظر برسه، جهتِ حرکتِ واقعیِ نوار (چپ یا راست)
فقط با کیفریمِ CSS (`news-ticker-move`) کنترل میشه، نه با این
جهتبندی. اگر این بخش RTL بمونه، تمام کپیها چسبیده به لبهی راست
چیده میشن و چیزی برای جایگزینی وجود نداره — دقیقاً همون باگِ «یهو
همه خبرا میرن و دوباره ظاهر میشن». */
direction: ltr;
}
.news-ticker-scroll {
display: inline-flex; will-change: transform; color: #fff;
transition: opacity .25s ease;
animation: news-ticker-move var(--ticker-duration, 30s) linear infinite;
}
.news-ticker-content {
display: inline-flex; align-items: center; gap: 14px; padding-right: 40px; font-size: 13px; flex-shrink: 0;
direction: rtl; /* هر آیتم خودش داخلش دوباره RTL میشه تا متن فارسی و ترتیب کلمات درست باشه */
}
.news-ticker-content a { text-decoration: none; color: inherit; }
.news-ticker-content a:hover { text-decoration: underline; }
.news-ticker-content span { color: inherit; }
.news-ticker-sep { opacity: .4; margin: 0 2px; }
@keyframes news-ticker-move {
/* جهتِ حرکت عمداً برعکسِ حالتِ قبل: از راست به چپ نه، بلکه از چپ به راست
(طبقِ بازخوردِ کاربر با اسکرینشات — فلشِ سبز). چون کل نوار از کپیهای
کاملاً یکسان تشکیل شده (نگاه کن به ticker.js)، برعکسکردنِ جهتِ انیمیشن
با همین ساختارِ فعلیِ DOM (کپیها سمتِ چپِ LTR) کاملاً بیدرز کار میکنه؛
نیازی به تغییرِ چیدمانِ کپیها یا JS نبود. */
from { transform: translateX(var(--ticker-distance, -25%)); }
to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.news-ticker-scroll { animation: none; opacity: 1 !important; }
.news-ticker-track { overflow-x: auto; }
}
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
a, .form-control, .help-text-panel { overflow-wrap: anywhere; word-break: break-word; }
body {
margin: 0;
font-family: "Vazirmatn", Tahoma, sans-serif;
background: var(--paper);
color: var(--ink);
line-height: 1.85;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }
h1, h2, h3 {
font-family: "Vazirmatn", Tahoma, sans-serif;
font-weight: 800;
letter-spacing: 0;
}
.brand-name, .eyebrow-display {
font-family: "Vazirmatn", Tahoma, sans-serif;
font-weight: 800;
letter-spacing: 0;
}
.container { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.clock-weather-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; margin: 20px auto; align-items: start; }
.clock-weather-row > .card-block { margin-bottom: 0; min-width: 0; }
@media (max-width: 700px) { .clock-weather-row { grid-template-columns: 1fr; } }
.full-width-col { max-width: 900px; }
/* ── لایتباکس عکس (پاپآپ گالری تمامصفحه) ────────────────────────────── */
.lightbox-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 1000;
display: flex; align-items: center; justify-content: center;
}
.lightbox-backdrop[hidden] { display: none; }
.lightbox-content { max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; align-items: center; }
.lightbox-img { max-width: 92vw; max-height: 76vh; object-fit: contain; border-radius: 8px; }
.lightbox-caption { color: #fff; font-size: 13.5px; margin-top: 12px; text-align: center; max-width: 640px; }
.lightbox-counter { color: rgba(255,255,255,.6); font-size: 11.5px; margin-top: 6px; }
.lightbox-close {
position: absolute; top: 16px; left: 16px; width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,.12); color: #fff; border: none; font-size: 18px; cursor: pointer; z-index: 2;
}
.lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1;
}
.lightbox-prev { right: 16px; }
.lightbox-next { left: 16px; }
@media (max-width: 600px) {
.lightbox-nav { width: 36px; height: 36px; font-size: 20px; }
.lightbox-prev { right: 6px; } .lightbox-next { left: 6px; }
}
/* ── دکمه و پاپآپ «دربارهی تیم توسعه» ─────────────────────────────────── */
.about-team-link {
background: none; border: none; color: var(--gold, #d3a531); text-decoration: underline;
font-size: inherit; font-family: inherit; padding: 0; cursor: pointer;
}
.about-team-link:hover { opacity: .8; }
.about-team-backdrop {
padding: 20px; background: rgba(8, 16, 12, 0); opacity: 0; pointer-events: none;
transition: background .3s ease, opacity .3s ease;
}
.about-team-backdrop.open {
background: rgba(8, 16, 12, .6); opacity: 1; pointer-events: auto;
backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.about-team-card {
position: relative;
background: linear-gradient(165deg, rgba(34,83,63,.97), rgba(14,32,23,.98));
border: 1px solid rgba(217,164,65,.28); border-radius: 24px; padding: 38px 30px 30px;
max-width: 400px; width: 100%; max-height: 86vh; overflow-y: auto;
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
color: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
transform: translateY(16px) scale(.96); opacity: 0;
transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s ease;
}
.about-team-backdrop.open .about-team-card { transform: translateY(0) scale(1); opacity: 1; }
.about-team-close {
position: absolute; top: 14px; left: 14px; width: 32px; height: 32px; border-radius: 50%;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff;
display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px;
transition: background .18s ease, transform .25s ease;
}
.about-team-close:hover { background: rgba(255,255,255,.24); transform: rotate(90deg); }
.about-team-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; letter-spacing: .1em; color: var(--gold, #d9a441); font-weight: 700;
margin-bottom: 16px; opacity: .95;
}
.about-team-logo-ring {
width: 92px; height: 92px; border-radius: 50%; padding: 3px; margin-bottom: 14px;
background: linear-gradient(135deg, var(--gold, #d9a441), #f2dd94, var(--gold-deep, #b5842e));
box-shadow: 0 0 0 4px rgba(217,164,65,.14), 0 12px 26px rgba(0,0,0,.4);
}
.about-team-logo {
width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
border: 3px solid rgba(14,32,23,.97);
}
.about-team-card h3 { margin: 2px 0 0; font-size: 20px; font-weight: 800; color: #fff; }
.about-team-desc { color: rgba(255,255,255,.72); font-size: 13.5px; line-height: 2; margin: 10px 0 4px; }
.about-team-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; width: 100%; }
.about-team-contact {
display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 30px;
padding: 7px 16px 7px 7px; font-size: 12.5px; color: #fff; text-decoration: none;
word-break: break-word; transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.about-team-contact:hover {
background: rgba(217,164,65,.18); border-color: rgba(217,164,65,.45);
transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.28);
}
.about-team-contact-icon {
width: 27px; height: 27px; min-width: 27px; border-radius: 50%;
background: linear-gradient(135deg, var(--gold, #d9a441), var(--gold-deep, #b5842e));
color: #12291e; display: flex; align-items: center; justify-content: center; font-size: 12px;
}
/* ── صفحهی مکانهای دیدنی و تاریخچهی شهر ─────────────────────────────── */
.attractions-hero {
background: linear-gradient(135deg, var(--forest-900), var(--forest-700) 60%, #2f5b41);
color: #fff; padding: 70px 0 56px; text-align: center; position: relative; overflow: hidden;
}
.attractions-hero::after {
content: ""; position: absolute; inset: 0;
background: url('data:image/svg+xml;utf8,');
opacity: .5; pointer-events: none;
}
.attractions-hero h1 { font-size: 30px; margin: 10px 0 12px; }
.attractions-hero p { font-size: 14.5px; opacity: .85; max-width: 520px; margin: 0 auto; }
.attractions-hero-decor { position: absolute; top: 18px; left: 24px; font-size: 20px; opacity: .5; letter-spacing: 8px; }
.attractions-page { margin-top: 32px; }
.city-history-block { line-height: 2.1; }
.city-history-block .post-body { margin-top: 8px; }
.city-history-block h3 { color: var(--forest-700); margin: 20px 0 8px; font-size: 17px; }
.landmarks-section { margin-top: 34px; }
.landmarks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 14px; }
.landmark-card {
background: var(--paper-card); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
text-align: center; transition: transform .2s ease; overflow: hidden;
}
.landmark-card:hover { transform: translateY(-3px); }
.landmark-icon { font-size: 30px; margin-bottom: 8px; }
.landmark-card-img { margin: -18px -18px 12px; }
.landmark-card-img img { width: 100%; height: 130px; object-fit: cover; display: block; }
.landmark-card h3 { font-size: 14.5px; margin: 0 0 6px; }
.landmark-card p { font-size: 12px; color: var(--muted); line-height: 1.9; margin: 0; }
.cherry-feature {
margin: 36px 0; border-radius: 18px; padding: 34px 28px; text-align: center;
background: linear-gradient(135deg, #7a1f2b, #b5324a 55%, #d9536b);
color: #fff; position: relative; overflow: hidden;
}
.cherry-feature-text h2 { font-size: 24px; margin: 8px 0 12px; }
.cherry-feature-text p { font-size: 13.5px; max-width: 620px; margin: 0 auto; opacity: .92; line-height: 2; }
/* ── صفحهی «مکانهای شهر» (دستهبندی + نقشه + لیست) ────────────────────── */
.places-hero {
background: linear-gradient(135deg, var(--forest-900), var(--forest-700) 60%, #2f5b41);
color: #fff; padding: 56px 0 44px; text-align: center;
}
.places-hero h1 { font-size: 27px; margin: 8px 0 10px; }
.places-hero p { font-size: 13.5px; opacity: .85; }
.places-page { margin: 28px auto 50px; max-width: 1180px; }
.places-category-boxes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.place-cat-box {
display: flex; align-items: center; gap: 8px; background: var(--paper-card); border: 1px solid var(--line);
border-radius: 24px; padding: 9px 16px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.place-cat-box.active { background: var(--forest-700); color: #fff; border-color: var(--forest-700); }
.place-cat-icon { font-size: 15px; }
.place-cat-count {
background: rgba(0,0,0,.08); border-radius: 10px; font-size: 10.5px; padding: 1px 7px; margin-right: 2px;
}
.place-cat-box.active .place-cat-count { background: rgba(255,255,255,.2); }
.places-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; height: 640px; }
@media (max-width: 860px) { .places-layout { grid-template-columns: 1fr; height: auto; } }
.places-map { border-radius: var(--radius); overflow: hidden; height: 100%; min-height: 340px; }
.places-list { overflow-y: auto; height: 100%; display: flex; flex-direction: column; gap: 10px; padding-left: 4px; }
@media (max-width: 860px) { .places-list { height: 420px; } }
.place-list-item {
display: flex; gap: 12px; background: var(--paper-card); border: 1px solid var(--line);
border-radius: 12px; padding: 10px; text-decoration: none; color: inherit; transition: box-shadow .2s ease;
}
.place-list-item:hover { box-shadow: 0 6px 16px rgba(18,41,30,.1); }
.place-list-item img { width: 66px; height: 66px; border-radius: 8px; object-fit: cover; flex: none; }
.place-list-noimg {
width: 66px; height: 66px; border-radius: 8px; background: #eef1ec; display: flex;
align-items: center; justify-content: center; font-size: 22px; flex: none;
}
.place-list-body strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.place-list-cat { font-size: 10.5px; color: var(--muted); }
.place-list-body p { font-size: 11.5px; color: var(--muted); margin: 4px 0 0; line-height: 1.7; }
.place-marker { font-size: 22px; cursor: pointer; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.place-popup { font-size: 12.5px; }
.place-popup a { color: var(--forest-700); font-weight: 700; }
/* ── صفحهی پروژههای عمرانی شهر ────────────────────────────────────────── */
.project-status-section { margin-bottom: 34px; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 14px; }
.project-card {
display: block; background: var(--paper-card); border: 1px solid var(--line); border-radius: 14px;
overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease;
}
.project-card:hover { box-shadow: 0 6px 18px rgba(18,41,30,.12); transform: translateY(-2px); }
.project-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.project-card-body { padding: 16px; }
.project-card-body h3 { margin: 0 0 6px; font-size: 15px; }
.project-card-address { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.project-card-body p { font-size: 12.5px; color: var(--muted); line-height: 1.9; margin: 0 0 10px; }
.project-progress-track { background: rgba(18,41,30,.08); border-radius: 20px; height: 9px; overflow: hidden; margin-bottom: 6px; }
.project-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold, #d3a531), #e8c366); border-radius: 20px; }
.project-progress-label { font-size: 11px; color: var(--muted); }
/* ── خط زمانی پروژه (صفحهی جزئیات پروژهی عمرانی) ────────────────────── */
.project-timeline {
display: flex; overflow-x: auto; gap: 0; padding: 26px 4px 10px; margin: 18px 0 26px;
-webkit-overflow-scrolling: touch;
}
.project-timeline-step {
flex: 1 0 130px; min-width: 130px; text-align: center; position: relative; padding: 0 6px;
}
.project-timeline-step::before {
content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px;
background: var(--line); z-index: 0;
}
.project-timeline-step:first-child::before { display: none; }
.project-timeline-step.is-reached::before { background: var(--leaf-500); }
.project-timeline-dot {
width: 32px; height: 32px; border-radius: 50%; background: var(--paper-card); border: 3px solid var(--line);
display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; position: relative; z-index: 1;
color: var(--muted); font-size: 13px;
}
.project-timeline-step.is-reached .project-timeline-dot { background: var(--leaf-500); border-color: var(--leaf-500); color: #fff; }
.project-timeline-label { font-size: 12px; font-weight: 700; color: var(--ink); display: block; }
.project-timeline-step:not(.is-reached) .project-timeline-label { color: var(--muted); font-weight: 500; }
.project-timeline-date { font-size: 10.5px; color: var(--muted); display: block; margin-top: 2px; direction: ltr; }
.project-timeline-note { font-size: 10.5px; color: var(--muted); display: block; margin-top: 2px; }
/* ── گالریِ قبل/حین/بعد از اجرا ─────────────────────────────────────────── */
.project-phase-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin-top: 10px; }
.project-phase-col { background: var(--paper-card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.project-phase-title { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; margin-bottom: 10px; color: var(--forest-700); }
.project-phase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.project-phase-grid img {
width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; cursor: zoom-in;
}
.project-phase-empty { font-size: 12px; color: var(--muted); }
/* ── جدولِ خطزمانی و گالری در فرمِ پنلِ پروژه (project_form.html) ──────── */
.panel-stage-table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; }
.panel-stage-table th, .panel-stage-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; text-align: right; }
.panel-stage-table th { color: var(--muted); font-weight: 700; font-size: 12px; }
.panel-stage-table input[type="text"] { max-width: 150px; }
.panel-photo-row { display: grid; grid-template-columns: 140px 1fr 1fr 80px 40px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.panel-photo-row:last-of-type { border-bottom: none; }
.panel-photo-row-delete { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
/* ── مرکز شفافیت (بخش ۹): جدول عمومی، نوارِ درصدیِ بودجه، وضعیتِ مناقصه ─── */
.transparency-scroll-x { overflow-x: auto; }
.transparency-table { width: 100%; border-collapse: collapse; }
.transparency-table th { background: var(--paper); padding: 10px 12px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--line); white-space: nowrap; }
.transparency-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.transparency-table tr:last-child td { border-bottom: none; }
.budget-bars { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.budget-bar-row { display: grid; grid-template-columns: 160px 1fr; grid-template-areas: "label value" "track track"; gap: 4px 12px; align-items: center; }
.budget-bar-label { grid-area: label; font-size: 13px; font-weight: 700; }
.budget-bar-value { grid-area: value; font-size: 11.5px; color: var(--muted); text-align: left; direction: ltr; }
.budget-bar-track { grid-area: track; height: 10px; border-radius: 6px; background: var(--paper); overflow: hidden; }
.budget-bar-fill { height: 100%; border-radius: 6px; }
.budget-bar-fill.income { background: var(--leaf-500); }
.budget-bar-fill.expense { background: var(--gold, #b5842e); }
@media (max-width: 560px) { .budget-bar-row { grid-template-columns: 1fr; grid-template-areas: "label" "value" "track"; } .budget-bar-value { text-align: right; } }
.tender-status-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--paper); color: var(--muted); }
.tender-status-badge.status-open { background: rgba(58,138,79,.12); color: var(--leaf-500); }
.tender-status-badge.status-awarded { background: rgba(181,132,46,.15); color: var(--gold, #b5842e); }
.tender-status-badge.status-cancelled { background: rgba(190,60,60,.12); color: #be3c3c; }
.transparency-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.transparency-filters select.form-control {
background: var(--paper-card); margin-bottom: 0; cursor: pointer;
}
/* ── جعبهی جستجوی اخبار (بازطراحیشده، حرفهایتر) ──────────────────────── */
.news-search-box {
display: flex; align-items: center; gap: 8px; background: var(--paper-card);
border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 8px 6px 6px;
max-width: 520px; margin: 16px 0 22px; transition: border-color .15s ease, box-shadow .15s ease;
}
.news-search-box:focus-within { border-color: var(--leaf-500); box-shadow: 0 0 0 3px rgba(58,138,79,.12); }
.news-search-icon { color: var(--muted); font-size: 14px; margin-inline-start: 10px; }
.news-search-box input[type="text"] {
flex: 1; border: none; outline: none; background: transparent; font-size: 14px;
font-family: inherit; color: var(--ink); min-width: 0;
}
.news-search-box input[type="text"]::placeholder { color: var(--muted); }
.news-search-clear {
display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
border-radius: 50%; color: var(--muted); font-size: 11px; flex-shrink: 0; text-decoration: none;
}
.news-search-clear:hover { background: var(--paper); color: var(--ink); }
.news-search-box button[type="submit"] {
border: none; border-radius: 999px; background: var(--forest-700); color: #fff; font-weight: 700;
font-size: 13px; padding: 9px 20px; cursor: pointer; flex-shrink: 0; transition: background .15s ease;
}
.news-search-box button[type="submit"]:hover { background: var(--leaf-500); }
@media (max-width: 480px) {
.news-search-box { max-width: 100%; }
.news-search-box button[type="submit"] { padding: 9px 14px; }
}
/* ── داشبورد عمومی «اشنویه در یک نگاه» ─────────────────────────────────── */
.glance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.glance-card {
background: var(--paper-card); border: 1px solid var(--line); border-radius: 16px;
padding: 22px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.glance-icon { font-size: 22px; color: var(--gold, #b5842e); margin-bottom: 6px; }
.glance-number { font-size: 30px; font-weight: 800; color: var(--forest-700); line-height: 1.1; }
.glance-number small { font-size: 15px; font-weight: 600; color: var(--muted); }
.glance-label { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.glance-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
@media (max-width: 720px) { .panel-photo-row { grid-template-columns: 1fr 1fr; } }
.attractions-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 14px;
}
.attraction-card {
display: block; background: var(--paper-card); border: 1px solid var(--line); border-radius: 16px;
overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
}
.attraction-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(18,41,30,.14); }
.attraction-card-img { position: relative; aspect-ratio: 4 / 3; background: #eef1ec; }
.attraction-card-img img { width: 100%; height: 100%; object-fit: cover; }
.attraction-card-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 44px; }
.attraction-card-badge {
position: absolute; top: 10px; right: 10px; background: rgba(18,41,30,.75); color: #fff;
font-size: 11px; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(3px);
}
.attraction-card-body { padding: 16px; }
.attraction-card-body h3 { margin: 0 0 6px; font-size: 16px; }
.attraction-card-body p { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); line-height: 1.9; }
.attraction-card-address { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.attraction-card-cta { font-size: 12px; font-weight: 700; color: var(--forest-700); }
a { color: inherit; text-decoration: none; }
.eyebrow {
display: inline-block;
font-family: "Vazirmatn", sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--leaf-500);
text-transform: uppercase;
padding-bottom: 6px;
margin-bottom: 12px;
border-bottom: 2px solid var(--gold);
}
.card-block > .eyebrow { display: block; width: fit-content; }
/* ── هدر ── */
.site-header {
background: var(--forest-900);
border-bottom: 3px solid var(--gold);
position: sticky; top: 0; z-index: 50;
}
.header-inner {
display: flex; justify-content: flex-start; align-items: center; position: relative;
padding: 14px 18px; gap: 14px; flex-wrap: nowrap; min-width: 0;
}
/* min-width: ۹۰px یک ضامنِ اطمینانِ اضافهست — یعنی حتی اگه یهجایِ دیگه
یا یه مرورگرِ عجیب باعث بشه این بلاک باز هم جمع بشه، لااقل ایموجی/نشانِ
شهرداری همیشه دیده میمونه و نامِ سایت کاملاً به صفر نمیرسه. */
.brand { display: flex; align-items: center; gap: 10px; min-width: 90px; flex-shrink: 1; }
.brand-emblem {
width: 40px; height: 40px; border-radius: 50%;
background: var(--forest-700); color: var(--gold);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
overflow: hidden;
}
.brand-emblem-img img { width: 100%; height: 100%; object-fit: cover; }
.brand-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.brand-name { color: #fff; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: 11px; color: #cfe0d3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-nav {
display: flex; gap: 4px; flex-shrink: 0;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 999px;
padding: 5px;
}
.main-nav a {
position: relative; color: #e9f2ec; font-size: 14px; font-weight: 500;
padding: 9px 18px; white-space: nowrap; border-radius: 999px;
transition: background .2s ease, color .2s ease;
}
.main-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.main-nav a.active { background: var(--gold); color: var(--forest-900) !important; font-weight: 700; }
/* ── لینک حساب کاربری شهروند ─────────────────────────────────────────── */
/* از پچِ ۴۰ به بعد: این دیگه بخشی از ردیفِ افقیِ لینکها نیست. توی حالتِ
دسکتاپِ واقعاً پهن (بالایِ ۱۱۸۰px)، یک دراپداونِ جداست که با همون
دکمهی همبرگر باز/بسته میشه (چون main-nav با کلاسِ open کنترل میشه،
نیازی به تغییرِ جاواسکریپت نبود). توی حالتِ منویِ کشویی (زیرِ ۱۱۸۰px)
این استایل توسطِ مدیاکوئریِ پایینتر بازنویسی میشه و بهشکلِ ردیفِ
ادغامشدهی همیشگی برمیگرده. */
.account-nav {
position: absolute; top: calc(100% + 10px); left: 14px; min-width: 230px;
background: #fff; border-radius: 14px; box-shadow: 0 14px 32px rgba(0,0,0,.18);
border: 1px solid var(--line); padding: 10px; z-index: 65;
display: none; flex-direction: column; align-items: stretch; gap: 6px;
}
.main-nav.open .account-nav { display: flex; }
/* روی کارتِ سفیدِ دراپداون، رنگهای روشنِ مخصوصِ پسزمینهی تیرهی هدر
دیگه جواب نمیده — اینجا از رنگهای تیره/روشنِ متنِ عادیِ سایت استفاده شد. */
.account-nav .account-link,
.account-nav .bell-link {
color: var(--text); background: var(--forest-50, #eef5f0);
}
.account-nav .account-link:hover,
.account-nav .bell-link:hover { background: #e3ede6; color: var(--forest-900); }
.account-nav .pwa-install-btn { justify-content: center; }
/* ── دکمهی نصبِ اپلیکیشن (بخش ۱۴: PWA واقعی) ─────────────────────────── */
.pwa-install-btn {
display: flex; align-items: center; gap: 6px; color: #1F4D3A; font-size: 12.5px; font-weight: 700;
padding: 7px 14px; border-radius: 999px; background: var(--gold); border: none; cursor: pointer;
white-space: nowrap; transition: filter .15s ease;
}
.pwa-install-btn:hover { filter: brightness(1.08); }
/* ── زنگولهی اعلانها (بخش ۱۳) ────────────────────────────────────────── */
.bell-link {
position: relative; display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%; color: #e9f2ec; font-size: 15px;
background: rgba(255,255,255,.08); text-decoration: none; flex-shrink: 0;
transition: background .15s ease;
}
.bell-link:hover { background: rgba(255,255,255,.18); color: #fff; }
.bell-badge {
position: absolute; top: -3px; left: -3px; min-width: 16px; height: 16px; padding: 0 3px;
background: #d64545; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px;
text-align: center; border-radius: 999px; border: 2px solid var(--forest-900);
}
.account-link {
display: flex; align-items: center; gap: 6px; color: #e9f2ec; font-size: 12.5px; font-weight: 600;
padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); text-decoration: none;
white-space: nowrap; transition: background .15s ease;
}
.account-link:hover { background: rgba(255,255,255,.18); color: #fff; }
.account-link i { font-size: 15px; }
.account-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
/* ── گروههای ناوبری بر اساس نوع کاربر (ساکنان/گردشگران/کسبوکار) ────────── */
.nav-group { position: relative; }
.nav-group-toggle {
display: flex; align-items: center; gap: 6px; color: #e9f2ec; font-size: 14px; font-weight: 500;
padding: 9px 16px; white-space: nowrap; border-radius: 999px; background: none; border: none;
cursor: pointer; font-family: inherit; transition: background .2s ease, color .2s ease;
}
.nav-group-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-caret { font-size: 10px; transition: transform .2s ease; opacity: .8; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-group-panel {
position: absolute; top: calc(100% + 10px); right: 0; min-width: 240px;
background: #fff; border-radius: 14px; box-shadow: 0 14px 32px rgba(0,0,0,.18);
padding: 8px; display: none; flex-direction: column; gap: 2px; z-index: 60;
border: 1px solid var(--line);
}
.nav-group.open .nav-group-panel { display: flex; }
.nav-group-panel a {
color: var(--text); font-size: 13.5px; font-weight: 500; padding: 10px 12px;
border-radius: 9px; white-space: nowrap; transition: background .15s ease;
}
.nav-group-panel a:hover { background: var(--forest-50, #eef5f0); color: var(--forest-700); }
/* از پچِ ۴۰ به بعد این دکمه همیشه دیده میشه (نه فقط زیرِ یه بریکپوینت)
چون توی حالتِ دسکتاپِ پهن هم مسئولِ بازکردنِ دراپداونِ نصب/اعلان/حساب
کاربریه، نه فقط منویِ موبایل. */
.nav-toggle { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; flex-shrink: 0; }
.nav-toggle span { width: 22px; height: 2px; background: #fff; border-radius: 2px; display: block; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* دکمهی جستجو و دکمهی همبرگر با هم یک گروهِ کنارِهماند و با
margin-inline-start:auto به انتهایِ هدر چسبیدهن — نه پخششده با
فاصلهی مساوی وسطِ هدر (مشکلِ قبلی). */
.header-controls { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex-shrink: 0; }
/* ── جعبهی جستجوی سراسری (بخش ۱۱) — دکمهی آیکون توی هدر + پنلِ کشویی
دقیقاً همالگو با .nav-group-panel (باز با کلیک، بسته با کلیکِ بیرون) ── */
.nav-search-toggle {
display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
color: #e9f2ec; font-size: 16px; background: rgba(255,255,255,.08); border: none;
border-radius: 50%; cursor: pointer; flex-shrink: 0; transition: background .15s ease;
}
.nav-search-toggle:hover { background: rgba(255,255,255,.18); color: #fff; }
.nav-search-box {
position: absolute; top: calc(100% + 10px); left: 14px; width: min(360px, calc(100% - 28px));
background: #fff; border-radius: 14px; box-shadow: 0 14px 32px rgba(0,0,0,.18);
padding: 10px; display: none; z-index: 70; border: 1px solid var(--line);
}
.nav-search-box.open { display: block; }
.nav-search-box form { display: flex; gap: 6px; }
.nav-search-box input[type="search"] {
flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px;
padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--text);
}
.nav-search-box button[type="submit"] {
width: 40px; flex-shrink: 0; border: none; border-radius: 10px; background: var(--forest-700, #1F4D3A);
color: #fff; cursor: pointer; font-size: 14px;
}
.nav-search-box button[type="submit"]:hover { background: var(--forest-900, #163a2b); }
/* ── بریکپوینتِ منویِ کشویی (هَمبرگر) ────────────────────────────────────
این بریکپوینت دقیقاً روی ۱۱۸۰px تنظیم شده — همون سقفِ max-width خودِ
`.container` (که `header-inner` هم عضوشه)، پس دسکتاپِ واقعی (حتی
مانیتورهایِ خیلی عریض) همیشه دقیقاً همون ۱۱۳۶px عرضِ واقعی رو داره و
رفتارش عوض نمیشه.
از پچِ ۴۰ به بعد، زیرِ همین بریکپوینت، دو تغییر جدا از هم هست:
۱) main-nav (اخبار/ساکنان/گردشگران/کسبوکار) از حالتِ افقیِ پیلی به
منویِ کشویی/آکاردئون تبدیل میشه (بالایِ ۱۱۸۰px این چهارتا همیشه
بهشکلِ افقی و در ردیفِ اصلیِ هدر دیده میشن — دقیقاً مثلِ قبل از
پچِ ۳۹).
۲) account-nav (دکمهی نصب/زنگوله/حساب کاربری) که بالایِ ۱۱۸۰px یک
دراپداونِ سفیدِ جداست (نگاه کن به تعریفِ پایهش بالاتر)، اینجا
دوباره بهشکلِ ردیفِ ادغامشدهی داخلِ همون کشو برمیگرده — دقیقاً
همون چیزی که تا الان بود و کاربر گفت مشکلی نداره. ── */
@media (max-width: 1180px) {
.header-inner { flex-wrap: wrap; }
.main-nav {
position: absolute; top: 100%; right: 14px; left: 14px; width: auto;
background: var(--forest-900); border: 1px solid rgba(255,255,255,.12);
flex-direction: column; align-items: stretch; gap: 4px; max-height: 0; overflow: hidden;
transition: max-height .3s ease, padding .3s ease; border-radius: 14px;
padding: 0 6px; box-shadow: 0 12px 28px rgba(0,0,0,.35); margin-top: 8px;
}
.main-nav.open { max-height: 75vh; padding: 6px; overflow-y: auto; }
.main-nav > a {
padding: 14px 16px; display: block; width: 100%; border-radius: 10px;
}
.main-nav > a.active { background: var(--gold); }
/* توی این حالت، دراپداونها بهشکل آکاردئون (باز/بسته با کلیک) داخل همون منو نمایش داده میشن */
.nav-group-toggle { width: 100%; padding: 14px 16px; justify-content: space-between; }
.nav-group-panel {
position: static; box-shadow: none; border: none; background: rgba(255,255,255,.04);
border-radius: 10px; margin: 0 4px 4px; padding: 4px;
}
.nav-group-panel a { color: #e9f2ec; }
.nav-group-panel a:hover { background: rgba(255,255,255,.1); color: #fff; }
/* دکمهی نصب/زنگوله/حسابِ کاربری، وقتی داخلِ منویِ کشویی هستن، بهشکلِ
ردیفِ جدا و خواناتر در بالایِ لیستِ لینکها نمایش داده میشن، نه
چسبیده به گوشه — تا هم زیبا بمونه هم دکمهی نصب حذف/مخفی نشه.
(اینجا کاملاً استایلِ پایهی دراپداونِ سفیدِ دسکتاپ رو خنثی میکنیم) */
.account-nav {
position: static; display: flex; flex-wrap: wrap; justify-content: flex-start;
width: 100%; min-width: 0; margin: 0 0 6px; padding: 6px 4px 10px;
border: none; border-bottom: 1px solid rgba(255,255,255,.12); border-radius: 0;
box-shadow: none; background: transparent;
}
.account-nav .account-link,
.account-nav .bell-link { color: #e9f2ec; background: rgba(255,255,255,.08); }
.account-nav .account-link:hover,
.account-nav .bell-link:hover { background: rgba(255,255,255,.18); color: #fff; }
.pwa-install-btn { flex: 1 1 auto; justify-content: center; }
.account-link { flex: 1 1 auto; justify-content: center; }
}
/* ── پیامها ── */
.alert { padding: 10px 14px; margin-top: 12px; border-radius: var(--radius); background: #e6f2ea; color: var(--forest-700); border: 1px solid var(--line); }
/* ── نقشه (هیرو) ── */
.map-section { position: relative; background: linear-gradient(165deg, var(--forest-700), var(--forest-900)); }
.city-map { width: 100%; height: 62vh; max-height: 540px; min-height: 380px; background: linear-gradient(165deg, var(--forest-700), var(--forest-900)); transition: height .3s ease, max-height .3s ease; }
.city-map.map-failed { height: 260px; max-height: 260px; min-height: 220px; }
.city-map.map-loading { display: flex; align-items: center; justify-content: center; }
/* صفحهی اختصاصی نقشه (تمامصفحه، نه فقط بخشی از صفحهی اصلی) */
.map-section-full .city-map { height: calc(100vh - 250px); max-height: none; min-height: 480px; }
@media (max-width: 760px) {
.map-section-full .city-map { height: calc(100vh - 320px); min-height: 420px; }
}
.city-map.map-loading::before {
content: ""; width: 42px; height: 42px; border-radius: 50%;
border: 3px solid rgba(255,255,255,.25); border-top-color: var(--gold);
animation: map-spin 0.9s linear infinite;
}
@keyframes map-spin { to { transform: rotate(360deg); } }
.map-fallback {
height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
color: #cfe0d3; text-align: center; padding: 24px; gap: 10px;
}
.map-fallback-icon { font-size: 40px; }
.map-fallback p { max-width: 320px; font-size: 14px; line-height: 1.9; }
.map-fallback-retry {
background: var(--gold, #c9a34e); color: var(--forest-900); border: none;
border-radius: 20px; padding: 8px 22px; font-size: 13px; font-weight: 700;
cursor: pointer; font-family: inherit;
}
/* خط کوچک بالای نقشه: بعد از چند لحظه خودش محو میشود تا مزاحم خواندن نقشه نباشد */
.map-caption {
position: absolute; top: 10px; right: 14px; z-index: 5;
background: rgba(18, 41, 30, .72); color: #fff;
font-size: 12.5px; font-weight: 600; padding: 6px 14px;
border-radius: 999px; border: 1px solid rgba(255,255,255,.15);
max-width: 86%; pointer-events: none;
opacity: 1; transition: opacity 1.1s ease;
}
.map-caption.map-caption-hidden { opacity: 0; }
@media (max-width: 760px) {
.map-caption { font-size: 11.5px; padding: 5px 12px; top: 8px; }
}
/* ── نوار کنترلهای نقشه (زیر خودِ نقشه، نه روی آن) ────────────────────── */
.map-controls-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
.map-controls-bar { padding: 10px 24px; }
}
.map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.category-filters { display: flex; gap: 5px; flex-wrap: wrap; }
/* پچ ۳۲ — بخش ۱۰: راهنمای رنگهای لایهی «پروژههای عمرانی»/«گزارشهای شهری»
روی نقشهی جامعِ شهر؛ فقط وقتی حداقل یکی از این دو لایه روشن باشه دیده
میشه (با کلاسِ hidden کنترل میشه، دقیقاً همالگو با .issues-map-legend). */
.gis-layer-legend {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-size: 12px; color: var(--muted); width: 100%; margin-top: 6px;
}
.gis-layer-legend.hidden { display: none; }
.cat-btn {
background: #ffffffee; border: 1px solid var(--line); border-radius: 18px;
padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.cat-btn.active { background: var(--forest-700); color: #fff; border-color: var(--forest-700); }
.layer-toggle-btn {
display: inline-flex; align-items: center; gap: 5px;
background: #f3f6f4; border: 1px solid var(--line); border-radius: 18px;
padding: 6px 12px 6px 10px; font-size: 12px; font-weight: 600; color: var(--forest-900);
cursor: pointer; font-family: inherit; line-height: 1.3; white-space: nowrap;
transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease;
}
.layer-toggle-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(18,41,30,.12); }
.layer-toggle-btn:active { transform: translateY(0); }
.layer-toggle-btn .sat-icon { display: inline-block; font-size: 13px; transition: transform .3s ease; }
.layer-toggle-btn.active {
background: linear-gradient(135deg, var(--forest-700), var(--forest-900));
color: #fff; border-color: transparent;
box-shadow: 0 2px 10px rgba(18,41,30,.32), 0 0 0 2px rgba(80,160,110,.16);
}
.layer-toggle-btn.active .sat-icon { transform: rotate(-14deg) scale(1.1); animation: sat-pulse 2.2s ease-in-out infinite; }
@keyframes sat-pulse {
0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
50% { filter: drop-shadow(0 0 4px rgba(255,255,255,.85)); }
}
.satellite-hint {
background: #fff4f2; color: #7a2d1f; font-size: 11px;
border: 1px solid #e3b7ab; border-radius: 10px; padding: 5px 10px;
max-width: 260px; text-align: right; line-height: 1.6;
}
/* باکس «قفل حرکت با دو انگشت» — کنار بقیهی کنترلها، زیر نقشه */
.gesture-lock-box {
display: inline-flex; align-items: center; gap: 6px;
background: #f3f6f4; border: 1px solid var(--line); border-radius: 18px;
padding: 6px 12px; cursor: pointer; user-select: none;
font-size: 11px; color: var(--forest-900); font-weight: 600;
line-height: 1.3; white-space: nowrap;
}
.gesture-lock-box input { position: absolute; opacity: 0; width: 0; height: 0; }
.gesture-lock-switch {
position: relative; width: 32px; height: 18px; border-radius: 999px;
background: #c7bfae; transition: background .25s ease; flex-shrink: 0; overflow: hidden;
}
.gesture-lock-switch::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
border-radius: 50%; background: #fff; transition: transform .25s ease;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.gesture-lock-box input:checked + .gesture-lock-switch { background: var(--forest-700); }
.gesture-lock-box input:checked + .gesture-lock-switch::after { transform: translateX(14px); }
.gesture-lock-box input:not(:checked) + .gesture-lock-switch::after { transform: translateX(0); }
@media (max-width: 760px) {
.gesture-lock-box { font-size: 10.5px; padding: 6px 10px; bottom: 8px; }
.gesture-lock-label { max-width: 90px; line-height: 1.4; }
}
.poi-marker { font-size: 22px; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.poi-panel {
position: absolute; top: 0; left: 0; height: 100%; width: 320px; max-width: 90%;
background: #fff; box-shadow: 4px 0 16px rgba(0,0,0,.15); padding: 18px;
overflow-y: auto; z-index: 7;
}
.poi-panel.hidden { display: none; }
.poi-panel-close { position: absolute; top: 10px; left: 10px; background: none; border: none; font-size: 18px; cursor: pointer; }
.poi-panel-img { width: 100%; border-radius: var(--radius); margin-bottom: 10px; }
.poi-cat { color: var(--muted); font-size: 13px; }
.poi-directions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.district-poi-list { list-style: none; padding: 0; }
.district-poi-list li { padding: 8px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.district-poi-list li:hover { background: #f2f5ef; }
/* ── دیوایدر کوهستان (عنصر امضا) ── */
.skyline-divider { line-height: 0; margin-top: -2px; }
.skyline-divider img { width: 100%; height: 70px; display: block; object-fit: cover; }
/* ── محتوای اصلی ── */
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin: 6px auto 40px; }
.two-col > .col-main, .two-col > .col-side { min-width: 0; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.card-block {
background: var(--paper-card); border-radius: var(--radius); padding: 22px;
margin-bottom: 22px; border: 1px solid var(--line); min-width: 0; box-sizing: border-box;
}
.card-block h2 { font-size: 22px; margin: 0 0 6px; color: var(--forest-700); }
.card-block > p.muted { color: var(--muted); }
.announcement-list { list-style: none; padding: 0; margin: 0; }
.announcement-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.announcement-list li:last-child { border-bottom: none; }
.announcement-list li.urgent strong { color: var(--urgent); }
.announcement-list li.urgent strong::before { content: "● "; }
.announcement-link {
display: flex; align-items: center; gap: 20px;
color: inherit; text-decoration: none;
}
.announcement-img {
display: block; flex: 0 0 180px; width: 180px; height: 180px;
object-fit: contain; object-position: center;
background: #eef1ec; border-radius: 12px;
}
.announcement-body { min-width: 0; }
.announcement-body strong { display: block; margin-bottom: 6px; font-size: 16px; }
.announcement-body p { margin: 0; }
@media (max-width: 760px) {
.announcement-link { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
.announcement-img { flex-basis: auto; width: 220px; height: 220px; margin: 0 auto; }
}
/* ── اخبار: چیدمان ویژه (یک خبر بزرگ + بقیه کوچک) ── */
.news-feature-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 700px) { .news-feature-grid { grid-template-columns: 1fr; } }
/* ── اسلایدر خودکار اخبار (۵ خبر آخر) ──────────────────────────────────── */
.news-carousel { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; margin-bottom: 20px; }
.nc-track { display: flex; transition: transform .5s ease; }
.nc-slide { min-width: 100%; position: relative; display: block; aspect-ratio: 16 / 9; background: #111; }
.nc-slide img { width: 100%; height: 100%; object-fit: cover; background: #111; display: block; }
.nc-slide-overlay {
position: absolute; inset: auto 0 0 0; padding: 40px 18px 16px;
background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
color: #fff;
}
.nc-slide-overlay h3 { font-size: 17px; margin: 0 0 6px; font-family: "Vazirmatn"; font-weight: 700; }
.nc-slide-overlay p { font-size: 12.5px; margin: 0; opacity: .88; max-width: 640px; }
.nc-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
background: rgba(0,0,0,.45); color: #fff; font-size: 20px; line-height: 1;
}
.nc-prev { right: 12px; }
.nc-next { left: 12px; }
.nc-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 3; }
.nc-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; }
.nc-dots span.active { background: #fff; }
/* ── شبکهی اخبار (آرشیو زیر اسلایدر + صفحهی اخبار) ─────────────────── */
.news-grid, .news-archive-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 16px;
}
.news-card-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #eef1ec; }
.announcement-card-grid img { aspect-ratio: 1 / 1; object-fit: contain; }
.news-card-grid .news-card-body p { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-date { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.news-see-all-btn, .see-all { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--forest-700); }
.news-card { background: var(--paper-card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); display: block; }
.news-card img { width: 100%; object-fit: cover; background: #eef1ec; }
.news-card.featured img { height: 220px; }
.news-card-body { padding: 14px 16px; }
.news-card.featured .news-card-body h3 { font-size: 20px; margin: 0 0 8px; }
.news-card-body h3 { font-size: 15px; margin: 0 0 6px; font-family: "Vazirmatn"; font-weight: 700; }
.news-card-body p { font-size: 13px; color: var(--muted); margin: 0; }
.news-side-list { display: flex; flex-direction: column; gap: 12px; }
.news-card.compact { display: flex; flex-direction: row-reverse; align-items: stretch; }
.news-card.compact img { width: 90px; height: 90px; flex-shrink: 0; object-fit: cover; }
.news-card.compact .news-card-body { padding: 10px 14px; display: flex; align-items: center; }
.pagination-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; font-size: 13px; }
.pagination-nav a { color: var(--forest-700); font-weight: 700; }
.urgent-tag { background: var(--urgent, #c0392b); color: #fff; font-size: 10.5px; border-radius: 6px; padding: 2px 7px; }
.news-card.urgent-card { border-color: var(--urgent, #c0392b); }
.news-card.compact .news-card-body h3 { margin: 0; font-size: 13.5px; }
.see-all { display: inline-block; margin-top: 16px; color: var(--forest-700); font-weight: 700; border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
/* ── نتیجههای جستجوی سراسری (بخش ۱۱) ────────────────────────────────── */
.search-results-group { margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.search-results-group:last-child { border-bottom: none; }
.search-results-group h2 {
font-size: 16px; display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
color: var(--forest-700);
}
.search-result-list { display: flex; flex-direction: column; gap: 4px; }
.search-result-item {
display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px;
transition: background .15s ease;
}
.search-result-item:hover { background: var(--paper); }
.search-result-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.search-result-snippet { font-size: 12.5px; color: var(--muted); }
.empty-state { text-align: center; padding: 40px 10px; }
.empty-state p { margin: 4px 0; }
/* ── مرکز اطلاعرسانی شهروند (بخش ۱۳) ──────────────────────────────────── */
.notif-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.notif-item {
display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid var(--line);
border-radius: 12px; padding: 14px 16px; position: relative; transition: background .15s ease;
}
.notif-item:hover { background: var(--paper); }
.notif-item.unread { border-color: var(--gold); background: #fffdf5; }
.notif-icon {
width: 36px; height: 36px; border-radius: 50%; background: var(--forest-700); color: #fff;
display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px;
}
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notif-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.notif-snippet { font-size: 12.5px; color: var(--muted); }
.notif-time { font-size: 11px; color: var(--muted); }
.notif-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 4px; }
/* ── سؤالاتِ متداول (بخش ۱۲) — آکاردئونِ بومیِ ، بدونِ جاوااسکریپت ── */
.faq-group { margin-bottom: 28px; }
.faq-group h2 {
font-size: 16px; display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
color: var(--forest-700); padding-bottom: 8px; border-bottom: 2px solid var(--gold);
}
.faq-item {
background: #fff; border: 1px solid var(--line); border-radius: 12px;
margin-bottom: 8px; padding: 4px 16px;
}
.faq-item summary {
cursor: pointer; list-style: none; padding: 12px 0; font-weight: 700;
font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 8px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px;
color: var(--forest-700); transition: transform .15s ease; flex-shrink: 0;
}
.faq-item[open] summary::before { transform: rotate(180deg); }
.faq-answer { padding: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.9; }
.poll-form { display: flex; flex-direction: column; gap: 10px; }
.poll-question { font-weight: 700; font-size: 16px; }
.poll-option { display: flex; gap: 8px; align-items: center; }
.poll-results { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.poll-result-row { display: flex; flex-direction: column; gap: 5px; }
.poll-result-row.leading .poll-bar-fill { background: linear-gradient(90deg, var(--gold, #d3a531), #e8c366); }
.poll-result-label { display: flex; justify-content: space-between; font-size: 13.5px; }
.poll-result-count { color: var(--muted); font-size: 12px; }
.poll-bar-track { background: rgba(18,41,30,.08); border-radius: 20px; height: 12px; overflow: hidden; }
.poll-bar-fill { height: 100%; background: linear-gradient(90deg, var(--forest-700), var(--forest-900)); border-radius: 20px; transition: width .5s ease; }
.poll-total { font-size: 12px; color: var(--muted); margin-top: 4px; }
.poll-closed-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.poll-comments { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.poll-comments-title { font-size: 13px; }
.poll-comment-item { background: #f6f8fb; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.poll-comment-item strong { font-size: 12.5px; }
.poll-comment-date { color: var(--muted); font-size: 10.5px; margin-right: 6px; }
.poll-comment-item p { margin: 4px 0 0; line-height: 1.8; }
.poll-comments-empty { font-size: 12.5px; color: var(--muted); }
.poll-comment-form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.contact-cta { background: var(--forest-700); color: #fff; border: none; }
.contact-cta .eyebrow { color: var(--gold); border-bottom-color: var(--gold); }
.contact-cta h2 { color: #fff; }
.contact-cta p { color: #d9e6dc; }
.btn {
display: inline-block; background: var(--gold); color: var(--forest-900) !important; padding: 10px 20px;
border-radius: 9px; border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700;
}
.btn:hover { background: var(--gold-deep); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-outline { background: #fff; color: var(--forest-700) !important; border: 1px solid var(--forest-700); }
.widget-clock { text-align: center; }
.live-clock { font-size: 32px; font-weight: 700; color: var(--forest-700); direction: ltr; font-family: "Vazirmatn"; }
.jalali-date { color: var(--muted); margin-top: 4px; }
.alt-calendars { color: var(--muted); font-size: 11.5px; margin-top: 6px; direction: ltr; }
.day-occasions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); text-align: right; }
.day-occasion-item { font-size: 12px; margin-bottom: 4px; }
.day-occasion-item i.fa-circle { font-size: 6px; vertical-align: middle; margin-inline-end: 3px; color: var(--forest-500, #4a8a63); }
.day-occasion-item.is-holiday { color: var(--urgent, #c0392b); font-weight: 700; }
.day-occasion-item.is-holiday i.fa-circle { color: var(--urgent, #c0392b); }
.widget-weather h3 { margin: 2px 0 12px; font-size: 17px; }
.weather-current { font-size: 20px; margin-bottom: 10px; }
.weather-current-main { display: block; margin-bottom: 6px; }
.weather-current-main i { color: var(--accent, #d3a531); margin-inline-end: 4px; }
.weather-details { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); font-weight: 400; }
.weather-details i { color: var(--accent, #d3a531); margin-inline-end: 3px; width: 13px; text-align: center; }
.weather-forecast { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--muted); }
.weather-day { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.weather-expand-btn {
display: block; width: 100%; margin-top: 10px; padding: 7px 10px; border: none; border-radius: 8px;
background: rgba(18,41,30,.06); color: var(--ink, #12291e); font-size: 12px; cursor: pointer;
}
.weather-expand-btn:hover { background: rgba(18,41,30,.1); }
.weather-hourly-title { font-size: 11px; color: var(--muted); margin: 10px 0 6px; }
.weather-hourly { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.weather-hour {
display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none;
min-width: 46px; font-size: 11.5px; border-radius: 8px; padding: 6px 4px;
background: rgba(18,41,30,.04); color: var(--muted);
}
.weather-hour.wh-day { background: linear-gradient(180deg, #fff6d8, #ffedb0); color: #7a5c00; }
.weather-hour.wh-night { background: linear-gradient(180deg, #dce6f5, #c3d3ec); color: #26314a; }
.wh-time { font-size: 10.5px; }
.wh-icon { font-size: 15px; }
.weather-hour.wh-day .wh-icon { color: #b5842e; }
.weather-hour.wh-night .wh-icon { color: #4a5fa0; }
.wh-temp { font-weight: 700; color: var(--ink, #12291e); }
.weather-forecast-full { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-width: 100%; overflow-x: hidden; }
.weather-forecast-full[hidden] { display: none; }
.weather-day-full {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer;
font-size: 12px; color: var(--muted); padding: 6px 2px; border-top: 1px solid rgba(18,41,30,.06);
}
.weather-day-full:hover { background: rgba(18,41,30,.03); }
.wdf-day { font-weight: 600; color: var(--ink, #12291e); min-width: 64px; flex: none; white-space: nowrap; }
.wdf-icon { min-width: 90px; flex: 1 1 auto; white-space: nowrap; }
.wdf-icon i { color: var(--accent, #d3a531); margin-inline-end: 3px; }
.wdf-temp { min-width: 66px; flex: none; white-space: nowrap; }
.wdf-extra { white-space: nowrap; }
.wdf-extra i { color: var(--accent, #d3a531); margin-inline-end: 3px; width: 12px; text-align: center; }
.weather-day-hourly { padding: 6px 2px 10px; }
.weather-day-hourly[hidden] { display: none; }
/* ── پچ ۱۴: آیکونهای متحرکِ آبوهوا (خورشیدِ درخشان، ابرِ شناور، بارون/برفِ
درحالِ باریدن، ماهِ درخشان، مهی درحالِ حرکت، بادِ درحالِ وزیدن) ──
با CSS خالص ساخته شده (بدون تصویر/فونت خارجی)؛ اندازهش نسبت به فونتسایزِ
جایی که توش قرار میگیره (em) تنظیم میشه، پس همونجا که قبلاً
بود جاش میشینه، بدون نیاز به override اندازه در هر context. */
.wx-icon {
position: relative; display: inline-block;
width: 1.5em; height: 1.5em; vertical-align: -0.32em;
margin-inline-end: 4px; overflow: visible;
}
.wx-icon .wx-cloud-shape {
position: absolute; width: 72%; height: 38%; left: 14%; bottom: 8%;
background: #cfd9e6; border-radius: 60px;
animation: wx-float 2.6s ease-in-out infinite;
will-change: transform;
}
.wx-icon .wx-cloud-shape::before, .wx-icon .wx-cloud-shape::after {
content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.wx-icon .wx-cloud-shape::before { width: 52%; height: 140%; top: -62%; left: 6%; }
.wx-icon .wx-cloud-shape::after { width: 44%; height: 110%; top: -46%; right: 6%; }
@keyframes wx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16%); } }
/* خورشید: هستهی درخشان + هالهی اشعه که دور خودش میچرخه (خورشیدِ در حالِ تابیدن) */
.wx-sun-core {
position: absolute; inset: 24%; border-radius: 50%;
background: radial-gradient(circle at 35% 32%, #ffe694, var(--gold, #d9a441));
box-shadow: 0 0 7px rgba(217, 164, 65, .65);
animation: wx-pulse 1.8s ease-in-out infinite;
will-change: filter;
}
.wx-sun-rays {
position: absolute; inset: -6%; border-radius: 50%;
background: repeating-conic-gradient(from 0deg, var(--gold, #d9a441) 0deg 5deg, transparent 5deg 32deg);
opacity: .7; animation: wx-spin 6s linear infinite;
-webkit-mask: radial-gradient(circle, transparent 52%, #000 56%);
mask: radial-gradient(circle, transparent 52%, #000 56%);
will-change: transform;
}
@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-pulse { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.22); transform: scale(1.07); } }
.wx-cloud-sun .wx-sun-core-sm { inset: 2% 22% auto auto; width: 42%; height: 42%; }
/* ماه: هلال با یک سایهی داخلی که دایره رو نصفه میکنه، با درخششِ آرام */
.wx-moon-body {
position: absolute; inset: 14%; border-radius: 50%;
background: #eef1f8;
box-shadow: inset 30% -8% 0 0 #b9c4dc, 0 0 8px rgba(190, 202, 230, .7);
animation: wx-glow 2.2s ease-in-out infinite;
will-change: filter;
}
@keyframes wx-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.32); } }
.wx-cloud-moon .wx-moon-body-sm { inset: 2% 24% auto auto; width: 40%; height: 40%; }
/* ابرِ تنها (بدون بارش) — شناوریِ آرومِ ابر، با همون دامنهی نسبتاً محسوسِ بالا */
.wx-cloud-only .wx-cloud-shape { animation-duration: 3s; }
/* مه: چند خطِ افقی که بهآرومی به چپ/راست میرن (مهی درحالِ حرکت) */
.wx-fog-line {
position: absolute; left: 8%; right: 8%; height: 13%; background: #c7cfd9;
border-radius: 6px; animation: wx-drift 2.2s ease-in-out infinite; will-change: transform, opacity;
}
.wx-fog-line.l1 { top: 18%; animation-delay: 0s; }
.wx-fog-line.l2 { top: 47%; right: 26%; animation-delay: .35s; }
.wx-fog-line.l3 { top: 76%; left: 26%; animation-delay: .7s; }
@keyframes wx-drift { 0%, 100% { transform: translateX(0); opacity: .7; } 50% { transform: translateX(14%); opacity: 1; } }
/* بارون: قطرههایی که از زیرِ ابر میبارن (شفاف میشن و پایین میرن) — دامنهی
حرکت و اندازهی قطرهها کمی بزرگتر شد تا حتی تو آیکونِ کوچیکِ پیشبینیِ
ساعتی هم واضح دیده بشه، نه فقط تو آیکونِ بزرگِ وضعیتِ فعلی. */
.wx-rain .wx-cloud-shape { background: #b9c6da; }
.wx-drop {
position: absolute; bottom: 2%; width: 9%; height: 30%;
background: #5f8fd6; border-radius: 0 0 60% 60%;
opacity: 0; animation: wx-fall 0.9s linear infinite; will-change: transform, opacity;
}
.wx-rain-heavy .wx-drop { animation-duration: .6s; background: #3f74c4; }
@keyframes wx-fall {
0% { transform: translateY(-25%); opacity: 0; }
20% { opacity: 1; }
100% { transform: translateY(95%); opacity: 0; }
}
/* برف: دونههای سفیدِ درحالِ باریدن با کمی چرخش و لغزشِ افقی */
.wx-snow .wx-cloud-shape { background: #d8dfe9; }
.wx-flake {
position: absolute; bottom: 2%; width: 13%; height: 13%; border-radius: 50%;
background: #fff; box-shadow: 0 0 2px rgba(18, 41, 30, .18);
opacity: 0; animation: wx-snowfall 2s linear infinite; will-change: transform, opacity;
}
@keyframes wx-snowfall {
0% { transform: translate(0, -20%) rotate(0deg); opacity: 0; }
18% { opacity: 1; }
100% { transform: translate(26%, 95%) rotate(220deg); opacity: 0; }
}
/* رعدوبرق: ابر تیرهتر + یک صاعقهی چشمکزن + کمی بارون */
.wx-thunder .wx-cloud-shape { background: #97a3b8; }
.wx-bolt {
position: absolute; bottom: -8%; left: 40%; width: 24%; height: 46%;
background: var(--gold, #d9a441);
clip-path: polygon(58% 0%, 0% 58%, 44% 58%, 30% 100%, 100% 34%, 54% 34%);
animation: wx-flash 1.4s ease-in-out infinite; will-change: opacity, filter;
}
@keyframes wx-flash {
0%, 35%, 100% { opacity: .25; filter: none; }
45%, 55% { opacity: 1; filter: drop-shadow(0 0 5px var(--gold, #d9a441)); }
}
/* بادِ درحالِ وزیدن: سه خطِ موجی که پشتِسرِهم جلو میرن و محو میشن */
.wx-wind-icon { width: 1.25em; height: 1.25em; }
.wx-wind-line {
position: absolute; height: 11%; background: var(--forest-700, #1f4d3a);
border-radius: 3px; opacity: .8; animation: wx-blow 1.3s ease-in-out infinite; will-change: transform, opacity;
}
.wx-wind-line.w1 { top: 18%; left: 4%; width: 68%; animation-delay: 0s; }
.wx-wind-line.w2 { top: 50%; left: 14%; width: 54%; animation-delay: .25s; }
.wx-wind-line.w3 { top: 82%; left: 0; width: 62%; animation-delay: .5s; }
@keyframes wx-blow {
0% { transform: translateX(0) scaleX(1); opacity: .7; }
50% { transform: translateX(26%) scaleX(1.12); opacity: 1; }
100% { transform: translateX(0) scaleX(1); opacity: .7; }
}
@media (max-width: 380px) {
.wdf-day { min-width: 52px; font-size: 11px; }
.wdf-icon { min-width: 70px; font-size: 11px; }
.wdf-temp { min-width: 54px; font-size: 11px; }
.wdf-extra { font-size: 10.5px; }
}
/* ── فرم تماس ── */
.form-control {
width: 100%; padding: 11px 14px; border-radius: 9px; border: 1px solid var(--line);
font-family: inherit; margin-bottom: 12px; font-size: 14px; background: var(--paper);
}
/* ══════════════ صفحهی حرفهای خبر ══════════════ */
.post-page { max-width: 820px; margin: 28px auto 50px; }
.post-head h1 {
font-family: "Vazirmatn", Tahoma, sans-serif; font-weight: 800; letter-spacing: 0;
font-size: 27px; margin: 6px 0 10px; color: var(--forest-700); line-height: 1.5;
}
/* اطلاعیهها معمولاً بهجای یه عنوان کوتاه، همون متن کامل اطلاعیه رو توی
فیلد «عنوان» مینویسن؛ برای همین بهجای فونت درشتِ تیترِ خبر، یه سایز
معتدلتر و کموزنتر (شبیه یه پاراگراف مقدمه) براش در نظر گرفته شده. */
.announcement-title {
font-size: 19px; font-weight: 600; line-height: 1.8;
}
.post-meta { display: flex; gap: 16px; color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.post-cover {
width: 100%; height: 340px; object-fit: contain; object-position: center;
background: #eef1ec; border-radius: var(--radius); margin-bottom: 18px;
}
.post-video { margin-bottom: 18px; }
.video-embed-wrap { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; background: #000; }
.video-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-video video { width: 100%; border-radius: var(--radius); background: #000; }
/* تایپوگرافی خروجی ویرایشگر حرفهای (Jodit) */
.post-body { font-size: 16.5px; line-height: 2; color: var(--ink); max-width: 100%; overflow-wrap: break-word; }
.post-body p { margin: 0 0 16px; }
.post-body h2 { font-family: "Vazirmatn", sans-serif; font-weight: 800; font-size: 21px; color: var(--forest-700); margin: 28px 0 12px; }
.post-body h3 { font-family: "Vazirmatn", sans-serif; font-weight: 700; font-size: 18px; color: var(--forest-700); margin: 22px 0 10px; }
.post-body img {
max-width: 100%; height: auto; display: block; margin: 18px auto;
border-radius: 12px; box-shadow: 0 6px 18px rgba(15,40,25,.12); cursor: zoom-in;
}
.post-body iframe, .post-body video { max-width: 100%; }
.post-body a { color: var(--forest-700); text-decoration: underline; text-decoration-color: var(--gold); }
.post-body ul, .post-body ol { padding-inline-start: 26px; margin-bottom: 16px; }
.post-body blockquote {
border-inline-start: 4px solid var(--gold); background: #f4f1e6; margin: 18px 0;
padding: 12px 18px; border-radius: 0 var(--radius) var(--radius) 0; color: var(--forest-700);
}
.post-body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; display: block; overflow-x: auto; }
.post-body table td, .post-body table th { border: 1px solid var(--line); padding: 8px 10px; }
.post-body table th { background: #f2f5ef; }
.post-body .inline-image-carousel { margin: 20px 0; }
/* لایتباکس ساده برای زوم روی تصاویر متن خبر */
.img-lightbox {
position: fixed; inset: 0; background: rgba(10,20,15,.9); z-index: 999;
display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out;
}
.img-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
/* گالری اسلایدی */
.post-gallery { margin: 26px 0; }
.gallery-slider { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; }
.gallery-track { display: flex; transition: transform .4s ease; }
.gallery-slide { min-width: 100%; margin: 0; }
.gallery-slide img { width: 100%; max-height: 460px; object-fit: contain; background: #111; }
.gallery-slide figcaption { background: rgba(0,0,0,.55); color: #fff; font-size: 13px; padding: 8px 14px; }
.gallery-nav {
position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.85);
border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 2;
display: flex; align-items: center; justify-content: center; line-height: 1;
}
.gallery-nav:hover { background: #fff; }
/* در سایت RTL: دکمهی «قبلی» سمت راست (همجهت با شروع خواندن)، «بعدی» سمت چپ */
.gallery-prev { right: 12px; } .gallery-next { left: 12px; }
.gallery-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.gallery-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; }
.gallery-dot.active { background: var(--gold); }
.gallery-track.dragging { transition: none !important; cursor: grabbing; }
.gallery-slide img.img-broken { object-fit: none; opacity: .35; }
/* فایلهای ضمیمه */
.post-attachments { margin: 20px 0; }
.attachment-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.attachment-list a { background: var(--paper-card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: block; }
.attachment-list a:hover { border-color: var(--gold); }
.post-poll-box { margin: 24px 0; }
/* برچسبهای نمایشی خبر */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.post-tag {
background: #eef3ee; color: var(--forest-700); font-size: 12.5px; font-weight: 700;
border-radius: 999px; padding: 6px 14px; border: 1px solid var(--line); text-decoration: none; display: inline-block;
}
.post-tag:hover { background: var(--forest-700); color: #fff; }
/* بردکرامب */
.post-breadcrumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.post-breadcrumbs a { color: var(--muted); text-decoration: none; }
.post-breadcrumbs a:hover { color: var(--forest-700); text-decoration: underline; }
.post-breadcrumbs span { color: var(--ink); }
.post-head .eyebrow a { color: inherit; text-decoration: none; }
.post-head .eyebrow a:hover { text-decoration: underline; }
/* اشتراکگذاری */
.post-share-box { display: flex; align-items: center; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.post-share-label { font-size: 12.5px; color: var(--muted); }
.share-btn {
width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 15px; border: none; cursor: pointer; text-decoration: none;
}
.share-letter { font-family: "Vazirmatn", sans-serif; font-weight: 800; font-size: 13px; line-height: 1; }
.share-telegram { background: #229ED9; }
.share-whatsapp { background: #25D366; }
.share-x { background: #000; }
.share-eitaa { background: #12A9D8; }
.share-bale { background: #0AA3E0; }
.share-soroush { background: #00A99D; }
.share-rubika { background: #7B2FF7; }
.share-instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.share-copy { background: var(--muted); }
.share-btn:hover { opacity: .85; }
.print-btn {
display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px;
background: #fff; border: 1.5px solid var(--line); color: var(--ink); font-family: inherit; font-size: 13px;
font-weight: 700; cursor: pointer;
}
.print-btn:hover { border-color: var(--gold); }
/* لایک/دیسلایک */
.post-reactions { display: flex; gap: 12px; margin: 28px 0; flex-wrap: wrap; }
.reaction-form { display: inline-flex; }
.reaction-btn {
display: flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid var(--line);
border-radius: 999px; padding: 10px 20px; font-family: inherit; font-size: 14.5px; cursor: pointer;
font-weight: 700; color: var(--ink); transition: all .18s ease; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.reaction-btn span {
background: #f1f3f0; color: var(--muted); border-radius: 999px; padding: 1px 9px; font-size: 13px; font-weight: 800;
}
.reaction-btn:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.reaction-btn.active-like { background: #e6f2ea; border-color: var(--leaf-500); color: var(--forest-700); }
.reaction-btn.active-like span { background: var(--leaf-500); color: #fff; }
.reaction-btn.active-dislike { background: #fbe9e7; border-color: var(--urgent); color: var(--urgent); }
.reaction-btn.active-dislike span { background: var(--urgent); color: #fff; }
.post-back { margin: 10px 0 30px; }
.post-back a { color: var(--forest-700); font-weight: 700; }
/* نظرات */
.post-comments { margin-top: 10px; padding: 22px; }
.comment-form { margin-bottom: 24px; display: flex; flex-direction: column; gap: 12px; }
.comment-form textarea { min-height: 90px; resize: vertical; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-item { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.comment-item:last-child { border-bottom: none; }
.comment-item::before {
content: attr(data-initial); flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
background: var(--forest-700); color: #fff; display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 15px;
}
.comment-item.has-avatar::before { display: none; }
.comment-avatar-img { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.comment-body-wrap { flex: 1; min-width: 0; }
.comment-author { font-weight: 700; color: var(--forest-700); font-size: 14px; }
.comment-date { font-size: 11.5px; color: var(--muted); margin: 2px 0 6px; }
.comment-body { margin: 0; font-size: 14.5px; line-height: 1.9; }
.comment-replies { list-style: none; padding-inline-start: 22px; margin-top: 12px; border-inline-start: 2px solid var(--line); }
.comment-replies .comment-item { padding: 10px 0; }
.comment-empty { color: var(--muted); padding: 16px 0; text-align: center; }
/* ── فوتر ── */
.site-footer { background: var(--forest-900); color: #d9e6dc; position: relative; overflow: hidden; }
.footer-skyline { position: absolute; top: -1px; left: 0; right: 0; opacity: .35; }
.footer-skyline img { width: 100%; height: 90px; object-fit: cover; }
.footer-inner { position: relative; z-index: 1; padding: 34px 0 22px; text-align: center; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-family: "Vazirmatn", sans-serif; font-weight: 800; font-size: 17px; margin-bottom: 10px; }
.footer-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 10px 0; font-size: 12.5px; opacity: .9; }
.footer-contact a { color: inherit; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.footer-social { display: flex; justify-content: center; gap: 12px; margin: 10px 0; }
.footer-social a {
display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
border-radius: 50%; background: rgba(255,255,255,.12); font-size: 15px; text-decoration: none;
transition: background .15s ease;
}
.footer-social a:hover { background: rgba(255,255,255,.22); }
.footer-copy { font-size: 12px; opacity: .75; margin-top: 4px; }
/* ── بنر خوشآمدگویی صفحهی اصلی (پاپآپ شیشهای، از پنل کنترل میشه) ────── */
.welcome-modal-backdrop {
position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
padding: 20px; background: rgba(10, 20, 15, 0);
opacity: 0; pointer-events: none; transition: background .3s ease, opacity .3s ease;
}
.welcome-modal-backdrop.open {
background: rgba(10, 20, 15, .45); opacity: 1; pointer-events: auto;
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.welcome-modal-card {
position: relative; width: 100%; max-width: 460px; padding: 34px 28px 28px;
border-radius: 22px; text-align: center; color: #fff;
background: linear-gradient(160deg, rgba(31,77,58,.68), rgba(20,40,28,.72));
border: 1px solid rgba(255,255,255,.25);
backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow: 0 24px 60px rgba(0,0,0,.35);
transform: translateY(18px) scale(.97); opacity: 0; transition: transform .3s ease, opacity .3s ease;
}
.welcome-modal-backdrop.open .welcome-modal-card { transform: translateY(0) scale(1); opacity: 1; }
.welcome-modal-card h2 { font-size: 21px; margin: 6px 0 10px; }
.welcome-modal-card p { font-size: 13.5px; line-height: 1.9; opacity: .92; margin: 0 0 18px; }
.welcome-modal-close {
position: absolute; top: 14px; left: 14px; width: 32px; height: 32px; border-radius: 50%;
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff;
display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px;
transition: background .15s ease;
}
.welcome-modal-close:hover { background: rgba(255,255,255,.28); }
.welcome-modal-buttons { display: flex; gap: 10px; }
.welcome-modal-buttons-stack { flex-direction: column; }
.welcome-modal-buttons-grid { flex-wrap: wrap; }
.welcome-modal-buttons-grid .btn { flex: 1 1 calc(50% - 5px); min-width: 130px; }
.welcome-modal-buttons .btn { background: #fff; color: #1F4D3A; border: none; }
.welcome-modal-buttons .btn:hover { background: var(--gold); }
@media (max-width: 480px) {
.welcome-modal-buttons-grid .btn { flex: 1 1 100%; }
}
/* ── لینکهای سریع خدمات (صفحهی اصلی) ──────────────────────────────────── */
.quick-links-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 12px; margin: 18px 0;
}
.quick-link-card {
display: flex; flex-direction: column; align-items: center; gap: 8px;
background: var(--paper-card); border: 1px solid var(--line); border-radius: 14px;
padding: 16px 10px; text-decoration: none; color: var(--text); text-align: center;
transition: transform .15s ease, box-shadow .15s ease;
}
.quick-link-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.quick-link-icon { font-size: 26px; }
.quick-link-icon-img { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: block; }
.quick-link-icon-img img { width: 100%; height: 100%; object-fit: cover; }
.quick-link-title { font-size: 12.5px; font-weight: 700; }
/* ── تلهی نامرئی ضدِاسپم (honeypot) — کاربر واقعی هرگز نمیبینتش ────────── */
.hp-field {
position: absolute !important; left: -9999px !important; top: -9999px !important;
width: 1px !important; height: 1px !important; opacity: 0 !important;
pointer-events: none; overflow: hidden;
}
/* ── گزارش مشکل شهری (issues app) ────────────────────────────────────── */
.issue-report-page { margin-top: 30px; max-width: 640px; }
.issue-report-form .form-group-panel { margin-bottom: 16px; }
.issue-picker-map { height: 320px; border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; }
.issue-map-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pin-status { font-size: 12.5px; color: var(--muted); }
.pin-status.pin-set { color: #1f8b4c; font-weight: 700; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-error { color: #b5324a; font-size: 12.5px; margin-top: 4px; }
.form-errors-box { background: #fdecee; border: 1px solid #f3c1ca; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; color: #b5324a; font-size: 13px; }
/* ── استایل پایهی فرمهای عمومی سایت (تماس، گزارش مشکل، حساب شهروندی) ──── */
.form-group-panel { margin-bottom: 14px; }
.form-group-panel label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.help-text-panel { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.issue-track-cta { text-align: center; font-size: 13px; color: var(--muted); margin: 20px 0 40px; }
.issue-track-cta a { color: var(--forest-700); font-weight: 700; }
.issue-track-page { margin-top: 30px; max-width: 480px; }
.issue-track-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.issue-track-form .form-group-panel { flex: 1; min-width: 200px; margin-bottom: 0; }
.issue-status-card { margin-top: 20px; }
.issue-status-badge {
display: inline-block; color: #fff; font-size: 12px; font-weight: 800;
padding: 5px 14px; border-radius: 999px; margin-bottom: 10px;
}
.issue-status-meta { font-size: 12px; color: var(--muted); margin: 4px 0; }
.issue-status-photo { max-width: 100%; border-radius: 10px; margin: 10px 0; }
.issues-map-legend {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px;
}
.legend-status-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle;
color: #fff; font-size: 10px;
}
/* پچ ۱۴: فهرستِ گزارشها بهجای ردیفهای ولو، حالا شبکهای از کارتهای
سفیدِ مجزاست (همخانواده با .landmark-card)؛ کلیک روی هر کارت نقشه رو
به همون گزارش میبره و پاپآپش رو باز میکنه. */
.issues-list {
margin-top: 16px; display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px;
}
.issue-list-row {
display: flex; align-items: center; gap: 10px; padding: 14px 16px;
background: var(--paper-card); border: 1px solid var(--line); border-radius: 14px;
font-size: 12.5px; flex-wrap: wrap; cursor: pointer;
box-shadow: 0 1px 3px rgba(18,41,30,.05);
transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.issue-list-row:hover, .issue-list-row:focus-visible {
box-shadow: 0 6px 16px rgba(18,41,30,.12); transform: translateY(-2px);
border-color: var(--gold, #d3a531);
}
.issue-list-row.is-active { border-color: var(--gold, #d3a531); box-shadow: 0 0 0 2px rgba(217,164,65,.35); }
.issue-list-status-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; color: #fff; font-size: 11px;
}
.issue-list-title { font-weight: 700; flex: 1; min-width: 140px; }
.issue-list-status { font-weight: 700; }
.issue-list-date { color: var(--muted); width: 100%; font-size: 11.5px; }
.map-status-pin {
width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
display: flex; align-items: center; justify-content: center;
border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.map-status-pin i { transform: rotate(45deg); color: #fff; font-size: 11px; }