/* ════════════════════════════════════════════════════════════ قله — اینفوگرافیک‌ها و موشن این فایل را بعد از gholle.css در همان «CSS سفارشی» بچسبان. ════════════════════════════════════════════════════════════ */ /* ═══ ۰ · محافظ ═══ هر «حالتِ پنهانِ اولیه» با .g-js شرطی شده. این کلاس را جاوااسکریپت روی می‌گذارد. اگر اسکریپت اجرا نشود، صفحه کامل و بدون حرکت دیده می‌شود — نه اینکه نصف محتوا نامرئی بماند. */ /* ═══ ۱ · سامانه‌ی نمایان‌شدن هنگام اسکرول ═══ کلاس g-reveal روی هر المان. جاوااسکریپت کلاس is-in را اضافه می‌کند. --i شماره‌ی نوبت است برای تأخیر پلکانی. */ .g-js .g-reveal{ opacity:0; transform:translateY(20px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0) * 90ms); } .g-reveal.is-in{ opacity:1; transform:none; } /* حالت‌های دیگر ورود */ .g-js .g-reveal.from-side{ transform:translateX(28px); } .g-reveal.from-side.is-in{ transform:none; } .g-js .g-reveal.zoom{ transform:scale(.96); } .g-reveal.zoom.is-in{ transform:none; } /* ═══ ۲ · نمودار قهرمان — رشد ستون‌ها هنگام دیده‌شدن ═══ */ .g-js .g-chart .col{ transform:scaleY(.08); transform-origin:bottom; transition:transform .85s cubic-bezier(.2,.8,.2,1); } .g-chart.is-in .col{ transform:scaleY(1); } .g-chart .col:nth-child(1){transition-delay:.02s} .g-chart .col:nth-child(2){transition-delay:.07s} .g-chart .col:nth-child(3){transition-delay:.12s} .g-chart .col:nth-child(4){transition-delay:.17s} .g-chart .col:nth-child(5){transition-delay:.22s} .g-chart .col:nth-child(6){transition-delay:.27s} .g-chart .col:nth-child(7){transition-delay:.32s} .g-chart .col:nth-child(8){transition-delay:.37s} .g-chart .col:nth-child(9){transition-delay:.42s} .g-chart .col:nth-child(10){transition-delay:.47s} .g-chart .col:nth-child(11){transition-delay:.52s} .g-chart .col:nth-child(12){transition-delay:.57s} /* ═══ ۳ · اینفوگرافیک قیف ═══ */ .g-funnel{ display:flex; flex-direction:column; gap:12px; } .g-fn-row{ display:grid; grid-template-columns:130px 1fr 92px; gap:16px; align-items:center; } .g-fn-row .lbl{ font-size:15px; color:var(--g-ink-2); text-align:start; } .g-fn-row .track{ height:44px; border-radius:var(--g-r-md); background:var(--g-in-50); border:1px solid var(--g-line); overflow:hidden; position:relative; } .g-fn-row .fill{ height:100%; border-radius:var(--g-r-md); background:var(--g-in-600); width:var(--w); transition:width 1.05s cubic-bezier(.2,.8,.2,1); display:flex; align-items:center; justify-content:flex-start; padding-inline-start:14px; } .g-fn-row .fill span{ font-size:13px; color:rgba(255,255,255,.72); white-space:nowrap; } .g-fn-row:nth-child(1) .fill{ transition-delay:.05s } .g-fn-row:nth-child(2) .fill{ transition-delay:.16s } .g-fn-row:nth-child(3) .fill{ transition-delay:.27s } .g-fn-row:nth-child(4) .fill{ transition-delay:.38s } .g-fn-row:nth-child(5) .fill{ transition-delay:.49s } .g-fn-row.last .fill{ background:var(--g-lime); } .g-fn-row.last .fill span{ color:rgba(21,18,64,.75); } .g-fn-row .num{ font-family:'Space Grotesk',ui-monospace,monospace; font-size:19px; font-weight:600; color:var(--g-ink); text-align:end; } .g-fn-row.last .num{ color:var(--g-lime-deep); } .g-js .g-fn-row .fill{ width:0; } .g-js .g-funnel.is-in .fill{ width:var(--w); } @media (max-width:700px){ .g-fn-row{ grid-template-columns:96px 1fr 70px; gap:10px; } .g-fn-row .lbl{ font-size:13px } .g-fn-row .num{ font-size:16px } .g-fn-row .track{ height:36px } .g-fn-row .fill span{ display:none } } /* ═══ ۴ · قبل و بعد ═══ */ .g-ba{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .g-ba-card{ background:var(--g-surface); border:1px solid var(--g-line); border-radius:var(--g-r-xl); padding:26px 24px; } .g-ba-card h4{ font-size:16px; margin:0 0 20px; font-weight:600; } .g-ba-bar{ margin-bottom:14px; } .g-ba-bar .top{ display:flex; justify-content:space-between; font-size:13px; color:var(--g-ink-3); margin-bottom:6px; } .g-ba-bar .top b{ font-family:'Space Grotesk',ui-monospace,monospace; font-size:15px; color:var(--g-ink); font-weight:600; } .g-ba-bar .track{ height:10px; border-radius:var(--g-pill); background:var(--g-in-50); border:1px solid var(--g-line); overflow:hidden; } .g-ba-bar .fill{ height:100%; border-radius:var(--g-pill); width:var(--w); transition:width 1s cubic-bezier(.2,.8,.2,1); } .g-ba-bar.before .fill{ background:var(--g-in-200); } .g-ba-bar.after .fill{ background:var(--g-lime); transition-delay:.22s; } .g-ba-bar.after .top b{ color:var(--g-lime-deep); } .g-js .g-ba-bar .fill{ width:0; } .g-js .g-ba.is-in .fill{ width:var(--w); } @media (max-width:880px){ .g-ba{ grid-template-columns:1fr } } /* ═══ ۵ · نمودار کوچک کارت خدمات ═══ */ .g-mini{ height:96px; margin-bottom:22px; display:block; overflow:visible; } .g-mini .bg{ fill:var(--g-in-50); stroke:var(--g-line); } .g-mini .bar{ fill:var(--g-in-200); } .g-mini .hot{ fill:var(--g-in-600); } .g-mini .lime{ fill:var(--g-lime); } .g-mini .ln{ fill:none; stroke:var(--g-in-600); stroke-width:2.4; stroke-linecap:round; } .g-mini .ln-soft{ fill:none; stroke:var(--g-in-200); stroke-width:2.4; stroke-linecap:round; } /* حرکت: میله‌ی برنده بالا می‌آید، خط کشیده می‌شود، عقربه می‌چرخد */ .g-js .g-mini .rise{ transform:translateY(16px); opacity:0; transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s; } .g-mini.is-in .rise{ transform:none; opacity:1; } .g-mini .draw{ transition:stroke-dashoffset 1.1s cubic-bezier(.3,.7,.3,1) .15s; } .g-js .g-mini .needle{ transform-origin:60px 74px; transform:rotate(-72deg); transition:transform 1.2s cubic-bezier(.2,.9,.25,1) .2s; } .g-mini.is-in .needle{ transform:rotate(46deg); } .g-js .g-mini .pop{ transform:scale(0); transform-origin:center; transition:transform .55s cubic-bezier(.3,1.5,.5,1); } .g-mini.is-in .pop{ transform:scale(1); } .g-mini.is-in .pop:nth-of-type(2){ transition-delay:.1s } .g-mini.is-in .pop:nth-of-type(3){ transition-delay:.2s } /* ═══ ۶ · روش کار ═══ */ .g-js .g-step-bars i{ transform:scaleY(.15); transform-origin:bottom; transition:transform .6s cubic-bezier(.2,.8,.2,1); } .g-steps.is-in .g-step-bars i{ transform:scaleY(1); } .g-steps.is-in .g-step:nth-child(1) .g-step-bars i{ transition-delay:.05s } .g-steps.is-in .g-step:nth-child(2) .g-step-bars i{ transition-delay:.18s } .g-steps.is-in .g-step:nth-child(3) .g-step-bars i{ transition-delay:.31s } .g-steps.is-in .g-step:nth-child(4) .g-step-bars i{ transition-delay:.44s } /* ═══ ۷ · نوار نصب افزونه ═══ */ .g-plug .bar{ height:5px; border-radius:var(--g-pill); background:rgba(255,255,255,.14); overflow:hidden; margin:10px 0 12px; } .g-plug .bar i{ display:block; height:100%; border-radius:var(--g-pill); background:var(--g-lime); width:var(--w); transition:width 1s cubic-bezier(.2,.8,.2,1); } .g-js .g-plug .bar i{ width:0; } .g-js .g-plugs.is-in .bar i{ width:var(--w); } .g-plugs.is-in .g-plug:nth-child(2) .bar i{ transition-delay:.12s } .g-plugs.is-in .g-plug:nth-child(3) .bar i{ transition-delay:.24s } /* ═══ ۸ · اسپارک‌لاین نوار اعداد ═══ */ .g-spark{ height:26px; margin-top:8px; display:block; overflow:visible; } .g-spark path{ fill:none; stroke:var(--g-in-200); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke-dashoffset 1.2s cubic-bezier(.3,.7,.3,1); } .g-spark .hi{ stroke:var(--g-lime); transition-delay:.25s; } /* ═══ ۹ · حرکت آرام خطوط تراز ═══ */ @keyframes g-drift{ from{ transform:translateX(0) } to{ transform:translateX(-3%) } } .g-contour{ animation:g-drift 26s ease-in-out infinite alternate; } /* ═══ ۱۰ · ریز-تعامل‌ها ═══ */ .g-card,.g-path,.g-plug,.g-post{ will-change:transform; } .g-card:hover .g-mini .hot{ fill:var(--g-lime); transition:fill .3s; } .g-btn .elementor-button,.g-btn-primary .elementor-button{ position:relative; overflow:hidden; } .g-stat-n .elementor-heading-title{ font-variant-numeric:tabular-nums; } /* ═══ ۱۱ · احترام به تنظیم کاربر ═══ */ @media (prefers-reduced-motion:reduce){ .g-reveal,.g-reveal.is-in{ opacity:1; transform:none; transition:none; } .g-chart .col{ transform:none; transition:none; } .g-funnel .fill,.g-ba-bar .fill,.g-plug .bar i{ width:var(--w); transition:none; } .g-mini .rise,.g-mini .pop{ transform:none; opacity:1; transition:none; } .g-mini .draw,.g-spark path{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; transition:none; } .g-mini .needle{ transform:rotate(46deg); transition:none; } .g-contour{ animation:none; } } /* ── قبل و بعد، تا وقتی عدد واقعی نیامده ── نوارها را خالی و خط‌چین نشان می‌دهیم تا شکلِ «نتیجه» را جعل نکنند. */ .g-ba-empty .g-ba-bar .track{ background:transparent; border:1px dashed var(--g-line-2); } .g-ba-empty .g-ba-bar .fill{ display:none; } .g-ba-empty .g-ba-bar .top b, .g-ba-empty .g-ba-bar.after .top b{ color:var(--g-ink-4); font-size:17px; }