/* Theme Name: ایمن گستر تهران پویا Theme URI: https://tehranpouya.com/ Author: TP Web Description: قالبِ اختصاصیِ ایمن گستر تهران پویا — ساخته‌شده از روی طرحِ تأییدشده. بدون کتابخانهٔ بیرونی، بدون درخواستِ خارجی، وزیرمتنِ سلف‌هاست. Version: 1.0.0 Requires at least: 6.5 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: tp-pouya Tags: rtl-language-support, custom-menu, featured-images, translation-ready */ /* ========================================================================== بخش یکم — عیناً همان CSSِ طرحِ تأییدشدهٔ /p/t/ تنها تغییرها: مسیرِ فایل‌ها (assets/) و سازگاریِ منو با منوی واقعیِ وردپرس. ========================================================================== */ @font-face{font-family:Vazirmatn;src:url(assets/font/Vazirmatn-300.woff2) format("woff2");font-weight:300;font-display:swap} @font-face{font-family:Vazirmatn;src:url(assets/font/Vazirmatn-400.woff2) format("woff2");font-weight:400;font-display:swap} @font-face{font-family:Vazirmatn;src:url(assets/font/Vazirmatn-500.woff2) format("woff2");font-weight:500;font-display:swap} @font-face{font-family:Vazirmatn;src:url(assets/font/Vazirmatn-700.woff2) format("woff2");font-weight:700;font-display:swap} @font-face{font-family:Vazirmatn;src:url(assets/font/Vazirmatn-800.woff2) format("woff2");font-weight:800;font-display:swap} :root{ --red:#C52127; --red-d:#A2181D; --bg:#FBFAF8; --bg-2:#F3F0EA; --ink:#191A1C; --ink-2:#55565B; --line:#E3DFD8; --line-2:#CFC9C0; --wrap:76rem; --r:.7rem; color-scheme:light; } *,*::before,*::after{box-sizing:border-box} html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-block-start:6.6rem;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink); font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif; font-size:1.0625rem;line-height:1.8;font-weight:400;letter-spacing:0; overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} p{margin:0} h1,h2,h3{margin:0;font-weight:700;line-height:1.2;letter-spacing:0} ul,ol,dl{margin:0;padding:0;list-style:none} button{font:inherit;color:inherit} [hidden]{display:none!important} :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:.35rem} /* روی زمینهٔ تیرهٔ بنر، قرمز با عکس قاطی می‌شود (کنتراست ~۱ تا ۲.۵) ⇒ سفید */ .hero__slide :focus-visible,.pw :focus-visible{outline-color:#fff;box-shadow:0 0 0 5px rgba(0,0,0,.55)} .lat{font-family:Vazirmatn,ui-monospace,SFMono-Regular,monospace;letter-spacing:.05em;direction:ltr;unicode-bidi:isolate} .wrap{width:min(100% - 2.5rem, var(--wrap));margin-inline:auto} .sec{padding-block:clamp(3.5rem, 2.6rem + 3vw, 6rem)} .h2{font-size:clamp(1.5rem, 1.2rem + 1vw, 2.2rem);line-height:1.25;text-wrap:balance} .lead{margin-block-start:1.1rem;color:var(--ink-2);max-inline-size:38rem} .eyebrow{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:500;color:var(--red);margin-block-end:.7rem} .eyebrow::before{content:"";inline-size:1.7rem;block-size:1px;background:var(--red)} .skip{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .skip:focus{position:fixed;inset-inline-start:1rem;inset-block-start:1rem;inline-size:auto;block-size:auto;clip-path:none;z-index:99;background:#fff;padding:.6rem 1rem;border:1px solid var(--line);border-radius:var(--r)} .cta-row{margin-block-start:1.7rem;display:flex;gap:.75rem;flex-wrap:wrap} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.45rem; padding:.72rem 1.4rem;border-radius:var(--r);border:1px solid transparent; font-size:1rem;font-weight:500;line-height:1.6;cursor:pointer; transition:background-color .2s,border-color .2s,color .2s; } .btn--red{background:var(--red);color:#fff} .btn--red:hover{background:var(--red-d)} .btn--ink{border-color:var(--line-2);color:var(--ink);background:#fff} .btn--ink:hover{border-color:var(--ink);background:var(--bg-2)} .btn--ghost{border-color:rgba(255,255,255,.6);color:#fff} .btn--ghost:hover{background:rgba(255,255,255,.14)} .btn--sm{padding:.5rem 1rem;font-size:.94rem} /* ---------- header ---------- */ .hdr{position:sticky;inset-block-start:0;z-index:60;background:rgba(251,250,248,.94);backdrop-filter:blur(10px);border-block-end:1px solid var(--line)} .hdr__in{display:flex;align-items:center;gap:1rem;min-block-size:5.2rem} /* س۱ — نشانِ خالی + **نوشتهٔ اصلیِ خودِ لوگو** کنارش (نه تایپ با وزیرمتن). حروفِ برند اختصاصی‌اند؛ بازتایپِ آن‌ها با فونتِ سایت غلط دیده می‌شد. */ .brand{display:flex;align-items:center;gap:.62rem} .brand__m{block-size:3.3rem;inline-size:auto} .brand__w{block-size:1.95rem;inline-size:auto} .nav{display:flex;align-items:center;gap:1.5rem;margin-inline-start:2.2rem} .nav__list{display:flex;align-items:center;gap:1.5rem} .nav__list li{position:relative} .nav a:not(.btn){display:inline-block;font-size:1rem;color:var(--ink-2);padding-block:.35rem;border-block-end:2px solid transparent;transition:color .2s,border-color .2s} .nav a:not(.btn):hover{color:var(--ink);border-block-end-color:var(--red)} .nav__list .current-menu-item>a,.nav__list .current-menu-ancestor>a,.nav__list .current_page_item>a,.nav__list .current_page_ancestor>a{color:var(--ink);border-block-end-color:var(--red)} .nav .btn{display:none} .hdr__end{margin-inline-start:auto;display:flex;align-items:center;gap:1.1rem} .tel{font-size:1rem;color:var(--ink-2);white-space:nowrap} .tel:hover{color:var(--red)} .burger{display:none} /* چک‌باکسِ منو نامرئی ولی فوکوس‌پذیر — display:none آن را از ترتیبِ Tab حذف می‌کرد و منوی موبایل با صفحه‌کلید هرگز باز نمی‌شد */ .nav-t{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none} .nav-t:focus-visible + .burger{outline:2px solid var(--red);outline-offset:3px;border-radius:.5rem} .burger{margin-inline-start:auto;padding:.55rem;border:1px solid var(--line-2);border-radius:.5rem;cursor:pointer} .burger span{display:block;inline-size:1.15rem;block-size:2px;background:var(--ink);margin-block:.22rem} /* ---------- hero ---------- */ .hero{position:relative;background:var(--bg-2)} .hero__slide{position:relative;display:flex;align-items:center;overflow:hidden; min-block-size:clamp(28rem, 21rem + 22vw, 41rem); padding-block:clamp(3rem, 2rem + 4vw, 5.5rem)} .hero__img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;z-index:0} .hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,12,.58) 0%,rgba(10,10,12,.40) 45%,rgba(10,10,12,.70) 100%)} .hero__in{position:relative;z-index:2;color:#fff} .hero__t{font-size:clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem);line-height:1.18;max-inline-size:22ch;text-wrap:balance} .hero__d{margin-block-start:1rem;font-size:clamp(1rem, .95rem + .4vw, 1.18rem);color:rgba(255,255,255,.9);max-inline-size:46ch;text-wrap:pretty} .hero__acts{margin-block-start:1.9rem;display:flex;gap:.75rem;flex-wrap:wrap} .hero__dots{display:none;position:absolute;inset-inline:0;inset-block-end:1.4rem;z-index:5;justify-content:center} .hero__dots ul{display:flex;gap:.45rem;align-items:center;background:rgba(16,16,18,.42);backdrop-filter:blur(6px);padding:.45rem .7rem;border-radius:999px} .hero__dot{inline-size:.55rem;block-size:.55rem;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.5);cursor:pointer;transition:inline-size .3s,background-color .3s} .hero__dot.is-on{inline-size:1.5rem;background:#fff} /* ---------- اسلاید دستیار (س۲) ---------- بازسازیِ عینِ چیزی که بازدیدکننده در ai.tehranpouya.com می‌بیند. رنگ‌ها با نمونه‌برداریِ پیکسل از خودِ صفحهٔ زنده گرفته شده‌اند، نه از حدس: پوسته #030712 · متنِ اصلی #fff · فرعی #9CA3AF · راهنما #6B7280 · خط #1F2937 دکمهٔ ارسال #19212D با آیکونِ #5F6470 · حلقهٔ چرخانِ قرمز↔آبی دورِ کادر. */ .hero__slide--chat{color:var(--ink)} .hero__slide--chat .hero__in{color:var(--ink)} .hero__grid{display:grid;gap:2.2rem;align-items:center} .hero__slide--chat .hero__d{color:var(--ink-2)} /* پس‌زمینهٔ بخش‌های پویا. 🔴 نسخهٔ اول دیده نمی‌شد چون مرکزِ تابش را پشتِ خودِ پنل گذاشته بودم و پنل روشن‌ترین جایش را می‌پوشاند. حالا حباب‌های نور **بیرونِ** مسیرِ پنل‌اند و یک شبکهٔ نازکِ محوشونده هم اضافه شده تا سطح لخت نباشد. */ .pw-stage{position:relative;isolation:isolate;background-color:var(--bg-2)} .pw-stage::before,.pw-stage::after{content:"";position:absolute;inset:0; z-index:-1;pointer-events:none} /* 🔴 نسخهٔ قرمز رد شد: قرمز در سطحِ بزرگ یعنی «هشدار»، نه «تخصص و آرامش»؛ و کنارِ پنلِ تقریباً سیاه لبه‌ها را می‌لرزاند. حالا هیچ رنگِ اشباع‌شده‌ای در پس‌زمینه نیست تا قرمزِ برند تنها رنگِ عمدیِ صفحه بماند. نقشِ انتخاب‌شده: **موجِ سیگنال** — حلقه‌های هم‌مرکز که از پشتِ پنل بیرون می‌زنند، مثل موجِ دتکتور؛ به‌علاوهٔ شبکهٔ فنیِ ریز و عمقِ نور. */ .pw-stage::before{background-image: repeating-radial-gradient(circle at 27% 50%, rgba(25, 26, 28, .14) 0 1.5px, rgba(25, 26, 28, 0) 1.5px 58px), linear-gradient(rgba(25, 26, 28, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 26, 28, .05) 1px, transparent 1px); background-size:auto, 34px 34px, 34px 34px; -webkit-mask-image:radial-gradient(92% 96% at 34% 48%, #000 0%, rgba(0,0,0,.5) 56%, transparent 88%); mask-image:radial-gradient(92% 96% at 34% 48%, #000 0%, rgba(0,0,0,.5) 56%, transparent 88%)} .pw-stage::after{background: radial-gradient(58% 66% at 27% 50%, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, rgba(25, 26, 28, .025) 0%, rgba(25, 26, 28, 0) 32%, rgba(25, 26, 28, .05) 100%)} .pw{--pw-ink:#fff;--pw-ink2:#9CA3AF;--pw-ink3:#6B7280;--pw-line:#1F2937;--pw-surf:#030712; position:relative;inline-size:100%;max-inline-size:33rem;background:var(--pw-surf); border-radius:1.5rem;padding:.85rem .95rem 1.15rem; box-shadow:0 26px 60px rgba(3, 7, 18, .40); font-size:1rem;color:var(--pw-ink);direction:rtl} .pw__bar{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between; padding:.15rem .25rem .5rem} .pw__brand{display:flex;flex-direction:column;gap:2px;align-items:flex-start} .pw__brand img{block-size:26px;inline-size:auto} .pw__brand span{font-size:10px;color:var(--pw-ink2);line-height:1.5} .pw__menu{inline-size:34px;block-size:34px;border-radius:10px;border:1px solid var(--pw-line); display:grid;place-items:center;flex:none} .pw__menu i{display:block;inline-size:14px;block-size:1.5px;background:var(--pw-ink2); border-radius:2px;margin-block:2.5px} .pw__hi{text-align:center;margin-block-start:1.5rem;font-weight:800;line-height:1.5; font-size:clamp(1.05rem, .82rem + .8vw, 1.45rem)} .pw__hi img{block-size:1.42em;inline-size:auto;vertical-align:-.32em;display:inline-block; margin-inline-end:.08em} .pw__hi b{color:var(--red);font-weight:800} .pw__q{text-align:center;margin-block-start:.35rem;color:var(--pw-ink2); font-size:clamp(.82rem, .74rem + .3vw, .95rem)} /* حلقهٔ نورافشانِ چرخان — حکم محمد در خودِ پویا: «دقیقاً حفظ شود» */ @property --pwang{syntax:"";inherits:false;initial-value:0deg} .pw__box{margin-block-start:1.05rem;display:flex;align-items:flex-end;gap:.35rem; border:2px solid transparent;border-radius:1.35rem;padding:.5rem .55rem;min-block-size:4.4rem; background:linear-gradient(var(--pw-surf),var(--pw-surf)) padding-box, conic-gradient(from var(--pwang), var(--red) 0deg, #E8434F 85deg, rgba(232,67,79,.12) 150deg, #4E7FD6 225deg, rgba(78,127,214,.10) 292deg, var(--red) 360deg) border-box; animation:pwring 7s linear infinite} @keyframes pwring{to{--pwang:1turn}} .pw__ph{flex:1;color:var(--pw-ink3);font-size:.88rem;align-self:flex-start;padding:.15rem .4rem} .pw__ic{inline-size:2rem;block-size:2rem;flex:none;display:grid;place-items:center; color:var(--pw-ink2);align-self:flex-end} .pw__ic svg{inline-size:1.05rem;block-size:1.05rem} .pw__send{inline-size:2.15rem;block-size:2.15rem;border-radius:999px;background:#19212D; color:#5F6470;flex:none;display:grid;place-items:center;align-self:flex-end} .pw__send svg{inline-size:1.05rem;block-size:1.05rem} .pw__chips{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-block-start:1rem} .pw__chip{display:inline-flex;align-items:center;gap:.4rem;block-size:2.15rem;padding-inline:.85rem; border:1px solid var(--pw-line);border-radius:999px;color:var(--pw-ink2); font-size:.78rem;font-weight:500;white-space:nowrap} .pw__chip svg{inline-size:.9rem;block-size:.9rem} .pw__chip:hover{border-color:var(--red);color:var(--pw-ink)} .pw__disc{text-align:center;margin-block-start:.85rem;font-size:.7rem;color:var(--pw-ink3);opacity:.75} /* --- پنلِ زندهٔ پایینِ صفحه: سؤال تایپ می‌شود و پویا جواب می‌دهد --- */ .pw--live{max-inline-size:none;padding-block-end:.95rem} .pw__msgs{display:flex;flex-direction:column;gap:12px;padding-block:1rem .2rem;min-block-size:11.5rem} .pw__row{display:flex;gap:10px;align-items:flex-start;animation:pwIn .45s cubic-bezier(.22, .61, .36, 1)} .pw__row--me{flex-direction:row-reverse} .pw__av{inline-size:30px;block-size:30px;border-radius:9px;flex:none;display:grid;place-items:center; overflow:hidden;background:#111827;border:1px solid var(--pw-line); font-size:11px;font-weight:700;color:var(--pw-ink2)} .pw__av img{block-size:13px;inline-size:auto} .pw__bub{max-inline-size:82%;padding:11px 14px;border-radius:15px;font-size:.92rem;line-height:1.85; unicode-bidi:plaintext;overflow-wrap:anywhere;min-inline-size:0} .pw__bub--u{background:var(--red);color:#fff;border-top-left-radius:6px} .pw__bub--a{background:#0B1220;border:1px solid var(--pw-line);color:rgba(255,255,255,.88); border-top-right-radius:6px} .pw__dots{display:inline-flex;gap:5px;align-items:center;block-size:13px} .pw__dots i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--red);opacity:.5; animation:blink 1.2s infinite} .pw__dots i:nth-child(2){animation-delay:.18s} .pw__dots i:nth-child(3){animation-delay:.36s} @keyframes blink{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}} @keyframes pwIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} .pw__box--live{margin-block-start:.55rem;min-block-size:3.4rem;align-items:center} .pw__box--live .pw__ph{color:var(--pw-ink);align-self:center} .pw__caret{display:inline-block;inline-size:2px;block-size:1em;vertical-align:-.15em; background:var(--red);margin-inline-start:2px;animation:pwCaret 1s step-end infinite} @keyframes pwCaret{0%,100%{opacity:1}50%{opacity:0}} .pw__cta{display:flex;justify-content:center;margin-block-start:1.05rem} .pw__cta .btn{border-radius:999px} /* ---------- trust bar ---------- */ .trust{padding-block:2.1rem;border-block-end:1px solid var(--line);background:var(--bg)} .trust__label{text-align:center;font-size:.9rem;color:var(--ink-2);margin-block-end:1.25rem} .mq{overflow:hidden} .mq__track{display:flex;inline-size:max-content;animation:mq 42s linear infinite} .mq:hover .mq__track,.mq:focus-within .mq__track{animation-play-state:paused} /* س۴ — چهار کپیِ مو‌به‌مو هم‌عرض، حرکت به اندازهٔ دقیقاً یک کپی (۲۵٪ از ۴ کپی). چرا چهار؟ در بیشینهٔ حرکت، لبهٔ چپِ نوار = عرضِ ظرف − (N−1)×عرضِ کپی. با دو کپی این عدد برای هر نمایشگرِ پهن‌تر از ۱۱۵۳px مثبت می‌شد و سمتِ چپ خالی می‌ماند (روی صفحهٔ ۱۹۹۰px یعنی ۸۳۶px حفره). با چهار کپی تا ۳۴۶۱px سالم است. */ .mq__list{flex:none;display:flex;align-items:center;gap:3.4rem;padding-inline:1.7rem} .mq__list img{block-size:2.75rem;inline-size:auto;max-inline-size:9.5rem;filter:grayscale(1);opacity:.6;transition:filter .25s,opacity .25s} /* تنظیم چشمی تک‌تک: وزن بصری برابر، نه ارتفاع برابر (س۳) */ .mq__list .lg-melli{block-size:3.44rem} .mq__list .lg-refah{block-size:3.06rem} .mq__list .lg-asan{block-size:3.13rem} .mq__list .lg-saman{block-size:3.13rem} .mq__list .lg-karafarin{block-size:3.25rem} .mq__list .lg-parsian{block-size:3.31rem} .mq__list .lg-madiran{block-size:1.88rem} .mq__list .lg-alvan{block-size:2.75rem} .mq__list .lg-alborz{block-size:2.81rem} .mq__list .lg-refahst{block-size:2.44rem} .mq__list li:hover img{filter:grayscale(0);opacity:1} @keyframes mq{from{transform:translateX(0)}to{transform:translateX(25%)}} /* ---------- services — کارت‌های روی‌هم‌نشین (الگوی Trust) ---------- هر گام یک کارتِ مستقل است که چسبنده می‌شود و کارتِ بعدی رویش می‌لغزد؛ لبهٔ کارت‌های زیرین بیرون می‌ماند و کمی کوچک می‌شوند. این هم «تفکیک» می‌دهد (ایرادِ قسمتِ بزرگِ خالی) هم «حسِ رد شدن» را می‌سازد. */ .svc{background:linear-gradient(180deg,var(--bg-2) 0,var(--bg-2) 17rem,var(--bg) 34rem)} .svc__head{margin-block-end:2.4rem} .svc__stack{display:grid;gap:1.6rem} .scard{position:relative;background:#fff;border-radius:1.4rem;overflow:hidden; box-shadow:0 20px 48px rgba(20, 18, 16, .13), 0 0 0 1px rgba(20, 18, 16, .04); display:grid;grid-template-columns:1fr;transform-origin:top center} .scard__txt{padding:1.7rem 1.6rem 1.9rem;display:flex;flex-direction:column;justify-content:center} .scard__n{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600; color:var(--red);letter-spacing:.02em} .scard__n::before{content:"";inline-size:1.6rem;block-size:1px;background:var(--red)} .scard__t{margin-block-start:.7rem;font-size:clamp(1.3rem, 1.1rem + .7vw, 1.8rem)} .scard__d{margin-block-start:.75rem;color:var(--ink-2);max-inline-size:34rem} .scard__meta{margin-block-start:.9rem;font-size:.9rem;color:var(--ink-2)} .tag{display:inline-block;align-self:flex-start;margin-block-start:1rem;font-size:.85rem; color:var(--red);border:1px solid var(--red);border-radius:999px;padding:.18rem .8rem} .scard__img{margin:0;position:relative;min-block-size:14rem} .scard__img img{inline-size:100%;block-size:100%;object-fit:cover;display:block} /* ---------- ریتم پس‌زمینه (س۷) ---------- یکنواختیِ سفید/نخودی/سفید با دو «نوارِ تصویری» شکسته می‌شود. تصویر زیرِ یک پوششِ روشن می‌نشیند: زمینه روشن می‌ماند (قاعدهٔ قفل‌شده) ولی بافت و عمق پیدا می‌کند. عکس‌ها همان‌هایی‌اند که روی سرور هست. */ .band{position:relative;isolation:isolate;background-color:var(--bg-2)} .band::before,.band::after{content:"";position:absolute;inset:0;pointer-events:none} .band::before{z-index:-2;background-size:cover;background-position:center;background-repeat:no-repeat} /* پوشش قوی‌ترین جایی است که متن می‌نشیند (میانه) و در حاشیهٔ بالا/پایین رقیق می‌شود تا عکس فقط سرک بکشد. عکسِ خوانایی بر عکسِ دیده‌شدن مقدم است. */ .band::after{z-index:-1;background:linear-gradient(180deg, rgba(251,250,248,.80) 0%, rgba(251,250,248,.93) 17%, rgba(251,250,248,.95) 50%, rgba(251,250,248,.93) 83%, rgba(251,250,248,.80) 100%)} /* عکسِ مهندسان شلوغ‌تر و تیره‌تر است ⇒ پوششِ محکم‌تر */ .band--eng::after{background:linear-gradient(180deg, rgba(251,250,248,.86) 0%, rgba(251,250,248,.95) 17%, rgba(251,250,248,.965) 50%, rgba(251,250,248,.95) 83%, rgba(251,250,248,.86) 100%)} /* نسخهٔ سبکِ مخصوصِ پس‌زمینه: عکسِ CSS تنبل نمی‌شود و در بارگذاریِ اول می‌آید، ولی چون زیرِ پوششِ ۹۰٪ می‌نشیند کیفیتِ بالا هدر است. */ /* تاییدیه: بافتِ نقشه و پرگار + **مهرِ آتش‌نشانی** مثل مهرِ برجسته روی سند */ .band--desk::before{ background-image:url(assets/img/seal.webp), url(assets/img/approval-desk-bg.webp); background-size:min(23rem, 38vw) auto, cover; background-position:left -1.5rem bottom -3rem, center; background-repeat:no-repeat, no-repeat} /* تماس: جلسه و امضای قرارداد — «پروژهٔ خود را با ما در میان بگذارید» */ .band--eng::before{background-image:url(assets/img/contact-meet-bg.webp)} /* وزن با دو کلاس بالا برده شده چون سرشاخهٔ background در .ai که بعدتر می‌آید، background-image را پاک می‌کند. */ .sec.pw-stage{background-color:var(--bg-2)} /* ---------- approval ---------- */ .appr{background:var(--bg-2);border-block:1px solid var(--line)} .appr__grid{display:grid;gap:2.6rem} .steps li{display:flex;gap:1rem;padding-block:1.1rem;border-block-start:1px solid var(--line-2)} .steps li:first-child{border-block-start:0;padding-block-start:0} .steps__n{flex:none;inline-size:1.6rem;color:var(--red);font-weight:700;font-size:1rem;line-height:1.8} .steps h3{font-size:1.06rem;font-weight:500} .steps p{font-size:.95rem;color:var(--ink-2);margin-block-start:.15rem} /* ---------- projects ---------- */ .prj{display:grid;gap:1.6rem;margin-block-start:2.4rem} .prj figure{margin:0} .prj img{inline-size:100%;block-size:auto;border-radius:1.1rem;box-shadow:0 16px 36px rgba(20,18,16,.14)} .prj figcaption{padding-block-start:1rem;margin-block-start:1rem;border-block-start:1px solid var(--line)} .prj h3{font-size:1.08rem;font-weight:500} .prj p{font-size:.93rem;color:var(--ink-2);margin-block-start:.2rem} /* ---------- assistant ---------- */ .ai{background:var(--bg-2);border-block:1px solid var(--line)} .ai__grid{display:grid;gap:2.6rem;align-items:start} .ticks{margin-block:1.7rem;display:grid;gap:.85rem} .ticks li{display:flex;gap:.7rem;align-items:flex-start} .ticks b{color:var(--red);font-weight:700;line-height:1.8} .ticks span{display:block} .ticks small{display:block;font-size:.86rem;color:var(--ink-2);line-height:1.7} .panel{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1.4rem} .panel h3{font-size:1rem;font-weight:500;color:var(--ink-2)} .panel ol{margin-block-start:1rem;display:grid;gap:.8rem} .panel li{padding-inline-start:.9rem;border-inline-start:2px solid var(--line-2);font-size:.96rem;color:var(--ink)} /* ---------- about / contact ---------- */ .about__grid,.contact__grid{display:grid;gap:2.6rem} .facts div{display:flex;justify-content:space-between;gap:1rem;padding-block:.95rem;border-block-start:1px solid var(--line)} .facts div:first-child{border-block-start:0} .facts dt{color:var(--ink-2);font-size:.95rem;flex:none} .facts dd{margin:0;font-weight:500;text-align:end} .cinfo{display:grid;gap:1.1rem} .cinfo li{padding-block-end:1.1rem;border-block-end:1px solid var(--line)} .cinfo li:last-child{border-block-end:0;padding-block-end:0} .cinfo b{display:block;font-size:.88rem;font-weight:400;color:var(--ink-2)} /* فقط اسپنِ بیرونی بلوک شود؛ اسپنِ تودرتوی dir="ltr" نباید بلوک شود وگرنه شماره و ایمیل و ساعت به لبهٔ چپ می‌چسبند */ .cinfo li > span{display:block;margin-block-start:.15rem} /* ---------- footer ---------- */ .ft{background:#fff;border-block-start:1px solid var(--line);padding-block:2.6rem} .ft__grid{display:grid;gap:1.6rem;align-items:center} .ft__nav{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.96rem;color:var(--ink-2)} .ft__nav a:hover{color:var(--red)} .ft__c{font-size:.9rem;color:var(--ink-2)} /* ---------- js-enhanced ---------- */ .js .hero__track{display:grid} .js .hero__slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s ease} .js .hero__slide.is-active{opacity:1;visibility:visible} .js .hero__dots{display:flex} /* ---------- responsive ---------- */ @media (max-width:899px){ .nav,.tel,.hdr__end .btn{display:none} .burger{display:block} .nav-t:checked ~ .nav{display:flex;flex-direction:column;align-items:stretch;gap:0; position:absolute;inset-inline:-1.25rem;inset-block-start:100%;margin:0; background:var(--bg);border-block-end:1px solid var(--line);padding:1rem 1.25rem 1.4rem} .nav-t:checked ~ .nav .nav__list{flex-direction:column;align-items:stretch;gap:0} .nav-t:checked ~ .nav a:not(.btn){display:block;padding-block:.7rem;border-block-end:1px solid var(--line)} .nav-t:checked ~ .nav .btn{display:inline-flex;margin-block-start:1rem;border-block-end:0} .hdr__in{position:relative} } @media (min-width:600px){ .prj{grid-template-columns:repeat(3,1fr);gap:1.4rem} .ft__grid{grid-template-columns:1fr auto} } @media (min-width:900px){ .hero__grid{grid-template-columns:1.05fr 1fr;gap:3rem} .appr__grid,.ai__grid,.about__grid,.contact__grid{grid-template-columns:1.1fr 1fr;gap:clamp(2.5rem, 1rem + 4vw, 5rem)} .scard{grid-template-columns:1.02fr .98fr;min-block-size:19rem;max-block-size:24rem} .scard__txt{padding:2.4rem 2.5rem} .scard__img{min-block-size:0} /* روی‌هم‌نشینی مثل Trust: هر کارت کمی پایین‌تر از قبلی می‌چسبد تا لبهٔ کارت‌های زیرین پیدا بماند و «دسته‌شدن» دیده شود. */ .js .svc__stack{display:block} .js .scard{position:sticky;margin-block-end:1.6rem;will-change:transform} .js .scard:nth-child(1){inset-block-start:6.6rem} .js .scard:nth-child(2){inset-block-start:7.5rem} .js .scard:nth-child(3){inset-block-start:8.4rem} .js .scard:nth-child(4){inset-block-start:9.3rem} .js .scard:nth-child(5){inset-block-start:10.2rem} .js .scard:nth-child(6){inset-block-start:11.1rem} .js .scard:last-child{margin-block-end:0} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .js .scard{transform:none!important;filter:none!important} } /* ========================================================================== بخش دوم — صفحه‌های محتوایی طرحِ تأییدشده فقط صفحهٔ اصلی را پوشش می‌دهد. هر ۷۰ صفحهٔ دیگر (نوشته، برگه، تجهیز، نمونه‌کار، آرشیو، جست‌وجو) با همین زبانِ بصری اینجا ساخته می‌شود: همان رنگ، همان فاصله‌ها، همان گردیِ گوشه، همان خطوط. قواعدِ قفل‌شده اینجا هم رعایت شده: زمینهٔ روشن · هیچ نارنجی · صفر درخواستِ خارجی. ========================================================================== */ /* ---------- سربرگِ صفحه ---------- */ .phero{position:relative;background:var(--bg-2);border-block-end:1px solid var(--line); padding-block:clamp(2.4rem, 1.8rem + 2vw, 4rem)} .phero__in{max-inline-size:52rem} .phero__t{font-size:clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);line-height:1.22;text-wrap:balance} .phero__d{margin-block-start:1rem;color:var(--ink-2);max-inline-size:44rem;text-wrap:pretty} .phero__meta{margin-block-start:1.1rem;display:flex;flex-wrap:wrap;gap:1.1rem; font-size:.9rem;color:var(--ink-2)} .phero__meta time{color:var(--ink-2)} /* ---------- خرده‌نان ---------- */ .crumbs{font-size:.88rem;color:var(--ink-2);margin-block-end:1rem;line-height:1.9} .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem} .crumbs li{display:flex;align-items:center;gap:.45rem} .crumbs li+li::before{content:"›";color:var(--line-2)} .crumbs a:hover{color:var(--red)} .crumbs [aria-current="page"]{color:var(--ink)} /* ---------- چیدمانِ صفحه: متن + ستونِ کناری ---------- */ /* minmax(0,1fr) حیاتی است: بدونِ آن ستونِ auto به عرضِ min-content بازمی‌شود و در موبایل ۷ صفحه از لبه بیرون می‌زد (اندازه‌گیری: ۳۹۰px ⇒ scrollWidth تا ۱۰۴۴px) */ .layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.2rem, 1.4rem + 2.5vw, 3.6rem)} @media (min-width:960px){ .layout{grid-template-columns:minmax(0,1fr) 20.5rem;align-items:start} .layout--wide{grid-template-columns:minmax(0,1fr)} } /* ---------- متنِ خودِ محتوا ---------- */ .entry{font-size:1.0625rem;line-height:1.95;overflow-wrap:anywhere} .entry>*+*{margin-block-start:1.15rem} .entry p{margin:0} .entry h2,.entry h3,.entry h4,.entry h5,.entry h6{ margin-block-start:2.4rem;margin-block-end:.9rem;line-height:1.3;text-wrap:balance;scroll-margin-block-start:7rem} .entry h2{font-size:clamp(1.35rem, 1.15rem + .8vw, 1.75rem);font-weight:700; padding-block-end:.6rem;border-block-end:1px solid var(--line)} .entry h3{font-size:clamp(1.15rem, 1.05rem + .5vw, 1.35rem);font-weight:700} .entry h4{font-size:1.06rem;font-weight:500;color:var(--ink)} .entry h5,.entry h6{font-size:1rem;font-weight:500;color:var(--ink-2)} .entry>h2:first-child,.entry>h3:first-child{margin-block-start:0} .entry a{color:var(--red);text-decoration:underline;text-underline-offset:.22em; text-decoration-thickness:1px;text-decoration-color:var(--line-2); transition:text-decoration-color .2s} .entry a:hover{text-decoration-color:var(--red)} .entry strong,.entry b{font-weight:700} .entry ul,.entry ol{margin-block:1.15rem;padding-inline-start:1.4rem;display:grid;gap:.55rem} .entry ul{list-style:none;padding-inline-start:0} .entry ul li{position:relative;padding-inline-start:1.3rem} .entry ul li::before{content:"";position:absolute;inset-block-start:.78em;inset-inline-start:.28rem; inline-size:.42rem;block-size:.42rem;border-radius:50%;background:var(--red)} .entry ol{list-style:decimal} .entry ol li{padding-inline-start:.35rem} .entry ol li::marker{color:var(--red);font-weight:700} .entry li>ul,.entry li>ol{margin-block:.55rem} .entry blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 0; padding-inline-start:1.2rem;border-inline-start:3px solid var(--red); color:var(--ink-2);font-size:1.05rem} .entry blockquote p+p{margin-block-start:.8rem} .entry img,.entry video,.entry iframe{max-inline-size:100%;block-size:auto;border-radius:1.1rem} .entry figure{margin:1.8rem 0} .entry figure img{inline-size:100%;box-shadow:0 16px 36px rgba(20,18,16,.14)} .entry figcaption,.entry .wp-caption-text{margin-block-start:.7rem;font-size:.9rem; color:var(--ink-2);text-align:center} .entry hr{margin-block:2.4rem;border:0;border-block-start:1px solid var(--line)} .entry code,.entry kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em; background:var(--bg-2);border:1px solid var(--line);border-radius:.35rem;padding:.1rem .35rem} .entry pre{background:var(--bg-2);border:1px solid var(--line);border-radius:.8rem; padding:1rem 1.1rem;overflow-x:auto;direction:ltr;text-align:left} .entry pre code{background:none;border:0;padding:0} /* جدول‌ها: در موبایل باید خودشان بلغزند، نه اینکه بدنهٔ صفحه افقی شود */ .entry .tbl-scroll{overflow-x:auto;margin-block:1.6rem; border:1px solid var(--line);border-radius:.9rem;background:#fff} .entry table{inline-size:100%;border-collapse:collapse;font-size:.97rem;min-inline-size:32rem} .entry .tbl-scroll>table{margin:0} .entry th,.entry td{padding:.75rem .95rem;border-block-end:1px solid var(--line); text-align:start;vertical-align:top} .entry thead th{background:var(--bg-2);font-weight:700;white-space:nowrap} .entry tbody tr:last-child th,.entry tbody tr:last-child td{border-block-end:0} /* کلاس‌های چیدمانِ خودِ وردپرس */ .entry .alignleft{float:inline-start;margin:.4rem 0 1.1rem;margin-inline-end:1.5rem;max-inline-size:50%} .entry .alignright{float:inline-end;margin:.4rem 0 1.1rem;margin-inline-start:1.5rem;max-inline-size:50%} .entry .aligncenter{margin-inline:auto;display:block} .entry .alignwide,.entry .alignfull{max-inline-size:100%} .entry .wp-caption{max-inline-size:100%} .entry .gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); margin-block:1.8rem} .entry .gallery img{inline-size:100%} .entry .screen-reader-text{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)} @media (max-width:599px){ .entry .alignleft,.entry .alignright{float:none;margin-inline:0;max-inline-size:100%} } /* ---------- ستونِ کناری ---------- */ .aside{display:grid;gap:1.4rem;align-content:start} @media (min-width:960px){.aside{position:sticky;inset-block-start:6.8rem}} .wcard{background:#fff;border:1px solid var(--line);border-radius:1.1rem;padding:1.5rem 1.4rem; box-shadow:0 12px 30px rgba(20,18,16,.06)} .wcard--cta{background:var(--bg-2);border-color:var(--line-2)} .wcard__t{font-size:1.08rem;font-weight:700;line-height:1.4} .wcard__d{margin-block-start:.7rem;font-size:.95rem;color:var(--ink-2)} .wcard .btn{margin-block-start:1.1rem;inline-size:100%} .wcard__tel{margin-block-start:.85rem;display:block;font-size:1.05rem;font-weight:700;color:var(--ink)} .wcard__tel:hover{color:var(--red)} .wlist{margin-block-start:1rem;display:grid;gap:.7rem} .wlist li{padding-block-end:.7rem;border-block-end:1px solid var(--line);font-size:.96rem;line-height:1.7} .wlist li:last-child{border-block-end:0;padding-block-end:0} .wlist a:hover{color:var(--red)} .wlist .is-here{color:var(--red);font-weight:500} /* ---------- کارت‌های آرشیو ---------- */ .cards{display:grid;gap:1.6rem;margin-block-start:2.4rem} @media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}} @media (min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}} .card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line); border-radius:1.1rem;overflow:hidden;transition:box-shadow .25s,border-color .25s,transform .25s} .card:hover{box-shadow:0 18px 40px rgba(20,18,16,.13);border-color:var(--line-2);transform:translateY(-3px)} .card__media{display:block;aspect-ratio:4/3;background:var(--bg-2);overflow:hidden} .card__media img{inline-size:100%;block-size:100%;object-fit:cover} .card__body{padding:1.2rem 1.25rem 1.4rem;display:flex;flex-direction:column;flex:1} .card__k{font-size:.84rem;font-weight:500;color:var(--red)} .card__t{margin-block-start:.5rem;font-size:1.06rem;font-weight:500;line-height:1.55} .card:hover .card__t{color:var(--red)} .card__d{margin-block-start:.6rem;font-size:.94rem;color:var(--ink-2);line-height:1.8} .card__more{margin-block-start:auto;padding-block-start:1rem;font-size:.92rem;color:var(--red)} /* ---------- صفحه‌بندی ---------- */ .pager{margin-block-start:3rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center} .pager .page-numbers{display:inline-flex;align-items:center;justify-content:center; min-inline-size:2.6rem;block-size:2.6rem;padding-inline:.7rem; border:1px solid var(--line);border-radius:.6rem;background:#fff; font-size:.96rem;color:var(--ink-2);transition:border-color .2s,color .2s,background-color .2s} .pager .page-numbers:hover{border-color:var(--ink);color:var(--ink)} .pager .page-numbers.current{background:var(--red);border-color:var(--red);color:#fff} .pager .dots{border-color:transparent;background:none} /* ---------- پیمایشِ نوشتهٔ قبلی/بعدی ---------- */ .pnav{margin-block-start:3rem;display:grid;gap:1rem; padding-block-start:1.8rem;border-block-start:1px solid var(--line)} @media (min-width:700px){.pnav{grid-template-columns:1fr 1fr}} .pnav a{display:block;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:.9rem; background:#fff;transition:border-color .2s} .pnav a:hover{border-color:var(--red)} .pnav b{display:block;font-size:.85rem;font-weight:400;color:var(--ink-2)} .pnav span{display:block;margin-block-start:.35rem;font-size:.99rem;line-height:1.6} .pnav .is-next{text-align:end} /* ---------- پیامِ خالی / جست‌وجو ---------- */ .empty{max-inline-size:38rem} .empty p{margin-block-start:1rem;color:var(--ink-2)} .sform{margin-block-start:1.6rem;display:flex;gap:.6rem;max-inline-size:28rem} .sform input[type=search]{flex:1;min-inline-size:0;font:inherit;color:var(--ink); background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:.7rem 1rem} .sform input[type=search]:focus-visible{outline:2px solid var(--red);outline-offset:2px} /* ---------- فرم‌ها (فلوئنت‌فرم و فرمِ ساده) ---------- */ .tpform .ff-el-input--label label,.tpform label{font-size:.94rem;font-weight:500;color:var(--ink)} .tpform input[type=text],.tpform input[type=email],.tpform input[type=tel], .tpform input[type=url],.tpform input[type=number],.tpform select,.tpform textarea, .fluentform input[type=text],.fluentform input[type=email],.fluentform input[type=tel], .fluentform input[type=url],.fluentform input[type=number],.fluentform select,.fluentform textarea{ inline-size:100%;font:inherit;color:var(--ink);background:#fff; border:1px solid var(--line-2);border-radius:var(--r);padding:.7rem .95rem; transition:border-color .2s,box-shadow .2s} .tpform textarea,.fluentform textarea{min-block-size:8rem;resize:vertical} .tpform :is(input,select,textarea):focus, .fluentform :is(input,select,textarea):focus{ outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(197,33,39,.14)} .fluentform .ff-btn-submit,.tpform button[type=submit]{ display:inline-flex;align-items:center;justify-content:center;gap:.45rem; padding:.72rem 1.6rem;border-radius:var(--r);border:1px solid transparent; background:var(--red);color:#fff;font:inherit;font-weight:500;cursor:pointer; transition:background-color .2s} .fluentform .ff-btn-submit:hover,.tpform button[type=submit]:hover{background:var(--red-d)} .fluentform .ff-el-group{margin-block-end:1.1rem} .fluentform .text-danger,.fluentform .error{color:var(--red-d);font-size:.9rem} /* ---------- کمکی ---------- */ .sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .sec--tight{padding-block:clamp(2.6rem, 2rem + 2vw, 4rem)} /* منوی فوتر حالا منوی واقعیِ وردپرس است ⇒ یک