/* triple18's Platcom — inspired by apple.com: quiet surfaces, big type, generous space */ @font-face { font-family: "Vazirmatn"; src: url("/static/fonts/Vazirmatn-wght.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; } :root { --bg: #fff; --bg2: #f5f5f7; --bg3: #fbfbfd; --card: #fff; --text: #1d1d1f; --text2: #6e6e73; --text3: #86868b; --line: #d2d2d7; --line2: rgba(0,0,0,.08); --link: #0066cc; --btn: #0071e3; --btn-h: #0077ed; --btn-text: #fff; --nav: rgba(250,250,252,.78); --nav-text: #1d1d1f; --shadow: 0 2px 12px rgba(0,0,0,.06), 0 12px 40px rgba(0,0,0,.06); --ok: #1a7f37; --ok-bg: #e8f6ec; --warn: #b25000; --warn-bg: #fff4e5; --err: #d70015; --err-bg: #fdecee; --info-bg: #e8f1fd; --dev: #1d1d1f; --r: 18px; --r-lg: 28px; --pad: max(16px, 4vw); --maxw: 1024px; --font: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif; --latin: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Inter, Arial, sans-serif; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000; --bg2: #161617; --bg3: #0b0b0c; --card: #1d1d1f; --text: #f5f5f7; --text2: #a1a1a6; --text3: #86868b; --line: #424245; --line2: rgba(255,255,255,.1); --link: #2997ff; --nav: rgba(22,22,23,.8); --nav-text: #f5f5f7; --shadow: 0 2px 16px rgba(0,0,0,.5); --ok: #30d158; --ok-bg: rgba(48,209,88,.14); --warn: #ffb340; --warn-bg: rgba(255,159,10,.14); --err: #ff6961; --err-bg: rgba(255,69,58,.15); --info-bg: rgba(41,151,255,.14); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #000; --bg2: #161617; --bg3: #0b0b0c; --card: #1d1d1f; --text: #f5f5f7; --text2: #a1a1a6; --text3: #86868b; --line: #424245; --line2: rgba(255,255,255,.1); --link: #2997ff; --nav: rgba(22,22,23,.8); --nav-text: #f5f5f7; --shadow: 0 2px 16px rgba(0,0,0,.5); --ok: #30d158; --ok-bg: rgba(48,209,88,.14); --warn: #ffb340; --warn-bg: rgba(255,159,10,.14); --err: #ff6961; --err-bg: rgba(255,69,58,.15); --info-bg: rgba(41,151,255,.14); color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.75 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.25; text-wrap: balance; } p { margin: 0; } .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } .latin { font-family: var(--latin); } .muted { color: var(--text2); } .small { font-size: 14px; } .nowrap { white-space: nowrap; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .only-dark { display: none !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .only-dark { display: block !important; } :root:not([data-theme="light"]) .only-light { display: none !important; } } :root[data-theme="dark"] .only-dark { display: block !important; } :root[data-theme="dark"] .only-light { display: none !important; } /* ---------- global nav ---------- */ .gnav { position: sticky; top: 0; z-index: 50; height: 48px; background: var(--nav); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line2); } .gnav .wrap { height: 100%; display: flex; align-items: center; gap: 28px; } .brand { font-family: var(--latin); direction: ltr; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--nav-text) !important; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; } .brand:hover { text-decoration: none; opacity: .8; } .brand .mark { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #0a84ff, #bf5af2 55%, #ff375f); letter-spacing: -.04em; } .brand b { font-weight: 700; } .gnav nav { display: flex; gap: 26px; flex: 1; } .gnav nav a, .gnav .tools a { color: var(--nav-text); opacity: .82; font-size: 14px; } .gnav nav a:hover, .gnav .tools a:hover { opacity: 1; text-decoration: none; } .gnav nav a.on { opacity: 1; font-weight: 600; } .gnav .tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; } .icon-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: none; border: 0; color: var(--nav-text); cursor: pointer; opacity: .82; padding: 0; } .icon-btn:hover { opacity: 1; background: var(--line2); } .icon-btn svg { width: 18px; height: 18px; } .menu-btn { display: none; } .mnav { display: none; } @media (max-width: 760px) { .gnav nav { display: none; } .menu-btn { display: grid; } .mnav { position: fixed; inset: 48px 0 0; z-index: 49; background: var(--bg); padding: 24px var(--pad); flex-direction: column; gap: 4px; } .mnav.open { display: flex; animation: mnavIn .38s cubic-bezier(.22,1,.36,1); } .mnav.open a { animation: mnavIn .5s cubic-bezier(.22,1,.36,1) backwards; } .mnav.open a:nth-child(2) { animation-delay: .04s; } .mnav.open a:nth-child(3) { animation-delay: .08s; } .mnav.open a:nth-child(4) { animation-delay: .12s; } .mnav a { font-size: 26px; font-weight: 700; color: var(--text); padding: 8px 0; } } @keyframes fade { from { opacity: 0; transform: translateY(-6px); } } @keyframes mnavIn { from { opacity: 0; transform: translate3d(0, -10px, 0); } } /* ---------- buttons & links ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 22px; border-radius: 980px; border: 0; background: var(--btn); color: var(--btn-text) !important; font: 500 16px/1.2 var(--font); cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, opacity .3s ease, transform .25s cubic-bezier(.22,1,.36,1); } .btn:hover { background: var(--btn-h); } .btn:active { transform: scale(.97); transition-duration: .08s; } .btn.sm { min-height: 34px; padding: 6px 16px; font-size: 14px; } .btn.ghost { background: transparent; color: var(--link) !important; box-shadow: inset 0 0 0 1px var(--link); } .btn.ghost:hover { background: var(--link); color: #fff !important; } .btn.gray { background: var(--bg2); color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--line2); } .btn.gray:hover { background: var(--line2); } .btn.danger { background: var(--err-bg); color: var(--err) !important; } .btn.ok { background: var(--ok); } .btn.block { width: 100%; } .btn[disabled] { opacity: .5; pointer-events: none; } .more { font-size: 17px; white-space: nowrap; } .more::after { content: " ‹"; font-size: 1.1em; } .ctas { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 22px; } /* ---------- home ---------- */ .hero { text-align: center; padding: clamp(64px, 11vw, 132px) 0 clamp(40px, 6vw, 72px); background: var(--bg); } .hero h1 { font-size: clamp(38px, 7vw, 80px); line-height: 1.15; } .hero .sub { font-size: clamp(19px, 2.4vw, 26px); color: var(--text2); margin: 18px auto 0; max-width: 720px; line-height: 1.6; } .hero .glow { display: inline-block; background: linear-gradient(90deg, #0a84ff, #bf5af2 45%, #ff375f); -webkit-background-clip: text; background-clip: text; color: transparent; } .tiles { display: grid; gap: 12px; padding: 0 12px 12px; } .tile { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--bg2); text-align: center; padding: clamp(48px, 7vw, 72px) var(--pad) 0; min-height: 600px; display: flex; flex-direction: column; isolation: isolate; } .tile.dark { background: #fbfbfd; background: linear-gradient(160deg, color-mix(in srgb, var(--a1, #0a84ff) 10%, #fff), color-mix(in srgb, var(--a2, #bf5af2) 7%, #fff)); } .tile.gradient { color: #fff; --text2: rgba(255,255,255,.85); --link: #fff; } .tile.gradient::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(140deg, var(--a1), var(--a2)); } .tile .eyebrow { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; line-height: 1.2; } .tile .eyebrow .en { font-family: var(--latin); font-weight: 700; letter-spacing: -.03em; } .grad-text { background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tile.gradient .grad-text { background: none; color: #fff; } .tile h2 { font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; margin-top: 6px; } .tile .sum { color: var(--text2); max-width: 600px; margin: 10px auto 0; } .tile .ctas { margin-top: 18px; } .tile .art { margin-top: auto; padding-top: 40px; display: flex; justify-content: center; align-items: flex-end; gap: 18px; } .tile .art .phone { width: clamp(210px, 21vw, 262px); margin-bottom: -110px; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .tile .art .phone.side { width: clamp(170px, 17vw, 212px); margin-bottom: -160px; opacity: .97; } @media (max-width: 640px) { .tile .art .phone.side { display: none; } .tile .art .phone { width: min(250px, 66vw); } .tile { min-height: 560px; } } .tile:hover .art .phone.center { transform: translateY(-10px); } .why { padding: clamp(64px, 9vw, 110px) 0; } .why h2 { font-size: clamp(32px, 5vw, 56px); text-align: center; } .why .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 44px; } .why .card { background: var(--bg2); border-radius: var(--r-lg); padding: 32px 28px; } .why .card .ic { font-size: 34px; } .why .card h3 { font-size: 22px; margin: 14px 0 8px; } .why .card p { color: var(--text2); } .soon { text-align: center; color: var(--text3); padding: 0 0 80px; font-size: 15px; } /* ---------- devices ---------- */ /* قاب آیفون: صفحه زیر جزیره‌ی پویا (نوار وضعیت) شروع می‌شود تا تصویر پوشیده نشود */ /* درصد padding نسبت به عرض والد حساب می‌شود (در دسکتاپ قاب ضخیم و تصویر بریده می‌شد)؛ پس صفحه absolute است */ .phone { position: relative; aspect-ratio: 100 / 209; border-radius: 15% / 7.2%; background: #1d1d1f; flex: none; box-shadow: 0 0 0 1.5px #3a3a3c inset, 0 30px 60px -20px rgba(0,0,0,.35), 0 18px 36px -18px rgba(0,0,0,.35); container-type: inline-size; } .phone::before { content: ""; position: absolute; top: 2.7%; left: 50%; width: 29%; height: 3.3%; transform: translateX(-50%); background: #000; border-radius: 99px; z-index: 3; /* حاله: مرز جزیره روی صفحه‌ی تیره هم دیده شود */ box-shadow: 0 0 0 1.5px rgba(255,255,255,.16), 0 0 0 4px rgba(0,0,0,.18), 0 0 10px 3px rgba(120,120,128,.28); } .phone .scr { position: absolute; top: 1.55%; bottom: 1.55%; left: 3.3%; right: 3.3%; border-radius: 12.5% / 5.9%; overflow: hidden; background: #fff; display: flex; flex-direction: column; } .phone .scr.dk { background: #000; } .phone .sb { flex: none; height: 6.4%; display: flex; align-items: center; justify-content: space-between; direction: ltr; padding: 0 9% 0 10%; font: 600 5.2cqw/1 var(--latin); color: #000; letter-spacing: -.02em; } .phone .scr.dk .sb { color: #fff; } .phone .sb i { display: inline-block; width: 7cqw; height: 3.2cqw; border-radius: 1cqw; border: .45cqw solid currentColor; opacity: .9; position: relative; } .phone .sb i::after { content: ""; position: absolute; inset: .45cqw; right: 1.6cqw; background: currentColor; border-radius: .3cqw; } .phone .scr img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; background: inherit; } .laptop { max-width: 920px; margin: 0 auto; padding: 0 6%; } .laptop .screen { background: #1d1d1f; padding: 1.6% 1.6% 2.4%; border-radius: 20px 20px 0 0; box-shadow: 0 0 0 1.5px #3a3a3c inset; } .laptop .screen img { border-radius: 6px; width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; } .laptop .base { height: 16px; margin: 0 -7%; border-radius: 0 0 18px 18px; background: linear-gradient(#e2e3e5, #b9babc); box-shadow: 0 20px 40px -18px rgba(0,0,0,.5); position: relative; } .laptop .base::before { content: ""; position: absolute; top: 0; left: 42%; right: 42%; height: 6px; border-radius: 0 0 8px 8px; background: #a7a8aa; } /* ---------- product page ---------- */ .lnav { position: sticky; top: 48px; z-index: 40; height: 52px; background: var(--nav); border-bottom: 1px solid var(--line2); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .lnav .wrap { height: 100%; display: flex; align-items: center; gap: 22px; } .lnav .title { font-size: 20px; font-weight: 700; margin-inline-end: auto; color: var(--text); } .lnav a.l { font-size: 13px; color: var(--text); opacity: .8; } @media (max-width: 640px) { .lnav a.l { display: none; } } .p-hero { text-align: center; padding: clamp(56px, 9vw, 110px) 0 0; overflow: hidden; } .p-hero .name { font-size: clamp(22px, 3vw, 30px); font-weight: 700; } .p-hero .name .en { font-family: var(--latin); letter-spacing: -.02em; color: var(--text2); font-weight: 600; margin-inline-start: 8px; } .p-hero h1 { font-size: clamp(40px, 8vw, 96px); line-height: 1.12; margin-top: 8px; } .p-hero .sum { font-size: clamp(18px, 2.2vw, 24px); color: var(--text2); max-width: 680px; margin: 22px auto 0; line-height: 1.6; } .p-hero .art { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 3vw, 40px); margin-top: clamp(48px, 7vw, 80px); padding: 0 var(--pad); } .p-hero .art .phone { width: clamp(220px, 23vw, 290px); } .p-hero .art .phone.side { width: clamp(180px, 18vw, 232px); transform: translateY(40px); } @media (max-width: 640px) { .p-hero .art .phone.side { display: none; } } .p-hero .halo { position: absolute; inset: 15% 10% -10%; z-index: -1; filter: blur(80px); opacity: .35; background: radial-gradient(closest-side, var(--a1), transparent), radial-gradient(closest-side at 70% 60%, var(--a2), transparent); } .sec { padding: clamp(72px, 10vw, 140px) 0; position: relative; overflow-x: clip; } .sec.gray { background: var(--bg2); } .sec.dark { background: #fbfbfd; background: linear-gradient(180deg, color-mix(in srgb, var(--a1, #0a84ff) 9%, #fff), color-mix(in srgb, var(--a2, #bf5af2) 6%, #fff)); --card: #fff; } .sec.dark .grid3 .card, .sec.dark .steps .st { box-shadow: var(--shadow); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sec.dark, :root:not([data-theme="light"]) .tile.dark { background: #000; color: #f5f5f7; --text2: #a1a1a6; --card: #1d1d1f; --bg2: #161617; --line2: rgba(255,255,255,.1); --link: #2997ff; box-shadow: none; } } :root[data-theme="dark"] .sec.dark, :root[data-theme="dark"] .tile.dark { background: #000; color: #f5f5f7; --text2: #a1a1a6; --card: #1d1d1f; --bg2: #161617; --line2: rgba(255,255,255,.1); --link: #2997ff; } .sec.accent { color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); --text2: rgba(255,255,255,.88); } .sec.accent .grad-text { background: none; color: rgba(255,255,255,.92); -webkit-text-fill-color: currentColor; } .eyebrow-s { font-size: clamp(17px, 2vw, 21px); font-weight: 700; margin-bottom: 10px; } .eyebrow-s.grad-text { display: inline-block; } .sec h2 { font-size: clamp(32px, 5.4vw, 64px); line-height: 1.2; white-space: pre-line; } .sec .lead { font-size: clamp(17px, 2vw, 21px); color: var(--text2); line-height: 1.75; margin-top: 18px; max-width: 640px; } .sec .center { text-align: center; } .sec .center .lead { margin-inline: auto; } .feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; } .feature-split.end .media { order: -1; } .feature-split .media { display: flex; justify-content: center; } .feature-split .media .phone { width: clamp(230px, 26vw, 300px); } @media (max-width: 820px) { .feature-split { grid-template-columns: 1fr; text-align: center; } .feature-split .lead { margin-inline: auto; } .feature-split.end .media { order: 0; } } .feature-wide .media { margin-top: clamp(40px, 6vw, 72px); } .hl-wrap { position: relative; } .hl { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 36px var(--pad) 8px; scrollbar-width: none; scroll-padding: 0 var(--pad); } .hl::-webkit-scrollbar { display: none; } .hl .card { flex: 0 0 min(372px, 82vw); scroll-snap-align: start; background: var(--card); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; height: 620px; box-shadow: var(--shadow); } .sec.gray .hl .card { box-shadow: none; } .hl .card .cap { padding: 30px 30px 0; } .hl .card .cap h3 { font-size: 22px; } .hl .card .cap p { color: var(--text2); font-size: 16px; margin-top: 6px; } .hl .card .ph { margin-top: auto; display: flex; justify-content: center; padding-top: 24px; overflow: hidden; height: 430px; } .hl .card .ph .phone { width: 260px; height: max-content; } .hl-ctrl { display: flex; gap: 12px; justify-content: center; margin-top: 18px; } .hl-ctrl button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--line2); color: var(--text); font-size: 22px; cursor: pointer; line-height: 1; } .hl-ctrl button:hover { background: var(--line); } .grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 48px; } .grid3 .card { background: var(--bg2); border-radius: var(--r); padding: 28px; } .sec.gray .grid3 .card { background: var(--card); } .grid3 .ic { font-size: 30px; line-height: 1; } .grid3 h3 { font-size: 20px; margin: 14px 0 6px; } .grid3 p { color: var(--text2); font-size: 16px; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; text-align: center; } .stats .v { font-size: clamp(56px, 8vw, 96px); font-weight: 900; line-height: 1.1; } .stats .t { font-size: 21px; font-weight: 700; margin-top: 6px; } .stats .d { color: var(--text2); font-size: 15px; } .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin-top: 48px; counter-reset: s; } .steps .st { counter-increment: s; background: var(--card); border-radius: var(--r); padding: 26px; } .steps .st::before { content: counter(s, persian); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--a1), var(--a2)); margin-bottom: 16px; } .steps h3 { font-size: 20px; } .steps p { color: var(--text2); font-size: 16px; margin-top: 6px; } .faq { max-width: 820px; margin: 40px auto 0; } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 22px 0; font-size: clamp(18px, 2vw, 22px); font-weight: 700; display: flex; justify-content: space-between; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-weight: 300; font-size: 28px; line-height: 1; color: var(--text2); transition: transform .35s cubic-bezier(.22,1,.36,1); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { color: var(--text2); padding: 0 0 24px; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: 48px; justify-items: center; } .gallery .phone { width: 100%; max-width: 260px; } .gallery figcaption { text-align: center; color: var(--text2); font-size: 15px; margin-top: 14px; } .cta h2 { font-size: clamp(40px, 7vw, 80px); } .price-note { margin-top: 18px; font-size: 15px; opacity: .85; } .sec.accent .btn { background: #fff; color: #1d1d1f !important; } /* reveal on scroll */ .rv { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1); transition-delay: var(--rvd, 0s); will-change: opacity, transform; } .rv.in { will-change: auto; } .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- footer ---------- */ .foot { background: var(--bg2); color: var(--text3); font-size: 13px; padding: 28px 0 40px; line-height: 1.9; } .foot .row { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; } .foot a { color: var(--text2); } .foot .brand { color: var(--text2) !important; font-size: 14px; } /* ---------- forms ---------- */ .form-page { min-height: calc(100vh - 48px); background: var(--bg2); padding: clamp(32px, 6vw, 72px) var(--pad); } .form-card { max-width: 560px; margin: 0 auto; background: var(--card); border-radius: var(--r-lg); padding: clamp(28px, 5vw, 48px); box-shadow: var(--shadow); } .form-card.narrow { max-width: 440px; } .form-card h1 { font-size: clamp(28px, 4vw, 40px); } .form-card .f-intro { color: var(--text2); margin-top: 8px; } .field { display: block; margin-top: 18px; } .field > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .field > span em { font-style: normal; color: var(--text3); font-weight: 400; } input[type=text], input[type=tel], input[type=password], input[type=email], input[type=number], input[type=search], input[type=url], select, textarea { width: 100%; font: 400 17px/1.5 var(--font); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline: none; transition: border-color .15s, box-shadow .15s; } .form-card input, .form-card select, .form-card textarea { background: var(--bg3); } input:focus, select:focus, textarea:focus { border-color: var(--btn); box-shadow: 0 0 0 4px rgba(0,113,227,.18); } textarea { min-height: 110px; resize: vertical; } input.code { font-family: var(--latin); text-align: center; letter-spacing: .5em; font-size: 26px; direction: ltr; } input.ltr-in { direction: ltr; text-align: left; } .field .err { color: var(--err); font-size: 14px; margin-top: 4px; display: block; } .field.bad input, .field.bad select { border-color: var(--err); } .alert { border-radius: 12px; padding: 12px 16px; font-size: 15px; margin-top: 16px; } .alert.err { background: var(--err-bg); color: var(--err); } .alert.ok { background: var(--ok-bg); color: var(--ok); } .alert.info { background: var(--info-bg); color: var(--text); } .alert.warn { background: var(--warn-bg); color: var(--warn); } .form-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .linkish { background: none; border: 0; padding: 0; color: var(--link); font: inherit; cursor: pointer; font-size: 15px; } .linkish:hover { text-decoration: underline; } .trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; } .seg { display: flex; gap: 8px; flex-wrap: wrap; } .seg label { cursor: pointer; } .seg input { position: absolute; opacity: 0; } .seg span { display: inline-block; padding: 8px 16px; border-radius: 99px; background: var(--bg2); font-size: 15px; box-shadow: inset 0 0 0 1px var(--line2); } .seg input:checked + span { background: var(--btn); color: #fff; box-shadow: none; } .seg input:focus-visible + span { outline: 2px solid var(--btn); outline-offset: 2px; } .done-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; color: #fff; background: linear-gradient(135deg, #30d158, #0a84ff); margin: 0 auto 18px; } /* toast */ .toast { position: fixed; z-index: 100; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 14px; background: var(--dev); color: #fff; font-size: 15px; box-shadow: var(--shadow); animation: toast 4.5s ease forwards; } .toast.err { background: #c4001a; } :root[data-theme="dark"] .toast:not(.err) { background: #3a3a3c; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast:not(.err) { background: #3a3a3c; } } @keyframes toast { 0% { opacity: 0; transform: translate(-50%, 12px); } 6%, 88% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 6px); visibility: hidden; } } .err-page { text-align: center; padding: 120px var(--pad); } .err-page .code { font-family: var(--latin); font-size: 96px; font-weight: 800; letter-spacing: -.04em; color: var(--text3); } /* ---------- ورود با بله ---------- */ .login-card { text-align: center; } .login-card .field, .login-card form { text-align: start; } .bale-btn { margin-top: 24px; min-height: 52px; font-size: 18px; font-weight: 700; gap: 10px; background: linear-gradient(135deg, #00b894, #0a84ff); } .bale-btn:hover { background: linear-gradient(135deg, #00a383, #0077ed); } .login-alt { margin-top: 18px; display: grid; justify-items: center; gap: 8px; } .login-alt .qr { display: grid; justify-items: center; gap: 6px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line2); color: #000; margin-bottom: 6px; } .login-alt .qr span { font-size: 12px; color: #6e6e73; } .login-alt .qr svg { display: block; border-radius: 6px; } @media (max-width: 700px), (hover: none) { .only-wide { display: none !important; } } .lg-opt { text-align: start; border-radius: 20px; margin-top: 22px; } .lg-opt.main { background: var(--bg2); padding: 22px 20px 18px; } .lg-opt h2 { font-size: 21px; } .lg-opt .lg-d { color: var(--text2); font-size: 15px; margin-top: 6px; line-height: 1.85; } .lg-opt .bale-btn { margin-top: 16px; } .lg-more { margin-top: 14px; } .lg-more summary, .lg-opt.alt summary { cursor: pointer; list-style: none; color: var(--link); font-size: 15px; } .lg-more summary::-webkit-details-marker, .lg-opt.alt summary::-webkit-details-marker { display: none; } .lg-more[open] summary { color: var(--text2); margin-bottom: 12px; } .lg-more .qr { display: grid; justify-items: center; gap: 6px; padding: 12px; border-radius: 18px; background: #fff; width: max-content; margin: 0 auto 12px; box-shadow: inset 0 0 0 1px var(--line2); color: #000; } .lg-more .qr span { font-size: 12px; color: #6e6e73; } .lg-more .qr svg { display: block; border-radius: 6px; } .lg-steps { margin: 0; padding-inline-start: 20px; font-size: 15px; line-height: 2; } .sc-row { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; flex-wrap: wrap; } .lg-opt .wait { display: flex; justify-content: center; } .lg-opt.alt { box-shadow: inset 0 0 0 1px var(--line); padding: 16px 20px; } .lg-opt.alt summary { color: var(--text); display: grid; gap: 2px; } .lg-opt.alt summary b { font-size: 17px; } .lg-opt.alt summary span { color: var(--text2); font-size: 14px; } .lg-opt.alt summary::after { content: "+"; position: absolute; } .lg-opt.alt { position: relative; } .lg-opt.alt summary::after { inset-inline-end: 20px; top: 16px; font-size: 24px; color: var(--text2); transition: transform .2s; } .lg-opt.alt[open] summary::after { transform: rotate(45deg); } .lg-opt.alt form { margin-top: 14px; } #paste-code { margin-top: 8px; font-size: 14px; } .short-code { font: 700 30px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .22em; padding: 8px 18px 8px 24px; border-radius: 14px; background: var(--bg2); user-select: all; } .wait { margin-top: 18px; display: inline-flex; gap: 10px; align-items: center; color: var(--text2); font-size: 15px; } .wait.bad { color: var(--err); } .wait.bad .spin { display: none; } .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--btn); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .or { display: flex; align-items: center; gap: 12px; color: var(--text3); font-size: 13px; margin: 28px 0 0; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ---------- وضعیت سرویس‌ها ---------- */ .status-page { background: var(--bg2); min-height: calc(100vh - 48px); padding: clamp(40px, 7vw, 88px) 0; } .status-head { text-align: center; margin-bottom: 36px; } .status-head .big { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; } .status-head .big .d { width: 16px; height: 16px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 6px rgba(48,209,88,.18); } .status-head .big.bad .d { background: #ff453a; box-shadow: 0 0 0 6px rgba(255,69,58,.18); } .comp { background: var(--card); border-radius: var(--r); padding: 18px 22px; margin-bottom: 12px; } .comp .top { display: flex; justify-content: space-between; gap: 12px; align-items: center; } .comp .top b { font-size: 17px; } .comp .st { font-size: 14px; font-weight: 600; color: var(--ok); } .comp .st.bad { color: var(--err); } .comp .st.na { color: var(--text3); } .bars { display: flex; gap: 3px; margin-top: 14px; direction: ltr; height: 30px; align-items: stretch; } .bars span { flex: 1; border-radius: 3px; background: #30d158; } .bars span.mid { background: #ffb340; } .bars span.low { background: #ff453a; } .bars span.none { background: var(--line2); } .bars-l { direction: ltr; display: flex; justify-content: space-between; font-size: 12px; color: var(--text3); margin-top: 6px; } /* ---------- صفحه‌های متنی (شرایط، حریم خصوصی) ---------- */ .prose { max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--pad); } .prose h1 { font-size: clamp(30px, 4.6vw, 48px); margin-bottom: 8px; } .prose .doc { white-space: pre-line; color: var(--text); line-height: 2.05; margin-top: 24px; font-size: 16.5px; } .check-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 15px; cursor: pointer; } .check-line input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--btn); flex: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone .scr.only-dark { display: flex !important; } } :root[data-theme="dark"] .phone .scr.only-dark { display: flex !important; } /* ---------- زوم گوشی (لایت‌باکس با انیمیشن FLIP) ---------- */ .zoomable { cursor: zoom-in; -webkit-tap-highlight-color: transparent; transition: filter .3s, transform .5s cubic-bezier(.2,.7,.2,1); } .zoomable:hover { filter: brightness(1.03) saturate(1.05); } .zoomable:focus-visible { outline: 3px solid var(--link); outline-offset: 6px; } html.zoomed { overflow: hidden; padding-inline-end: var(--sbw, 0px); } .zl { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; perspective: 1400px; visibility: hidden; } .zl.on { visibility: visible; } .zl-bg { position: absolute; inset: 0; background: rgba(8,8,12,.62); opacity: 0; transition: opacity .55s ease; -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); } .zl.on .zl-bg { opacity: 1; -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); transition: opacity .55s ease, backdrop-filter .55s ease, -webkit-backdrop-filter .55s ease; } .zl-glow { position: absolute; width: min(86vw, 640px); aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: 0; background: radial-gradient(closest-side, var(--za1, #0a84ff), transparent), radial-gradient(closest-side at 70% 65%, var(--za2, #bf5af2), transparent); transition: opacity .8s ease .1s; } .zl.on .zl-glow { opacity: .55; } .zl-stage { position: relative; transform-style: preserve-3d; will-change: transform; } .zl-tilt { position: relative; transform-style: preserve-3d; will-change: transform; } .zl-tilt .phone { width: 100%; } .zl-stage .phone { box-shadow: 0 0 0 1.5px #3a3a3c inset, 0 50px 120px -20px rgba(0,0,0,.65), 0 24px 60px -24px rgba(0,0,0,.6); cursor: zoom-out; } .zl-sheen { position: absolute; inset: 0; border-radius: 15% / 7.2%; pointer-events: none; z-index: 5; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--sx, 30%) var(--sy, 20%), rgba(255,255,255,.55), transparent 55%); opacity: .0; transition: opacity .3s; } .zl.on .zl-sheen { opacity: .9; } .zl-x { position: absolute; top: max(14px, env(safe-area-inset-top)); inset-inline-end: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 3; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity .4s ease .2s, background .2s; } .zl.on .zl-x { opacity: 1; } .zl-x:hover { background: rgba(255,255,255,.26); } .zl-cap { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: rgba(255,255,255,.78); font-size: 14px; opacity: 0; transform: translateY(8px); transition: opacity .5s ease .35s, transform .5s ease .35s; pointer-events: none; } .zl.on .zl-cap { opacity: 1; transform: none; } /* لودینگ ورودی: استایلش درون‌خطی در base.html است تا روی اینترنت کند هم فوراً و روان اجرا شود */ /* ---------- حرکت‌های نرم تکمیلی ---------- */ @keyframes softUp { from { opacity: 0; transform: translate3d(0, 10px, 0); } } .faq details[open] p, .lg-more[open] > *:not(summary), .lg-opt.alt[open] form { animation: softUp .45s cubic-bezier(.22,1,.36,1); } .alert, .form-card, .err-page > * { animation: softUp .5s cubic-bezier(.22,1,.36,1) backwards; } .err-page > *:nth-child(2) { animation-delay: .05s; } .err-page > *:nth-child(3) { animation-delay: .1s; } .err-page > *:nth-child(4) { animation-delay: .15s; } .gnav nav a, .gnav .tools a, .icon-btn, a { transition: opacity .25s ease, color .25s ease, background-color .25s ease; } .icon-btn:active { transform: scale(.92); } .field input, .field select, .field textarea { transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; } @media (hover: hover) { .why .card, .grid3 .card, .steps .st, .hl .card { transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; } .why .card:hover, .grid3 .card:hover, .steps .st:hover { transform: translate3d(0, -4px, 0); box-shadow: var(--shadow); } .hl .card:hover { transform: translate3d(0, -4px, 0); } .zoomable:hover { transform: translate3d(0, -6px, 0); } } /* تغییر تم روشن/تیره با محو نرم (اگر مرورگر View Transitions ندارد) */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .6s cubic-bezier(.4,0,.2,1), color .6s cubic-bezier(.4,0,.2,1), border-color .6s ease, fill .6s ease, box-shadow .6s ease !important; } /* تغییر تم با دایره‌ی باز شونده (site.js): انیمیشن پیش‌فرض مرورگر خاموش، نسخه‌ی تازه روی نسخه‌ی قدیم */ html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; } html.vt-theme::view-transition-old(root) { z-index: 1; transform-origin: 50% 40%; } html.vt-theme::view-transition-new(root) { z-index: 2; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: ease; } /* دکمه‌ی تم: خورشید در حالت تیره، ماه در حالت روشن؛ هنگام کلیک می‌چرخد */ [data-theme-toggle] { position: relative; overflow: hidden; } [data-theme-toggle] svg { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; transition: transform .7s cubic-bezier(.34,1.56,.64,1), opacity .4s ease; } [data-theme-toggle] .i-sun { opacity: 0; transform: rotate(-90deg) scale(.4); } :root[data-theme="dark"] [data-theme-toggle] .i-sun { opacity: 1; transform: none; } :root[data-theme="dark"] [data-theme-toggle] .i-moon { opacity: 0; transform: rotate(90deg) scale(.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-theme-toggle] .i-sun { opacity: 1; transform: none; } :root:not([data-theme="light"]) [data-theme-toggle] .i-moon { opacity: 0; transform: rotate(90deg) scale(.4); } } [data-theme-toggle].spin::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(closest-side, rgba(191,90,242,.35), transparent); animation: tglPulse .7s ease-out forwards; } @keyframes tglPulse { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.8); opacity: 0; } } /* بازگشت بی‌صدای عنصرِ دیده‌شده به حالت پنهان (برای اجرای دوباره در اسکرول بعدی) */ .rv.rv-reset { transition: none !important; } @media (prefers-reduced-motion: reduce) { .faq details[open] p, .lg-more[open] > *, .lg-opt.alt[open] form, .alert, .form-card, .err-page > *, .mnav.open, .mnav.open a { animation: none !important; } .why .card:hover, .grid3 .card:hover, .steps .st:hover, .hl .card:hover, .zoomable:hover { transform: none; } } /* ضد کلیک سریع: فرم در حال ارسال */ form.is-busy{cursor:progress} form.is-busy button[type=submit],form.is-busy input[type=submit]{opacity:.55;pointer-events:none} /* ============================================================ رنگ هر محصول رنگ کلی سایت همان رنگ لوگو است؛ داخل صفحه‌ی هر محصول (و کارتش در صفحه‌ی اصلی) دکمه‌ها رنگ خود محصول را می‌گیرند: پاشا آبی، جیم‌پامپ سبز. رنگ‌ها از پنل ← محصولات (رنگ‌های شاخص) می‌آیند: --a1 و --a2 */ .prod .btn, .tile .btn { background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--a1) 70%, transparent); } .prod .btn:hover, .tile .btn:hover { filter: brightness(1.06) saturate(1.05); } .prod .more, .tile .more { color: color-mix(in srgb, var(--a1) 80%, var(--text)); } .prod .lnav .btn { box-shadow: none; } .sec.accent .btn { background: #fff; color: #1d1d1f !important; box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); } /* برچسب «به‌زودی · Coming soon» */ .soon-badge { display: inline-flex; align-items: center; gap: 8px; margin: 14px auto 0; padding: 7px 16px 7px 14px; border-radius: 999px; font-size: 15px; font-weight: 700; color: color-mix(in srgb, var(--a2) 85%, var(--text)); background: color-mix(in srgb, var(--a1) 12%, var(--bg)); border: 1px solid color-mix(in srgb, var(--a1) 30%, transparent); } .soon-badge .sep { opacity: .5; } .soon-badge .ltr { font-family: var(--latin); font-weight: 600; letter-spacing: .02em; opacity: .85; } .soon-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--a1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--a1) 60%, transparent); animation: soonPulse 2.2s cubic-bezier(.22,1,.36,1) infinite; } @keyframes soonPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a1) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } } .tile .soon-badge { margin-top: 10px; } .soon-line { font-family: var(--latin); font-size: clamp(15px, 1.6vw, 18px); letter-spacing: .32em; text-transform: uppercase; opacity: .8; margin-top: 10px; } .bx-soon { position: absolute; top: 16px; inset-inline-start: 16px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: color-mix(in srgb, var(--a2) 85%, var(--text)); background: color-mix(in srgb, var(--a1) 12%, var(--card)); } /* پانویس صفحه‌ی محصول: «GymPump by Platcom» */ .foot .prod-brand { font-family: var(--latin); font-size: 15px; letter-spacing: -.01em; } .foot .prod-brand b { font-weight: 800; } .foot .prod-brand span { color: var(--text3); font-weight: 500; } /* ============================================================ بیانیه (جمله‌ی بزرگ) */ .manifesto { text-align: center; max-width: 900px; } .manifesto h2 { font-size: clamp(40px, 7.6vw, 92px); line-height: 1.12; letter-spacing: -.01em; } .manifesto h2 span { display: block; } .manifesto .lead { margin: 26px auto 0; max-width: 680px; font-size: clamp(18px, 2.2vw, 23px); } /* ============================================================ کارت‌های ویژه (bento) */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; } .bento .bx { position: relative; background: var(--card); border-radius: var(--r-lg); padding: 26px 26px 30px; overflow: hidden; display: flex; flex-direction: column; gap: 20px; min-height: 360px; isolation: isolate; transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease; } .sec:not(.gray) .bento .bx { background: var(--bg2); } .bento .bx.wide { grid-column: span 2; flex-direction: row; align-items: center; } .bento .bx.wide .bx-art { flex: 1.15 1 0; order: 2; } .bento .bx.wide .bx-t { flex: 1; } .bento .bx::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; z-index: -1; opacity: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--a1) 22%, transparent), transparent); transition: opacity .8s ease; } .bento .bx:hover::after { opacity: 1; } @media (hover: hover) { .bento .bx:hover { transform: translate3d(0, -6px, 0); box-shadow: var(--shadow); } } .bx-art { flex: 1 0 auto; display: grid; place-items: center; min-height: 170px; } .bx-t { text-align: start; } .bx-t h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.35; } .bx-t p { color: var(--text2); font-size: 16px; margin-top: 8px; line-height: 1.75; } @media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .bx.wide { grid-column: span 2; } } @media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .bento .bx.wide { grid-column: auto; flex-direction: column; align-items: stretch; } .bento .bx.wide .bx-art { order: 0; flex: 0 0 auto; } .bento .bx { min-height: 0; } } /* ============================================================ تصویرسازی‌ها (templates/_art.html) فقط transform و opacity متحرک‌اند تا روی گوشی‌های ضعیف هم روان بمانند. */ .ga { --g1: var(--a1, #16c060); --g2: var(--a2, #07875a); --gs: color-mix(in srgb, var(--g1) 14%, var(--card)); position: relative; width: 100%; max-width: 360px; display: grid; gap: 10px; justify-items: center; font-size: 13px; color: var(--text); } .ga small { color: var(--text3); font-size: 11.5px; display: block; } .ga-card, .ga-bubble, .ga-list li, .ga-person, .ga-page, .ga-phone, .ga-desk, .ga-table, .ga-eq { background: var(--bg); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -12px rgba(0,0,0,.18); } .ga-row { display: flex; gap: 10px; align-items: center; } .ga-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; flex: none; background: linear-gradient(135deg, var(--g1), var(--g2)); } .ga-av.b { background: linear-gradient(135deg, #4f8cff, #7a5cff); } .ga-av.c { background: linear-gradient(135deg, #ff9f43, #ff5e62); } .ga-lines { display: grid; gap: 7px; width: 100%; } .ga-lines i { display: block; height: 7px; width: var(--w); border-radius: 9px; background: var(--line2); } .ga-lines i:first-child { background: color-mix(in srgb, var(--g1) 35%, var(--line2)); } .ga-coach .ga-card { width: 100%; padding: 16px; display: grid; gap: 14px; } .ga-signature { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ga-signature svg { width: 140px; height: 36px; } .ga-signature path { fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .rv.in .ga-signature path { animation: gaDraw 1.8s cubic-bezier(.65,0,.35,1) .5s forwards; } @keyframes gaDraw { to { stroke-dashoffset: 0; } } .ga-seal { font-weight: 800; font-size: 12px; color: var(--g2); background: var(--gs); padding: 5px 10px; border-radius: 999px; white-space: nowrap; } .ga-ai { font-size: 12px; color: var(--text2); background: var(--bg); border-radius: 999px; padding: 6px 12px; box-shadow: 0 6px 18px -10px rgba(0,0,0,.25); } .ga-ai b { font-family: var(--latin); color: var(--g2); margin-inline-end: 4px; } .ga-voice .ga-bubble { padding: 10px 14px; max-width: 92%; justify-self: start; display: flex; gap: 10px; align-items: center; line-height: 1.6; } .ga-voice .ga-bubble.me { justify-self: end; background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; } .ga-voice .ga-bubble.ok { font-size: 12.5px; color: var(--g2); background: var(--gs); box-shadow: none; } .ga-mic { font-size: 18px; } .gp-wave { display: inline-flex; align-items: center; gap: 3px; height: 18px; } .gp-wave i { width: 3px; height: 100%; border-radius: 3px; background: currentColor; transform-origin: center; animation: gaWave 1.1s ease-in-out infinite; } .gp-wave.lg { color: var(--g1); height: 22px; } .gp-wave i:nth-child(2) { animation-delay: -.2s } .gp-wave i:nth-child(3) { animation-delay: -.45s } .gp-wave i:nth-child(4) { animation-delay: -.1s } .gp-wave i:nth-child(5) { animation-delay: -.6s } .gp-wave i:nth-child(6) { animation-delay: -.3s } .gp-wave i:nth-child(7) { animation-delay: -.75s } @keyframes gaWave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } } .ga-balance .ga-bars { width: 100%; display: grid; gap: 12px; background: var(--bg); border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.18); } .ga-bars div { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; } .ga-bars span { color: var(--text2); font-size: 12px; } .ga-bars i { display: block; height: 10px; border-radius: 9px; background: var(--line2); position: relative; overflow: hidden; } .ga-bars i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--g1), var(--g2)); transform-origin: right; transform: scaleX(.35); transition: transform 1.6s cubic-bezier(.22,1,.36,1) .3s; } .rv.in .ga-bars i::before { transform: scaleX(var(--v)); } .ga-btn { color: #fff; font-weight: 800; padding: 10px 18px; border-radius: 999px; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 10px 24px -10px var(--g1); } .rv.in .ga-btn { animation: gaTap 3.6s ease-in-out 1.2s infinite; } @keyframes gaTap { 0%, 86%, 100% { transform: none; } 90% { transform: scale(.94); } 94% { transform: scale(1.03); } } .ga-pdf .ga-pdfs { position: relative; width: 200px; height: 190px; } .ga-pdf .ga-page { position: absolute; inset: 0; width: 150px; height: 190px; margin: auto; padding: 14px; display: grid; align-content: start; gap: 12px; transition: transform 1.2s cubic-bezier(.22,1,.36,1); } .ga-pdf .ga-page.t3 { transform: rotate(-12deg) translateX(-26px); background: color-mix(in srgb, #3a7bff 12%, var(--bg)); } .ga-pdf .ga-page.t2 { transform: rotate(-5deg) translateX(-12px); background: color-mix(in srgb, #e8b33f 14%, var(--bg)); } .rv.in .ga-pdf .ga-page.t3 { transform: rotate(-14deg) translateX(-44px); } .rv.in .ga-pdf .ga-page.t2 { transform: rotate(-6deg) translateX(-22px); } .ga-pdf .ga-page.t1 { transform: rotate(4deg); border-top: 5px solid var(--g1); } .ga-pdf-h { display: flex; align-items: center; gap: 8px; font-size: 12px; } .ga-pdf-f { position: absolute; bottom: 12px; inset-inline-end: 12px; font: 800 10px var(--latin); color: #fff; background: var(--g2); padding: 3px 7px; border-radius: 6px; } .ga-swatches { display: flex; gap: 8px; } .ga-swatches i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--bg), 0 4px 10px rgba(0,0,0,.15); } .gp-logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 900; flex: none; background: linear-gradient(135deg, var(--g1, var(--a1)), var(--g2, var(--a2))); } .gp-logo.sm { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; } .ga-supp .ga-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; } .ga-list li { display: grid; grid-template-columns: 30px auto 1fr; align-items: center; gap: 8px; padding: 10px 12px; } .ga-list li i { font-style: normal; font-size: 18px; } .ga-list li span { color: var(--text3); font-size: 12px; text-align: end; } .rv.in .ga-list li { animation: gaIn .8s cubic-bezier(.22,1,.36,1) both; } .rv.in .ga-list li:nth-child(2) { animation-delay: .12s } .rv.in .ga-list li:nth-child(3) { animation-delay: .24s } @keyframes gaIn { from { opacity: 0; transform: translate3d(0, 12px, 0); } } .ga-link .ga-map { width: 100%; max-width: 260px; overflow: visible; } .ga-map .ln path { stroke: color-mix(in srgb, var(--g1) 55%, transparent); stroke-width: 1.6; stroke-dasharray: 4 5; fill: none; } .rv.in .ga-map .ln path { animation: gaDash 1.4s linear infinite; } @keyframes gaDash { to { stroke-dashoffset: -18; } } .ga-map .dt circle { fill: var(--bg); stroke: var(--g1); stroke-width: 2.5; } .ga-map .hub { fill: var(--g1); filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--g1) 60%, transparent)); } .ga-url { direction: ltr; font: 600 13px var(--latin); background: var(--bg); padding: 8px 14px; border-radius: 999px; box-shadow: 0 8px 22px -12px rgba(0,0,0,.3); } .ga-url b { color: var(--g2); } .ga-eq { direction: ltr; font: 700 clamp(14px, 1.6vw, 18px) var(--latin); padding: 14px 16px; letter-spacing: .01em; white-space: nowrap; } .ga-eq b { color: var(--g1); } .ga-table { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; padding: 12px 16px; width: 100%; font-size: 12.5px; } .ga-table span:nth-child(even) { font-family: var(--latin); color: var(--text2); direction: ltr; } .ga-profile .ga-people { display: grid; gap: 8px; width: 100%; } .ga-person { display: grid; grid-template-columns: 34px 52px 1fr; align-items: center; gap: 10px; padding: 9px 12px; } .ga-person i { height: 8px; border-radius: 9px; background: var(--line2); position: relative; overflow: hidden; } .ga-person i::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--g1), var(--g2)); border-radius: inherit; transform-origin: right; transform: scaleX(0); transition: transform 1.6s cubic-bezier(.22,1,.36,1) .4s; } .rv.in .ga-person i::before { transform: scaleX(var(--v)); } .ga-shield svg { width: 86px; height: 96px; overflow: visible; } .ga-shield path:first-child { fill: color-mix(in srgb, var(--g1) 16%, var(--bg)); stroke: var(--g1); stroke-width: 2.4; } .ga-shield .ck { fill: none; stroke: var(--g2); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .rv.in .ga-shield .ck { animation: gaDraw 1s cubic-bezier(.65,0,.35,1) .5s forwards; } .ga-pill { font-size: 12.5px; padding: 7px 14px; border-radius: 999px; background: var(--gs); color: var(--g2); font-weight: 700; } .ga-clock svg { width: 92px; height: 92px; } .ga-clock circle { fill: var(--bg); stroke: var(--line); stroke-width: 3; } .ga-clock .dot { fill: var(--g2); stroke: none; } .ga-clock path { stroke: var(--g2); stroke-width: 4; stroke-linecap: round; transform-origin: 40px 40px; } .rv.in .ga-clock .m { animation: gaSpin 2.4s cubic-bezier(.65,0,.35,1) .3s both; } .rv.in .ga-clock .h { animation: gaSpin 2.4s cubic-bezier(.65,0,.35,1) .3s both reverse; } @keyframes gaSpin { from { transform: rotate(-300deg); } } .ga-cmp { display: flex; gap: 10px; align-items: center; font-size: 13px; } .ga-cmp .old { color: var(--text3); text-decoration: line-through; } .ga-cmp .new { color: #fff; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--g1), var(--g2)); } .ga-ui { display: flex; justify-content: center; align-items: flex-end; gap: 14px; } .ga-phone { width: 96px; height: 170px; border-radius: 20px; padding: 10px 8px; display: grid; gap: 6px; align-content: start; border: 3px solid color-mix(in srgb, var(--text) 85%, transparent); } .ga-ph-top { width: 34px; height: 6px; border-radius: 6px; background: var(--line); justify-self: center; } .ga-desk { width: 210px; height: 130px; border-radius: 14px; padding: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; align-content: start; } .ga-tile { height: 22px; border-radius: 7px; background: var(--line2); } .ga-tile.big { height: 44px; background: linear-gradient(135deg, color-mix(in srgb, var(--g1) 40%, transparent), color-mix(in srgb, var(--g2) 25%, transparent)); } .ga-desk .ga-tile.big { grid-column: span 3; height: 54px; } .ga-tile.wide { height: 30px; } /* ---------- تصویر اصلی جیم‌پامپ ---------- */ .art-made { display: block !important; } .gp-hero { --g1: var(--a1); --g2: var(--a2); position: relative; width: min(440px, 88vw); margin: 0 auto; padding: 22px 0 60px; text-align: start; } .gp-sheet { position: relative; z-index: 2; background: var(--bg); border-radius: 26px; padding: 20px; display: grid; gap: 16px; box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 30px 70px -28px rgba(0,0,0,.35); border-top: 6px solid var(--g1); } .gp-sheet-back { position: absolute; inset: 40px -18px 40px 30px; z-index: 1; border-radius: 26px; transform: rotate(-5deg); background: linear-gradient(135deg, color-mix(in srgb, var(--g1) 30%, var(--bg)), color-mix(in srgb, var(--g2) 18%, var(--bg))); } .gp-sheet-h { display: flex; align-items: center; gap: 12px; } .gp-sheet-h b { display: block; font-size: 16px; } .gp-sheet-h small { color: var(--text3); font-size: 12px; } .gp-sign { margin-inline-start: auto; font-size: 11.5px; font-weight: 800; color: var(--g2); background: color-mix(in srgb, var(--g1) 14%, var(--bg)); padding: 5px 10px; border-radius: 999px; white-space: nowrap; } .gp-sheet-b { display: grid; grid-template-columns: 136px 1fr; gap: 16px; align-items: center; } .gp-ring { position: relative; width: 136px; aspect-ratio: 1; } .gp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .gp-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; } .gp-ring .t { stroke: var(--line2); } .gp-ring .p, .gp-ring .c, .gp-ring .f { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s cubic-bezier(.22,1,.36,1); } .gp-ring .p { stroke: var(--g1); } .gp-ring .c { stroke: #ffb020; transition-delay: .15s; } .gp-ring .f { stroke: #4f8cff; transition-delay: .3s; } .rv.in .gp-ring .p { stroke-dashoffset: 18; } .rv.in .gp-ring .c { stroke-dashoffset: 30; } .rv.in .gp-ring .f { stroke-dashoffset: 42; } .gp-kcal { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .gp-kcal b { font-size: 17px; font-weight: 900; line-height: 1.2; } .gp-kcal small { font-size: 9.5px; color: var(--text3); } .gp-meals { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .gp-meals li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; font-size: 13.5px; padding: 8px 10px; border-radius: 12px; background: var(--bg2); } .gp-meals i { font-style: normal; } .gp-meals em { font-style: normal; color: var(--text2); font-size: 12.5px; } .gp-macros { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--text2); } .gp-macros i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 5px; } .gp-macros i.p { background: var(--g1); } .gp-macros i.c { background: #ffb020; } .gp-macros i.f { background: #4f8cff; } .gp-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); padding: 10px 14px; border-radius: 16px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.35); border: 1px solid var(--line2); animation: gpFloat 6s ease-in-out infinite; } .gp-chip-voice { top: 0; inset-inline-start: -34px; color: var(--g2); } .gp-chip-ok { bottom: 22px; inset-inline-end: -30px; animation-delay: -2s; } .gp-chip-supp { top: 44%; inset-inline-end: -58px; animation-delay: -4s; } @keyframes gpFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } } @media (max-width: 640px) { .gp-chip-voice { inset-inline-start: -8px; top: -6px; } .gp-chip-ok { inset-inline-end: -6px; } .gp-chip-supp { display: none; } .gp-sheet-b { grid-template-columns: 108px 1fr; } .gp-ring { width: 108px; } } .p-hero .art-made { margin-top: clamp(40px, 6vw, 70px); } .p-hero .art-made .halo { inset: 10% 0 0; } .tile .art-made { margin-top: auto; padding-top: 34px; } .tile .art-made .gp-hero { padding-bottom: 0; margin-bottom: -40px; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .tile:hover .art-made .gp-hero { transform: translateY(-8px); } .tile .rv.in .gp-ring .p, .tile .art-made .gp-ring .p { stroke-dashoffset: 18; } .tile .art-made .gp-ring .c { stroke-dashoffset: 30; } .tile .art-made .gp-ring .f { stroke-dashoffset: 42; } @media (prefers-reduced-motion: reduce) { .gp-chip, .gp-wave i, .soon-badge i, .rv.in .ga-btn, .rv.in .ga-map .ln path { animation: none !important; } } /* ================================================================= ورود با بله / تلگرام (۱.۰) */ .login-mark { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, #0a84ff, #bf5af2 55%, #ff375f); box-shadow: 0 16px 40px -18px rgba(80, 40, 160, .6); animation: lmIn .9s cubic-bezier(.34, 1.4, .5, 1) both; } .login-mark span { direction: ltr; color: #fff; font: 700 26px/1 -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.04em; } @keyframes lmIn { from { opacity: 0; transform: scale(.7) rotate(-8deg); } to { opacity: 1; transform: none; } } .bot-btns { display: grid; gap: 12px; margin-top: 26px; } .bot-btn { --c1: #22c06e; --c2: #0e9a5a; position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; color: #fff; text-decoration: none; text-align: start; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 14px 30px -16px var(--c2), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s; animation: botIn .7s cubic-bezier(.22, 1, .36, 1) both; } .bot-btn.telegram { --c1: #37b6f5; --c2: #1f8fd6; animation-delay: .08s; } .bot-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); animation: botShine 3.6s ease-in-out 1.2s infinite; } .bot-btn:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 20px 40px -18px var(--c2), inset 0 1px 0 rgba(255,255,255,.25); color: #fff; } .bot-btn:active { transform: scale(.98); } .bot-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.2); } .bot-ic img { display: block; border-radius: 8px; } .bot-t { display: grid; gap: 2px; line-height: 1.5; } .bot-t b { font-size: 18px; } .bot-t small { font-size: 13px; opacity: .85; } @keyframes botIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes botShine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .lg-how { text-align: start; margin: 22px 0 0; padding: 16px 18px 14px; padding-inline-start: 38px; border-radius: 18px; background: var(--bg2); color: var(--text2); font-size: 15px; line-height: 2; } .lg-how b { color: var(--text); } .lg-switch { display: inline-block; margin-top: 16px; font-size: 15px; } .lg-waiting .bot-btn { filter: saturate(.85); } .pw-form { margin-top: 18px; } .fgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .fgrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; } @media (max-width: 560px) { .fgrid2, .fgrid3 { grid-template-columns: 1fr; } } .welcome-card .done-ic { font-size: 30px; background: linear-gradient(135deg, #ffd60a, #ff9f0a); } .btn.tg-btn { background: linear-gradient(135deg, #37b6f5, #1f8fd6); color: #fff; } .btn.bale-btn.sm, .btn.tg-btn.sm { margin-top: 0; min-height: 0; font-size: 14px; } @media (prefers-reduced-motion: reduce) { .bot-btn, .bot-btn::after, .login-mark { animation: none; } } /* فرم درخواست: فیلدهای کانون (license) یا فرم «ثبت سفارش و مشاوره» (service) */ .req-card-k:not([data-kind="license"]) .k-lic, .req-card-k:not([data-kind="waitlist"]) .k-wait, .req-card-k:not([data-kind="service"]) .k-svc, .req-card-k[data-kind="service"] .k-org, .req-card-k [hidden] { display: none !important; } .seg.wrap { flex-wrap: wrap; } .field input[type="file"] { padding: 10px; border: 1.5px dashed var(--line, rgba(0,0,0,.15)); border-radius: 14px; background: transparent; } /* ================================================================= لونا (سرمه‌ای و نقره‌ای) — ۱.۰ صفحه‌ی محصول لونا کلاس prod-luna می‌گیرد؛ زمینه سرمه‌ای عمیق با ستاره‌های ریز، متن‌ها نقره‌ای. */ .prod-luna, .t-luna { --navy: #0a1230; --navy2: #121c45; --silver: #dfe5f2; --silver2: #9aa7c4; } .prod-luna { background: var(--navy); color: var(--silver); --text: #eef1f8; --text2: #aab4cf; --text3: #7f8bab; --bg: #0d1638; --bg2: #121c45; --card: #141f4b; --line: rgba(223,229,242,.14); --line2: rgba(223,229,242,.1); } .prod-luna .p-hero { position: relative; background: radial-gradient(1px 1px at 12% 18%, #fff 60%, transparent), radial-gradient(1px 1px at 78% 12%, #fff 60%, transparent), radial-gradient(1.5px 1.5px at 35% 64%, #fff 60%, transparent), radial-gradient(1px 1px at 88% 52%, #fff 60%, transparent), radial-gradient(1px 1px at 22% 82%, #fff 60%, transparent), radial-gradient(1.5px 1.5px at 62% 30%, #fff 60%, transparent), radial-gradient(60% 50% at 50% 0%, #22306e 0%, transparent 70%), var(--navy); } .prod-luna .p-hero::before { content: ""; position: absolute; top: 60px; inset-inline-end: 8%; width: clamp(60px, 8vw, 110px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #cfd7ea 45%, #8e9bc0 100%); box-shadow: 0 0 60px 10px rgba(207,215,234,.25); opacity: .9; animation: lnMoon 9s ease-in-out infinite; } @keyframes lnMoon { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-12px,0); } } .prod-luna .sec.navy, .sec.navy { background: var(--navy, #0a1230); color: #eef1f8; --text2: #aab4cf; --card: #141f4b; --bg2: #121c45; } .prod-luna .sec.navy:nth-of-type(even) { background: linear-gradient(180deg, #0d1638, #0a1230); } .prod-luna .grad-text { background: linear-gradient(120deg, #ffffff, var(--silver) 40%, #8fa4e8); -webkit-background-clip: text; background-clip: text; color: transparent; } .prod-luna .btn { background: linear-gradient(135deg, #e9edf7, #a9b6d8); color: #0a1230 !important; box-shadow: 0 12px 30px -12px rgba(169,182,216,.6); } .prod-luna .more { color: #c9d3ee; } .prod-luna .lnav { background: rgba(10,18,48,.72); } .prod-luna .soon-badge { color: #e3e8f4; background: rgba(223,229,242,.08); border-color: rgba(223,229,242,.25); } .prod-luna .soon-badge i { background: #dfe5f2; } .prod-luna .bento .bx, .prod-luna .sec:not(.gray) .bento .bx { background: linear-gradient(160deg, #17235a, #111a44); box-shadow: inset 0 0 0 1px rgba(223,229,242,.08); } .prod-luna .steps .st, .prod-luna .faq details { background: #121c45; } .prod-luna .stats .v { font-family: var(--latin), var(--font); } .prod-luna .p-hero .halo { background: radial-gradient(closest-side, rgba(143,164,232,.45), transparent); opacity: .6; } .t-luna { color: #eef1f8; --text2: #aab4cf; --text3: #8590b0; --bg: #0d1638; --bg2: #121c45; --card: #141f4b; --line: rgba(223,229,242,.14); --line2: rgba(223,229,242,.1); } .tile.t-luna { background: radial-gradient(1px 1px at 14% 22%, #fff 60%, transparent), radial-gradient(1px 1px at 80% 16%, #fff 60%, transparent), radial-gradient(1.5px 1.5px at 66% 40%, #fff 60%, transparent), radial-gradient(1px 1px at 30% 70%, #fff 60%, transparent), radial-gradient(70% 60% at 50% 0%, #24337a 0%, transparent 70%), linear-gradient(180deg, #0d1638, #070d24); } .t-luna .grad-text { background: linear-gradient(120deg, #fff, #dfe5f2 40%, #8fa4e8); -webkit-background-clip: text; background-clip: text; color: transparent; } .t-luna .btn { background: linear-gradient(135deg, #e9edf7, #a9b6d8); color: #0a1230 !important; } .t-luna .more { color: #c9d3ee; } .t-luna .soon-badge { color: #e3e8f4; background: rgba(223,229,242,.08); border-color: rgba(223,229,242,.25); } /* ---------- تصویر اصلی لونا: دو گوشی ---------- */ .ln-hero { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 4vw, 64px); width: min(820px, 96vw); margin: 0 auto; padding: 10px 0 40px; font-size: 13px; text-align: start; color: #0f1222; } .ln-orbit { position: absolute; inset: 8% 18% 6%; border-radius: 50%; border: 1px dashed rgba(223,229,242,.18); pointer-events: none; } .ln-phone { position: relative; z-index: 2; width: clamp(230px, 30vw, 300px); border-radius: 38px; padding: 14px 12px 16px; background: #fff; box-shadow: 0 0 0 8px #1b2550, 0 0 0 9px rgba(223,229,242,.25), 0 40px 80px -30px rgba(0,0,0,.7); } .ln-dm { margin-top: 70px; } .ln-top { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; border-bottom: 1px solid #eef0f5; } .ln-top b { font: 700 13px var(--latin); } .ln-more { margin-inline-start: auto; color: #999; letter-spacing: 1px; } .ln-who small { display: block; color: #8a8fa3; font-size: 10.5px; } .ln-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font: 800 12px var(--latin); background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #ee2a7b; } .ln-av.s { width: 22px; height: 22px; font-size: 10px; box-shadow: none; background: linear-gradient(135deg, #8fa4e8, #3b4ea8); } .ln-media { position: relative; margin: 10px -12px 0; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 30% 25%, #ffffff, #dfe9ff 40%, #9db8ff 100%); } .ln-peng { font-size: 92px; filter: drop-shadow(0 14px 18px rgba(20,40,120,.35)); animation: lnBob 4s ease-in-out infinite; } @keyframes lnBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } } .ln-say { position: absolute; bottom: 12px; inset-inline: 12px; text-align: center; font-weight: 800; font-size: 15px; line-height: 1.6; color: #fff; padding: 8px 10px; border-radius: 14px; background: rgba(15,22,60,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ln-say b { color: #ffd76a; } .ln-acts { display: flex; gap: 12px; padding: 10px 4px 4px; font-style: normal; font-size: 18px; } .ln-acts i { font-style: normal; } .ln-acts .h { color: #ed4956; } .ln-acts .s { margin-inline-start: auto; } .ln-cap { font-size: 12px; line-height: 1.75; color: #262a3a; padding: 0 4px; } .ln-cap b { font: 700 12px var(--latin); margin-inline-end: 4px; } .ln-cmts { display: grid; gap: 8px; margin-top: 10px; padding: 0 4px; min-height: 76px; } .ln-c { display: flex; gap: 8px; align-items: center; font-size: 12px; } .ln-c b { font: 700 11.5px var(--latin); margin-inline-end: 4px; } .ln-c.rep { padding-inline-start: 26px; color: #4b5068; } .ln-beam { position: absolute; z-index: 3; top: 52%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 6px; align-items: center; color: #dfe5f2; } .ln-beam i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: lnDot 1s ease-in-out infinite; } .ln-beam i:nth-child(2) { animation-delay: .15s } .ln-beam i:nth-child(3) { animation-delay: .3s } .ln-beam span { font-size: 20px; } @keyframes lnDot { 0%, 100% { opacity: .3; transform: translateX(6px); } 50% { opacity: 1; transform: translateX(-6px); } } .ln-thread { display: grid; gap: 8px; padding: 12px 2px 4px; min-height: 340px; align-content: start; } .ln-m { max-width: 86%; padding: 8px 12px; border-radius: 18px; line-height: 1.7; font-size: 12.5px; } .ln-m.in { justify-self: start; background: #efeff4; color: #15182a; border-end-start-radius: 6px; } .ln-m.out { justify-self: end; color: #fff; background: linear-gradient(135deg, #8b5cf6, #3b82f6); border-end-end-radius: 6px; } .ln-m.card { display: flex; gap: 10px; align-items: center; padding: 8px; background: #fff; box-shadow: 0 0 0 1px #e6e8f0; } .ln-m.card b { display: block; font-size: 12.5px; } .ln-m.card small { color: #7a8099; font-size: 11px; } .ln-thumb { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, #dfe9ff, #9db8ff); } .ln-m code { font: 800 12px var(--latin); background: #fff; padding: 1px 6px; border-radius: 6px; color: #3b4ea8; } .ln-typing { justify-self: start; display: flex; gap: 4px; padding: 10px 12px; border-radius: 18px; background: #efeff4; } .ln-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa0b5; animation: lnDot 1s ease-in-out infinite; } .ln-typing i:nth-child(2) { animation-delay: .15s } .ln-typing i:nth-child(3) { animation-delay: .3s } .ln-tag { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 800; color: #0a1230; padding: 7px 14px; border-radius: 999px; background: linear-gradient(135deg, #f3f5fb, #b9c4e2); box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); } @keyframes lnS1 { 0%, 7% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 11%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } } @keyframes lnS2 { 0%, 15% { opacity: 0; } 18% { opacity: 1; } 24%, 100% { opacity: 0; } } @keyframes lnS3 { 0%, 23% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 27%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } } @keyframes lnS4 { 0%, 31% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 35%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } } @keyframes lnS5 { 0%, 39% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 43%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } } @keyframes lnS6 { 0%, 51% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 55%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } } @keyframes lnS7 { 0%, 59% { opacity: 0; transform: translate3d(0,8px,0) scale(.9); } 62%, 69% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: none; height: 0; padding: 0; margin: 0; } } @keyframes lnS8 { 0%, 69% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 73%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } } .ln-s1 { animation: lnS1 12s cubic-bezier(.22,1,.36,1) infinite; } .ln-s2 { animation: lnS2 12s cubic-bezier(.22,1,.36,1) infinite; } .ln-s3 { animation: lnS3 12s cubic-bezier(.22,1,.36,1) infinite; } .ln-s4 { animation: lnS4 12s cubic-bezier(.22,1,.36,1) infinite; } .ln-s5 { animation: lnS5 12s cubic-bezier(.22,1,.36,1) infinite; } .ln-s6 { animation: lnS6 12s cubic-bezier(.22,1,.36,1) infinite; } .ln-s7 { animation: lnS7 12s cubic-bezier(.22,1,.36,1) infinite; } .ln-s8 { animation: lnS8 12s cubic-bezier(.22,1,.36,1) infinite; } @media (max-width: 640px) { .ln-hero { gap: 10px; } .ln-phone { width: 46vw; border-radius: 26px; padding: 10px 8px 12px; box-shadow: 0 0 0 5px #1b2550, 0 30px 60px -30px rgba(0,0,0,.7); } .ln-dm { margin-top: 40px; } .ln-peng { font-size: 56px; } .ln-say { font-size: 11px; padding: 5px 6px; } .ln-cap { display: none; } .ln-m { font-size: 11px; padding: 6px 9px; } .ln-thread { min-height: 280px; } .ln-beam { display: none; } } .tile .art-made .ln-hero { margin-bottom: -60px; transform: scale(.92); transform-origin: top center; } /* ---------- تصویر اصلی «طراحی سایت» ---------- */ .wb-hero { --g1: var(--a1); --g2: var(--a2); position: relative; width: min(640px, 92vw); margin: 0 auto; padding: 10px 0 50px; } .wb-win { position: relative; border-radius: 18px; overflow: hidden; background: var(--bg); box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 40px 80px -30px rgba(40,20,90,.45); border: 1px solid var(--line2); } .wb-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg2); } .wb-dots { display: flex; gap: 6px; } .wb-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .wb-dots i:nth-child(2) { background: #febc2e } .wb-dots i:nth-child(3) { background: #28c840 } .wb-url { flex: 1; text-align: center; font: 600 12px var(--latin); color: var(--text2); background: var(--bg); border-radius: 8px; padding: 4px 10px; } .wb-page { display: grid; gap: 14px; padding: 18px; min-height: 300px; } .wb-nav { display: flex; align-items: center; gap: 10px; } .wb-logo { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--g1), var(--g2)); } .wb-nav i { width: 46px; height: 8px; border-radius: 6px; background: var(--line); } .wb-cta { margin-inline-start: auto; width: 74px; height: 26px; border-radius: 999px; background: linear-gradient(135deg, var(--g1), var(--g2)); } .wb-hero-b { display: grid; gap: 8px; justify-items: center; padding: 26px 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--g1) 16%, var(--bg)), color-mix(in srgb, var(--g2) 14%, var(--bg))); } .wb-hero-b b { width: 62%; height: 18px; border-radius: 8px; background: linear-gradient(90deg, var(--g1), var(--g2)); } .wb-hero-b i { width: 48%; height: 8px; border-radius: 6px; background: var(--line); } .wb-hero-b i.s { width: 36%; } .wb-hero-b span { width: 96px; height: 28px; border-radius: 999px; margin-top: 6px; background: var(--text); opacity: .85; } .wb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .wb-cards div { height: 70px; border-radius: 12px; background: var(--bg2); position: relative; overflow: hidden; } .wb-cards div::before { content: ""; position: absolute; inset: 10px auto auto 10px; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--g1) 40%, transparent); } .wb-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; } .wb-row i { height: 40px; border-radius: 12px; background: var(--bg2); } .wb-b1, .wb-b2, .wb-b3, .wb-b4 { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1); } .rv.in .wb-b1, .tile .wb-b1 { opacity: 1; transform: none; transition-delay: .2s; } .rv.in .wb-b2, .tile .wb-b2 { opacity: 1; transform: none; transition-delay: .45s; } .rv.in .wb-b3, .tile .wb-b3 { opacity: 1; transform: none; transition-delay: .7s; } .rv.in .wb-b4, .tile .wb-b4 { opacity: 1; transform: none; transition-delay: .95s; } .wb-cursor { position: absolute; top: 60%; left: 30%; font-size: 20px; color: var(--text); transform: rotate(-110deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); animation: wbCur 7s ease-in-out infinite; } @keyframes wbCur { 0%, 100% { transform: translate3d(0,0,0) rotate(-110deg); } 30% { transform: translate3d(140px,-90px,0) rotate(-110deg); } 60% { transform: translate3d(260px,-150px,0) rotate(-110deg); } 80% { transform: translate3d(90px,10px,0) rotate(-110deg); } } .wb-mobile { position: absolute; z-index: 3; bottom: 6px; inset-inline-start: -26px; width: 128px; height: 240px; border-radius: 24px; padding: 14px 10px; display: grid; gap: 8px; align-content: start; background: var(--bg); border: 4px solid color-mix(in srgb, var(--text) 85%, transparent); box-shadow: 0 30px 60px -24px rgba(40,20,90,.55); animation: gpFloat 7s ease-in-out infinite; } .wb-mtop { width: 40px; height: 6px; border-radius: 6px; background: var(--line); justify-self: center; } .wb-mhero { height: 64px; border-radius: 12px; background: linear-gradient(135deg, var(--g1), var(--g2)); } .wb-mline { height: 7px; border-radius: 6px; background: var(--line); } .wb-mline.s { width: 60%; } .wb-mcard { height: 34px; border-radius: 10px; background: var(--bg2); } .wb-score { position: absolute; z-index: 3; top: 40px; inset-inline-end: -30px; display: grid; justify-items: center; padding: 12px 16px; border-radius: 18px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 40px -16px rgba(0,0,0,.35); border: 1px solid var(--line2); animation: gpFloat 6s ease-in-out -2s infinite; } .wb-score svg { width: 54px; height: 54px; transform: rotate(-90deg); } .wb-score circle { fill: none; stroke-width: 4; } .wb-score .t { stroke: var(--line2); } .wb-score .v { stroke: #12b76a; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s cubic-bezier(.22,1,.36,1) .6s; } .rv.in .wb-score .v, .tile .wb-score .v { stroke-dashoffset: 0; } .wb-score b { margin-top: -40px; font-weight: 900; color: #12b76a; } .wb-score small { margin-top: 14px; color: var(--text3); font-size: 11px; } @media (max-width: 640px) { .wb-mobile { inset-inline-start: -6px; width: 96px; height: 180px; } .wb-score { inset-inline-end: -4px; } .wb-cursor { display: none; } } .tile .art-made .wb-hero { margin-bottom: -50px; } /* ---------- تصویر اصلی «طراحی ربات» ---------- */ .bt-hero { --g1: var(--a1); --g2: var(--a2); position: relative; width: min(420px, 90vw); margin: 0 auto; padding: 10px 0 40px; } .bt-phone { position: relative; z-index: 2; width: min(300px, 74vw); margin: 0 auto; border-radius: 36px; padding: 14px 12px; background: var(--bg); box-shadow: 0 0 0 8px color-mix(in srgb, var(--text) 88%, transparent), 0 40px 80px -30px rgba(120,40,20,.5); } .bt-top { display: flex; gap: 10px; align-items: center; padding: 4px 4px 10px; border-bottom: 1px solid var(--line2); text-align: start; } .bt-top b { display: block; font-size: 13.5px; } .bt-top small { color: var(--text3); font-size: 11px; } .bt-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: linear-gradient(135deg, var(--g1), var(--g2)); } .bt-thread { display: grid; gap: 8px; padding: 12px 2px 4px; min-height: 360px; align-content: start; text-align: start; font-size: 12.5px; } .bt-m { max-width: 86%; padding: 8px 12px; border-radius: 16px; line-height: 1.7; } .bt-m.in { justify-self: start; background: var(--bg2); border-end-start-radius: 6px; } .bt-m.out { justify-self: end; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); border-end-end-radius: 6px; } .bt-m.ok { background: color-mix(in srgb, #12b76a 14%, var(--bg)); color: color-mix(in srgb, #12b76a 70%, var(--text)); font-weight: 700; } .bt-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 92%; } .bt-keys.days { grid-template-columns: repeat(3, 1fr); } .bt-keys span { text-align: center; padding: 7px 4px; border-radius: 12px; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--g1) 10%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g1) 30%, transparent); } .bt-keys .tap { animation: btTap 12s ease-in-out infinite; } .bt-keys .tap2 { animation: btTap2 12s ease-in-out infinite; } @keyframes btTap { 0%, 22% { transform: none; } 25% { transform: scale(.9); background: color-mix(in srgb, var(--g1) 35%, var(--bg)); } 29%, 100% { transform: none; } } @keyframes btTap2 { 0%, 55% { transform: none; } 58% { transform: scale(.9); background: color-mix(in srgb, var(--g1) 35%, var(--bg)); } 62%, 100% { transform: none; } } .bt-s1 { animation: lnS1 12s cubic-bezier(.22,1,.36,1) infinite; } .bt-s2 { animation: btS2 12s cubic-bezier(.22,1,.36,1) infinite; } .bt-s3 { animation: btS3 12s cubic-bezier(.22,1,.36,1) infinite; } .bt-s4 { animation: btS4 12s cubic-bezier(.22,1,.36,1) infinite; } @keyframes btS2 { 0%, 27% { opacity: 0; transform: translate3d(0,10px,0); } 31%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } } @keyframes btS3 { 0%, 38% { opacity: 0; transform: translate3d(0,10px,0); } 42%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } } @keyframes btS4 { 0%, 63% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 67%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } } .bt-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 40px -16px rgba(0,0,0,.35); border: 1px solid var(--line2); animation: gpFloat 6s ease-in-out infinite; } .bt-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); } .bt-chip.c1 { top: 40px; inset-inline-start: -30px; } .bt-chip.c2 { top: 46%; inset-inline-end: -40px; animation-delay: -2s; } .bt-chip.c3 { bottom: 60px; inset-inline-start: -46px; animation-delay: -4s; } @media (max-width: 640px) { .bt-chip.c1 { inset-inline-start: -4px; } .bt-chip.c2 { inset-inline-end: -4px; } .bt-chip.c3 { inset-inline-start: -4px; } } .tile .art-made .bt-hero { margin-bottom: -80px; } /* ---------- تصویرسازی کارت‌های لونا، سایت و ربات ---------- */ .gx-inbox { width: 100%; display: grid; gap: 8px; } .ga-ib { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 14px; background: var(--bg); box-shadow: 0 10px 30px -14px rgba(0,0,0,.35); text-align: start; } .ga-ib > i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); } .ga-ib b { display: block; font-size: 12.5px; } .ga-ib span { font-size: 11px; color: var(--text3); } .ga-ib em { font-style: normal; color: #4f8cff; font-size: 11px; } .rv.in .ga-ib { animation: gaIn .8s cubic-bezier(.22,1,.36,1) both; } .rv.in .ga-ib:nth-child(2) { animation-delay: .1s } .rv.in .ga-ib:nth-child(3) { animation-delay: .2s } .rv.in .ga-ib:nth-child(4) { animation-delay: .3s } .ga-kw { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; } .ga-kw-post { grid-row: span 2; width: 110px; aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; align-content: center; background: radial-gradient(circle at 30% 25%, #fff, #dfe9ff 40%, #9db8ff); color: #0a1230; } .ga-kw-post span { font-size: 44px; } .ga-kw-post small { font-size: 10.5px; font-weight: 800; color: #0a1230 !important; } .ga-kw-c { justify-self: start; padding: 8px 12px; border-radius: 14px; background: var(--bg); font-size: 12.5px; box-shadow: 0 10px 30px -14px rgba(0,0,0,.35); } .ga-kw-c b { font: 700 11.5px var(--latin); margin-inline-end: 4px; color: var(--text2); } .ga-kw-arrow svg { width: 120px; height: 24px; transform: scaleX(-1); } .ga-kw-arrow path { fill: none; stroke: var(--a2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .ga-kw-arrow path:first-child { stroke-dasharray: 1; stroke-dashoffset: 1; } .rv.in .ga-kw-arrow path:first-child { animation: gaDraw 1.2s cubic-bezier(.65,0,.35,1) .6s forwards; } .ga-kw-dm { grid-column: 1 / -1; justify-self: end; padding: 10px 14px; border-radius: 16px; color: #fff; font-size: 13px; line-height: 1.7; background: linear-gradient(135deg, #8b5cf6, #3b82f6); box-shadow: 0 14px 30px -14px #3b82f6; } .ga-kw-dm small { display: block; color: rgba(255,255,255,.75) !important; font-size: 10.5px; } .rv.in .ga-kw-dm { animation: gaIn .9s cubic-bezier(.22,1,.36,1) 1.6s both; } .ga-ho { width: 100%; display: grid; gap: 12px; justify-items: center; } .ga-ho-dots { display: flex; gap: 6px; } .ga-ho-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--line2); } .rv.in .ga-ho-dots i { animation: gaFill .4s ease calc(var(--i) * .16s + .3s) forwards; } @keyframes gaFill { to { background: linear-gradient(135deg, #dfe5f2, #8fa4e8); transform: scale(1.1); } } .ga-ho-note { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 16px; background: var(--bg); text-align: start; box-shadow: 0 0 0 1px rgba(255,190,60,.4), 0 14px 30px -14px rgba(0,0,0,.4); } .ga-ho-note span { font-size: 20px; } .ga-ho-note b { display: block; font-size: 13px; } .rv.in .ga-ho-note { animation: gaIn .9s cubic-bezier(.22,1,.36,1) 2s both; } .ga-tone { width: 100%; display: grid; gap: 14px; justify-items: center; } .ga-tone-sw { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text3); } .ga-tone-sw .on { color: var(--text); font-weight: 800; } .ga-tone-sw i { position: relative; width: 46px; height: 26px; border-radius: 99px; background: linear-gradient(135deg, var(--a1), var(--a2)); } .ga-tone-sw i::after { content: ""; position: absolute; top: 3px; left: 23px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .6s cubic-bezier(.34,1.4,.5,1) .4s; } .rv.in .ga-tone-sw i::after { transform: translateX(-20px); } .ga-bubble.in { padding: 9px 14px; border-radius: 16px; background: var(--bg); box-shadow: 0 10px 30px -14px rgba(0,0,0,.35); font-size: 12.5px; } .gx-night { display: grid; gap: 10px; justify-items: center; } .ga-moon { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #cfd7ea 45%, #8e9bc0); box-shadow: 0 0 40px 6px rgba(207,215,234,.3); animation: lnMoon 7s ease-in-out infinite; } .gx-night b { font: 800 26px var(--latin); letter-spacing: .04em; } .gx-leads { width: 100%; display: grid; gap: 6px; font-size: 12px; } .ga-lh, .ga-lr { display: grid; grid-template-columns: 1fr 1.2fr .9fr; gap: 8px; align-items: center; text-align: start; } .ga-lh { color: var(--text3); font-size: 11px; padding: 0 12px; } .ga-lr { padding: 8px 12px; border-radius: 12px; background: var(--bg); box-shadow: 0 8px 24px -14px rgba(0,0,0,.35); } .ga-lr span:first-child { display: flex; align-items: center; gap: 6px; font-weight: 700; } .ga-av.sm { width: 22px; height: 22px; font-size: 10px; font-style: normal; } .ga-lr .tag { justify-self: start; padding: 2px 8px; border-radius: 99px; font-size: 11px; background: color-mix(in srgb, var(--a2) 18%, transparent); } .rv.in .ga-lr { animation: gaIn .8s cubic-bezier(.22,1,.36,1) both; } .rv.in .ga-lr:nth-child(3) { animation-delay: .12s } .rv.in .ga-lr:nth-child(4) { animation-delay: .24s } .gx-speed { position: relative; display: grid; justify-items: center; } .gx-speed svg { width: 170px; height: 100px; } .gx-speed path { fill: none; stroke-width: 10; stroke-linecap: round; } .gx-speed .t { stroke: var(--line2); } .gx-speed .v { stroke: url(#none); stroke: #12b76a; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s cubic-bezier(.22,1,.36,1) .3s; } .rv.in .gx-speed .v { stroke-dashoffset: 1; } .gx-speed b { margin-top: -46px; font-size: 30px; font-weight: 900; color: #12b76a; } .ga-resp { display: flex; align-items: flex-end; gap: 12px; } .ga-resp > div { display: grid; gap: 5px; align-content: start; padding: 8px; background: var(--bg); border: 3px solid color-mix(in srgb, var(--text) 80%, transparent); box-shadow: 0 14px 30px -14px rgba(0,0,0,.35); } .ga-resp .d { width: 170px; height: 110px; border-radius: 10px; } .ga-resp .t { width: 84px; height: 112px; border-radius: 12px; } .ga-resp .m { width: 52px; height: 96px; border-radius: 12px; } .ga-resp i { height: 10px; border-radius: 5px; background: var(--line2); } .ga-resp i:first-child { height: 30px; background: linear-gradient(135deg, var(--a1), var(--a2)); } .rv.in .ga-resp > div { animation: gaIn .8s cubic-bezier(.22,1,.36,1) both; } .rv.in .ga-resp .t { animation-delay: .15s } .rv.in .ga-resp .m { animation-delay: .3s } .ga-serp { width: 100%; display: grid; gap: 8px; text-align: start; } .ga-q { padding: 9px 14px; border-radius: 999px; background: var(--bg); box-shadow: 0 8px 22px -14px rgba(0,0,0,.35); font-size: 12.5px; } .ga-res { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--bg); opacity: .55; } .ga-res.top { opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--a1) 50%, transparent), 0 14px 30px -14px rgba(0,0,0,.35); } .ga-res .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 12px; color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); } .ga-res small { font-size: 11px; color: #12b76a !important; } .ga-res b { display: block; font-size: 12.5px; } .ga-adm { width: 100%; display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 10px; border-radius: 16px; background: var(--bg); box-shadow: 0 14px 30px -14px rgba(0,0,0,.35); } .ga-adm .side { display: grid; gap: 8px; align-content: start; padding: 6px; border-radius: 10px; background: var(--bg2); } .ga-adm .side i { height: 10px; border-radius: 5px; background: var(--line); } .ga-adm .side i.on { background: linear-gradient(90deg, var(--a1), var(--a2)); } .ga-adm .main { display: grid; gap: 8px; text-align: start; } .ga-adm .inp { padding: 8px 10px; border-radius: 10px; font-size: 12px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a1) 60%, transparent); } .ga-adm .caret { display: inline-block; width: 2px; height: 14px; margin-inline-start: 2px; vertical-align: middle; background: var(--a1); animation: gaBlink 1s steps(1) infinite; } @keyframes gaBlink { 50% { opacity: 0; } } .ga-btn.sm { justify-self: start; padding: 6px 14px; font-size: 12px; --g1: var(--a1); --g2: var(--a2); } .gx-flow { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 4px; } .gx-flow span { white-space: nowrap; padding: 7px 9px; border-radius: 12px; font-size: 11.5px; font-weight: 800; background: var(--bg); box-shadow: 0 10px 24px -14px rgba(0,0,0,.35); } .gx-flow span:last-child { color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); } .gx-flow i { flex: none; width: 12px; height: 2px; background: color-mix(in srgb, var(--a1) 60%, transparent); } .rv.in .gx-flow span, .rv.in .gx-flow i { animation: gaIn .6s cubic-bezier(.22,1,.36,1) calc(var(--i) * .18s) both; } .ga-form { width: 100%; padding: 14px; display: grid; gap: 10px; text-align: start; --g1: var(--a1); --g2: var(--a2); } .ga-form .f { display: grid; gap: 4px; } .ga-form .f i { display: block; height: 30px; border-radius: 10px; background: var(--bg2); position: relative; } .ga-form .f i::after { content: ""; position: absolute; inset: 10px auto 10px 10px; width: var(--w); border-radius: 5px; background: var(--line); } .ga-form .ga-btn { justify-self: stretch; text-align: center; } .ga-plat { position: relative; width: 240px; height: 170px; } .ga-plat .core { position: absolute; inset: 0; margin: auto; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 0 0 10px color-mix(in srgb, var(--a1) 14%, transparent), 0 20px 40px -16px var(--a2); } .ga-plat .p { position: absolute; display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: var(--bg); box-shadow: 0 10px 24px -12px rgba(0,0,0,.4); animation: gpFloat 6s ease-in-out infinite; } .ga-plat .p i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); } .ga-plat .p1 { top: 0; inset-inline-start: 0; } .ga-plat .p2 { top: 10px; inset-inline-end: 0; animation-delay: -2s; } .ga-plat .p3 { bottom: 0; left: 50%; margin-left: -50px; animation-delay: -4s; } .gx-crm { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: end; padding: 16px; border-radius: 16px; background: var(--bg); box-shadow: 0 14px 30px -14px rgba(0,0,0,.35); } .gx-crm .k b { display: block; font-size: 28px; font-weight: 900; background: linear-gradient(135deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .gx-crm .bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; } .gx-crm .bars i { flex: 1; height: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--a1), var(--a2)); transform-origin: bottom; transform: scaleY(.08); transition: transform 1.4s cubic-bezier(.22,1,.36,1) .3s; } .rv.in .gx-crm .bars i { transform: scaleY(var(--v)); } @media (prefers-reduced-motion: reduce) { .ln-hero *, .bt-hero *, .wb-hero *, .ga-moon, .prod-luna .p-hero::before { animation: none !important; } .ln-hero [class*="ln-s"], .bt-hero [class*="bt-s"] { opacity: 1 !important; transform: none !important; } .ln-typing, .ln-beam { display: none; } } /* ================================================================= دموی زنده‌ی پاشا (بخش demo و صفحه‌ی /demo) */ .demo-box { display: grid; grid-template-columns: 240px 1fr; gap: clamp(18px, 3vw, 40px); align-items: start; margin-top: 44px; } .demo-side { position: sticky; top: 90px; display: grid; gap: 10px; } .demo-side .lbl { font-size: 13px; color: var(--text3); font-weight: 700; } .demo-role { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; font: inherit; text-align: start; cursor: pointer; background: var(--card, var(--bg)); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line2); transition: box-shadow .25s, transform .25s; } .demo-role .ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--bg2); } .demo-role b { display: block; font-size: 15px; } .demo-role small { display: block; color: var(--text2); font-size: 12.5px; line-height: 1.6; } .demo-role.on { box-shadow: inset 0 0 0 2px var(--a1, #0a6cff), 0 14px 30px -18px var(--a1, #0a6cff); } .demo-role.on .ic { background: linear-gradient(135deg, var(--a1, #0a6cff), var(--a2, #1ab0ff)); } .demo-role:active { transform: scale(.98); } .demo-size { display: flex; gap: 6px; margin-top: 6px; } .demo-size button { flex: 1; padding: 8px; border: 0; border-radius: 12px; font: inherit; font-size: 13px; cursor: pointer; background: var(--bg2); color: var(--text2); } .demo-size button.on { background: var(--text); color: var(--bg); } .demo-note { font-size: 12.5px; color: var(--text3); line-height: 1.8; } .demo-stage { display: grid; place-items: center; } .demo-frame { position: relative; width: 390px; height: 780px; max-width: 100%; border-radius: 44px; overflow: hidden; background: #000; box-shadow: 0 0 0 10px #1d1d1f, 0 0 0 11px #3a3a3c, 0 50px 90px -40px rgba(0,0,0,.6); transition: width .5s cubic-bezier(.22,1,.36,1), height .5s, border-radius .5s; } .demo-frame.desk { width: 100%; height: 720px; border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0,0,0,.45); } .demo-frame iframe { width: 100%; height: 100%; border: 0; background: #fff; } .demo-load { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; background: #0b0b0c; transition: opacity .4s; } .demo-frame.ready .demo-load { opacity: 0; pointer-events: none; } .demo-off { padding: 40px 20px; text-align: center; border-radius: var(--r-lg); background: var(--bg2); color: var(--text2); } @media (max-width: 860px) { .demo-box { grid-template-columns: 1fr; } .demo-side { position: static; grid-template-columns: repeat(3, 1fr); } .demo-side .lbl, .demo-size, .demo-note { grid-column: 1 / -1; } .demo-role { flex-direction: column; text-align: center; padding: 10px 6px; } .demo-role small { display: none; } .demo-frame { width: 100%; height: 74vh; border-radius: 30px; } } /* راه جایگزین ورود: کد قابل‌کپی برای وقتی که بله پارامتر لینک را نمی‌فرستد */ .lg-alt { margin: 16px 0 0; text-align: start; font-size: .9rem; color: var(--muted); } .lg-alt summary { cursor: pointer; color: var(--text); font-weight: 600; } .lg-alt p { margin: 8px 0; } .lg-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line, #cbd5e1); background: var(--bg2); color: var(--text); font: 600 .95rem ui-monospace, monospace; cursor: pointer; } .lg-code span { font: 500 .8rem var(--font, inherit); color: var(--muted); } /* ---------- رادار ۲۴/۷ (تصویر اصلی صفحه‌ی محصول) ---------- */ .rd-hero { position: relative; width: min(420px, 88vw); aspect-ratio: 1; margin: 0 auto; } .rd-disc { position: absolute; inset: 6%; border-radius: 50%; border: 1px solid var(--line2); background: radial-gradient(circle, color-mix(in srgb, var(--a1) 40%, transparent) 0 1.6%, transparent 2%), repeating-radial-gradient(circle, transparent 0 16.6%, var(--line) 16.6% 17.2%), var(--bg); overflow: hidden; box-shadow: var(--shadow, 0 20px 60px rgba(0,0,0,.12)); } .rd-disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: rdSweep 4s linear infinite; background: conic-gradient(from 0deg, transparent 0 68%, color-mix(in srgb, var(--a1) 42%, transparent) 100%); } .rd-disc i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--a1); animation: rdPing 4s ease-out infinite; } .rd-d1 { top: 26%; left: 62%; animation-delay: .5s !important; } .rd-d2 { top: 60%; left: 26%; animation-delay: 1.8s !important; } .rd-d3 { top: 68%; left: 66%; animation-delay: 3s !important; } .rd-note { position: absolute; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 16px; background: var(--bg); font-size: 13px; box-shadow: 0 10px 34px -10px rgba(0,0,0,.28); border: 1px solid var(--line2); animation: rdFloat 6s ease-in-out infinite; } .rd-note span { font-size: 22px; } .rd-note b { display: block; font-size: 13px; } .rd-note small { color: var(--text3); } .rd-note.n1 { top: 4%; inset-inline-start: -2%; } .rd-note.n2 { top: 44%; inset-inline-end: -6%; animation-delay: -2s; } .rd-note.n3 { bottom: 2%; inset-inline-start: 6%; animation-delay: -4s; } @keyframes rdSweep { to { transform: rotate(360deg); } } @keyframes rdPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a1) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 16px transparent; } } @keyframes rdFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .rd-disc::before, .rd-disc i, .rd-note { animation: none; } } /* ---- رادار جریان: تصویرهای کارت‌ها (قرمز و سفید) ---- */ .rdx { width: min(100%, 320px); display: grid; gap: 10px; padding: 18px; } .rdx-morning { position: relative; } .rdx-morning .sun { height: 46px; display: grid; place-items: end center; overflow: hidden; } .rdx-morning .sun i { width: 84px; height: 42px; border-radius: 84px 84px 0 0; background: linear-gradient(180deg, var(--a2, #ff5a66), var(--a1, #e11d2e)); box-shadow: 0 0 0 10px color-mix(in srgb, var(--a1, #e11d2e) 12%, transparent); } .rdx ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rdx-morning li { display: flex; align-items: center; gap: 10px; background: var(--card, #fff); border: 1px solid var(--line2, #e6e6ea); border-radius: 12px; padding: 9px 12px; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.05); } .rdx-morning li span { flex: 1; } .rdx-morning li em { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--a1, #e11d2e); border-radius: 99px; padding: 2px 8px; } .rdx-price .r { display: flex; align-items: center; gap: 10px; background: var(--card, #fff); border: 1px solid var(--line2, #e6e6ea); border-radius: 12px; padding: 11px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.05); } .rdx-price .r span { flex: 1; font-size: 13px; color: var(--text2, #555); } .rdx-price .r b { font-size: 15px; font-variant-numeric: tabular-nums; } .rdx-price .up { color: #16a34a; font-style: normal; font-size: 11px; } .rdx-price .dn { color: var(--a1, #e11d2e); font-style: normal; font-size: 11px; } .rdx-msg { grid-template-columns: 1fr; } .rdx-msg .bub { background: var(--card, #fff); border: 1px solid var(--line2, #e6e6ea); border-inline-start: 4px solid var(--a1, #e11d2e); border-radius: 14px; padding: 12px 14px; display: grid; gap: 3px; font-size: 13px; box-shadow: 0 8px 22px rgba(0,0,0,.06); } .rdx-msg .bub small { color: var(--a1, #e11d2e); font-weight: 800; font-size: 11px; } .rdx-msg .bub span { color: var(--text2, #555); } .rdx-msg .bub u { text-decoration: none; color: #fff; background: var(--a1, #e11d2e); border-radius: 9px; padding: 5px 10px; justify-self: start; margin-top: 4px; font-size: 12px; font-weight: 700; } .rdx-msg .b2 { opacity: .75; transform: scale(.96); } .rdx-login { justify-items: center; } .rdx-login .bt { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--card, #fff); border: 1px solid var(--line2, #e6e6ea); border-radius: 12px; padding: 11px 14px; font-size: 14px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.05); } .rdx-login .bt i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; color: #fff; background: var(--a1, #e11d2e); font-size: 13px; } .rdx-login .bt.t i { background: var(--a2, #ff5a66); } .rdx-login small { color: var(--text3, #888); font-size: 11.5px; } /* ===================================================================== حرکت شناور (Float) — نسخه‌ی ۱.۰.۴ به زبان ساده: کارت‌ها و تصویرها خیلی آرام کمی چپ و راست و بالا و پایین می‌روند تا صفحه زنده به نظر برسد. از ویژگی `translate` استفاده شده (نه `transform`) تا با انیمیشن‌های قبلی هر بخش تداخل نداشته باشد. ===================================================================== */ @keyframes flt { 0%, 100% { translate: 0 0; } 25% { translate: 6px -6px; } 50% { translate: 0 -11px; } 75% { translate: -6px -5px; } } @keyframes fltSlow { 0%, 100% { translate: 0 0; } 50% { translate: -5px -7px; } } /* تکه‌های تصویر بالای صفحه‌ی هر محصول (و کارت‌های صفحه‌ی اول) */ .rd-note, .gp-chip, .bt-chip { animation-name: flt; animation-duration: 7s; } .gp-sheet:not(.gp-sheet-back), .wb-win, .bt-phone { animation: flt 9s ease-in-out infinite; } .wb-mobile { animation: flt 7s ease-in-out -2s infinite; } .wb-score { animation: flt 6.5s ease-in-out -4s infinite; } .gp-sheet-back { animation: fltSlow 9s ease-in-out -3s infinite; } .rd-disc { animation: fltSlow 10s ease-in-out infinite; } .p-hero .art .phone, .tile .art .phone { animation: flt 9s ease-in-out infinite; } .p-hero .art .phone.side, .tile .art .phone.side { animation-duration: 8s; animation-delay: -3s; } .p-hero .art .phone.side + .phone, .tile .art .phone.side ~ .phone.side { animation-delay: -5.5s; } /* تصویر داخل کارت‌های مزیت‌ها؛ هر کارت با کمی اختلاف زمانی تا همه با هم تکان نخورند */ .bx-art > .ga { animation: flt 8s ease-in-out infinite; } .bento .bx:nth-child(2n) .bx-art > .ga { animation-delay: -2.7s; } .bento .bx:nth-child(3n) .bx-art > .ga { animation-delay: -5.3s; } /* ---------- لونا — یک گوشی، یک داستان (کامنت ← دایرکت) ---------- */ .ln-hero.lo { display: block; width: min(460px, 92vw); padding: 28px 0 44px; } .ln-hero.lo .ln-orbit { inset: 4% 4% 8%; } .ln-hero.lo .lo-phone { width: 280px; height: 500px; margin: 0 auto; padding: 0; overflow: hidden; border-radius: 38px; animation: flt 9s ease-in-out infinite; box-shadow: 0 0 0 8px #1b2550, 0 0 0 9px rgba(223,229,242,.25), 0 40px 80px -30px rgba(0,0,0,.7); } .lo-scr { position: absolute; inset: 14px 12px 16px; } .lo-post { animation: loPost 14s cubic-bezier(.65,0,.35,1) infinite; } .lo-dm { animation: loDm 14s cubic-bezier(.65,0,.35,1) infinite; } @keyframes loPost { 0%, 46% { opacity: 1; transform: none; } 51%, 93% { opacity: 0; transform: translate3d(45%,0,0); } 93.5% { opacity: 0; transform: none; } 100% { opacity: 1; transform: none; } } @keyframes loDm { 0%, 46% { opacity: 0; transform: translate3d(-45%,0,0); } 51%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } } /* تکه‌ی اول: کامنت سارا، جواب صفحه، اعلان دایرکت و لمس آن */ .lo-c1 { animation: loC1 14s cubic-bezier(.22,1,.36,1) infinite; } .lo-c2 { animation: loC2 14s cubic-bezier(.22,1,.36,1) infinite; } @keyframes loC1 { 0%, 11% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 15%, 90% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } } @keyframes loC2 { 0%, 23% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 27%, 90% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } } .lo-push { position: absolute; z-index: 5; top: 2px; inset-inline: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 34px -12px rgba(10,18,48,.45), 0 0 0 1px #e6e8f0; animation: loPush 14s cubic-bezier(.22,1,.36,1) infinite; } .lo-push b { display: block; font: 700 12.5px var(--latin); } .lo-push small { display: block; color: #4b5068; font-size: 11.5px; } .lo-tap { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(59,78,168,.35); box-shadow: 0 0 0 6px rgba(59,78,168,.15); animation: loTap 14s ease-out infinite; } @keyframes loPush { 0%, 32% { opacity: 0; transform: translate3d(0,-130%,0); } 36%, 46% { opacity: 1; transform: none; } 49%, 100% { opacity: 0; transform: scale(.96); } } @keyframes loTap { 0%, 41% { opacity: 0; transform: scale(.4); } 43% { opacity: 1; transform: scale(1); } 46%, 100% { opacity: 0; transform: scale(1.7); } } /* تکه‌ی دوم: پیام‌های دایرکت یکی‌یکی */ .lo-dm .ln-thread { min-height: 0; } .lo-m1 { animation: loM1 14s cubic-bezier(.22,1,.36,1) infinite; } .lo-m2 { animation: loM2 14s cubic-bezier(.22,1,.36,1) infinite; } .lo-m3 { animation: loM3 14s cubic-bezier(.22,1,.36,1) infinite; } .lo-m4 { animation: loM4 14s cubic-bezier(.22,1,.36,1) infinite; } .lo-m5 { animation: loM5 14s cubic-bezier(.22,1,.36,1) infinite; } .lo-ty { animation: loTy 14s linear infinite; } @keyframes loM1 { 0%, 52% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 55%, 100% { opacity: 1; transform: none; } } @keyframes loM2 { 0%, 58% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 61%, 100% { opacity: 1; transform: none; } } @keyframes loM3 { 0%, 64% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 67%, 100% { opacity: 1; transform: none; } } @keyframes loM4 { 0%, 71% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 74%, 100% { opacity: 1; transform: none; } } @keyframes loTy { 0%, 76% { opacity: 0; } 77.5%, 82% { opacity: 1; } 83%, 100% { opacity: 0; } } @keyframes loM5 { 0%, 82% { opacity: 0; transform: translate3d(0,10px,0) scale(.96); } 85%, 100% { opacity: 1; transform: none; } } .lo-last { display: grid; } .lo-last > * { grid-area: 1 / 1; justify-self: start; align-self: start; } /* برچسب‌های شناور کنار گوشی */ .lo-chip { position: absolute; z-index: 6; white-space: nowrap; font-size: 12.5px; font-weight: 800; color: #0a1230; padding: 8px 14px; border-radius: 999px; background: linear-gradient(135deg, #f3f5fb, #c9d2ea); box-shadow: 0 14px 30px -10px rgba(0,0,0,.55); animation: flt 7s ease-in-out infinite; } .lo-k1 { top: 8px; inset-inline-start: 2%; } .lo-k2 { bottom: 22px; inset-inline-end: 2%; animation-delay: -3.5s; } .tile .art-made .ln-hero.lo { margin-bottom: -70px; transform: none; } /* ===================================================================== نمای موبایل (عرض ۶۴۰ پیکسل و کمتر): همه‌ی تصویرها کامل داخل صفحه، بدون بریدگی از کناره‌ها ===================================================================== */ @media (max-width: 640px) { /* لونا */ .ln-hero.lo { width: 84vw; } .ln-hero.lo .lo-phone { width: min(258px, 70vw); height: 470px; border-radius: 32px; box-shadow: 0 0 0 6px #1b2550, 0 0 0 7px rgba(223,229,242,.25), 0 30px 60px -30px rgba(0,0,0,.7); } .ln-hero.lo .ln-peng { font-size: 72px; } .ln-hero.lo .ln-say { font-size: 12.5px; padding: 6px 8px; } .ln-hero.lo .ln-m { font-size: 12px; } .lo-chip { font-size: 11px; padding: 6px 11px; } .lo-k1 { top: 6px; inset-inline-start: -4px; } .lo-k2 { bottom: 24px; inset-inline-end: -4px; } /* رادار جریان */ .rd-hero { width: min(330px, 78vw); } .rd-note { padding: 7px 10px; gap: 7px; border-radius: 13px; } .rd-note span { font-size: 17px; } .rd-note b { font-size: 11.5px; } .rd-note small { font-size: 10.5px; } .rd-note.n1 { inset-inline-start: -4px; } .rd-note.n2 { inset-inline-end: -6px; } .rd-note.n3 { inset-inline-start: 0; } /* جیم‌پامپ */ .gp-hero { width: 76vw; } .gp-chip { font-size: 11px; padding: 6px 10px; } .gp-chip-voice { inset-inline-start: -10px; } .gp-chip-ok { inset-inline-end: -10px; } .gp-sheet { padding: 14px; gap: 12px; border-radius: 22px; } /* طراحی سایت */ .wb-hero { width: 74vw; } .wb-page { min-height: 220px; padding: 12px; gap: 10px; } .wb-mobile { inset-inline-start: -14px; width: 78px; height: 150px; border-radius: 18px; padding: 10px 7px; gap: 6px; } .wb-score { inset-inline-end: -14px; top: 26px; padding: 8px 10px; } .wb-score svg { width: 40px; height: 40px; } .wb-score b { margin-top: -31px; font-size: 13px; } /* طراحی ربات */ .bt-hero { width: 78vw; } .bt-phone { width: 66vw; } .bt-chip { font-size: 11px; padding: 6px 10px; } .bt-chip.c1 { inset-inline-start: -8px; } .bt-chip.c2 { top: 30%; inset-inline-end: -8px; } .bt-chip.c3 { inset-inline-start: -8px; } /* کارت‌های مزیت‌ها: تصویر جمع‌وجورتر */ .bx-art { min-height: 140px; } } /* کاربرانی که در تنظیمات گوشی «کاهش حرکت» را روشن کرده‌اند: بدون حرکت شناور، لونا روی صحنه‌ی دایرکت ثابت می‌ماند */ @media (prefers-reduced-motion: reduce) { .rd-note, .gp-chip, .bt-chip, .gp-sheet, .wb-win, .wb-mobile, .wb-score, .bt-phone, .rd-disc, .p-hero .art .phone, .tile .art .phone, .bx-art > .ga, .ln-hero.lo .lo-phone, .lo-chip { animation: none !important; } .lo-post, .lo-push, .lo-tap, .lo-ty { animation: none !important; opacity: 0; } .lo-dm, .lo-c1, .lo-c2, .lo-m1, .lo-m2, .lo-m3, .lo-m4, .lo-m5 { animation: none !important; opacity: 1; transform: none; } } /* دموی ساده‌ی پاشا: یک دکمه (جایگزین iframe و نوار نقش‌ها) */ .demo-go { display: grid; justify-items: center; gap: 18px; margin: 44px auto 0; max-width: 520px; text-align: center; } .demo-go-ic { font-size: 44px; animation: flt 8s ease-in-out infinite; } .demo-go .btn.big { padding: 16px 38px; font-size: 18px; } .demo-go .demo-note { color: var(--text3); font-size: 13.5px; line-height: 1.9; } @media (prefers-reduced-motion: reduce) { .demo-go-ic { animation: none; } }