/* ══════════════════════════════════════════════════════════════════ JobKav — صفحه اول، نسخه «میدان مهارت» (v3) ایده: ادعا = تُهی · اثبات = تُوپُر یک بخش تمام‌قد، رنگ اصلی آبی برند، لهجه نعنایی فقط برای «تأییدشده» نام‌فضای مستقل (jkv-) تا با app.css تداخل نداشته باشد ══════════════════════════════════════════════════════════════════ */ .jkv-home{ /* پالت */ --void:#04102F; --deep:#071C52; --royal:#0A2670; --brand:#1D4ED8; --lift:#5B95FF; --ice:#EDF3FF; --mist:#A6BEEB; --proof:var(--ok-on-dark,#3BE0A6); /* سبزِ وضعیت: تیک، حلقه، مهر */ --hl:var(--accent-on-dark,#FFCF4A); /* طلاییِ رنگ دوم: کلمهٔ تیتر */ --mosaic:url("data:image/svg+xml,"); --hero-pad-x:24px; background:var(--bg); } /* ---------- هدر: روی هیرو شفاف و روشن، بعد از هیرو شیشهٔ روز ---------- */ .jkv-home .site-header{ transition:background .3s ease,border-color .3s ease,box-shadow .3s ease; background:transparent!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important; border-bottom-color:transparent!important;box-shadow:none!important; } .jkv-home .site-header.jkv-solid{ background:var(--glass)!important; -webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important; border-bottom-color:var(--line)!important; box-shadow:0 1px 0 rgba(13,27,54,.04)!important; } /* لوگو: نسخهٔ سفید روی هیرو، نسخهٔ آبی بعد از آن */ .jkv-home .site-header .logo-light{display:none} .jkv-home .site-header .logo-dark{display:block} .jkv-home .site-header.jkv-solid .logo-light{display:block} .jkv-home .site-header.jkv-solid .logo-dark{display:none} .jkv-home .site-nav a{color:#C6D8FF} .jkv-home .site-nav a:hover,.jkv-home .site-nav a.is-active{color:#fff;background:rgba(255,255,255,.10)} .jkv-home .site-header.jkv-solid .site-nav a{color:var(--ink-2)} .jkv-home .site-header.jkv-solid .site-nav a:hover, .jkv-home .site-header.jkv-solid .site-nav a.is-active{color:var(--ink);background:var(--bg-soft)} .jkv-home [data-theme-toggle]{display:none!important} .jkv-home .header-actions .btn-primary{ background:#fff!important;color:#0A2670!important;border-color:transparent!important;font-weight:800; box-shadow:0 14px 30px -14px rgba(0,0,0,.7); } .jkv-home .header-actions .btn-primary:hover{background:#E6EEFF!important;color:#071C52!important} .jkv-home .site-header.jkv-solid .header-actions .btn-primary{ background:var(--brand)!important;color:#fff!important;box-shadow:var(--shadow-1); } .jkv-home .site-header.jkv-solid .header-actions .btn-primary:hover{background:var(--brand-strong)!important} /* ══════════════════════════════ 1) هیرو ══════════════════════════ */ .jkv-hero{ position:relative;isolation:isolate;overflow:hidden; margin-top:calc(-1 * var(--header-h)); padding:calc(var(--header-h) + 10px) 0 138px; min-height:100svh; display:flex;flex-direction:column;justify-content:center; background: radial-gradient(1050px 680px at 50% 22%,rgba(56,122,255,.44),transparent 62%), radial-gradient(900px 520px at 50% 104%,rgba(46,104,230,.30),transparent 62%), radial-gradient(820px 620px at 92% 8%,rgba(24,58,158,.55),transparent 66%), radial-gradient(760px 600px at 4% 92%,rgba(10,34,104,.62),transparent 68%), linear-gradient(176deg,#06184A 0%,#0A2670 40%,#08205E 76%,#061643 100%); } /* تیغهٔ نور نرم پشت تیتر — عمق بدون شلوغی */ .jkv-hero::before{ content:"";position:absolute;z-index:0;pointer-events:none; top:42%;left:50%;width:min(1020px,88%);height:58%; transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(96,152,255,.20),rgba(60,116,230,.09) 54%,transparent 80%); filter:blur(14px); } /* نشست نرم روی بخش بعدی */ .jkv-hero::after{ content:"";position:absolute;inset-inline:0;bottom:0;height:230px;z-index:0;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(6,20,66,.55) 60%,#061643); } .jkv-grain{ position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } /* ---------- موزاییک هندسی: بافت دیوار، امضای صفحه ---------- */ .jkv-mosaic{ position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--mosaic); background-repeat:repeat;background-position:0 0; -webkit-mask-image:radial-gradient(112% 88% at 50% 42%,transparent 0 26%,rgba(0,0,0,.48) 50%,#000 80%), linear-gradient(180deg,#000 0 66%,transparent 96%); mask-image:radial-gradient(112% 88% at 50% 42%,transparent 0 26%,rgba(0,0,0,.48) 50%,#000 80%), linear-gradient(180deg,#000 0 66%,transparent 96%); -webkit-mask-composite:source-in;mask-composite:intersect; opacity:0;animation:mosaicIn 1.8s ease .1s forwards; } @keyframes mosaicIn{to{opacity:1}} /* کاشی‌هایی که گاهی نور می‌گیرند */ .jkv-lit{ position:absolute;inset:0;z-index:0;pointer-events:none; -webkit-mask-image:radial-gradient(66% 52% at 50% 42%,transparent 0 36%,#000 74%), linear-gradient(180deg,#000 0 72%,transparent 96%); mask-image:radial-gradient(66% 52% at 50% 42%,transparent 0 36%,#000 74%), linear-gradient(180deg,#000 0 72%,transparent 96%); -webkit-mask-composite:source-in;mask-composite:intersect; opacity:0;animation:mosaicIn 1.8s ease .5s forwards; } .jkv-lit i{ position:absolute;border-radius:2px; border:1px solid rgba(255,255,255,.95); background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(196,224,255,.06)); box-shadow:0 0 24px 6px rgba(190,222,255,.7),0 0 66px 16px rgba(130,178,255,.3), inset 0 0 14px rgba(255,255,255,.55); opacity:0;animation:tileLit var(--dur,9s) ease-in-out var(--d,0s) infinite; } @keyframes tileLit{ 0%,100%{opacity:0} 3%{opacity:1} 8%{opacity:.5} 13%{opacity:.95} 24%{opacity:.42} 34%{opacity:0} } /* ---------- میدان مهارت ---------- *//* ---------- میدان مهارت ---------- */ .jkv-field{ position:absolute;inset:0;z-index:1;pointer-events:none; -webkit-mask-image:radial-gradient(56% 56% at 50% 46%,transparent 0 50%,#000 99%); mask-image:radial-gradient(56% 56% at 50% 46%,transparent 0 50%,#000 99%); transition:opacity 1.1s ease .2s; } .fc{ position:absolute;top:var(--y);left:var(--x); transform:translate(-50%,-50%) scale(var(--s,1)); display:inline-flex;align-items:center;gap:7px;white-space:nowrap; padding:6px 14px;border-radius:999px; border:1px solid rgba(126,172,255,.18); background:rgba(9,28,80,.34); font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.01em; color:rgba(176,201,244,.52); } .fc svg{width:13px;height:13px;flex:none;opacity:0;transform:scale(.4);color:var(--proof)} .fc.v{animation:fcVerify 17s ease-in-out var(--d,0s) infinite} .fc.v svg{animation:fcTick 17s ease-in-out var(--d,0s) infinite} @keyframes fcVerify{ 0%,6%,26%,100%{ border-color:rgba(126,172,255,.18);color:rgba(176,201,244,.52); background:rgba(9,28,80,.34);box-shadow:none; } 11%,20%{ border-color:rgba(59,224,166,.62);color:#D3F7E9; background:rgba(11,60,50,.42); box-shadow:0 0 0 5px rgba(59,224,166,.07),0 14px 34px -14px rgba(59,224,166,.55); } } @keyframes fcTick{ 0%,7%,25%,100%{opacity:0;transform:scale(.4)} 12%,20%{opacity:1;transform:scale(1)} } /* ---------- محتوای هیرو ---------- */ .jkv-hero-inner{position:relative;z-index:2;text-align:center;width:100%} .jkv-title{ font-family:var(--font-display);font-weight:900; font-size:clamp(32px,6.1vw,84px); line-height:1.46;letter-spacing:-.008em; color:var(--ice);margin:0; } .jkv-title span{display:block;min-height:1.46em} .jkv-title .l1{font-size:.82em;color:#A9C4EF} /* ادعا: با فونت حناچی — تضادِ حروف، نه ترفندِ CSS */ @font-face{ font-family:'Hanachi';font-style:normal;font-weight:900;font-display:swap; src:url('../fonts/hanachi/Hanachi.woff') format('woff'); } .jkv-title .claim{ font-style:normal;font-family:'Hanachi','Pinar',sans-serif;font-weight:900; display:inline-block;font-size:1.28em;line-height:1; color:#C6D9F7;margin:0 .08em;vertical-align:-.09em; } /* اثبات = تُوپُر؛ در پایان تایپ «تأیید» می‌شود */ .jkv-title .proof{ font-style:normal;display:inline-block;color:#E7EFFF; transition:color .65s cubic-bezier(.4,0,.2,1),text-shadow .65s ease; } .jkv-title .proof.is-verified{color:var(--hl);text-shadow:0 0 30px rgba(255,207,74,.30)} .type-caret{ display:inline-block;width:.07em;height:.74em;border-radius:2px; background:currentColor;margin-inline-start:.07em;vertical-align:-.04em; animation:caretBlink .85s steps(1) infinite; } @keyframes caretBlink{50%{opacity:0}} .jkv-lead{ margin:30px auto 0;max-width:min(660px,92%);text-wrap:balance; font-size:clamp(14.5px,1.25vw,17.5px);line-height:2.1;color:#BFD3F5; } .jkv-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:34px} .jkv-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:15px 32px;border-radius:15px;border:1px solid transparent; font-family:var(--font-body);font-size:15.5px;font-weight:700;line-height:1; cursor:pointer;transition:transform .18s ease,background .18s ease,box-shadow .18s ease,border-color .18s ease; } .jkv-btn svg{width:17px;height:17px} .jkv-btn-main{ background:#fff;color:#0A2670;font-weight:800; box-shadow:0 20px 46px -20px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.6) inset; } .jkv-btn-main:hover{background:#E9F0FF;color:#071C52;transform:translateY(-2px);box-shadow:0 26px 54px -20px rgba(0,0,0,.8)} .jkv-btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(160,196,255,.32);color:#E4EDFF} .jkv-btn-ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(190,215,255,.5);color:#fff;transform:translateY(-2px)} .jkv-stats{margin:20px 0 0;font-size:13.5px;color:#9FB8E8} .jkv-stats b{color:#fff;font-weight:800;font-size:16px;margin-inline-end:3px} .jkv-proof-row{ display:flex;justify-content:center;flex-wrap:wrap;gap:12px 30px; position:relative;margin:40px auto 0;padding-top:30px;max-width:860px; } /* جداکننده */ .jkv-proof-row::before{ content:"";position:absolute;top:0;inset-inline:0;height:1px; background:linear-gradient(90deg,transparent,rgba(150,192,255,.32) 24%,rgba(150,192,255,.32) 76%,transparent); } .jkv-proof-row span{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#B7CCF0} .jkv-proof-row svg{width:15px;height:15px;color:var(--proof);flex:none} .jkv-scroll{ position:absolute;z-index:2;bottom:20px;inset-inline:0;margin-inline:auto; width:fit-content;display:flex;flex-direction:column;align-items:center;gap:7px; font-size:11.5px;font-weight:600;color:rgba(168,195,240,.7); } .jkv-scroll:hover{color:#DCE8FF} .jkv-scroll svg{width:16px;height:16px;animation:jkvNudge 2.4s ease-in-out infinite} @keyframes jkvNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} /* ---------- ترتیب ورود: همه‌چیز بعد از پایان تایپ ---------- */ .jkv-lead,.jkv-cta,.jkv-stats,.jkv-proof-row,.jkv-scroll{ transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); } .jkv-hero.is-typing .jkv-lead, .jkv-hero.is-typing .jkv-cta, .jkv-hero.is-typing .jkv-stats, .jkv-hero.is-typing .jkv-proof-row, .jkv-hero.is-typing .jkv-scroll{opacity:0;transform:translateY(16px)} .jkv-hero.is-typing .jkv-field{opacity:0} .jkv-hero.is-typed .jkv-lead{transition-delay:.05s} .jkv-hero.is-typed .jkv-cta{transition-delay:.18s} .jkv-hero.is-typed .jkv-stats{transition-delay:.3s} .jkv-hero.is-typed .jkv-proof-row{transition-delay:.4s} .jkv-hero.is-typed .jkv-scroll{transition-delay:.6s} /* ══════════════════════ 2) بخش کارت مهارت (پایین‌تر) ══════════════ */ .jkv-stage-sec{position:relative;padding:104px 0 56px;overflow:hidden} .jkv-stage-sec::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(900px 560px at 50% 26%,rgba(37,99,235,.09),transparent 68%); } .jkv-stage-sec>.container{position:relative;z-index:1} .jkv-sec-head{text-align:center;max-width:620px;margin:0 auto 76px} .jkv-kicker{ display:inline-flex;align-items:center;gap:8px;margin:0 0 28px; padding:6px 15px;border-radius:999px; border:1px solid rgba(24,133,68,.24);background:var(--ok-soft); font-size:12px;font-weight:700;color:var(--ok-ink); } .jkv-sec-head h2{ font-family:var(--font-display);font-weight:900;margin:0; font-size:clamp(24px,3.1vw,40px);line-height:1.6;color:var(--ink); } .jkv-sec-head p{margin:16px 0 0;text-wrap:balance;font-size:15.5px;line-height:2.1;color:var(--ink-2)} .jkv-stage{position:relative;max-width:1010px;margin:0 auto;min-height:470px} .jkv-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1} /* ---------- کارت پروفایل ---------- */ .jkv-card{ position:absolute;top:0;right:0;z-index:2; width:clamp(325px,calc(100% - 320px),432px); padding:24px 26px 22px;border-radius:26px; border:1px solid var(--line); background:var(--surface); box-shadow:0 34px 70px -30px rgba(30,58,138,.28),0 2px 6px rgba(13,27,54,.05); transform:rotate(-3.2deg); } .jkv-card-head{display:flex;align-items:center;gap:13px} .jkv-avatar{ width:54px;height:54px;flex:none;border-radius:18px;display:grid;place-items:center; background:linear-gradient(140deg,#3B76FF,#1D4ED8);color:#fff; font-family:var(--font-display);font-size:21px;font-weight:800; box-shadow:0 14px 28px -12px rgba(29,78,216,.9); } .jkv-idbox{flex:1;min-width:0} .jkv-idbox strong{display:block;white-space:nowrap;font-size:18px;font-weight:800;color:var(--ink);line-height:1.6} .jkv-idbox small{display:block;white-space:nowrap;font-size:12.5px;color:var(--ink-3);margin-top:2px} .jkv-ring{ position:relative;flex:none;width:62px;height:62px;border-radius:50%;display:grid;place-items:center; background:conic-gradient(var(--ok) calc(var(--val,75)*1%),var(--bg-soft) 0); transition:background .45s ease; } .jkv-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)} .jkv-ring b{position:relative;font-size:14px;font-weight:800;color:var(--ink)} .jkv-ring.is-mid{background:conic-gradient(var(--brand) calc(var(--val,0)*1%),var(--bg-soft) 0)} .jkv-ring.is-low{background:conic-gradient(var(--warn) calc(var(--val,0)*1%),var(--bg-soft) 0)} /* ---------- ردیف‌های شاهد: هستهٔ کارت ---------- */ .jkv-ev-label{ margin:22px 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.04em; color:var(--ink-3);display:flex;align-items:center;gap:10px; } .jkv-ev-label::after{content:"";flex:1;height:1px;background:var(--line)} .jkv-ev-list{display:flex;flex-direction:column;gap:9px;min-height:132px} .ev{ display:flex;align-items:center;gap:11px; padding:10px 13px;border-radius:13px; border:1px solid var(--line);background:var(--surface-2); } .ev-ok{ width:19px;height:19px;flex:none;border-radius:50%;display:grid;place-items:center; background:var(--ok-soft);color:var(--ok); } .ev-ok svg{width:11px;height:11px} .ev-name{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ev-score{ flex:none;padding:3px 10px;border-radius:9px; background:var(--bg-soft);border:1px solid var(--line); font-size:12.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums; } .jkv-card-foot{margin-top:18px;padding-top:15px;border-top:1px dashed var(--line-2)} .jkv-meter{display:block;height:6px;border-radius:99px;background:var(--bg-soft);overflow:hidden} .jkv-meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ok),var(--brand));transition:width .5s ease} .jkv-foot-txt{display:block;margin-top:11px;font-size:11.5px;color:var(--ink-3)} /* نشان تأیید — جانشین مهر طلایی */ .jkv-seal{ position:absolute;bottom:-19px;left:-18px;z-index:3; display:inline-flex;align-items:center;gap:8px; padding:10px 16px;border-radius:14px;transform:rotate(-3.2deg); border:1px solid rgba(255,255,255,.34); background:linear-gradient(150deg,#FFD668,#E9A916); font-size:12.5px;font-weight:800;color:#3A2A00; box-shadow:0 20px 40px -18px rgba(13,27,54,.4); } .jkv-seal svg{width:16px;height:16px;color:#3A2A00} /* ---------- درخواست‌های ورودی ---------- */ .jkv-offer{ position:absolute;z-index:2;display:flex;align-items:center;gap:11px; padding:12px 16px;border-radius:15px;white-space:nowrap; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-1); font-size:12.5px;font-weight:600;color:var(--ink); } .jkv-offer-ic{ width:31px;height:31px;flex:none;border-radius:11px;display:grid;place-items:center; background:var(--brand-050);color:var(--brand); } .jkv-offer-ic svg{width:16px;height:16px} .jkv-offer-ok{ width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center; background:var(--ok);color:#fff; } .jkv-offer-ok svg{width:12px;height:12px} .o1{top:6%;left:0} .o2{top:42%;left:-2%} .o3{top:76%;left:2%} .jkv-path{fill:none;stroke:rgba(37,99,235,.42);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.1 8} .jkv-dot{fill:#12B981} .jkv-pulse{fill:#2563EB} /* ورود صحنه با اسکرول */ .jkv-stage .jkv-card,.jkv-stage .jkv-offer,.jkv-stage .jkv-seal{opacity:0} .jkv-stage.is-in .jkv-card{animation:cardIn .9s cubic-bezier(.22,1,.36,1) .05s both} .jkv-stage.is-in .jkv-seal{animation:sealIn .5s cubic-bezier(.3,1.5,.5,1) .8s both} .jkv-stage.is-in .o1{animation:offerIn .6s cubic-bezier(.22,1.3,.36,1) 1.05s both} .jkv-stage.is-in .o2{animation:offerIn .6s cubic-bezier(.22,1.3,.36,1) 1.25s both} .jkv-stage.is-in .o3{animation:offerIn .6s cubic-bezier(.22,1.3,.36,1) 1.45s both} @keyframes cardIn{from{opacity:0;transform:rotate(-3.2deg) translateY(28px) scale(.97)}to{opacity:1;transform:rotate(-3.2deg)}} @keyframes sealIn{from{opacity:0;transform:rotate(-3.2deg) scale(1.85)}to{opacity:1;transform:rotate(-3.2deg) scale(1)}} @keyframes offerIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}} [data-p-avatar],[data-p-name],[data-p-field],[data-p-rows],[data-p-foot]{transition:opacity .3s ease,transform .3s ease} .is-swap{opacity:0;transform:translateY(6px)} /* ══════════════════════ 3) بخش‌های پایین: تم روز ══════════════════ */ .jkv-home .section-public{position:relative} /* ══════════════════ 3.۵) سه قدم تا همکاری — مسیر متصل ═════════════ */ .jkv-steps-sec{position:relative} .jkv-kicker-brand{border-color:rgba(37,99,235,.24);background:var(--brand-050);color:var(--brand-deep)} .jkv-steps{ position:relative;list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start; } /* مسیر نقطه‌چین: از آبیِ شروع تا طلاییِ مقصد */ .jkv-steps::before{ content:"";position:absolute;top:29px;inset-inline:15%;height:3px;z-index:0;border-radius:99px; background-image:linear-gradient(to left,var(--brand),var(--accent)); -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 17px); mask-image:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 17px); opacity:.75; } .jkv-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center} .jkv-step-node{ width:58px;height:58px;flex:none;border-radius:50%;display:grid;place-items:center; background:var(--surface);border:2px solid var(--brand);color:var(--brand); font-family:var(--font-display);font-weight:900;font-size:21px;line-height:1; box-shadow:0 0 0 10px var(--bg),var(--shadow-1); transition:transform .2s ease; } .jkv-step.is-goal .jkv-step-node{border-color:var(--accent);color:var(--accent-strong)} .jkv-step-card{ position:relative;overflow:hidden;width:100%;margin-top:24px; padding:28px 26px 26px;border-radius:22px;text-align:start; background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; } /* عددِ شبح — لنگر تایپوگرافیک هر قدم */ .jkv-step-card::after{ content:attr(data-n);position:absolute;bottom:-24px;inset-inline-end:10px; font-family:var(--font-display);font-weight:900;font-size:124px;line-height:1; color:var(--brand);opacity:.055;pointer-events:none; } .jkv-step.is-goal .jkv-step-card::after{color:var(--accent-strong);opacity:.09} .jkv-step.is-goal .jkv-step-card{border-color:rgba(255,207,74,.5)} .jkv-step:hover .jkv-step-card{transform:translateY(-4px);box-shadow:var(--shadow-2)} .jkv-step:hover .jkv-step-node{transform:scale(1.06)} .jkv-step-ic{ position:relative;width:50px;height:50px;border-radius:16px;display:grid;place-items:center; background:var(--brand-050);color:var(--brand);margin-bottom:18px; } .jkv-step-ic svg{width:25px;height:25px} .jkv-step.is-goal .jkv-step-ic{background:var(--accent-soft);color:var(--accent-strong)} .jkv-step-card h3{ position:relative;margin:0;font-family:var(--font-display);font-weight:900; font-size:19px;line-height:1.7;color:var(--ink); } .jkv-step-card p{position:relative;margin:10px 0 0;font-size:14.5px;line-height:2;color:var(--ink-2)} .jkv-step-tag{ position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:20px; padding:7px 14px;border-radius:999px; background:var(--bg-soft);border:1px solid var(--line); font-size:12px;font-weight:700;color:var(--ink-2); } .jkv-step-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)} .jkv-step.is-goal .jkv-step-tag{background:var(--accent-soft);border-color:rgba(255,207,74,.42);color:var(--accent-ink)} .jkv-step.is-goal .jkv-step-tag::before{background:var(--accent-strong)} @media (max-width:900px){ .jkv-steps{grid-template-columns:1fr;gap:16px} .jkv-steps::before{ inset-inline:auto;inset-inline-start:auto;right:28px;left:auto; top:30px;bottom:90px;width:3px;height:auto; background-image:linear-gradient(to bottom,var(--brand),var(--accent)); -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 7px,transparent 7px 17px); mask-image:repeating-linear-gradient(180deg,#000 0 7px,transparent 7px 17px); } .jkv-step{flex-direction:row;align-items:flex-start;gap:18px} .jkv-step-node{width:50px;height:50px;font-size:19px;box-shadow:0 0 0 8px var(--bg),var(--shadow-1)} .jkv-step-card{margin-top:0} .jkv-step-card::after{font-size:110px;bottom:-28px} } @media (prefers-reduced-motion:reduce){ .jkv-step-card,.jkv-step-node{transition:none} .jkv-step-card:hover{transform:none} } /* ══════════════════ 3.۲) ویژگی‌ها ═══════════════════════════════ */ .jkv-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .jkv-feat{ position:relative;overflow:hidden;padding:34px 28px 30px;border-radius:24px; background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1); transition:transform .22s ease,box-shadow .22s ease; } /* نوار رنگیِ بالای کارت — هویت هر مخاطب */ .jkv-feat::before{ content:"";position:absolute;top:0;inset-inline:0;height:4px; background:var(--c,var(--brand)); } .jkv-feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)} .jkv-feat.is-job{--c:var(--brand);--c-soft:var(--brand-050)} .jkv-feat.is-emp{--c:var(--violet);--c-soft:var(--violet-soft)} .jkv-feat.is-kav{--c:var(--accent-strong);--c-soft:var(--accent-soft)} .jkv-feat-ic{ width:54px;height:54px;border-radius:17px;display:grid;place-items:center; background:var(--c-soft);color:var(--c);margin-bottom:20px; } .jkv-feat-ic svg{width:27px;height:27px} .jkv-feat h3{margin:0;font-family:var(--font-display);font-weight:900;font-size:20px;line-height:1.7;color:var(--ink)} .jkv-feat p{margin:10px 0 0;font-size:14.5px;line-height:2;color:var(--ink-2)} .jkv-feat-list{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px dashed var(--line-2);display:grid;gap:11px} .jkv-feat-list li{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:600;color:var(--ink-2);line-height:1.9} .jkv-feat-list svg{width:15px;height:15px;flex:none;color:var(--c);margin-top:3px} /* ══════════════════ 3.۹) نوار پایانی — تمام‌عرض ════════════════ */ .jkv-cta-band{ position:relative;isolation:isolate;overflow:hidden; margin-top:110px;padding:120px 0 128px;text-align:center; background: radial-gradient(1000px 640px at 50% 8%,rgba(56,122,255,.42),transparent 62%), radial-gradient(780px 560px at 92% 96%,rgba(24,58,158,.5),transparent 66%), linear-gradient(168deg,#0A2670 0%,#08205E 52%,#061643 100%); } .jkv-cta-mosaic{ position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--mosaic);background-repeat:repeat;background-position:0 0; -webkit-mask-image:radial-gradient(100% 92% at 50% 50%,transparent 0 26%,rgba(0,0,0,.5) 52%,#000 86%); mask-image:radial-gradient(100% 92% at 50% 50%,transparent 0 26%,rgba(0,0,0,.5) 52%,#000 86%); opacity:.9; } .jkv-cta-glow{ position:absolute;z-index:0;pointer-events:none; top:44%;left:50%;width:min(980px,86%);height:60%;transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(96,152,255,.22),transparent 78%);filter:blur(16px); } .jkv-cta-in{position:relative;z-index:1} .jkv-cta-kicker{ display:inline-flex;align-items:center;gap:9px;margin:0 0 26px; padding:8px 18px;border-radius:999px; border:1px solid rgba(255,207,74,.4);background:rgba(255,207,74,.10); font-size:12.5px;font-weight:700;color:var(--accent-on-dark); } .jkv-cta-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-on-dark)} .jkv-cta-band h2{ margin:0;font-family:var(--font-display);font-weight:900; font-size:clamp(28px,4.4vw,58px);line-height:1.5;color:#fff;letter-spacing:-.006em; } .jkv-cta-band h2 em{font-style:normal;color:var(--accent-on-dark)} .jkv-cta-lead{ margin:24px auto 0;max-width:min(600px,90%);text-wrap:balance; font-size:clamp(14.5px,1.25vw,17px);line-height:2.1;color:#BCD0F2; } .jkv-cta-actions{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:38px} .jkv-cta-facts{ display:flex;justify-content:center;flex-wrap:wrap;gap:12px 30px; margin:46px auto 0;padding-top:30px;max-width:820px; border-top:1px solid rgba(150,192,255,.2); } .jkv-cta-facts span{ display:inline-flex;align-items:center;gap:9px; font-size:13px;font-weight:600;color:#B7CCF0; } .jkv-cta-facts span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok-on-dark)} @media (max-width:900px){ .jkv-feat-grid{grid-template-columns:1fr;gap:16px} .jkv-cta-band{margin-top:76px;padding:82px 0 88px} .jkv-cta-actions{flex-direction:column;align-items:stretch} .jkv-cta-actions .jkv-btn{width:100%} .jkv-cta-facts{flex-direction:column;align-items:center;gap:12px;margin-top:36px;padding-top:24px} } @media (prefers-reduced-motion:reduce){.jkv-feat{transition:none}.jkv-feat:hover{transform:none}} /* ══════════════════════════════ ریسپانسیو ═══════════════════════ */ @media (max-width:1100px){ .jkv-card{width:clamp(300px,calc(100% - 240px),430px)} .o2{left:0} } @media (max-width:900px){ .jkv-hero{padding:calc(var(--header-h) + 20px) 0 110px;min-height:100svh} .jkv-field{-webkit-mask-image:radial-gradient(78% 42% at 50% 46%,transparent 0 62%,#000 100%); mask-image:radial-gradient(78% 42% at 50% 46%,transparent 0 62%,#000 100%)} .fc.d{display:none} .jkv-hero::before{opacity:.3;background-size:76px 100%} .jkv-title{font-size:clamp(30px,6.4vw,46px)} .jkv-proof-row{gap:10px 20px} .jkv-stage-sec{padding:70px 0 30px} .jkv-stage{min-height:0;display:flex;flex-direction:column;align-items:center;gap:13px} .jkv-links{display:none} .jkv-card{position:relative;top:0;right:0;width:min(440px,100%);transform:none;margin-bottom:28px} .jkv-offer{position:relative;top:auto;left:auto;width:min(440px,100%)} .jkv-stage.is-in .jkv-card{animation:cardInFlat .8s cubic-bezier(.22,1,.36,1) both} .jkv-stage.is-in .jkv-seal{animation:sealInFlat .5s cubic-bezier(.3,1.5,.5,1) .6s both} @keyframes cardInFlat{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes sealInFlat{from{opacity:0;transform:rotate(-3.2deg) scale(1.8)}to{opacity:1;transform:rotate(-3.2deg) scale(1)}} } @media (max-width:640px){ .jkv-hero{padding:calc(var(--header-h) + 14px) 0 64px} .jkv-title{font-size:clamp(29px,9.5vw,44px);line-height:1.5} .jkv-lead{margin-top:22px;line-height:2} .jkv-cta{margin-top:26px;flex-direction:column;align-items:stretch} .jkv-btn{width:100%} .jkv-proof-row{margin-top:28px;padding-top:20px;flex-direction:column;align-items:center;gap:10px} .jkv-scroll{display:none} .jkv-field{display:none} .jkv-lit i:nth-child(n+19){display:none} .jkv-hero::before{opacity:.22} .jkv-ev-list{min-height:0} } @media (min-width:901px) and (max-height:780px){ .jkv-hero{padding:calc(var(--header-h) + 10px) 0 104px} .jkv-title{font-size:clamp(30px,4.6vw,58px)} .jkv-lead{margin-top:22px;line-height:1.95} .jkv-cta{margin-top:26px} .jkv-proof-row{margin-top:26px;padding-top:20px} } @media (prefers-reduced-motion:reduce){ .jkv-lead,.jkv-cta,.jkv-stats,.jkv-proof-row,.jkv-scroll,.jkv-field, .fc,.jkv-stage.is-in .jkv-card,.jkv-stage.is-in .jkv-seal, .jkv-stage.is-in .o1,.jkv-stage.is-in .o2,.jkv-stage.is-in .o3{ animation:none!important;opacity:1!important;transform:none!important; } .jkv-card{transform:rotate(-3.2deg)!important} .jkv-seal{transform:rotate(-3.2deg)!important} .jkv-title .proof{color:var(--hl);transition:none} .jkv-mosaic,.jkv-lit{animation:none;opacity:1} .jkv-lit i{animation:none;opacity:.32} .fc.v,.fc.v svg{animation:none} .fc.v svg{opacity:1;transform:none} .type-caret{display:none} .jkv-scroll svg{animation:none} }