/* ============================================================ iraqbus.ir — سیستمِ طراحیِ ۱۴۰۵ ------------------------------------------------------------ روی HTMLِ موجود سوار می‌شود؛ هیچ صفحه‌ای تغییر نمی‌کند. بعد از style.css بارگذاری می‌شود، پس همین‌جا شکلِ نهایی تعیین می‌شود. قواعد: • دو زبانه: فارسی با Vazirmatn، عربی با Cairo • حالتِ شب خودکار (prefers-color-scheme) • احترام به prefers-reduced-motion • هدفِ لمس ۴۴px، تمرکزِ صفحه‌کلیدِ دیدنی، کنتراستِ ۴.۵:۱ • بدونِ !important مگر جایی که سبکِ درون‌خطیِ قدیمی را باید غلبه کنیم ============================================================ */ :root{ /* رنگ‌های برند — همان‌ها، فقط منظم‌تر */ --g-900:#1b1b1b; --g-800:#8a6d16; --g-700:#3d3d3d; --g-600:#c9a227; --g-100:#eef0ef; --g-050:#f6f6f7; --gold-700:#8a7328; --gold-600:#a8871f; --gold:#c9a227; --gold-400:#e6c866; --gold-100:#faf3dd; --ink:#16211c; --ink-2:#3d4a44; --muted:#6b7873; --line:#e3ddcd; --paper:#fdfcf9; --paper-2:#f7f4ec; --white:#fff; --ok:#c9a227; --warn:#a5621a; --err:#c0392b; --info:#1a5f8a; /* ارتفاعِ سایه — پنج پله، نه بیشتر */ --e1:0 1px 2px rgba(11,61,46,.06), 0 1px 3px rgba(11,61,46,.08); --e2:0 4px 8px -2px rgba(11,61,46,.08), 0 2px 4px -2px rgba(11,61,46,.06); --e3:0 12px 20px -6px rgba(11,61,46,.12), 0 4px 8px -4px rgba(11,61,46,.08); --e4:0 24px 40px -12px rgba(11,61,46,.18), 0 8px 16px -8px rgba(11,61,46,.10); --e5:0 40px 72px -20px rgba(7,40,30,.28); --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px; --r-full:999px; /* مقیاسِ فاصله — همه مضربِ ۴ */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px; --wrap:1180px; --font:'Vazirmatn','Segoe UI',Tahoma,sans-serif; --font-ar:'Cairo','Tajawal','Vazirmatn',sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --t:.22s var(--ease); } html[lang="ar"]{ --font:var(--font-ar); } /* ───────── حالتِ شب ───────── ⚠ بازرسیِ ۲۰۲۶-۰۸-۱۳: این بلوک‌ها با «حالتِ شبِ سیستم‌عامل» خودکار روشن می‌شدند و متن را روشن می‌کردند — ولی ده‌ها پس‌زمینه در همین فایل سفتِ #fff هستند (از جمله فیلدهای جعبهٔ جست‌وجوی صفحهٔ اصلی). نتیجه: سفیدِ روشن روی سفیدِ خالص، نسبتِ خوانایی ۱٫۱۵ به ۱ — یعنی زائر در کادرِ ظاهراً خالی تایپ می‌کرد. برندِ سایت هم عمداً سفید/طلایی است. پس حالتِ شب از «خودکار» به «انتخابی» تبدیل شد: قواعد دست‌نخورده‌اند و با data-theme="auto" روی دوباره زنده می‌شوند؛ فقط دیگر بدونِ خواستِ ما روشن نمی‌شوند. حالتِ [data-theme="dark"] هم سرِ جایش هست. */ :root{ color-scheme: light; } @media (prefers-color-scheme: dark){ :root[data-theme="auto"]{ --ink:#eaf1ed; --ink-2:#c3d1ca; --muted:#93a49c; --line:#25352d; --paper:#171717; --paper-2:#1a1a1a; --white:#1c1c1c; --g-100:#333333; --g-050:#171717; --gold-100:#2a2416; }} :root[data-theme="dark"]{ --ink:#eaf1ed; --ink-2:#c3d1ca; --muted:#93a49c; --line:#25352d; --paper:#171717; --paper-2:#1a1a1a; --white:#1c1c1c; --g-100:#333333; --g-050:#171717; --gold-100:#2a2416; } :root[data-theme="light"]{ --ink:#16211c; --ink-2:#3d4a44; --muted:#6b7873; --line:#e3ddcd; --paper:#fdfcf9; --paper-2:#f7f4ec; --white:#fff; --g-100:#eef0ef; --g-050:#f6f6f7; --gold-100:#faf3dd; } /* ───────── پایه ───────── */ html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }} body{ font-family:var(--font); background:var(--paper); color:var(--ink); line-height:1.85; font-size:16px; text-rendering:optimizeLegibility; } /* تمرکزِ صفحه‌کلید — بدونِ این، سایت برای کاربرِ صفحه‌کلید غیرقابل‌استفاده است */ :focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:var(--r-xs); } :focus:not(:focus-visible){ outline:none; } /* پرشِ مستقیم به محتوا — برای صفحه‌خوان و صفحه‌کلید */ .kg-skip{ position:absolute; inset-inline-start:var(--s4); top:-100px; z-index:9999; background:var(--g-800); color:#fff; padding:var(--s3) var(--s6); border-radius:0 0 var(--r) var(--r); font-weight:800; text-decoration:none; transition:top var(--t); } .kg-skip:focus{ top:0; } ::selection{ background:var(--gold-400); color:var(--g-900); } /* ───────── تایپوگرافی ───────── */ h1,h2,h3,h4,h5{ font-family:var(--font); color:var(--ink); line-height:1.4; text-wrap:balance; } h1{ font-size:clamp(27px,4.4vw,44px); font-weight:900; letter-spacing:-.4px; } h2{ font-size:clamp(22px,3.1vw,33px); font-weight:800; letter-spacing:-.2px; } h3{ font-size:clamp(18px,2.2vw,23px); font-weight:800; } h4{ font-size:17px; font-weight:800; } p{ color:var(--ink-2); text-wrap:pretty; } .container,.kg-wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s6); } @media (max-width:640px){ .container,.kg-wrap{ padding-inline:var(--s4); }} .section{ padding-block:clamp(var(--s12),7vw,var(--s24)); } .section-head{ text-align:center; max-width:680px; margin-inline:auto; margin-block-end:var(--s12); } .section-head h2{ margin-block-end:var(--s3); } .section-head p{ font-size:17px; color:var(--muted); } .eyebrow{ display:inline-flex; align-items:center; gap:var(--s2); font-size:13px; font-weight:800; letter-spacing:.2px; color:var(--g-600); background:var(--g-100); padding:var(--s2) var(--s5); border-radius:var(--r-full); margin-block-end:var(--s4); } /* ───────── دکمه ───────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:48px; padding:var(--s3) var(--s8); border-radius:var(--r-sm); border:2px solid transparent; font-family:inherit; font-size:15.5px; font-weight:800; line-height:1.2; cursor:pointer; text-decoration:none; white-space:nowrap; transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t); } .btn:active{ transform:translateY(1px); } .btn-gold{ background:linear-gradient(135deg,var(--gold),var(--gold-400)); color:var(--g-900); box-shadow:var(--e2); } .btn-gold:hover{ box-shadow:var(--e4); transform:translateY(-2px); } .btn-primary,.btn-green{ background:linear-gradient(135deg,var(--g-600),var(--g-800)); color:#fff; box-shadow:var(--e2); } .btn-primary:hover,.btn-green:hover{ box-shadow:var(--e4); transform:translateY(-2px); } .btn-outline{ background:transparent; border-color:currentColor; color:var(--g-700); } .btn-outline:hover{ background:var(--g-050); } .btn-lg{ min-height:56px; padding-inline:var(--s10); font-size:17px; } /* ───────── سربرگ و ناوبری ───────── */ header{ position:sticky; top:0; z-index:900; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-block-end:1px solid var(--line); transition:box-shadow var(--t); } header nav{ max-width:var(--wrap); margin-inline:auto; padding:var(--s3) var(--s6); display:flex; align-items:center; gap:var(--s5); } @media (max-width:640px){ header nav{ padding-inline:var(--s4); }} header .logo{ display:flex; align-items:center; gap:var(--s2); font-weight:900; font-size:16.5px; color:var(--g-800); white-space:nowrap; } header .logo img{ width:36px; height:36px; } header nav > ul{ display:flex; align-items:center; gap:var(--s1); margin-inline-start:auto; list-style:none; } header nav > ul > li > a{ display:inline-flex; align-items:center; min-height:44px; padding:var(--s2) var(--s4); border-radius:var(--r-sm); font-size:14.5px; font-weight:700; color:var(--ink-2); text-decoration:none; transition:background var(--t), color var(--t); } header nav > ul > li > a:hover, header nav > ul > li > a.active{ background:var(--g-050); color:var(--g-800); } .submenu{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--e4); padding:var(--s2); min-width:230px; } .submenu a{ display:block; padding:var(--s2) var(--s4); border-radius:var(--r-xs); font-size:14px; color:var(--ink-2); text-decoration:none; } .submenu a:hover{ background:var(--g-050); color:var(--g-800); } .nav-cta > a,a.nav-cta{ background:linear-gradient(135deg,var(--gold),var(--gold-400)) !important; color:var(--g-900) !important; font-weight:800; } .nav-toggle{ min-width:44px; min-height:44px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--white); color:var(--g-800); font-size:20px; cursor:pointer; } /* ───────── کارت ───────── */ .card,.service-card,.step-card,.kg-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--e1); transition:transform var(--t), box-shadow var(--t), border-color var(--t); } .card:hover,.service-card:hover,.kg-card:hover{ transform:translateY(-3px); box-shadow:var(--e3); border-color:var(--gold-400); } /* ───────── فرم ───────── */ input,select,textarea{ font-family:inherit; font-size:16px; /* زیر ۱۶ باعث زومِ خودکارِ iOS می‌شود */ min-height:48px; width:100%; padding:var(--s3) var(--s4); background:var(--white); color:var(--ink); border:1.5px solid var(--line); border-radius:var(--r-sm); transition:border-color var(--t), box-shadow var(--t); } textarea{ min-height:96px; line-height:1.8; } input:focus,select:focus,textarea:focus{ border-color:var(--g-600); box-shadow:0 0 0 4px color-mix(in srgb, var(--g-600) 16%, transparent); outline:none; } input[aria-invalid="true"],.kg-invalid{ border-color:var(--err); box-shadow:0 0 0 4px color-mix(in srgb, var(--err) 14%, transparent); } label{ display:block; font-size:14px; font-weight:700; color:var(--ink-2); margin-block-end:var(--s2); } /* ───────── بلوکِ صفحاتِ مرتبط ───────── */ .kg-related{ display:block; margin-block:var(--s16) var(--s10); padding-block:var(--s10); border-block-start:1px solid var(--line); } .kg-related-in{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s6); } .kg-related-h{ font-size:clamp(20px,2.6vw,26px); margin:0 0 var(--s2); } .kg-related-sub{ color:var(--muted); font-size:15px; margin:0 0 var(--s6); } .kg-related-grid{ display:grid; gap:var(--s3); list-style:none; padding:0; margin:0; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); } .kg-related-grid a{ display:flex; flex-direction:column; gap:var(--s1); min-height:64px; height:100%; padding:var(--s4) var(--s5); background:var(--white); border:1px solid var(--line); border-inline-start:3px solid var(--gold); border-radius:var(--r-sm); text-decoration:none; transition:transform var(--t), box-shadow var(--t), border-color var(--t); } .kg-related-grid a:hover{ transform:translateX(-4px); box-shadow:var(--e2); border-color:var(--gold); background:var(--gold-100); } html[dir="ltr"] .kg-related-grid a:hover{ transform:translateX(4px); } .kg-related-t{ font-weight:800; font-size:14.5px; color:var(--g-800); line-height:1.55; } .kg-related-c{ font-size:11.5px; color:var(--muted); font-weight:600; } /* ───────── فوتر ───────── */ .kg-footer{ display:block !important; /* فوترِ قدیمی display:none بود */ margin-block-start:var(--s16); padding-block:var(--s16) var(--s6); background:linear-gradient(180deg,var(--g-900),#04180f); color:#cfe0d6; } .kg-footer .container{ max-width:var(--wrap); } .kg-footer-grid{ display:grid; gap:var(--s8); grid-template-columns:1.5fr repeat(auto-fit,minmax(158px,1fr)); } @media (max-width:900px){ .kg-footer-grid{ grid-template-columns:1fr 1fr; }} @media (max-width:560px){ .kg-footer-grid{ grid-template-columns:1fr; gap:var(--s6); }} .kg-footer-logo{ display:flex; align-items:center; gap:var(--s2); font-weight:900; font-size:16px; color:#fff; margin-block-end:var(--s3); } .kg-footer-logo img{ width:40px; height:40px; } .kg-footer-brand p{ color:#a9c4b6; font-size:14px; line-height:2; margin:0 0 var(--s4); } .kg-footer-tel{ list-style:none; padding:0; margin:0; display:grid; gap:var(--s1); } .kg-footer-tel a{ display:inline-flex; align-items:center; gap:var(--s2); min-height:40px; color:var(--gold-400); font-weight:700; font-size:14.5px; text-decoration:none; direction:ltr; } .kg-footer-tel a:hover{ color:#fff; } .kg-footer-col h4{ color:#fff; font-size:14.5px; margin:0 0 var(--s4); font-weight:800; } .kg-footer-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:2px; } .kg-footer-col a{ display:block; min-height:36px; padding-block:var(--s1); color:#a9c4b6; font-size:13.5px; text-decoration:none; line-height:1.75; transition:color var(--t), padding-inline-start var(--t); } .kg-footer-col a:hover{ color:var(--gold-400); padding-inline-start:var(--s2); } .kg-footer-bottom{ margin-block-start:var(--s10); padding-block-start:var(--s5); border-block-start:1px solid rgba(255,255,255,.09); color:#7e9a8c; font-size:12.5px; text-align:center; } .kg-sticky-cta .btn{ flex:1; min-height:50px; font-size:15px; padding-inline:var(--s4); } @media (max-width:820px){ body{ padding-bottom:76px; }} img{ max-width:100%; height:auto; } table{ border-collapse:collapse; width:100%; } .kg-scroll-x,.admin-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* هرگز اسکرولِ افقیِ کلِ صفحه */ html,body{ overflow-x:clip; } /* چاپ: فقط محتوا */ @media print{ header,.kg-sticky-cta,.kg-related,.kg-footer,.nav-toggle{ display:none !important; } body{ background:#fff; color:#000; }} .hm-quick > .container{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s8) var(--s6); box-shadow:var(--e5); text-align:center; } /* ── خدمات ── */ .hm-svc-grid{ display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); } .hm-svc-card{ display:flex; flex-direction:column; gap:var(--s2); padding:var(--s6); background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); text-decoration:none; box-shadow:var(--e1); transition:var(--t); } .hm-svc-card:hover{ transform:translateY(-5px); box-shadow:var(--e4); border-color:var(--gold-400); } .hm-svc-i{ font-size:34px; line-height:1.1; } .hm-svc-card h3{ font-size:18.5px; margin:0; } .hm-svc-card p{ font-size:14px; line-height:1.95; margin:0; flex:1; } .hm-svc-spec{ list-style:none; padding:0; margin:var(--s2) 0 0; display:grid; gap:var(--s1); } .hm-svc-spec li{ font-size:12.5px; color:var(--muted); font-weight:600; } /* ── آیکونِ یکپارچه به‌جای اموجی ── اموجی روی هر سیستم‌عامل شکل و رنگِ خودش را دارد و با طلاییِ سایت نمی‌خواند. این‌ها SVGِ خطیِ خودِ سایت‌اند، پس همه‌جا یک‌شکل‌اند. vertical-align روی ‑.18em می‌نشیند تا با خطِ فارسی هم‌تراز شود. */ .kg-ic{ width:1.15em; height:1.15em; vertical-align:-.18em; display:inline-block; flex:none; } .hm-svc-spec li .kg-ic{ margin-inline-end:5px; } .kg-ic-lg{ width:38px; height:38px; vertical-align:middle; } .svc-spec-i .kg-ic{ width:22px; height:22px; vertical-align:middle; } .hm-svc-go{ font-size:13.5px; font-weight:800; color:var(--g-600); margin-block-start:var(--s3); } /* ── مسیرها ── */ .hm-routes{ background:var(--paper-2); } .hm-rt-grid{ display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } .hm-rt{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:74px; padding:var(--s4) var(--s5); background:var(--white); border:1px solid var(--line); border-inline-start:4px solid var(--gold); border-radius:var(--r-sm); text-decoration:none; transition:var(--t); } .hm-rt:hover{ transform:translateX(-4px); box-shadow:var(--e3); border-color:var(--gold); } html[dir="ltr"] .hm-rt:hover{ transform:translateX(4px); } .hm-rt-l{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.75; } .hm-rt-p{ font-size:21px; font-weight:900; color:var(--g-700); white-space:nowrap; direction:ltr; } .hm-rt-p small{ font-size:11.5px; font-weight:700; color:var(--muted); } .hm-rt-note{ margin:var(--s6) 0 0; font-size:13px; color:var(--muted); text-align:center; } /* ── مراحل ── */ .hm-step-grid{ display:grid; gap:var(--s5); list-style:none; padding:0; margin:0; counter-reset:none; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); } .hm-step-grid li{ position:relative; padding-block-start:var(--s8); text-align:center; } .hm-step-n{ position:absolute; inset-block-start:0; inset-inline-start:50%; transform:translateX(50%); width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--g-600),var(--g-800)); color:#fff; display:grid; place-items:center; font:900 20px inherit; box-shadow:var(--e2); } html[dir="ltr"] .hm-step-n{ transform:translateX(-50%); } .hm-step-grid h3{ font-size:16px; margin:var(--s4) 0 var(--s1); } .hm-step-grid p{ font-size:13.5px; color:var(--muted); margin:0; line-height:1.9; } /* ── اعتماد ── */ .hm-trust{ background:var(--g-900); } .hm-trust .section-head h2{ color:#fff; } .hm-trust-grid{ display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); } .hm-trust-c{ padding:var(--s6); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); text-align:center; transition:var(--t); } .hm-trust-c:hover{ background:rgba(255,255,255,.08); border-color:var(--gold); } .hm-trust-c span{ font-size:32px; line-height:1.2; } .hm-trust-c h3{ color:#fff; font-size:16.5px; margin:var(--s3) 0 var(--s1); } .hm-trust-c p{ color:#9fbfae; font-size:13px; margin:0; line-height:1.85; } /* ── پرداختِ پلکانی ── */ .hm-pay-grid{ display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(226px,1fr)); } .hm-pay-c{ padding:var(--s8) var(--s5); background:var(--white); border:2px solid var(--line); border-radius:var(--r-lg); text-align:center; transition:var(--t); } .hm-pay-c:hover{ border-color:var(--gold); box-shadow:var(--e3); } .hm-pay-c b{ display:block; font-size:40px; font-weight:900; color:var(--gold-600); line-height:1; direction:ltr; } .hm-pay-c h3{ font-size:16px; margin:var(--s3) 0 var(--s1); } .hm-pay-c p{ font-size:13px; color:var(--muted); margin:0; } /* ── مقصدها ── */ .hm-dest{ background:var(--paper-2); } .hm-dest-grid{ display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); } .hm-dest-c{ display:block; padding:var(--s6); background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); text-decoration:none; box-shadow:var(--e1); transition:var(--t); position:relative; overflow:hidden; } .hm-dest-c::before{ content:''; position:absolute; inset-block-start:0; inset-inline-end:0; width:88px; height:88px; border-radius:50%; background:radial-gradient(circle,rgba(201,162,39,.14),transparent 70%); transform:translate(30%,-30%); } .hm-dest-c:hover{ transform:translateY(-5px); box-shadow:var(--e4); border-color:var(--gold-400); } .hm-dest-c h3{ font-size:21px; margin:0 0 var(--s2); position:relative; } .hm-dest-c p{ font-size:13.5px; margin:0 0 var(--s4); line-height:1.9; } .hm-dest-c span{ font-size:13px; font-weight:800; color:var(--g-600); } /* ── فراخوانِ پایانی ── */ .hm-cta{ padding-block:var(--s20); background:linear-gradient(140deg,var(--g-800),var(--g-600) 60%,var(--g-900)); color:#fff; text-align:center; } .hm-cta h2{ color:#fff; margin:0 0 var(--s3); } .hm-cta p{ color:#cfe0d6; font-size:17px; margin:0 auto var(--s8); max-width:520px; } .hm-cta-b{ display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; } .hm-cta-tel{ color:#fff; border-color:rgba(255,255,255,.4); direction:ltr; } .hm-cta-tel:hover{ background:rgba(255,255,255,.1); } /* ============================================================ صفحاتِ داخلی — چیدمانِ بیزینسی بدونِ تغییرِ HTML؛ فقط با CSS روی همان نشانه‌گذاریِ موجود. ============================================================ */ /* ── سربندِ صفحه: اولین h1 داخلِ main ── */ main > .container > h1:first-child, main > section:first-of-type h1, main .page-head h1{ margin-block-end:var(--s4); } /* هر h1 که مستقیم زیرِ main یا اولین section است، یک نوارِ سرصفحه بگیرد */ main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed){ background:linear-gradient(155deg,var(--g-900) 0%,var(--g-700) 62%,var(--g-800) 100%); color:#fff; padding-block:var(--s16) var(--s12); position:relative; overflow:hidden; } main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed)::before{ content:''; position:absolute; inset-block-start:-130px; inset-inline-start:-100px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(201,162,39,.2),transparent 68%); } main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed) > *{ position:relative; } main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed) h1{ color:#fff; } main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed) h2, main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed) h3{ color:#f6f6f7; } main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed) p{ color:#cfe0d6; } main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed) a:not(.btn){ color:var(--gold-400); } /* ── ریتمِ بخش‌ها: یکی‌درمیان پس‌زمینه ── */ main > section:nth-of-type(even):not(:first-of-type):not(.hm-trust):not(.hm-cta){ background:var(--paper-2); } main > section{ padding-block:clamp(var(--s10),5.5vw,var(--s16)); } /* ── ستونِ خواندنی: متنِ بلند نباید تمام‌عرض باشد ── */ main > section p, main > section > .container > p, main > section li{ max-width:74ch; } main > section > .container > p, main > section > .container > ul, main > section > .container > ol{ margin-inline:auto; } main p{ margin-block:0 var(--s4); font-size:16px; line-height:2.05; } main h2{ margin-block:var(--s10) var(--s4); } main h3{ margin-block:var(--s6) var(--s3); } main ul:not(.kg-related-grid):not(.hm-quick-grid):not(.hm-svc-spec):not(.rz-trust):not(.svc-spec-grid):not(.kg-footer-tel):not(.kg-footer-col ul){ padding-inline-start:var(--s5); margin-block:0 var(--s5); } main ul:not([class]) li, main ol:not([class]) li{ margin-block-end:var(--s2); line-height:2; } main ul:not([class]){ list-style:none; padding-inline-start:0; } main ul:not([class]) li{ position:relative; padding-inline-start:var(--s6); } main ul:not([class]) li::before{ content:'▪'; position:absolute; inset-inline-start:0; color:var(--gold); font-size:17px; line-height:1.6; } /* ── جدول ── */ main table{ margin-block:var(--s5); background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; font-size:14.5px; box-shadow:var(--e1); } main table th{ background:var(--g-800); color:#fff; font-weight:800; padding:var(--s3) var(--s4); text-align:start; font-size:13.5px; } main table td{ padding:var(--s3) var(--s4); border-block-start:1px solid var(--line); } main table tr:nth-child(even) td{ background:var(--paper-2); } /* ── تصویر ── */ main img:not([class]){ border-radius:var(--r); box-shadow:var(--e2); } /* ── نقلِ قول و کادرِ تأکید ── */ main blockquote{ margin:var(--s6) 0; padding:var(--s5) var(--s6); background:var(--gold-100); border-inline-start:4px solid var(--gold); border-radius:var(--r-sm); font-size:15.5px; line-height:2; } /* ── پرسش‌های پرتکرار ── */ .faq-item{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); margin-block-end:var(--s3); overflow:hidden; transition:var(--t); } .faq-item:hover{ border-color:var(--gold-400); box-shadow:var(--e2); } .faq-q{ padding:var(--s4) var(--s5); font-weight:800; font-size:15.5px; color:var(--g-800); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:56px; } .faq-a{ padding:0 var(--s5) var(--s4); font-size:14.5px; line-height:2; color:var(--ink-2); } /* ── کارت‌های خدمات و مراحلِ قالبِ قدیمی ── */ .services-grid,.steps-grid,.cards-grid{ display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); } .stat-strip{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(146px,1fr)); padding-block:var(--s8); } .stat-card,.stat{ padding:var(--s5); background:var(--white); border:1px solid var(--line); border-radius:var(--r); text-align:center; box-shadow:var(--e1); } .stat .num,.stat-card .num{ display:block; font-size:32px; font-weight:900; color:var(--g-700); line-height:1.2; } .stat .lbl,.stat-card .lbl{ font-size:13px; color:var(--muted); font-weight:700; } /* ── هیروِ قدیمی: کمی مدرن‌تر ── */ .hero{ border-radius:0 0 var(--r-xl) var(--r-xl); overflow:hidden; } .hero-caption h1,.hero-inner h1{ text-shadow:0 2px 18px rgba(0,0,0,.45); } /* ── نوارِ اقدامِ چسبانِ موبایل ── */ .kg-bar{ position:fixed; inset-inline:0; bottom:0; z-index:880; display:none; gap:var(--s2); padding:var(--s2) var(--s3); padding-bottom:calc(var(--s2) + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--paper) 95%, transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-block-start:1px solid var(--line); box-shadow:0 -10px 28px -14px rgba(0,0,0,.26); } .kg-bar a{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:50px; border-radius:var(--r-sm); font-size:14.5px; font-weight:800; text-decoration:none; white-space:nowrap; } .kg-bar .kg-bar-1{ background:linear-gradient(135deg,var(--gold),var(--gold-400)); color:var(--g-900); } .kg-bar .kg-bar-2{ background:var(--g-800); color:#fff; direction:ltr; } @media (max-width:820px){ .kg-bar{ display:flex; } body{ padding-bottom:74px; } .kg-bale-fab,.kgc-fab{ bottom:86px !important; }} /* ============================================================ لایهٔ شرکتی — بازنویسیِ رنگ، هندسه و بافت بعد از همهٔ قواعدِ قبلی می‌آید، پس همین حاکم است. ============================================================ */ :root{ /* پالتِ محدودتر و عمیق‌تر — رنگِ کمتر، اعتمادِ بیشتر */ --g-900:#04211a; --g-800:#2a2a2a; --g-700:#3a3a3a; --g-600:#a9861c; --g-100:#e8f1ec; --g-050:#f4f9f6; --gold-700:#7c6620; --gold-600:#9a7d24; --gold:#b8952b; --gold-400:#d4b755; --gold-100:#f7f1dd; --ink:#101a16; --ink-2:#39443f; --muted:#6a7570; --line:#dfe4e1; --paper:#fbfcfb; --paper-2:#f3f6f4; --white:#fff; /* هندسهٔ شرکتی: گوشه‌های کم، سایه‌های تخت‌تر */ --r-xs:4px; --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:18px; --e1:0 1px 2px rgba(4,33,26,.05); --e2:0 2px 6px -1px rgba(4,33,26,.07), 0 1px 3px rgba(4,33,26,.05); --e3:0 8px 18px -6px rgba(4,33,26,.10), 0 2px 6px -2px rgba(4,33,26,.06); --e4:0 18px 34px -12px rgba(4,33,26,.14), 0 6px 12px -6px rgba(4,33,26,.08); --e5:0 32px 60px -20px rgba(4,33,26,.20); } @media (prefers-color-scheme: dark){ :root[data-theme="auto"]{ --ink:#e9efec; --ink-2:#bcc9c3; --muted:#8b9a93; --line:#20302a; --paper:#1a1a1a; --paper-2:#101c17; --white:#14211c; --g-100:#14291f; --g-050:#0f1f18; --gold-100:#241f13; }} /* آیکنِ واقعی به‌جای ایموجی */ .kg-ico{ width:34px; height:34px; display:block; object-fit:contain; } .hm-quick-i .kg-ico{ width:30px; height:30px; } .hm-svc-i .kg-ico{ width:38px; height:38px; } /* ── سربرگ: نوارِ تیرهٔ شرکتی، نه شیشه‌ای ── */ header{ background:var(--g-900); border-block-end:1px solid rgba(255,255,255,.07); backdrop-filter:none; -webkit-backdrop-filter:none; } header .logo{ color:#fff; } header nav > ul > li > a{ color:#c2d3ca; font-weight:600; } header nav > ul > li > a:hover, header nav > ul > li > a.active{ background:rgba(255,255,255,.08); color:#fff; } .nav-toggle{ background:transparent; border-color:rgba(255,255,255,.22); color:#fff; } .submenu{ background:var(--white); border-color:var(--line); } /* ── دکمه: تخت و جدی، بدونِ گرادیانِ براق ── */ .btn{ border-radius:var(--r-sm); font-weight:700; letter-spacing:-.1px; } .btn-gold{ background:var(--gold); color:#0b1a14; box-shadow:none; border-color:var(--gold); } .btn-gold:hover{ background:var(--gold-600); transform:none; box-shadow:var(--e2); } .btn-primary,.btn-green{ background:var(--g-800); box-shadow:none; } .btn-primary:hover,.btn-green:hover{ background:var(--g-700); transform:none; box-shadow:var(--e2); } .btn-outline{ border-width:1.5px; } /* ── eyebrow: بدونِ حباب، فقط خطِ بالا ── */ .eyebrow{ background:transparent; padding:0; border-radius:0; color:var(--gold-600); font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:none; border-block-start:2px solid var(--gold); padding-block-start:var(--s2); } /* ── کارت: مرزِ نازک، بدونِ بالا‌پریدن ── */ .card,.service-card,.kg-card,.hm-svc-card,.svc-spec-grid li,.hm-pay-c,.hm-dest-c{ border-radius:var(--r); box-shadow:none; border:1px solid var(--line); } .card:hover,.service-card:hover,.kg-card:hover,.hm-svc-card:hover, .svc-spec-grid li:hover,.hm-pay-c:hover,.hm-dest-c:hover{ transform:none; box-shadow:var(--e3); border-color:var(--g-600); } /* ── نوارِ رزروِ سریع: تختِ شرکتی ── */ .hm-quick > .container{ border-radius:var(--r-lg); box-shadow:var(--e4); } /* ── مقصدها با عکسِ واقعی ── */ .hm-dest-c{ padding:0; overflow:hidden; } .hm-dest-c::before{ display:none; } .hm-dest-img{ display:block; position:relative; aspect-ratio:16/10; background:var(--g-900); overflow:hidden; } .hm-dest-img img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92) contrast(1.04); transition:transform .5s var(--ease); } .hm-dest-c:hover .hm-dest-img img{ transform:scale(1.05); } .hm-dest-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(4,33,26,.62),rgba(4,33,26,0) 58%); } .hm-dest-c h3{ padding:var(--s5) var(--s5) 0; font-size:19px; } .hm-dest-c p{ padding-inline:var(--s5); font-size:13.5px; } .hm-dest-c span{ display:block; padding:0 var(--s5) var(--s5); } /* ── مسیرها: ردیفِ داده‌ای، نه کارتِ رنگی ── */ .hm-rt{ border-radius:var(--r-sm); border-inline-start-width:3px; } .hm-rt:hover{ transform:none; box-shadow:var(--e2); background:var(--g-050); } .hm-rt-p{ font-size:19px; color:var(--g-700); } /* ── پرداختِ پلکانی ── */ .hm-pay-c b{ color:var(--g-700); font-size:36px; } .hm-pay-c{ border-width:1px; } /* ── اعتماد: تیره و آرام ── */ .hm-trust{ background:var(--g-900); } .hm-trust-c{ border-radius:var(--r); background:rgba(255,255,255,.04); } .hm-trust-c .kg-ico{ filter:brightness(0) invert(1) opacity(.85); margin-inline:auto; } /* ── فراخوان: تختِ تیره ── */ .hm-cta{ background:var(--g-900); } /* ── هیرو: بدونِ گوشهٔ گرد ── */ .hero{ border-radius:0; } /* ── فوتر ── */ .kg-footer{ background:var(--g-900); } .kg-footer-col a{ color:#a5bcb2; } /* ── بخش‌های تیره: بدونِ دایرهٔ تزئینی ── */ .svc-hero::before, main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed)::before{ display:none; } .svc-hero{ background:var(--g-900); } main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed){ background:var(--g-900); } /* ── موتورِ رزرو: تختِ شرکتی ── */ #kgReserve{ border-radius:var(--r-lg); box-shadow:var(--e4); } .rz-head{ background:var(--g-900); } .rz-card{ border-radius:var(--r-sm); background:var(--white); border-color:var(--line); } .rz-card:hover{ transform:none; border-color:var(--g-600); box-shadow:var(--e2); } .rz-quote{ background:var(--g-900); border-radius:var(--r); } /* ── نوارِ جست‌وجوی نقطه‌به‌نقطه ── */ #kgSearch{ position:relative; } .sb-f{ position:relative; text-align:start; } .sb-f label{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.4px; color:var(--muted); margin-block-end:var(--s1); } .sb-f input{ min-height:52px; border-radius:var(--r-sm); border:1.5px solid var(--line); font-size:15px; font-weight:600; background:var(--white); } .sb-go{ min-height:52px; padding-inline:var(--s8); cursor:pointer; border:none; border-radius:var(--r-sm); background:var(--gold); color:#0b1a14; font:800 15.5px inherit; white-space:nowrap; } .sb-go:hover{ background:var(--gold-600); } .sb-sug li:hover,.sb-sug li.on{ background:var(--g-050); } .sb-kinds button.on{ background:var(--g-800); border-color:var(--g-800); } .sb-kinds button.on b{ color:#fff; } .sb-kinds button.on span{ color:#9fbfae; } /* ── تاریخ اربعین ── */ .kg-arb-date{ margin:var(--s6) 0; padding:var(--s6); background:linear-gradient(140deg,var(--g-900),var(--g-700)); border-radius:var(--r); text-align:center; color:#fff; } .kg-arb-big{ font-size:clamp(23px,3.6vw,33px); font-weight:900; color:var(--gold-400); line-height:1.4; } .kg-arb-alt{ font-size:14px; color:#9fbfae; margin-block-start:var(--s2); } .kg-arbaeen-cd{ margin-block-start:var(--s4); font-size:15.5px; font-weight:800; color:#fff; padding-block-start:var(--s4); border-block-start:1px solid rgba(255,255,255,.14); } /* ── جعبهٔ رزروِ متناسبِ صفحه ── */ .kg-cta-box{ display:block; margin-block:var(--s12) var(--s8); background:linear-gradient(140deg,var(--g-900),var(--g-700)); color:#fff; } .kg-cta-in{ max-width:var(--wrap); margin-inline:auto; padding:var(--s10) var(--s6); display:flex; align-items:center; justify-content:space-between; gap:var(--s8); flex-wrap:wrap; } .kg-cta-txt{ flex:1 1 300px; } .kg-cta-box h2{ color:#fff; font-size:clamp(19px,2.7vw,26px); margin:0 0 var(--s2); } .kg-cta-box p{ color:#a9c4b6; font-size:14.5px; margin:0; max-width:52ch; } .kg-cta-btns{ display:flex; gap:var(--s3); flex-wrap:wrap; } .kg-cta-btns .btn-outline{ color:#fff; border-color:rgba(255,255,255,.34); } .kg-cta-btns .btn-outline:hover{ background:rgba(255,255,255,.1); } @media (max-width:640px){ .kg-cta-in{ padding-block:var(--s8); } .kg-cta-btns{ width:100%; } .kg-cta-btns .btn{ flex:1; }} /* ── فوتر: کمتر دیده شود، ولی لینک‌ها سرِ جایشان بمانند ── حذفِ لینک از فوتر یعنی حذفش از هر ۹۹ صفحه و یتیم‌شدنِ آن صفحه. پس حجمِ دیداری با فشرده‌سازی کم می‌شود، نه با کم‌کردنِ لینک. */ .kg-footer{ padding-block:var(--s10) var(--s5); margin-block-start:var(--s10); } .kg-footer-grid{ gap:var(--s5) var(--s6); } .kg-footer-col h4{ font-size:13px; margin-block-end:var(--s2); opacity:.92; } .kg-footer-col a{ font-size:12.5px; min-height:0; padding-block:1px; line-height:1.95; } .kg-footer-col ul{ gap:0; } .kg-footer-brand p{ font-size:13px; line-height:1.9; margin-block-end:var(--s3); } .kg-footer-brand{ max-width:340px; } .kg-footer-tel a{ min-height:32px; font-size:13.5px; } .kg-footer-bottom{ margin-block-start:var(--s6); padding-block-start:var(--s4); font-size:12px; } /* موبایل: هر ستون یک آکاردئون — فوتر از دیوارِ متن به چند سطرِ تمیز تبدیل می‌شود */ @media (max-width:720px){ .kg-footer-grid{ grid-template-columns:1fr; gap:0; } .kg-footer-brand{ max-width:none; margin-block-end:var(--s5); } .kg-footer-col{ border-block-start:1px solid rgba(255,255,255,.09); } .kg-footer-col h4{ display:flex; align-items:center; justify-content:space-between; margin:0; padding-block:var(--s4); cursor:pointer; font-size:14px; } .kg-footer-col h4::after{ content:'＋'; font-size:15px; opacity:.6; transition:transform var(--t); } .kg-footer-col.open h4::after{ content:'－'; } .kg-footer-col ul{ max-height:0; overflow:hidden; transition:max-height .28s var(--ease); } .kg-footer-col.open ul{ max-height:440px; padding-block-end:var(--s3); } .kg-footer-col a{ font-size:13.5px; padding-block:var(--s1); }} /* ============================================================ منو — خوانایی و کنترل از پنل ------------------------------------------------------------ رنگ‌ها با متغیر تعریف می‌شوند تا از «ویرایش بصری ← منو» قابلِ تغییر باشند. مقدارِ پیش‌فرض کنتراستِ حداقل ۷:۱ دارد. ============================================================ */ /* ⚠ بازتنظیم برای تمِ سفید (۲۰۲۶-۰۸-۱۲) — اندازه‌گیری‌شده با مرورگر. این متغیرها برای هدرِ تیرهٔ قدیم نوشته شده بودند. وقتی سایت سفید شد، پس‌زمینه‌ها سفید شدند ولی رنگِ متن روی مقدارِ روشنِ قبلی ماند و قاعدهٔ «color:var(--sub-fg) !important» زیرمنو را سفیدِ روی سفید کرد: نسبتِ خوانایی ۱٫۱۳ در برابرِ حدِ ۴٫۵ — یعنی عملاً نامرئی. مقادیرِ نو همگی بالای ۶ سنجیده شده‌اند. */ :root{ --nav-bg:#ffffff; /* پس‌زمینهٔ نوار */ --nav-fg:#333333; /* متنِ آیتم — ۱۲٫۶ روی سفید */ --nav-fg-hover:#000000; --nav-hover-bg:#f2f2f2; --nav-active:#8a6d16; /* آیتمِ فعال — طلاییِ تیره، ۶٫۱ روی سفید */ --nav-border:rgba(0,0,0,.10); --sub-bg:#ffffff; /* پس‌زمینهٔ زیرمنو */ --sub-fg:#333333; --sub-fg-hover:#000000; --sub-hover-bg:#f4f4f4; --sub-border:rgba(0,0,0,.12); --nav-size:14.5px; --sub-size:13.8px; --nav-weight:700; --nav-radius:8px; } /* نوارِ اصلی — انتخابگرها عمداً بلندند تا بر style.css غلبه کنند */ header{ background:var(--nav-bg); border-block-end:1px solid var(--nav-border); } header nav ul li a, header nav > ul > li > a{ color:var(--nav-fg); font-size:var(--nav-size); font-weight:var(--nav-weight); border-radius:var(--nav-radius); } header nav ul li a:hover, header nav > ul > li > a:hover{ color:var(--nav-fg-hover); background:var(--nav-hover-bg); } header nav ul li a.active, header nav > ul > li > a.active{ color:var(--nav-active); background:var(--nav-hover-bg); } header .logo{ color:var(--nav-fg); } header nav ul li.has-sub > a .sub-caret{ opacity:.9; color:var(--nav-active); } /* زیرمنو — بیشترین ایرادِ خوانایی این‌جا بود */ header nav ul ul.submenu, header .submenu{ background:var(--sub-bg) !important; border:1px solid var(--sub-border) !important; border-radius:12px; box-shadow:0 18px 44px -14px rgba(0,0,0,.6); padding:7px; } header nav ul ul.submenu li a, header .submenu a{ color:var(--sub-fg) !important; font-size:var(--sub-size); font-weight:600; padding:9px 13px; border-radius:7px; line-height:1.75; } header nav ul ul.submenu li a:hover, header .submenu a:hover{ background:var(--sub-hover-bg) !important; color:var(--sub-fg-hover) !important; font-weight:800; } /* منوی موبایل — همان رنگ‌ها، بدونِ شفافیتِ گمراه‌کننده */ @media(max-width:1024px){ header nav > ul{ background:var(--nav-bg); } header nav ul li a{ color:var(--nav-fg); } header nav ul ul.submenu{ background:rgba(255,255,255,.05) !important; border:none !important; }} /* ── حالتِ ویرایشگر: قابِ ویرایش همیشه باریک‌تر از ۱۲۵۰px است، پس منوی موبایل روشن می‌شد و کاربر فقط یک همبرگر می‌دید. با این کلاس روی داخلِ قاب، چیدمانِ دسکتاپ برمی‌گردد و منو قابلِ استایل‌دهی می‌شود. ── */ html.kg-edit-desktop header nav > ul{ display:flex !important; flex-direction:row !important; position:static !important; inset:auto !important; width:auto !important; max-height:none !important; background:transparent !important; padding:0 !important; transform:none !important; opacity:1 !important; visibility:visible !important; box-shadow:none !important; overflow:visible !important; } html.kg-edit-desktop header nav > ul > li{ width:auto !important; border:none !important; } html.kg-edit-desktop .nav-toggle{ display:none !important; } /* داخلِ ویرایشگر زیرمنو هرگز با hover باز نمی‌شود. نسخهٔ قبلی با هر حرکتِ موس یک زیرمنوی ۷۰vh را روی محتوا می‌انداخت و عملاً هیچ کلیکی به صفحه نمی‌رسید — ویرایشگر فلج می‌شد. بازشدن فقط با کلیدِ «بازنگه‌داشتنِ زیرمنوها» (kg-open) است، آن هم به‌صورتِ درجا (static) زیرِ همان آیتم، نه شناور روی محتوا. */ html.kg-edit-desktop header nav > ul{ flex-wrap:wrap !important; } html.kg-edit-desktop nav ul li.has-sub::after{ content:none !important; } html.kg-edit-desktop nav ul ul.submenu{ display:none !important; } html.kg-edit-desktop nav ul li.has-sub:hover > ul.submenu{ display:none !important; } html.kg-edit-desktop nav ul li.has-sub.kg-open > ul.submenu{ display:flex !important; position:static !important; flex-direction:column !important; inset:auto !important; min-width:0 !important; max-height:none !important; box-shadow:none !important; width:100% !important; } /* ============================================================ عکس با کپشن —
استانداردِ HTML همهٔ تنظیمات با متغیر، تا از ویرایشگر قابلِ کنترل باشد. ============================================================ */ .kg-fig{ --fig-ratio:16/10; --fig-fit:cover; --fig-radius:10px; --fig-shadow:1; --fig-cap-size:14px; --fig-cap-align:start; margin:var(--s6) 0; padding:0; } .kg-fig-link{ display:block; text-decoration:none; color:inherit; } .kg-fig-media{ display:block; position:relative; overflow:hidden; border-radius:var(--fig-radius); background:var(--paper-2); aspect-ratio:var(--fig-ratio); } .kg-fig-media img{ width:100%; height:100%; display:block; object-fit:var(--fig-fit); transition:transform .5s var(--ease), filter .3s var(--ease); } .kg-fig-cap{ display:block; padding-block-start:var(--s3); text-align:var(--fig-cap-align); font-size:var(--fig-cap-size); } .kg-fig-t{ display:block; font-weight:800; color:var(--g-800); line-height:1.55; font-size:1.08em; } .kg-fig-d{ display:block; color:var(--muted); line-height:1.9; margin-block-start:2px; font-size:.94em; } .kg-fig-go{ display:inline-block; margin-block-start:var(--s2); font-weight:800; color:var(--g-600); font-size:.9em; } .kg-fig-btn{ display:inline-flex; align-items:center; min-height:40px; margin-block-start:var(--s3); padding:0 var(--s5); background:var(--g-800); color:#fff; border-radius:var(--r-sm); font-weight:800; font-size:.92em; text-decoration:none; } .kg-fig-btn:hover{ background:var(--g-700); } /* عمقِ سایه — پنج پله */ .kg-fig[style*="--fig-shadow:1"] .kg-fig-media{ box-shadow:var(--e1); } .kg-fig[style*="--fig-shadow:2"] .kg-fig-media{ box-shadow:var(--e2); } .kg-fig[style*="--fig-shadow:3"] .kg-fig-media{ box-shadow:var(--e3); } .kg-fig[style*="--fig-shadow:4"] .kg-fig-media{ box-shadow:var(--e4); } .kg-fig[style*="--fig-shadow:5"] .kg-fig-media{ box-shadow:var(--e5); } /* جای کپشن */ .kg-fig.cap-over .kg-fig-link,.kg-fig.cap-over{ position:relative; } .kg-fig.cap-over .kg-fig-cap{ position:absolute; inset-inline:0; inset-block-end:0; z-index:2; padding:var(--s8) var(--s5) var(--s5); background:linear-gradient(to top,rgba(4,33,26,.88),rgba(4,33,26,0)); color:#fff; border-end-start-radius:var(--fig-radius); border-end-end-radius:var(--fig-radius); } .kg-fig.cap-over .kg-fig-t{ color:#fff; } .kg-fig.cap-over .kg-fig-d{ color:#c9dbd1; } .kg-fig.cap-side .kg-fig-link,.kg-fig.cap-side{ display:grid; grid-template-columns:minmax(180px,40%) 1fr; gap:var(--s6); align-items:center; } .kg-fig.cap-side .kg-fig-cap{ padding-block-start:0; } @media (max-width:640px){ .kg-fig.cap-side .kg-fig-link,.kg-fig.cap-side{ grid-template-columns:1fr; gap:var(--s4); }} /* افکتِ هاور */ .kg-fig.fx-zoom:hover .kg-fig-media img{ transform:scale(1.06); } .kg-fig.fx-lift{ transition:transform var(--t), box-shadow var(--t); } .kg-fig.fx-lift:hover{ transform:translateY(-4px); } .kg-fig.fx-dim:hover .kg-fig-media img{ filter:brightness(.72); } .kg-fig.fx-none:hover .kg-fig-media img{ transform:none; filter:none; } /* چیدمان‌های آماده */ .kg-fig-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:var(--s3); transition:border-color var(--t), box-shadow var(--t); } .kg-fig-card:hover{ border-color:var(--gold); box-shadow:var(--e2); } .kg-fig-card .kg-fig-cap{ padding:var(--s3) var(--s2) var(--s2); } .kg-fig-overlay{ --fig-ratio:4/3; } .kg-fig-overlay .kg-fig-cap{ position:absolute; inset-inline:0; inset-block-end:0; padding:var(--s10) var(--s5) var(--s5); background:linear-gradient(to top,rgba(4,33,26,.9),rgba(4,33,26,0)); color:#fff; } .kg-fig-overlay .kg-fig-link{ position:relative; display:block; } .kg-fig-overlay .kg-fig-t{ color:#fff; font-size:1.25em; } .kg-fig-overlay .kg-fig-d{ color:#c9dbd1; } .kg-fig-side{ display:grid; grid-template-columns:minmax(200px,42%) 1fr; gap:var(--s6); align-items:center; } .kg-fig-side .kg-fig-cap{ padding-block-start:0; } @media (max-width:700px){ .kg-fig-side{ grid-template-columns:1fr; }} .kg-fig-wide{ --fig-ratio:21/9; } .kg-fig-wide .kg-fig-cap{ text-align:center; color:var(--muted); font-size:13px; } .kg-fig-quote{ --fig-ratio:1/1; display:grid; grid-template-columns:132px 1fr; gap:var(--s5); align-items:center; padding:var(--s5); background:var(--paper-2); border-inline-start:3px solid var(--gold); border-radius:var(--r); } .kg-fig-quote .kg-fig-media{ border-radius:50%; } .kg-fig-quote .kg-fig-q{ display:block; font-size:16px; line-height:2; color:var(--ink); } .kg-fig-quote .kg-fig-cap{ padding-block-start:0; } @media (max-width:600px){ .kg-fig-quote{ grid-template-columns:1fr; text-align:center; } .kg-fig-quote .kg-fig-media{ width:120px; margin-inline:auto; }} .kg-fig-grid{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:var(--s6) 0; } .kg-fig-grid .kg-fig{ margin:0; } /* ============================================================ فوتر — ستون‌بندیِ صریح ------------------------------------------------------------ ایرادِ قبلی: grid-template-columns:1.5fr repeat(auto-fit,minmax(158px,1fr)) ــ auto-fit وقتی کنارِ یک ستونِ ثابت می‌آید، عرضِ باقی‌مانده را درست حساب نمی‌کند و همهٔ ستون‌ها زیرِ هم می‌افتند. با شمارشِ صریحِ ستون‌ها در هر اندازهٔ صفحه، این اتفاق نمی‌افتد. ============================================================ */ .kg-footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 1fr 1fr; gap:var(--s5) var(--s5); align-items:start; } @media (max-width:1180px){ .kg-footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; }} @media (max-width:940px) { .kg-footer-grid{ grid-template-columns:1fr 1fr 1fr 1fr; }} @media (max-width:760px) { .kg-footer-grid{ grid-template-columns:1fr 1fr 1fr; }} /* ستونِ برند در صفحهٔ کوچک، تمامِ عرض */ @media (max-width:940px){ .kg-footer-brand{ grid-column:1 / -1; max-width:none; }} /* موبایل: یک ستون + آکاردئون */ @media (max-width:720px){ .kg-footer-grid{ grid-template-columns:1fr; gap:0; } .kg-footer-brand{ grid-column:auto; margin-block-end:var(--s5); }} /* لینک‌ها فشرده‌تر تا ستون بلند نشود */ .kg-footer-col ul{ display:grid; gap:0; } .kg-footer-col li{ margin:0; } .kg-footer-col a{ display:block; padding-block:2px; line-height:1.85; } /* ============================================================ فوتر — بازچینشِ نهایی ------------------------------------------------------------ ایرادِ قبلی: ۷ ستون در عرضِ ۱۱۸۰px یعنی هر ستون ~۱۴۰px. برچسبِ فارسی مثلِ «خرید بلیط با انتخاب صندلی» در ۱۴۰px سه خط می‌شود و فوتر به هم می‌ریزد. راه‌حل: ستونِ برند به ردیفِ خودش می‌رود (افقی، کنارِ هم)، و ستون‌های لینک زیرش با عرضِ ~۲۷۰px می‌نشینند — یعنی هر برچسب یک خط. ============================================================ */ .kg-footer-grid{ display:block; /* گریدِ قبلی خنثی می‌شود */ } /* ── ردیفِ برند: لوگو و معرفی و تلفن‌ها، افقی ── */ .kg-footer-brand{ display:grid; grid-template-columns:minmax(240px,1.4fr) minmax(200px,auto); gap:var(--s5) var(--s10); align-items:start; max-width:none; padding-block-end:var(--s6); margin-block-end:var(--s6); border-block-end:1px solid rgba(255,255,255,.09); } .kg-footer-brand p{ grid-column:1; margin:0; max-width:56ch; } .kg-footer-logo{ grid-column:1; } .kg-footer-tel{ grid-column:2; grid-row:1 / span 2; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); align-content:start; } .kg-footer-tel a{ white-space:nowrap; } @media (max-width:820px){ .kg-footer-brand{ grid-template-columns:1fr; gap:var(--s4); } .kg-footer-brand p{ max-width:none; } .kg-footer-tel{ grid-column:1; grid-row:auto; }} /* ── ستون‌های لینک: چهارتایی، عرضِ کافی برای یک‌خطی‌بودن ── */ .kg-footer .container > .kg-footer-grid{ display:block; } .kg-footer-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s6) var(--s8); } @media (max-width:1000px){ .kg-footer-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }} @media (max-width:760px) { .kg-footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }} @media (max-width:520px) { .kg-footer-cols{ grid-template-columns:1fr; gap:0; }} .kg-footer-col{ min-width:0; } .kg-footer-col h4{ font-size:13.5px; font-weight:800; color:#fff; margin:0 0 var(--s3); padding-block-end:var(--s2); border-block-end:1px solid rgba(255,255,255,.12); } .kg-footer-col ul{ display:grid; gap:0; list-style:none; padding:0; margin:0; } .kg-footer-col a{ display:block; padding-block:3px; font-size:13px; line-height:1.75; color:#a9c4b6; /* برچسبِ بلند به‌جای شکستنِ بد، با سه‌نقطه کوتاه می‌شود */ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kg-footer-col a:hover{ color:var(--gold-400); padding-inline-start:0; } /* موبایل: آکاردئون — برچسب کامل دیده شود، بدونِ سه‌نقطه */ @media (max-width:520px){ .kg-footer-col{ border-block-start:1px solid rgba(255,255,255,.09); } .kg-footer-col h4{ display:flex; align-items:center; justify-content:space-between; margin:0; padding-block:var(--s4); cursor:pointer; border-block-end:none; font-size:14px; } .kg-footer-col h4::after{ content:'＋'; font-size:15px; opacity:.6; } .kg-footer-col.open h4::after{ content:'－'; } .kg-footer-col ul{ max-height:0; overflow:hidden; transition:max-height .28s var(--ease); } .kg-footer-col.open ul{ max-height:520px; padding-block-end:var(--s3); } .kg-footer-col a{ white-space:normal; overflow:visible; font-size:13.5px; padding-block:var(--s1); }} /* شش ستون در گریدِ چهارتایی نامتوازن می‌شود (۴ + ۲). سه‌تایی: دو ردیفِ کاملِ ۳تایی، هر ستون ~۳۶۰px — یعنی هر برچسبِ فارسی در یک خط جا می‌شود و دیگر نیازی به کوتاه‌کردن با سه‌نقطه نیست. */ .kg-footer-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s8) var(--s10); } @media (max-width:900px){ .kg-footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6); }} @media (max-width:560px){ .kg-footer-cols{ grid-template-columns:1fr; gap:0; }} /* با عرضِ کافی، متن کامل نوشته می‌شود نه با سه‌نقطه */ .kg-footer-col a{ white-space:normal; overflow:visible; text-overflow:clip; font-size:13.2px; line-height:1.9; padding-block:2.5px; } .kg-footer-col h4{ font-size:14px; margin-block-end:var(--s3); } /* آکاردئونِ موبایل — همان نقطهٔ شکستِ گرید */ @media (max-width:560px){ .kg-footer-col{ border-block-start:1px solid rgba(255,255,255,.09); } .kg-footer-col h4{ display:flex; align-items:center; justify-content:space-between; margin:0; padding-block:var(--s4); cursor:pointer; border-block-end:none; } .kg-footer-col h4::after{ content:'＋'; font-size:15px; opacity:.6; } .kg-footer-col.open h4::after{ content:'－'; } .kg-footer-col ul{ max-height:0; overflow:hidden; transition:max-height .28s var(--ease); } .kg-footer-col.open ul{ max-height:560px; padding-block-end:var(--s3); }} @media (min-width:561px){ /* روی دسکتاپ آکاردئون نباشد — همه باز */ .kg-footer-col ul{ max-height:none !important; overflow:visible !important; } .kg-footer-col h4{ cursor:default; } .kg-footer-col h4::after{ content:none; }} /* عمقِ سایهٔ عکس — با کلاس، تا از پنل قابلِ کنترل باشد (انتخابگرِ قبلی به فاصلهٔ داخلِ style حساس بود و هرگز نمی‌خورد) */ .kg-fig.sh-0 .kg-fig-media{ box-shadow:none; } .kg-fig.sh-1 .kg-fig-media{ box-shadow:var(--e1); } .kg-fig.sh-2 .kg-fig-media{ box-shadow:var(--e2); } .kg-fig.sh-3 .kg-fig-media{ box-shadow:var(--e3); } .kg-fig.sh-4 .kg-fig-media{ box-shadow:var(--e4); } .kg-fig.sh-5 .kg-fig-media{ box-shadow:var(--e5); } /* ═══════════════════════════════════════════════════════════════════ ویجتِ «سفرِ من» — رزروِ چندمسیرهٔ عتبات روی صفحهٔ اصلی (js/trip-builder.js) چرا این‌جا: ظرفِ ویجت (#kgSearch) داخلِ کارتِ سفیدِ .hm-quick است، پس این بلوک هیچ کارتِ سفیدِ تازه‌ای روی کارتِ سفید نمی‌گذارد. عمق با --paper-2 و --g-050 ساخته می‌شود تا در حالتِ شب هم درست بماند. هیچ رنگِ سفت‌نوشته‌ای نیست جز متنِ روی سبزِ تیره، که در هر دو تم تیره است. ═══════════════════════════════════════════════════════════════════ */ .tb{ text-align:start; /* کارتِ والد وسط‌چین است؛ فرم نباید وسط‌چین باشد */ direction:rtl; color:var(--ink); font-size:14.5px; line-height:1.9; } .tb *{ box-sizing:border-box; } /* ── متنِ سبزِ تأکیدی ── پالتِ سایت --g-600..--g-900 را در حالتِ شب روشن نمی‌کند (فقط --ink و --paper و --white عوض می‌شوند). یعنی «سبزِ تیره روی زمینهٔ تیره» ⇒ نامرئی. پس این ویجت متنِ تأکیدی‌اش را از یک توکنِ محلی می‌گیرد که در شب روشن می‌شود. زمینه‌ها همچنان از --g-800 می‌آیند، چون آن‌ها باید تیره بمانند. */ .tb{ --tb-h:var(--g-800); --tb-h2:var(--g-700); --tb-gold-t:var(--gold-700); } @media (prefers-color-scheme: dark){ :root[data-theme="auto"] .tb{ --tb-h:#dcc986; --tb-h2:#d1ba6f; --tb-gold-t:var(--gold-400); }} :root[data-theme="dark"] .tb{ --tb-h:#dcc986; --tb-h2:#d1ba6f; --tb-gold-t:var(--gold-400); } :root[data-theme="light"] .tb{ --tb-h:var(--g-800); --tb-h2:var(--g-700); --tb-gold-t:var(--gold-700); } /* هر عنصری که display دارد، [hidden] را می‌بلعد. این یک خط جلوی آن را می‌گیرد. */ .tb [hidden]{ display:none !important; } .tb :focus-visible{ outline:2px solid var(--gold-600); outline-offset:2px; border-radius:var(--r-xs); } /* ───────── بخش‌های شماره‌دار ───────── */ .tb-sec{ padding-block:var(--s6); border-block-start:1px solid var(--line); } .tb-sec:first-child{ border-block-start:none; padding-block-start:0; } .tb-n{ flex:none; width:30px; height:30px; border-radius:var(--r-full); background:var(--g-800); color:var(--gold-400); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; line-height:1; margin-block-start:3px; } .tb-v{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; min-height:112px; padding:var(--s4) var(--s2); background:var(--paper-2); border:2px solid transparent; border-radius:var(--r); cursor:pointer; font-family:inherit; color:inherit; transition:var(--t); } .tb-v:hover{ background:var(--white); border-color:var(--line); transform:translateY(-2px); box-shadow:var(--e2); } .tb-v.on{ background:var(--gold-100); border-color:var(--gold); box-shadow:var(--e2); } .tb-v.on::after{ content:'✓'; position:absolute; inset-block-start:6px; inset-inline-end:8px; width:19px; height:19px; border-radius:var(--r-full); background:var(--gold); color:var(--g-900); font-size:11px; font-weight:900; line-height:19px; text-align:center; } .tb-m{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:var(--s3) var(--s4); background:var(--paper-2); border:2px solid transparent; border-radius:var(--r); cursor:pointer; font-family:inherit; color:inherit; text-align:start; transition:var(--t); } .tb-m:hover{ background:var(--white); border-color:var(--line); } .tb-m b{ font-size:14px; font-weight:800; color:var(--tb-h); line-height:1.6; } .tb-m span{ font-size:11.8px; color:var(--muted); line-height:1.7; } .tb-m.on{ background:var(--g-050); border-color:var(--g-600); } .tb-m-all.on{ background:var(--gold-100); border-color:var(--gold); } .tb-vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .tb-rt{ position:relative; margin:0; display:flex; align-items:center; gap:var(--s3); padding:var(--s3); background:var(--paper-2); border:1.5px solid transparent; border-radius:var(--r-sm); cursor:pointer; transition:var(--t); } .tb-rt[hidden]{ display:none; } .tb-rt:hover{ background:var(--white); border-color:var(--line); } .tb-rt.on{ background:var(--g-050); border-color:var(--g-600); } .tb-rt.on .tb-rt-b{ background:var(--g-700); border-color:var(--g-700); } .tb-rt.on .tb-rt-b::after{ content:''; position:absolute; inset-block-start:2px; inset-inline-start:6px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); } .tb-rt.on .tb-rt-p{ color:var(--tb-h); } .tb-f{ display:block; min-width:0; position:relative; margin:0; } .tb-f > label, .tb-f > span:first-child{ display:block; font-size:12.5px; font-weight:800; color:var(--ink-2); margin-block-end:6px; } .tb-f input, .tb-f select, .tb-f textarea{ width:100%; min-height:46px; padding:10px var(--s4); background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-sm); font-family:inherit; font-size:14px; color:var(--ink); transition:var(--t); } .tb-f textarea{ min-height:70px; resize:vertical; line-height:1.9; } .tb-f input:hover, .tb-f select:hover, .tb-f textarea:hover{ border-color:var(--g-100); } .tb-f input[aria-invalid="true"]{ border-color:var(--err); } .tb-g{ display:block; font-size:11.5px; color:var(--muted); margin-block-start:5px; min-height:17px; } .tb-pm{ flex:none; width:46px; min-height:46px; background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--r-sm); font-family:inherit; font-size:19px; font-weight:800; color:var(--tb-h); cursor:pointer; transition:var(--t); } .tb-pm:hover{ background:var(--g-050); border-color:var(--g-600); } /* پایانِ خوش */ .tb-done{ text-align:center; padding:var(--s6) var(--s4); } /* ───────── موبایل ───────── */ @media (max-width:900px){ .tb-grid{ grid-template-columns:1fr; gap:var(--s4); } /* فاکتور بالای فرم و چسبنده می‌شود؛ روی موبایل نوارِ ثابتِ پایینِ سایت (.kg-bar) و دکمه‌های شناور جا دارند، پس این‌جا بالا می‌چسبد نه پایین. */ .tb-sum{ order:-1; /* ۶۰px ≈ بلندیِ سربرگِ چسبندهٔ سایت، تا زیرش گم نشود. z-index از سربرگ (۹۰۰) کمتر است، پس سربرگ همیشه رو می‌ماند. */ position:sticky; top:60px; z-index:12; box-shadow:var(--e3); } .tb-sum-tog{ display:flex; align-items:center; gap:var(--s2); width:100%; min-height:52px; padding:0 var(--s4); background:var(--g-800); border:none; font-family:inherit; color:#fff; cursor:pointer; text-align:start; } .tb-sum-tog-l{ font-size:12.5px; opacity:.85; } .tb-sum-tog-v{ flex:1 1 auto; font-size:16px; font-weight:900; color:var(--gold-400); direction:ltr; text-align:start; font-variant-numeric:tabular-nums; } .tb-sum-tog-c{ flex:none; font-size:12px; font-weight:800; opacity:.9; text-decoration:underline; } .tb-sum-body{ display:none; } .tb-sum.open .tb-sum-body{ display:block; max-height:62vh; overflow-y:auto; } .tb-form{ grid-template-columns:1fr; } .tb-routes{ max-height:none; }} @media (max-width:560px){ .tb-v{ min-height:100px; }} /* ───────── ورودِ نرمِ بخش‌ها ───────── */ @media (prefers-reduced-motion: no-preference){ .tb-sec{ animation:tb-in .34s var(--ease) both; } .tb-sec:nth-child(2){ animation-delay:.04s; } .tb-sec:nth-child(3){ animation-delay:.08s; } .tb-sec:nth-child(4){ animation-delay:.12s; } @keyframes tb-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }} @media (prefers-reduced-motion: reduce){ .tb *, .tb *::before, .tb *::after{ animation:none !important; transition:none !important; } .tb-v:hover{ transform:none; }} /* ============================================================ تابلوی آویز — افزونهٔ بلوکیِ ویرایشگرِ بصری ------------------------------------------------------------ چرا این‌طور نوشته شده: نسخهٔ قبلی تابلو را با position:absolute زیرِ یک دکمهٔ مشخص می‌چسباند. نتیجه این شد که هر جدّی با overflow:hidden (مثلِ .hero) کارتِ عکس را می‌بُرید و فقط گره و طناب دیده می‌شد — همان «آویزِ خالی». این نسخه هیچ absolute ندارد: تابلو یک بلوکِ درون‌جریان است، پس جای خودش را می‌گیرد و هیچ‌وقت بریده نمی‌شود. برای همان حسِ «آویزان از چیزِ بالایی»، به‌جای absolute از --h-tuck استفاده می‌شود که تابلو را به‌اندازهٔ دلخواه بالا می‌کشد. همهٔ اندازه‌ها متغیرِ CSS‌اند تا پنلِ ویرایشگر بتواند زنده تغییرشان دهد. ============================================================ */ .kg-hang-block { --h-w: 220px; /* عرضِ تابلو */ --h-rope: 26px; /* طولِ طناب */ --h-tuck: 0px; /* چقدر بالا کشیده شود */ --h-radius: 14px; /* گردیِ گوشهٔ تابلو */ --h-swing: 3.8s; /* دورهٔ نوسان */ --h-gold: #c9a227; display: flex; flex-direction: column; align-items: center; width: max-content; max-width: 100%; margin-block: calc(-1 * var(--h-tuck)) 0; margin-inline: auto; position: relative; z-index: 5; } /* لایهٔ حرکت — عمداً جدا از خودِ بلوک. * * چرا: «جایگذاریِ آزاد»ِ ویرایشگر عنصر را با style.transform = translate(x,y) * جابه‌جا می‌کند. انیمیشنِ CSS در آبشار بر استایلِ درون‌خطی غلبه دارد، پس اگر * نوسان روی خودِ بلوک باشد، جابه‌جایی کاملاً بلعیده می‌شود: نه در ویرایشگر * تکان می‌خورد و نه — چون data-kg-free و transform در HTML ذخیره می‌شوند — * روی سایتِ زنده سرِ جای درست می‌نشیند. * با یک لایهٔ داخلی، transform بیرونی برای جابه‌جایی آزاد می‌ماند و transform * درونی فقط می‌چرخد. */ .kg-hang-block .kg-hang-sway { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 7px; /* لولا وسطِ گره تا نوسان طبیعی به‌نظر برسد */ animation: kgHangSwing var(--h-swing) ease-in-out infinite; will-change: transform; } /* تراز — در RTL «شروع» یعنی راست */ .kg-hang-block.al-start { margin-inline: 0 auto; } .kg-hang-block.al-center { margin-inline: auto; } .kg-hang-block.al-end { margin-inline: auto 0; } /* عنصرِ جای‌گذاری‌شدهٔ آزاد خودش موقعیت دارد؛ حاشیهٔ خودکار با آن می‌جنگد */ .kg-hang-block[data-kg-free="1"] { margin-inline: 0; } /* سرعتِ نوسان */ .kg-hang-block.sw-0 .kg-hang-sway { animation: none; } .kg-hang-block.sw-1 { --h-swing: 5.2s; } .kg-hang-block.sw-2 { --h-swing: 3.8s; } .kg-hang-block.sw-3 { --h-swing: 2.4s; } .kg-hang-block .kg-hang-knot { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffdf5, var(--h-gold) 68%, #8a6d14); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); flex: none; } .kg-hang-block .kg-hang-rope { width: 3px; height: var(--h-rope); margin-top: -3px; border-radius: 3px; background: linear-gradient(#e0c072, #9a7a34); flex: none; } .kg-hang-block .kg-hang-card { display: block; border-radius: var(--h-radius); overflow: hidden; background: #fff; border: 3px solid #fff; box-shadow: 0 18px 42px -12px rgba(11, 61, 46, .55), 0 4px 10px rgba(0, 0, 0, .18); transition: transform .2s ease; text-decoration: none; max-width: 100%; } .kg-hang-block .kg-hang-card:hover, .kg-hang-block .kg-hang-card:focus-visible { transform: scale(1.03); } .kg-hang-block .kg-hang-card img { display: block; width: var(--h-w); max-width: 100%; height: auto; } /* متنِ اختیاری روی تابلو — وقتی کاربر به‌جای عکس متن می‌خواهد */ .kg-hang-block .kg-hang-text { display: block; width: var(--h-w); max-width: 100%; box-sizing: border-box; padding: 16px 18px; text-align: center; font-weight: 800; line-height: 1.9; color: var(--green-deep, #8a6d16); background: linear-gradient(160deg, #fdf9ee, #fff); } .kg-hang-block .kg-hang-text small { display: block; margin-top: 4px; font-weight: 600; font-size: .82em; color: #5c6b62; } @keyframes kgHangSwing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } @media (max-width: 560px) { .kg-hang-block { --h-w: min(var(--h-w), 62vw); }} @media (prefers-reduced-motion: reduce) { .kg-hang-block .kg-hang-sway { animation: none; } .kg-hang-block .kg-hang-card { transition: none; }} /* چرخشِ شب — سه بلوک چون تعویض‌گرِ سایت data-theme را روی ریشه می‌گذارد و باید در هر دو جهت بر media-query غلبه کند (همان الگوی خطِ ۵۶ تا ۶۵) */ @media (prefers-color-scheme: dark){} @media (max-width:1023px){} /* روی موبایل: ردیفِ افقیِ چفت‌شونده به‌جای شبکه‌ای که ارتفاع می‌خورد */ @media (max-width:560px){} /* ───────── ۱۴) حرکت ───────── */ @keyframes tpIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } @keyframes tpOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(-4px) scale(.985); } } @keyframes tpDrop{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } } @keyframes tpSpin{ to{ transform:rotate(360deg); } } @keyframes tpShimmer{ to{ background-position:-220% 0; } } @keyframes tpUp{ from{ opacity:0; transform:translateY(100%); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){} /* ───────── ۱۵) پاسخ‌گویی ───────── */ /* ‏≥۱۴۴۰px — ستونِ فاکتور پهن‌تر، هوای بیشتر */ @media (min-width:1440px){} /* ۱۰۲۴ تا ۱۲۸۰ — ستونِ فاکتور جمع‌تر */ @media (max-width:1280px){} /* زیر ۱۰۲۴ — فاکتور از ستونِ کناری به نوارِ پایین تبدیل می‌شود */ @media (max-width:1023px){} /* ≤۶۴۰px — کارتِ روز جمع‌وجورتر */ @media (max-width:640px){} /* ≤۳۶۰px — گوشی‌های باریک، هیچ چیزی نباید سرریز کند */ @media (max-width:360px){} /* ≤۴۴۰px — کارت‌های وسیله باریک‌تر */ @media (max-width:440px){} /* ───────── ۱۶) چاپِ برنامه — زائر کاغذش را می‌خواهد ───────── */ @media print{} /* ───────── ۱۷) حالتِ کنتراستِ اجباریِ ویندوز ───────── */ @media (forced-colors: active){} /* ── موبایل ── */ @media (max-width:1023px){} /* ── حرکت، چاپ، کنتراستِ اجباری ── */ @media (prefers-reduced-motion: reduce){} /* ════════════════════════════════════════════════════════════ برنامه‌ریزِ سفر — لایهٔ تکمیلی برای کلاس‌هایی که JSِ نهایی می‌سازد ------------------------------------------------------------ چرا این لایه هست: استایلِ پایهٔ tp- پیش از قطعی‌شدنِ مارک‌آپِ نهاییِ ویجت نوشته شده بود و ~۴۵ کلاسِ واقعیِ خروجی را نداشت؛ از جمله .tp-aside که فرزندِ مستقیمِ گرید است (استایلِ قدیمی .tp-cart را مستقیم در گرید فرض می‌کرد و ستون‌بندی می‌شکست). همه‌چیز فقط با توکن‌های خودِ tp-wrap — هیچ رنگِ خامی این‌جا نیست. ════════════════════════════════════════════════════════════ */ /* ── ریشه و حالت‌های آغاز ── */ .tp{ position:relative; } @keyframes tpSpin{ to{ transform:rotate(360deg); } } @keyframes tpShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } } @media (max-width:1023px){} @media(max-width:900px){} @media(max-width:1023px){} @media(max-width:560px){} /* ════════════════════════════════════════════════════════════ صحنهٔ زندهٔ هیرو — الگوی علی‌بابا ------------------------------------------------------------ یک SVG واحد (hero-scene.svg) که js/hero-search.js داخلِ .hero تزریق می‌کند. همهٔ خودروها خاکستری‌اند؛ با انتخابِ هر خدمت، data-hs-veh روی .hero عوض می‌شود و فقط خودروی همان خدمت رنگی و پیدا می‌شود. کاملاً با CSS — بدونِ جاوااسکریپت برای رنگ. ════════════════════════════════════════════════════════════ */ .kg-hero-scene{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .kg-hero-scene svg{ position:absolute; inset:0; width:100%; height:100%; } /* پردهٔ سبز فقط وقتی صحنه واقعاً بار شده (has-scene). ⚠ قبلاً روی [data-hs-veh] هم بود؛ چون آن ویژگی حتی بدونِ صحنه ست می‌شود، وقتی فایلِ صحنه هنوز آپلود نشده بود، هیرو یک پردهٔ سبزِ تیره روی هیچ می‌گذاشت و صفحه سبزِ خالی می‌شد. حالا بدونِ صحنه هیچ پرده‌ای نیست. */ .hero.has-scene::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, color-mix(in srgb, var(--g-900) 26%, transparent) 0%, color-mix(in srgb, var(--g-900) 50%, transparent) 58%, color-mix(in srgb, var(--g-900) 70%, transparent) 100%); } .hero .hero-inner, .hero .container{ position:relative; z-index:3; } /* خودروها: غیرفعال محو، فعال طلایی و پیدا */ .kg-hero-scene .kg-veh{ color:#aeb8b1; opacity:0; transition:color .5s ease, opacity .5s ease; } .hero[data-hs-veh="taxi"] .kg-hero-scene #kg-taxi, .hero[data-hs-veh="transfer"] .kg-hero-scene #kg-transfer, .hero[data-hs-veh="van"] .kg-hero-scene #kg-van, .hero[data-hs-veh="minibus"] .kg-hero-scene #kg-minibus, .hero[data-hs-veh="bus"] .kg-hero-scene #kg-bus{ color:var(--gold) !important; opacity:1 !important; animation:kgFade .5s ease both; } /* بارگذاریِ اول: اتوبوس دیده شود تا صحنه خالی نباشد */ .hero:not([data-hs-veh]) .kg-hero-scene #kg-bus{ color:var(--gold); opacity:1; } @media (prefers-reduced-motion: reduce){ .hs-go, .hs-swap, .hs-tab, .hero[data-hs-veh]::after{ transition:none; }} /* عنوانِ فقط-برای-صفحه‌خوان — از سئو و دسترس‌پذیری کم نمی‌کند، فضا هم نمی‌گیرد */ .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ─── فوتر: جمع‌وجورتر ─── ۱۶ واحد فاصلهٔ بالا و پایین، فوتر را بی‌قواره بلند می‌کرد. auto-fit کنارِ ستونِ ثابت هم عرضِ ستون‌ها را نامتوازن می‌کرد. */ .kg-footer{ margin-block-start:var(--s10); padding-block:var(--s8) var(--s4); } .kg-footer-grid{ gap:var(--s6) var(--s8); grid-template-columns:1.6fr 1fr 1fr 1fr; } @media(max-width:1023px){ .kg-footer-grid{ grid-template-columns:1fr 1fr; }} @media(max-width:560px){ .kg-footer-grid{ grid-template-columns:1fr; gap:var(--s5); }} .kg-footer-col h4{ margin-block-end:var(--s3); font-size:13.5px; } .kg-footer-col a{ font-size:13px; line-height:1.95; } /* ════════════════════════════════════════════════════════════ نوارِ منو در لپ‌تاپ (۱۲۵۱ تا ۱۶۲۰px) — «همهٔ تیترها معلوم باشند» ------------------------------------------------------------ مسئله: لوگوی متنی + ۹ سرمنو + ورود + دکمهٔ رزرو + کلیدِ زبان روی‌هم ~۱۴۰۰px می‌خواهند، ولی نمایشگرِ رایج ۱۳۶۶px است. نتیجه: آیتم‌ها به هم فرو می‌رفتند و کلیدِ زبان زیرِ دکمهٔ طلایی بریده می‌شد. راهِ قبلی «ریزکردنِ فونت» بود که خواندن را سخت‌تر می‌کرد. راهِ درست آزادکردنِ فضاست: نامِ متنیِ لوگو در این بازه جمع می‌شود (نشانِ تصویری می‌ماند) و ~۱۸۰px آزاد می‌کند، پس هر تیتر اندازهٔ خوانای خودش را دارد. این بلوک باید در همین فایل باشد چون redesign.css پس از style.css بار می‌شود و قاعده‌های لوگو/منو را بازنویسی می‌کند. ════════════════════════════════════════════════════════════ */ @media (min-width:1025px) and (max-width:1620px){ header nav{ gap:var(--s3); padding-inline:var(--s4); } /* font-size:0 فقط گرهِ متنیِ داخلِ لوگو را جمع می‌کند؛ تصویر دست‌نخورده */ header .logo{ font-size:0; gap:0; } header .logo img{ width:34px; height:34px; } header nav > ul{ gap:0; } header nav > ul > li > a{ font-size:13.5px; padding-inline:var(--s2); }} /* کلیدِ زبان: هرگز فشرده یا بریده نشود، همیشه انتهای چپِ نوار */ header .kg-lang-switch{ flex:0 0 auto; margin-inline-start:var(--s2); } @media (min-width:1025px) and (max-width:1620px){ header .kg-lang-switch{ padding:7px 10px; font-size:12.5px; } header .kg-lang-switch span{ display:none; } /* فقط پرچم */ } /* ── متنِ مخصوصِ هر خدمت، زیرِ جعبهٔ جست‌وجو ── */ #kgSvcIntro:empty{ display:none; } /* ردیفِ فرم با فیلدِ برگشت — ستونِ تازه بدونِ به‌هم‌ریختنِ تناسب */ @media(min-width:1024px){} @media(max-width:1023px){} @media(max-width:560px){} /* ── نوارِ منو: از راست شروع شود و دکمه‌ها ته چپ ── خواستهٔ صریح: «منو رفته سمت چپ، باید از راست شروع بشه». علت: header nav > ul قاعدهٔ margin-inline-start:auto داشت که در RTL کلِ فهرست را به لبهٔ چپ هُل می‌داد. حالا فهرست بلافاصله کنارِ لوگو (سمتِ راست) می‌نشیند و فقط دکمهٔ ورود/رزرو و کلیدِ زبان ته چپ می‌روند. */ header nav > ul{ margin-inline-start:var(--s4); margin-inline-end:auto; } header nav > ul > li.nav-cta-wrap, header .nav-cta{ margin-inline-start:auto; } /* ════════════════════════════════════════════════════════════ فونتِ اصلی: ایران‌سنس ------------------------------------------------------------ ایران‌سنس روی گوگل‌فونت نیست (فونتِ تجاری است)، پس دو راه دارد و هر دو این‌جا پوشش داده شده: ۱) فایل‌های فونت را در پوشهٔ /fonts/ آپلود کنید (نام‌های زیر) — همین @font-face خودش برشان می‌دارد. سریع‌ترین و مطمئن‌ترین راه. ۲) اگر فایلی نباشد، مرورگر بی‌صدا به وزیرمتن برمی‌گردد که متریکِ نزدیکی دارد و صفحه هرگز بی‌فونت نمی‌ماند. font-display:swap یعنی متن بلافاصله دیده می‌شود، نه بعد از دانلودِ فونت. ════════════════════════════════════════════════════════════ */ /* ⚠ ۲۰۲۶-۰۸-۱۱ — این چهار @font-face «موقتاً خاموش‌اند». چرا: فایل‌های /fonts/IRANSans*.woff2 نه روی نصبِ محلی هستند نه روی هاست (هر دو ۴۰۴ سنجیده شد)، پس هر بازدیدکننده در هر صفحه ۸ درخواستِ شکسته می‌فرستاد — هزینهٔ سرعت روی موبایل، بدونِ هیچ سودی؛ چون فونتِ واقعی همان وزیرمتن بود که از قبل بارگذاری می‌شود. اگر روزی فایل‌های فونت را در پوشهٔ /fonts/ آپلود کردید، فقط این بلوکِ کامنت را باز کنید و 'IRANSans' را به اولِ --font برگردانید. */ /* @font-face{ font-family:'IRANSans'; src:url('/fonts/IRANSansX-Regular.woff2') format('woff2'), url('/fonts/IRANSans-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'IRANSans'; src:url('/fonts/IRANSansX-Medium.woff2') format('woff2'), url('/fonts/IRANSans-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'IRANSans'; src:url('/fonts/IRANSansX-Bold.woff2') format('woff2'), url('/fonts/IRANSans-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:'IRANSans'; src:url('/fonts/IRANSansX-Black.woff2') format('woff2'), url('/fonts/IRANSans-Black.woff2') format('woff2'); font-weight:800 900; font-style:normal; font-display:swap; } */ :root{ --font:'Vazirmatn','Segoe UI',Tahoma,sans-serif; } html[lang="ar"]{ --font:'Cairo','Tajawal','Vazirmatn',sans-serif; } body{ font-family:var(--font); } /* ════════════════════════════════════════════════════════════ جعبهٔ جست‌وجو — رفعِ سرریزِ موبایل ------------------------------------------------------------ دو علتِ واقعی که با اسکرین‌شات پیدا شد: ۱) ستون‌ها با «1fr» تعریف شده بودند. 1fr یعنی minmax(auto,1fr) و هرگز کوچک‌تر از محتوای درونش نمی‌شود؛ ورودی با placeholderِ بلند گرید را پهن‌تر از صفحه می‌کرد. minmax(0,1fr) این قفل را باز می‌کند. ۲) قاعدهٔ «.hs-back{grid-column:3} @media(max-width:1023px){} @media(max-width:560px){} /* روی موبایل کارت گوشهٔ چپِ بالا هم گرد باشد، چون زبانه‌ها کامل بالایش نیستند */ @media(max-width:560px){} /* ════════════════════════════════════════════════════════════ هیرو در موبایل — مهارِ استایل‌های درون‌خطیِ ویرایشگر ------------------------------------------------------------ اندازه‌گیریِ واقعی (۳۹۰px): هیرو ۶۲۸px پهنا داشت و ۱۴۷px بیرونِ صفحه بود. دو علت، هر دو استایلِ درون‌خطی که از ویرایشگرِ بصری روی عناصر نشسته‌اند: ۱) hero style="height:353px" ⇒ ارتفاعِ قفل‌شده، محتوا بریده می‌شد ۲) .cta-row style="grid-template-columns:repeat(3,1fr)" با سه دکمهٔ white-space:nowrap ⇒ حداقلِ عرضِ ۵۹۶px، که کلِ صفحه را پهن می‌کرد استایلِ درون‌خطی را فقط با !important می‌توان در بریک‌پوینت مهار کرد. روی دسکتاپ دست‌نخورده می‌ماند تا چیدمانی که خودتان ساخته‌اید حفظ شود. ════════════════════════════════════════════════════════════ */ @media (max-width:760px){ /* ⚠ تلفن سطرِ خودش (باید بزرگ و یک‌تکه بماند)؛ بقیه کنارِ هم و هرکدام لازم داشت به خطِ دوم می‌رود. سطرِ جدا برای هر فقره، نوار را روی گوشی ۱۸۵ پیکسل می‌کرد — نصفِ چیزی که کاربر اول می‌بیند. */ .kg-tb__f{ border-inline-start:0; padding-inline:0; } .kg-tb__f.is-lead{ flex:1 1 100%; } .kg-tb__f:not(.is-lead){ flex:1 1 46%; } .kg-tb__k{ font-size:9.5px; } .kg-tb__v{ font-size:12px; line-height:1.35; } .kg-tb__in{ padding-block:7px; } .hero{ height:auto !important; min-height:auto !important; max-width:100% !important; padding-block:var(--s8) var(--s10); } .hero .hero-inner, .hero .container{ max-width:100% !important; } .hero .cta-row{ display:flex !important; grid-template-columns:none !important; flex-wrap:wrap !important; gap:10px !important; justify-content:stretch; } .hero .cta-row > a, .hero .cta-row > .btn{ flex:1 1 100%; min-width:0; white-space:normal; text-align:center; } .hero h1{ font-size:clamp(21px,6.2vw,30px); line-height:1.5; } .hero .hero-lead, .hero p{ font-size:14.5px; line-height:1.95; }} /* سدِ آخر: هیچ چیز نباید سطح را افقی بکشد */ html, body{ max-width:100%; overflow-x:clip; } /* زبانه‌های خدمت در موبایل: اسکرولِ افقیِ نرم با لبهٔ محوشونده، به‌جای بیرون‌زدن از کادر. زبانهٔ فعال همیشه اول است تا دیده شود. */ @media (max-width:760px){} @media (max-width:760px){} @media(max-width:560px){} /* وقتی صحنهٔ تازه بار شد، اسلایدر/تصویرِ قدیمیِ هیرو پنهان شود تا دولا نشود */ .hero.has-scene .hero-slides, .hero.has-scene .hero-slide, .hero.has-scene .hero-bg{ display:none !important; } .hero.has-scene{ background:linear-gradient(165deg,var(--g-900),var(--g-700) 62%,var(--g-600)) !important; } /* ════════════════════════════════════════════════════════════ انیمیشنِ صحنهٔ هیرو — زندگی، نه پرش ------------------------------------------------------------ خواستهٔ صاحبِ سایت: خودروها فقط عوض نشوند، حرکت داشته باشند. سه لایهٔ حرکت: ۱) خودروی فعال از راست وارد می‌شود و آرام «شناور» می‌ماند (جادهٔ ناهموار) ۲) چرخ‌ها می‌چرخند ۳) ابرها آرام از چپ به راست می‌روند و پرتوهای نور نفس می‌کشند همه سبک‌اند و prefers-reduced-motion را احترام می‌گذارند. ════════════════════════════════════════════════════════════ */ /* ظاهرشدنِ نرمِ خودرو — فقط opacity تا موقعیتِ SVG دست‌نخورده بماند */ @keyframes kgFade{ from{ opacity:0; } to{ opacity:1; } } .hero[data-hs-veh] .kg-hero-scene .kg-veh{ animation:none; } .hero[data-hs-veh="taxi"] .kg-hero-scene #kg-taxi, .hero[data-hs-veh="transfer"] .kg-hero-scene #kg-transfer, .hero[data-hs-veh="van"] .kg-hero-scene #kg-van, .hero[data-hs-veh="minibus"] .kg-hero-scene #kg-minibus, .hero[data-hs-veh="bus"] .kg-hero-scene #kg-bus{ color:var(--gold) !important; opacity:1 !important; animation:kgFade .5s ease both; } /* خودروها ثابت در انتهای چپ می‌مانند (از طریقِ translateِ خودِ SVG)؛ حسِ حرکت را چرخ‌های چرخان می‌رسانند. درایوِ افقیِ CSS حذف شد چون در حالتِ تزریقِ innerHTML شکننده بود و موقعیت را به‌هم می‌زد. */ /* چرخ‌ها می‌چرخند — گروهِ چرخ داخلِ هر خودرو */ @keyframes kgSpin{ to{ transform:rotate(360deg); } } /* ⚠️ چرخشِ چرخ حالا کاملاً با SMIL داخلِ خودِ SVG است (هم‌زمان با حرکت). قاعدهٔ CSS با transform-box:fill-box با آن تداخل داشت و لاستیک را از خودرو جدا می‌کرد؛ ضمناً CSS در حالتِ «کاهشِ انیمیشن» خاموش می‌شود و آن‌وقت خودرو حرکت می‌کرد ولی چرخ ثابت می‌مانْد. */ .kg-veh[style*="opacity:0"] .kg-wheel, .kg-hero-scene .kg-veh:not(#kg-bus) .kg-wheel{ /* فقط چرخِ خودروی دیده‌شده بچرخد */ } /* ابرها: رانشِ افقیِ آرام و بی‌پایان */ @keyframes kgDrift{ 0%{ transform:translateX(0); } 100%{ transform:translateX(46px); } } .kg-hero-scene .kg-cloud{ transform-box:fill-box; animation:kgDrift 14s ease-in-out infinite alternate; } .kg-hero-scene .kg-cloud.c2{ animation-duration:19s; } .kg-hero-scene .kg-cloud.c3{ animation-duration:23s; } /* پرتوهای نور: نفسِ ملایمِ روشنایی */ @keyframes kgRays{ 0%,100%{ opacity:.4; } 50%{ opacity:.62; } } .kg-hero-scene .kg-rays{ animation:kgRays 7s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ .kg-hero-scene .kg-veh, .kg-hero-scene .kg-wheel, .kg-hero-scene .kg-cloud, .kg-hero-scene .kg-rays{ animation:none !important; }} /* ════════════════════════════════════════════════════════════ اندازهٔ صحنه — الگوی علی‌بابا: نوارِ باریکِ پایین، نه پوششِ کامل ------------------------------------------------------------ در علی‌بابا تصویرسازی یک نوارِ افقیِ باریک پایینِ هیروست، نه پس‌زمینهٔ تمام‌قد. صحنه را به همان نسبت می‌بریم: چسبیده به کفِ هیرو، ارتفاعِ کم، و لبهٔ بالایش نرم در سبزِ هیرو محو می‌شود تا وصله به‌نظر نرسد. ════════════════════════════════════════════════════════════ */ /* صحنهٔ کامل — کلِ هیرو را پر می‌کند */ .kg-hero-scene{ inset:0; } .kg-hero-scene svg{ position:absolute; inset:0; width:100%; height:100%; display:block; } .hero.has-scene::after{ inset:0; background:linear-gradient(180deg, color-mix(in srgb, var(--g-900) 20%, transparent) 0%, color-mix(in srgb, var(--g-900) 30%, transparent) 45%, color-mix(in srgb, var(--g-900) 48%, transparent) 100%); } /* هیرو با صحنه: ارتفاعِ منطقی، نه ۷۶۸ پیکسلِ نسبتِ ۱۶:۹ */ /* ═══ ارتفاعِ هدر — از پنل ═══ admin/hero-scene.php دو عدد می‌نویسد (دسکتاپ/موبایل) و js/hero-search.js آن‌ها را روی به‌صورتِ متغیرِ CSS می‌گذارد. مقدارِ پیش‌فرضِ داخلِ var() تضمین می‌کند که اگر جاوااسکریپت هم نرسید، هدر ارتفاعِ درست داشته باشد و صفحه نپرد. */ @media(min-width:761px){ .hero.has-scene{ aspect-ratio:auto !important; height:var(--kg-hero-h, clamp(300px,32vw,410px)) !important; min-height:0 !important; }} @media(max-width:760px){ .hero.has-scene{ aspect-ratio:auto !important; height:auto !important; min-height:var(--kg-hero-h-m, 280px) !important; }} /* ═══ صحنه خاموش است ⇒ اسلایدرِ عکس ═══ وقتی مدیر صحنه را خاموش کند، هدر باید همان اسلایدرِ همیشگی باشد. */ .hero.no-scene .hero-slides, .hero.no-scene .hero-slide, .hero.no-scene .hero-bg{ display:block !important; } @media(min-width:761px){ .hero.no-scene{ height:var(--kg-hero-h, 420px) !important; min-height:0 !important; }} @media(max-width:760px){ .hero.no-scene{ min-height:var(--kg-hero-h-m, 300px) !important; }} /* ═══ تا وقتی تکلیفِ هدر روشن نشده، هیچ‌چیز سوسو نزند ═══ قبلاً کاربر پشتِ‌سرِ هم اسلایدر، بعد صحنه، بعد ویجت را می‌دید («چند لایه از تغییراتِ گذشته»). حالا هدر تا رسیدنِ تنظیمات فقط زمینهٔ ساده است. */ .hero.hero-wait .hero-slides, .hero.hero-wait .hero-slide, .hero.hero-wait .hero-arrow, .hero.hero-wait .hero-dots{ visibility:hidden !important; } /* موبایل: فیلدها زیرِ هم، دو ستونه */ @media(max-width:820px){} @media(max-width:820px){} /* وقتی صحنهٔ تازه بار شده، هیچ عنصرِ تزئینیِ قدیمیِ هیرو دیده نشود (دایره/گرادیانِ رادیالِ نسخهٔ قبل که گاهی به‌صورتِ نیم‌دایرهٔ خاکستری می‌ماند) */ .hero.has-scene::before{ display:none !important; } .hero.has-scene > *:not(.kg-hero-scene):not(.hero-inner):not(.container):not(.hero-arrow):not(.hero-dots){ } .hero.has-scene .hero-caption, .hero.has-scene .hero-bg, .hero.has-scene [style*="border-radius:50%"], .hero.has-scene [style*="radial-gradient"]{ display:none !important; } /* ══════════════════════════════════════════════════════════════════════ تمِ روشن — سفید / فونتِ سیاه / کادرِ خاکستری (۱۴۰۵/۰۵ — غلبهٔ نهایی) آخرین چیزِ فایلِ آخر است، پس بر همهٔ رنگ‌های سبزِ پیشین غلبه می‌کند. هیروِ صفحهٔ اصلی (صحنهٔ مذهبی) دست‌نخورده می‌ماند؛ بقیهٔ صفحه سفید می‌شود. ══════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="light"], :root[data-theme="dark"]{ color-scheme: light; --ink:#1b1b1b; --ink-2:#4a4a4a; --muted:#7a7a7a; --line:#e5e5e5; --paper:#ffffff; --paper-2:#f6f6f7; --white:#ffffff; --g-050:#f6f6f7; --g-100:#eef0ef; --nav-bg:#ffffff; --nav-border:#e6e6e6; --shadow-sm:0 6px 18px -8px rgba(0,0,0,.12); } /* بدنهٔ سفیدِ ساده به‌جای مِشِ کرم/سبز */ html, body{ background:#ffffff !important; } body{ color:var(--ink) !important; } main > section.section:nth-of-type(2n){ background:#fafafa !important; } main > section.section:nth-of-type(2n)::before{ display:none !important; } /* ── هدرِ سفید، متنِ سیاه، مرزِ خاکستری ── */ header{ background:#ffffff !important; border-bottom:1px solid var(--line) !important; box-shadow:0 1px 3px rgba(0,0,0,.05) !important; } header .logo, header .logo *{ color:#1b1b1b !important; } .nav-toggle{ color:#333 !important; } header nav > ul > li > a{ color:#333 !important; } header nav > ul > li > a:hover, header nav > ul > li > a.active{ background:#f2f2f2 !important; color:#000 !important; } .submenu{ background:#ffffff !important; border:1px solid var(--line) !important; } .submenu a{ color:#333 !important; } .submenu a:hover{ background:#f4f4f4 !important; color:#000 !important; } /* منوی کشوییِ موبایل: سفید و روی همه‌چیز */ @media(max-width:1024px){ /* فقط منوی کشوییِ سربرگ — نه ستون‌های فوتر (نگاه کن به توضیحِ style.css) */ header nav ul{ background:#ffffff !important; border-bottom:1px solid var(--line) !important; box-shadow:0 24px 48px -24px rgba(0,0,0,.35) !important; z-index:1200 !important; } header nav ul li a{ color:#222 !important; } header nav ul li a:hover{ background:#f4f4f4 !important; } /* و ستون‌های فوتر صریحاً در جریانِ عادیِ صفحه می‌مانند، تا اگر جایی قاعدهٔ لوسِ دیگری ماند هم فوتر ناپدید نشود. */ footer nav ul, .kg-footer nav ul{ position:static !important; transform:none !important; inset:auto !important; max-height:none !important; overflow:visible !important; background:none !important; box-shadow:none !important; padding:0 !important; flex-direction:column !important; }} /* ── سرتیترها و متن → سیاه ── */ h1,h2,h3,h4,h5,h6{ color:var(--ink) !important; } main .container h3{ color:var(--ink) !important; } main .container h3::before{ color:var(--gold) !important; } main .container p{ color:#333333 !important; } .stat-card .num, .stat .num, .s-num, .hm-quick-t, .kg-related-t, .kgd-ttl, .sb-kinds b, .kg-fig-t, .hm-pay-c b, .hm-rt-p, .hm-rt-p b{ color:var(--ink) !important; } /* لینک‌های محتوایی → طلاییِ تیره (روی سفید خوانا) */ main .container p a:not(.btn), main li a:not(.btn), main .container > .container{ color:var(--green-deep, #8a6d16) !important; font-weight:700; } /* ── هیروِ صفحهٔ اصلی: صحنه می‌ماند، تیترش سفید ── */ .hero h1, .hero .hero-title, .hero.has-scene h1, .hero [class*="title"]{ color:#ffffff !important; } /* ── page-hero (نوارِ سبزِ صفحاتِ داخلی) → خاکستریِ روشن ── */ .page-hero{ background:#f4f4f5 !important; border-bottom:1px solid var(--line) !important; } .page-hero::before, .page-hero::after{ display:none !important; } .page-hero h1{ color:var(--ink) !important; text-shadow:none !important; } .page-hero h1::after{ background:linear-gradient(90deg,transparent,var(--gold),transparent) !important; box-shadow:none !important; } .page-hero p{ color:#555555 !important; } /* ── نوارهای تیرهٔ سبز → خاکستریِ روشن با متنِ سیاه ── */ .hm-trust, .hm-cta, .rz-head, .rz-quote, .kg-footer{ background:#f5f5f6 !important; color:var(--ink) !important; } .hm-trust *, .hm-cta *, .rz-head *, .rz-quote *, .kg-footer *{ color:#333333 !important; border-color:var(--line) !important; } .kg-footer{ border-top:1px solid var(--line) !important; } .kg-footer a:hover{ color:var(--green-deep, #8a6d16) !important; } /* ── دکمه‌های سبز → طلایی (CTA اصلی) ── */ .btn-primary, .btn-green{ background:linear-gradient(135deg,var(--gold),var(--gold-400)) !important; color:#1b1508 !important; border:1px solid var(--gold-600) !important; } .btn-primary:hover, .btn-green:hover{ filter:brightness(1.04); } /* ── کارت‌ها: سفید با کادرِ خاکستری ── */ .stat-card, .kg-card, .kg-fig, .hm-card{ background:#ffffff !important; border:1px solid var(--line) !important; } /* ══════════════════════════════════════════════════════════════════════ فرمِ رزروِ صفحهٔ اصلی — رفعِ سرریزِ موبایل + مودالِ تأیید (۱۴۰۵/۰۵) ══════════════════════════════════════════════════════════════════════ */ /* موبایل: هر فیلد یک ردیفِ کامل، بی‌سرریز؛ برچسب‌ها بریده نشوند */ @media(max-width:820px){} @media(max-width:460px){} @keyframes hsMIn{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } } /* ── واپسین ردِ سبز: عنوانک‌ها و دایره‌های شمارهٔ گام → طلایی/خنثی ── */ .eyebrow{ color:#5c470e !important; background:rgba(201,162,39,.18) !important; border:1px solid rgba(201,162,39,.5) !important; font-weight:800 !important; } .hm-step-n{ background:linear-gradient(135deg,var(--gold),var(--gold-600)) !important; color:#1b1508 !important; } /* ══════════════════════════════════════════════════════════════════════ حذفِ کاملِ سبز از کلِ سایت + هیروِ روشن (۱۴۰۵/۰۵ — غلبهٔ نهاییِ نهایی) کلِ مقیاسِ سبز به خاکستری/مشکیِ خنثی نگاشته می‌شود؛ طلایی و قرمز می‌مانند. ══════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="light"], :root[data-theme="dark"]{ /* مقیاسِ «سبز» → خاکستری/مشکیِ خنثی (هیچ ته‌رنگِ سبزی نمی‌ماند) */ --g-900:#1b1b1b; --g-800:#2a2a2a; --g-700:#3d3d3d; --g-600:#5c5c5c; --g-100:#eef0ef; --g-050:#f6f6f7; /* توکن‌های سبزِ قدیمیِ style.css */ --green-deep:#1c1c1c; --green-mid:#454545; --green-soft:#f3f3f3; --bg-deep:#ffffff; --bg-deep-2:#f5f5f5; } /* ── هیروِ روشن: صحنه دیگر سبز نیست، پس پس‌زمینه و پوششِ تیره هم روشن می‌شوند ── */ .hero.has-scene{ background:linear-gradient(180deg,#eef2f4,#f6f3ec) !important; } .hero.has-scene::after{ background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(20,20,20,.06) 100%) !important; } /* متنِ هیرو روی صحنهٔ روشن → تیره و خوانا (نه سفید) */ .hero.has-scene h1, .hero.has-scene .hero-title, .hero.has-scene [class*="title"], .hero.has-scene p{ color:#1b1b1b !important; text-shadow:none !important; } /* ── دکمه‌های شناورِ تماس (FAB) و نوارِ چسبانِ پایین: سبز → طلایی/خنثی ── */ .kg-call-fab, .kg-bale-fab, .kgc-fab{ background:linear-gradient(135deg,var(--gold),var(--gold-600)) !important; color:#1b1508 !important; box-shadow:0 8px 24px rgba(0,0,0,.28) !important; } .kg-bar .kg-bar-2{ background:var(--bg-deep, #2a2a2a) !important; color:#fff !important; } .kg-bar .kg-bar-1{ background:linear-gradient(135deg,var(--gold),var(--gold-400)) !important; color:#1b1508 !important; } /* پس‌زمینهٔ پایهٔ هیرو (پیش از بارگذاریِ صحنه) روشن بماند — بدونِ فلَشِ سبز */ .hero{ background:linear-gradient(180deg,#eef2f4,#f6f3ec) !important; } .hero *{ } /* جای‌نگه‌دار */ /* ویجتِ گفتگو (تزریقیِ chat-widget.js) — سرآیند/دکمه‌های سبز → طلایی */ [class*="chat"] [style*="155c41" i], [class*="chat"] [style*="0b3d2e" i]{ background:var(--gold) !important; } /* ═══ بنرِ «رزرو دربستِ اتوبوس عراق» در صفحهٔ اصلی — تیترِ سفید روی نوارِ تیره ═══ */ .hm-charter h2{ color:#fff !important; } /* ═══ خوانایی (۱۴۰۵/۰۵/۰۹): تیترِ ستون‌های فوتر پررنگ و مشکی، جدا از لینک‌ها ═══ */ .kg-footer-col h4{ color:#1b1b1b !important; font-size:14.5px !important; font-weight:900 !important; opacity:1 !important; } /* لینک‌های داخل متنِ مقالات: طلاییِ تیره‌تر تا روی زمینهٔ روشن خوانا باشد */ main p a, main li a, .section p a{ color:var(--green-deep, #8a6d16) !important; text-decoration-color:rgba(138,109,22,.45); } /* ═══════════════════════════════════════════════════════════════ صحنهٔ هدر — انیمیشن فقط و فقط با SMIL (داخلِ خودِ images/hero-scene.svg) ═══════════════════════════════════════════════════════════════ ⚠️ این‌جا هیچ @keyframes یا animation برای صحنه نگذارید. چرا: حرکتِ خودرو، چرخشِ چرخ‌ها و سوارشدنِ مسافران هر سه با SMIL ( و ) داخلِ خودِ SVG انجام می‌شوند. اگر CSS هم روی همان عنصرها transform بگذارد، **CSS بر صفتِ transform مقدم است** و صفت را باطل می‌کند؛ نتیجه‌اش همان چیزی است که روی موبایل دیده شد: چرخ‌ها از خودرو جدا می‌شوند و وسطِ تصویر می‌چرخند. روی دسکتاپِ ما این باگ پنهان می‌ماند، چون مرورگر اغلب prefers-reduced-motion: reduce دارد و CSS اجرا نمی‌شود — ولی گوشیِ زائر چنین چیزی ندارد و هر دو موتور با هم می‌دوند. بلوکِ قبلی علاوه بر این تداخل، **آکولادهای ناموازن** هم داشت (بازماندهٔ یک ویرایشِ قدیمی) و پارسرِ CSS از همان‌جا به بعد قاعده‌ها را می‌بلعید — دلیلِ «در موبایل CSS به‌درستی کار نمی‌کند». ═══════════════════════════════════════════════════════════════ */ /* هدرِ نقاشی: هیچ ردّی از اسلایدر نماند — فلش‌ها، نقطه‌ها، کپشن و خطِ زیرش */ .hero.has-scene .hero-arrow, .hero.has-scene .hero-dots, .hero.has-scene .hero-caption, .hero.has-scene [style*="height:2px"]{ display:none !important; } /* ═══ صحنهٔ هدر: هرچه وسیلهٔ انتخابی بزرگ‌تر، زائران و پرچم‌های بیشتری «روشن» می‌شوند ═══ رده‌ها: تاکسی=۱، خودروی شخصی=۲، ون=۳، مینی‌بوس=۴، اتوبوس=۵ — تعویضِ وسیله، روشناییِ قبلی را خودکار برمی‌گرداند */ .kg-hero-scene .kg-person{ transition:fill .45s ease; } .kg-hero-scene .kg-flag{ opacity:.4; filter:saturate(.25); transition:opacity .45s ease, filter .45s ease; } .hero[data-hs-veh="taxi"] .kg-hero-scene .kg-person:is(.kg-t1), .hero[data-hs-veh="transfer"] .kg-hero-scene .kg-person:is(.kg-t1,.kg-t2), .hero[data-hs-veh="van"] .kg-hero-scene .kg-person:is(.kg-t1,.kg-t2,.kg-t3), .hero[data-hs-veh="minibus"] .kg-hero-scene .kg-person:is(.kg-t1,.kg-t2,.kg-t3,.kg-t4), .hero[data-hs-veh="bus"] .kg-hero-scene .kg-person:is(.kg-t1,.kg-t2,.kg-t3,.kg-t4,.kg-t5){ fill:#b5892f; } .hero[data-hs-veh="taxi"] .kg-hero-scene .kg-flag:is(.kg-t1), .hero[data-hs-veh="transfer"] .kg-hero-scene .kg-flag:is(.kg-t1,.kg-t2), .hero[data-hs-veh="van"] .kg-hero-scene .kg-flag:is(.kg-t1,.kg-t2,.kg-t3), .hero[data-hs-veh="minibus"] .kg-hero-scene .kg-flag:is(.kg-t1,.kg-t2,.kg-t3,.kg-t4), .hero[data-hs-veh="bus"] .kg-hero-scene .kg-flag:is(.kg-t1,.kg-t2,.kg-t3,.kg-t4,.kg-t5){ opacity:1; filter:saturate(1); } /* ═══════════════════════════════════════════════════════════════ لایهٔ پرداختِ طراحی (۱۴۰۵/۰۵/۰۹) — خروجیِ ادغام‌شدهٔ منتقدانِ طراحی تایپوگرافی فارسی، مقیاسِ یکدستِ تیترها، ریتمِ عمودی، ترازِ اعداد ═══════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5 { letter-spacing: 0 !important; } .eyebrow, .section-head .eyebrow { letter-spacing: 0 !important; padding: 5px 16px; border-radius: 999px; margin-block-end: 0; } .page-hero h1 { font-size: clamp(30px, 4.6vw, 46px) !important; line-height: 1.45 !important; } .page-hero h1::after { margin-top: 18px !important; } .page-hero p { font-size: clamp(15px, 1.8vw, 17.5px) !important; text-wrap: balance; line-height: 2; } .hm-step-grid h3, .hm-pay-c h3, .hm-trust-c h3 { font-size: 17px; } .hm-svc-card h3, .hm-dest-c h3 { font-size: 18px; } .hm-pay-c b { font-size: 34px; } .stat .num, .stat-card .num, .hm-pay-c b { font-variant-numeric: tabular-nums; } main p { font-size: 16.5px; line-height: 2; } .hm-svc-card p { font-size: 14.5px; } .hm-step-grid p, .hm-dest-c p { font-size: 14px; } .kg-footer-col a { font-size: 13.5px; } .kg-footer-brand p { font-size: 13.5px; } .kg-footer-bottom { font-size: 12.5px; } .kg-footer .kg-footer-col { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 0; margin: 0; max-width: none; } .stat-strip { margin-block-start: 0; } .section, main .section { padding-block: clamp(var(--s10), 5vw, var(--s16)); } @media (min-width: 720px) { .hm-dest-c p { min-height: 52px; }} /* ═══════════════════════════════════════════════════════════════ برنامه‌ریزِ سفر و صفحاتِ خدمات (svc) — نظم و خوانایی (۱۴۰۵/۰۵/۱۰) ═══════════════════════════════════════════════════════════════ */ /* هدرِ خدمات: روشن و هماهنگ با تمِ سفید — متنِ تیرهٔ خوانا */ .svc-hero{ background:linear-gradient(180deg,#f7f5ef,#eee8d8) !important; } .svc-hero h1{ color:#1b1b1b !important; text-shadow:none !important; } .svc-hero .svc-lead{ color:#5c5c5c !important; } .svc-hero .svc-crumb, .svc-hero .svc-crumb a{ color:#8a7a55 !important; } .svc-hero .svc-crumb b{ color:#1b1b1b !important; } /* نوارِ CTA تیره: متنش روشن بماند (قانونِ سراسریِ تیترِ تیره اینجا غلط بود) */ .kg-cta-box h2{ color:#fff !important; } .kg-cta-box p{ color:#d8d5cc !important; } /* کارت‌های وسیله: پنج‌تاییِ منظم روی دسکتاپ، محتوا وسط‌چین */ @media(min-width:960px){} /* کارت‌های «خدمات مرتبط»: آیکون و تیتر در یک خط، متنِ کامل */ .kg-related-t{ display:flex !important; align-items:center; gap:8px; } .kg-related-t .kg-ico{ flex:0 0 20px; } @keyframes hsBump{ 0%{transform:scale(1)} 45%{transform:scale(1.11)} 100%{transform:scale(1)} } /* ── موبایل ── */ @media(max-width:640px){} @media(max-width:640px){} /* ═══════════════════════════════════════════════════════════════ لایهٔ «مرزبندی و تمایزِ بخش‌ها» (۱۴۰۵/۰۵/۱۰) ایراد: همهٔ بخش‌های صفحه روی یک زمینهٔ سفیدِ یکنواخت بودند و چشم نمی‌فهمید کجا یک موضوع تمام و موضوعِ بعد شروع می‌شود. راهکار: (۱) زمینهٔ یک‌درمیانِ ملایم، (۲) خطِ جداکنندهٔ طلاییِ نازک، (۳) قابِ روشن برای کارت‌ها، (۴) تیترِ هر بخش با نشانِ طلایی. همه فقط روی صفحهٔ اصلی و بخش‌های استانداردِ سایت — بی‌خطر برای صفحاتی که ادیتور دست‌کاری‌شان کرده. ═══════════════════════════════════════════════════════════════ */ /* ── ۱) زمینهٔ یک‌درمیان: بخش‌های زوج کرمِ ملایم می‌گیرند ── */ main > .section:nth-of-type(even), main > section.section:nth-of-type(even){ background:#faf7ef; } main > .section{ position:relative; padding-block:clamp(38px, 5vw, 62px); } /* ── ۲) خطِ جداکنندهٔ ظریفِ طلایی بینِ بخش‌ها ── */ main > .section + .section::before{ content:""; position:absolute; inset-inline:0; top:0; height:1px; background:linear-gradient(90deg, rgba(201,162,39,0) 0%, rgba(201,162,39,.38) 22%, rgba(201,162,39,.38) 78%, rgba(201,162,39,0) 100%); } /* ── ۳) تیترِ هر بخش: نشانِ طلاییِ کوتاه بالای عنوان ── */ .section-head{ position:relative; } .section-head::before{ content:""; display:block; width:44px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--gold, #c9a227),#f0d685); margin:0 auto 14px; } .section-head[style*="text-align:right"]::before, .section-head[style*="text-align: right"]::before{ margin-inline:0 auto; } /* ── ۴) کارت‌ها: قابِ روشن به‌جای شناوریِ بی‌مرز ── */ .hm-dest-c, .hm-pay-c, .hm-rt, .hm-quick-b, .stat-card, .svc-card, .kg-related-c, .hm-step, .card{ border:1.5px solid #e2dac8; border-radius:16px; background:#fff; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .hm-dest-c:hover, .hm-pay-c:hover, .hm-rt:hover, .hm-quick-b:hover, .svc-card:hover, .kg-related-c:hover{ border-color:var(--gold, #c9a227); box-shadow:0 8px 22px -12px rgba(201,162,39,.45); transform:translateY(-2px); } /* روی زمینهٔ کرمِ بخش‌های زوج، کارت سفید بماند تا جدا دیده شود */ main > .section:nth-of-type(even) .hm-dest-c, main > .section:nth-of-type(even) .hm-pay-c, main > .section:nth-of-type(even) .hm-rt, main > .section:nth-of-type(even) .stat-card{ background:#fff; } /* ── ۵) نوارِ آمار: جداکنندهٔ عمودی بینِ خانه‌ها ── */ .stat-strip{ border:1.5px solid #e2dac8; border-radius:18px; overflow:hidden; background:#fff; } .stat-strip .stat-card{ border:0; border-radius:0; } .stat-strip .stat-card + .stat-card{ border-inline-start:1.5px solid #eee7d7; } /* ── ۶) فوتر: مرزِ بالا و ستون‌های جدا ── */ .kg-footer{ border-top:2px solid #e2dac8; } .hs{ display:flex; flex-direction:column; align-items:stretch; } @keyframes hsShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} } @keyframes hsSpin{ to{ transform:rotate(360deg) } } /* ═══════════════════════════════════════════════════════════════ صفحهٔ پیگیری و پرداختِ رزرو (pages/track-reservation.html) ایراد: کاملاً سفید و بی‌قاب بود؛ برای صفحه‌ای که زائر مبلغِ چندده‌میلیونی را در آن می‌بیند، اعتمادبرانگیز نبود. حالا کارتِ مرزدار با سربرگِ تیره، فیلدهای درشت، و بلوکِ نتیجهٔ جداشده. ═══════════════════════════════════════════════════════════════ */ body .wrap{ max-width:900px; margin-inline:auto; padding:0 16px 40px; } body .wrap > .card{ background:#fff; border:2px solid #d5cbb3; border-radius:20px; box-shadow:0 14px 40px -22px rgba(60,50,20,.35); overflow:hidden; margin-top:-46px; /* روی لبهٔ پایینِ هدر می‌نشیند */ position:relative; z-index:5; } body .wrap > .card > .card-inner{ padding:26px 26px 28px; } @media(max-width:640px){ body .wrap > .card > .card-inner{ padding:20px 16px 22px; } body .wrap > .card{ margin-top:-26px; }} /* سربرگِ کارت */ body .wrap > .card > .card-inner::before{ content:"🔎 استعلامِ وضعیتِ رزرو"; display:block; margin:-26px -26px 20px; padding:14px 22px; background:linear-gradient(135deg,#2f2f2f,#191919); color:#f0d685; font-weight:900; font-size:14.5px; letter-spacing:0; } @media(max-width:640px){ body .wrap > .card > .card-inner::before{ margin:-20px -16px 16px; padding:12px 16px; }} /* فیلدها */ .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media(max-width:640px){ .field-row{ grid-template-columns:1fr; }} .field-label{ display:block; font-size:12.5px; font-weight:800; color:#5b5449; margin-bottom:7px; } #trackForm input{ width:100%; box-sizing:border-box; height:52px; padding:0 14px; border:1.5px solid #cfc4a8; border-radius:12px; background:#fff; font-family:inherit; font-size:15px; font-weight:700; color:#1b1b1b; transition:border-color .16s ease, box-shadow .16s ease; } #trackForm input:focus{ outline:none; border-color:var(--gold, #c9a227); box-shadow:0 0 0 3px rgba(201,162,39,.15); } .track-btn{ width:100%; margin-top:16px; height:54px; cursor:pointer; border:0; border-radius:13px; font-family:inherit; font-weight:900; font-size:15.5px; background:linear-gradient(135deg,#f0d685,var(--gold, #c9a227) 55%,#a9861c); color:#1b1508; box-shadow:0 10px 24px -10px rgba(201,162,39,.6), inset 0 1px 0 rgba(255,255,255,.45); transition:filter .15s ease, transform .1s ease; } .track-btn:hover{ filter:brightness(1.05); } .track-btn:active{ transform:scale(.99); } .track-btn:disabled{ opacity:.6; cursor:default; } .track-error{ display:none; margin-top:12px; padding:11px 14px; border-radius:11px; background:#fdeaea; border:1.5px solid #e0a0a0; color:#a23030; font-size:13px; font-weight:700; line-height:1.9; } .track-error.show{ display:block; } /* بلوکِ نتیجه — با خطِ جداکننده از فرم */ #trackResult{ display:none; } #trackResult.show{ display:block; margin-top:22px; padding-top:22px; border-top:2px dashed #e2dac8; } /* راهنمای پایینِ صفحه: هم‌سبک با بقیهٔ سایت */ body .wrap ~ section > div[style*="border-radius:18px"]{ border:1.5px solid #e2dac8 !important; } /* هدرِ صفحاتِ داخلی: متنِ سفیدِ قدیمی (برای زمینهٔ سبزِ تیره) روی زمینهٔ روشنِ تمِ جدید ناخوانا بود. صحنهٔ صفحهٔ اصلی کلاسِ has-scene می‌گیرد، پس فقط هدرِ صفحاتِ داخلی تیره می‌شود و صفحهٔ اصلی دست‌نخورده می‌ماند. */ .hero:not(.has-scene) h1{ color:#1b1b1b !important; text-shadow:none !important; } .hero:not(.has-scene) .sub, .hero:not(.has-scene) p{ color:#4a443a !important; text-shadow:none !important; } .hero:not(.has-scene) .eyebrow-ar{ color:var(--green-deep, #8a6d16) !important; text-shadow:none !important; } .hero:not(.has-scene) .divider-line{ opacity:.75; } /* ── پرچمِ روی سقفِ اتوبوسِ صحنه ── */ .kg-hero-scene .kg-bflag{ display:none; } .hero[data-hs-veh="bus"] .kg-hero-scene .kg-bflag-iq{ display:block; } .hero[data-hs-veh="bus"][data-hs-kind="cabotage"] .kg-hero-scene .kg-bflag-ir{ display:block; } /* ═══ صفحاتِ داخلی: مشخصاتِ ناوگان به‌جای فرمِ رزرو ═══ رزرو فقط از فرمِ صفحهٔ اصلی انجام می‌شود؛ این‌جا فقط معرفیِ خودروها و یک دعوتِ روشن به همان فرم. */ .kgf{ max-width:960px; margin-inline:auto; } .kgf-t{ font-size:clamp(20px,3vw,27px); margin:0 0 6px; color:#1b1b1b; } .kgf-lead{ margin:0 0 20px; color:#4a443a; font-size:14px; line-height:2; } .kgf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px; } .kgf-card{ background:#fff; border:1.5px solid #e2dac8; border-radius:16px; padding:15px 16px 16px; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .kgf-card:hover{ border-color:var(--gold, #c9a227); transform:translateY(-2px); box-shadow:0 8px 22px -12px rgba(201,162,39,.45); } .kgf-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding-bottom:10px; border-bottom:1.5px solid #efe9db; } .kgf-head h3{ margin:0; font-size:15.5px; color:#1b1b1b; } .kgf-seats{ margin-inline-start:auto; font-size:11.5px; font-weight:800; color:var(--green-deep, #8a6d16); background:#f7edcf; border:1px solid #e4d3a0; border-radius:999px; padding:3px 10px; white-space:nowrap; } .kgf-models{ list-style:none; margin:11px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; } .kgf-models li{ font-size:13px; color:#3b3416; line-height:1.9; } .kgf-models li b{ font-weight:800; } .kgf-models li i{ font-style:normal; font-size:11px; font-weight:800; color:var(--green-deep, #8a6d16); background:#faf7ef; border:1px solid #e2dac8; border-radius:6px; padding:1px 7px; margin-inline-start:5px; } .kgf-models li span{ display:block; font-size:12px; color:#6b6459; } .kgf-cta{ margin-top:22px; padding:20px 22px; border-radius:18px; text-align:center; background:linear-gradient(135deg,#232323,#121212); border:1.5px solid var(--gold, #c9a227); } .kgf-cta p{ margin:0 0 14px; color:#e8e4da; font-size:13.5px; line-height:2; } .kgf-btn{ display:inline-block; padding:13px 30px; border-radius:14px; text-decoration:none; background:linear-gradient(135deg,#f0d685,var(--gold, #c9a227) 55%,#a9861c); color:#1b1508; font-weight:900; font-size:15px; box-shadow:0 10px 24px -8px rgba(201,162,39,.55), inset 0 1px 0 rgba(255,255,255,.45); } .kgf-btn:hover{ filter:brightness(1.05); } /* ═══ ماژولِ رزرو در صفحاتِ دیگر (بلوکِ «📅 فرم رزرو») ═══ ویجت برای هدرِ صفحهٔ اصلی طراحی شده؛ این‌جا داخلِ یک قابِ روشن می‌نشیند تا در متنِ صفحه هم درست دیده شود. */ .kg-reserve-embed{ max-width:1060px; margin-inline:auto; padding:22px 20px 24px; background:linear-gradient(180deg,#f6f2e6,#efe9d8); border:1.5px solid #ddd3b8; border-radius:22px; box-shadow:0 14px 40px -24px rgba(60,50,20,.4); } @media(max-width:640px){ .kg-reserve-embed{ padding:16px 12px 18px; border-radius:18px; }} /* جای‌نمایِ داخلِ ویرایشگر — روی خودِ سایت با فرمِ واقعی جایگزین می‌شود */ .kg-reserve-ph{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:34px 18px; border:2px dashed #cbbd93; border-radius:16px; background:#fffdf6; color:#6b5410; font-weight:900; font-size:15px; text-align:center; } .kg-reserve-ph span{ font-weight:600; font-size:12.5px; color:#8a7c5f; line-height:1.9; } .kg-reserve-embed .hs ~ .kg-reserve-ph, .kg-reserve-embed:has(.hs) .kg-reserve-ph{ display:none; } @media(max-width:900px){} @media(max-width:640px){} /* ═══════════════════════════════════════════════════════════════ ممیزیِ ۹۶ صفحه (۱۴۰۵/۰۵/۱۰) — رفعِ دو بدفرمیِ سراسری ═══════════════════════════════════════════════════════════════ */ /* ۱) نوارِ سرصفحهٔ صفحاتِ داخلی: پس‌زمینه تیرهٔ ارثیِ تمِ سبز بود ولی قانونِ تمِ روشن همهٔ h1..h6 را سیاه می‌کرد ⇒ «عنوانِ سیاه روی زمینهٔ سیاه» و در ده‌ها صفحه تیترِ اصلی اصلاً دیده نمی‌شد. حالا نوار روشن است. */ main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed){ background:linear-gradient(160deg,#faf7ef 0%,#f2ece0 60%,#efe8da 100%); color:#1b1b1b; border-block-end:1px solid #e6ddc9; } main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed)::before{ background:radial-gradient(circle,rgba(201,162,39,.14),transparent 68%); } main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed) h1{ color:#1b1b1b !important; text-shadow:none; } main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed) h2, main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed) h3{ color:var(--bg-deep, #2a2a2a) !important; } main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed) p{ color:#4a443a !important; } main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed) .eyebrow, main > section:first-of-type:not(.hero):not(.hm-quick):not(.svc-hero):not(.kg-reserve-embed) .eyebrow-ar{ color:var(--green-deep, #8a6d16) !important; } /* ۲) آکاردئونِ پرسش‌ها: حالتِ بسته padding پایین داشت و چون overflow تا لبهٔ padding می‌بُرد، سطرِ اولِ پاسخ از کارت بیرون می‌زد و روی کارتِ بعدی می‌افتاد. حالا در حالتِ بسته هیچ فضای پایینی نیست. */ .faq-item .faq-a{ max-height:0; overflow:hidden; padding-block-start:0; padding-block-end:0; transition:max-height .35s ease, padding .35s ease; } .faq-item.open .faq-a{ max-height:1400px; padding-block-end:var(--s4); } /* کارتِ پرسش: تیترِ h2 مارجینِ ارثیِ سرتیتر داشت و کارت را بی‌دلیل بلند می‌کرد؛ ضمناً هیچ نشانه‌ای برای «باز می‌شود» نداشت. */ .faq-item .faq-q{ margin:0 !important; font-size:15.5px !important; } .faq-item .faq-q::before{ content:none !important; } .faq-item .faq-q::after{ content:'▾'; margin-inline-start:auto; color:#a9861c; font-size:15px; transition:transform .28s ease; flex:0 0 auto; } .faq-item.open .faq-q::after{ transform:rotate(180deg); } .faq-item.open{ border-color:#e0cf8f; box-shadow:0 8px 22px -14px rgba(201,162,39,.5); } .faq-item .faq-a{ color:#4a443a; } /* ۳) ورودیِ مخفیِ داخلِ کارت‌های انتخابی: absolute بود ولی کارت relative نبود، پس نسبت به صفحه جا می‌گرفت و با width:100% کلِ چیدمانِ صفحه را ۷۰۰ پیکسل جابه‌جا می‌کرد (صفحهٔ «اتوبوس داخل ایران» کاملاً دفرم بود). */ .type-card, .veh-card, .kg-pick-card{ position:relative; } .type-card input[type="radio"], .type-card input[type="checkbox"], .veh-card input[type="radio"], .veh-card input[type="checkbox"]{ position:absolute; inset-block-start:0; inset-inline-start:0; width:1px !important; height:1px !important; opacity:0; pointer-events:none; margin:0; } /* ۴) آخرین سبزهای باقی‌مانده در استایلِ داخلیِ صفحات (تمِ سایت سبز ندارد) */ .ir-hero{ background:radial-gradient(120% 130% at 50% 0%, #2f2f2f, #101010) !important; } .price-box{ background:linear-gradient(135deg,#faf7ef,#f3ede0) !important; border-color:#d9cfae !important; } /* ۵) نوارهای عمداً تیره: قانونِ سراسریِ «همهٔ تیترها سیاه» متنشان را نامرئی می‌کرد. این‌جا صریحاً روشن می‌شوند. */ .ir-hero h1, .ir-hero h2, .ir-hero h3, .ir-hero .eyebrow, .ir-hero .eyebrow-ar, .kg-cta-box h1, .kg-cta-box h2, .kg-cta-box h3, .kgf-cta h1, .kgf-cta h2, .kgf-cta h3, .hm-charter h1, .hm-charter h2, .hm-charter h3, .kg-footer h1, .kg-footer h2, .kg-footer h3{ color:#f7f2e7 !important; text-shadow:none; } .ir-hero p, .kgf-cta p, .hm-charter p{ color:#ded9cd !important; } .ir-hero .eyebrow, .hm-charter .eyebrow{ color:#f0d685 !important; } /* دکمهٔ «رزرو از صفحهٔ اصلی»: رنگِ لینکِ عمومیِ طلایی رویش می‌نشست و طلایی‌روی‌طلایی می‌شد. متنش همیشه تیره بماند. */ .kgf-btn, .kgf-cta .kgf-btn{ color:#1b1508 !important; } /* ۶) پاک‌سازیِ محتوایِ چسبانده‌شده از Word (کلاسِ MsoNormal): فونتِ Calibri/Times و رنگ‌های inline (طلاییِ کم‌کنتراست) با متنِ سایت نمی‌خواند و صفحه را غیرحرفه‌ای نشان می‌داد. */ main .container .MsoNormal, main .container .MsoNormal *:not(a){ font-family:inherit !important; color:inherit !important; background-color:transparent !important; } main .container .MsoNormal{ color:#333 !important; } main .container .MsoNormal a{ color:var(--green-deep, #8a6d16) !important; } main .container .MsoNormal b, main .container .MsoNormal strong{ color:#1b1b1b !important; } /* ═══ ویجتِ معرفیِ خودرو (بلوکِ «🚘 معرفی خودرو») ═══ */ .kg-carw{ display:flex; flex-direction:column; gap:18px; margin:24px 0; } .kg-carw-item{ display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr); gap:22px; align-items:center; background:#fff; border:1.5px solid #e2dac8; border-radius:20px; padding:18px; box-shadow:0 12px 34px -22px rgba(60,50,20,.45); transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .kg-carw-item:hover{ border-color:var(--gold, #c9a227); transform:translateY(-2px); box-shadow:0 16px 40px -20px rgba(201,162,39,.45); } @media(max-width:760px){ .kg-carw-item{ grid-template-columns:1fr; gap:14px; padding:14px; }} .kg-carw-img{ border-radius:15px; overflow:hidden; background:#f4f0e4; aspect-ratio:16/10; } .kg-carw-img img{ width:100%; height:100%; object-fit:cover; display:block; } .kg-carw-t{ margin:0 0 10px !important; font-size:19px !important; color:#1b1b1b !important; } .kg-carw-t::before{ content:none !important; } .kg-carw-specs{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:11px; } .kg-carw-specs span{ font-size:12.5px; font-weight:800; color:#6b5410; background:#f9f4e4; border:1px solid #e4d3a0; border-radius:999px; padding:5px 12px; } .kg-carw-d{ margin:0 0 14px !important; font-size:14px !important; line-height:2 !important; color:#4a443a !important; } .kg-carw-btn{ display:inline-block; padding:11px 24px; border-radius:12px; text-decoration:none; background:linear-gradient(135deg,#f0d685,var(--gold, #c9a227) 55%,#a9861c); color:#1b1508 !important; font-weight:900; font-size:14px; box-shadow:0 8px 20px -8px rgba(201,162,39,.55), inset 0 1px 0 rgba(255,255,255,.45); } .kg-carw-btn:hover{ filter:brightness(1.05); } /* کارت‌های ناوگان قابلِ کلیک‌اند و به فرمِ رزرو وصل می‌شوند */ .kgf-head{ text-decoration:none; color:inherit; cursor:pointer; } .kgf-model{ display:block; text-decoration:none; color:inherit; cursor:pointer; border-radius:10px; padding:7px 9px; margin:-7px -9px; transition:background .15s ease; } .kgf-model:hover{ background:#faf7ef; } .kgf-go{ display:block; font-style:normal; font-size:11.5px; font-weight:800; color:var(--green-deep, #8a6d16); margin-top:3px; opacity:0; transition:opacity .15s ease; } .kgf-model:hover .kgf-go{ opacity:1; } .kgf-cardbtn{ display:block; margin-top:13px; text-align:center; text-decoration:none; padding:10px 14px; border-radius:11px; font-weight:900; font-size:13px; background:#faf7ef; border:1.5px solid #e0cf8f; color:var(--green-deep, #8a6d16) !important; transition:background .16s ease, border-color .16s ease; } .kgf-cardbtn:hover{ background:#f7edcf; border-color:var(--gold, #c9a227); } @media (prefers-reduced-motion: reduce){} @media(max-width:640px){} /* ═══════════════════════════════════════════════════════════════ معرفیِ وسیلهٔ انتخاب‌شده: متن + گالریِ عکس با هر بار زدنِ زبانهٔ اتوبوس/ون/شخصی، متن و عکس‌های همان وسیله نشان داده می‌شود (محتوایش از پنل ← «ویترین خدمات» می‌آید). ═══════════════════════════════════════════════════════════════ */ #kgSvcIntro{ max-width:1060px; margin-inline:auto; padding:0 16px; } @media(max-width:640px){} @media(max-width:640px){} @media(max-width:820px){} @media(max-width:460px){} @media(max-width:520px){} /* ═══ پنجرهٔ انتخابِ زبان ═══ فقط برای بازدیدکننده‌ای باز می‌شود که مرورگر/کشورش زبانِ دیگری را نشان می‌دهد. فارسی همیشه گزینهٔ برجسته و پیش‌فرض است. */ .kg-langpop{ position:fixed; inset:0; z-index:9800; display:flex; align-items:center; justify-content:center; background:rgba(20,18,14,.62); backdrop-filter:blur(4px); padding:20px; } .kg-langpop-b{ background:#fff; border-radius:20px; padding:26px 24px; width:min(400px,100%); text-align:center; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); font-family:Vazirmatn,system-ui,sans-serif; } .kg-langpop-h{ font-size:34px; line-height:1; margin-bottom:10px; } .kg-langpop-t{ margin:0; font-size:14px; color:#8a8371; font-weight:700; } .kg-langpop-t2{ margin:2px 0 18px; font-size:15px; color:#1b1b1b; font-weight:800; } .kg-langb.on{ background:linear-gradient(135deg,#e2c463,var(--gold, #c9a227)); border-color:var(--gold, #c9a227); color:#1b1508; } /* زبان‌های چپ‌به‌راست: ویجت باید جهتش را عوض کند */ html[dir="ltr"] .hs{ direction:ltr; } /* ═══ کلیدِ زبان در نوارِ بالا ═══ */ .kg-langsw{ position:relative; list-style:none; } .kg-langsw-b{ display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border:1.5px solid rgba(201,162,39,.5); border-radius:20px; background:transparent; font-family:inherit; font-size:13px; font-weight:700; color:inherit; cursor:pointer; } .kg-langsw-b:hover{ border-color:var(--gold, #c9a227); background:rgba(201,162,39,.1); } .kg-langsw-b i{ font-style:normal; font-size:10px; opacity:.7; } .kg-langsw-m{ display:none; position:absolute; inset-block-start:calc(100% + 6px); inset-inline-end:0; min-width:150px; background:#fff; border:1.5px solid #e3ddcd; border-radius:12px; box-shadow:0 16px 34px -12px rgba(0,0,0,.28); padding:6px; z-index:900; } .kg-langsw[data-open="1"] .kg-langsw-m{ display:block; } .kg-langsw-m button{ display:block; width:100%; text-align:start; padding:9px 12px; border:none; background:none; border-radius:8px; font-family:inherit; font-size:13.5px; font-weight:700; color:#1b1b1b; cursor:pointer; } .kg-langsw-m button:hover{ background:#faf6e9; } .kg-langsw-m button.on{ background:linear-gradient(135deg,#e2c463,var(--gold, #c9a227)); color:#1b1508; } @media(max-width:900px){ .kg-langsw-m{ inset-inline:0; inset-inline-end:auto; }} @media(max-width:560px){} @media(max-width:640px){} /* دکمهٔ بستنِ پنجرهٔ انتخابِ زبان — بدونِ آن، پنجره تمامِ صفحه را می‌گیرد و کاربری که نمی‌خواهد زبان عوض کند حتی نمی‌تواند منوی موبایل را باز کند. */ .kg-langpop-b{ position:relative; } @media(max-width:420px){} /* «از کدام کشور هستید؟» در پنجرهٔ زبان — پرچمِ صحنه از همین می‌آید، نه از IP؛ چون بسیاری از زائران با فیلترشکن وصل می‌شوند و IP کشورِ دیگری را نشان می‌دهد و پرچمِ اشتباه بالای صفحه می‌نشیند. */ .kg-langpop-c{ margin:14px 0 4px; text-align:start; } .kg-langpop-c label{ display:block; font-size:12px; font-weight:700; color:#6b6455; margin-bottom:6px; } .kg-langpop-c select{ width:100%; padding:10px 12px; border:1.5px solid #e3ddcd; border-radius:10px; background:#fbf9f3; font-family:inherit; font-size:13.5px; font-weight:700; color:#2a2620; } .kg-langpop-c select:focus{ outline:none; border-color:var(--gold, #c9a227); } /* پرچمِ کنارِ نامِ هر زبان — «العربية» و «پښتو» برای کسی که آن خط را نمی‌شناسد ناخواناست؛ پرچم در یک نگاه می‌گوید کدام گزینه مالِ اوست. */ .kg-lf{ width:22px; height:15px; object-fit:cover; border-radius:3px; border:1px solid rgba(0,0,0,.12); flex:none; vertical-align:middle; } .kg-langb, .kg-langmini, .kg-langsw-b, .kg-langsw-m button{ display:inline-flex; align-items:center; gap:8px; justify-content:center; } .kg-langsw-m button{ justify-content:flex-start; } .kg-lf-g{ font-size:15px; line-height:1; flex:none; } /* ═══ انتخابِ کشور در پنجرهٔ زبان — جست‌وجوشدنی و اجباری ═══ فهرست ۱۰۴ کشور دارد؛ در فهرستِ کشویی روی گوشی پیدا کردنِ یک کشور عذاب است. پس کادرِ جست‌وجو + فهرستِ فیلترشونده. */ .kg-langpop-c label{ display:block; font-size:12px; font-weight:700; color:#6b6455; margin-bottom:6px; } .kg-langpop-c .kg-req{ color:#b3261e; } .kg-langpop-c input#kgCountryQ{ width:100%; box-sizing:border-box; padding:11px 13px; border:1.5px solid #e3ddcd; border-radius:10px; background:#fff; font-family:inherit; font-size:14px; color:#2a2620; } .kg-langpop-c input#kgCountryQ:focus{ outline:none; border-color:var(--gold, #c9a227); } .kg-langpop-c.need input#kgCountryQ{ border-color:#b3261e; background:#fdf5f5; } .kg-langpop-c.need label{ color:#b3261e; } .kg-cty-list{ max-height:190px; overflow-y:auto; margin-top:7px; border:1px solid #eee; border-radius:10px; background:#fff; -webkit-overflow-scrolling:touch; } .kg-cty{ display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px; border:none; border-bottom:1px solid #f2f0ea; background:none; cursor:pointer; font-family:inherit; font-size:13.5px; color:#2a2620; text-align:start; } .kg-cty:last-child{ border-bottom:none; } .kg-cty:hover{ background:#faf6e9; } .kg-cty span{ flex:1; } .kg-cty i{ font-style:normal; font-size:12px; color:#8d866f; } .kg-cty-none{ padding:12px; text-align:center; color:#8d866f; font-size:13px; margin:0; } .kg-cty-picked{ display:flex; align-items:center; gap:9px; margin-top:7px; padding:10px 12px; border:1.5px solid var(--gold, #c9a227); border-radius:10px; background:#fdf8ea; font-size:14px; font-weight:700; color:#2a2620; } .kg-cty-picked b{ flex:1; font-weight:700; } .kg-cty-clear{ border:none; background:none; cursor:pointer; font-size:14px; color:#8a7a3c; padding:2px 6px; border-radius:6px; font-family:inherit; } .kg-cty-clear:hover{ background:rgba(201,162,39,.15); } /* در موبایل دو حبابِ چت روی هم می‌افتاد: یکی در نوارِ شناور و یکی خودِ ویجتِ گفتگو. حبابِ ویجت پنهان می‌شود و همان دکمهٔ نوار بازش می‌کند. */ body.kg-onechat .kgc-fab{ display:none !important; } /* پیامِ «هم‌اکنون در عراقم» — کنارِ راه‌های تماس */ .kg-iraq-note{ margin:10px 0 0; padding:9px 13px; font-size:12.8px; line-height:1.95; color:#7a6a3a; background:rgba(201,162,39,.10); border:1px dashed rgba(201,162,39,.45); border-radius:10px; } /* دکمهٔ «تأیید» پنجرهٔ کشور — پنجره با همین بسته می‌شود، نه با کلیک روی زبان */ .kg-langpop-ok{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:16px; padding:14px 18px; border:none; border-radius:14px; font-family:inherit; font-size:16px; font-weight:800; cursor:pointer; background:linear-gradient(135deg,#e8ce7c,var(--gold, #c9a227)); color:#1b1508; box-shadow:0 10px 24px -12px rgba(201,162,39,.7); transition:.18s; } .kg-langpop-ok i{ font-style:normal; font-size:14px; opacity:.75; } .kg-langpop-ok:disabled{ background:#eceadf; color:#9a9382; box-shadow:none; cursor:not-allowed; } .kg-langpop-ok:not(:disabled):hover{ transform:translateY(-1px); } .kg-langpop-note{ margin:10px 0 0; font-size:13px; font-weight:700; color:#8a7328; min-height:18px; text-align:center; } /* ═══ کلیدِ زبان — گوشهٔ سربرگ، بیرون از منوی همبرگری ═══ پیش از این داخلِ
    منو بود و روی موبایل پشتِ همبرگر پنهان می‌شد؛ زائرِ خارجی برای عوض‌کردنِ زبان باید اول منو را باز می‌کرد. */ /* ⚠ ۲۰۲۶-۰۸-۲۳ — این‌جا position:relative بود و چسبندگیِ هدر (سطرِ «header{position:sticky}» بالاتر) را در کلِ سایت خنثی می‌کرد. هدفش فقط این بود که کلیدِ زبان بتواند در گوشهٔ سربرگ بنشیند — و sticky خودش همان بافتِ جایگیری را می‌سازد، پس کاری از دست نمی‌رود. روی دامنهٔ فارسی اصلاً کلیدِ زبانی ساخته نمی‌شود (ir_langs = ['fa'])؛ یعنی قاعده‌ای برای امکانی که وجود ندارد، هدر را از چسبندگی انداخته بود. */ header{ position:sticky; top:0; } .kg-langsw{ /* ⚠ پیش از این وسط‌چینی با transform:translateY(-50%) بود. هر transform یک «بافتِ چینش» می‌سازد و — مهم‌تر — position:fixed را از کار می‌اندازد: فرزندِ fixed به‌جای صفحه، نسبت به همین عنصر جا می‌گیرد. برای همین فهرستِ زبان روی موبایل از لبه بیرون می‌زد. حالا بدونِ transform. */ position:absolute; inset-inline-end:64px; inset-block:0; display:flex; align-items:center; z-index:60; list-style:none; } .kg-langsw-b{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.10); color:inherit; border:1.5px solid rgba(201,162,39,.55); border-radius:999px; padding:7px 13px; font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap; transition:.16s; } .kg-langsw-b:hover{ border-color:var(--gold, #c9a227); background:rgba(201,162,39,.16); } .kg-langsw-b img{ width:20px; height:14px; object-fit:cover; border-radius:3px; } .kg-langsw-m{ /* ⚠ با inset-inline-end:0 فهرست از لبهٔ صفحه بیرون می‌زد (اندازه‌گیری: x = -۷۷ پیکسل روی ۱۲۸۰). دلیلش این است که خودِ کلید نزدیکِ لبه است و در راست‌به‌چپ، «انتهای خطی» سمتِ چپ می‌افتد. با inset-inline-start فهرست به سمتِ داخلِ صفحه باز می‌شود و همیشه کامل دیده می‌شود. */ /* ⚠ فهرست هرطور که به خودِ دکمه می‌چسبید از لبهٔ صفحه بیرون می‌زد (اندازه‌گیری: x = −۷۷ روی ۱۲۸۰ و x = −۱۵۹ روی ۳۹۰). چون کلید خودش نزدیکِ لبه است، هیچ لنگرگاهِ نسبی جواب نمی‌دهد. پس نسبت به **صفحه** لنگر می‌اندازد — سربرگ هم چسبان است، پس همیشه زیرِ دکمه می‌ماند. */ /* هم‌سمتِ خودِ دکمه: دکمه با inset-inline-end جا می‌گیرد، پس فهرست هم باید با inset-inline-end بنشیند. با «inset-inline:12px auto» دکمه یک طرفِ صفحه بود و فهرست طرفِ مقابل — اندازه‌گیری: فاصلهٔ ۱۱۷۵ پیکسل. */ display:none; position:fixed; inset-block-start:62px; inset-inline:auto 12px; min-width:min(240px, calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:min(60vh, calc(100vh - 90px)); overflow:auto; z-index:1000; background:#fff; color:#16211c; border:1.5px solid var(--line,#e3ddcd); border-radius:14px; box-shadow:0 18px 40px -18px rgba(0,0,0,.45); padding:6px; } .kg-langsw[data-open="1"] .kg-langsw-m{ display:block; } .kg-langsw-m button{ display:flex; align-items:center; gap:9px; width:100%; background:none; border:none; border-radius:10px; padding:9px 11px; font-family:inherit; font-size:14px; cursor:pointer; text-align:start; color:inherit; } .kg-langsw-m button:hover{ background:#f6f2e6; } .kg-langsw-m button.on{ background:var(--gold, #c9a227); color:#1b1508; font-weight:800; } .kg-langsw-m img{ width:22px; height:15px; object-fit:cover; border-radius:3px; } /* موبایل: کنارِ دکمهٔ همبرگر، کوچک‌تر ولی همیشه دیدنی */ @media(max-width:900px){ .kg-langsw{ inset-inline-end:72px; } .kg-langsw-b span{ display:none; } /* فقط پرچم و فلش */ .kg-langsw-b{ padding:7px 10px; }} @media(max-width:380px){ .kg-langsw{ inset-inline-end:66px; } .kg-langsw-b{ padding:6px 8px; }} /* ═══ خطوطِ مرزِ بلوک‌ها پررنگ‌تر ═══ رنگِ --line خیلی کم‌رنگ بود (#e3ddcd روی زمینهٔ سفید تقریباً دیده نمی‌شد) و مرزِ کارت‌ها، جدول‌ها و کادرها گم می‌شد. تیره‌تر و کمی ضخیم‌تر شد تا هر بلوک لبهٔ روشنی داشته باشد — بدونِ اینکه ظاهر شلوغ شود. */ :root{ --line:#cfc6ab; /* پیش از این #e3ddcd */ --line-soft:#e2dbc7; /* برای جداکننده‌های داخلی که نباید داد بزنند */ } html[data-theme="dark"], .kg-dark{ --line:#3a4d43; /* پیش از این #25352d */ --line-soft:#2c3b33; } /* لبهٔ کارت‌ها و کادرها: از ۱ به ۱٫۵ پیکسل */ .card, .box, .panel, .kg-card, .svc-card, .hs-card, section > .container > .card, .reserve-card, .price-card, .info-card, .faq-item, .kg-box{ border-width:1.5px; } /* جدول‌ها: خطِ جداکنندهٔ ردیف‌ها دیده شود */ table th, table td{ border-color:var(--line); } table thead th{ border-bottom-width:2px; } /* کادرهای ورودی: مرزشان باید از زمینه جدا باشد */ input:not([type="checkbox"]):not([type="radio"]), select, textarea{ border-color:var(--line); } input:focus, select:focus, textarea:focus{ border-color:var(--gold, #c9a227); } @media (max-width:520px){ /* زیرِ ۴۲۰ پیکسل سه تب در یک ردیف خوانا نیست */ @media(max-width:420px){ .hs-mode{ grid-template-columns:1fr 1fr; } }} @media (max-width:640px){} /* ══════════ حالتِ تور: صفحه فقط دربارهٔ تور ══════════ وقتی «تور عراق» انتخاب شد، بخش‌هایی که دربارهٔ حمل‌ونقلِ نقطه‌به‌نقطه‌اند کنار می‌روند. بازدیدکننده‌ای که دنبالِ تور است نباید جدولِ کرایهٔ تاکسیِ فرودگاه را ببیند. */ html.kg-mode-tour .hm-steps, html.kg-mode-tour .hm-dest, html.kg-mode-tour .hm-routes, html.kg-mode-tour .hm-svc, html.kg-mode-tour .hs-gal, html.kg-mode-tour #kgSvcIntro{ display:none !important; } /* ── گالریِ تورها ── */ .kg-tours{ padding-block:34px 10px; } .kg-tours-h{ margin:0 0 20px; font-size:clamp(20px,3vw,27px); font-weight:900; color:var(--ink,#222a24); text-align:center; } .kg-tours-none{ margin:0; padding:36px 12px; text-align:center; color:#7b8279; font-size:14px; border:1.4px dashed #dfe3dc; border-radius:16px; background:#fbfbf9; } .kg-tours-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); align-items:start; } .kg-tour{ background:#fff; border:1.4px solid #e6e9e3; border-radius:18px; overflow:hidden; box-shadow:0 3px 16px rgba(20,30,22,.06); transition:box-shadow .2s, transform .14s, border-color .2s; display:flex; flex-direction:column; } .kg-tour:hover{ box-shadow:0 10px 30px rgba(20,30,22,.13); transform:translateY(-2px); } .kg-tour.open{ border-color:var(--gold, #c9a227); box-shadow:0 10px 34px rgba(201,162,39,.17); } .kg-tour-pic{ position:relative; aspect-ratio:16/10; background:#f0efe9; } .kg-tour-pic img{ width:100%; height:100%; object-fit:cover; display:block; } .kg-tour-nopic{ display:block; width:100%; height:100%; background:linear-gradient(135deg,#efece1,#e3e7de); } .kg-tour-tag{ position:absolute; inset-inline-end:12px; bottom:12px; background:rgba(24,32,26,.86); color:#fff; border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:800; backdrop-filter:blur(4px); } .kg-tour-body{ padding:15px 16px 16px; display:flex; flex-direction:column; flex:1; } .kg-tour-body h3{ margin:0 0 6px; font-size:16.5px; font-weight:900; color:#222a24; line-height:1.6; } .kg-tour-sum{ margin:0 0 9px; font-size:13px; color:#68706a; line-height:1.9; } .kg-tour-next{ margin:0 0 12px; font-size:12.5px; color:#4a514a; } .kg-tour-next b{ color:#222a24; } .kg-tour-more{ align-self:flex-start; margin-top:auto; cursor:pointer; border:1.5px solid var(--gold, #c9a227); background:#fff; color:#8a6d12; border-radius:11px; padding:9px 18px; font-family:inherit; font-size:13px; font-weight:800; transition:background .16s; } .kg-tour-more:hover{ background:#fdf6e3; } .kg-tour-det{ margin-top:14px; padding-top:13px; border-top:1px dashed #e6e9e3; } .kg-tour-det p{ margin:7px 0; font-size:12.5px; line-height:1.95; color:#4a514a; } .kg-tour-det p b{ color:#222a24; } .kg-tour-pickh{ margin:14px 0 8px !important; font-weight:900 !important; color:#222a24 !important; } .kg-tour-dates{ display:flex; flex-wrap:wrap; gap:8px; } .kg-tour-d{ flex:1 1 138px; padding:9px 11px; cursor:pointer; text-align:center; border:1.4px solid #dfe3dc; border-radius:12px; background:#fff; font-family:inherit; transition:border-color .16s, background .16s; } .kg-tour-d:hover:not(.full){ border-color:var(--gold, #c9a227); background:#fdfaf0; } .kg-tour-d.on{ border-color:var(--gold, #c9a227); background:#fdf6e3; } .kg-tour-d.full{ opacity:.42; cursor:not-allowed; } .kg-tour-d .dd{ display:block; font-size:12.5px; font-weight:800; color:#222a24; } .kg-tour-d .ds{ display:block; font-size:10.5px; color:#7b8279; margin-top:2px; } .kg-tour-d .dp{ display:block; font-size:12px; font-weight:800; color:#8a6d12; margin-top:3px; } .kg-tour-go{ display:flex; gap:10px; align-items:end; margin-top:14px; } .kg-tour-go label{ display:flex; flex-direction:column; gap:5px; width:110px; flex:none; } .kg-tour-go label span{ font-size:11.5px; font-weight:700; color:#68706a; } .kg-tour-go input{ width:100%; box-sizing:border-box; padding:10px 11px; border:1.4px solid #dfe3dc; border-radius:11px; font-family:inherit; font-size:14px; } @media (max-width:520px){ .kg-tours-grid{ grid-template-columns:1fr; } .kg-tour-go{ flex-direction:column; align-items:stretch; } .kg-tour-go label{ width:100%; }} /* بخشِ «پرداخت سه‌مرحله‌ای» مالِ ترانسفرِ دربستی است؛ تورِ گروهی قیمتِ نفری و شرایطِ خودش را دارد و این‌جا فقط گیج‌کننده است. */ html.kg-mode-tour .hm-pay{ display:none !important; } /* وسیله‌های نقلیه در تصویرِ هدر هم بخشی از «اطلاعاتِ اتوبوس»اند. در حالتِ تور صحنه می‌ماند (حرم، نخل، خورشید) ولی اتوبوس و تاکسی و ون از آن برداشته می‌شوند. */ html.kg-mode-tour #kg-p-vehicles, html.kg-mode-tour #kg-bus, html.kg-mode-tour #kg-minibus, html.kg-mode-tour #kg-van, html.kg-mode-tour #kg-taxi, html.kg-mode-tour #kg-transfer{ display:none !important; } .kg-tours-intro{ margin:-8px auto 22px; max-width:760px; text-align:center; font-size:14px; line-height:2.05; color:#5f6862; } .kg-tours-below{ margin-top:26px; padding:20px 22px; background:#fbfaf6; border:1.3px solid #eae7dc; border-radius:16px; } .kg-tours-below h3{ margin:0 0 9px; font-size:16px; font-weight:900; color:#222a24; } .kg-tours-below p{ margin:0; font-size:13.5px; line-height:2.1; color:#4f574f; white-space:pre-line; } @media (prefers-color-scheme: dark){} .hs-m-ins, .hs .hs-note, .hs .hs-hint, .hs-q-when, .stat .lbl, .footer-grid ul li a{ color:#4a4437 !important; } /* سه رنگی که سنجشِ واقعیِ مرورگر زیرِ حد نشان داد (اندازه‌گیری‌شده، نه حدسی): مشخصاتِ کارتِ خدمات ۴٫۲۹ → ۵٫۷۴ شمارهٔ کشور در دیالوگ ۳٫۶۴ → ۵٫۱۲ دکمهٔ «تأیید» در حالتِ غیرفعال ۲٫۵۳ → ۴٫۶۰ (دکمهٔ غیرفعال از قاعدهٔ استاندارد مستثناست، ولی زائرِ مسن باید بخوانَدش تا بفهمد چرا هنوز نمی‌تواند بزند.) */ .hm-svc-spec li{ color:#5f5a4e !important; } .kg-cty i, .kg-cty-none{ color:#6b6455 !important; } .kg-langpop-ok:disabled{ color:#6e6858 !important; } .kg-langpop-t{ color:#5c5648 !important; } /* ═══════════ حالتِ تور: حال‌وهوای تفریحی ═══════════ حالتِ «حمل‌ونقل» کارِ جدی است — زائر می‌خواهد از مرز به کربلا برسد. حالتِ «تور» فروشِ یک تجربه است و باید همان لحظه حس شود، نه اینکه فقط چند بخش پنهان شوند (کاری که تا حالا می‌کرد). تغییرِ حس با سه چیز، بدونِ عکسِ اضافه و بدونِ کندکردنِ صفحه: • پس‌زمینهٔ گرمِ رنگی به‌جای سفیدِ خنثی • نوارِ رنگین‌کمانِ باریک بالای صفحه • درخششِ ملایمِ پشتِ صحنهٔ هدر همه فقط CSS‌اند و روی سایتِ فارسی هیچ اثری ندارند. */ /* ⚠ !important لازم است: قاعدهٔ «html, body{ background:#ffffff !important }» بالاتر در همین فایل هر پس‌زمینه‌ای را می‌بلعد. */ html.kg-mode-tour, html.kg-mode-tour body{ background: radial-gradient(1100px 520px at 12% -8%, rgba(255,196,84,.22), transparent 62%), radial-gradient(900px 460px at 88% 4%, rgba(96,186,214,.20), transparent 60%), linear-gradient(180deg,#fffdf7 0%,#fff6e9 46%,#fdf2e0 100%) !important; background-attachment:fixed !important; } /* بخش‌های یک‌درمیان هم گرم شوند — خاکستریِ #fafafa حالِ تفریحی را می‌کُشد */ html.kg-mode-tour main > section.section:nth-of-type(2n){ background:rgba(255,244,224,.55) !important; } html.kg-mode-tour .stat-strip, html.kg-mode-tour .stat-card{ background:linear-gradient(135deg,rgba(255,246,229,.9),rgba(255,255,255,.9)) !important; border-color:#f0dcae !important; } /* ⚠ نمادهای عزا در حالتِ تور کنار می‌روند. بنرِ سرخِ «یا لثارات الحسین» و پرچم‌های کنارش نشانِ اربعین‌اند؛ روی صفحه‌ای که «جولات العراق» می‌فروشد نه از نظرِ فروش جا دارند نه از نظرِ احترام. */ html.kg-mode-tour .kg-hero-scene [data-kg-mourn]{ display:none !important; } /* صحنه روشن‌تر و شادتر — همان تصویر، حالِ دیگر */ /* صحنهٔ تور خودش روشن و رنگی است؛ فیلترِ روشنایی رنگ‌هایش را می‌سوزانَد */ html.kg-mode-tour .kg-scene-tour svg{ filter:none !important; } html.kg-mode-tour .kg-hero-scene svg{ filter:saturate(1.22) brightness(1.07) hue-rotate(-4deg); transition:filter .35s; } html.kg-mode-tour #kg-p-sun{ opacity:1 !important; } html.kg-mode-tour #kg-p-palms{ opacity:1 !important; } html.kg-mode-tour .hero{ background-image: radial-gradient(760px 300px at 50% 0%, rgba(255,214,120,.34), transparent 70%); } /* نوارِ رنگین‌کمان — نشانهٔ بی‌کلامِ «این‌جا حالِ دیگری است» */ html.kg-mode-tour body::before{ content:''; position:fixed; inset-block-start:0; inset-inline:0; height:4px; z-index:9998; background:linear-gradient(90deg,#f2a03d,#e9c46a,#2a9d8f,#4ea8de,#c77dff,#f2a03d); background-size:300% 100%; animation:kgTourBar 14s linear infinite; pointer-events:none; } @keyframes kgTourBar{ from{ background-position:0 0; } to{ background-position:300% 0; } } @media (prefers-reduced-motion:reduce){ html.kg-mode-tour body::before{ animation:none; }} /* کارت‌های تور: گرم‌تر و برجسته‌تر از کارت‌های حمل‌ونقل */ html.kg-mode-tour .kg-tours .section-head h2{ background:linear-gradient(90deg,#c9741f,var(--gold, #c9a227) 55%,#2a9d8f); -webkit-background-clip:text; background-clip:text; color:transparent; } html.kg-mode-tour .kg-tour-card{ border-color:#f0dcae; box-shadow:0 18px 40px -22px rgba(201,116,31,.45); } html.kg-mode-tour .kg-tour-card:hover{ transform:translateY(-4px); box-shadow:0 24px 54px -22px rgba(201,116,31,.6); } /* دکمهٔ اصلی در حالتِ تور: نارنجیِ سفر، نه طلاییِ رسمی */ html.kg-mode-tour .btn-gold, html.kg-mode-tour .kg-cta-btns .btn-gold{ background:linear-gradient(135deg,#f2a03d,#e07a1f); border-color:#e07a1f; color:#fff; } /* ═══════════════ فضای انیمیشنیِ حالتِ تور ═══════════════ «حالت تور باید بک‌گراند انیمیشنی، حال و فضای تور بگیره.» همه‌چیز CSS خالص است: نه عکسِ اضافه، نه کتابخانه، نه یک بایت دانلودِ بیشتر. هر لایه pointer-events:none دارد تا جلوی کلیک را نگیرد، و همه زیرِ prefers-reduced-motion خاموش می‌شوند. */ /* ── ۱) آسمانِ متحرک ── */ html.kg-mode-tour, html.kg-mode-tour body{ background: radial-gradient(1200px 560px at 12% -10%, rgba(255,196,84,.26), transparent 62%), radial-gradient(1000px 500px at 88% 2%, rgba(96,186,214,.24), transparent 60%), radial-gradient(800px 420px at 50% 108%, rgba(199,125,255,.14), transparent 64%), linear-gradient(140deg,#fffdf7 0%,#fff6e9 34%,#fdf2e0 62%,#f6f1ff 100%) !important; background-size:200% 200%, 200% 200%, 200% 200%, 200% 200% !important; background-attachment:fixed !important; animation:kgTourSky 26s ease-in-out infinite alternate; } @keyframes kgTourSky{ from{ background-position:0% 0%, 100% 0%, 50% 100%, 0% 50%; } to { background-position:100% 20%, 0% 30%, 40% 80%, 100% 50%; } } /* ── ۲) ابرهای شناور ── */ html.kg-mode-tour body::after{ content:''; position:fixed; inset-block-start:0; inset-inline:0; height:46vh; z-index:0; pointer-events:none; /* هر ابر از سه پُفِ کوچک ساخته می‌شود، نه یک لکهٔ بزرگ — لکهٔ درشت مثلِ کثیفیِ صفحه دیده می‌شد. */ background: radial-gradient(closest-side, rgba(255,255,255,.9), transparent 72%) 7% 22%/78px 34px no-repeat, radial-gradient(closest-side, rgba(255,255,255,.9), transparent 72%) 10% 19%/58px 44px no-repeat, radial-gradient(closest-side, rgba(255,255,255,.9), transparent 72%) 13% 22%/64px 30px no-repeat, radial-gradient(closest-side, rgba(255,255,255,.8), transparent 72%) 44% 13%/66px 28px no-repeat, radial-gradient(closest-side, rgba(255,255,255,.8), transparent 72%) 47% 10%/50px 38px no-repeat, radial-gradient(closest-side, rgba(255,255,255,.8), transparent 72%) 50% 13%/56px 26px no-repeat, radial-gradient(closest-side, rgba(255,255,255,.75), transparent 72%) 78% 26%/70px 30px no-repeat, radial-gradient(closest-side, rgba(255,255,255,.75), transparent 72%) 81% 23%/54px 40px no-repeat, radial-gradient(closest-side, rgba(255,255,255,.75), transparent 72%) 84% 26%/60px 28px no-repeat; animation:kgTourClouds 70s linear infinite alternate; opacity:.62; } @keyframes kgTourClouds{ from{ transform:translate3d(-6%,0,0); } to { transform:translate3d(6%,0,0); } } /* ── ۳) بادکنک‌های سفر ── یک لایهٔ سبک روی صحنهٔ هدر؛ چهار نقطهٔ رنگی که آرام بالا می‌روند و محو می‌شوند. */ html.kg-mode-tour .hero::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background: radial-gradient(closest-side, #f2a03d 62%, transparent 66%) 14% 100%/16px 20px no-repeat, radial-gradient(closest-side, #2a9d8f 62%, transparent 66%) 38% 100%/13px 17px no-repeat, radial-gradient(closest-side, #c77dff 62%, transparent 66%) 66% 100%/15px 19px no-repeat, radial-gradient(closest-side, #4ea8de 62%, transparent 66%) 87% 100%/12px 16px no-repeat; animation:kgTourFloat 15s ease-in-out infinite; opacity:0; } @keyframes kgTourFloat{ 0% { transform:translateY(6%) scale(.9); opacity:0; } 14% { opacity:.85; } 76% { opacity:.7; } 100% { transform:translateY(-108%) scale(1.06); opacity:0; } } /* ── ۴) خورشیدِ نبض‌دارِ صحنه ── */ html.kg-mode-tour .kg-hero-scene #kg-p-sun{ transform-origin:center; animation:kgTourSun 9s ease-in-out infinite alternate; } @keyframes kgTourSun{ from{ opacity:.82; filter:drop-shadow(0 0 0 rgba(255,196,84,0)); } to { opacity:1; filter:drop-shadow(0 0 26px rgba(255,196,84,.55)); } } /* ── ۵) نخل‌های تکان‌خور ── */ html.kg-mode-tour .kg-hero-scene #kg-p-palms{ transform-origin:50% 100%; animation:kgTourPalms 7s ease-in-out infinite alternate; } @keyframes kgTourPalms{ from{ transform:rotate(-.5deg); } to { transform:rotate(.5deg); } } /* محتوای صفحه باید بالای لایه‌های تزئینی بماند */ html.kg-mode-tour main, html.kg-mode-tour footer, html.kg-mode-tour .hs-host{ position:relative; z-index:1; } /* ⚠ سربرگ هم در همین فهرست بود و z-index:1 می‌گرفت. نتیجه: سربرگ یک «بافتِ چینشِ» سقف‌دار می‌ساخت و هر چیزی که از داخلش بیرون می‌زد — به‌ویژه فهرستِ بازشوندهٔ زبان با z-index:900 — پشتِ صحنهٔ انیمیشنیِ هیرو می‌افتاد. سربرگ باید بالاتر از صحنه بماند. main و footer در z-index:1 می‌مانند، چون آن‌ها چیزی بیرون نمی‌زنند. */ html.kg-mode-tour header{ position:sticky; top:0; z-index:900; } html.kg-mode-tour .hero{ position:relative; overflow:hidden; } /* ── دسترس‌پذیری: هرکس حرکت را کم کرده، حرکت نبیند ── */ @media (prefers-reduced-motion:reduce){ html.kg-mode-tour, html.kg-mode-tour body{ animation:none !important; background-size:auto !important; } html.kg-mode-tour body::after, html.kg-mode-tour body::before, html.kg-mode-tour .hero::after, html.kg-mode-tour .kg-hero-scene #kg-p-sun, html.kg-mode-tour .kg-hero-scene #kg-p-palms{ animation:none !important; } html.kg-mode-tour .hero::after{ opacity:.6; }} /* ── مشخصات و برنامهٔ روزبه‌روزِ تور در کارتِ عمومی ── */ .kg-tour-meta{ margin:0 0 8px; font-size:12.5px; font-weight:800; color:#8a6d12; } .kg-tour-itin{ margin:12px 0; padding:12px 14px; background:#fdfaf1; border:1.5px solid #efe6cd; border-radius:12px; } .kg-tour-itin b{ font-size:13px; color:#7a6212; } .kg-tour-itin ol{ margin:8px 0 0; padding-inline-start:20px; } .kg-tour-itin li{ font-size:13px; line-height:2.05; margin-bottom:5px; } html.kg-mode-tour .kg-tour-itin{ background:rgba(255,246,229,.75); border-color:#f0dcae; } /* ── گالریِ عکسِ تور ── */ .kg-tour-pn{ position:absolute; inset-block-end:10px; inset-inline-end:10px; background:rgba(20,20,18,.72); color:#fff; font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:999px; } .kg-tour-thumbs{ display:flex; gap:7px; overflow-x:auto; padding:4px 0 8px; } .kg-tour-th{ flex:0 0 auto; width:72px; height:52px; padding:0; cursor:pointer; border:2px solid transparent; border-radius:9px; overflow:hidden; background:none; } .kg-tour-th img{ width:100%; height:100%; object-fit:cover; display:block; } .kg-tour-th.on{ border-color:var(--gold, #c9a227); box-shadow:0 0 0 3px rgba(201,162,39,.22); } .kg-tour-th:hover{ border-color:#e0cf90; } .kg-crumb{ font-size:12.5px; color:var(--muted,#8a8371); margin-bottom:12px; } .kg-crumb a{ color:inherit; } .kg-tour-page{ margin:10px 0; } .kg-tour-page a{ font-size:13px; font-weight:800; color:#8a6d12; } /* ── فیلترِ دستهٔ تورها ── دو محورِ مستقل: مقصد و نوع. محوری که فقط یک گزینه دارد اصلاً نمایش داده نمی‌شود (js/hero-search.js) — دکمه‌ای که همیشه یک جواب دارد فقط جای صفحه را می‌گیرد. */ .kg-tfil{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:0 auto var(--s4); max-width:900px; } .kg-tfil-b{ border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:7px 16px; font-family:inherit; font-size:13px; font-weight:700; color:var(--muted); cursor:pointer; transition:all var(--t); } .kg-tfil-b:hover{ border-color:var(--gold); color:var(--ink); } .kg-tfil-b.on{ background:var(--gold); border-color:var(--gold); color:#1b1508; } .kg-tour-x{ list-style:none; padding:0; margin:var(--s3) 0 0; display:grid; gap:4px; font-size:13px; color:var(--ink-2); } .kg-tour-x b{ color:var(--green-deep); font-weight:800; } /* ── جلوگیری از سوسوی منوی فارسی روی سایتِ چندزبانه ── index.html میانِ دو دامنه مشترک است و منوی فارسی داخلش نوشته شده. تا پاسخِ /api/lang.php نرسد، js/lang.js نمی‌داند چه زبانی لازم است؛ پس یک لحظه منوی فارسی دیده می‌شود و بعد عوض می‌گردد. ⚠ opacity و نه display: با display چیدمانِ سربرگ می‌پرد و بدتر از خودِ سوسو است. */ /* ⚠ برداشته شد ۲۰۲۶-۰۸-۱۲: این قاعده منو را تا پاسخِ شبکه نامرئی می‌کرد و شکایتِ «روی زیرمنو کلیک می‌کنم، منوها محو می‌شوند» از همین بود. کدی که کلاس را می‌گذاشت برداشته شده؛ خودِ قاعده هم می‌رود تا اگر مرورگرِ کسی نسخهٔ کهنهٔ اسکریپت را کش کرده باشد، باز هم منو پنهان نشود. html.kg-menu-wait header nav ul{ opacity:0; } ← غیرفعال */ header nav ul{ transition:opacity .18s ease; } /* ═══════════════════════════════════════════════════════════════════════ نوارِ برندِ بالای سایت — «سربرگِ کاغذی» روی «ریلِ تیره» چرا روشن و نه تیره: نوارِ ناوبریِ زیرش تیره است. دو نوارِ تیرهٔ روی هم گِل‌آلود می‌شود و کاربر خیال می‌کند دو منو دارد. کاغذِ روشن روی ریلِ تیره، دو چیزِ متفاوت‌اند — همان کاری که سربرگِ نامه با کاغذ می‌کند. انضباطِ رنگ: طلایی فقط خطِ بالای صفحه، آیکون‌های ۱۴ پیکسلی، و زیرِ دامنه‌ای که کاربر رویش است. هیچ‌جا پُرکنندهٔ طلایی. رنگی که همه‌جا باشد، هیچ‌جا تأکید نیست. همه چیز با ویژگیِ منطقی (inline-start/end) نوشته شده و هیچ left/right فیزیکی ندارد — سایت با عوض‌شدنِ زبان جهت عوض می‌کند و یک بار همین اشتباه زیرمنو را به سمتِ غلط انداخت. ═══════════════════════════════════════════════════════════════════════ */ .kg-tb{ /* ⚠ تیره، خواستهٔ صاحبِ سایت — و از نظرِ بصری هم درست‌تر: نوارِ روشن روی نوارِ منوی سفید عملاً نامرئی بود (۲۵۱ در برابر ۲۵۵ سفید) و هر دو با هم یک بلوکِ سفیدِ بلند به‌نظر می‌رسیدند. */ --tb-paper:#15191a; --tb-ink:#ffffff; --tb-mute:#a8a49a; --tb-line:rgba(255,255,255,.14); --tb-gold:#c9a227; /* روی زمینهٔ تیره، طلاییِ روشن‌تر خواناست — ۸.۱:۱ */ --tb-gold-ink:#e6c866; background:var(--tb-paper); /* ⚠ خطِ پایان سفیدِ کم‌رنگ بود و روی منوی سفید کاملاً نامرئی. خطِ طلاییِ مویی مرز را می‌سازد بدونِ اینکه خودش یک عنصرِ دیگر شود. */ border-block-end:1px solid rgba(201,162,39,.34); /* خطِ طلاییِ بالای صفحه — تنها جای پررنگِ رنگ */ border-block-start:3px solid var(--tb-gold); font-family:'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif; color:var(--tb-ink); position:relative; z-index:901; /* بالای هدر، تا سایهٔ هدر رویش نیفتد */ /* کاغذ باید روی ریل «بنشیند»، نه اینکه دو نوارِ چسبیده به‌نظر برسند */ box-shadow:0 6px 18px -12px rgba(0,0,0,.5); } .kg-tb__in{ max-width:1180px; margin-inline:auto; padding:11px 24px; /* ⚠ شبکه و نه space-between: با فلکس، پلاکِ دامنه «تقریباً» وسط بود و با عوض‌شدنِ زبان صد پیکسل جابه‌جا می‌شد. minmax(0,1fr) هم لازم است، وگرنه ستونِ پهن‌تر از سهمش سرریز می‌کند و وسط دوباره می‌لغزد. */ display:flex; align-items:center; justify-content:space-between; gap:26px; } /* ─── هویت: نشان + نام + شعار + دامنه‌ها ─── */ .kg-tb__id{ display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit; min-width:0; } .kg-tb__seal{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; /* روی زمینهٔ تیره، مُهر باید روشن باشد وگرنه گم می‌شود */ background:rgba(255,255,255,.07); box-shadow:0 0 0 1.5px var(--tb-gold), 0 0 0 4px rgba(201,162,39,.13); } .kg-tb__seal img{ width:26px; height:26px; display:block; } .kg-tb__idt{ display:flex; flex-direction:column; gap:1px; min-width:0; } .kg-tb__brand{ font-size:16.5px; font-weight:800; line-height:1.35; letter-spacing:-.01em; white-space:nowrap; } /* ─── نشانیِ سایت، زیرِ نام ─── در سربرگِ نامه هم زیرِ نامِ شرکت نشانی می‌نویسند. تک‌فاصله (mono) و با فاصلهٔ حروفِ بازتر، تا مثلِ نشانی خوانده شود نه مثلِ یک کلمه. */ .kg-tb__site{ display:inline-flex; align-items:center; gap:6px; margin-block-start:3px; } .kg-tb__site .kg-tb__i{ color:var(--tb-gold); opacity:.9; flex:0 0 auto; } .kg-tb__dom{ font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size:12.5px; letter-spacing:.055em; white-space:nowrap; color:var(--tb-gold-ink); font-weight:600; } /* ─── واقعیت‌ها: برچسبِ ریز بالای مقدار، با خطِ مو بینشان ─── */ .kg-tb__facts{ display:flex; align-items:stretch; gap:0; min-width:0; } .kg-tb__f{ display:flex; flex-direction:column; gap:2px; justify-content:center; padding-inline:21px; min-width:0; border-inline-start:1px solid var(--tb-line); } .kg-tb__f:first-child{ border-inline-start:0; } .kg-tb__f:last-child{ padding-inline-end:0; } .kg-tb__k{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; letter-spacing:.045em; color:var(--tb-mute); text-transform:none; white-space:nowrap; } .kg-tb__k .kg-tb__i{ color:var(--tb-gold); opacity:.9; } .kg-tb__v{ font-size:13.5px; font-weight:600; line-height:1.4; color:var(--tb-ink); text-decoration:none; /* ⚠ nowrap بود، به این دلیل که «فقرهٔ جانشده در نقطه‌شکن حذف می‌شود». ولی حذف را برداشتیم (متنی که مدیر وارد کرده نباید ناپدید شود)، و nowrapِ بی‌حذف یعنی نشانی از کادر بیرون می‌زند و **بریده** می‌شود — همان چیزی که روی گوشی دیده شد. پس: می‌شکند، ولی هرگز وسطِ کلمه. */ white-space:normal; overflow-wrap:break-word; word-break:normal; } /* شمارهٔ تلفن استثناست: شمارهٔ شکسته بی‌معناست و کسی نمی‌تواند بخواندش */ .kg-tb__tel{ white-space:nowrap; } /* تلفن: تنها چیزی که وزنِ بیشتری دارد، بدونِ اینکه دکمه شود */ .kg-tb__f.is-lead .kg-tb__v{ font-size:16px; font-weight:800; letter-spacing:.01em; /* رقمِ هم‌عرض: عددِ تلفن نباید با عوض‌شدنِ رقم‌ها بلرزد */ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } .kg-tb__tel:hover{ color:var(--tb-gold-ink); } .kg-tb__f.is-note .kg-tb__v{ font-size:12.5px; font-weight:600; color:var(--tb-mute); } /* ═══ نقطه‌شکن‌ها ═══ ترتیبِ حذف، وارونهٔ ترتیبِ اهمیت است. تلفن هیچ‌وقت اولین قربانی نیست و در باریک‌ترین حالت هم می‌مانَد. */ @media (max-width:1180px){ .kg-tb__in{ padding-inline:18px; gap:18px; } .kg-tb__f{ padding-inline:13px; }} @media (max-width:1024px){ /* ⚠ حذف نمی‌شود — می‌شکند. متنی که مدیر وارد کرده باید دیده شود؛ تصمیمِ «کدام مهم‌تر است» را کد نباید بی‌خبر از او بگیرد. */ .kg-tb__in{ flex-wrap:wrap; row-gap:6px; } .kg-tb__facts{ flex-wrap:wrap; row-gap:4px; }} @media (max-width:960px){ .kg-tb__dom{ font-size:11.5px; }} @media (max-width:900px){ .kg-tb__f:not(.is-lead) .kg-tb__k span{ display:none; } /* فقط آیکون */ .kg-tb__v{ font-size:12.5px; }} @media (max-width:760px){ /* ⚠ پیش از این «نشانی و ساعت می‌روند» بود — یعنی روی گوشی و در قابِ ویرایشگر، نشانیِ شرکت اصلاً کشیده نمی‌شد و مدیر فکر می‌کرد پنل ذخیره نکرده. حالا به ردیفِ دوم می‌روند. */ .kg-tb__in{ flex-wrap:wrap; row-gap:5px; } .kg-tb__facts{ flex:1 1 100%; flex-wrap:wrap; row-gap:3px; justify-content:flex-start; border-top:1px solid rgba(255,255,255,.08); padding-top:5px; } .kg-tb__f{ padding-inline:9px; } .kg-tb__f:first-child{ padding-inline-start:0; }} @media (max-width:560px){ /* سه ستون در یک خط جا نمی‌شود: هویت و تلفن در خطِ اول، دامنه‌ها در خطِ دوم و تمام‌عرض — حذف نمی‌شوند چون خواستهٔ صریح بودند. */ .kg-tb__in{ padding:9px 14px; gap:12px; } .kg-tb__id{ flex:1 1 auto; min-width:0; } .kg-tb__facts{ flex:0 0 auto; } /* ⚠ فقرهٔ تلفن افقی می‌شود. عمودی‌اش آیکون را تنها روی یک خط می‌گذاشت و عدد را خطِ بعد — سه خط برای چیزی که یک خط است. */ .kg-tb__f.is-lead{ flex-direction:row; align-items:center; gap:7px; padding-inline:0; border-inline-start:0; } .kg-tb__f.is-lead .kg-tb__k{ margin:0; } .kg-tb__seal{ width:36px; height:36px; } .kg-tb__seal img{ width:22px; height:22px; } .kg-tb__brand{ font-size:14px; } /* نشانیِ سایت در موبایل هم می‌مانَد — خواستهٔ صریح بود */ .kg-tb__dom{ font-size:11px; letter-spacing:.03em; } .kg-tb__f.is-lead .kg-tb__v{ font-size:14.5px; } .kg-tb__f.is-lead .kg-tb__k span{ display:none; }} @media (max-width:400px){ /* در تنگ‌ترین حالت، نام کوتاه می‌شود ولی هیچ‌وقت وسطِ کلمه نمی‌شکند */ .kg-tb__brand{ font-size:13px; overflow:hidden; text-overflow:ellipsis; } .kg-tb__idt{ min-width:0; }} /* چاپ: نوار همان سربرگ است، پس در چاپ می‌مانَد ولی بدونِ رنگِ زمینه */ @media print{ /* در چاپ، زمینهٔ تیره جوهر می‌سوزاند و متنِ سفید ناپیدا می‌شود */ .kg-tb{ background:#fff; border-block-start-color:#000; --tb-ink:#000; --tb-mute:#444; --tb-line:rgba(0,0,0,.2); --tb-gold-ink:#7a6318; } .kg-tb__seal{ box-shadow:none; background:none; }} /* ─── مرزِ منو و صحنهٔ انیمیشن ─── نوارِ برند، منو و انیمیشن بدونِ مرز به‌نظر یک تودهٔ به‌هم‌ریخته می‌آمدند. خطِ مو بس است — خطِ کلفت خودش یک عنصرِ بصریِ اضافه می‌شود. */ .kg-tb + header{ border-block-end:1px solid rgba(201,162,39,.22); box-shadow:0 4px 16px -12px rgba(0,0,0,.35); } /* جمعیتِ شادِ صحنهٔ تور — فقط روی سایتِ بین‌المللی. صحنهٔ تور بینِ هر دو دامنه مشترک است؛ ملاک، کلاسِ زبانیِ است که روی iraqbus.ir هرگز گذاشته نمی‌شود. */ #kg-p-joy{ display:none; } :root.kg-lang-ar #kg-p-joy, :root.kg-lang-en #kg-p-joy, :root.kg-lang-tr #kg-p-joy, :root.kg-lang-ur #kg-p-joy, :root.kg-lang-ps #kg-p-joy{ display:block; } /* ─── تعدادِ مسافر با ظرفیتِ وسیله می‌خوانَد ─── شش نفر که سوارِ تاکسیِ چهارنفره می‌شوند، همان‌قدر غلط است که یک نفر سوارِ اتوبوسِ پنجاه‌نفره. بیننده حساب نمی‌کند ولی حس می‌کند چیزی جور نیست. data-hs-veh از قبل روی هدر هست، پس بدونِ هیچ جاوااسکریپتی فقط با css تنظیم می‌شود. */ .hero[data-hs-veh="taxi"] .kg-hero-scene .kg-r3, .hero[data-hs-veh="taxi"] .kg-hero-scene .kg-r4, .hero[data-hs-veh="taxi"] .kg-hero-scene .kg-r5, .hero[data-hs-veh="taxi"] .kg-hero-scene .kg-r6, .hero[data-hs-veh="transfer"] .kg-hero-scene .kg-r3, .hero[data-hs-veh="transfer"] .kg-hero-scene .kg-r4, .hero[data-hs-veh="transfer"] .kg-hero-scene .kg-r5, .hero[data-hs-veh="transfer"] .kg-hero-scene .kg-r6{ display:none; } .hero[data-hs-veh="van"] .kg-hero-scene .kg-r5, .hero[data-hs-veh="van"] .kg-hero-scene .kg-r6, .hero[data-hs-veh="minibus"] .kg-hero-scene .kg-r5, .hero[data-hs-veh="minibus"] .kg-hero-scene .kg-r6{ display:none; } /* در ماشینِ شخصی و تاکسی، از زائرانِ سوارشونده هم فقط دو نفر می‌مانند. ماشینِ شخصی یعنی یک خانواده، نه یک صف. */ .hero[data-hs-veh="taxi"] .kg-hero-scene .kg-b3, .hero[data-hs-veh="taxi"] .kg-hero-scene .kg-b4, .hero[data-hs-veh="transfer"] .kg-hero-scene .kg-b3, .hero[data-hs-veh="transfer"] .kg-hero-scene .kg-b4{ display:none; } /* و صحنه هم خلوت‌تر: نیمی از پیکره‌های تماشاچیِ کنارِ خیابان */ .hero[data-hs-veh="taxi"] .kg-hero-scene .kg-person.kg-t2:nth-of-type(2n), .hero[data-hs-veh="transfer"] .kg-hero-scene .kg-person.kg-t2:nth-of-type(2n){ display:none; } /* ─── موبایل ─── */ @media (max-width:900px){} @media (max-width:520px){} /* ═══════════════════════════════════════════════════════════════════ انتخابگرِ دستهٔ تورِ ایران (.kg-kinds) ⚠ چرا کارت و نه دکمهٔ ساده: «سياحية وزيارية» و «علاجية» دو کلمه‌اند که برای کسی که تازه رسیده هیچ فرقی ندارند. آیکون می‌گوید کدام کدام است، یک سطر توضیح می‌گوید داخلش چیست، و عدد می‌گوید چند تور در انتظار است — پس کاربر پیش از کلیک تصمیم می‌گیرد، نه بعد از آن. همان زبانِ بصریِ تب‌های بالا (کارتِ فعال طلایی با تیک) تا صفحه دو گرامرِ متفاوت نداشته باشد. ═══════════════════════════════════════════════════════════════════ */ .kg-kinds{ display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:10px; margin:0 0 20px; } .kg-kcard{ position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:15px 13px 13px; cursor:pointer; text-align:center; border:2px solid rgba(201,162,39,.28); border-radius:15px; background:#fff; color:#3a3630; font-family:inherit; font-size:14px; line-height:1.6; transition:border-color .18s, background .18s, transform .12s, box-shadow .18s; } .kg-kcard:hover{ transform:translateY(-2px); border-color:rgba(201,162,39,.55); box-shadow:0 10px 26px -16px rgba(0,0,0,.4); } .kg-kcard.on{ border-color:var(--gold, #c9a227); background:linear-gradient(160deg,#fdf6e2,#f6e9c4); box-shadow:0 12px 30px -18px rgba(201,162,39,.85); } /* نشانِ صریحِ «همین انتخاب است» — همان تیکِ تب‌های بالا */ .kg-kcard-mark{ position:absolute; inset-block-start:-9px; inset-inline-start:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:900; background:transparent; color:transparent; } .kg-kcard.on .kg-kcard-mark{ background:var(--gold, #c9a227); color:#1b1508; } .kg-kcard-i{ opacity:.72; } .kg-kcard.on .kg-kcard-i{ opacity:1; } .kg-kcard-t{ font-size:15px; font-weight:800; } .kg-kcard-s{ font-size:11.5px; color:#7a7364; line-height:1.75; } .kg-kcard.on .kg-kcard-s{ color:#6b5c2c; } .kg-kcard-n{ font-size:11px; font-weight:800; padding:2px 10px; border-radius:999px; background:rgba(0,0,0,.06); color:#6b6459; margin-block-start:2px; } .kg-kcard.on .kg-kcard-n{ background:rgba(201,162,39,.28); color:#6b5215; } @media(max-width:560px){ /* روی گوشی توضیح جا نمی‌گیرد و کارت را بلند و لاغر می‌کند */ .kg-kinds{ grid-template-columns:1fr 1fr; gap:8px; } .kg-kcard{ padding:12px 9px 11px; } .kg-kcard-s{ display:none; } .kg-kcard-t{ font-size:13.5px; }} /* برچسبِ «قیمت بر اساسِ پرونده» — عدد نیست، پس وزنش هم نباید وزنِ عدد باشد. */ .kg-tour-tag.is-ask{ font-size:12px; font-weight:700; letter-spacing:0; } @media(max-width:520px){} /* ═══ پنهان‌سازی بر اساسِ دستگاه (ویرایشگر بصری) ═══ ⚠ چرا کلاس و نه style درون‌خطی: استایلِ درون‌خطی media query ندارد. این سه کلاس در خودِ فایلِ صفحه ذخیره می‌شوند، پس با بازسازی هم می‌مانند. نقطه‌شکن‌ها همان‌های کلِ سایت‌اند. */ @media (max-width:760px){ .kg-hide-mob{ display:none !important; }} @media (min-width:761px) and (max-width:1024px){ .kg-hide-tab{ display:none !important; }} @media (min-width:1025px){ .kg-hide-desk{ display:none !important; }} /* ════════════════════════════════════════════════════════════ نوارِ برند با چهار فیلد — رفعِ شکستنِ متن (بازرسیِ تصویریِ ۲۰۲۶-۰۸-۱۱) با موبایل + تلفنِ ثابت + نشانی + ساعتِ پاسخگویی، مجموعِ عرض دقیقاً به لبهٔ ۱۱۸۰px می‌رسید و مرورگر متن‌ها را سه‌خطی می‌شکست؛ نوار به‌هم‌ریخته دیده می‌شد. این‌جا فضای لازم آزاد می‌شود و برچسب/مقدار تک‌خطی می‌مانند — بدونِ حذفِ هیچ اطلاعاتی. ════════════════════════════════════════════════════════════ */ /* ⚠ فقط دسکتاپ: در موبایل نوار عمداً wrap می‌شود و هر فیلد ۴۶٪ عرض می‌گیرد؛ nowrap آن‌جا عرضِ محتوا را به ۷۷۵px می‌رسانْد و نوار ۷۰۰px ارتفاع می‌گرفت (کلِ صفحهٔ اولِ موبایل). */ @media (min-width:1025px){ .kg-tb__in{ gap:16px; } .kg-tb__f{ padding-inline:11px; min-width:0; } .kg-tb__k, .kg-tb__k span, .kg-tb__v, .kg-tb__f a{ white-space:nowrap; } /* شکنندگیِ اصلی این بود که چیدمان «دقیقاً» پر می‌شد: صفر فضای خالی، پس هر تغییرِ کوچکی (پدینگ، حاشیه، فونت، حتی انتخاب در ویرایشگر) آن را می‌شکست. حالا در تنگنا به‌ترتیب جمع می‌شود، نه اینکه بپاشد: ۱) زیرِ ۱۴۰۰ برچسبِ ساعت کوتاه می‌شود ۲) زیرِ ۱۲۸۰ فونت و فاصله کم ۳) زیرِ ۱۱۵۰ فیلدِ ساعت کنار می‌رود (کم‌اهمیت‌ترین) در هر پله متن‌ها تک‌خطی می‌مانند و هیچ‌چیز جابه‌جا نمی‌شود. */ } @media (min-width:1025px) and (max-width:1399px){ .kg-tb__in{ gap:13px; } .kg-tb__f{ padding-inline:9px; }} @media (min-width:1025px) and (max-width:1279px){ .kg-tb__in{ gap:10px; padding-inline:16px; } .kg-tb__f{ padding-inline:7px; font-size:13px; } .kg-tb__seal{ width:36px; height:36px; }} @media (min-width:1025px) and (max-width:1149px){ /* کم‌اهمیت‌ترین فیلد (ساعتِ پاسخگویی) کنار می‌رود تا بقیه سالم بمانند */ .kg-tb__facts .kg-tb__f:last-child{ display:none; }} /* ⚠ موبایل: ظرفِ فیلدهای نوار `flex:0 0 auto` بود، یعنی حق نداشت کوچک شود؛ عرضش را از محتوا می‌گرفت (۹۰۰px در صفحهٔ ۳۹۰px) و چون بدنه overflow را می‌بُرید، به‌جای سرریزِ افقی، نوار به ارتفاعِ ~۷۰۰px کش می‌آمد و کلِ صفحهٔ اولِ موبایل را می‌خورد (اندازه‌گیریِ ۲۰۲۶-۰۸-۱۱). */ @media (max-width:1024px){ .kg-tb__in{ align-items:flex-start; } .kg-tb__facts{ flex:1 1 100%; width:100%; min-width:0; } .kg-tb__f{ min-width:0; } .kg-tb__f .kg-tb__v{ overflow:hidden; text-overflow:ellipsis; }} /* ⚠ شکایتِ ثبت‌شدهٔ مالک (سه بار): «آیکون‌ها در موبایل روی رزرواسیون را گرفته‌اند و نما را کور کرده‌اند.» اندازه‌گیریِ ۲۰۲۶-۰۸-۱۴ روی ۳۹۰×۸۴۴ نشان داد دکمه‌های شناور دیگر مشکلی ندارند (ناظرشان کار می‌کند) ولی همین نوارِ پایین ۲۳٬۹۸۶ پیکسلِ مربع از جعبهٔ رزرو را می‌پوشاند — یعنی پایینِ فرم، جایی که دکمهٔ ادامه است. در صفحه‌ای که خودِ فرمِ رزرو آن‌جاست، این نوار فقط مزاحم است. پس وقتی فرم جلوی چشم است کنار می‌رود و بعدش برمی‌گردد. */ .kg-bar{ transition:transform .28s ease, opacity .28s ease; } .kg-bar.kg-fab-away{ transform:translateY(115%); opacity:0; pointer-events:none; } @media(prefers-reduced-motion:reduce){ .kg-bar{ transition:none; }} /* ═══ رنگِ اختصاصیِ هر وسیله در صحنه — ۲۰۲۶-۰۸-۱۹ ═══ مالک: «رنگِ تاکسی زرد مثلِ قبل، رنگِ ون سفید.» ⚠ تا امروز یک قاعده برای هر پنج وسیله `color:var(--gold)` می‌گذاشت، پس تاکسی هم طلاییِ برند می‌شد. این‌جا (انتهای فایل) نوشته شده تا بدونِ دست‌زدن به آن قاعده — که دو بار تکرار شده — برنده باشد. */ .hero[data-hs-veh="taxi"] .kg-hero-scene #kg-taxi{ color:#f6c62b !important; } .hero[data-hs-veh="van"] .kg-hero-scene #kg-van{ color:#ffffff !important; } /* اتوبوس آبیِ خوش‌رنگ — خواستهٔ مالک ۲۰۲۶-۰۸-۲۰ («سبز یا آبی»؛ سبز از تم حذف شده بود) */ .hero[data-hs-veh="bus"] .kg-hero-scene #kg-bus{ color:#1f6fb2 !important; } /* ═══ رژیمِ رندرِ صحنه — ۲۰۲۶-۰۸-۲۰ ═══ مالک: «سیستم‌های خیلی ضعیف‌تر هم بازش می‌کنند؛ سبک و روان.» وسیلهٔ غیرفعال display:none می‌شود تا SMILاش اصلاً رستر نشود — opacity:0 کافی نبود، هر فریم نقاشی می‌شد. */ .kg-hero-scene .kg-veh{ display:none; } .hero[data-hs-veh="taxi"] .kg-hero-scene #kg-taxi, .hero[data-hs-veh="transfer"] .kg-hero-scene #kg-transfer, .hero[data-hs-veh="van"] .kg-hero-scene #kg-van, .hero[data-hs-veh="minibus"] .kg-hero-scene #kg-minibus, .hero[data-hs-veh="bus"] .kg-hero-scene #kg-bus, .hero:not([data-hs-veh]) .kg-hero-scene #kg-bus{ display:inline; } /* ═══════════ حالتِ سادهٔ فرمِ رزرو — ویزاردِ پیرمردپسند (۲۰۲۶-۰۸-۲۰) ═══════════ هر قدم یک سؤال؛ کارت و دکمه و خط همه درشت. موتورِ فرم همان است. */ .hs .hsw{ padding:15px 14px 12px; } /* روی گوشی همان تمامِ عرض — سقف فقط برای صفحه‌های پهن است */ @media (max-width:520px){} .hs .hsw-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .hs .hsw-stept{ font-size:12.5px; font-weight:800; color:#6f6858; } .hs .hsw-dots{ display:flex; gap:6px; } .hs .hsw-dots i{ width:11px; height:11px; border-radius:50%; background:#e3dcca; display:inline-block; transition:all .25s; } .hs .hsw-dots i.done{ background:#cbb35a; } .hs .hsw-dots i.on{ background:var(--gold,#c9a227); width:26px; border-radius:6px; } .hs .hsw-q{ font-size:18.5px; line-height:1.7; color:#17150f; text-align:center; margin:4px 0 2px; font-weight:800; } .hs .hsw-s{ font-size:13.5px; color:#6f6858; text-align:center; margin-bottom:11px; line-height:1.8; } .hs .hsw-veh{ display:flex; align-items:center; gap:11px; width:100%; text-align:inherit; background:#fff; border:2px solid #d8d0bc; border-radius:14px; padding:11px 12px; margin-bottom:9px; cursor:pointer; min-height:64px; } .hs .hsw-veh.on{ border-color:var(--gold,#c9a227); background:#fdf8ec; box-shadow:0 4px 14px rgba(201,162,39,.18); } .hs .hsw-ico{ flex:none; width:46px; height:46px; border-radius:12px; background:#f6f1e2; display:flex; align-items:center; justify-content:center; } .hs .hsw-veh.on .hsw-ico{ background:#fff; box-shadow:0 0 0 2px var(--gold,#c9a227) inset; } .hs .hsw-kindb{ flex-wrap:wrap; } .hs .hsw-kindb .hsw-route{ flex-basis:100%; margin-top:2px; } .hs .hsw-emo{ font-size:25px; } .hs .hsw-b{ flex:1; min-width:0; } .hs .hsw-b b{ display:block; font-size:16px; color:#17150f; } .hs .hsw-b i{ display:block; font-style:normal; font-size:12.8px; color:#5d5747; line-height:1.75; margin-top:1px; } .hs .hsw-chk{ flex:none; width:24px; height:24px; border-radius:50%; border:2px solid #d8d0bc; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:800; } .hs .hsw-veh.on .hsw-chk{ background:var(--gold,#c9a227); border-color:var(--gold,#c9a227); } .hs .hsw-route{ display:flex; align-items:center; margin-top:9px; font-size:11.5px; } .hs .hsw-route b{ background:#efe9d8; border-radius:8px; padding:2px 8px; color:#4a4436; white-space:nowrap; font-weight:700; } .hs .hsw-route b.g{ background:var(--gold,#c9a227); color:#fff; } .hs .hsw-route span{ flex:1; min-width:10px; height:3px; margin:0 3px; } .hs .hsw-route span.on{ background:repeating-linear-gradient(90deg,var(--gold,#c9a227) 0 6px,transparent 6px 10px); } .hs .hsw-route span.of{ background:repeating-linear-gradient(90deg,#d9d2c2 0 6px,transparent 6px 10px); } .hs .hsw-fld{ margin-bottom:10px; } .hs .hsw-fld select{ width:100%; min-height:46px; font-size:15.5px; font-weight:700; color:#17150f; border:2px solid #cfc4a8; border-radius:12px; background:#fff; padding:7px 11px; } .hs .hsw-fld input{ min-height:46px; font-size:16px !important; font-weight:700; } .hs .hsw-when{ margin-top:4px; } .hs .hsw-link{ background:none; border:none; color:#8a6d16; font-size:14.5px; font-weight:800; cursor:pointer; padding:8px 2px; display:inline-block; min-height:40px; } .hs .hsw-nav{ display:flex; gap:10px; margin-top:12px; } /* دکمهٔ «قبلی» پررنگ‌تر — کم‌رنگ بود و دیده نمی‌شد (مالک ۲۰۲۶-۰۸-۲۱) */ .hs .hsw-prev{ flex:1; min-height:48px; border:1.5px solid #c9b78a; border-radius:12px; background:#e6dcc2; color:#3f382a; font-size:15px; font-weight:800; cursor:pointer; transition:background .15s; } .hs .hsw-prev:hover{ background:#dbcfae; } .hs .hsw-go{ flex:2.2; min-height:48px !important; font-size:16px !important; } .hs .hsw-sum{ border:1.5px solid #e9e2d0; background:#fdfbf4; border-radius:16px; padding:4px 14px; margin-bottom:10px; } .hs .hsw-sl{ display:flex; align-items:center; justify-content:space-between; gap:9px; padding:9px 2px; border-bottom:1.5px dashed #e9e2d0; font-size:15px; line-height:1.8; color:#2a2620; } .hs .hsw-sl:last-child{ border-bottom:none; } .hs .hsw-sl b{ color:#8a6d16; } .hs .hsw-ed{ flex:none; font-size:13.5px; color:#8a6d16; background:#fff; border:1.5px solid #e0cf96; border-radius:10px; padding:4px 12px; cursor:pointer; min-height:38px; } .hs .hsw-adv{ border:1.5px dashed #e0d8c4; border-radius:14px; padding:12px; margin:8px 0; } .hs .hsw-pkgs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; } .hs .hsw-note{ font-size:12.5px; color:#5d5747; background:#fbf7ec; border-radius:11px; padding:8px 11px; margin:9px 0 2px; line-height:1.95; text-align:center; } .hs .hsw-call{ margin-top:10px; padding-top:9px; border-top:1.5px dashed #e0d8c4; text-align:center; font-size:13.5px; color:#5d5747; } .hs .hsw-call a{ color:#8a6d16; font-weight:800; font-size:16px; text-decoration:none; unicode-bidi:isolate; display:inline-block; } .hs .hsw-pro{ display:block; margin:8px auto 0; color:#8d866f; font-size:13px; font-weight:700; } .hs .hsw-back{ background:none; border:1.5px solid #e0d8c4; border-radius:10px; color:#8a6d16; font-size:13.5px; font-weight:800; padding:7px 12px; margin:0 0 10px; cursor:pointer; } #hsmCode{ font-size:24px; letter-spacing:8px; text-align:center; direction:ltr; } /* ⚠ تیترِ هر قدم tabindex="-1" دارد و فقط برای اعلامِ صفحه‌خوان فوکوس می‌گیرد — کاربر با Tab رویش نمی‌رود و تیتر دکمه نیست، پس حلقهٔ دیداری فقط یک قابِ طلاییِ گیج‌کننده دورِ عنوان می‌ساخت. */ .hs .hsw-q:focus, .hs .hsw-q:focus-visible{ outline:none !important; } @media (max-height:740px){} /* ══════════════════════════════════════════════════════════════════ سندِ زیارت — قابِ دسکتاپِ فرمِ ساده (۲۰۲۶-۰۸-۲۱) فرم و بلیط یک کاغذِ واحدند با درزِ پانچ‌شده در میان. طلا فقط چهار جا می‌آید: قابِ حاشیه، ایستگاه‌های طی‌شده، نشانِ گوشه و دکمهٔ اصلی — همین کمیاب‌بودن است که طلا را «قیمتی» نشان می‌دهد. ⚠ کلِ این بلوک زیرِ min-width:1024px است؛ روی گوشی حتی خوانده هم نمی‌شود و ساختارش هم اصلاً ساخته نمی‌شود (JS: docOn()). ══════════════════════════════════════════════════════════════════ */ @media (min-width:1024px){ .hs .hsd{ width:880px; margin-inline:auto; position:relative; overflow:hidden; border-radius:18px; background:#fbf7ec; color:#241f13; background-image:radial-gradient(circle at 1px 1px, rgba(120,98,50,.05) 1px, transparent 0); background-size:4px 4px; box-shadow:0 40px 90px -30px rgba(50,36,8,.42), 0 2px 0 rgba(255,255,255,.7) inset; } /* قابِ طلایی مثلِ حاشیهٔ یک سندِ رسمی، از روی سرلوحه هم رد می‌شود */ .hs .hsd::after{ content:''; position:absolute; inset:7px; border:1px solid rgba(201,162,39,.42); border-radius:12px; pointer-events:none; z-index:8; } /* ── سرلوحهٔ مرکّبی ── */ .hs .hsd-head{ position:relative; padding:17px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:#f3e8cc; background:linear-gradient(102deg,#14110a,#2a2416 46%,#14110a); } .hs .hsd-head .orn{position:absolute; top:8px; width:52px; height:52px; color:rgba(230,200,102,.62)} .hs .hsd-head .orn svg{width:52px; height:52px; display:block} .hs .hsd-head .orn.r{inset-inline-end:10px} .hs .hsd-head .orn.l{inset-inline-start:10px; transform:scaleX(-1)} .hs .hsd-head .ttl{font-family:Amiri,'Vazirmatn',serif; font-size:25px; font-weight:700; letter-spacing:.5px; padding-inline-start:44px} .hs .hsd-head .ser{direction:ltr; font-size:11px; letter-spacing:2.4px; font-weight:600; color:#a99b76; font-variant-numeric:tabular-nums; padding-inline-end:44px} /* ── دو ستون با درزِ پانچ‌شده ── */ .hs .hsd-body{display:flex; align-items:stretch} .hs .hsd-seam{position:relative; width:1px; flex:none; border-inline-start:2px dashed #e0d5b6} .hs .hsd-seam i{position:absolute; inset-inline-start:50%; transform:translateX(50%); width:9px; height:9px; border-radius:50%; background:#e6dcbf} .hs .hsd-seam i.t{top:-4px} .hs .hsd-seam i.b{bottom:-4px} /* ── ستونِ بلیط ── */ .hs .hsd-side{flex:1; min-width:0; padding:20px 24px 18px; background:rgba(246,240,224,.55)} .hs .hsd-cap{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:11px; margin-bottom:15px; border-bottom:1px solid #e6dcbf} .hs .hsd-cap b{font-family:Amiri,'Vazirmatn',serif; font-size:19px; font-weight:700; color:#191509} .hs .hsd-cap em{font-style:normal; font-size:11.5px; color:#a0977b; font-weight:700} .hs .hsd-route{display:flex; align-items:flex-start; margin-bottom:18px} .hs .hsd-node{flex:1 1 0; min-width:0; text-align:center} .hs .hsd-node .mk{width:30px; height:30px; margin:0 auto 7px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#eee6d0; color:#b8ad8c; border:1.5px solid #e0d5b6; transition:all .25s} .hs .hsd-node .mk svg{width:17px; height:17px; display:block} .hs .hsd-node.is-lit .mk{background:#fff; color:#8a6d16; border-color:#c9a227; box-shadow:0 0 0 3px rgba(201,162,39,.14)} .hs .hsd-node .nm{display:block; font-size:10.5px; font-weight:800; color:#b0a686; line-height:1.45; white-space:normal; word-break:keep-all; padding-inline:2px} .hs .hsd-node.is-lit .nm{color:#5e5334} .hs .hsd-seg{flex:0 1 34px; height:2px; margin-top:14px; min-width:12px; background:repeating-linear-gradient(90deg,#ded3b4 0 5px,transparent 5px 10px)} .hs .hsd-seg.is-lit{background:repeating-linear-gradient(90deg,#c9a227 0 5px,transparent 5px 10px)} .hs .hsd-lines{margin-bottom:16px} .hs .hsd-line{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dotted #e2d8bd} .hs .hsd-line:last-child{border-bottom:none} .hs .hsd-line .k{flex:none; font-size:12px; font-weight:700; color:#a0977b} .hs .hsd-line .v{font-size:15px; font-weight:800; color:#241f13; text-align:end; overflow:hidden; text-overflow:ellipsis} .hs .hsd-line.is-pending .v{color:#c6bc9c; font-weight:400; letter-spacing:3px} .hs .hsd-total{border-top:2px solid #c9a227; padding-top:13px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px} .hs .hsd-total .lbl{display:block; font-size:11.5px; color:#a0977b; font-weight:700; margin-bottom:1px} .hs .hsd-total .num{font-size:27px; font-weight:900; color:#191509; line-height:1.1; font-variant-numeric:tabular-nums} .hs .hsd-total .num em{font-style:normal; font-size:13px; color:#8a6d16; font-weight:800} .hs .hsd-total .num i{font-style:normal; font-size:19px; color:#c6bc9c; letter-spacing:3px} .hs .hsd-total .note{font-size:12px; color:#7b7259; text-align:end; line-height:1.75; max-width:21ch} .hs .hsd-why{margin-top:11px; font-size:12px; color:#6b5410; background:#f6efdc; border-radius:9px; padding:8px 11px; line-height:1.9} /* ── پاورقیِ سند ── */ .hs .hsd-foot{display:flex; border-top:1px solid #e6dcbf; background:rgba(240,232,210,.55)} .hs .hsd-foot > div{flex:1; min-width:0; padding:12px 20px; display:flex; align-items:center; gap:10px} .hs .hsd-foot > div + div{border-inline-start:1px solid #e6dcbf} .hs .hsd-foot .gl{width:22px; height:22px; color:#a08c4e; flex:none} .hs .hsd-foot .gl svg{width:22px; height:22px; display:block} .hs .hsd-foot b{display:block; font-size:12.5px; font-weight:800; color:#241f13; line-height:1.5} .hs .hsd-foot span span{display:block; font-size:11px; color:#89805f; line-height:1.55} /* ورودِ نرم — یک لحظهٔ هماهنگ، نه چند افکتِ پراکنده */ @media (prefers-reduced-motion: no-preference){ .hs .hsd{animation:kgDocRise .8s cubic-bezier(.16,.84,.35,1) both} .hs .hsd-node.is-lit .mk{animation:kgDocPop .45s ease-out both} .hs .hsd-node:nth-child(1).is-lit .mk{animation-delay:.42s} .hs .hsd-node:nth-child(3).is-lit .mk{animation-delay:.55s} .hs .hsd-node:nth-child(5).is-lit .mk{animation-delay:.68s} .hs .hsd-node:nth-child(7).is-lit .mk{animation-delay:.81s} } @keyframes kgDocRise{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}} @keyframes kgDocPop{from{transform:scale(.74); opacity:.35} to{transform:scale(1); opacity:1}}} /* ── شمارهٔ گزینه به‌جای آیکون (مالک ۲۰۲۶-۰۸-۲۱) ── */ .hs .hsw-num{ flex:none; width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#f3ecdb; color:#8a6d16; border:1.5px solid #e0d5b6; font-size:21px; font-weight:900; font-variant-numeric:tabular-nums; } .hs .hsw-veh:hover .hsw-num, .hs .hsw-veh:active .hsw-num{ background:var(--gold,#c9a227); color:#fff; border-color:var(--gold,#c9a227); } /* هیچ کارتی از پیش «انتخاب‌شده» دیده نمی‌شود — خواستهٔ صریحِ مالک */ .hs .hsw-veh.on{ border-color:#d8d0bc; background:#fff; box-shadow:none; } .hs .hsw-chk{ display:none !important; } /* ── کلیدِ اتوبوس VIP (جای ردیفِ اکونومی/بیزینس) ── */ .hs .hsw-vip{ display:flex; align-items:center; gap:12px; width:100%; text-align:inherit; background:#fff; border:2px solid #d8d0bc; border-radius:14px; padding:12px 14px; margin-bottom:12px; cursor:pointer; min-height:62px; font-family:inherit; } .hs .hsw-vip .t{ flex:1; min-width:0; } .hs .hsw-vip .t b{ display:block; font-size:16px; color:#17150f; } .hs .hsw-vip .t i{ display:block; font-style:normal; font-size:13px; color:#6f6858; margin-top:2px; } .hs .hsw-vip .p{ flex:none; font-size:13px; font-weight:800; color:#8a6d16; background:#f3ecdb; border-radius:999px; padding:4px 11px; } .hs .hsw-vip.on{ border-color:var(--gold,#c9a227); background:#fdf8ec; box-shadow:0 4px 14px rgba(201,162,39,.2); } .hs .hsw-vip.on .p{ background:var(--gold,#c9a227); color:#fff; } @media (min-width: 560px){} @media (max-height: 760px){} /* ── ورودِ پلکانی ── */ @keyframes kgGateIn{ from{ opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce){} /* ── گوشیِ کوتاه: فشرده‌تر تا هر سه گزینه یک‌جا دیده شوند ── */ @media (max-height: 720px){} /* ── دسکتاپ ── */ @media (min-width: 760px){} @media (min-width:760px){} @media (min-width:560px){} /* ═══ هویتِ شرکت در هدر (۲۰۲۶-۰۸-۲۳) ═══ بازرسی: «در هر چهار عکسِ گوشی هدر فقط یک ☰ است.» نوارِ برندِ بالای صفحه برای سایتِ فارسی خاموش است، پس نشان و نام این‌جا می‌نشیند — کنارِ دکمهٔ منو، بی‌آنکه ارتفاعِ تازه‌ای بگیرد. */ header nav .nav-brand{ display:inline-flex; align-items:center; gap:9px; min-height:48px; padding-inline-end:8px; text-decoration:none; color:inherit; flex:0 1 auto; min-width:0; order:-1; margin-inline-end:auto; } header nav .nav-brand img{ width:32px; height:32px; flex:0 0 auto; display:block; } header nav .nav-brand b{ font-size:16px; font-weight:900; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (max-width:400px){ header nav .nav-brand b{ font-size:14.5px; }} /* ⚠ ۲۰۲۶-۰۸-۲۳ — پاورقیِ باریک: فقط خطِ کپی‌رایت. مالک: «یک دایوِ باریک، بالا و پایینش استایل و دایوِ اضافی نباشد.» !important لازم است چون ویرایشگر روی خودِ