:root{ --ink:#0A1A2F; --ink-2:#12294D; --paper:#C6D9F0; --paper-2:#FFFFFF; --teal:#00976D; --teal-dark:#00603F; --teal-soft:#BEE9DA; --amber:#0090DC; --amber-soft:#C3E6FA; --amber-dark:#00618F; --muted:#33415A; --line:rgba(10,26,47,.26); --danger:#B33A20; --gold:#F2B84B; --gold-dark:#C98016; --violet:#8B7FF0; --violet-dark:#4A36CC; --grad-brand:linear-gradient(135deg,#00976D,#0090DC); --grad-brand-r:linear-gradient(90deg,#00976D,#18CFA4 55%,#0090DC); --shadow:0 18px 50px -22px rgba(10,26,47,.55); --shadow-sm:0 8px 24px -14px rgba(10,26,47,.5); --glow-teal:0 14px 40px -12px rgba(0,151,109,.68); --glow-blue:0 14px 40px -12px rgba(0,144,220,.68); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%} body{ font-family:'Vazirmatn',Tahoma,sans-serif; background:var(--paper); color:var(--ink); line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100%; position:relative; } a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} /* ===== انیمیشن‌ها ===== */ .prog{position:fixed;top:0;right:0;left:0;height:3px;z-index:200; background:linear-gradient(90deg,var(--teal),var(--amber)); transform:scaleX(0);transform-origin:right center;will-change:transform; box-shadow:0 0 12px rgba(0,151,109,.6)} .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)} .rv.in{opacity:1;transform:none} .rv-l{opacity:0;transform:translateX(-28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)} .rv-l.in{opacity:1;transform:none} .rv-r{opacity:0;transform:translateX(28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)} .rv-r.in{opacity:1;transform:none} .rv-z{opacity:0;transform:scale(.94);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.3,1)} .rv-z.in{opacity:1;transform:none} .rv-s{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)} .rv-s.in{opacity:1;transform:none} .btn-primary,.btn-amber,.btn-ghost-dark{position:relative;overflow:hidden} .btn-primary::after,.btn-amber::after,.btn-ghost-dark::after{content:"";position:absolute;top:0;bottom:0;width:45%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-20deg);inset-inline-start:-60%} .btn-primary:hover::after,.btn-amber:hover::after,.btn-ghost-dark:hover::after{animation:shine .75s ease} @keyframes shine{to{inset-inline-start:120%}} .hero h1 .hl::after{content:"";position:absolute;inset-inline:0;bottom:-4px;height:7px;border-radius:100px; background:rgba(0,144,220,.4);transform:scaleX(0);transform-origin:right;animation:swipe 1s .7s cubic-bezier(.2,.8,.2,1) forwards} @keyframes swipe{to{transform:scaleX(1)}} .hero-bg::before{animation:float1 14s ease-in-out infinite} .hero-bg::after{animation:float2 17s ease-in-out infinite} @keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(38px,26px) scale(1.09)}} @keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-34px,-22px) scale(1.12)}} .hero-inner > div:first-child > *{animation:up .8s cubic-bezier(.2,.8,.2,1) backwards} .hero-inner > div:first-child > *:nth-child(1){animation-delay:.05s} .hero-inner > div:first-child > *:nth-child(2){animation-delay:.15s} .hero-inner > div:first-child > *:nth-child(3){animation-delay:.25s} .hero-inner > div:first-child > *:nth-child(4){animation-delay:.35s} .hero-inner > div:first-child > *:nth-child(5){animation-delay:.45s} .rank-card{animation:up .9s .3s cubic-bezier(.2,.8,.2,1) backwards} @keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .newsbar{animation:drop .6s cubic-bezier(.2,.8,.2,1)} @keyframes drop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}} header.nav{transition:box-shadow .3s,background .3s} header.nav.stuck{box-shadow:0 6px 24px -14px rgba(10,26,47,.5)} .svc-ic,.step-ic{transition:.3s} .svc-card:hover .svc-ic,.step-card:hover .step-ic{transform:scale(1.1) rotate(-6deg)} .plan.hot::after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none; background:linear-gradient(120deg,transparent 40%,rgba(0,151,109,.13),transparent 60%); animation:sweep 3.4s ease-in-out infinite} @keyframes sweep{0%,100%{opacity:.4}50%{opacity:1}} /* روی گوشی، انیمیشن‌ها سبک‌تر ولی هنوز نرم (نه خیلی سریع، نه ناگهانی) */ @media(max-width:700px){ .rv,.rv-l,.rv-r,.rv-s{transition-duration:.6s;transition-timing-function:cubic-bezier(.16,.8,.2,1)} .rv{transform:translateY(14px)} .rv-l,.rv-r{transform:translateY(10px);opacity:0} .rv-z{transform:scale(.97)} .plan.hot::after{animation:none} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .rv,.rv-l,.rv-r,.rv-z{opacity:1!important;transform:none!important} } .fa-num{font-feature-settings:"ss01"} /* ---------- nav ---------- */ header.nav{ position:sticky;top:0;z-index:40; background:rgba(246,243,236,.82);backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } header.nav .wrap{max-width:1320px} .nav-inner{display:flex;align-items:center;gap:18px;height:72px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex-shrink:0} .logo{ width:44px;height:44px;border-radius:13px; background:#fff;overflow:hidden; display:grid;place-items:center; box-shadow:var(--shadow-sm);position:relative;flex-shrink:0; } .logo img{width:100%;height:100%;object-fit:cover} .brand-txt strong{display:block;font-weight:800;font-size:1.02rem;letter-spacing:-.2px} .brand-txt span{display:block;font-size:.72rem;color:var(--muted);margin-top:-2px} .nav-links{display:flex;align-items:center;gap:2px;margin-inline-start:auto} .nav-links a{padding:8px 11px;border-radius:10px;font-size:.86rem;font-weight:500;color:var(--muted);transition:.2s;white-space:nowrap} .nav-links a:hover{color:var(--ink);background:rgba(14,30,61,.05)} .nav-mega{position:relative} .nav-mega-trigger{display:flex;align-items:center;gap:4px} .nav-mega-trigger::after{content:'▾';font-size:.7rem;opacity:.6} .nav-mega-panel{display:grid;position:absolute;top:100%;left:50%; padding:26px 20px 20px;background:var(--paper-2);border:1px solid var(--line);border-radius:18px; box-shadow:var(--shadow);gap:26px;grid-template-columns:repeat(3,168px);z-index:60;max-width:calc(100vw - 32px); opacity:0;visibility:hidden;pointer-events:none; transform:translateX(-50%) translateY(-10px) scale(.96); transition:opacity .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s; transform-origin:top center} .nav-mega:hover .nav-mega-panel,.nav-mega:focus-within .nav-mega-panel{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)} .nav-mega-col{opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease} .nav-mega:hover .nav-mega-col,.nav-mega:focus-within .nav-mega-col{opacity:1;transform:none} .nav-mega-col:nth-child(1){transition-delay:.03s} .nav-mega-col:nth-child(2){transition-delay:.08s} .nav-mega-col:nth-child(3){transition-delay:.13s} .nav-mega-col h6{font-size:.78rem;font-weight:800;color:var(--teal-dark);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line)} .nav-mega-col a{display:block;padding:6px 4px;border-radius:8px;font-size:.84rem;color:var(--ink);font-weight:500} .nav-mega-col a:hover{background:var(--teal-soft);color:var(--teal-dark)} .nav-mega-more{margin-top:6px;color:var(--teal-dark)!important;font-weight:700!important;font-size:.8rem!important} .nav-cta{ background:var(--ink);color:#fff!important;font-weight:700!important; padding:10px 18px!important;box-shadow:var(--shadow-sm); } .nav-cta:hover{background:var(--ink-2)!important;transform:translateY(-1px)} .nav-auth{display:flex!important;align-items:center;gap:9px;padding:6px 14px 6px 6px!important; border-radius:100px;border:1px solid var(--line);font-weight:600!important;white-space:nowrap} .nav-auth:hover{border-color:var(--teal);background:var(--teal-soft)!important} .nav-avatar{width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff; display:grid;place-items:center;font-weight:800;font-size:.9rem;flex-shrink:0} .nav-auth-txt{display:flex;flex-direction:column;line-height:1.35;font-size:.7rem;color:var(--muted)} .nav-auth-txt b{font-size:.85rem;color:var(--ink);font-weight:700} .burger{display:none;margin-inline-start:auto;background:none;font-size:1.5rem;color:var(--ink)} /* ---------- hero ---------- */ /* پس‌زمینهٔ هیرو دیگر تختِ تک‌رنگ نیست: یک گرادیانِ عمقی از سرمه‌ای تیره به آبیِ کمی روشن‌تر، که باعث می‌شه لکه‌های نورِ روی آن (hero-bg) بیشتر بدرخشند و کارت‌های شیشه‌ای جدا دیده بشن */ .hero{position:relative;overflow:hidden;color:#fff;padding:88px 0 96px; background:linear-gradient(165deg,#050F1E 0%,var(--ink) 40%,#153761 100%)} .hero-bg{position:absolute;inset:0;opacity:.82;pointer-events:none} .hero-bg::before{ content:"";position:absolute;width:620px;height:620px;border-radius:50%; top:-260px;left:-160px; background:radial-gradient(circle,rgba(0,144,220,.72),transparent 62%); } .hero-bg::after{ content:"";position:absolute;width:520px;height:520px;border-radius:50%; bottom:-240px;right:-120px; background:radial-gradient(circle,rgba(0,151,109,.6),transparent 60%); } .hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .eyebrow{ position:relative;display:inline-flex;align-items:center;gap:9px; font-size:.88rem;font-weight:800;letter-spacing:.15px; background:none;border:none;padding:0 0 11px;border-radius:0;margin-bottom:26px; background-image:linear-gradient(120deg,#fff,#86D8FF 150%); -webkit-background-clip:text;background-clip:text;color:transparent; } .eyebrow .dot{ width:8px;height:8px;border-radius:3px;flex-shrink:0; background:var(--grad-brand);transform:rotate(45deg); box-shadow:0 0 0 5px rgba(63,214,192,.22); animation:kickspin 3.4s ease-in-out infinite; } .eyebrow::after{ content:"";position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,#1FF0BE 20%,#5FC8FF 55%,#1FF0BE 85%,transparent); animation:kickline 2.6s ease-in-out infinite; } @keyframes kickspin{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(225deg) scale(1.2)}} /* توجه: قبلاً این افکت با background-position اسکرول می‌شد که یعنی روی هر فریم رنگ‌آمیزیِ دوباره (repaint) — چون این افکت روی چندین بج هم‌زمان تو هر صفحه اجرا می‌شه (۹ نمونه فقط تو صفحهٔ اصلی!) به یک پالسِ شفافیت (opacity) تبدیل شد که فقط روی لایهٔ گرافیکی (compositor) اجرا می‌شه، نه رنگ‌آمیزیِ صفحه. */ @keyframes kickline{0%,100%{opacity:.5}50%{opacity:1}} .hero h1{font-size:clamp(2rem,4.6vw,3.15rem);font-weight:900;line-height:1.28;letter-spacing:-.6px} .hero h1 .hl{position:relative;white-space:nowrap; background:linear-gradient(90deg,#0098E3,#1FF0BE,#0098E3);background-size:200% auto; -webkit-background-clip:text;background-clip:text;color:transparent;animation:hlflow 4s linear infinite} @keyframes hlflow{to{background-position:200% center}} @media(prefers-reduced-motion:reduce){.hero h1 .hl{animation:none;color:var(--amber);-webkit-text-fill-color:initial}} .spotlight{position:absolute;inset:0;pointer-events:none;z-index:1; background:radial-gradient(420px circle at var(--sx,50%) var(--sy,10%),rgba(255,255,255,.07),transparent 60%)} .rank-card-wrap{perspective:1000px} .hero p.lead{margin-top:20px;font-size:1.08rem;color:#E6EEFB;max-width:34ch;font-weight:400} .hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:14px 26px;border-radius:13px;font-weight:700;font-size:1rem;transition:.2s; } .btn-primary{background:var(--teal);color:#fff;box-shadow:0 14px 30px -14px rgba(0,96,63,.9)} .btn-primary:hover{background:var(--teal-dark);transform:translateY(-2px)} .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.16)} .btn-ghost:hover{background:rgba(255,255,255,.14)} .hero-trust{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap} .hero-trust .t strong{display:block;font-size:1.5rem;font-weight:800;color:#fff} .hero-trust .t span{font-size:.8rem;color:#C2CFE8} /* hero rank card */ .rank-card{ background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:30px; backdrop-filter:blur(6px);box-shadow:var(--shadow); transform-style:preserve-3d;transition:transform .15s ease-out;will-change:transform; } .rank-card .rc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px} .rank-card .rc-top span{font-size:.85rem;color:#D5E0F4} .rc-badge{font-size:.72rem;background:rgba(0,96,63,.25);color:#6BFADC;padding:4px 10px;border-radius:8px;border:1px solid rgba(0,96,63,.4)} .gauge-mini{display:flex;flex-direction:column;align-items:center;gap:6px;margin:8px 0 18px} .gauge-mini .big{font-size:2.9rem;font-weight:900;color:var(--amber);line-height:1} .gauge-mini .lbl{font-size:.85rem;color:#D5E0F4} .bars{display:flex;flex-direction:column;gap:12px} .bar-row{display:flex;align-items:center;gap:12px;font-size:.82rem;color:#E6EEFB} .bar-row .name{width:64px;flex-shrink:0} .bar-track{flex:1;height:8px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden} .bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--teal),#1FF0BE);width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)} /* ---------- sections ---------- */ section.block{padding:104px 0;position:relative} /* لکه‌های نرم پس‌زمینه — کم‌رنگ و آرام */ .blobs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden; transform:translateZ(0);backface-visibility:hidden} .blobs i{position:absolute;border-radius:50%;display:block} .blobs i:nth-child(1){width:620px;height:620px;top:4%;right:-240px; background:radial-gradient(circle,rgba(0,144,220,.18),rgba(0,144,220,0) 68%)} .blobs i:nth-child(2){width:560px;height:560px;top:44%;left:-220px; background:radial-gradient(circle,rgba(0,151,109,.16),rgba(0,151,109,0) 68%)} .blobs i:nth-child(3){width:520px;height:520px;bottom:2%;right:2%; background:radial-gradient(circle,rgba(0,144,220,.12),rgba(0,144,220,0) 68%)} @media(max-width:700px){.blobs i:nth-child(3){display:none}} .sec-head{max-width:46ch;margin-bottom:54px} .sec-kicker{ position:relative;display:flex;width:fit-content;margin-inline:auto;align-items:center;gap:10px; font-size:.95rem;font-weight:800;letter-spacing:.15px; background:none;border:none;box-shadow:none;padding:0 0 11px;border-radius:0;margin-bottom:26px; background-image:linear-gradient(120deg,var(--teal-dark),var(--amber-dark) 140%); -webkit-background-clip:text;background-clip:text;color:transparent; } .sec-kicker::before{ content:"";width:8px;height:8px;flex-shrink:0;border-radius:3px; background:var(--grad-brand);transform:rotate(45deg); box-shadow:0 0 0 5px rgba(0,151,109,.14); animation:kickspin 3.4s ease-in-out infinite; } .sec-kicker::after{ content:"";position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--teal) 20%,var(--amber) 55%,var(--teal) 85%,transparent); animation:kickline 2.6s ease-in-out infinite; } .mbti-promo-txt .sec-kicker,#plans .sec-kicker{ background-image:linear-gradient(120deg,#7BF7D8,#72D6FF 140%); } .mbti-promo-txt .sec-kicker{margin-inline:0} .sec-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800;letter-spacing:-.4px;line-height:1.35} .sec-head p{color:var(--muted);margin-top:14px;font-size:1.02rem;line-height:1.85;max-width:44ch} /* about */ .about{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center} .portrait{ aspect-ratio:1/1.05;border-radius:26px;position:relative;overflow:hidden; background:linear-gradient(160deg,#1FA3DC,#00618F);box-shadow:var(--shadow); display:grid;place-items:center; } .portrait-img{width:100%;height:100%;object-fit:cover;object-position:center 12%} .portrait .ph{color:rgba(255,255,255,.35);text-align:center;font-size:.85rem;padding:20px} .portrait .ph svg{width:56px;height:56px;margin-bottom:10px;opacity:.6} .portrait .tag{ position:absolute;bottom:16px;inset-inline:16px;background:rgba(255,255,255,.12); backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:14px; padding:12px 16px;color:#fff;font-size:.85rem; } .about-txt h3{font-size:1.5rem;font-weight:800;margin-bottom:6px} .about-txt .role{color:var(--teal);font-weight:700;margin-bottom:18px} .about-txt p{color:var(--muted);margin-bottom:14px} .social-row{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap} .social-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:12px;font-weight:600;font-size:.9rem;border:1px solid var(--line);background:var(--paper);transition:.2s} .social-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} .social-btn svg{width:20px;height:20px} .social-btn.ig{color:#C13584} .social-btn.tg{color:#229ED9} .social-note{font-size:.78rem;color:var(--muted);margin-top:10px} /* steps / why */ /* بخش سه قدم */ .why-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center} .why-text{text-align:center} .why-text h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:900;letter-spacing:-.4px;line-height:1.45} .why-text p{color:var(--muted);margin-top:16px;font-size:1.02rem;line-height:1.95;max-width:40ch;margin-inline:auto} .why-cards{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:8px 0} .why-ring{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%); width:320px;height:320px;border:2px dashed rgba(10,26,47,.13);border-radius:50%;pointer-events:none;z-index:0} .why-dot{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%); width:210px;height:210px;border-radius:50%;background:var(--teal-soft);opacity:.5;pointer-events:none;z-index:0} .step-card{position:relative;z-index:2;background:var(--paper-2);border:1px solid var(--line); border-radius:20px;padding:22px 20px;box-shadow:var(--shadow-sm);transition:.25s} .step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(0,151,109,.45)} .step-card.s1{grid-column:1;grid-row:1} .step-card.s2{grid-column:2;grid-row:1;margin-top:34px} .step-card.s3{grid-column:1 / span 2;grid-row:2;max-width:340px;margin:14px auto 0} .step-badge{position:absolute;top:16px;inset-inline-end:18px;background:var(--paper);border:1px solid var(--line); color:var(--muted);font-size:.68rem;font-weight:800;padding:4px 11px;border-radius:100px} .step-ic{width:42px;height:42px;border-radius:13px;background:var(--teal-soft);color:var(--teal-dark); display:grid;place-items:center;margin-bottom:12px} .step-ic svg{width:22px;height:22px} .step-card h4{font-size:1rem;font-weight:800;color:var(--teal-dark);margin-bottom:6px;line-height:1.5;max-width:88%} .step-card p{color:var(--muted);font-size:.84rem;line-height:1.8;margin:0} .step-more{display:inline-block;margin-top:12px;font-size:.8rem;font-weight:700;color:var(--muted);transition:.2s} .step-more:hover{color:var(--teal-dark)} @media(max-width:900px){ .why-wrap{grid-template-columns:1fr;gap:34px} .why-ring,.why-dot{display:none} .why-cards{grid-template-columns:1fr;padding:0} .step-card.s1,.step-card.s2,.step-card.s3{grid-column:1;grid-row:auto;max-width:100%;margin:0} } .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px} .svc-card{background:var(--paper-2);border:1px solid var(--line);border-radius:22px;padding:30px 26px;transition:.25s;display:flex;flex-direction:column; box-shadow:var(--shadow-sm)} .svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(0,151,109,.4)} .svc-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px; background:var(--teal-soft);color:var(--teal-dark)} .svc-ic svg{width:26px;height:26px} .svc-card.blue .svc-ic{background:var(--amber-soft);color:var(--amber-dark)} .svc-card h4{font-size:1.06rem;font-weight:800;margin-bottom:6px} .svc-card p{color:var(--muted);font-size:.9rem;flex:1} .svc-tag{margin-top:14px;font-size:.76rem;font-weight:700;color:var(--teal-dark);background:var(--teal-soft);align-self:flex-start;padding:4px 11px;border-radius:100px} .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:stretch} .blog-card{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;transition:.25s; display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-sm);height:100%} .blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(0,144,220,.4)} /* کادرِ عکسِ کارت. نسبتِ ثابتِ ۱۶:۹ یعنی همهٔ کارت‌ها هم‌قد می‌شوند، فارغ از اینکه عکسِ آپلودی عمودی باشد یا افقی — عکس داخلِ همین کادر کراپ می‌شود، نه اینکه کارت را بکشد. display:block روی span لازم است چون این‌ها داخل تگِ نشسته‌اند (span پیش‌فرض inline است). */ .blog-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden; background:linear-gradient(135deg,var(--teal-soft),var(--amber-soft));flex:0 0 auto} .blog-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s} .blog-card:hover .blog-thumb img{transform:scale(1.06)} /* جای‌نگهدارِ مقاله‌های بی‌عکس — آیکون باید کوچک بماند، وگرنه SVG تا کلِ کادر بزرگ می‌شود */ .blog-thumb-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; color:var(--teal-dark);opacity:.3} .blog-thumb-ph svg{width:40px;height:40px;flex:0 0 auto} /* برچسبِ دستهٔ مقاله، روی عکس */ .blog-cat{position:absolute;inset-inline-start:12px;inset-block-start:12px;background:rgba(255,255,255,.94); color:var(--teal-dark);font-size:.72rem;font-weight:800;padding:5px 12px;border-radius:100px; backdrop-filter:blur(4px);box-shadow:0 4px 14px -8px rgba(21,39,62,.5)} .blog-body{display:flex;flex-direction:column;flex:1;padding:18px 22px 22px} .blog-date{display:block;font-size:.76rem;color:var(--muted);margin-bottom:8px} .blog-card h4{font-size:1.04rem;font-weight:800;margin-bottom:8px;line-height:1.6} .blog-card p{color:var(--muted);font-size:.88rem;line-height:1.9;flex:1;margin:0} .blog-more{display:block;margin-top:14px;font-size:.84rem;font-weight:700;color:var(--teal-dark)} @media(max-width:600px){.blog-grid{gap:18px}.blog-body{padding:16px 18px 18px}} .article{max-width:760px;margin:0 auto;padding:56px 0 20px} .article h1{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:900;line-height:1.5;margin-bottom:12px} .article .meta{font-size:.85rem;color:var(--muted);margin-bottom:26px} .article .body{font-size:1.03rem;line-height:2.05} .article .body p{margin-bottom:18px} .article .body h2{font-size:1.5rem;font-weight:800;margin:38px 0 14px;padding-inline-start:14px;border-inline-start:5px solid var(--teal);line-height:1.6;scroll-margin-top:90px} .article .body h3{font-size:1.18rem;font-weight:800;margin:26px 0 10px;color:var(--teal-dark)} .article .body ul,.article .body ol{margin:0 0 20px;padding-inline-start:8px;list-style:none} .article .body ul li{position:relative;padding-inline-start:26px;margin-bottom:10px} .article .body ul li::before{content:"";position:absolute;inset-inline-start:6px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--teal)} .article .body ol{counter-reset:n} .article .body ol li{position:relative;padding-inline-start:36px;margin-bottom:10px;counter-increment:n} .article .body ol li::before{content:counter(n);position:absolute;inset-inline-start:0;top:4px;width:24px;height:24px;border-radius:8px; background:var(--teal-soft);color:var(--teal-dark);font-size:.78rem;font-weight:800;display:grid;place-items:center} .article .body blockquote{margin:24px 0;padding:18px 22px;background:var(--teal-soft);border-inline-start:5px solid var(--teal); border-radius:0 14px 14px 0;font-weight:600;color:var(--teal-dark)} .article .body a{color:var(--amber-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px} .article .body figure{margin:26px 0} .article .body figure img{width:100%;border-radius:18px;display:block;border:1px solid var(--line)} .article .body figcaption{text-align:center;font-size:.8rem;color:var(--muted);margin-top:9px} .article .body .note-box{display:flex;gap:12px;background:var(--amber-soft);border:1px solid var(--amber);border-radius:16px;padding:16px 18px;margin:24px 0} .article .body .note-box span{font-size:1.2rem;flex-shrink:0} .article .body .note-box div{font-size:.94rem;line-height:1.9} .article .body .art-cta{text-align:center;margin:32px 0} .article .body .art-hr{border:none;height:1px;background:var(--line);margin:32px 0} .art-cat{display:inline-block;background:var(--teal-soft);color:var(--teal-dark);font-size:.76rem;font-weight:800;padding:5px 14px;border-radius:100px;margin-bottom:12px} /* بدون این، عکسِ آپلودی با هر نسبتِ ابعادی (مثلاً نزدیک به مربع یا عمودی) در ارتفاعِ طبیعیِ خودش رندر می‌شد و کشیده تا کلِ ارتفاعِ صفحه می‌رفت — این‌طور همیشه یک بنرِ افقیِ یکدست می‌شود، صرف‌نظر از شکلِ اصلیِ عکس، و بخشِ اضافه‌اش (نه کلِ عکس) کراپ می‌شود. */ /* height:auto اجباری است — این تگ همیشه width/height را به‌عنوان ویژگیِ HTML هم دارد (برای جلوگیری از پرشِ صفحه حین لود)، و بدونِ height:auto در CSS، مرورگر همان مقدارِ height‌ِ HTML (مثلاً ۹۰۰ از یک عکسِ ۹۰۰ پیکسلی) را به‌جای aspect-ratio اعمال می‌کند. */ .art-hero{width:100%;height:auto;aspect-ratio:2.2/1;object-fit:cover;object-position:center; border-radius:20px;margin-bottom:26px;display:block;border:1px solid var(--line);background:var(--teal-soft)} @media(max-width:600px){.art-hero{aspect-ratio:16/11}} .toc{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:20px 24px;margin-bottom:30px} .toc b{display:block;font-size:.92rem;margin-bottom:10px} .toc ol{list-style:none;counter-reset:t} .toc li{counter-increment:t;padding:5px 0;font-size:.9rem} .toc li::before{content:counter(t) ". ";color:var(--teal);font-weight:800} .toc a{color:var(--muted);text-decoration:none} .toc a:hover{color:var(--teal-dark)} .back-home{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;color:var(--teal-dark);margin-bottom:24px} .empty-blog{color:var(--muted);background:var(--paper-2);border:1px dashed var(--line);border-radius:18px;padding:38px;text-align:center} .newsbar{background:var(--ink);color:#fff;text-align:center;font-size:.85rem;padding:9px 16px;font-weight:600} .newsbar a{color:var(--amber);text-decoration:underline} .cd-wrap{background:linear-gradient(140deg,var(--ink),var(--ink-2));border-radius:26px;padding:36px;text-align:center;color:#fff;box-shadow:var(--shadow)} .cd-wrap h2{font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:800;margin-bottom:20px} .cd-nums{display:flex;justify-content:center;gap:12px;flex-wrap:wrap} .cd-cell{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:14px 8px;min-width:82px} .cd-cell b{display:block;font-size:2rem;font-weight:900;color:var(--amber);line-height:1.2} .cd-cell span{font-size:.75rem;color:#D5E0F4} .cd-note{margin-top:16px;font-size:.88rem;color:#E6EEFB} .plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;align-items:stretch} .plan{background:var(--paper-2);border:1px solid var(--line);border-radius:22px;overflow:hidden; display:flex;flex-direction:column;transition:.25s;position:relative} .plan:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(0,151,109,.4)} .plan.hot{border-color:var(--teal);box-shadow:var(--shadow)} .p-media{position:relative;display:block;aspect-ratio:2.4/1;overflow:hidden;background:var(--teal-soft)} .p-media img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s} .plan:hover .p-media img{transform:scale(1.05)} .p-media-ph{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center; background:linear-gradient(135deg,var(--teal-soft),#fff 60%,var(--amber-soft))} .p-media-ph b{font-size:1.15rem;font-weight:900;color:var(--teal-dark);opacity:.75} .p-cat{position:absolute;top:12px;inset-inline-end:12px;background:#fff;color:var(--ink); font-size:.68rem;font-weight:800;padding:5px 12px;border-radius:100px;backdrop-filter:blur(4px)} .p-hot{position:absolute;top:13px;inset-inline-start:13px;z-index:2; background:var(--grad-brand);color:#fff;display:flex;align-items:center;gap:5px; font-size:.7rem;font-weight:800;padding:6px 14px 6px 12px;border-radius:100px; box-shadow:0 10px 24px -10px rgba(0,151,109,.85); animation:v2floatysm 4s ease-in-out infinite} .p-hot::before{content:"✦";font-size:.85em} .p-cart{position:absolute;bottom:-18px;inset-inline-start:18px;width:44px;height:44px;border-radius:50%; background:var(--teal);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(0,151,109,.9); transition:.25s;z-index:2} .p-cart svg{width:21px;height:21px} .plan:hover .p-cart{transform:scale(1.1) rotate(-6deg);background:var(--teal-dark)} .p-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1} .plan h4{font-size:1.05rem;font-weight:800;line-height:1.6;margin-bottom:5px} .plan h4 a{color:inherit;transition:.2s} .plan h4 a:hover{color:var(--teal-dark)} .plan .pdesc{color:var(--muted);font-size:.83rem;line-height:1.7;margin:0} .p-feat{list-style:none;margin:12px 0 0;padding:0} .p-feat li{font-size:.81rem;color:var(--muted);padding:3px 0;padding-inline-start:24px;position:relative;line-height:1.65} .p-feat li::before{content:"";position:absolute;inset-inline-start:0;top:10px;width:15px;height:15px;border-radius:50%;background:var(--teal-soft)} .p-feat li::after{content:"";position:absolute;inset-inline-start:4.5px;top:13.5px;width:5px;height:2.5px; border-inline-start:2px solid var(--teal-dark);border-bottom:2px solid var(--teal-dark);transform:rotate(-45deg)} .p-feat .p-more{color:var(--teal-dark);font-weight:700;font-size:.78rem;padding-inline-start:0} .p-feat .p-more::before,.p-feat .p-more::after{display:none} .p-foot{margin-top:auto;padding-top:16px} @keyframes ppShine{0%{transform:translateX(-120%) skewX(-12deg)}100%{transform:translateX(220%) skewX(-12deg)}} @keyframes ppBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}} .p-price{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center; justify-content:space-between;flex-wrap:wrap;gap:10px 14px; padding:16px 18px;margin-bottom:12px;border:none;border-radius:18px; background:linear-gradient(135deg,var(--teal-soft),rgba(0,144,220,.1) 140%); box-shadow:0 0 0 1px rgba(0,151,109,.2),0 12px 30px -18px rgba(0,151,109,.6); animation:ppBreathe 3.2s ease-in-out infinite} .p-price::after{content:"";position:absolute;inset:0;width:36%;z-index:0;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); animation:ppShine 3.6s ease-in-out infinite} .p-price>*{position:relative;z-index:1} .pp-row{display:flex;align-items:baseline;gap:7px;line-height:1.1} .pp-row b{font-size:3rem;font-weight:900;line-height:1; background-image:linear-gradient(120deg,var(--teal-dark),var(--amber-dark) 150%); -webkit-background-clip:text;background-clip:text;color:transparent} .pp-row .pp-ask{font-size:1.05rem;background:none;-webkit-text-fill-color:initial;color:var(--muted)} .pp-row span{font-size:.88rem;font-weight:700;color:var(--muted)} @keyframes ppOldPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}} @keyframes ppBadgeSweep{0%{transform:translateX(-120%) skewX(-12deg)}100%{transform:translateX(320%) skewX(-12deg)}} .pp-old{display:inline-flex;align-items:center;gap:8px;padding:7px 8px 7px 14px;border-radius:100px; background:linear-gradient(120deg,rgba(239,68,68,.14),rgba(239,68,68,.05)); border:1px solid rgba(239,68,68,.28)} .pp-old s{font-size:1.4rem;font-weight:800;color:#dc2626;text-decoration-thickness:2.5px; animation:ppOldPulse 1.8s ease-in-out infinite} .pp-old em{font-style:normal;font-size:.8rem;font-weight:800;color:#fff;display:inline-flex;align-items:center;gap:4px; position:relative;overflow:hidden;isolation:isolate; background:linear-gradient(120deg,var(--amber),var(--amber-dark)); padding:6px 13px;border-radius:100px;box-shadow:0 8px 18px -8px rgba(0,144,220,.8)} .pp-old em::before{content:"🏷";font-size:.9em} .pp-old em::after{content:"";position:absolute;inset:0;width:40%;z-index:-1;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent); animation:ppBadgeSweep 2.6s ease-in-out infinite} @media(max-width:420px){.pp-row b{font-size:2.5rem}.pp-old s{font-size:1.2rem}} @media(prefers-reduced-motion:reduce){ .pp-old s,.p-price,.p-price::after,.pp-old em{animation:none} } .p-btn{width:100%;justify-content:center} .btn-ghost-dark{background:var(--ink);color:#fff} .btn-ghost-dark:hover{background:var(--ink-2);transform:translateY(-2px)} .major-search-box{max-width:460px;margin:0 auto 22px} .major-search-inp{width:100%;padding:14px 18px;border:1.5px solid var(--line);border-radius:100px; font-family:inherit;font-size:.95rem;font-weight:500;background:var(--paper-2);color:var(--ink); text-align:center;transition:.2s;box-shadow:var(--shadow-sm)} .major-search-inp:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,151,109,.14)} .major-search-inp::placeholder{color:var(--muted)} .cat-chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px;justify-content:center} .chip{padding:9px 20px;border-radius:100px;border:1.5px solid var(--line);background:var(--paper-2); font-family:inherit;font-weight:700;font-size:.88rem;color:var(--muted);cursor:pointer;transition:.2s} .chip:hover{border-color:var(--teal);color:var(--teal-dark)} .chip.on{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:var(--shadow-sm)} .cat-group{margin-bottom:42px} .cat-title{font-size:1.2rem;font-weight:800;margin-bottom:18px;display:flex;align-items:center;gap:12px} .cat-title::before{content:"";width:5px;height:22px;border-radius:100px;background:var(--teal);flex-shrink:0} .cat-title span{font-size:.74rem;font-weight:600;color:var(--muted);background:var(--teal-soft);padding:3px 11px;border-radius:100px} /* صفحهٔ یک طرح */ .card-box{background:var(--paper-2);border:1px solid var(--line);border-radius:22px;padding:30px 28px; box-shadow:var(--shadow-sm);margin-bottom:22px} .tp-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start} .tp-mediabox{padding:0;overflow:hidden} .tp-mediabox img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} .tp-head{padding-bottom:24px;margin-bottom:26px;border-bottom:1px solid var(--line)} .tp-title{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:900;line-height:1.55;margin:10px 0 10px} .tp-lead{font-size:1.02rem;color:var(--muted);line-height:1.95;max-width:54ch;margin-inline:auto} .course-list{list-style:none;margin:0} .course-list li{font-size:.88rem;color:var(--ink);padding:10px 0;padding-inline-start:20px;position:relative;line-height:1.85;border-bottom:1px dashed var(--line)} .course-list li:last-child{border-bottom:none} .course-list li::before{content:"";position:absolute;inset-inline-start:0;top:18px;width:7px;height:7px;border-radius:50%;background:var(--teal)} .side-h{font-size:.92rem;font-weight:800;margin-bottom:16px;padding-bottom:12px; border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px} .side-h::before{content:"";width:4px;height:15px;border-radius:100px;background:var(--teal);flex-shrink:0} .tp-box{border:1.5px solid var(--teal);box-shadow:var(--shadow);text-align:center} .tp-hot{display:inline-block;background:var(--teal);color:#fff;font-size:.72rem;font-weight:800; padding:5px 15px;border-radius:100px;margin-bottom:14px} .tp-plabel{font-size:.78rem;color:var(--muted);margin-bottom:6px} .tp-prow{display:flex;align-items:baseline;justify-content:center;gap:7px;line-height:1.2} .tp-prow b{font-size:2rem;font-weight:900;color:var(--teal-dark)} .tp-prow span{font-size:.88rem;font-weight:600;color:var(--muted)} .tp-old{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:8px} .tp-old s{font-size:.88rem;color:var(--muted)} .tp-old em{font-style:normal;font-size:.66rem;font-weight:800;color:var(--amber-dark); background:var(--amber-soft);padding:3px 9px;border-radius:100px} .tp-buy{width:100%;justify-content:center;font-size:1rem;padding:15px;margin-top:20px} .tp-note{font-size:.73rem;color:var(--muted);margin-top:12px;line-height:1.8} .tp-feat{list-style:none;margin:0} .tp-feat li{font-size:.88rem;color:var(--ink);padding:8px 0;padding-inline-start:28px;position:relative;line-height:1.85} .tp-feat li::before{content:"";position:absolute;inset-inline-start:0;top:12px;width:18px;height:18px; border-radius:50%;background:var(--teal-soft)} .tp-feat li::after{content:"";position:absolute;inset-inline-start:6px;top:16px;width:6px;height:3px; border-inline-start:2px solid var(--teal-dark);border-bottom:2px solid var(--teal-dark);transform:rotate(-45deg)} .meta-list{list-style:none;margin:0 0 16px} .meta-list li{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 0;border-bottom:1px dashed var(--line);font-size:.85rem} .meta-list li:last-child{border-bottom:none} .meta-list span{color:var(--muted)} .meta-list b{font-weight:700} .short-link{display:flex;gap:7px} .short-link input{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:10px; font-family:inherit;font-size:.72rem;color:var(--muted);background:var(--paper);direction:ltr;text-align:left} .short-link button{padding:9px 14px;border-radius:10px;background:var(--ink);color:#fff;border:none; font-family:inherit;font-size:.78rem;font-weight:700;cursor:pointer;flex-shrink:0} .short-link button:hover{background:var(--ink-2)} .share-row{display:flex;gap:8px;flex-wrap:wrap} .sh{flex:1;min-width:88px;text-align:center;padding:10px;border-radius:11px;font-size:.8rem;font-weight:700; border:1px solid var(--line);background:var(--paper-2);cursor:pointer;font-family:inherit;transition:.2s} .sh.tg{color:#229ED9}.sh.wa{color:#25D366}.sh.cp{color:var(--muted)} .sh:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} .teacher-box{text-align:center} .t-photo{width:82px;height:82px;border-radius:50%;object-fit:cover;object-position:center 12%; border:3px solid var(--teal);margin:0 auto 12px;display:block} .t-name{font-weight:800;font-size:1rem;margin-bottom:4px} .t-role{font-size:.78rem;color:var(--muted);line-height:1.8;margin-bottom:16px} .btn-line-teal{background:transparent;color:var(--teal-dark);border:1.5px solid var(--teal);width:100%;justify-content:center;padding:10px} .btn-line-teal:hover{background:var(--teal);color:#fff} .tp-help{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .tp-help b{font-size:1rem;display:block} .tp-help p{font-size:.9rem;color:var(--muted);margin-top:5px;line-height:1.8;max-width:46ch} .tp-help .btn{margin-inline-start:auto} .rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px} .rel-card{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.2s;background:var(--paper-2)} .rel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--teal)} .rel-img{display:block;aspect-ratio:16/9;background:linear-gradient(135deg,var(--teal-soft),var(--amber-soft))} .rel-img img{width:100%;height:100%;object-fit:cover;display:block} .rel-t{display:block;padding:11px 12px 4px;font-size:.85rem;font-weight:700;line-height:1.6} .rel-p{display:block;padding:0 12px 12px;font-size:.82rem;font-weight:800;color:var(--teal-dark)} .rel-p i{font-style:normal;font-size:.68rem;font-weight:600;color:var(--muted)} @media(max-width:980px){ .tp-grid{grid-template-columns:1fr;gap:0} /* موبایل: اول متنِ اصلیِ صفحه، بعد کارت‌های کناری — قبلاً order:-1 بود و ساید‌بار می‌افتاد بالای مقاله، یعنی کاربر اول تبلیغ ابزارها را می‌دید نه محتوای رشته/مقاله */ .tp-side{order:1} .card-box{padding:24px 20px} } .tst-wrap{position:relative;padding:0 8px} .tst-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:10px 4px 22px;scrollbar-width:none;-ms-overflow-style:none} .tst-track::-webkit-scrollbar{display:none} .tst{flex:0 0 340px;max-width:86vw;scroll-snap-align:center;background:var(--paper-2);border:1px solid var(--line); border-radius:24px;padding:28px 24px 24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column; align-items:center;text-align:center;transition:.25s} .tst:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .tst .av{width:88px;height:88px;border-radius:50%;background:linear-gradient(145deg,var(--teal-soft),#fff); color:var(--teal-dark);display:grid;place-items:center;font-weight:900;font-size:2rem;flex-shrink:0; border:3px solid var(--teal);overflow:hidden;margin-bottom:14px;box-shadow:0 8px 20px -10px rgba(0,151,109,.7)} .tst .av img{width:100%;height:100%;object-fit:cover;border-radius:50%} .tst .nm{font-weight:800;font-size:1.06rem;color:var(--teal-dark);margin-bottom:3px} .tst .rl{font-size:.78rem;color:var(--muted);margin-bottom:16px} .tst .quote{font-size:.92rem;line-height:2.05;color:var(--ink);text-align:right;width:100%; max-height:190px;overflow-y:auto;padding-inline-end:8px;border-top:1px solid var(--line);padding-top:16px} .tst .quote::-webkit-scrollbar{width:5px} .tst .quote::-webkit-scrollbar-thumb{background:rgba(10,26,47,.2);border-radius:10px} .tst .quote::-webkit-scrollbar-track{background:transparent} .tst .shot{width:100%;border-radius:16px;margin-top:14px;display:block;border:1px solid var(--line)} .tst-arrow{position:absolute;top:45%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%; background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--shadow-sm);cursor:pointer; display:grid;place-items:center;color:var(--ink);transition:.2s} .tst-arrow:hover{background:var(--teal);color:#fff;border-color:var(--teal)} .tst-arrow svg{width:20px;height:20px} .tst-arrow.prev{right:-14px} .tst-arrow.next{left:-14px} .tst-dots{display:flex;justify-content:center;gap:7px;margin-top:4px} .tst-dots i{width:7px;height:7px;border-radius:50%;background:rgba(10,26,47,.2);transition:.25s;cursor:pointer;display:block} .tst-dots i.on{background:var(--teal);width:22px;border-radius:100px} @media(max-width:900px){.tst-arrow{display:none}.tst-wrap{padding:0}} .faq-list{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto} .faq-item{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.2s} .faq-item[open]{border-color:var(--teal);box-shadow:var(--shadow-sm)} .faq-item summary{padding:18px 22px;font-weight:700;font-size:.98rem;cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::before{content:"+";color:var(--teal);font-weight:900;font-size:1.2rem;flex-shrink:0} .faq-item[open] summary::before{content:"\2212"} .faq-item .ans{padding:0 22px 20px 22px;color:var(--muted);font-size:.92rem;line-height:1.95} .faq-item .ans p{margin-bottom:10px} /* بخش‌های دلخواه */ .cblock .wrap{max-width:860px} .cblock h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;margin-bottom:14px;letter-spacing:-.3px} .cblock .ctext{font-size:1.02rem;line-height:2.05;color:var(--muted)} .cblock .ctext p{margin-bottom:16px} .cblock.boxed .inner{background:var(--paper-2);border:1px solid var(--line);border-radius:24px;padding:38px;box-shadow:var(--shadow-sm)} .cblock.dark{background:var(--ink);color:#fff} .cblock.dark .ctext{color:#E6EEFB} /* حالت ویرایش */ .ed-x{outline:2px dashed rgba(0,144,220,.55);outline-offset:3px;border-radius:4px;cursor:text;transition:.15s;min-width:12px;display:inline-block} .ed-x:hover{background:rgba(0,144,220,.12);outline-color:var(--blue,#0098E3)} .ed-x:focus{outline:2px solid #0098E3;background:rgba(0,144,220,.08)} .ed-bar{position:fixed;bottom:0;left:0;right:0;z-index:300;background:var(--ink);color:#fff; display:flex;align-items:center;gap:12px;padding:11px 18px;box-shadow:0 -8px 30px -14px rgba(0,0,0,.6);flex-wrap:wrap} .ed-bar .t{font-weight:800;font-size:.9rem} .ed-bar .h{font-size:.8rem;color:#C2CFE8;flex:1;min-width:150px} .ed-bar button,.ed-bar a{padding:9px 18px;border-radius:10px;font-family:inherit;font-weight:700;font-size:.85rem; border:none;cursor:pointer;text-decoration:none} .ed-save{background:var(--teal);color:#fff} .ed-save:hover{background:var(--teal-dark)} .ed-exit{background:rgba(255,255,255,.14);color:#fff} body.ed-on{padding-bottom:62px} .svc-card.blue .svc-tag{color:var(--amber-dark);background:var(--amber-soft)} /* discount strip */ .offer{background:linear-gradient(120deg,var(--amber-soft),#fff);border:1px solid var(--amber);border-radius:24px;padding:36px 40px;display:flex;align-items:center;gap:30px;flex-wrap:wrap;box-shadow:var(--shadow-sm)} .offer .big-off{font-size:3.2rem;font-weight:900;color:var(--amber-dark);line-height:1;flex-shrink:0} .offer .otxt h3{font-size:1.35rem;font-weight:800;margin-bottom:6px} .offer .otxt p{color:var(--muted)} .offer .btn{margin-inline-start:auto} .btn-amber{background:var(--amber-dark);color:#fff} .btn-amber:hover{filter:brightness(1.08);transform:translateY(-2px)} /* mbti promo banner */ .mbti-promo{position:relative;background:linear-gradient(140deg,var(--ink),var(--ink-2));border-radius:28px; padding:46px;display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center;overflow:hidden;box-shadow:var(--shadow)} .mbti-promo-txt h2{color:#fff;font-size:clamp(1.5rem,3vw,2.05rem);font-weight:900;line-height:1.55;margin-bottom:12px} .mbti-promo-txt p{color:#E6EEFB;font-size:.98rem;line-height:1.95;max-width:48ch;margin-bottom:24px} .mbti-promo-vis{position:relative;height:220px} .mtile{position:absolute;width:82px;height:82px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center; font-weight:900;font-size:1.4rem;color:#fff;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)} .mtile small{font-size:.8rem;font-weight:700;opacity:.75;margin-top:2px} .mtile.t1{top:4%;inset-inline-start:8%;background:linear-gradient(135deg,var(--teal),var(--teal-dark));transform:rotate(-8deg)} .mtile.t2{top:0;inset-inline-end:4%;background:linear-gradient(135deg,var(--amber),var(--amber-dark));transform:rotate(6deg)} .mtile.t3{bottom:6%;inset-inline-start:0;background:linear-gradient(135deg,#f2b84b,#d9932a);transform:rotate(5deg)} .mtile.t4{bottom:0;inset-inline-end:10%;background:linear-gradient(135deg,#8b7ff0,#5a48d6);transform:rotate(-6deg)} @media(max-width:900px){ .mbti-promo{grid-template-columns:1fr;padding:32px 24px;text-align:center} .mbti-promo-txt p{margin-inline:auto} .mbti-promo-vis{display:none} } /* footer */ footer{background:var(--ink);color:#E6EEFB;padding:54px 0 30px;margin-top:20px} .foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start} .foot-brand{display:flex;align-items:center;gap:12px;color:#fff;margin-bottom:14px} .foot-brand .logo{width:38px;height:38px} footer p{font-size:.88rem;max-width:38ch} .foot-links{display:flex;gap:44px;flex-wrap:wrap} .foot-col strong{display:block;color:#fff;font-size:.92rem;margin-bottom:12px} .foot-col a{display:block;font-size:.86rem;margin-bottom:8px;color:#C2CFE8;transition:.2s} .foot-col a:hover{color:#fff} /* ---------- متن توضیحی بالای پکیج‌ها ---------- */ .plans-intro{max-width:820px;margin:0 auto 44px;text-align:center} .plans-intro h2{font-size:1.5rem;font-weight:900;line-height:1.8;margin-bottom:16px;color:var(--ink)} .plans-intro p{font-size:.97rem;line-height:2.2;color:var(--muted);margin-bottom:14px} .plans-intro-2{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)} .plans-intro-2 h3{font-size:1.15rem;font-weight:800;margin-bottom:10px;color:var(--teal-d)} .plans-intro-2 p{margin-bottom:0} @media(max-width:600px){.plans-intro h2{font-size:1.18rem}.plans-intro{margin-bottom:32px}} /* ---------- بخش «چرا ما» و دعوت به اقدام در صفحهٔ طرح‌ها ---------- */ .why-block{margin-top:56px} .why-h{font-size:1.45rem;font-weight:900;text-align:center;margin-bottom:26px;color:var(--ink)} .why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} .why-item{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--line); border-radius:18px;padding:20px;box-shadow:0 12px 34px -26px rgba(21,39,62,.5);transition:.2s} .why-item:hover{transform:translateY(-3px);border-color:var(--teal)} .why-tick{flex-shrink:0;width:30px;height:30px;border-radius:10px;background:var(--teal-s);color:var(--teal-d); display:flex;align-items:center;justify-content:center} .why-tick svg{width:17px;height:17px} .why-item strong{display:block;font-size:.98rem;font-weight:800;margin-bottom:6px;color:var(--ink)} .why-item p{font-size:.87rem;line-height:2;color:var(--muted);margin:0} .plans-cta{margin-top:52px;text-align:center;background:linear-gradient(135deg,var(--teal-s),var(--blue-s)); border:1px solid var(--line);border-radius:22px;padding:38px 26px} .plans-cta h3{font-size:1.3rem;font-weight:900;margin-bottom:10px;color:var(--ink)} .plans-cta p{font-size:.94rem;line-height:2.1;color:var(--muted);max-width:600px;margin:0 auto 22px} @media(max-width:600px){.why-h{font-size:1.2rem}.plans-cta{padding:28px 18px}.plans-cta h3{font-size:1.1rem}} /* نماد اعتماد الکترونیکی — کارتِ روشن پشتِ لوگو، چون لوگوی نماد پس‌زمینهٔ سفید دارد و روی فوتر تیره بدون این کادر، لبه‌هایش زشت می‌افتد */ /* سمت چپِ فوتر. صفحه rtl است، پس روی محور اصلی flex-end همان سمتِ چپِ دیده‌شده است */ .foot-trust{display:flex;justify-content:flex-end;margin-top:34px} .foot-trust a{display:inline-flex;align-items:center;justify-content:center;background:#fff; border-radius:14px;padding:8px;line-height:0;transition:.2s;box-shadow:0 8px 24px -14px rgba(0,0,0,.5)} .foot-trust a:hover{transform:translateY(-2px)} /* اندازهٔ اصلی لوگوی نماد ۱۲۵×۱۳۶ است؛ همان را سقف می‌گذاریم تا روی دسکتاپ بدون تغییرِ کیفیت دیده شود و فقط روی صفحهٔ کوچک کوچک‌تر شود */ .foot-trust img{display:block;max-width:125px;width:100%;height:auto;border-radius:8px} .foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:26px;padding-top:20px;font-size:.8rem;color:#8695b2;text-align:center} /* ---------- wizard overlay ---------- */ .overlay{position:fixed;inset:0;z-index:100;background:rgba(14,30,61,.55);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:32px 18px;overflow-y:auto} .overlay.open{display:flex} .wizard{width:100%;max-width:640px;background:var(--paper-2);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);overflow:hidden;animation:pop .4s cubic-bezier(.2,.9,.25,1)} @keyframes pop{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}} .wiz-head{background:var(--ink);color:#fff;padding:22px 26px;display:flex;align-items:center;justify-content:space-between} .wiz-head .wt{display:flex;align-items:center;gap:12px;font-weight:800} .wiz-head .logo{width:36px;height:36px} .wiz-close{background:rgba(255,255,255,.12);color:#fff;width:34px;height:34px;border-radius:10px;font-size:1.1rem;display:grid;place-items:center;transition:.2s} .wiz-close:hover{background:rgba(255,255,255,.22)} .stepbar{display:flex;gap:6px;padding:26px 30px 0} .stepbar .sp{flex:1;height:5px;border-radius:100px;background:var(--line);transition:.4s} .stepbar .sp.done{background:var(--teal)} .stepbar .sp.now{background:var(--amber)} .wiz-body{padding:30px 30px 34px} .step{display:none;animation:fade .35s ease} .step.active{display:block} @keyframes fade{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}} .step h3{font-size:1.35rem;font-weight:800;margin-bottom:4px} .step .sub{color:var(--muted);font-size:.95rem;margin-bottom:24px} label.fld{display:block;margin-bottom:18px} label.fld .lb{display:block;font-size:.88rem;font-weight:600;margin-bottom:8px} .inp{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper-2);font-family:inherit;font-size:1rem;color:var(--ink);transition:.2s;text-align:right} .inp:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,96,63,.12)} .inp::placeholder{color:#8E9DB8} select.inp{cursor:pointer;background-image:none} .inp.err{border-color:var(--danger);box-shadow:0 0 0 4px rgba(192,73,47,.1)} .field-err{color:var(--danger);font-size:.8rem;margin-top:6px;display:none} .field-err.show{display:block} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .hesab-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} @media(max-width:640px){.hesab-grid{grid-template-columns:1fr}} /* فضای شخصی کاربر */ .hesab-shell{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start;padding:36px 0 64px} .hesab-side{text-align:center} .hesab-avatar{width:74px;height:74px;border-radius:50%;background:var(--teal);color:#fff; display:grid;place-items:center;font-weight:800;font-size:1.8rem;margin:0 auto 14px} .hesab-uname{font-weight:800;font-size:1.05rem;margin-bottom:4px} .hesab-uphone{font-size:.82rem;color:var(--muted);margin-bottom:22px;direction:ltr} .hesab-nav{display:flex;flex-direction:column;gap:6px;text-align:right} .hesab-nav a{display:block;padding:11px 14px;border-radius:12px;font-size:.9rem;font-weight:600; color:var(--ink);transition:.2s} .hesab-nav a:hover{background:var(--paper)} .hesab-nav a.on{background:var(--teal-soft);color:var(--teal-dark)} .hesab-exit{color:var(--danger)!important;margin-top:10px;border-top:1px solid var(--line);padding-top:16px!important} .hesab-main{min-width:0} .hesab-tile{display:block;text-decoration:none;transition:.2s;cursor:pointer} .hesab-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--teal)} .hesab-more{display:inline-block;margin-top:6px;font-size:.84rem;font-weight:700;color:var(--teal-dark)} @media(max-width:820px){ .hesab-shell{grid-template-columns:1fr} .hesab-nav{flex-direction:row;flex-wrap:wrap;justify-content:center} .hesab-nav a{flex:1;min-width:120px;text-align:center} } .wiz-foot{display:flex;gap:12px;margin-top:8px} .wiz-foot .btn{flex:1} .btn-back{background:transparent;color:var(--muted);border:1.5px solid var(--line);flex:0 0 auto!important;padding-inline:20px} .btn-back:hover{background:rgba(14,30,61,.04)} /* demo sms banner */ .sms-demo{background:var(--amber-soft);border:1px dashed var(--amber);border-radius:14px;padding:14px 16px;margin-bottom:20px;font-size:.88rem;display:none;align-items:center;gap:12px} .sms-demo.show{display:flex} .sms-demo .ic{font-size:1.3rem} .sms-demo b{color:var(--amber-dark);font-size:1.15rem;letter-spacing:2px} /* code inputs */ .code-row{display:flex;gap:10px;direction:ltr;justify-content:center;margin:8px 0 4px} .code-inp{width:54px;height:62px;text-align:center;font-size:1.6rem;font-weight:800;border:1.5px solid var(--line);border-radius:14px;background:var(--paper-2);transition:.2s} .code-inp:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,96,63,.12)} .resend{text-align:center;font-size:.85rem;color:var(--muted);margin-top:14px} .resend a{color:var(--teal);font-weight:700;cursor:pointer} /* group select */ .group-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px} .yesno-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px} .grp{padding:14px 8px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper-2);text-align:center;font-weight:700;font-size:.92rem;transition:.2s;color:var(--ink)} .grp:hover{border-color:var(--teal)} .grp.sel{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:var(--shadow-sm)} .grp small{display:block;font-weight:400;font-size:.72rem;opacity:.75;margin-top:2px} .sub-block{margin-bottom:24px} .sub-block .bh{font-size:.95rem;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:8px} .sub-block .bh .pill{font-size:.7rem;font-weight:600;background:var(--teal-soft);color:var(--teal-dark);padding:2px 9px;border-radius:100px} .sub-block .bhs{font-size:.8rem;color:var(--muted);margin-bottom:14px} .rn-name{font-weight:500} .wchip{display:inline-block;margin-inline-start:8px;font-size:.7rem;font-weight:700;color:var(--teal-dark);background:var(--teal-soft);padding:2px 9px;border-radius:100px;vertical-align:middle;white-space:nowrap} .mode-toggle{display:flex;flex-wrap:wrap;gap:6px;background:rgba(10,26,47,.05);padding:5px;border-radius:14px;margin-bottom:20px} .mode-toggle button{flex:1 1 30%;min-width:96px;padding:10px 6px;border-radius:10px;background:transparent;font-family:inherit;font-weight:700;font-size:.82rem;color:var(--muted);transition:.2s;cursor:pointer;border:none} .mode-toggle button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)} .row-inp{display:flex;align-items:center;gap:12px;margin-bottom:10px} .row-inp .rn{flex:1;font-size:.92rem} .row-inp .rn small{color:var(--muted);font-size:.72rem;margin-inline-start:6px} .mini-inp{width:96px;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;text-align:center;font-family:inherit;font-size:.95rem;font-weight:700;background:var(--paper-2);transition:.2s} .mini-inp:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,96,63,.12)} .mini-suffix{font-size:.78rem;color:var(--muted);width:34px} /* جعبهٔ زندهٔ معدل زیرِ فیلدهای نمرهٔ نهایی — معدل دیگر از کاربر پرسیده نمی‌شود، خودمان اعلامش می‌کنیم */ /* ===== کارتِ زندهٔ معدل/تراز — «قابِ نتیجه» زیرِ فیلدهای نمرهٔ نهایی ===== عمداً یک پنلِ تیرهٔ بزرگ با گیجِ SVG و عددِ درشتِ تراز است، نه یک نوارِ ساده: همین بخش برای ریلز/محتوای ویدیویی فیلم می‌شود، پس فاصلهٔ بیشتر از فیلدها، وسط‌چینی و حرکتِ پیوسته (چرخشِ مدار، درخششِ نوار، شمارشِ عدد) لازم داشت. */ .avg-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center; margin-top:34px;padding:28px 22px 26px;border-radius:28px; background:linear-gradient(150deg,#0A1A2F 0%,#132D4C 50%,#0B3A45 100%); box-shadow:0 26px 64px -30px rgba(10,26,47,.78), inset 0 1px 0 rgba(255,255,255,.08); transition:padding .3s ease} .avg-hero::before,.avg-hero::after{content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(8px)} .avg-hero::before{inset-inline-start:-16%;top:-52%;width:290px;height:290px; background:radial-gradient(circle,rgba(31,240,190,.24),transparent 68%)} .avg-hero::after{inset-inline-end:-14%;bottom:-52%;width:260px;height:260px; background:radial-gradient(circle,rgba(0,144,220,.24),transparent 68%)} .ah-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden} .ah-deco svg{position:absolute;inset-inline-end:-34px;top:-34px;width:158px;height:158px;opacity:.55; animation:ahSpin 30s linear infinite} .ah-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:#1FF0BE;opacity:.65; box-shadow:0 0 8px rgba(31,240,190,.9);animation:ahFloat 7s ease-in-out infinite} .ah-dot.d1{inset-inline-start:12%;top:26%;animation-delay:-1.2s} .ah-dot.d2{inset-inline-start:26%;bottom:18%;animation-delay:-3.4s;background:#4FC3F7;box-shadow:0 0 8px rgba(79,195,247,.9)} .ah-dot.d3{inset-inline-end:16%;bottom:30%;animation-delay:-5.1s;background:#A78BFA;box-shadow:0 0 8px rgba(167,139,250,.9)} .ah-empty{font-size:.84rem;line-height:2;color:rgba(255,255,255,.58);padding:10px 8px;max-width:330px;margin-inline:auto} .avg-hero.on .ah-empty{display:none} .avg-hero:not(.on) .ah-body{display:none} .avg-hero:not(.on){padding:20px 22px} /* گیجِ حلقه‌ای معدل */ .ah-gauge{position:relative;width:150px;height:150px;margin:2px auto 0} .ah-gauge svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible} /* شیارِ پس‌زمینهٔ حلقه عمداً خیلی کم‌رنگ است: قبلاً با ۱۳٪ سفید، بخشِ پرنشده مثلِ یک «حاشیهٔ خاکستریِ اضافی» دیده می‌شد و با کمانِ گرادیانت رقابت می‌کرد. */ .ah-trk{fill:none;stroke:rgba(255,255,255,.06);stroke-width:9} .ah-prg{fill:none;stroke:url(#ahGrad);stroke-width:9;stroke-linecap:round; stroke-dasharray:326.73;stroke-dashoffset:326.73; transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1); filter:drop-shadow(0 0 10px rgba(31,240,190,.45))} /* قرصِ ملایمِ داخلِ حلقه تا عدد روی یک سطح بنشیند، نه در فضای خالی */ .ah-gauge::before{content:'';position:absolute;inset:17px;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 50% 42%,rgba(31,240,190,.13),rgba(10,26,47,0) 72%)} .ah-gv{position:absolute;inset:0;display:grid;place-content:center;gap:1px} .ah-gv b{font-size:2.1rem;font-weight:900;color:#fff;line-height:1;letter-spacing:-.5px; text-shadow:0 2px 18px rgba(31,240,190,.35)} .ah-gv small{font-size:.66rem;font-weight:600;color:rgba(255,255,255,.5)} .ah-lbl{margin-top:10px;font-size:.8rem;font-weight:800;color:#7BF7D8;letter-spacing:.2px} /* جداکنندهٔ لوزی‌دار */ .ah-sep{display:block;position:relative;height:1px;max-width:220px;margin:20px auto 18px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)} .ah-sep::after{content:'';position:absolute;top:50%;inset-inline-start:50%;width:7px;height:7px; margin-top:-3.5px;margin-inline-start:-3.5px;transform:rotate(45deg);background:#1FF0BE; box-shadow:0 0 12px rgba(31,240,190,.85)} /* عددِ درشتِ تراز — ستارهٔ این کارت */ .ah-taraz{position:relative} .ah-taraz::before{content:'';position:absolute;top:20px;inset-inline-start:50%;transform:translateX(50%); width:260px;height:74px;pointer-events:none;filter:blur(17px); background:radial-gradient(ellipse,rgba(79,195,247,.42),transparent 70%); animation:ahGlow 3.6s ease-in-out infinite} .ah-tl{display:block;font-size:.78rem;font-weight:700;color:rgba(255,255,255,.66);letter-spacing:.3px} .ah-tv{display:block;font-size:4.3rem;font-weight:900;line-height:1.08;margin:2px 0 4px;letter-spacing:-2px; background:linear-gradient(100deg,#7BF7D8,#4FC3F7 52%,#A78BFA); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .ah-tv.pop{animation:ahPop .55s cubic-bezier(.22,1.4,.36,1)} .ah-bar{position:relative;height:9px;max-width:250px;margin:12px auto 0;border-radius:100px; background:rgba(255,255,255,.11);overflow:hidden} .ah-bar > i{display:block;height:100%;width:0;border-radius:100px;position:relative;overflow:hidden; background:linear-gradient(90deg,#00976D,#1FF0BE 46%,#4FC3F7); box-shadow:0 0 14px rgba(31,240,190,.45); transition:width 1.1s cubic-bezier(.22,1,.36,1)} .ah-bar > i::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-100%);animation:ahSweep 2.4s ease-in-out infinite} .ah-tn{display:block;font-size:.73rem;line-height:1.9;color:rgba(255,255,255,.52);margin-top:11px; max-width:320px;margin-inline:auto} @keyframes ahGlow{0%,100%{opacity:.72}50%{opacity:1}} @keyframes ahSpin{to{transform:rotate(360deg)}} @keyframes ahFloat{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-13px);opacity:.9}} @keyframes ahSweep{0%{transform:translateX(-100%)}58%,100%{transform:translateX(220%)}} @keyframes ahPop{0%{transform:scale(.86);opacity:.4}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}} @media(prefers-reduced-motion:reduce){ .ah-deco svg,.ah-dot,.ah-bar > i::after,.ah-taraz::before{animation:none} .ah-prg,.ah-bar > i{transition:none} .ah-tv.pop{animation:none} } @media(max-width:520px){ .avg-hero{margin-top:26px;padding:24px 14px 22px;border-radius:24px} .ah-gauge{width:132px;height:132px} .ah-gauge::before{inset:15px} .ah-gv b{font-size:1.85rem} .ah-tv{font-size:3.3rem;letter-spacing:-1.5px} } /* همان معدل، داخلِ کارنامهٔ نتیجه */ .avg-readout{margin-top:14px;padding:12px 16px;border-radius:14px;background:var(--paper-2);border:1.5px solid var(--line);text-align:center} .avg-readout .ar-l{display:block;font-size:.78rem;font-weight:700;color:var(--muted)} .avg-readout .ar-v{display:block;font-size:1.7rem;font-weight:900;color:var(--teal-dark);line-height:1.25} .avg-readout .ar-n{display:block;font-size:.72rem;color:var(--muted)} /* result — نتیجه همیشه به‌شکلِ «بازه» نشون داده می‌شه (نه یک عددِ تک)، همون‌جا زیرِ فرم ظاهر می‌شه */ .result-hero{text-align:center;padding:6px 0 10px} /* نتیجه: کانتینری که زیرِ دکمهٔ محاسبه ظاهر می‌شه — بدون جابه‌جاییِ صفحه، فقط فید+بالاآمدنِ نرم */ .tamin-result{display:none;opacity:0;transform:translateY(20px); transition:opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1); margin-top:26px;padding-top:26px;border-top:1px dashed var(--line)} .tamin-result.show{opacity:1;transform:none} .tr-sep{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:18px} .tr-sep i{flex:1;max-width:64px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--teal));display:block} .tr-sep i:last-child{background:linear-gradient(270deg,transparent,var(--amber))} .tr-sep span{font-size:.86rem;font-weight:800;color:var(--ink);white-space:nowrap} /* گِیج تزئینی — فقط موقعیتِ تقریبی رو با پرشدنِ کمان نشون می‌ده، عددی داخلش نیست (عددها پایین‌تر، به‌شکلِ بازه) */ .gauge{position:relative;width:190px;height:114px;margin:4px auto 0} .gauge svg{width:100%;height:100%;overflow:visible} .gauge .track{fill:none;stroke:rgba(14,30,61,.1);stroke-width:14;stroke-linecap:round} .gauge .prog{fill:none;stroke:url(#gg);stroke-width:14;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)} .gauge .readout{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px} .gauge .readout .ric{font-size:1.7rem;line-height:1;animation:gicPulse 2.6s ease-in-out infinite} @keyframes gicPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.16);opacity:1}} /* نقطهٔ متحرک روی کمانِ گیج — می‌ره و برمی‌گرده، تا اون فضای خالیِ دورِ آیکون بی‌حرکت نمونه */ .g-comet{fill:#fff;stroke:var(--teal);stroke-width:2;filter:drop-shadow(0 0 4px rgba(0,151,109,.65))} /* بازهٔ رتبه — عددِ اصلیِ نتیجه: همیشه «از عددی تا عددی»، با تایپوگرافیِ گرادیانی و کارتِ شیشه‌ای */ .range-hero{position:relative;max-width:420px;margin:2px auto 0;padding:20px 22px 18px;border-radius:22px; background:linear-gradient(175deg,#fff,var(--teal-soft) 140%) padding-box, linear-gradient(120deg,var(--teal),var(--amber) 55%,#1FF0BE) border-box; border:1.5px solid transparent;box-shadow:var(--shadow-sm)} .rh-lbl{font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:10px} .rh-nums{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap} .rh-n{font-size:1.9rem;font-weight:900;line-height:1;background:var(--grad-brand-r);-webkit-background-clip:text;background-clip:text;color:transparent} .rh-to{flex:0 0 auto;min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center; font-size:.76rem;font-weight:800;color:#fff;background:var(--grad-brand);padding:6px 14px;border-radius:100px; box-shadow:var(--glow-teal);animation:rhPulse 2.4s ease-in-out infinite} @keyframes rhPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}} .rh-note{font-size:.84rem;color:var(--muted);margin-top:12px} .rh-note b{color:var(--teal-dark)} /* رتبه در سهمیه — همون منطق، در قالبِ یه ردیفِ فشرده‌تر زیرِ کارتِ اصلی */ .range-chip{max-width:420px;margin:12px auto 0;display:flex;align-items:center;justify-content:space-between;gap:10px; background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:9px 8px 9px 18px} .rc-lbl{font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap} .rc-nums{display:flex;align-items:center;gap:6px;font-size:.92rem;font-weight:800;color:var(--teal-dark); background:var(--paper-2);border-radius:100px;padding:6px 14px;white-space:nowrap} .rc-nums i{font-style:normal;font-size:.72rem;color:var(--muted);font-weight:600} /* اگر دادهٔ سهمیهٔ منطقه موجود نباشد، رتبهٔ کشوری تنها عددِ نتیجه است و بزرگ‌تر نشان داده می‌شود */ .range-chip.solo{flex-direction:column;gap:8px;border-radius:22px;padding:18px 20px;background:var(--paper-2)} .range-chip.solo .rc-lbl{font-size:.82rem} .range-chip.solo .rc-nums{font-size:1.5rem;background:transparent;padding:0} .range-chip.solo .rc-nums i{font-size:.8rem} /* سه کارتِ تراز — هرکدوم هم حالا یه بازه‌ست، نه یک عددِ تک */ .taraz-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 4px} .tcard{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:18px 8px 14px; text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;overflow:hidden} .tcard::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--grad-brand-r)} .tcard .tl{font-size:.76rem;color:var(--muted)} .tc-range{display:flex;align-items:baseline;justify-content:center;gap:4px;flex-wrap:wrap} .tc-range b{font-size:1.16rem;font-weight:900;color:var(--ink);line-height:1.3} .tc-range i{font-style:normal;color:var(--muted);font-size:.8rem} .tcard small{font-size:.66rem;color:var(--muted)} .tcard.total{background:linear-gradient(150deg,var(--teal-soft),#fff);border-color:var(--teal)} .tcard.total .tc-range b{color:var(--teal-dark)} /* پالسِ کوتاهِ «عوض شد» — هروقت با درصدهای جدید دوباره محاسبه می‌شه، بدونِ اسکرول یا پرش */ @keyframes resultFlash{ 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,151,109,0)} 30%{transform:scale(1.035);box-shadow:0 0 0 8px rgba(0,151,109,.16)} 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,151,109,0)} } .range-hero.flash,.range-chip.flash,.tcard.flash{animation:resultFlash .5s cubic-bezier(.2,.8,.2,1)} .disclaimer{background:rgba(14,30,61,.04);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.8rem;color:var(--muted);margin:18px 0} @media(prefers-reduced-motion:reduce){ .gauge .readout .ric{animation:none} .rh-to{animation:none} .g-comet{animation:none;display:none} .range-hero.flash,.range-chip.flash,.tcard.flash{animation:none} .tamin-result{transform:none;transition:opacity .3s} } .offer-card{background:linear-gradient(125deg,var(--amber-soft),#fff);border:1.5px solid var(--amber);border-radius:18px;padding:22px;margin:18px 0;text-align:center} .offer-card .oc-off{font-size:2.4rem;font-weight:900;color:var(--amber-dark);line-height:1} .offer-card h4{font-size:1.05rem;font-weight:800;margin:6px 0 4px} .offer-card p{font-size:.86rem;color:var(--muted)} .track-box{background:var(--ink);color:#fff;border-radius:18px;padding:22px;text-align:center;margin-top:18px} .track-box .tl{font-size:.82rem;color:#D5E0F4;margin-bottom:8px} .track-code{font-size:1.7rem;font-weight:900;letter-spacing:4px;color:var(--amber);direction:ltr;margin-bottom:6px} .track-box .th{font-size:.78rem;color:#BAC7E2} .track-actions{display:flex;gap:10px;margin-top:16px} .track-actions .btn{flex:1;font-size:.92rem;padding:11px} .btn-line{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)} .btn-line:hover{background:rgba(255,255,255,.16)} /* mbti test */ .mbti-intro{text-align:center;padding:10px 4px 4px} .mbti-intro-ic{font-size:2.6rem;margin-bottom:10px} .mbti-intro h3{font-size:1.25rem;font-weight:800;margin-bottom:8px} .qbar{height:6px;background:var(--line);border-radius:100px;margin-bottom:22px;overflow:hidden} .qbar-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--amber));border-radius:100px;width:0;transition:width .35s ease} .q-count{font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:8px} .q-text{font-size:1.15rem;font-weight:800;line-height:1.7;margin-bottom:20px} .q-opts{display:flex;flex-direction:column;gap:12px;margin-bottom:8px} .q-opt{text-align:right;padding:18px 20px;border-radius:16px;border:1.5px solid var(--line);background:var(--paper); font-family:inherit;font-size:.96rem;font-weight:600;color:var(--ink);line-height:1.8;cursor:pointer;transition:.2s} @media (hover: hover) { .q-opt:hover{border-color:var(--teal);background:var(--teal-soft);transform:translateY(-2px)} } .q-opt:active{border-color:var(--teal);background:var(--teal-soft)} .q-opts3{display:flex;gap:10px;margin-bottom:8px} .q-opt3{flex:1;text-align:center;padding:18px 8px;border-radius:16px;border:1.5px solid var(--line);background:var(--paper); font-family:inherit;font-size:.96rem;font-weight:700;color:var(--ink);cursor:pointer;transition:.2s} @media (hover: hover) { .q-opt3.yes:hover{border-color:var(--teal);background:var(--teal-soft);transform:translateY(-2px)} .q-opt3.no:hover{border-color:#e0755a;background:#fdeee7;transform:translateY(-2px)} .q-opt3.dk:hover{border-color:var(--line);background:var(--paper-2);transform:translateY(-2px)} } .q-opt3.yes:active{border-color:var(--teal);background:var(--teal-soft)} .q-opt3.no:active{border-color:#e0755a;background:#fdeee7} .q-opt3.dk:active{background:var(--paper-2)} @media(max-width:480px){.q-opts3{flex-direction:column}} .type-badge{text-align:center;margin-bottom:8px} .type-letters{font-size:2.3rem;font-weight:900;letter-spacing:5px;color:var(--teal-dark);direction:ltr} .type-name{font-size:1.1rem;font-weight:800;color:var(--ink);margin-top:4px} .func-stack{text-align:center;font-size:.8rem;color:var(--muted);margin-top:8px} .func-stack b{color:var(--teal-dark)} .trait-bars{display:flex;flex-direction:column;gap:14px;margin:22px 0 8px} .trait-lbl{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:6px} .trait-lbl b{color:var(--ink)} .trait-track{height:8px;border-radius:100px;background:var(--line);overflow:hidden} .trait-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--teal),var(--amber));width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)} .major-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px} .major-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px} .major-card h5{font-size:.94rem;font-weight:800;color:var(--teal-dark);margin-bottom:6px} .major-card p{font-size:.82rem;color:var(--muted);line-height:1.8;margin:0} .major-card-link{display:flex;flex-direction:column;transition:.2s} .major-card-link:hover{border-color:var(--teal);background:var(--teal-soft);transform:translateY(-2px)} .major-card-link p{flex:1} .major-card-more{display:block;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:.78rem;font-weight:700;color:var(--teal-dark)} .roghabat-box{margin-top:14px;background:var(--amber-soft);border:1px solid rgba(21,131,188,.2);border-radius:16px;padding:16px 18px} .roghabat-box h5{font-size:.9rem;font-weight:800;color:var(--amber-dark);margin-bottom:6px} .roghabat-box p{font-size:.86rem;color:var(--ink);line-height:1.85;margin:0 0 8px} .roghabat-note{display:block;font-size:.74rem;color:var(--muted)} .tier-h{font-size:.92rem;font-weight:800;margin:22px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--line);display:flex;align-items:center;gap:8px} .tier-h small{font-weight:600;color:var(--muted);font-size:.76rem} .func-code{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:18px} .func-chip{background:var(--teal-soft);border-radius:16px;padding:10px 16px;text-align:center} .func-chip b{display:block;font-size:1.25rem;font-weight:900;color:var(--teal-dark)} .func-chip span{display:block;font-size:.74rem;color:var(--muted);margin-top:2px} .func-chip.tag{min-width:0;padding:9px 15px;background:var(--teal-soft)} .func-chip.tag b{font-size:.86rem;font-weight:700;color:var(--teal-dark)} .func-chip.tag.warn{background:var(--amber-soft)} .func-chip.tag.warn b{color:var(--amber-dark)} .mbti-cta{text-align:center;background:var(--teal-soft);border-radius:18px;padding:22px 20px} .mbti-cta p{font-weight:700;margin-bottom:12px;color:var(--teal-dark)} @media(max-width:560px){.major-grid{grid-template-columns:1fr}} .fab{position:fixed;left:24px;z-index:120;width:58px;height:58px; bottom:calc(24px + env(safe-area-inset-bottom, 0px))} .fab-menu{position:absolute;bottom:calc(100% + 12px);left:0; display:flex;flex-direction:column;align-items:flex-start;gap:10px; opacity:0;transform:translateY(12px);pointer-events:none;transition:.28s cubic-bezier(.2,.8,.2,1)} .fab.open .fab-menu{opacity:1;transform:none;pointer-events:auto} .fab-item{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);padding:7px 14px 7px 8px;border-radius:100px;box-shadow:var(--shadow-sm);font-size:.85rem;font-weight:700;color:var(--ink);transition:.2s;white-space:nowrap} .fab-item:hover{transform:translateY(-2px)} .fab-item i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#fff} .fab-item i svg{width:17px;height:17px} .fab-item.tg i{background:#229ED9} .fab-item.ch i{background:var(--teal)} .fab-item.ig i{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)} .fab-btn{width:58px;height:58px;border-radius:50%;background:var(--teal);color:#fff;box-shadow:0 12px 28px -8px rgba(0,151,109,.85);display:grid;place-items:center;transition:.25s;position:relative} .fab-btn:hover{transform:scale(1.05)} .fab-btn svg{width:26px;height:26px} .fab.open .fab-btn{background:var(--ink)} .fab-btn .ic-close{display:none} .fab.open .fab-btn .ic-chat{display:none} .fab.open .fab-btn .ic-close{display:block} .fab-btn::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(0,151,109,.55);animation:fabpulse 2.6s infinite} /* این دکمه ثابت (fixed) و همیشه رو صفحه‌ست، پس هزینهٔ انیمیشنش هیچ‌وقت متوقف نمی‌شه — برای همین از box-shadow (رنگ‌آمیزیِ هر فریم) به scale+opacity (فقط لایهٔ گرافیکی) تغییر کرد */ @keyframes fabpulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.7);opacity:0}100%{transform:scale(1);opacity:0}} .fab.open .fab-btn::after{animation:none} .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(30px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:100px;font-size:.9rem;font-weight:600;box-shadow:var(--shadow);opacity:0;transition:.35s;z-index:200;pointer-events:none} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} @media(max-width:860px){ .hero-inner,.about-grid{grid-template-columns:1fr;gap:36px} .why-grid{grid-template-columns:1fr} .nav-links{display:none;position:absolute;top:72px;right:0;left:0;flex-direction:column;background:var(--paper-2);padding:12px;gap:4px;box-shadow:var(--shadow);border-bottom:1px solid var(--line)} .nav-links a{width:100%} .nav.nav-open .nav-links{display:flex} .nav-mega{width:100%} .nav-mega-panel{display:none!important} .burger{display:block} .rank-card{max-width:420px} .offer{flex-direction:column;text-align:center} .offer .btn{margin:0} .group-grid{grid-template-columns:repeat(3,1fr);gap:7px} .grp{padding:12px 4px;font-size:.85rem} } @media(max-width:480px){ .wrap{padding:0 18px} .hero{padding:64px 0 72px} .overlay{padding:14px 10px} .wiz-body{padding:22px 18px 26px} .taraz-cards{grid-template-columns:1fr} .code-inp{width:48px;height:56px;font-size:1.4rem} .fab{left:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px))} .offer{padding:26px 22px} .range-hero{padding:16px 14px 14px} .rh-n{font-size:1.55rem} .rh-nums{gap:8px} .range-chip{flex-direction:column;border-radius:18px;padding:12px 14px;text-align:center} .rc-nums{align-self:center} } /* ================================================================ ریدیزاین بصری نسخهٔ ۲ — لایهٔ جدید روی سیستم قبلی ================================================================ */ @keyframes v2spin{to{transform:rotate(360deg)}} @keyframes v2spinrev{to{transform:rotate(-360deg)}} @keyframes v2floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes v2tfloat{0%,100%{transform:rotate(var(--rot,0deg)) translateY(0)}50%{transform:rotate(var(--rot,0deg)) translateY(-11px)}} @keyframes v2dashmove{to{stroke-dashoffset:-440}} @keyframes v2draw{to{stroke-dashoffset:0}} @keyframes v2twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}} /* box-shadow روی هر فریم گرون است — با پالسِ scale+opacity جایگزین شد (فقط لایهٔ گرافیکی، نه رنگ‌آمیزیِ صفحه) */ @keyframes v2corepulse{0%,100%{transform:scale(1);opacity:1}60%{transform:scale(1.12);opacity:.75}} @keyframes v2livedot{0%,100%{transform:scale(1);opacity:1}70%{transform:scale(2.2);opacity:0}} @keyframes v2mq{to{transform:translateX(-50%)}} /* --- دکمه‌ها --- */ .btn-primary{background:linear-gradient(135deg,#00976D,#0090DC);box-shadow:var(--glow-teal)} .btn-primary:hover{background:linear-gradient(135deg,#0F8A68,#0C86AB);transform:translateY(-2px)} .btn-xl{padding:16px 30px;font-size:1.05rem;border-radius:15px} /* --- ناوبری --- */ header.nav{background:rgba(222,232,244,.8);backdrop-filter:blur(16px) saturate(1.4)} .nav-cta{background:var(--grad-brand)!important;box-shadow:var(--glow-teal)} .nav-cta:hover{filter:brightness(1.08);transform:translateY(-1px)} .nav-links > a:not(.nav-cta):not(.nav-auth){position:relative} .nav-links > a:not(.nav-cta):not(.nav-auth)::after{content:"";position:absolute;bottom:3px;inset-inline:11px;height:2px; border-radius:2px;background:var(--grad-brand-r);transform:scaleX(0);transition:transform .25s;transform-origin:center} .nav-links > a:not(.nav-cta):not(.nav-auth):hover::after{transform:scaleX(1)} /* --- موج بین بخش‌ها --- */ .sec-wave{display:block;width:100%;height:64px} /* --- هیرو v2 --- */ .hero2{padding:96px 0 0;isolation:isolate} .hero2 .hero-inner{z-index:3} .hero-mesh{position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(640px 420px at 82% 8%,rgba(139,127,240,.22),transparent 62%), radial-gradient(560px 440px at 12% 88%,rgba(0,151,109,.2),transparent 62%)} .hero-dots{position:absolute;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.3px); background-size:28px 28px; -webkit-mask-image:radial-gradient(640px 460px at 68% 34%,#000 30%,transparent 75%); mask-image:radial-gradient(640px 460px at 68% 34%,#000 30%,transparent 75%)} .h-orbit{position:absolute;pointer-events:none;z-index:1} .h-orbit.ho1{width:640px;height:640px;top:-210px;left:-190px;animation:v2spin 70s linear infinite} .h-orbit.ho2{width:400px;height:400px;bottom:-150px;right:-110px;animation:v2spinrev 50s linear infinite} .h-shape{position:absolute;z-index:1;pointer-events:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))} .h-shape svg{width:100%;height:100%} .h-shape.sh1{width:46px;height:46px;top:11%;left:45%;animation:v2floaty 6s ease-in-out infinite} .h-shape.sh2{width:30px;height:30px;top:16%;left:7%;animation:v2floaty 7s 1.2s ease-in-out infinite} .h-shape.sh3{width:36px;height:36px;bottom:20%;left:39%;animation:v2floaty 8s .6s ease-in-out infinite} .hero2 h1{font-size:clamp(2.1rem,4.8vw,3.4rem)} .hero2 h1 .hl::after{display:none} .hero2 h1 .hl{white-space:nowrap} .scribble{position:absolute;inset-inline:-2%;bottom:-10px;width:104%;height:13px;overflow:visible;pointer-events:none} .scribble path{stroke-dasharray:230;stroke-dashoffset:230;animation:v2draw 1s .8s cubic-bezier(.2,.8,.2,1) forwards;opacity:.85} .hero2 .hero-trust{align-items:center;gap:20px} .hero2 .hero-trust .t strong{font-size:1.7rem;background:linear-gradient(120deg,#fff,#5FC8FF); -webkit-background-clip:text;background-clip:text;color:transparent} .t-sep{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(255,255,255,.25),transparent)} .hero2 .rank-card{border-radius:28px;border:1px solid rgba(255,255,255,.16);position:relative} .hero2 .rank-card::before{content:"";position:absolute;top:0;inset-inline:24px;height:2px;border-radius:2px; background:var(--grad-brand-r);opacity:.85} .rc-badge{display:inline-flex;align-items:center;gap:7px} .live-dot{width:7px;height:7px;border-radius:50%;background:#1FF0BE;animation:v2livedot 2.2s infinite} .rc-float{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:7px; background:rgba(10,26,47,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2); color:#fff;font-size:.78rem;font-weight:700;padding:9px 15px;border-radius:100px; box-shadow:0 14px 34px -14px rgba(0,0,0,.65);white-space:nowrap} .rc-float i{font-style:normal;font-size:.95rem} .rc-float.rcf1{top:-16px;inset-inline-end:-8px;animation:v2floaty 5.5s ease-in-out infinite} .rc-float.rcf2{top:38%;inset-inline-start:-30px;animation:v2floaty 6.5s 1s ease-in-out infinite} .rc-float.rcf3{bottom:-14px;inset-inline-end:12%;animation:v2floaty 7s .5s ease-in-out infinite} .rc-spark{margin-top:20px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.16);text-align:center} .rc-spark svg{width:100%;height:44px;display:block;margin-bottom:8px} .rc-spark span{font-size:.74rem;color:#C2CFE8} .spark-line{stroke-dasharray:340;stroke-dashoffset:340;animation:v2draw 1.6s 1.1s cubic-bezier(.2,.8,.2,1) forwards} .spark-dot{opacity:0;animation:v2twinkle 2.4s 2.6s ease-in-out infinite} .hero-marquee{position:relative;z-index:2;margin-top:72px;padding:13px 0;overflow:hidden; background:rgba(255,255,255,.045);border-top:1px solid rgba(255,255,255,.09)} .hero-marquee:hover .mq-track{animation-play-state:paused} .mq-track{display:flex;gap:30px;width:max-content;direction:ltr;animation:v2mq 32s linear infinite;will-change:transform} .mq-part{display:flex;align-items:center;gap:30px;direction:rtl} .mq-part span{font-size:.9rem;font-weight:600;color:#E6EEFB;white-space:nowrap} .mq-part b{color:#1FF0BE;font-size:.72rem} .hero-wave{position:relative;z-index:2;color:var(--paper);margin-bottom:-1px} /* --- درباره v2 --- */ .about2{background:transparent;border:none} .about2 .about-grid{gap:70px} .about-vis{position:relative;z-index:1;padding:14px 14px 14px 0} .about-vis::before{content:"";position:absolute;inset:44px -14px -14px 44px;border-radius:32px;z-index:0; background:linear-gradient(135deg,rgba(0,151,109,.3),rgba(0,144,220,.3))} .about-blob{position:absolute;top:-8%;inset-inline-start:-10%;width:70%;height:70%;border-radius:50%;z-index:0; background:var(--grad-brand);opacity:.14;filter:blur(46px)} .about-ring{position:absolute;top:-26px;inset-inline-end:-18px;width:150px;height:150px;z-index:2; animation:v2spin 40s linear infinite} .about2 .portrait{position:relative;z-index:1;border-radius:30px} .ab-chip{position:absolute;z-index:3;background:var(--paper-2);border:1px solid var(--line);border-radius:18px; padding:12px 18px;box-shadow:var(--shadow);text-align:center} .ab-chip b{display:block;font-size:1.2rem;font-weight:900;background:var(--grad-brand); -webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.4} .ab-chip span{font-size:.72rem;color:var(--muted)} .ab-chip.abc1{bottom:34px;inset-inline-start:-22px;animation:v2floaty 6s ease-in-out infinite} .ab-chip.abc2{top:52px;inset-inline-end:-18px;animation:v2floaty 7s 1.1s ease-in-out infinite} .h3-swash{display:block;width:190px;height:10px;margin-top:5px;overflow:visible;pointer-events:none} .h3-swash path{stroke-dasharray:180;stroke-dashoffset:180;animation:v2draw .9s .4s cubic-bezier(.2,.8,.2,1) forwards} /* --- سه قدم v2 --- */ .steps2 .why-text{text-align:center;max-width:660px;margin:0 auto 78px} .steps2 .why-text p{margin-inline:auto} .steps-flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start} .steps-path{position:absolute;top:-58px;inset-inline:0;width:100%;height:60px;z-index:0;pointer-events:none;overflow:visible} .sp-line{animation:v2dashmove 9s linear infinite} .sp-node{fill:#1FF0BE;animation:spnode 2.4s ease-in-out infinite} .sp-node:nth-of-type(2){animation-delay:.3s} .sp-node:nth-of-type(3){animation-delay:.6s} /* filter:drop-shadow روی هر فریم گرون است (رنگ‌آمیزی SVG دوباره)، مخصوصاً روی گوشی — با پالسِ شفافیت جایگزین شد */ @keyframes spnode{0%,100%{opacity:.7}50%{opacity:1}} .steps-flow .step-card{border-radius:24px;padding:30px 26px;overflow:visible} .steps-flow .step-card.st2{margin-top:58px} .steps-flow .step-card.st3{margin-top:20px} .g-num{position:absolute;top:-38px;inset-inline-end:16px;font-size:5.6rem;font-weight:900;line-height:1;z-index:0; pointer-events:none;color:rgba(10,26,47,.05);-webkit-text-stroke:2px rgba(0,151,109,.22)} .steps-flow .step-ic{width:50px;height:50px;border-radius:16px;background:var(--grad-brand);color:#fff;box-shadow:var(--glow-teal)} .steps-flow .step-ic svg{width:25px;height:25px} .steps-flow .step-card h4{color:var(--ink);font-size:1.08rem} .steps-cta{text-align:center;margin-top:48px} /* --- بلیت تخفیف v2 --- */ .offer2{position:relative;background:linear-gradient(120deg,#fff,var(--amber-soft)); border:1.5px solid rgba(0,144,220,.4);border-radius:26px;padding:34px 40px;gap:30px;overflow:visible} .offer2::before,.offer2::after{content:"";position:absolute;top:50%;width:30px;height:30px;border-radius:50%; background:var(--paper);border:1.5px solid rgba(0,144,220,.4);transform:translateY(-50%)} .offer2::before{inset-inline-start:-16px} .offer2::after{inset-inline-end:-16px} .of-num{text-align:center;flex-shrink:0} .offer2 .big-off{font-size:4rem;background:linear-gradient(160deg,var(--amber),var(--amber-dark)); -webkit-background-clip:text;background-clip:text;color:transparent} .of-lbl{display:inline-block;margin-top:6px;font-size:.76rem;font-weight:800;color:var(--amber-dark); background:rgba(0,144,220,.12);border:1px solid rgba(0,144,220,.3);padding:4px 13px;border-radius:100px} .of-sep{width:0;align-self:stretch;border-inline-start:2px dashed rgba(0,144,220,.45)} @media(max-width:860px){ .offer2{overflow:hidden} .offer2::before,.offer2::after{display:none} .of-sep{width:100%;border-inline-start:none;border-top:2px dashed rgba(0,144,220,.45)} } /* --- خدمات بنتو v2 --- */ .svc-grid.bento{grid-template-columns:repeat(4,1fr)} .svc-grid.bento .svc-card{position:relative;border-radius:24px} .svc-grid.bento .svc-card::before{content:"";position:absolute;top:0;inset-inline:22px;height:3px;border-radius:3px; background:var(--grad-brand-r);opacity:0;transition:.3s} .svc-grid.bento .svc-card:hover::before{opacity:1} .sv-feat{grid-column:1/-1;overflow:hidden;border:none;position:relative; background:linear-gradient(120deg,var(--ink),var(--ink-2) 70%);color:#fff; display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:26px 36px} .sv-feat .sv-glow{position:absolute;top:-60%;inset-inline-end:8%;width:320px;height:320px;border-radius:50%; background:radial-gradient(circle,rgba(63,214,192,.26),transparent 70%);pointer-events:none;filter:blur(2px); animation:v2floaty 8s ease-in-out infinite} .sv-feat .sv-txt{min-width:0;max-width:620px} .sv-feat .sv-head{display:flex;align-items:center;gap:14px;margin-bottom:8px} .sv-feat h4{color:#fff;font-size:1.25rem;margin:0} .sv-feat p{color:#E6EEFB;font-size:.92rem;line-height:1.85;margin-bottom:10px} .sv-feat .svc-ic{width:50px;height:50px;border-radius:15px;background:var(--grad-brand);color:#fff; box-shadow:var(--glow-teal);margin-bottom:0;flex-shrink:0} .sv-feat .svc-ic svg{width:24px;height:24px} .sv-feat .svc-tag{background:rgba(255,255,255,.12);color:#7BF7D8;border:1px solid rgba(255,255,255,.14);margin-top:0} /* دو نشانِ کنارِ هم روی کارتِ «تخمین رتبه» (رایگان + تخفیفِ انتخاب رشته) */ .svc-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px} .svc-tags .svc-tag{margin-top:0;align-self:auto} .sv-feat .svc-tags{margin-top:0} .sv-feat .svc-tag-off{background:var(--grad-brand);color:#fff;border-color:transparent;font-weight:800} .sv-feat .sv-orbit{position:relative;width:104px;height:104px;flex-shrink:0;display:grid;place-items:center} .sv-feat .sv-orbit svg{position:absolute;inset:0;width:100%;height:100%;animation:v2spin 26s linear infinite} .sv-feat .sv-orbit .sv-core{position:relative;width:50px;height:50px;border-radius:50%; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px); display:grid;place-items:center;font-size:1.3rem;animation:v2corepulse 3s infinite} .sv-rings{display:none} .sv-blue .svc-ic{background:var(--amber-soft);color:var(--amber-dark)} .sv-blue .svc-tag{color:var(--amber-dark);background:var(--amber-soft)} .sv-teal .svc-ic{background:var(--teal-soft);color:var(--teal-dark)} .sv-gold .svc-ic{background:#FBEFD8;color:var(--gold-dark)} .sv-gold .svc-tag{color:var(--gold-dark);background:#FBEFD8} .sv-violet .svc-ic{background:#EAE7FC;color:var(--violet-dark)} .sv-violet .svc-tag{color:var(--violet-dark);background:#EAE7FC} @media(max-width:1000px){.svc-grid.bento{grid-template-columns:1fr 1fr}} @media(max-width:700px){ .sv-feat{grid-template-columns:1fr;text-align:center;padding:28px 24px} .sv-feat .sv-head{flex-direction:column;margin-bottom:12px} .sv-feat .sv-txt{max-width:none} .sv-feat .sv-orbit{margin-inline:auto;order:-1;margin-bottom:6px} } @media(max-width:620px){.svc-grid.bento{grid-template-columns:1fr}} /* --- بنر تست شخصیت v2 --- */ .mbti2{isolation:isolate} .mp-glow{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0} .mp-glow.g1{width:340px;height:340px;top:-120px;inset-inline-end:-80px;background:rgba(0,144,220,.3)} .mp-glow.g2{width:300px;height:300px;bottom:-130px;inset-inline-start:-70px;background:rgba(0,151,109,.28)} .mp-star{position:absolute;color:#1FF0BE;pointer-events:none;z-index:1;animation:v2twinkle 3s ease-in-out infinite} .mp-star.s1{top:14%;inset-inline-start:38%;font-size:1.1rem} .mp-star.s2{bottom:18%;inset-inline-start:52%;font-size:.8rem;animation-delay:1s;color:#5FC8FF} .mp-star.s3{top:24%;inset-inline-end:6%;font-size:.9rem;animation-delay:1.8s;color:#F2B84B} .mbti2 .mbti-promo-txt,.mbti2 .mbti-promo-vis{position:relative;z-index:2} .mp-facts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px} .mp-facts span{font-size:.8rem;font-weight:700;color:#AAF5E2;background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);padding:7px 14px;border-radius:100px} .mbti2 .mbti-promo-vis{height:280px} .mp-orbit{position:absolute;inset:0;margin:auto;width:280px;height:280px;animation:v2spin 46s linear infinite} .mp-core{position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px); display:grid;place-items:center;font-size:2.1rem;animation:v2corepulse 3.2s infinite} .mbti2 .mtile{animation:v2tfloat 6s ease-in-out infinite} .mbti2 .mtile.t1{--rot:-8deg;transform:none;animation-delay:0s} .mbti2 .mtile.t2{--rot:6deg;transform:none;animation-delay:1.2s} .mbti2 .mtile.t3{--rot:5deg;transform:none;animation-delay:.6s} .mbti2 .mtile.t4{--rot:-6deg;transform:none;animation-delay:1.8s} @media(max-width:900px){.mp-star.s1,.mp-star.s2{display:none}} /* --- شمارش معکوس v2 --- */ .cd-wrap{position:relative;overflow:hidden} .cd-wrap::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(420px 260px at 85% 0%,rgba(0,144,220,.22),transparent 65%), radial-gradient(380px 240px at 10% 100%,rgba(0,151,109,.2),transparent 65%)} .cd-cell{position:relative;backdrop-filter:blur(6px);border-radius:18px} .cd-cell b{background:linear-gradient(180deg,#fff,#5FC8FF);-webkit-background-clip:text;background-clip:text;color:transparent} /* --- طرح‌ها / نظرات / سؤالات / مقالات v2 --- */ /* قبلاً این افکت با سایهٔ درحال‌تغییررنگ، بی‌وقفه انیمیت می‌شد (هزینهٔ رنگ‌آمیزیِ هر فریم) — یک درخشش رنگی ثابت هم به‌همون اندازه جذابه، بدون هزینهٔ مداوم */ .plan.hot{border-color:transparent;box-shadow:0 0 0 2px rgba(0,151,109,.75), 0 18px 50px -22px rgba(0,151,109,.6)} .tst{position:relative} .tst::before{content:"❝";position:absolute;top:12px;inset-inline-start:18px;font-size:1.7rem;line-height:1; color:rgba(0,151,109,.3);pointer-events:none} .tst .av{border:3px solid transparent;background:linear-gradient(145deg,var(--teal-soft),#fff) padding-box,var(--grad-brand) border-box} .faq-list{counter-reset:fq} .faq-item{counter-increment:fq;border-radius:18px} .faq-item summary::before{content:counter(fq,persian);width:30px;height:30px;border-radius:10px;flex-shrink:0; background:var(--teal-soft);color:var(--teal-dark);font-size:.85rem;font-weight:800; display:grid;place-items:center} .faq-item summary::after{content:"+";margin-inline-start:auto;color:var(--teal);font-weight:900;font-size:1.25rem; transition:transform .25s;line-height:1} .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item[open] summary::before{content:counter(fq,persian)} .blog-card{position:relative;overflow:hidden} .blog-card::before{content:"";position:absolute;top:0;inset-inline:0;height:4px;background:var(--grad-brand-r); transform:scaleX(0);transform-origin:right;transition:transform .3s} .blog-card:hover::before{transform:scaleX(1)} .blog-card:hover .blog-more{letter-spacing:.3px} /* --- فوتر v2 --- */ .foot-wave-wrap{line-height:0;margin-top:44px} .foot-wave{color:var(--ink);height:70px} footer.foot2{margin-top:0;padding-top:44px} .foot-cta{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap; background:linear-gradient(135deg,rgba(0,151,109,.16),rgba(0,144,220,.16)); border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:28px 32px;margin-bottom:46px} .fc-txt b{display:block;color:#fff;font-size:1.2rem;font-weight:800;margin-bottom:5px} .fc-txt span{font-size:.9rem;color:#C2CFE8} .fc-btns{display:flex;gap:10px;flex-wrap:wrap} .foot-social{display:flex;gap:10px;margin-top:18px} .foot-social a{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:#E6EEFB;transition:.2s} .foot-social a:hover{background:var(--grad-brand);color:#fff;transform:translateY(-2px)} .foot-social svg{width:19px;height:19px} /* --- موبایل v2 --- */ @media(max-width:900px){ .steps-path{display:none} .steps-flow{grid-template-columns:1fr} .steps-flow .step-card.st2,.steps-flow .step-card.st3{margin-top:0} .mbti2 .mbti-promo-vis{display:block;height:230px;margin-top:10px;margin-inline:auto;width:min(260px,100%)} .mp-orbit{width:220px;height:220px} } @media(max-width:860px){ .h-orbit{display:none} .hero2{padding:64px 0 0} .hero-marquee{margin-top:52px} .h-shape.sh1{width:32px;top:6%;left:auto;inset-inline-start:6%} .h-shape.sh2{display:none} .h-shape.sh3{width:26px;bottom:auto;top:9%;left:auto;inset-inline-end:7%} .rc-float{font-size:.72rem;padding:7px 12px} .rc-float.rcf2{display:none} .rc-float.rcf1{top:-13px;inset-inline-end:2px} .rc-float.rcf3{bottom:-12px;inset-inline-end:8%} .hero2 .hero-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .t-sep{display:none} .hero2 .hero-trust .t{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12); border-radius:16px;padding:12px 6px;text-align:center} .hero2 .hero-trust .t strong{font-size:1.25rem} .hero2 .hero-trust .t span{font-size:.72rem} .about-vis{padding:0} .about-vis::before{inset:26px -8px -8px 26px} .ab-chip.abc1{inset-inline-start:-6px;bottom:22px} .ab-chip.abc2{inset-inline-end:-6px;top:30px} .about-ring{width:110px;height:110px;top:-18px;inset-inline-end:-8px} } @media(prefers-reduced-motion:reduce){ .scribble path,.spark-line,.h3-swash path{stroke-dashoffset:0!important} .mq-track{animation:none!important} } /* ================================================================ نسخهٔ ۳ — پس‌زمینهٔ سراسری، هدر صفحه‌های داخلی، نوار تیرهٔ طرح‌ها ================================================================ */ /* بافت نقطه‌ایِ سراسری روی پس‌زمینهٔ روشن */ body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none; background-image:radial-gradient(rgba(10,26,47,.14) 1px,transparent 1.1px); background-size:30px 30px; -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.3) 40%,rgba(0,0,0,.12) 75%,rgba(0,0,0,.3)); mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.3) 40%,rgba(0,0,0,.12) 75%,rgba(0,0,0,.3))} .blobs i:nth-child(1){animation:float1 26s ease-in-out infinite} .blobs i:nth-child(2){animation:float2 30s ease-in-out infinite} .blobs i:nth-child(3){animation:float1 34s ease-in-out infinite} /* --- هدر تیرهٔ صفحه‌های داخلی --- */ .page-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:56px 0 0;isolation:isolate} .page-hero .ph-inner{position:relative;z-index:3;text-align:center;padding-bottom:56px} .page-hero .ph-inner>*{animation:up .7s cubic-bezier(.2,.8,.2,1) backwards} .page-hero .ph-inner>*:nth-child(1){animation-delay:.03s} .page-hero .ph-inner>*:nth-child(2){animation-delay:.12s} .page-hero .ph-inner>*:nth-child(3){animation-delay:.2s} .page-hero .ph-inner>*:nth-child(4){animation-delay:.28s} .ph-back{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:700;color:#C2CFE8; margin-bottom:20px;transition:.2s} .ph-back:hover{color:#fff} .page-hero .eyebrow{margin-bottom:18px} .ph-title{font-size:clamp(1.65rem,3.6vw,2.5rem);font-weight:900;line-height:1.55;letter-spacing:-.5px; max-width:30ch;margin-inline:auto; background:linear-gradient(120deg,#fff 30%,#72D6FF);-webkit-background-clip:text;background-clip:text;color:transparent} .ph-sub{margin:14px auto 0;color:#D5E0F4;font-size:.98rem;line-height:2.05;max-width:56ch} .ph-sub a{color:#1FF0BE;text-decoration:underline;text-underline-offset:3px} .page-hero .h-orbit.pho{width:380px;height:380px;top:-150px;left:-120px;animation:v2spin 60s linear infinite} .h-shape.phs1{width:26px;height:26px;top:26%;inset-inline-start:10%;animation:v2floaty 6s ease-in-out infinite} .h-shape.phs2{width:30px;height:30px;top:34%;inset-inline-end:8%;animation:v2floaty 7s 1s ease-in-out infinite} .ph-slim .ph-inner{padding-bottom:38px;text-align:start} .ph-slim .ph-back{margin-bottom:12px;display:flex} .ph-crumb{font-size:1.04rem;font-weight:800;color:#F3F8FF;line-height:1.9} .ph-crumb b{color:#1FF0BE} section.block.page-after{padding-top:52px} @media(max-width:600px){.page-hero{padding:40px 0 0}.page-hero .ph-inner{padding-bottom:44px}} /* --- تزئین بخش‌های صفحهٔ اصلی --- */ #why{background:radial-gradient(720px 440px at 50% 0%,rgba(0,151,109,.08),transparent 72%)} #nazarat{background:linear-gradient(180deg,transparent,rgba(0,144,220,.06) 28%,rgba(0,144,220,.06) 72%,transparent)} #faq::before{content:"";position:absolute;top:70px;inset-inline-start:4%;width:150px;height:150px;pointer-events:none; background-image:radial-gradient(rgba(0,151,109,.4) 2px,transparent 2.2px);background-size:19px 19px;opacity:.45} #blog::after{content:"";position:absolute;bottom:56px;inset-inline-end:3%;width:150px;height:150px;pointer-events:none; border:2px dashed rgba(0,144,220,.3);border-radius:50%;animation:v2spin 44s linear infinite} @media(max-width:700px){#faq::before,#blog::after{display:none}} /* --- نوار تیرهٔ بخش طرح‌ها (صفحهٔ اصلی) — کاملاً بازطراحی‌شده --- */ @keyframes plansDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-26px,18px) scale(1.06)}} @keyframes plansDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-16px) scale(1.05)}} @keyframes plansSparkle{0%,100%{transform:translateY(0)}50%{transform:translateY(-540px)}} @keyframes plansRing{to{transform:rotate(360deg)}} #plans{position:relative;background:linear-gradient(160deg,var(--ink),var(--ink-2));border-radius:44px; max-width:1120px;margin:10px auto!important; padding:40px 0 44px!important;overflow:hidden;isolation:isolate; box-shadow:0 50px 110px -50px rgba(0,0,0,.7)} #plans::before{content:"";position:absolute;inset:-10%;pointer-events:none;z-index:0; background:radial-gradient(620px 400px at 85% 0%,rgba(0,144,220,.24),transparent 62%), radial-gradient(540px 380px at 6% 100%,rgba(0,151,109,.2),transparent 62%); animation:plansDrift 16s ease-in-out infinite} #plans::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(rgba(255,255,255,.13) 1.2px,transparent 1.3px);background-size:26px 26px; -webkit-mask-image:radial-gradient(560px 360px at 72% 15%,#000,transparent 72%); mask-image:radial-gradient(560px 360px at 72% 15%,#000,transparent 72%); animation:plansDrift2 20s ease-in-out infinite} #plans .wrap{position:relative;z-index:2} #plans .plans-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} #plans .plans-fx i{position:absolute;border:1.5px dashed rgba(63,214,192,.28);border-radius:50%; animation:plansRing 60s linear infinite} #plans .plans-fx i:nth-child(1){width:340px;height:340px;top:-90px;inset-inline-end:-80px} #plans .plans-fx i:nth-child(2){width:230px;height:230px;bottom:-60px;inset-inline-start:4%; border-color:rgba(0,144,220,.26);animation-direction:reverse;animation-duration:44s} #plans .plans-fx b{position:absolute;top:0;inset-inline-start:0;width:2px;height:2px;border-radius:50%; background:transparent;box-shadow: 60px 620px #fff, 180px 480px rgba(255,255,255,.7), 300px 700px #1FF0BE, 420px 380px rgba(255,255,255,.6), 520px 640px #5FC8FF, 640px 460px rgba(255,255,255,.75), 760px 720px #1FF0BE, 880px 400px rgba(255,255,255,.65), 980px 600px #5FC8FF, 1080px 500px rgba(255,255,255,.7), 1160px 680px #fff, 60px 200px rgba(255,255,255,.5), 340px 160px #1FF0BE, 700px 220px rgba(255,255,255,.6), 1000px 180px #5FC8FF; animation:plansSparkle 14s linear infinite} #plans .sec-head{margin-bottom:26px} #plans .sec-head h2{color:#fff} #plans .sec-head p{color:#D5E0F4} #plans .btn-ghost-dark{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)} #plans .btn-ghost-dark:hover{background:rgba(255,255,255,.2)} @media(max-width:700px){#plans{margin:0 10px!important;border-radius:28px}} @media(prefers-reduced-motion:reduce){ #plans::before,#plans::after,#plans .plans-fx i,#plans .plans-fx b{animation:none} } /* --- ویزاردها (تخمین رتبه / تست / ورود) --- */ .wizard{border-radius:28px;box-shadow:0 34px 80px -34px rgba(10,26,47,.45);position:relative} .wizard::before{content:"";position:absolute;top:0;inset-inline:28px;height:3px;border-radius:3px; background:var(--grad-brand-r);z-index:1} .stepbar .sp{height:6px} .stepbar .sp.done{background:var(--grad-brand-r)} .grp{border-radius:16px} .grp.sel{background:var(--grad-brand);border-color:transparent;box-shadow:var(--glow-teal)} .qbar{height:8px} .q-opt3{border-radius:16px;padding:20px 8px;font-size:1rem;box-shadow:0 6px 16px -10px rgba(10,26,47,.2)} .q-opt3.yes{border-color:rgba(0,151,109,.4)} .q-opt3.no{border-color:rgba(224,117,90,.4)} .code-inp{border-radius:16px} .mbti-intro-ic{animation:v2floaty 4s ease-in-out infinite;display:inline-block} .sms-demo{border-radius:16px} /* --- بخش هیرو+ویزاردِ صفحهٔ تخمین رتبه: کم‌کردنِ فاصلهٔ زیرِ کارت تا بخشِ بعدی --- */ /* section.block پیش‌فرض ۱۰۴px پدینگ بالا/پایین دارد و page-after فقط پدینگ-بالا را رد می‌کند؛ یعنی جمعِ پدینگِ پایینِ همین بخش (۱۰۴) + پدینگِ بالای بخشِ بعدی (۵۲) یک فاصلهٔ خیلی بزرگ می‌سازد. */ section.wiz-hero-sec{padding-bottom:48px} @media(max-width:480px){section.wiz-hero-sec{padding-bottom:32px}} /* --- درخشش‌های محوِ پس‌زمینه، پشتِ کارتِ ویزارد (فقط تزئینی، بدون انیمیشن، هزینهٔ کارایی صفر) --- */ section.wiz-hero-sec::before,section.wiz-hero-sec::after{content:"";position:absolute;border-radius:50%; filter:blur(60px);z-index:0;pointer-events:none} section.wiz-hero-sec::before{width:280px;height:280px;background:rgba(0,151,109,.14);top:-30px;inset-inline-start:6%} section.wiz-hero-sec::after{width:240px;height:240px;background:rgba(0,144,220,.13);bottom:-10px;inset-inline-end:6%} section.wiz-hero-sec > .wrap{position:relative;z-index:1} /* --- بازطراحیِ ویژوالِ کارتِ تخمین رتبه (فقط همین یک نمونه، نه سراسریِ .wizard) --- .wizard از قبل توسطِ چند صفحهٔ دیگر (تست شخصیت، ورود/ثبت‌نام، کارنامه) هم استفاده می‌شود؛ برای اینکه ظاهرِ آن‌ها عوض نشود، این استایل‌ها فقط رویِ کلاسِ اضافیِ wizard-tamin اعمال می‌شوند. */ .wizard-tamin{margin-top:22px; border:1.5px solid transparent; background:linear-gradient(175deg,#fff,var(--teal-soft) 160%) padding-box, linear-gradient(120deg,var(--teal) 0%,var(--amber) 55%,var(--violet) 100%) border-box} .wizard-tamin::before{display:none} /* خطِ گرادیانِ بالا با حلقهٔ گرادیانیِ جدید دوباره‌کاری بود */ .tamin-badge{position:absolute;top:-26px;left:50%;transform:translateX(-50%);z-index:2; width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem; background:var(--grad-brand);box-shadow:var(--glow-teal);border:4px solid var(--paper-2)} .wizard-tamin .stepbar{padding-top:34px} .wizard-tamin .stepbar .sp.now{box-shadow:0 0 12px 1px rgba(0,144,220,.55)} @media(max-width:480px){ .tamin-badge{width:44px;height:44px;font-size:1.25rem;top:-22px} .wizard-tamin{margin-top:18px} } /* --- فضای شخصی --- */ .hesab-avatar{background:var(--grad-brand);box-shadow:var(--glow-teal)} .hesab-nav a.on{background:var(--grad-brand);color:#fff} .hesab-nav a.on:hover{background:var(--grad-brand)} /* --- اجزای مشترک صفحه‌های داخلی --- */ .chip.on{background:var(--grad-brand);border-color:transparent} .cat-title::before{background:var(--grad-brand)} .toc{border-color:rgba(0,151,109,.3);background:linear-gradient(135deg,rgba(0,151,109,.06),rgba(0,144,220,.06))} .major-card-link:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)} .func-chip b{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent} .func-chip.tag b{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--teal-dark)} .func-chip.tag.warn b{color:var(--amber-dark)} .t-photo{border:3px solid transparent;background:var(--grad-brand) border-box} .tp-box{border:1.5px solid transparent; background:linear-gradient(var(--paper-2),var(--paper-2)) padding-box,var(--grad-brand) border-box} .card-box{border-radius:24px} .side-h::before{background:var(--grad-brand)} /* ================================================================ نسخهٔ ۴ — پردهٔ سرمه‌ای، رفع تداخل متن‌ها، افکت‌های جدید ================================================================ */ /* پردهٔ سرمه‌ای روی کل زمینه */ body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background:radial-gradient(1300px 900px at 50% -5%,rgba(10,26,47,0) 40%,rgba(10,26,47,.1) 90%)} /* نشان‌های شناور کارت کارنامه — فقط لبهٔ کارت، نه روی متن */ @keyframes v2floatysm{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} .rc-float.rcf1{top:-25px;inset-inline-end:-8px} .rc-float.rcf2{top:-25px;inset-inline-start:-10px;animation-delay:.8s} .rc-float.rcf3{bottom:-28px;inset-inline-end:14%;animation:v2floatysm 7s .5s ease-in-out infinite} /* عدد سایه‌ایِ قدم‌ها — گوشهٔ مقابلِ برچسب «قدم» */ .g-num{inset-inline-end:auto;inset-inline-start:14px;top:-36px} /* کارت‌های آماری کنار عکس — روی لبه، نه روی برچسب عکس */ .ab-chip.abc1{bottom:96px;inset-inline-start:-30px} .ab-chip.abc2{top:-16px;inset-inline-end:-12px} @media(max-width:900px){ /* ستارهٔ بنر تست — نوار خالی بالای کادر، نه روی تیتر */ .mp-star.s3{top:10px;inset-inline-end:16px} } @media(max-width:860px){ .rc-float.rcf1{top:-19px;inset-inline-end:2px} .rc-float.rcf3{bottom:-22px;inset-inline-end:5%;animation:v2floatysm 7s .5s ease-in-out infinite} .ab-chip.abc1{bottom:78px;inset-inline-start:-4px} .ab-chip.abc2{top:-12px;inset-inline-end:-4px} /* شکل‌های هیرو — نوار خالی بالای محتوا، نه پشت متن */ .h-shape.sh1{top:8px;left:auto;inset-inline-start:7%} .h-shape.sh3{top:14px;left:auto;inset-inline-end:9%} } /* شبکهٔ ذرات هیرو */ .hero-net{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55} /* ظاهر شدن کلمه‌به‌کلمهٔ تیترها */ .wsplit .w{display:inline-block;opacity:0;transform:translateY(.65em) rotate(2deg); transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1)} .wsplit.in .w{opacity:1;transform:none} /* باز شدن نرم پاسخ سؤالات */ .faq-item[open] .ans{animation:fade .4s ease} /* دکمه‌های مغناطیسی — انتقال نرم */ .btn-primary,.btn-amber{will-change:transform} @media(prefers-reduced-motion:reduce){ .wsplit .w{opacity:1!important;transform:none!important} } /* بج‌های خویشاوند */ .art-cat{background:var(--grad-brand);color:#fff;box-shadow:0 10px 22px -12px rgba(0,151,109,.7)} .tp-hot,.p-hot{background:var(--grad-brand)} .step-badge{ border:1px solid transparent;color:var(--teal-dark); background: linear-gradient(var(--paper-2),var(--paper-2)) padding-box, linear-gradient(120deg,rgba(0,151,109,.55),rgba(0,144,220,.55)) border-box; } @media(prefers-reduced-motion:reduce){ .sec-kicker::before,.eyebrow .dot{animation:none} .sec-kicker::after,.eyebrow::after{animation:none;opacity:1} } /* ---------- کارنامه‌های قبولی ---------- */ .kn-list{display:flex;flex-direction:column;gap:12px;margin-bottom:8px} .kn-row{display:flex;align-items:center;gap:14px;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:14px 18px;flex-wrap:wrap;transition:.2s} .kn-row:hover{border-color:var(--teal)} .kn-rank{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--teal-soft);color:var(--teal-dark);display:grid;place-items:center;font-weight:800;font-size:.85rem} .kn-main{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px} .kn-main b{font-size:.98rem} .kn-main>span{font-size:.85rem;color:var(--muted)} .kn-meta{font-size:.78rem!important;color:var(--muted)} .kn-view-btn{flex:0 0 auto;white-space:nowrap;width:auto} @media(max-width:640px){ .kn-row{flex-direction:column;align-items:stretch;text-align:center} .kn-view-btn{width:100%} } .kn-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.82rem;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)} .kn-table th,.kn-table td{padding:11px 6px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap;vertical-align:middle} .kn-table th{background:var(--ink);color:#fff;font-weight:800;font-size:.7rem;overflow:hidden;text-overflow:ellipsis} .kn-table tbody tr:nth-child(odd){background:var(--teal-soft)} .kn-table tbody tr:hover{background:var(--paper-2)} .kn-table td.kn-td-b{font-weight:700;text-align:right;white-space:normal;overflow-wrap:break-word} @media(max-width:640px){ .kn-table{font-size:.68rem} .kn-table th{font-size:.62rem} .kn-table th,.kn-table td{padding:7px 3px} } #knResults{position:relative;min-height:10px;transition:opacity .15s} #knResults.kn-loading{opacity:.35;pointer-events:none} #knResults.kn-loading::after{ content:'';position:absolute;top:36px;right:calc(50% - 17px);width:34px;height:34px; border:3px solid var(--teal-soft);border-top-color:var(--teal);border-radius:50%; animation:knspin .7s linear infinite; } @keyframes knspin{to{transform:rotate(360deg)}} @keyframes knFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .kn-anim{animation:knFadeIn .4s ease both} .kn-list .kn-row.kn-anim{animation-duration:.35s} @media(prefers-reduced-motion:reduce){ .kn-anim{animation:none} #knResults.kn-loading::after{animation:none} } /* تب‌های حالتِ جست‌وجو */ .kn-tabs{display:flex;gap:6px;flex-wrap:wrap;background:rgba(10,26,47,.05);padding:6px;border-radius:14px;margin-bottom:22px} .kn-tab{flex:1;min-width:120px;padding:11px 8px;border-radius:10px;background:transparent;font-weight:700;font-size:.85rem;color:var(--muted);transition:.2s;cursor:pointer;border:none;text-align:center;font-family:inherit} .kn-tab:hover{color:var(--ink)} .kn-tab.sel{background:var(--paper-2);color:var(--ink);box-shadow:var(--shadow-sm)} /* لیستِ انتخابیِ رشته/دانشگاه */ .kn-pick-clear{background:transparent;border:none;color:var(--teal-dark);font-size:.76rem;font-weight:700;cursor:pointer;padding:2px 6px;font-family:inherit} .kn-pick-list{max-height:230px;overflow-y:auto;border:1.5px solid var(--line);border-radius:14px;padding:6px;margin-top:8px} .kn-pick-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:.86rem;transition:.15s} .kn-pick-item:hover{background:var(--paper)} .kn-pick-item.sel{background:var(--teal-soft);color:var(--teal-dark);font-weight:700} .kn-pick-item input{accent-color:var(--teal);flex:0 0 auto} .kn-pick-item span{flex:1;min-width:0} .kn-pick-empty{padding:16px;text-align:center;color:var(--muted);font-size:.85rem} /* ================================================================ محتوای سئوی صفحهٔ تست شخصیت (پیشوند sx-) — طراحی‌شده برای خوانده‌شدن، نه فقط برای بودن: بلوک‌های کوتاه، کارت، رنگ‌بندی گروه‌ها و ریتم بصری. ================================================================ */ .sx-wrap{max-width:940px} .sx-sec{margin-bottom:64px} .sx-sec:last-child{margin-bottom:0} .sx-h{font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.3px;line-height:1.45; margin-bottom:18px;display:flex;align-items:center;gap:13px} .sx-h .n{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center; font-size:1.05rem;font-weight:900;color:#fff;background:var(--grad-brand);box-shadow:var(--glow-teal)} .sx-h3{font-size:1.06rem;font-weight:800;margin:26px 0 10px;color:var(--teal-dark)} .sx-p{color:var(--muted);font-size:1rem;line-height:2.1;margin-bottom:14px} .sx-p:last-child{margin-bottom:0} .sx-p a{color:var(--teal-dark);font-weight:700;border-bottom:1.5px solid rgba(0,151,109,.35);transition:.2s} .sx-p a:hover{border-bottom-color:var(--teal);background:var(--teal-soft)} .sx-p b{color:var(--ink);font-weight:700} /* جملهٔ شاخصِ ابتدای هر بخش */ .sx-lead{position:relative;font-size:1.09rem;line-height:2.05;color:var(--ink);font-weight:500; background:linear-gradient(120deg,var(--teal-soft),rgba(227,243,252,.6)); border-radius:18px;padding:22px 26px 22px 24px;margin-bottom:22px; border-inline-start:4px solid var(--teal)} /* شبکهٔ کارت‌ها */ .sx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px;margin-top:22px} /* دقیقاً ۳ آیتم دارن؛ عرض رو صریح ۳ ستون می‌کنیم (نه auto-fit) تا آیتمِ آخر تنها تو یه ردیفِ جدا نیفته — رو موبایل هم مستقیم می‌ره رو یک ستون، نه دو، که باز همون مشکل رو تکرار نکنه */ .sx-grid-3{grid-template-columns:repeat(3,1fr)} @media(max-width:720px){.sx-grid-3{grid-template-columns:1fr}} .sx-card{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:24px 22px; transition:.25s;position:relative;overflow:hidden} .sx-card::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--grad-brand-r); transform:scaleX(0);transform-origin:right;transition:transform .35s} .sx-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(0,151,109,.35)} .sx-card:hover::before{transform:scaleX(1)} .sx-card .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem; background:var(--teal-soft);margin-bottom:14px} .sx-card h4{font-size:1rem;font-weight:800;margin-bottom:8px} .sx-card p{font-size:.89rem;color:var(--muted);line-height:1.95;margin:0} /* کارت‌های سه گروه آزمایشی — هرکدام رنگ اختصاصی */ .sx-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:24px} .sx-g{border-radius:22px;padding:26px 24px;border:1.5px solid;transition:.25s;position:relative} .sx-g:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .sx-g .tag{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:800; padding:5px 14px;border-radius:100px;margin-bottom:14px;color:#fff} .sx-g h4{font-size:1.05rem;font-weight:800;margin-bottom:10px} .sx-g p{font-size:.9rem;color:var(--muted);line-height:1.95;margin-bottom:14px} .sx-g .exs{display:flex;flex-wrap:wrap;gap:7px} .sx-g .exs span{font-size:.76rem;font-weight:700;padding:4px 12px;border-radius:100px;background:var(--paper-2)} .sx-g.t{background:linear-gradient(160deg,var(--teal-soft),#fff 62%);border-color:rgba(0,151,109,.4)} .sx-g.t .tag{background:var(--teal)} .sx-g.t .exs span{color:var(--teal-dark)} .sx-g.r{background:linear-gradient(160deg,var(--amber-soft),#fff 62%);border-color:rgba(0,144,220,.4)} .sx-g.r .tag{background:var(--amber)} .sx-g.r .exs span{color:var(--amber-dark)} .sx-g.e{background:linear-gradient(160deg,rgba(242,184,75,.16),#fff 62%);border-color:rgba(217,147,42,.4)} .sx-g.e .tag{background:var(--gold-dark)} .sx-g.e .exs span{color:var(--gold-dark)} /* جدولِ مقایسه‌ای علاقه / استعداد / شخصیت / رتبه */ .sx-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:24px} .sx-cmp .c{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:22px 20px; text-align:center;transition:.25s} .sx-cmp .c:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:var(--shadow-sm)} .sx-cmp .c .ic{font-size:1.75rem;margin-bottom:10px;display:block} .sx-cmp .c b{display:block;font-size:1rem;font-weight:800;margin-bottom:8px} .sx-cmp .c span{display:block;font-size:.86rem;color:var(--muted);line-height:1.9} .sx-cmp .c em{display:block;margin-top:10px;font-size:.76rem;font-style:normal;font-weight:700; color:var(--teal-dark);background:var(--teal-soft);border-radius:100px;padding:4px 12px} /* قدم‌های بعد از نتیجه */ .sx-steps{display:flex;flex-direction:column;gap:12px;margin-top:24px;counter-reset:sxs} .sx-step{counter-increment:sxs;display:flex;gap:16px;align-items:flex-start; background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:20px 22px;transition:.25s} .sx-step:hover{border-color:var(--teal);box-shadow:var(--shadow-sm)} .sx-step::before{content:counter(sxs,persian);flex:0 0 auto;width:34px;height:34px;border-radius:11px; display:grid;place-items:center;font-weight:900;font-size:.95rem; background:var(--teal-soft);color:var(--teal-dark)} .sx-step .tx{flex:1;min-width:0} .sx-step .tx b{display:block;font-size:.98rem;font-weight:800;margin-bottom:5px} .sx-step .tx span{display:block;font-size:.89rem;color:var(--muted);line-height:1.95} .sx-step .tx a{color:var(--teal-dark);font-weight:700;border-bottom:1.5px solid rgba(0,151,109,.35)} .sx-step .tx a:hover{border-bottom-color:var(--teal)} /* کادرِ هشدار/نکتهٔ صادقانه */ .sx-note{display:flex;gap:16px;align-items:flex-start;border-radius:20px;padding:24px 26px;margin-top:22px; background:linear-gradient(120deg,rgba(242,184,75,.14),#fff 65%); border:1.5px solid rgba(217,147,42,.38)} .sx-note .ic{font-size:1.6rem;flex:0 0 auto;line-height:1.4} .sx-note p{font-size:.96rem;line-height:2.05;color:var(--muted);margin:0} .sx-note p b{color:var(--ink)} /* بنرِ دعوت به اقدامِ پایانی */ .sx-cta{position:relative;overflow:hidden;border-radius:26px;padding:40px 36px;margin-top:56px; background:linear-gradient(135deg,var(--ink),var(--ink-2));color:#fff;text-align:center} .sx-cta::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(560px 240px at 80% -10%,rgba(0,151,109,.34),transparent 60%), radial-gradient(500px 220px at 12% 110%,rgba(0,144,220,.30),transparent 60%)} .sx-cta > *{position:relative} .sx-cta h3{font-size:clamp(1.25rem,2.6vw,1.65rem);font-weight:800;margin-bottom:12px;color:#fff} .sx-cta p{color:#E6EEFB;font-size:.98rem;line-height:2;max-width:52ch;margin:0 auto 24px} .sx-cta .btn{margin-inline:auto} @media(max-width:640px){ .sx-sec{margin-bottom:48px} .sx-h{gap:10px} .sx-h .n{width:32px;height:32px;font-size:.92rem;border-radius:10px} .sx-lead{font-size:1.02rem;padding:18px 20px} .sx-cta{padding:32px 22px;border-radius:22px} .sx-note{padding:20px 18px;gap:12px} } /* ============ افزوده‌های صفحهٔ تخمین رتبه ============ */ /* فهرست مطالبِ جمع‌شونده — روی دسکتاپ باز، روی موبایل بسته (تا محتوا فرم را شلوغ نکند). با details/summary ساخته شده، بدون هیچ کتابخانهٔ جاوااسکریپتِ اضافه. */ .toc-fold{margin-bottom:34px} .toc-fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px; font-size:.95rem;font-weight:800;color:var(--ink)} .toc-fold > summary::-webkit-details-marker{display:none} .toc-fold > summary::after{content:"▾";margin-inline-start:auto;font-size:.9rem;color:var(--teal-dark); transition:transform .2s} .toc-fold[open] > summary::after{transform:rotate(180deg)} .toc-fold > ol{margin-top:12px} .toc-fold li a{display:inline-block;padding:2px 0} /* فهرستِ نکته‌ایِ داخلِ بخش‌های سئو */ .sx-list{margin-top:18px;display:flex;flex-direction:column;gap:10px;list-style:none} .sx-list li{position:relative;padding:14px 46px 14px 18px;border-radius:16px; background:var(--paper-2);border:1px solid var(--line); font-size:.95rem;line-height:2;color:var(--muted)} .sx-list li::before{content:"◆";position:absolute;inset-inline-start:18px;top:14px; color:var(--teal);font-size:.8rem} .sx-list li b{color:var(--ink);font-weight:700} /* وضعیتِ ذخیرهٔ نتیجهٔ تخمین */ .save-state{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center; margin:18px auto 0;padding:12px 16px;border-radius:16px;max-width:520px; font-size:.9rem;font-weight:600;line-height:1.9; border:1px solid var(--line);background:var(--paper-2);color:var(--muted)} .save-state .ss-ic{font-size:1.05rem;line-height:1} .save-state .ss-tx{flex:1 1 auto;min-width:140px;text-align:start} .save-state.ss-ok{border-color:rgba(0,151,109,.42);background:var(--teal-soft);color:var(--teal-dark)} .save-state.ss-fail{border-color:rgba(214,77,77,.42);background:rgba(214,77,77,.08);color:#a33} .save-state.ss-guest,.save-state.ss-expired{border-color:rgba(217,147,42,.42);background:rgba(242,184,75,.12);color:#8a6212} .btn.btn-sm{padding:8px 14px;font-size:.82rem;border-radius:12px} @media(max-width:520px){ .save-state{flex-direction:column;text-align:center} .save-state .ss-tx{text-align:center} } /* دکمه در حالتِ «در حال محاسبه» */ .btn.is-loading{opacity:.75;cursor:progress;pointer-events:none} /* کادرِ دعوت به اقدامِ پایانِ مقاله‌ها ([[تخمین]]) */ .article .body .art-cta-box{display:flex;align-items:center;gap:18px;flex-wrap:wrap; margin:36px 0;padding:26px 24px;border-radius:22px; background:linear-gradient(135deg,var(--ink),var(--ink-2));color:#fff} .article .body .art-cta-box .acb-ic{font-size:2rem;line-height:1;flex:0 0 auto} .article .body .art-cta-box .acb-tx{flex:1 1 240px} .article .body .art-cta-box h4{font-size:1.08rem;font-weight:800;color:#fff;margin:0 0 8px} .article .body .art-cta-box p{color:#E6EEFB;font-size:.92rem;line-height:1.95;margin:0} .article .body .art-cta-box .btn{flex:0 0 auto} @media(max-width:560px){ .article .body .art-cta-box{flex-direction:column;text-align:center;padding:24px 18px} .article .body .art-cta-box .btn{width:100%} } /* ============================================================================ v4 — بازطراحیِ «ویراستاری/مجله‌ای» صفحهٔ رشته ایده: به‌جای ردیفی از کارت‌های مربعِ هم‌وزن (که حسِ قالبِ آماده می‌داد)، یک سلسله‌مراتبِ واقعی — تیترِ بزرگ، لیدِ خوانا، نوارِ آماریِ یکپارچه، بخش‌های شماره‌دار با خطِ مویی، و آیکونِ SVG به‌جای ایموجیِ ساختاری. ============================================================================ */ .mj-i{width:1em;height:1em;flex-shrink:0;display:inline-block;vertical-align:-.12em} /* --- نوار پیشرفتِ مطالعه --- */ .mj-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:120;pointer-events:none;background:transparent} .mj-progress i{display:block;height:100%;width:0;background:var(--grad-brand-r); box-shadow:0 0 14px rgba(0,151,109,.55);transition:width .12s linear;border-start-end-radius:3px;border-end-end-radius:3px} /* --- سرصفحهٔ تیتری --- */ .mj-mast{position:relative;overflow:hidden;background:var(--paper-2);border:1px solid var(--line); border-radius:30px;padding:44px 46px 38px;margin-bottom:22px;box-shadow:var(--shadow-sm)} .mj-mast-tex{position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:radial-gradient(rgba(10,26,47,.13) 1px,transparent 1px);background-size:17px 17px; -webkit-mask-image:linear-gradient(to bottom,#000,transparent 72%);mask-image:linear-gradient(to bottom,#000,transparent 72%)} .mj-mast-glow{position:absolute;top:-190px;inset-inline-start:-120px;width:430px;height:430px;border-radius:50%; background:radial-gradient(circle,rgba(0,151,109,.20),rgba(0,144,220,.10) 45%,transparent 70%);pointer-events:none} .mj-mast-in{position:relative} .mj-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:800; color:var(--teal-dark);background:var(--teal-soft);padding:6px 15px;border-radius:100px;margin-bottom:18px} .mj-eyebrow .mj-i{width:15px;height:15px} .mj-idrow{display:flex;align-items:center;gap:18px;margin-bottom:16px} .mj-mono{flex-shrink:0;width:70px;height:70px;border-radius:22px;display:grid;place-items:center; font-size:2rem;line-height:1;background:var(--grad-brand);box-shadow:var(--glow-teal); transform:rotate(-4deg);transition:transform .35s cubic-bezier(.2,.9,.3,1)} .mj-mast:hover .mj-mono{transform:rotate(0deg) scale(1.04)} .mj-title{position:relative;font-size:clamp(1.75rem,4vw,2.9rem);font-weight:900;line-height:1.4; letter-spacing:-.4px;margin:0;padding-bottom:12px} .mj-swash{position:absolute;inset-inline-start:0;bottom:0;width:min(100%,300px);height:11px;overflow:visible} .mj-swash path{stroke-dasharray:320;stroke-dashoffset:320;animation:mjDraw 1.1s .25s cubic-bezier(.2,.8,.2,1) forwards} @keyframes mjDraw{to{stroke-dashoffset:0}} .mj-lead{font-size:1.09rem;line-height:2.05;color:var(--muted);max-width:62ch;margin:0} .mj-metarow{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)} .mj-metai{display:inline-flex;align-items:center;gap:7px;font-size:.83rem;font-weight:600;color:var(--muted)} .mj-metai .mj-i{width:16px;height:16px;color:var(--teal)} /* --- نوارِ آماریِ یکپارچه (جای چهار کارتِ جدا) --- */ .mj-stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper-2); border:1px solid var(--line);border-radius:24px;overflow:hidden;margin-bottom:22px;box-shadow:var(--shadow-sm)} .mj-stat{position:relative;padding:22px 20px;display:flex;flex-direction:column;gap:7px;transition:background .25s} .mj-stat + .mj-stat::before{content:"";position:absolute;inset-inline-start:0;top:16%;height:68%;width:1px;background:var(--line)} .mj-stat:hover{background:linear-gradient(180deg,rgba(0,151,109,.07),transparent)} .ms-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center; background:var(--teal-soft);color:var(--teal-dark);margin-bottom:2px} .ms-ic .mj-i{width:19px;height:19px} .ms-l{font-size:.74rem;font-weight:700;color:var(--muted);letter-spacing:.2px} .ms-v{font-size:.94rem;font-weight:800;color:var(--ink);line-height:1.7} /* --- پنلِ «رقابت» --- */ .mj-insight{position:relative;display:flex;gap:18px;align-items:flex-start;overflow:hidden; background:linear-gradient(135deg,rgba(0,144,220,.10),rgba(0,151,109,.06)); border:1px solid rgba(0,144,220,.26);border-radius:24px;padding:26px 30px;margin-bottom:26px} .mi-edge{position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:var(--grad-brand)} .mi-ic{flex-shrink:0;width:46px;height:46px;border-radius:15px;display:grid;place-items:center; background:var(--paper-2);color:var(--amber-dark);box-shadow:var(--shadow-sm)} .mi-ic .mj-i{width:23px;height:23px} .mi-body{min-width:0} .mi-body h2{font-size:1.04rem;font-weight:800;color:var(--amber-dark);margin:2px 0 8px} .mi-body p{font-size:.94rem;line-height:1.95;color:var(--ink);margin:0 0 10px} .mi-note{display:inline-flex;align-items:flex-start;gap:6px;font-size:.78rem;line-height:1.75;color:var(--muted)} .mi-note .mj-i{width:15px;height:15px;margin-top:3px;color:var(--amber-dark)} /* --- بخش‌های شماره‌دار --- */ .mj-sec{background:var(--paper-2);border:1px solid var(--line);border-radius:26px; padding:32px 34px;margin-bottom:22px;box-shadow:var(--shadow-sm)} .mj-h{position:relative;display:flex;align-items:center;gap:11px;font-size:1.12rem;font-weight:900; color:var(--ink);margin:0 0 22px;padding-bottom:16px} .mj-h::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px; background:linear-gradient(to left,var(--line),transparent)} .mj-h .mj-i{width:21px;height:21px;color:var(--teal)} /* شمارهٔ بخش‌ها (۰۱، ۰۲، …) از داخلِ متنِ h2 بیرون آمد و به ::before منتقل شد. چرایی: وقتی span شمارنده داخلِ h2 بود، متنِ تیتر برای گوگل «۰۱ترتیب کارکردهای ذهنی» خوانده می‌شد (بدون فاصله، چون span اینلاین بود). ظاهر دقیقاً همان است، ولی حالا شماره جزوِ محتوای متنی نیست. مقدار از data-n روی خودِ h2 خوانده می‌شود. */ .mj-h[data-n]::before{content:attr(data-n); font-size:.76rem;font-weight:900;color:var(--teal-dark);background:var(--teal-soft); padding:4px 9px;border-radius:8px;letter-spacing:.5px;flex:none} .mj-h-n{font-size:.76rem;font-weight:900;color:var(--teal-dark);background:var(--teal-soft); padding:4px 9px;border-radius:8px;letter-spacing:.5px} /* --- فهرست دروس --- */ .mj-courses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 30px} .mj-courses li{display:flex;align-items:baseline;gap:12px;padding:12px 2px; border-bottom:1px solid var(--line);font-size:.92rem;line-height:1.85;transition:padding-inline-start .22s,color .22s} .mj-courses li:hover{padding-inline-start:8px;color:var(--teal-dark)} .mc-n{flex-shrink:0;font-size:.76rem;font-weight:900;color:var(--teal);opacity:.65;font-feature-settings:"tnum"} .mc-t{min-width:0} .mj-prose{font-size:.98rem;line-height:2.05;color:var(--muted);margin:0;max-width:66ch} /* --- دانشگاه‌ها --- */ .mj-unis{display:flex;flex-wrap:wrap;gap:10px} .mj-uni{display:inline-flex;align-items:center;gap:9px;font-size:.87rem;font-weight:700;color:var(--ink); background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:8px 16px 8px 8px; transition:transform .22s cubic-bezier(.2,.9,.3,1),border-color .22s,box-shadow .22s} .mj-uni i{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center; font-style:normal;font-size:.72rem;font-weight:900;color:#fff;background:var(--grad-brand)} .mj-uni:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:var(--shadow-sm)} /* --- رشته‌های مرتبط --- */ .mj-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px} .mj-relc{display:flex;align-items:center;gap:12px;padding:15px 17px;border-radius:17px; border:1px solid var(--line);background:var(--paper-2);transition:transform .25s cubic-bezier(.2,.9,.3,1),border-color .25s,box-shadow .25s} .mj-relc:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:var(--shadow-sm)} .mr-ic{flex-shrink:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center; font-size:1.05rem;background:var(--teal-soft)} .mr-t{flex:1;min-width:0;font-size:.89rem;font-weight:700;line-height:1.65} .mr-go{flex-shrink:0;width:20px;height:20px;color:var(--teal);opacity:0;transform:translateX(6px);transition:.25s} .mj-relc:hover .mr-go{opacity:1;transform:none} .mr-go svg{width:100%;height:100%} /* --- مقاله --- */ .mj-read{padding:34px 36px} .mj-toc{margin-bottom:32px} .mj-toc b{display:flex;align-items:center;gap:8px} .mj-toc b .mj-i{width:17px;height:17px;color:var(--teal)} .mj-article{padding:0!important;max-width:100%} /* پاراگرافِ اول کمی درشت‌تر و پررنگ‌تر — معادلِ RTL-امنِ «drop cap» (drop cap واقعی در فارسی حرفِ اول را از کلمه جدا می‌کند و اتصالِ حروف را می‌شکند) */ .mj-article .body > p:first-of-type{font-size:1.06rem;line-height:2.1;color:var(--ink);font-weight:500} .mj-article .body h2{position:relative;padding-inline-start:16px} .mj-article .body h2::before{content:"";position:absolute;inset-inline-start:0;top:.28em;bottom:.28em; width:4px;border-radius:100px;background:var(--grad-brand)} /* --- ستون کناری --- */ .mj-side{display:flex;flex-direction:column;gap:18px} .mj-cta{position:relative;overflow:hidden;border-radius:26px;padding:28px 26px; background:linear-gradient(150deg,var(--ink),var(--ink-2));color:#fff;box-shadow:var(--shadow)} .mjc-glow{position:absolute;top:-90px;inset-inline-end:-70px;width:250px;height:250px;border-radius:50%; background:radial-gradient(circle,rgba(31,240,190,.28),transparent 68%);pointer-events:none} .mjc-alt .mjc-glow{background:radial-gradient(circle,rgba(0,144,220,.34),transparent 68%)} .mjc-ic{position:relative;width:44px;height:44px;border-radius:14px;display:grid;place-items:center; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);color:#7BF7D8;margin-bottom:14px} .mjc-ic .mj-i{width:22px;height:22px} .mj-cta b{position:relative;display:block;font-size:1rem;font-weight:800;line-height:1.75;margin-bottom:8px} .mj-cta p{position:relative;font-size:.86rem;line-height:1.9;color:#D8E4F5;margin:0 0 18px} .mj-cta .btn{position:relative;width:100%;justify-content:center} .mj-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:24px; padding:24px 22px;box-shadow:var(--shadow-sm)} .mj-ph{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:800;color:var(--ink); margin:0 0 16px;padding-bottom:13px;border-bottom:1px solid var(--line)} .mj-ph .mj-i{width:18px;height:18px;color:var(--teal)} .mj-types{display:grid;grid-template-columns:1fr 1fr;gap:10px} .mj-type{text-align:center;padding:12px 8px;border-radius:15px;background:var(--teal-soft); transition:transform .22s cubic-bezier(.2,.9,.3,1)} .mj-type:hover{transform:translateY(-3px)} .mj-type b{display:block;font-size:1.16rem;font-weight:900;background:var(--grad-brand); -webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px} .mj-type span{display:block;font-size:.72rem;color:var(--muted);margin-top:3px} .mj-teacher{text-align:center} /* عمداً sticky/چسبان نیست: محتوای ستون کناری از ارتفاعِ صفحه بلندتر است و چسباندنش یا پایینش را غیرقابل‌دسترس می‌کرد یا یک اسکرولِ تودرتو می‌ساخت (اسکرول داخل اسکرول). */ @media(max-width:900px){ .mj-mast{padding:30px 24px 26px;border-radius:24px} .mj-idrow{gap:14px} .mj-mono{width:56px;height:56px;border-radius:18px;font-size:1.6rem} .mj-lead{font-size:1rem;line-height:1.95} .mj-stats{grid-template-columns:1fr 1fr;border-radius:20px} .mj-stat + .mj-stat::before{display:none} .mj-stat{border-top:1px solid var(--line)} .mj-stat:nth-child(-n+2){border-top:none} .mj-stat:nth-child(even){border-inline-start:1px solid var(--line)} .mj-sec,.mj-read{padding:24px 20px;border-radius:22px} .mj-insight{flex-direction:column;gap:14px;padding:22px 20px 22px 24px;border-radius:20px} .mj-courses{grid-template-columns:1fr;gap:0} .mj-side{gap:14px} .mj-cta{padding:24px 20px;border-radius:22px} } @media(max-width:400px){ .mj-stats{grid-template-columns:1fr} .mj-stat:nth-child(even){border-inline-start:none} .mj-stat:nth-child(2){border-top:1px solid var(--line)} .mj-types{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .mj-swash path{animation:none;stroke-dashoffset:0} .mj-progress i{transition:none} .mj-mono,.mj-uni,.mj-relc,.mj-type,.mj-courses li,.mr-go{transition:none!important} .mj-mast:hover .mj-mono,.mj-uni:hover,.mj-relc:hover,.mj-type:hover{transform:none} .mr-go{opacity:1;transform:none} } /* ============================================================ طیفِ پنج‌گزینه‌ایِ تستِ شخصیت (نسخهٔ ۲ — جایگزینِ بله/نمی‌دانم/خیر) ترتیبِ راست‌به‌چپ: کاملاً موافقم ← موافقم ← نظری ندارم ← مخالفم ← کاملاً مخالفم ============================================================ */ .q-opts5{display:flex;gap:8px;margin-bottom:10px} .q-opt5{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; text-align:center;padding:16px 4px;border-radius:16px;border:1.5px solid var(--line);background:var(--paper); font-family:inherit;font-size:.86rem;font-weight:700;color:var(--ink);line-height:1.45;cursor:pointer; transition:.18s;box-shadow:0 6px 16px -12px rgba(10,26,47,.25)} .q-opt5 span{display:block;font-weight:700} /* شدتِ رنگ با شدتِ موافقت/مخالفت زیاد می‌شود تا جهتِ طیف بدونِ خواندن هم فهمیده شود */ .q-opt5.a2{border-color:rgba(0,151,109,.55)} .q-opt5.a1{border-color:rgba(0,151,109,.28)} .q-opt5.d1{border-color:rgba(224,117,90,.28)} .q-opt5.d2{border-color:rgba(224,117,90,.55)} @media (hover:hover){ .q-opt5.a2:hover,.q-opt5.a1:hover{border-color:var(--teal);background:var(--teal-soft);transform:translateY(-2px)} .q-opt5.n0:hover{border-color:var(--line);background:var(--paper-2);transform:translateY(-2px)} .q-opt5.d1:hover,.q-opt5.d2:hover{border-color:#e0755a;background:#fdeee7;transform:translateY(-2px)} } .q-opt5.a2:active,.q-opt5.a1:active{border-color:var(--teal);background:var(--teal-soft)} .q-opt5.n0:active{background:var(--paper-2)} .q-opt5.d1:active,.q-opt5.d2:active{border-color:#e0755a;background:#fdeee7} /* گزینه‌ای که کاربر قبلاً انتخاب کرده بود (بعد از زدنِ دکمهٔ «قبلی») */ .q-opt5.sel{border-width:2px} .q-opt5.a2.sel,.q-opt5.a1.sel{border-color:var(--teal);background:var(--teal-soft)} .q-opt5.n0.sel{border-color:var(--muted);background:var(--paper-2)} .q-opt5.d1.sel,.q-opt5.d2.sel{border-color:#e0755a;background:#fdeee7} @media(max-width:560px){ .q-opts5{gap:5px} .q-opt5{padding:14px 2px;font-size:.74rem;border-radius:13px;line-height:1.4} } @media(max-width:360px){ .q-opt5{font-size:.68rem;padding:12px 1px} } /* یادداشتِ «نتیجه‌ات مرزی است» زیرِ تیپ */ .conf-note{max-width:520px;margin:12px auto 0;padding:11px 15px;border-radius:14px; border:1px solid rgba(214,158,46,.35);background:rgba(214,158,46,.09); font-size:.85rem;line-height:1.9;color:var(--ink);text-align:center} .conf-note b{color:var(--teal-dark);direction:ltr;display:inline-block} /* ============================================================ بخشِ «۱۶ تیپ شخصیتی» — صفحهٔ فهرست (?tipha=1) و صفحهٔ تک‌تیپ (?tip=) کلاس‌های mj-* از صفحهٔ رشته بازاستفاده شده‌اند؛ این‌جا فقط چیزهای تازه. ============================================================ */ /* ---------- صفحهٔ فهرست ---------- */ .tps-intro{max-width:760px;margin:0 auto 34px;text-align:center} .tps-intro p{font-size:1.02rem;line-height:2.1;color:var(--muted)} .tps-intro a{color:var(--teal-dark);font-weight:800;border-bottom:1.5px solid var(--teal-soft)} .tps-fam{margin-bottom:52px} .tps-fam-h{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px; padding:20px 22px;border-radius:22px;border:1px solid var(--line);background:var(--paper-2);position:relative;overflow:hidden} .tps-fam-h::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:var(--grad-brand)} .tf-ic{flex:none;width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-size:1.6rem; background:var(--paper);border:1px solid var(--line);box-shadow:0 8px 20px -14px rgba(10,26,47,.4)} .tf-tx{min-width:0} .tf-tx h2{font-size:1.32rem;font-weight:900;margin-bottom:6px;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .tf-let{font-size:.72rem;font-weight:800;letter-spacing:.06em;direction:ltr;padding:3px 9px;border-radius:999px; background:var(--teal-soft);color:var(--teal-dark)} .tf-tx p{font-size:.93rem;line-height:2;color:var(--muted);margin-bottom:9px} .tf-konkur{display:inline-flex;align-items:flex-start;gap:7px;font-size:.85rem;line-height:1.9;color:var(--ink); padding:8px 12px;border-radius:13px;background:var(--paper);border:1px dashed var(--line)} .tf-konkur svg{flex:none;width:17px;height:17px;margin-top:3px;color:var(--teal-dark)} .tps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .tps-card{display:flex;flex-direction:column;gap:7px;padding:20px 18px 16px;border-radius:20px; border:1px solid var(--line);background:var(--paper);position:relative;overflow:hidden; transition:.22s;box-shadow:0 10px 26px -22px rgba(10,26,47,.5)} .tps-card::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--grad-brand); transform:scaleX(0);transform-origin:100% 50%;transition:transform .28s} .tps-card:hover{transform:translateY(-4px);border-color:rgba(0,151,109,.4);box-shadow:0 20px 40px -26px rgba(10,26,47,.55)} .tps-card:hover::before{transform:scaleX(1)} .tc-ic{font-size:1.5rem;line-height:1} .tc-code{font-size:1.24rem;font-weight:900;letter-spacing:.04em;direction:ltr; background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .tc-name{font-size:.95rem;font-weight:800;color:var(--ink)} .tc-sum{font-size:.83rem;line-height:1.95;color:var(--muted);flex:1} .tc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px; padding-top:11px;border-top:1px dashed var(--line)} .tc-pop{font-size:.74rem;color:var(--muted)} .tc-go{font-size:.76rem;font-weight:800;color:var(--teal-dark)} .tps-note{display:flex;gap:12px;align-items:flex-start;max-width:820px;margin:8px auto 0; padding:16px 19px;border-radius:18px;border:1px solid rgba(214,158,46,.32);background:rgba(214,158,46,.08)} .tps-note .ic{flex:none;font-size:1.15rem} .tps-note p{font-size:.88rem;line-height:2.05;color:var(--ink)} /* ---------- صفحهٔ تک‌تیپ ---------- */ .tp-stack{margin-bottom:34px} .tps-fn{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:12px} .tpf{padding:15px 12px;border-radius:17px;text-align:center;border:1px solid var(--line);background:var(--paper-2); transition:.2s} .tpf:hover{transform:translateY(-3px)} /* شدتِ رنگ با جایگاه در استک کم می‌شود: غالب پررنگ، فروتر کم‌رنگ */ .tpf-0{background:var(--teal-soft);border-color:rgba(0,151,109,.42)} .tpf-1{background:var(--teal-soft);border-color:rgba(0,151,109,.24);opacity:.94} .tpf-2{opacity:.86} .tpf-3{opacity:.74} .tpf-rank{display:block;font-size:.7rem;font-weight:800;color:var(--muted);margin-bottom:5px} .tpf-code{display:block;font-size:1.3rem;font-weight:900;direction:ltr; background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .tpf-name{display:block;font-size:.74rem;color:var(--muted);margin-top:3px} .tps-fn-note{font-size:.86rem;line-height:2.05;color:var(--muted); padding:12px 15px;border-radius:14px;background:var(--paper-2);border:1px dashed var(--line)} .tp-konkur{display:grid;grid-template-columns:1fr 1fr;gap:12px} .tpk{padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:var(--paper-2)} .tpk-good{background:var(--teal-soft);border-color:rgba(0,151,109,.28)} .tpk-warn{background:rgba(214,158,46,.09);border-color:rgba(214,158,46,.32)} .tk-l{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:800;color:var(--ink);margin-bottom:7px} .tk-l svg{width:17px;height:17px;color:var(--teal-dark)} .tpk p{font-size:.9rem;line-height:2.05;color:var(--muted)} .tp-sg{display:grid;grid-template-columns:1fr 1fr;gap:14px} .tsg{padding:18px 20px;border-radius:19px;border:1px solid var(--line);background:var(--paper-2)} .tsg b{display:block;font-size:.95rem;font-weight:800;margin-bottom:11px;padding-bottom:9px;border-bottom:1px dashed var(--line)} .tsg ul{list-style:none} .tsg li{position:relative;padding-inline-start:21px;font-size:.89rem;line-height:2.15;color:var(--muted)} .tsg li::before{content:"";position:absolute;inset-inline-start:0;top:13px;width:7px;height:7px;border-radius:50%} .tsg-plus{background:var(--teal-soft);border-color:rgba(0,151,109,.26)} .tsg-plus li::before{background:var(--teal)} .tsg-minus li::before{background:#d69e2e} .tp-mg{margin-top:20px} .tp-mg-h{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:800;margin-bottom:11px;color:var(--ink)} .tp-mg-h svg{width:19px;height:19px;color:var(--teal-dark)} .tp-env{display:grid;grid-template-columns:1fr 1fr;gap:14px} .tpe{padding:18px 20px;border-radius:19px;border:1px solid var(--line);background:var(--paper-2)} .tpe b{display:block;font-size:.94rem;font-weight:800;margin-bottom:8px} .tpe p{font-size:.89rem;line-height:2.05;color:var(--muted)} .tpe-yes{background:var(--teal-soft);border-color:rgba(0,151,109,.26)} .tpe-no{background:rgba(224,117,90,.07);border-color:rgba(224,117,90,.26)} /* تیپِ فعلی در فهرستِ کناریِ خانواده */ .mj-type.is-cur{background:var(--ink);border-color:var(--ink)} .mj-type.is-cur b{background:none;-webkit-text-fill-color:#fff;color:#fff} .mj-type.is-cur span{color:rgba(255,255,255,.72)} @media(max-width:1000px){ .tps-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ .tps-fn{grid-template-columns:repeat(2,1fr)} .tp-konkur,.tp-sg,.tp-env{grid-template-columns:1fr} } @media(max-width:560px){ .tps-grid{grid-template-columns:1fr} .tps-fam-h{flex-direction:column;gap:12px;padding:17px 18px;border-radius:19px} .tf-ic{width:46px;height:46px;font-size:1.35rem;border-radius:14px} .tf-tx h2{font-size:1.15rem} .tps-fam{margin-bottom:38px} .tpf{padding:13px 9px;border-radius:15px} .tpf-code{font-size:1.15rem} } @media (prefers-reduced-motion: reduce){ .tps-card,.tpf{transition:none!important} .tps-card:hover,.tpf:hover{transform:none} .tps-card::before{transition:none} } /* ---------- پلِ «صفحهٔ کاملِ تیپ» (صفحهٔ نتیجهٔ تست + پیشخوان کاربر) ---------- */ .res-typelink{display:flex;align-items:center;gap:14px;max-width:620px;margin:20px auto 4px; padding:16px 19px;border-radius:19px;border:1px solid rgba(0,151,109,.32);background:var(--teal-soft); transition:.2s;text-align:start} .res-typelink:hover{transform:translateY(-3px);border-color:var(--teal); box-shadow:0 18px 36px -26px rgba(0,151,109,.7)} .res-typelink .rt-ic{flex:none;font-size:1.5rem} .res-typelink .rt-tx{flex:1;min-width:0} .res-typelink .rt-tx b{display:block;font-size:.97rem;font-weight:800;color:var(--ink);margin-bottom:4px} .res-typelink .rt-tx b span{direction:ltr;display:inline-block} .res-typelink .rt-tx>span{display:block;font-size:.83rem;line-height:1.95;color:var(--muted)} .res-typelink .rt-go{flex:none;font-size:1.2rem;color:var(--teal-dark);font-weight:900} @media(max-width:560px){ .res-typelink{gap:11px;padding:14px 15px;border-radius:16px} .res-typelink .rt-ic{font-size:1.25rem} .res-typelink .rt-tx b{font-size:.9rem} .res-typelink .rt-tx>span{font-size:.78rem} } /* ---------- مگامنوی تیپ‌ها ---------- قاعدهٔ پایه repeat(3,168px) است (برای منوی رشته‌ها با ۳ گروه). این منو ۴ خانواده دارد، پس باید صریح روی ۴ ستون بازنویسی شود وگرنه ستون چهارم می‌افتد خط بعد و منو نامتقارن می‌شود. */ /* چیدمانِ پیش‌فرض ۲×۲ است، نه ۴×۱. چرا: پنل وسطِ محرک قرار می‌گیرد و محرکِ «تست شخصیت» نزدیکِ لبه است؛ با ۴ ستون (۷۲۰px) روی لپ‌تاپِ ۱۰۲۴ پیکسلی ۵۹ پیکسل از صفحه می‌زد بیرون (اندازه‌گیری‌شده، نه حدس). CSS نمی‌تواند یک عنصرِ absolute را به لبهٔ صفحه مهار کند چون بلوکِ دربرگیرنده‌اش خودِ .nav-mega کوچک است. پس به‌جای هکِ موقعیت، چیدمان را جوری می‌بندیم که همیشه جا شود: ۲×۲ (۳۸۰px) پیش‌فرض، و ۴×۱ فقط وقتی صفحه واقعاً پهن است. هر دو حالت متقارن‌اند. */ .nav-mega-tip{grid-template-columns:repeat(2,minmax(148px,1fr));gap:20px 18px; width:min(380px,calc(100vw - 32px))} @media(min-width:1240px){ .nav-mega-tip{grid-template-columns:repeat(4,minmax(148px,1fr));width:min(720px,calc(100vw - 32px))} } .nav-mega:hover .nav-mega-tip .nav-mega-col:nth-child(4), .nav-mega:focus-within .nav-mega-tip .nav-mega-col:nth-child(4){opacity:1;transform:none} .nav-mega-tip .nav-mega-col:nth-child(4){transition-delay:.18s} .nav-mega-tip .nm-code{display:inline-block;direction:ltr;font-weight:900;font-size:.8rem; min-width:42px;color:var(--teal-dark)} /* پاورقیِ منو — دو دکمهٔ واقعی، نه لینکِ ریز. قبلاً ۰٫۸۲rem بدونِ پس‌زمینه بود و اصلاً دیده نمی‌شد. */ .nav-mega-foot{grid-column:1/-1;display:flex;align-items:center;gap:10px; margin-top:4px;padding-top:15px;border-top:1px solid var(--line)} .nav-mega-foot a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px; padding:12px 16px!important;border-radius:13px;font-size:.9rem!important;font-weight:800!important; text-align:center;transition:.18s} .nav-mega-foot a:first-child{background:var(--grad-brand);color:#fff!important; box-shadow:0 10px 22px -14px rgba(0,151,109,.9)} .nav-mega-foot a:first-child:hover{transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(0,151,109,.95)} .nav-mega-foot a:last-child{background:var(--teal-soft);color:var(--teal-dark)!important; border:1px solid rgba(0,151,109,.3)} .nav-mega-foot a:last-child:hover{background:#fff;border-color:var(--teal);transform:translateY(-2px)} @media(max-width:980px){ .nav-mega-foot{flex-direction:column} .nav-mega-foot a{width:100%} } /* لینکِ «همهٔ ۱۶ تیپ» زیرِ کارتِ تیپ‌ها در صفحهٔ رشته */ .mj-types-all{display:block;margin-top:11px;padding-top:10px;border-top:1px dashed var(--line); text-align:center;font-size:.82rem;font-weight:800;color:var(--teal-dark)} /* ---------- متنِ مقدماتیِ صفحهٔ مادرِ تیپ‌ها (بخش سئو) ---------- */ .tps-lead{max-width:820px;margin:0 auto 44px;padding:26px 30px;border-radius:22px; background:var(--paper-2);border:1px solid var(--line)} .tps-lead h2{font-size:1.16rem;font-weight:900;margin:22px 0 10px;color:var(--ink)} .tps-lead h2:first-child{margin-top:0} .tps-lead p{font-size:.95rem;line-height:2.15;color:var(--muted);margin-bottom:12px} .tps-lead p:last-child{margin-bottom:0} .tps-lead b{color:var(--ink);font-weight:800} .tps-lead a{color:var(--teal-dark);font-weight:800;border-bottom:1.5px solid var(--teal-soft)} .tps-lead a:hover{border-bottom-color:var(--teal)} @media(max-width:560px){ .tps-lead{padding:20px 18px;border-radius:18px;margin-bottom:34px} .tps-lead h2{font-size:1.04rem} .tps-lead p{font-size:.89rem} } /* لینک‌های خودکارِ داخلِ متنِ مقاله‌ها — باید دیده شوند ولی متن را شلوغ نکنند */ .mj-article .body a,.article .body a{color:var(--teal-dark);font-weight:700; border-bottom:1.5px solid var(--teal-soft);transition:.15s} .mj-article .body a:hover,.article .body a:hover{border-bottom-color:var(--teal);background:var(--teal-soft)}