/* ═══════════════════════════════════════════════════════════════ پیج‌کاو — theme.css دارک‌مود + هدر شیشه‌ای + بهبود موبایل این فایل بعد از style.css لود می‌شود و چیزی را بازنویسی نمی‌کند، فقط متغیرها را در حالت دارک تغییر می‌دهد و چند بهبود ظاهری می‌افزاید. ═══════════════════════════════════════════════════════════════ */ /* ─── ۱) متغیرهای دارک‌مود ───────────────────────────────────────── با افزودن کلاس .dark به فعال می‌شود. رنگ‌ها نرم و شیشه‌ای‌اند (نه مشکی مطلق) تا حس مدرن SaaS حفظ شود و چشم اذیت نشود. هویت بنفش برند (#5B5BD6 → روشن‌تر برای کنتراست) حفظ شده. */ html.dark{ color-scheme:dark; --ink:#EAECF2; /* متن اصلی — سفید ملایم، نه سفید خالص */ --ink2:#B4B9C9; /* متن ثانویه */ --ink3:#828AA0; /* متن کم‌رنگ */ --line:#2A2E3D; /* خطوط و بوردرها */ --sheet:#0E1017; /* پس‌زمینه‌ی کلی — سرمه‌ای تیره، نه مشکی */ --card:#171A24; /* کارت‌ها — کمی روشن‌تر از پس‌زمینه */ --accent:#8B8BF0; /* بنفش روشن‌تر برای کنتراست بهتر روی تیره */ --a-bg:#21243A; /* پس‌زمینه‌ی بنفش ملایم */ --a-bg2:#1B1E2E; /* پس‌زمینه‌ی بنفش ملایم‌تر */ --green:#34D399; /* سبز روشن‌تر */ --g-bg:#10291F; /* پس‌زمینه‌ی سبز تیره */ --sh1:0 1px 4px rgba(0,0,0,.4); --sh2:0 4px 20px rgba(0,0,0,.5); --sh3:0 12px 48px rgba(0,0,0,.6); } /* انتقال نرم هنگام جابه‌جایی بین لایت و دارک */ html.theme-anim, html.theme-anim body, html.theme-anim .card, html.theme-anim .nav, html.theme-anim .btn{ transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease; } /* ─── ۲) اصلاحات نقطه‌ای دارک‌مود برای عناصری که رنگ ثابت داشتند ─── */ html.dark body{background:var(--sheet);color:var(--ink)} /* nav شیشه‌ای در دارک */ html.dark .nav{ background:rgba(16,18,24,.72); border-bottom:1px solid rgba(255,255,255,.07); } /* دکمه‌ها و کارت‌هایی که در style.css رنگ سفید ثابت داشتند */ html.dark .btn-outline{background:var(--card);color:var(--ink2);border-color:var(--line)} html.dark .btn-outline:hover{background:var(--a-bg2);border-color:var(--accent);color:var(--accent)} html.dark .btn-white{background:var(--card);color:var(--ink)} html.dark .btn-white:hover{background:#1f2330} /* فرم‌ها — مهم برای خوانایی در دارک */ html.dark input, html.dark select, html.dark textarea, html.dark .fi, html.dark .ft, html.dark .s-box, html.dark .contact-form .fi, html.dark .contact-form .ft{ background:var(--card)!important; color:var(--ink)!important; border-color:var(--line)!important; } html.dark input::placeholder, html.dark textarea::placeholder{color:var(--ink3)} html.dark select option{background:var(--card);color:var(--ink)} /* پیام‌های فرم در دارک */ html.dark .form-msg.ok{background:#0f2a20;color:#6ee7b7;border-color:#134e3a} html.dark .form-msg.err{background:#2a1414;color:#fca5a5;border-color:#4c1d1d} /* کارت‌ها و سطوحی که ممکن است سفید ثابت باشند */ html.dark .card{background:var(--card);border-color:var(--line)} /* ─── عناصری که در style.css رنگ سفید ثابت (#fff) دارند ─────────── چون این‌ها از متغیر استفاده نمی‌کنند، اینجا در دارک‌مود اصلاح می‌شوند تا پس‌زمینه‌ی سفید در حالت تاریک باقی نماند. */ html.dark .stat-item, html.dark .pain-card, html.dark .how-sec, html.dark .stab, html.dark .sample-window, html.dark .testi-sec, html.dark .faq-item, html.dark .hero, html.dark .s-box, html.dark .s-res, html.dark .chip, html.dark .sc, html.dark .fi, html.dark .fs, html.dark .ft, html.dark .cbi, html.dark .wcard, html.dark .sccard, html.dark .psec, html.dark .rstat, html.dark .spec, html.dark .expcard, html.dark .certcard, html.dark .modal-box, html.dark .legal-card, html.dark .contact-item{ background:var(--card); border-color:var(--line); color:var(--ink); } /* حالت‌های active/hover که نباید رنگ کارت بگیرند، دوباره accent می‌شوند */ html.dark .stab.active, html.dark .stab:hover, html.dark .sc.active, html.dark .chip:hover{ background:var(--a-bg); border-color:var(--accent); color:var(--accent); } /* sample-window معمولاً شبیه‌ساز موبایل است؛ کمی تیره‌تر */ html.dark .sample-window{background:#12141C} /* تصاویر مدرک کمی کم‌نورتر تا در دارک نزنند توی چشم */ html.dark .cert-img, html.dark .modal-img{filter:brightness(.92)} /* اسکرول‌بار دارک */ html.dark::-webkit-scrollbar{width:12px} html.dark::-webkit-scrollbar-track{background:var(--sheet)} html.dark::-webkit-scrollbar-thumb{background:#2c3142;border-radius:8px;border:3px solid var(--sheet)} /* ─── ۳) دکمه‌ی سوییچ دارک‌مود ─────────────────────────────────── */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;flex-shrink:0; border-radius:50%;cursor:pointer; background:var(--a-bg);border:1px solid var(--line); color:var(--ink2);transition:all .18s; -webkit-tap-highlight-color:transparent; } .theme-toggle:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)} .theme-toggle:active{transform:scale(.94)} .theme-toggle svg{width:20px;height:20px} /* آیکن خورشید/ماه: پیش‌فرض ماه (لایت) نمایش، خورشید مخفی */ .theme-toggle .icon-sun{display:none} .theme-toggle .icon-moon{display:block} html.dark .theme-toggle .icon-sun{display:block} html.dark .theme-toggle .icon-moon{display:none} /* ─── ۴) هدر شیشه‌ای حرفه‌ای (Glass Header) ──────────────────────── nav از قبل backdrop-filter دارد؛ اینجا حرفه‌ای‌ترش می‌کنیم: شیشه‌ی واقعی‌تر، بوردر ظریف، سایه‌ی نرم هنگام اسکرول. */ .nav{ -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); transition:box-shadow .25s ease,background-color .25s ease,border-color .25s ease; } /* وقتی کاربر اسکرول کرد (کلاس .scrolled با JS اضافه می‌شود) */ .nav.scrolled{ background:rgba(255,255,255,.82); box-shadow:0 8px 32px rgba(15,17,23,.10); border-bottom:1px solid rgba(15,17,23,.06); } html.dark .nav.scrolled{ background:rgba(16,18,24,.82); box-shadow:0 8px 32px rgba(0,0,0,.45); border-bottom:1px solid rgba(255,255,255,.08); } /* کپسول شیشه‌ای دور لینک‌های nav — جداسازی بصری از محتوا */ .nav-links{ background:rgba(127,130,160,.07); border:1px solid rgba(127,130,160,.10); border-radius:100px; padding:4px 6px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } html.dark .nav-links{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.07); } /* fallback اگر مرورگر backdrop-filter را پشتیبانی نکند */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav{background:rgba(255,255,255,.98)} html.dark .nav{background:rgba(16,18,24,.98)} .nav.scrolled{background:#fff} html.dark .nav.scrolled{background:#101218} } /* ─── ۵) بهبودهای موبایل (Mobile-First) ─────────────────────────── هدف: دکمه‌های قابل‌لمس، فاصله‌ی بهتر، بدون اسکرول افقی. */ html,body{overflow-x:hidden;max-width:100%} @media(max-width:768px){ /* کانتینر nav-links شفاف است؛ هر دکمه کپسول مستقل دارد (تعریف کامل در بلوک پایین‌تر) */ .nav-links{background:none;border:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0} html.dark .nav-links{background:none;border:none} .theme-toggle{width:38px;height:38px} } @media(max-width:480px){ /* اطمینان از ناحیه‌ی لمسی کافی (حداقل ۴۴px طبق استاندارد) */ .btn{min-height:46px} .theme-toggle{width:40px;height:40px} /* فرم‌ها در موبایل راحت‌تر */ .fi,.ft,input,select,textarea{font-size:16px!important} /* جلوگیری از زوم خودکار iOS */ /* فاصله‌ی بهتر بین عناصر فرم */ .fg{margin-bottom:14px} } /* ─── Mobile Audit: عرض‌های باریک ۳۲۰px تا ۴۳۰px ───────────────── اطمینان از نبود اسکرول افقی و چیدمان تمیز هدر در گوشی‌های کوچک. */ @media(max-width:430px){ /* لوگو و دکمه‌ها در یک ردیف بدون سرریز */ .nav-in{gap:6px} .logo{font-size:1.15rem} /* دکمه‌ی ارتقا پلن جمع‌وجورتر تا کنار دکمه‌ی تم جا شود */ .nav .btn-accent{padding:8px 14px!important;font-size:.8rem!important} .theme-toggle{width:36px;height:36px} .theme-toggle svg{width:18px;height:18px} /* جلوگیری از سرریز افقی محتوای کارت‌ها */ .wcard,.sccard,.card{max-width:100%;overflow-wrap:break-word;word-break:break-word} /* کپشن و بدنه‌ی برنامه خوانا بماند */ .wval,.story-row{overflow-wrap:break-word;word-break:break-word} } @media(max-width:360px){ /* گوشی‌های خیلی کوچک (۳۲۰–۳۶۰px) */ .wrap{padding:0 14px} .logo{font-size:1.05rem} .nav .btn-accent{padding:7px 11px!important;font-size:.74rem!important} .theme-toggle{width:34px;height:34px} .btn{font-size:.9rem} } /* احترام به ترجیح کاهش حرکت کاربر */ @media (prefers-reduced-motion: reduce){ html.theme-anim,html.theme-anim *{transition:none!important} .nav{transition:none} } /* ─── ۶) دارک‌مود پنل ادمین ─────────────────────────────────────── پنل ادمین