/* فرش پلاس — رابط شبکه‌ی اجتماعی (D-063) پالت شاد با الهام از رنگ‌های فرش: لاکی/سرخابی، زعفرانی، فیروزه‌ای. */ @import url("../../vendor/vazirmatn/vazirmatn.7ef68703d08d.css"); :root { --fp-primary: #e11d74; /* سرخابی لاکی */ --fp-primary-rgb: 225, 29, 116; --fp-saffron: #f59e0b; /* زعفرانی */ --fp-turquoise: #06b6d4; /* فیروزه‌ای */ --fp-indigo: #6d28d9; /* لاجوردی-بنفش */ --fp-grad: linear-gradient(135deg, #f59e0b 0%, #e11d74 50%, #6d28d9 100%); --fp-grad-soft: linear-gradient(135deg, #fff7ed 0%, #fdf2f8 55%, #f5f3ff 100%); --fp-bg: #fafafb; --fp-surface: #ffffff; --fp-text: #111827; --fp-muted: #6b7280; --fp-border: #ececf1; --fp-bubble-me: linear-gradient(135deg, #e11d74, #a21caf); --fp-bubble-them: #f1f1f5; --fp-radius: 18px; --fp-nav-h: 60px; --bs-body-font-family: "Vazirmatn", system-ui, sans-serif; --bs-primary: var(--fp-primary); --bs-primary-rgb: var(--fp-primary-rgb); --bs-link-color: var(--fp-primary); --bs-link-color-rgb: var(--fp-primary-rgb); --bs-link-hover-color: #be185d; --bs-body-bg: var(--fp-bg); --bs-body-color: var(--fp-text); --bs-border-color: var(--fp-border); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fp-bg: #0b0b10; --fp-surface: #15151d; --fp-text: #f3f4f6; --fp-muted: #9ca3af; --fp-border: #262633; --fp-bubble-them: #22222e; --fp-grad-soft: linear-gradient(135deg, #1c1410 0%, #1c0f18 55%, #150f24 100%); --bs-body-bg: var(--fp-bg); --bs-body-color: var(--fp-text); --bs-border-color: var(--fp-border); --bs-secondary-color: #9ca3af; --bs-tertiary-bg: #1b1b24; --bs-secondary-bg: #1f1f2a; color-scheme: dark; } } :root[data-theme="dark"] { --fp-bg: #0b0b10; --fp-surface: #15151d; --fp-text: #f3f4f6; --fp-muted: #9ca3af; --fp-border: #262633; --fp-bubble-them: #22222e; --fp-grad-soft: linear-gradient(135deg, #1c1410 0%, #1c0f18 55%, #150f24 100%); --bs-body-bg: var(--fp-bg); --bs-body-color: var(--fp-text); --bs-border-color: var(--fp-border); --bs-secondary-color: #9ca3af; --bs-tertiary-bg: #1b1b24; --bs-secondary-bg: #1f1f2a; color-scheme: dark; } html, body { background: var(--fp-bg); color: var(--fp-text); } body { font-family: var(--bs-body-font-family); -webkit-tap-highlight-color: transparent; padding-bottom: calc(var(--fp-nav-h) + env(safe-area-inset-bottom)); } a { text-decoration: none; } .ltr-num { direction: ltr; unicode-bidi: plaintext; } .text-muted, .fp-muted { color: var(--fp-muted) !important; } .btn-primary { --bs-btn-bg: var(--fp-primary); --bs-btn-border-color: var(--fp-primary); --bs-btn-hover-bg: #be185d; --bs-btn-hover-border-color: #be185d; --bs-btn-active-bg: #9d174d; --bs-btn-disabled-bg: var(--fp-primary); --bs-btn-disabled-border-color: var(--fp-primary); } .btn-grad { background: var(--fp-grad); color: #fff; border: 0; font-weight: 600; } .btn-grad:hover, .btn-grad:focus { color: #fff; filter: brightness(1.07); } .btn-soft { background: var(--bs-tertiary-bg, #f3f4f6); color: var(--fp-text); border: 0; font-weight: 600; } .btn-soft:hover { background: var(--fp-border); color: var(--fp-text); } .form-control, .form-select { border-radius: 12px; background-color: var(--fp-surface); color: var(--fp-text); } .form-control:focus { border-color: rgba(var(--fp-primary-rgb), .5); box-shadow: 0 0 0 .2rem rgba(var(--fp-primary-rgb), .15); } .card, .fp-card { background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: var(--fp-radius); } .grad-text { background: var(--fp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── چیدمان ─────────────────────────────────────────────── */ .fp-shell { display: flex; min-height: 100vh; } .fp-main { flex: 1; min-width: 0; } .fp-col { max-width: 620px; margin-inline: auto; width: 100%; min-width: 0; } .fp-col-narrow { max-width: 480px; margin-inline: auto; width: 100%; min-width: 0; } html, body { overflow-x: clip; } /* D-131: ارتفاعِ سرِ صفحه، یک جا. هر عنصرِ چسبانِ دیگری که نباید زیرِ نوارِ بالا برود باید از همین متغیر بخواند، نه از عددِ ثابت. روی دسکتاپ نوارِ بالا اصلاً نیست (ناوبری به ستونِ کناری می‌رود)، پس عدد صفر می‌شود؛ پیش از این `top: 56px` در قالب‌ها ثابت بود و روی دسکتاپ یک نوارِ شناور وسطِ صفحه می‌ساخت که محتوا از بالایش رد می‌شد. */ :root { --fp-topbar-h: 56px; } /* و لبه‌ی پایینِ نوارِ چسبانِ اکسپلور: بی این خط، محتوا زیرِ نوار ناگهان قطع می‌شود و نوار شناور به نظر می‌رسد. */ .explore-bar { border-bottom: 1px solid var(--fp-border); } .fp-topbar { position: sticky; top: 0; z-index: 1030; height: 56px; display: flex; align-items: center; justify-content: space-between; padding-inline: 16px; background: color-mix(in srgb, var(--fp-surface) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--fp-border); } .fp-logo { font-weight: 900; font-size: 1.45rem; letter-spacing: -.3px; display: inline-flex; align-items: center; gap: 8px; } .fp-logo img { width: 30px; height: 30px; } .icon-btn { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--fp-text); font-size: 1.45rem; border: 0; background: transparent; } .icon-btn:hover { background: var(--bs-tertiary-bg, #f3f4f6); color: var(--fp-text); } .dot-badge { position: absolute; top: 4px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--fp-primary); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--fp-surface); } /* منوی حساب زیر آواتار نوار بالا (D-094) — روی موبایل تنها راه رسیدن به تنظیمات، پیج‌ها و خروج است، پس باید پهن و انگشتی باشد. */ .acct-menu-list { --bs-dropdown-min-width: 15rem; max-width: min(19rem, calc(100vw - 24px)); max-height: calc(100vh - 76px); overflow-y: auto; border-radius: 16px; padding: 6px; } .acct-menu-list .dropdown-item { border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; } .acct-menu-list .dropdown-item i { font-size: 1.15rem; width: 22px; text-align: center; flex-shrink: 0; } .acct-menu-list .dropdown-item .badge { margin-inline-start: auto; } .acct-menu-list form { margin: 0; } .fp-bottomnav { position: fixed; bottom: 0; inset-inline: 0; z-index: 1030; height: calc(var(--fp-nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: space-around; align-items: center; background: color-mix(in srgb, var(--fp-surface) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--fp-border); } .fp-bottomnav a { flex: 1; display: grid; place-items: center; height: 100%; color: var(--fp-muted); font-size: 1.5rem; } .fp-bottomnav a.active { color: var(--fp-text); } .fp-bottomnav .nav-plus { width: 46px; height: 34px; border-radius: 12px; background: var(--fp-grad); color: #fff; display: grid; place-items: center; font-size: 1.35rem; box-shadow: 0 6px 18px rgba(var(--fp-primary-rgb), .35); } .fp-bottomnav .avatar { --s: 28px; } .fp-bottomnav a.active .avatar { outline: 2px solid var(--fp-text); outline-offset: 1px; } .fp-sidenav { display: none; } @media (min-width: 992px) { body { padding-bottom: 0; } .fp-bottomnav, .fp-topbar.mobile-only { display: none; } /* نوارِ بالا پنهان است، پس چیزی زیرش نمی‌رود. */ :root { --fp-topbar-h: 0px; } .fp-sidenav { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; width: 250px; padding: 26px 14px; border-inline-end: 1px solid var(--fp-border); background: var(--fp-surface); flex-shrink: 0; } .fp-sidenav .fp-logo { padding: 6px 12px 28px; } .fp-sidenav a.side-link { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; color: var(--fp-text); font-size: 1.02rem; margin-bottom: 2px; position: relative; } .fp-sidenav a.side-link i { font-size: 1.45rem; width: 28px; text-align: center; } .fp-sidenav a.side-link:hover { background: var(--bs-tertiary-bg, #f3f4f6); } .fp-sidenav a.side-link.active { font-weight: 800; } .fp-sidenav .dot-badge { position: static; margin-inline-start: auto; border: 0; } .fp-aside { display: block !important; width: 320px; padding: 32px 20px; flex-shrink: 0; } } @media (min-width: 1200px) { .fp-sidenav { width: 270px; } } .fp-aside { display: none; } /* ── آواتار ─────────────────────────────────────────────── */ .avatar { --s: 40px; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; flex-shrink: 0; background: var(--fp-border); vertical-align: middle; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-letter { --h: 330; width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: calc(var(--s) * .42); background: linear-gradient(135deg, hsl(var(--h) 85% 60%), hsl(calc(var(--h) + 40) 80% 50%)); } .avatar-ring { padding: 3px; background: var(--fp-grad); overflow: visible; } .avatar-ring > img, .avatar-ring > .avatar-letter { border-radius: 50%; border: 2px solid var(--fp-surface); } /* ── ردیف استوری/پیشنهاد ────────────────────────────────── */ .stories { display: flex; gap: 14px; overflow-x: auto; padding: 14px 16px 10px; scrollbar-width: none; } .stories::-webkit-scrollbar { display: none; } .story { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; flex-shrink: 0; color: var(--fp-text); } .story small { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; } .story-add .avatar { background: var(--fp-grad-soft); color: var(--fp-primary); font-size: 1.6rem; border: 2px dashed rgba(var(--fp-primary-rgb), .45); } .feed-tabs { display: flex; gap: 8px; padding: 4px 16px 12px; overflow-x: auto; scrollbar-width: none; } .feed-tabs::-webkit-scrollbar { display: none; } .feed-tabs a { padding: 6px 16px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--fp-muted); background: var(--bs-tertiary-bg, #f3f4f6); white-space: nowrap; flex: 0 0 auto; } .feed-tabs a.active { background: var(--fp-text); color: var(--fp-bg); } /* ── پست ─────────────────────────────────────────────────── */ .post { background: var(--fp-surface); border-bottom: 1px solid var(--fp-border); margin-bottom: 8px; } @media (min-width: 576px) { .post { border: 1px solid var(--fp-border); border-radius: var(--fp-radius); margin-bottom: 20px; overflow: hidden; } } .post-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; } .post-head .name { font-weight: 700; color: var(--fp-text); line-height: 1.2; } .post-head .meta { font-size: .78rem; color: var(--fp-muted); } .sponsored { font-size: .74rem; font-weight: 700; color: var(--fp-primary); } .post-media { position: relative; background: #000; overflow: hidden; } .carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; direction: ltr; } .carousel-track::-webkit-scrollbar { display: none; } .carousel-track > * { flex: 0 0 100%; scroll-snap-align: center; } .post-media img, .post-media video { width: 100%; max-height: 78vh; object-fit: cover; display: block; background: #000; } .post-media .ratio-box { aspect-ratio: var(--r, 1 / 1); max-height: 78vh; min-width: 0; width: 100%; } .post-media .ratio-box > * { width: 100%; height: 100%; object-fit: cover; } /* عکس هیچ‌وقت بریده نمی‌شود (D-077): وقتی سقف ارتفاع 78vh قاب را کوتاه‌تر از نسبت واقعی می‌کند — مثلاً عکس مربعی ۶۲۰ پیکسلی روی لپ‌تاپ — cover بالا و پایینش را می‌برید. contain کل عکس را نشان می‌دهد و کنارش سیاه می‌ماند. */ .post-media .ratio-box > img { object-fit: contain; } /* صفحه‌ی خود پست: جای بیشتر، و ویدئو هم کامل. */ .post-media.is-detail .ratio-box, .post-media.is-detail img, .post-media.is-detail video { max-height: 88vh; } .post-media.is-detail .ratio-box > video { object-fit: contain; } /* D-137: ویدئو هیچ‌جا بریده نمی‌شود — نه فقط در صفحه‌ی پست. عکس را می‌شود برای یکدستیِ فید برید؛ ویدئو حرکت دارد و بریدنش یعنی متن و چهره‌ی بالا و پایینِ قاب گم شود. قاب با app.js از ابعادِ واقعیِ خودِ ویدئو درست می‌شود. */ .post-media .ratio-box > video { object-fit: contain; } /* D-129: ورق‌زدن آلبوم با ماوس. جای دکمه‌ها **فیزیکی** است (left/right) و نه منطقی (inset-inline)، چون خودِ نوار `direction: ltr` دارد: تصویر اول همیشه سمتِ چپ است، هر جهتی که صفحه داشته باشد. اگر این‌جا inset-inline می‌گذاشتیم، در فارسی «قبلی» روی تصویر بعدی می‌نشست. و فقط روی دستگاهِ نشانگردار: روی گوشی انگشت کار خودش را می‌کند و دو دکمه‌ی شناور جز شلوغی چیزی نیست. */ .carousel-nav { display: none; } @media (hover: hover) and (pointer: fine) { .carousel-nav { display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.42); color: #fff; font-size: 1rem; opacity: 0; transition: opacity .15s ease; backdrop-filter: blur(4px); } .carousel-nav.prev { left: 10px; } .carousel-nav.next { right: 10px; } .post-media:hover .carousel-nav:not([hidden]) { opacity: 1; } .carousel-nav:hover { background: rgba(0,0,0,.62); } .carousel-nav:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; } } .carousel-nav[hidden] { display: none; } .carousel-dots { position: absolute; bottom: 10px; inset-inline: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; } .carousel-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: .2s; } .carousel-dots span.on { background: #fff; width: 16px; border-radius: 3px; } .media-count { position: absolute; top: 10px; inset-inline-end: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: .75rem; padding: 2px 10px; border-radius: 999px; } .heart-pop { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; } .heart-pop i { font-size: 6rem; color: #fff; filter: drop-shadow(0 6px 20px rgba(0,0,0,.35)); } .heart-pop.show { animation: pop .9s ease; } @keyframes pop { 0% { opacity: 0; transform: scale(.4);} 15% { opacity: 1; transform: scale(1.15);} 30% { transform: scale(.95);} 70% { opacity: 1;} 100% { opacity: 0; transform: scale(1);} } .post-actions { display: flex; align-items: center; gap: 4px; padding: 6px 8px 0; } .post-actions .icon-btn { width: 40px; height: 40px; font-size: 1.5rem; } .post-actions .liked i { color: #ef4444; animation: like .35s ease; } .post-actions .saved i { color: var(--fp-text); } @keyframes like { 50% { transform: scale(1.3);} } .post-body { padding: 2px 14px 12px; font-size: .95rem; line-height: 1.85; } .post-body .likes { font-weight: 700; margin-bottom: 2px; } .post-body .caption { white-space: normal; word-wrap: break-word; } .post-body .caption.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tag, .mention { color: #2563eb; font-weight: 500; } [data-theme="dark"] .tag, [data-theme="dark"] .mention { color: #93c5fd; } .post-body .when { font-size: .75rem; color: var(--fp-muted); } /* نوار اقدام تبلیغ */ .ad-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: var(--fp-grad-soft); border-bottom: 1px solid var(--fp-border); color: var(--fp-text); font-weight: 700; } .ad-cta:hover { color: var(--fp-primary); } .ad-cta i { font-size: 1.15rem; } .ad-actions { display: flex; gap: 8px; padding: 10px 14px 0; } .ad-actions .btn { flex: 1; border-radius: 12px; font-weight: 700; } .post.is-ad { box-shadow: 0 0 0 1.5px rgba(var(--fp-primary-rgb), .18) inset; } .post.is-ad.highlight { box-shadow: 0 0 0 2px var(--fp-saffron) inset; } /* ── شبکه‌ی تصاویر (نمایه/اکسپلور) ─────────────────────── */ .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .grid3 a { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--fp-border); display: block; } .grid3 a.tall { grid-row: span 2; aspect-ratio: auto; } .grid3 img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .grid3 a:hover img { transform: scale(1.04); } .grid3 .badge-icon { position: absolute; top: 6px; inset-inline-end: 6px; color: #fff; font-size: 1.05rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); } .grid3 .overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 16px; background: rgba(0,0,0,.35); color: #fff; font-weight: 700; } @media (hover: hover) { .grid3 a:hover .overlay { display: flex; } } /* ── نمایه ──────────────────────────────────────────────── */ .profile-head { padding: 20px 16px 8px; } .profile-stats { display: flex; justify-content: space-around; text-align: center; flex: 1; } .profile-stats a, .profile-stats div { color: var(--fp-text); } .profile-stats b { display: block; font-size: 1.1rem; } .profile-stats span { font-size: .8rem; color: var(--fp-muted); } .profile-tabs { display: flex; border-top: 1px solid var(--fp-border); } .profile-tabs a { flex: 1; text-align: center; padding: 12px; color: var(--fp-muted); font-size: 1.3rem; border-top: 2px solid transparent; margin-top: -1px; } .profile-tabs a.active { color: var(--fp-text); border-color: var(--fp-text); } /* D-127: شمارِ پست‌های در انتظار، روی تبِ خودش. */ .profile-tabs .tab-dot { font-size: .62rem; font-weight: 800; vertical-align: super; background: var(--fp-primary); color: #fff; border-radius: 999px; padding: 1px 5px; margin-inline-start: 2px; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; background: var(--fp-grad-soft); color: var(--fp-primary); font-weight: 700; border: 1px solid rgba(var(--fp-primary-rgb), .15); } /* ── نظرها ──────────────────────────────────────────────── */ .comment { display: flex; gap: 10px; padding: 8px 0; } .comment .body { flex: 1; font-size: .92rem; line-height: 1.8; } .comment.new { animation: fadein .4s ease; } @keyframes fadein { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none;} } .comment-form { position: sticky; bottom: calc(var(--fp-nav-h) + env(safe-area-inset-bottom)); background: var(--fp-surface); border-top: 1px solid var(--fp-border); padding: 10px 14px; display: flex; gap: 10px; align-items: center; } @media (min-width: 992px) { .comment-form { bottom: 0; } } .comment-form input { border: 0; background: transparent; flex: 1; outline: none; color: var(--fp-text); } /* ── ورود ───────────────────────────────────────────────── */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--fp-grad-soft); } .auth-card { width: 100%; max-width: 400px; background: var(--fp-surface); border-radius: 28px; padding: 36px 28px; box-shadow: 0 30px 80px -30px rgba(var(--fp-primary-rgb), .35); border: 1px solid var(--fp-border); } .auth-logo { width: 84px; height: 84px; border-radius: 26px; margin: 0 auto 14px; display: block; box-shadow: 0 16px 40px -12px rgba(var(--fp-primary-rgb), .6); } /* راه دوم ورود (کد پیامکی ↔ رمز) — «یا» با خط دوطرفه (D-075) */ .login-alt { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: .85rem; } .login-alt::before, .login-alt::after { content: ""; flex: 1; height: 1px; background: var(--fp-border); } .login-alt span { color: var(--fp-muted); } .login-alt a { text-decoration: none; font-weight: 600; white-space: nowrap; } .otp-input { letter-spacing: .6em; font-size: 1.6rem; font-weight: 800; } .pattern-bg { background-image: radial-gradient(rgba(var(--fp-primary-rgb), .08) 1.2px, transparent 1.2px); background-size: 18px 18px; } /* ── آپلود ──────────────────────────────────────────────── */ .dropzone { border: 2px dashed rgba(var(--fp-primary-rgb), .35); border-radius: var(--fp-radius); padding: 34px 16px; text-align: center; background: var(--fp-grad-soft); cursor: pointer; transition: .2s; display: block; } .dropzone:hover, .dropzone.drag { border-color: var(--fp-primary); } .dropzone i { font-size: 2.6rem; } .previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; } .previews .pv { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #000; } .previews .pv img, .previews .pv video { width: 100%; height: 100%; object-fit: cover; } .previews .pv button { position: absolute; top: 4px; inset-inline-start: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; display: grid; place-items: center; } .cta-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .cta-options label { border: 1.5px solid var(--fp-border); border-radius: 14px; padding: 12px; cursor: pointer; display: flex; gap: 8px; align-items: center; font-weight: 600; } .cta-options input { display: none; } .cta-options input:checked + label { border-color: var(--fp-primary); background: var(--fp-grad-soft); color: var(--fp-primary); } /* ── پیام‌رسان ───────────────────────────────────────────── */ .inbox-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--fp-text); } .inbox-row:hover { background: var(--bs-tertiary-bg, #f5f5f7); color: var(--fp-text); } .inbox-row .preview { font-size: .85rem; color: var(--fp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inbox-row.unread .preview { color: var(--fp-text); font-weight: 700; } .unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fp-primary); flex-shrink: 0; } .chat { display: flex; flex-direction: column; height: calc(100dvh - var(--fp-nav-h) - env(safe-area-inset-bottom)); } @media (min-width: 992px) { .chat { height: 100dvh; } } .chat-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--fp-border); background: var(--fp-surface); } .chat-body { flex: 1; overflow-y: auto; padding: 14px 12px 6px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; } .msg { display: flex; flex-direction: column; max-width: 78%; align-self: flex-end; } .msg.me { align-self: flex-start; align-items: flex-start; } .msg:not(.me) { align-items: flex-end; } .bubble { padding: 8px 13px; border-radius: 20px; background: var(--fp-bubble-them); color: var(--fp-text); line-height: 1.75; word-wrap: break-word; overflow-wrap: anywhere; font-size: .95rem; position: relative; } .msg.me .bubble { background: var(--fp-bubble-me); color: #fff; } .msg.me .bubble a { color: #fff; text-decoration: underline; } .bubble.media { padding: 3px; background: transparent !important; } .bubble.media img, .bubble.media video { max-width: 260px; max-height: 340px; border-radius: 16px; display: block; } .bubble .reply-ref { font-size: .78rem; opacity: .8; border-inline-start: 3px solid currentColor; padding-inline-start: 8px; margin-bottom: 4px; } .msg .time { font-size: .68rem; color: var(--fp-muted); padding: 1px 8px 6px; display: flex; gap: 4px; align-items: center; } .msg .time .bi-check2-all { color: var(--fp-turquoise); } .msg.deleted .bubble { font-style: italic; opacity: .6; background: transparent; border: 1px dashed var(--fp-border); color: var(--fp-muted); } .voice { display: flex; align-items: center; gap: 10px; min-width: 210px; } .voice button { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 1.2rem; background: rgba(255,255,255,.25); color: inherit; flex-shrink: 0; } .msg:not(.me) .voice button { background: var(--fp-primary); color: #fff; } .voice .wave { flex: 1; height: 26px; display: flex; align-items: center; gap: 2px; direction: ltr; } .voice .wave i { flex: 1; background: currentColor; opacity: .35; border-radius: 2px; min-height: 3px; } .voice .wave i.on { opacity: 1; } .voice .dur { font-size: .75rem; min-width: 34px; } .file-card { display: flex; gap: 10px; align-items: center; color: inherit; } .file-card i { font-size: 1.8rem; } .day-sep { align-self: center; font-size: .72rem; color: var(--fp-muted); background: var(--bs-tertiary-bg, #f3f4f6); padding: 2px 12px; border-radius: 999px; margin: 10px 0; } .composer { border-top: 1px solid var(--fp-border); background: var(--fp-surface); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); } @media (max-width: 991.98px) { .composer { padding-bottom: 8px; } } .composer-row { display: flex; align-items: flex-end; gap: 6px; } .composer textarea { flex: 1; resize: none; border-radius: 22px; padding: 9px 16px; max-height: 140px; border: 1px solid var(--fp-border); background: var(--bs-tertiary-bg, #f5f5f7); color: var(--fp-text); outline: none; line-height: 1.6; } .composer .icon-btn { width: 42px; height: 42px; font-size: 1.35rem; flex-shrink: 0; } .send-btn { background: var(--fp-grad) !important; color: #fff !important; } .rec-btn.recording { background: #ef4444 !important; color: #fff !important; animation: pulse 1.2s infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5);} 50% { box-shadow: 0 0 0 10px rgba(239,68,68,0);} } .rec-bar { display: none; align-items: center; gap: 10px; padding: 6px 12px; color: #ef4444; font-weight: 700; } .rec-bar.on { display: flex; } .rec-bar .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: blink 1s infinite; } @keyframes blink { 50% { opacity: .2; } } .reply-bar { display: none; align-items: center; gap: 8px; font-size: .82rem; padding: 4px 10px 8px; color: var(--fp-muted); } .reply-bar.on { display: flex; } .upload-progress { height: 3px; background: var(--fp-grad); width: 0; transition: width .2s; } /* ── متفرقه ─────────────────────────────────────────────── */ .empty { text-align: center; padding: 60px 20px; color: var(--fp-muted); } .empty i { font-size: 3.4rem; display: block; margin-bottom: 10px; background: var(--fp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .fp-toast { position: fixed; bottom: calc(var(--fp-nav-h) + 16px); inset-inline: 16px; margin-inline: auto; max-width: 420px; z-index: 1080; background: #111827; color: #fff; padding: 12px 18px; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.25); animation: fadein .3s; } .skeleton { background: linear-gradient(90deg, var(--fp-border) 25%, var(--bs-tertiary-bg, #f3f4f6) 50%, var(--fp-border) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 12px; } @keyframes shimmer { to { background-position: -200% 0; } } .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; } .install-banner { display: none; } .install-banner.show { display: flex; } .offline-bar { display: none; background: #111827; color: #fff; text-align: center; font-size: .8rem; padding: 4px; } body.is-offline .offline-bar { display: block; } .dropdown-menu { border-radius: 14px; border-color: var(--fp-border); background: var(--fp-surface); } .modal-content { border-radius: 22px; background: var(--fp-surface); } .sheet .modal-dialog { margin: 0; position: fixed; bottom: 0; inset-inline: 0; max-width: none; } .sheet .modal-content { border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); } @media (min-width: 576px) { .sheet .modal-dialog { position: relative; margin: 1.75rem auto; max-width: 420px; } .sheet .modal-content { border-radius: 22px; } } .stat-tile { background: var(--fp-grad-soft); border-radius: 14px; padding: 10px; text-align: center; } .stat-tile b { display: block; font-size: 1.1rem; } .stat-tile span { font-size: .72rem; color: var(--fp-muted); } /* گفتگو تمام‌صفحه (مثل اینستاگرام): نوار پایین پنهان */ @media (max-width: 991.98px) { body.chat-page { padding-bottom: 0; } body.chat-page .fp-bottomnav, body.chat-page .install-banner { display: none !important; } body.chat-page .chat { height: 100dvh; } body.chat-page .composer { padding-bottom: calc(8px + env(safe-area-inset-bottom)); } } /* نقش صنفی (D-068) */ .role-picker { display: flex; flex-wrap: wrap; gap: 8px; } .role-picker input { display: none; } .role-picker label { padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--fp-border); cursor: pointer; font-size: .88rem; font-weight: 600; user-select: none; transition: .15s; background: var(--fp-surface); } .role-picker input:checked + label { background: var(--fp-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(var(--fp-primary-rgb), .3); } .role-filter .chip { white-space: nowrap; } .chip.on { background: var(--fp-text); color: var(--fp-bg); border-color: transparent; } /* صفحه‌ی معرفی (D-069) */ .landing { max-width: 1100px; margin-inline: auto; padding-bottom: 24px; } .landing .sec { padding: 26px 16px; } .landing .hero { padding: 40px 16px 34px; border-radius: 0 0 28px 28px; background-color: var(--fp-surface); } .landing .hero-inner { max-width: 760px; margin-inline: auto; } .landing .hero h1 { line-height: 1.6; } .landing .hero-stats { display: flex; flex-wrap: wrap; gap: 10px; } .landing .hero-stats > div { background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 16px; padding: 10px 18px; text-align: center; min-width: 96px; } .landing .hero-stats b { display: block; font-size: 1.25rem; } .landing .hero-stats span { font-size: .75rem; color: var(--fp-muted); } .landing .step { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fp-grad); color: #fff; font-weight: 800; } .landing .grid3 { gap: 4px; } @media (min-width: 992px) { .landing .hero { padding: 64px 24px 48px; } } /* ── فروشگاه‌های برنامه در صفحه‌ی اول (D-133) ─────────────────────── */ /* قابِ سفیدِ ثابت، درست به همان دلیلِ نمادهای اعتماد (پایین‌تر): نشانِ رسمیِ هر فروشگاه برای زمینه‌ی روشن طراحی شده و نشانِ تیره در حالت شب ناپدید می‌شود. قاب یکسان است تا نشان‌هایی با نسبت‌های متفاوت کنار هم مرتب بنشینند. */ .fp-stores { text-align: center; } .fp-storegrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .fp-store { box-sizing: border-box; display: grid; place-items: center; width: 180px; height: 74px; padding: 10px 14px; background: #fff; border: 1px solid var(--fp-border); border-radius: 16px; transition: transform .15s, box-shadow .15s, border-color .15s; } .fp-store:hover, .fp-store:focus-visible { transform: translateY(-3px); border-color: transparent; box-shadow: 0 10px 24px rgba(var(--fp-primary-rgb), .18); } .fp-store img { height: 44px; width: auto; max-width: 152px; object-fit: contain; } @media (max-width: 575.98px) { .fp-store { width: calc(50% - 6px); height: 66px; padding: 8px 10px; } .fp-store img { height: 38px; max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .fp-store { transition: none; } .fp-store:hover { transform: none; } } /* ── فوتر صفحه‌ی اول و نمادهای اعتماد (D-074) ────────────────────── */ /* فقط در landing؛ صفحه‌های داخلی نوار پایین اپ‌مانند دارند. */ /* فوتر هم‌رنگ بقیه‌ی سایت (گرادیان برند)، نه زرد خامِ فایل اصلی نشان. */ .fp-footer { position: relative; margin-top: 26px; padding: 34px 16px 18px; background: var(--fp-grad-soft); border: 1px solid var(--fp-border); border-bottom: 0; border-radius: 28px 28px 0 0; overflow: hidden; } .fp-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--fp-grad); } .fp-footlogo { display: block; width: 150px; height: auto; } .fp-foot-h { font-size: .85rem; font-weight: 700; margin-bottom: 12px; color: var(--fp-text); } .fp-foot-h::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 6px; border-radius: 3px; background: var(--fp-grad); } .fp-foot-list { list-style: none; padding: 0; margin: 0; font-size: .85rem; } .fp-foot-list li { margin-bottom: 7px; } .fp-foot-list a { color: var(--fp-muted); text-decoration: none; } .fp-foot-list a:hover { color: var(--fp-primary); } .fp-soc { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fp-border); background: var(--fp-surface); color: var(--fp-primary); font-size: 1.1rem; text-decoration: none; } .fp-soc:hover { background: var(--fp-grad); color: #fff; border-color: transparent; } /* نماد اعتماد: پس‌زمینه‌ی سفید ثابت — لوگوهای رسمی برای زمینه‌ی روشن طراحی شده‌اند و در حالت شب محو می‌شوند. */ .fp-trust { display: inline-block; background: #fff; border: 1px solid var(--fp-border); border-radius: 12px; padding: 6px; line-height: 0; } .fp-trust img { width: auto; height: 68px; max-width: 110px; object-fit: contain; } .fp-foot-end { margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(var(--fp-primary-rgb), .15); text-align: center; font-size: .8rem; color: var(--fp-muted); } .fp-foot-end > div + div { margin-top: 4px; } /* ── نشان تأیید (D-072) ─────────────────────────────────────────── */ .fp-badge { display: inline-flex; align-items: center; margin-inline-start: 3px; vertical-align: -1px; line-height: 1; } .fp-badge i { font-size: var(--bs, 14px); } .fp-badge-blue i { color: #1d9bf0; } .fp-badge-gold i { color: #f0a500; } .fp-badge-title { display: block; font-size: .78rem; color: var(--fp-muted); line-height: 1.4; } .verify-cta { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--fp-radius); background: var(--fp-grad-soft); border: 1px solid var(--fp-border); } .verify-cta i { font-size: 1.4rem; color: #1d9bf0; } .verify-doc { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--fp-border); border-radius: 12px; font-size: .84rem; margin-bottom: 6px; } /* ── استوری: نوار بالای فید ─────────────────────────────────────── */ .story-tray { display: flex; gap: 12px; overflow-x: auto; padding: 10px 2px 12px; scrollbar-width: none; border-bottom: 1px solid var(--fp-border); margin-bottom: 10px; } .story-tray::-webkit-scrollbar { display: none; } .story-bubble { flex: 0 0 auto; width: 70px; text-align: center; color: var(--fp-text); } .story-bubble .ring { position: relative; display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; padding: 3px; } .story-bubble .ring.live { background: var(--fp-grad); } .story-bubble .ring.seen { background: var(--fp-border); } .story-bubble .ring.plain { background: transparent; border: 1px dashed var(--fp-border); } .story-bubble .ring .avatar { border: 2px solid var(--fp-surface); } .story-bubble .add-dot { position: absolute; inset-block-end: 2px; inset-inline-end: 2px; font-size: 1.05rem; color: var(--fp-primary); background: var(--fp-surface); border-radius: 50%; } .story-bubble .name { display: block; font-size: .72rem; margin-top: 4px; color: var(--fp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .story-hint { align-self: center; font-size: .8rem; color: var(--fp-muted); } .avatar.has-story { box-shadow: 0 0 0 2px var(--fp-surface), 0 0 0 4px var(--fp-primary); } /* ── استوری: نمایشگر تمام‌صفحه ──────────────────────────────────── */ .sv { position: fixed; inset: 0; z-index: 1080; background: #08080c; display: grid; place-items: center; overflow: hidden; } /* D-129: قابِ صحنه. روی گوشی تمامِ صفحه، روی دسکتاپ یک قابِ گوشی‌شکل در وسط — وگرنه هر عنصرِ درصدی (کارتِ پستِ بازنشرشده، نظرسنجی، نوار پاسخ) به عرضِ نمایشگر کش می‌آمد و از قاب بیرون می‌زد. */ .sv-stage { position: relative; width: 100%; height: 100%; overflow: hidden; } @media (min-width: 640px) { .sv { background: #000; } .sv-stage { width: min(430px, 100vw); height: min(94vh, calc(430px * 16 / 9)); border-radius: 16px; box-shadow: 0 18px 60px rgba(0,0,0,.6); } } .sv-bars { position: absolute; top: 8px; inset-inline: 10px; display: flex; gap: 4px; z-index: 6; } .sv-bar { flex: 1; height: 3px; border-radius: 99px; background: rgba(255,255,255,.28); overflow: hidden; } .sv-bar b { display: block; height: 100%; width: 0; background: #fff; border-radius: 99px; } .sv-head { position: absolute; top: 20px; inset-inline: 12px; display: flex; align-items: center; gap: 8px; z-index: 6; color: #fff; } .sv-author { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: .92rem; } .sv-time { font-size: .76rem; color: rgba(255,255,255,.7); } .sv-close { margin-inline-start: auto; color: #fff; font-size: 1.15rem; padding: 6px; } .sv-slide { display: none; margin: 0; position: absolute; inset: 0; } .sv-slide.on { display: block; } .sv-slide img, .sv-slide video { width: 100%; height: 100%; object-fit: contain; background: #08080c; } .sv-slide figcaption { position: absolute; inset-inline: 16px; bottom: 84px; color: #fff; font-size: .95rem; text-shadow: 0 2px 10px rgba(0,0,0,.6); z-index: 5; } .sv-link { position: absolute; inset-inline-start: 50%; transform: translateX(50%); bottom: 130px; z-index: 6; background: rgba(255,255,255,.18); color: #fff; padding: 7px 16px; border-radius: 99px; font-size: .84rem; backdrop-filter: blur(8px); } .sv-tap { position: absolute; top: 60px; bottom: 80px; width: 32%; background: transparent; border: 0; z-index: 4; } .sv-tap.prev { inset-inline-end: 0; } .sv-tap.next { inset-inline-start: 0; } .sv-pause { position: absolute; top: 56px; inset-inline-end: 14px; z-index: 6; background: rgba(255,255,255,.14); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 50%; } .sv-reply { position: absolute; inset-inline: 14px; bottom: 18px; z-index: 6; display: flex; gap: 8px; } .sv-reply input { flex: 1; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: 99px; padding: 10px 16px; font-size: .9rem; } .sv-reply input::placeholder { color: rgba(255,255,255,.6); } .sv-reply button { background: var(--fp-grad); border: 0; color: #fff; width: 42px; border-radius: 50%; } .sv-own { position: absolute; inset-inline: 14px; bottom: 18px; z-index: 6; display: flex; gap: 8px; align-items: center; } .sv-viewers, .sv-trash { background: rgba(255,255,255,.14); border: 0; color: #fff; border-radius: 99px; padding: 8px 16px; font-size: .85rem; } .sv-trash { padding: 8px 12px; } .sv-toast { position: absolute; inset-inline: 0; bottom: 78px; z-index: 8; text-align: center; color: #fff; font-size: .88rem; } .sv-toast::before { content: ""; } .sv-sheet { position: absolute; inset-inline: 0; bottom: 0; z-index: 9; max-height: 68%; background: var(--fp-surface); border-radius: 20px 20px 0 0; display: flex; flex-direction: column; animation: sv-up .18s ease; } @keyframes sv-up { from { transform: translateY(100%); } } .sv-sheet-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--fp-border); } .sv-sheet-body { overflow-y: auto; padding: 6px 10px 16px; } .sv-viewer { display: flex; align-items: center; gap: 10px; padding: 8px 6px; color: var(--fp-text); } /* ── برگه‌ی هم‌رسانی ────────────────────────────────────────────── */ .share-sheet { padding: 4px 2px; } .share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; max-height: 44vh; overflow-y: auto; padding: 4px; } .share-pick { position: relative; text-align: center; border: 0; background: transparent; padding: 6px 2px; border-radius: 14px; } .share-pick .name { display: block; font-size: .72rem; margin-top: 4px; color: var(--fp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .share-pick input { position: absolute; opacity: 0; pointer-events: none; } .share-pick .tick { position: absolute; inset-block-start: 4px; inset-inline-end: 12px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--fp-border); background: var(--fp-surface); display: grid; place-items: center; font-size: .7rem; color: transparent; } .share-pick input:checked ~ .tick { background: var(--fp-primary); border-color: var(--fp-primary); color: #fff; } .share-pick input:checked ~ .avatar { outline: 2px solid var(--fp-primary); outline-offset: 2px; } .share-done { text-align: center; padding: 26px 10px; color: #059669; font-weight: 600; } .share-done i { display: block; font-size: 2rem; margin-bottom: 8px; } /* ── کارت پست هم‌رسانی‌شده در گفتگو ─────────────────────────────── */ .msg-post { display: block; border: 1px solid var(--fp-border); border-radius: 14px; overflow: hidden; background: var(--fp-surface); max-width: 250px; } .msg-post img { width: 100%; height: 160px; object-fit: cover; display: block; } .msg-post .meta { padding: 8px 10px; } .msg-post .meta b { font-size: .85rem; display: block; } .msg-post .meta span { font-size: .75rem; color: var(--fp-muted); } .msg-story { display: flex; gap: 8px; align-items: center; padding: 6px; border-inline-start: 3px solid var(--fp-primary); background: var(--bs-tertiary-bg, #f3f4f6); border-radius: 10px; margin-bottom: 4px; } .msg-story img { width: 40px; height: 56px; object-fit: cover; border-radius: 6px; } /* ── مرکز آنالیز کاربر ──────────────────────────────────────────── */ .ins-kpi { border: 1px solid var(--fp-border); border-radius: var(--fp-radius); padding: 12px 14px; height: 100%; background: var(--fp-surface); } .ins-kpi .label { font-size: .78rem; color: var(--fp-muted); } .ins-kpi .value { font-size: 1.5rem; font-weight: 800; line-height: 1.2; } .ins-delta { font-size: .74rem; font-weight: 700; border-radius: 99px; padding: 1px 7px; } .ins-delta.up { background: rgba(16,185,129,.12); color: #059669; } .ins-delta.down { background: rgba(244,63,94,.12); color: #e11d48; } .ins-delta.flat { background: rgba(107,114,128,.12); color: var(--fp-muted); } .ins-hours { display: flex; gap: 3px; align-items: flex-end; height: 92px; } .ins-hours span { flex: 1; background: var(--fp-grad); border-radius: 4px 4px 0 0; min-height: 3px; opacity: .55; } .ins-hours span.peak { opacity: 1; } .ins-hours-axis { display: flex; justify-content: space-between; font-size: .68rem; color: var(--fp-muted); margin-top: 4px; } .ins-bar { height: 8px; border-radius: 99px; background: var(--bs-tertiary-bg, #f1f1f5); overflow: hidden; } .ins-bar span { display: block; height: 100%; border-radius: 99px; background: var(--fp-grad); min-width: 3px; } .ins-post { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--fp-border); } .ins-post:last-child { border-bottom: 0; } .ins-post img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; flex-shrink: 0; } /* ── صفحه‌ی عمومی کاربر (D-073) ─────────────────────────────────── */ .profile-cover { height: 148px; overflow: hidden; border-radius: 0 0 var(--fp-radius) var(--fp-radius); background: var(--fp-grad-soft); } .profile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .profile-head.has-cover { margin-top: -34px; position: relative; } .contact-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .contact-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--fp-text); background: var(--bs-tertiary-bg, #f3f4f6); border: 1px solid var(--fp-border); } .contact-chip i { font-size: .95rem; } .contact-chip.wa { color: #128c7e; } .contact-chip.ig { color: #c13584; } .contact-chip.tg { color: #2aabee; } .contact-chip:hover { border-color: var(--fp-primary); } .role-picker .chip input { margin-inline-end: 5px; } .role-picker .chip:has(input:checked) { background: var(--fp-grad-soft); border-color: var(--fp-primary); color: var(--fp-primary); font-weight: 700; } /* ── اعلان‌ها و منشن (D-078) ────────────────────────────────────── */ .notif-list { list-style: none; margin: 0; padding: 0; } .notif-link { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; color: var(--fp-text); text-decoration: none; border-bottom: 1px solid var(--fp-border); } .notif-link:hover { background: var(--fp-grad-soft); } .notif.is-new .notif-link { background: rgba(var(--fp-primary-rgb), .06); } .notif-body { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.6; } .notif-snippet { color: var(--fp-muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .notif-when { color: var(--fp-muted); font-size: .75rem; margin-top: 2px; } .notif-kind { color: var(--fp-primary); font-size: 1.2rem; } a.mention { font-weight: 600; } /* فهرست خودکامل «@...» */ .mention-pop { position: absolute; z-index: 1090; min-width: 240px; max-width: 320px; max-height: 280px; overflow-y: auto; background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 4px; } .mention-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; background: none; border-radius: 10px; text-align: start; color: var(--fp-text); } .mention-pop button.on, .mention-pop button:hover { background: var(--fp-grad-soft); } .mention-pop .mp-name { font-weight: 600; font-size: .88rem; line-height: 1.2; } .mention-pop .mp-handle { color: var(--fp-muted); font-size: .78rem; direction: ltr; text-align: end; } .mention-pop img, .mention-pop .mp-letter { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .mention-pop .mp-letter { display: grid; place-items: center; background: var(--fp-grad); color: #fff; font-weight: 700; } /* ── پیج کاری و تیم (D-079) ─────────────────────────────────────── */ .page-switch-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--fp-border); border-radius: 14px; background: var(--fp-grad-soft); color: var(--fp-text); position: relative; text-align: start; } .page-switch-btn .dot-badge { position: absolute; top: -6px; inset-inline-end: -4px; } .page-switch-menu { min-width: 250px; } .page-switch-menu .dropdown-item.active { background: var(--fp-grad-soft); color: var(--fp-text); font-weight: 700; } .team-card { background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: var(--fp-radius); padding: 16px; margin: 12px; } .team-card h2 { font-size: 1rem; font-weight: 800; margin-bottom: 12px; } .member-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fp-border); } .member-row:last-child { border-bottom: 0; } .role-pill { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: rgba(var(--fp-primary-rgb), .1); color: var(--fp-primary); } .role-pill.owner { background: var(--fp-grad); color: #fff; } .role-guide { display: grid; gap: 6px; font-size: .82rem; } .role-guide div { display: flex; gap: 8px; } .role-guide b { min-width: 118px; } .signature { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--fp-muted); background: var(--fp-bubble-them); border-radius: 999px; padding: 1px 9px; } .assign-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; border-radius: 999px; padding: 1px 8px; background: var(--fp-bubble-them); color: var(--fp-muted); } .assign-chip.open { background: rgba(245, 158, 11, .15); color: #b45309; } .assign-chip.done { background: rgba(16, 185, 129, .12); color: #047857; } .inbox-filter { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; } .inbox-filter a { padding: 4px 12px; border-radius: 999px; font-size: .82rem; color: var(--fp-muted); border: 1px solid var(--fp-border); white-space: nowrap; } .inbox-filter a.active { background: var(--fp-text); color: var(--fp-bg); border-color: transparent; } .team-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--fp-border); background: var(--fp-grad-soft); font-size: .82rem; } .team-bar select { font-size: .82rem; padding: 2px 28px 2px 8px; width: auto; } .affil { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .affil a { font-size: .8rem; background: var(--fp-grad-soft); border: 1px solid var(--fp-border); border-radius: 999px; padding: 2px 10px; color: var(--fp-text); } .team-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 16px 12px; scrollbar-width: none; } .team-strip a { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; text-align: center; color: var(--fp-text); font-size: .76rem; } .team-strip small { color: var(--fp-muted); font-size: .68rem; line-height: 1.3; } /* ── گزارش تخلف (D-080) ─────────────────────────────────────────── */ .report-reasons { display: grid; gap: 6px; } .report-reason { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--fp-border); border-radius: 12px; cursor: pointer; font-size: .9rem; } .report-reason:has(input:checked) { border-color: #ef4444; background: rgba(239, 68, 68, .06); } .avatar-edit { position: relative; display: inline-block; } .avatar-edit-badge { position: absolute; bottom: 0; inset-inline-end: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--fp-grad); color: #fff; font-size: .8rem; border: 2px solid var(--fp-surface); } /* ── D-083: مکان، دکمه‌ی لینک، پردازش ویدئو، نظرسنجی و هایلایت ── */ .post-loc { font-size: .76rem; color: var(--fp-text, inherit); opacity: .85; } .post-loc i { color: var(--fp-primary); font-size: .72rem; } .post-link b { color: var(--fp-primary); font-weight: 800; } .plain-url { word-break: break-all; opacity: .8; } .media-processing { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #1f1b2e, #3a1c3f); color: #fff; text-align: center; padding: 16px; } .media-processing small { opacity: .75; font-size: .78rem; } .badge-state { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--fp-grad-soft); color: var(--fp-primary); } .grid3 .state-chip { position: absolute; top: 6px; inset-inline-start: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: .68rem; padding: 2px 7px; border-radius: 999px; } .highlights { display: flex; gap: 14px; overflow-x: auto; padding: 4px 16px 12px; scrollbar-width: none; } .highlights a { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; flex: none; color: inherit; font-size: .72rem; text-align: center; } .highlights .hl-cover { width: 62px; height: 62px; border-radius: 50%; padding: 2px; border: 1.5px solid var(--fp-border, #ddd); overflow: hidden; display: grid; place-items: center; background: var(--fp-grad-soft); } .highlights .hl-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .highlights span.t { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sv-poll { position: absolute; inset-inline: 10%; top: 38%; background: rgba(255,255,255,.95); color: #111; border-radius: 18px; padding: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.25); z-index: 7; } .sv-poll h3 { font-size: 1rem; font-weight: 800; text-align: center; margin: 0 0 10px; } .sv-poll button, .sv-poll .opt { display: block; width: 100%; position: relative; border: 1px solid #e5e5e5; border-radius: 12px; padding: 9px 12px; margin-top: 6px; background: #fff; text-align: start; font-weight: 700; overflow: hidden; } .sv-poll .opt i { position: absolute; inset-block: 0; inset-inline-start: 0; background: linear-gradient(90deg, #f6d0e3, #e9d5ff); z-index: 0; } .sv-poll .opt span { position: relative; z-index: 1; display: flex; justify-content: space-between; } .sv-share-card { position: absolute; inset-inline: 12%; top: 20%; background: #fff; color: #111; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.35); display: block; z-index: 7; } .sv-share-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .sv-share-card .who { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-weight: 700; font-size: .85rem; } .sv-share-card p { padding: 0 10px 10px; font-size: .8rem; margin: 0; color: #444; } .sv-reshare { position: absolute; bottom: 74px; inset-inline-start: 12px; z-index: 7; } /* D-127: پسندِ استوری — بالای نوارِ پاسخ، سمتِ پایانی، تا زیر انگشت باشد. */ .sv-likebar { position: absolute; bottom: 74px; inset-inline-end: 12px; z-index: 7; } .sv-like { background: rgba(255,255,255,.14); border: 0; color: #fff; border-radius: 999px; padding: 7px 13px; font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; backdrop-filter: blur(6px); transition: transform .12s ease; } .sv-like:active { transform: scale(.9); } .sv-like.on { color: #ff3b5c; } .sv-like i { font-size: 1.15rem; line-height: 1; } .sv-from { position: absolute; top: 64px; inset-inline-start: 14px; z-index: 5; color: #fff; font-size: .78rem; background: rgba(0,0,0,.4); padding: 3px 10px; border-radius: 999px; } .sv-own .sv-hl { color: #fff; background: rgba(255,255,255,.15); border-radius: 999px; padding: 4px 10px; font-size: .8rem; } .story-archive { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .story-archive label { position: relative; aspect-ratio: 9/16; overflow: hidden; background: #111; cursor: pointer; margin: 0; } .story-archive img { width: 100%; height: 100%; object-fit: cover; } .story-archive input { position: absolute; top: 6px; inset-inline-end: 6px; width: 20px; height: 20px; z-index: 2; } .story-archive .d { position: absolute; bottom: 4px; inset-inline-start: 6px; color: #fff; font-size: .7rem; text-shadow: 0 1px 3px #000; } /* D-085: همه‌ی تب‌های تنظیمات دیده شوند (قبلاً «اتصال فروشگاه» بیرون از صفحه پنهان می‌ماند) */ .settings-tabs { flex-wrap: wrap; overflow: visible; row-gap: 6px; } .settings-tabs a { white-space: nowrap; } /* D-086: کیف اعتبار تبلیغ */ .ad-wallet-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; background: var(--fp-grad, linear-gradient(135deg,#7c3aed,#e11d74,#f59e0b)); } .fw-black { font-weight: 900; } .role-picker label.chip:has(input:checked) { background: var(--fp-grad); color: #fff; border-color: transparent; } /* ── اندازه‌ی نوشته (D-089) — همه‌ی اندازه‌ها rem‌اند، پس ریشه کافی است ── */ html[data-fs="sm"] { font-size: 87.5%; } html[data-fs="lg"] { font-size: 112.5%; } html[data-fs="xl"] { font-size: 125%; } .fs-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .fs-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; border: 1.5px solid var(--fp-border); background: var(--fp-surface); color: var(--fp-text); } .fs-opt.on { border-color: var(--fp-primary); box-shadow: 0 0 0 3px rgba(var(--fp-primary-rgb), .15); } .fs-sample { font-weight: 700; line-height: 1.2; } .fs-sample-sm { font-size: 14px; } .fs-sample-md { font-size: 18px; } .fs-sample-lg { font-size: 23px; } .fs-sample-xl { font-size: 28px; } [data-theme-set].active { background: var(--fp-text); color: var(--fp-bg); } /* دکمه‌های اشتراک پست (D-089) */ .share-out { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .share-out a, .share-out button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; border-radius: 14px; border: 1px solid var(--fp-border); background: var(--fp-surface); color: var(--fp-text); font-size: .75rem; text-decoration: none; } .share-out i { font-size: 1.35rem; } .share-out .tg i { color: #229ed9; } .share-out .wa i { color: #25d366; } .share-out .et i { color: #f7931e; } /* ── دکمه‌های پاسخ خودکار در گفتگو (D-090) ── */ .bot-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .bot-btns button { border: 1px solid rgba(var(--fp-primary-rgb), .5); background: transparent; color: inherit; border-radius: 999px; padding: 5px 14px; font-size: .8rem; font-weight: 600; } .bot-btns button:hover { background: rgba(var(--fp-primary-rgb), .12); } .bot-tag { font-size: .7rem; opacity: .7; } /* ── D-097: درخواست و نوع بافت ─────────────────────────────────── */ .post.is-request { border-inline-start: 3px solid var(--fp-primary); } .request-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: .84rem; font-weight: 700; color: var(--fp-primary); background: var(--fp-grad-soft); } .weave-chip { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; font-size: .72rem; font-weight: 700; border-radius: 999px; color: var(--fp-primary); background: rgba(var(--fp-primary-rgb), .1); } /* رادیوهای «نوع بافت» و «درخواست» به شکل چیپ — انتخاب با یک ضربه. جنگو این ویجت را گاهی با