/* ========================================================= Kar Star — Design System مینیمال، سفید، نارنجی #FF6E00 — موبایل-اول ========================================================= */ /* ---------- فونت‌ها ---------- تعریف @font-face فقط در assets/css/fonts.css است (فایل‌های واقعی: iransansdn*.woff2). این‌جا تعریف تکراری نداریم تا درخواست ۴۰۴ و شکست فونت در موبایل/PWA پیش نیاید. */ /* ---------- توکن‌ها ---------- */ :root { --rdx-primary: #FF6E00; --rdx-primary-hover: #E86300; --rdx-primary-soft: #FF6E0014; --rdx-bg: #FFFFFF; --rdx-surface: #FAFAF9; --rdx-ink: #1C1917; --rdx-ink-2: #57534E; --rdx-ink-3: #A8A29E; --rdx-line: #E7E5E4; --rdx-radius: 14px; --rdx-radius-sm: 10px; --rdx-shadow: 0 1px 2px rgba(28,25,23,.05), 0 8px 24px -12px rgba(28,25,23,.12); --rdx-font-display: 'IRANSansDN', Tahoma, Arial, sans-serif; --rdx-font-body: 'IRANSansDN', Tahoma, Arial, sans-serif; --rdx-container: 1180px; --rdx-mobile-nav-h: 64px; --rdx-glass: rgba(255,255,255,.92); } /* ---------- دارک‌مود ---------- روی ست می‌شود (نه :root به‌تنهایی) تا اسپسیفیسیتی‌اش از رنگ سفارشی‌شده با شخصی‌سازی (Customizer) هم بالاتر برود؛ چون --rdx-primary این‌جا override نمی‌شود، رنگ برند کاربر در دارک‌مود هم دست‌نخورده می‌ماند. */ html.rdx-dark { --rdx-bg: #1C1917; --rdx-surface: #262220; --rdx-ink: #FAFAF9; --rdx-ink-2: #D6D3D1; --rdx-ink-3: #8A8481; --rdx-line: #3A3532; --rdx-primary-soft: #FF6E0026; --rdx-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5); --rdx-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --rdx-shadow-lg: 0 20px 48px -16px rgba(0,0,0,.6); --rdx-glass: rgba(28,25,23,.92); color-scheme: dark; } html.rdx-dark body.rdx { background: var(--rdx-bg); color: var(--rdx-ink); } /* گذار نرم فقط روی پس‌زمینه/متن اصلی صفحه؛ تک‌تک عناصر تبدیل نمی‌شوند تا فریم‌ریت افت نکند */ body.rdx { transition: background-color .2s var(--rdx-ease, ease), color .2s var(--rdx-ease, ease); } @media (prefers-reduced-motion: reduce) { body.rdx { transition: none; } } /* ---------- پایه ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body.rdx { margin: 0; font-family: var(--rdx-font-body); font-size: 15px; line-height: 1.9; color: var(--rdx-ink); background: var(--rdx-bg); direction: rtl; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--rdx-font-display); line-height: 1.5; margin: 0 0 .5em; } :focus-visible { outline: 2px solid var(--rdx-primary); outline-offset: 3px; border-radius: 4px; } .rdx-container { max-width: var(--rdx-container); margin-inline: auto; padding-inline: 20px; } .rdx-main { min-height: 60vh; padding-bottom: calc(var(--rdx-mobile-nav-h) + 24px); } @media (min-width: 900px) { .rdx-main { padding-bottom: 0; } } /* ---------- دکمه‌ها ---------- */ .rdx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border-radius: 999px; font: 700 14px/1 var(--rdx-font-body); border: 1px solid transparent; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; } .rdx-btn:active { transform: scale(.97); } .rdx-btn--primary { background: var(--rdx-primary); color: #fff; } .rdx-btn--primary:hover { background: var(--rdx-primary-hover); } .rdx-btn--ghost { background: transparent; color: var(--rdx-ink); border-color: var(--rdx-line); } .rdx-btn--ghost:hover { border-color: var(--rdx-ink-3); } .rdx-btn--soft { background: var(--rdx-primary-soft); color: var(--rdx-primary); } .rdx-btn--block { width: 100%; } /* ---------- هدر ---------- */ .rdx-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rdx-line); } .rdx-header__inner { display: flex; align-items: center; gap: 28px; height: 64px; } .rdx-logo__text { font: 700 22px/1 var(--rdx-font-display); } .rdx-logo__dot { color: var(--rdx-primary); } .rdx-nav { display: none; flex: 1; } .rdx-nav__list { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; } .rdx-nav__list a { font-size: 14px; color: var(--rdx-ink-2); } .rdx-nav__list a:hover, .rdx-nav__list .current-menu-item a { color: var(--rdx-primary); } .rdx-header__actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; } .rdx-header__actions .rdx-btn { display: none; } .rdx-header__actions .rdx-theme-toggle { display: inline-flex; } .rdx-burger { display: grid; gap: 5px; background: none; border: 0; padding: 10px; cursor: pointer; } .rdx-burger span { width: 20px; height: 2px; background: var(--rdx-ink); border-radius: 2px; } .rdx-drawer { border-top: 1px solid var(--rdx-line); background: var(--rdx-bg); } .rdx-drawer__list { list-style: none; margin: 0; padding: 12px 20px; display: grid; gap: 4px; } .rdx-drawer__list a { display: block; padding: 10px 4px; font-weight: 700; } @media (min-width: 900px) { .rdx-nav { display: block; } .rdx-header__actions .rdx-btn { display: inline-flex; } .rdx-burger, .rdx-drawer { display: none; } } /* ---------- هیرو ---------- */ .rdx-hero { padding: 64px 0 48px; text-align: center; } .rdx-hero__title { font-size: clamp(30px, 6vw, 56px); letter-spacing: -.5px; } .rdx-hero__title em { font-style: normal; color: var(--rdx-primary); position: relative; white-space: nowrap; } /* امضای بصری: خط دست‌نویس زیر واژه کلیدی */ .rdx-hero__title em::after { content: ''; position: absolute; right: 0; left: 0; bottom: -6px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 Q30 1 60 5 T118 4' fill='none' stroke='%23FF6E00' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%; } .rdx-hero__subtitle { max-width: 560px; margin: 16px auto 28px; color: var(--rdx-ink-2); font-size: 16px; } .rdx-hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ---------- سکشن ---------- */ .rdx-section { padding: 44px 0; } .rdx-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .rdx-section__title { font-size: clamp(20px, 3vw, 28px); margin: 0; } .rdx-section__more { color: var(--rdx-primary); font-weight: 700; font-size: 14px; white-space: nowrap; } /* ---------- گرید اکسپلور (پینترستی) ---------- */ .rdx-explore-grid { columns: 2; column-gap: 14px; } .rdx-explore-grid .rdx-card { break-inside: avoid; margin-bottom: 14px; } @media (min-width: 700px) { .rdx-explore-grid { columns: 3; column-gap: 18px; } } @media (min-width: 1050px) { .rdx-explore-grid { columns: 4; } } /* ---------- کارت‌ها ---------- */ .rdx-card { background: var(--rdx-bg); border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius); transition: box-shadow .2s ease, border-color .2s ease; } .rdx-card:hover { box-shadow: var(--rdx-shadow); border-color: transparent; } /* overflow:hidden فقط روی خود عکس/جایگزین است، نه کل کارت — تا ردیف پایین (نویسنده/بازدید/لایک) هیچ‌وقت با گوشه گرد کارت قطع نشود، حتی در کارت‌های خیلی باریک */ .rdx-card__media { display: block; background: var(--rdx-surface); border-radius: var(--rdx-radius) var(--rdx-radius) 0 0; overflow: hidden; } .rdx-card__placeholder { display: block; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--rdx-surface), var(--rdx-primary-soft)); } .rdx-card__body { padding: 12px 14px 14px; } .rdx-card__title { display: block; font-weight: 700; font-size: 14px; line-height: 1.6; } .rdx-card__title:hover { color: var(--rdx-primary); } .rdx-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; } /* نام نویسنده جمع می‌شود (اِلیپسیس) تا آیکن بازدید/لایک هیچ‌وقت از کارت بیرون/نصفه نیفتد */ .rdx-card__author { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rdx-ink-2); min-width: 0; flex: 1 1 auto; overflow: hidden; } .rdx-card__author img { border-radius: 50%; flex-shrink: 0; } .rdx-card__author span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rdx-card__meta .rdx-views, .rdx-card__meta .rdx-like-btn, .rdx-card__meta .rdx-like-static { flex-shrink: 0; white-space: nowrap; } /* کارت فریلنسر */ .rdx-freelancer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .rdx-freelancer-card { text-align: center; padding: 24px 16px 20px; } .rdx-freelancer-card .rdx-avatar { border-radius: 50%; margin: 0 auto 12px; } .rdx-freelancer-card__name { font-size: 16px; margin: 0; } .rdx-freelancer-card__title { color: var(--rdx-ink-2); font-size: 13px; margin: 4px 0 10px; } .rdx-freelancer-card__meta { display: flex; justify-content: center; gap: 12px; font-size: 12px; color: var(--rdx-ink-3); margin-bottom: 14px; } /* ---------- دکمه لایک و فالو ---------- */ .rdx-like-btn, .rdx-like-static { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; font: 700 12px var(--rdx-font-body); color: var(--rdx-ink-3); padding: 4px 6px; border-radius: 8px; transition: color .15s ease; } .rdx-like-btn:hover { color: var(--rdx-primary); } .rdx-like-btn.is-liked { color: var(--rdx-primary); } .rdx-like-btn svg { width: 16px; height: 16px; flex-shrink: 0; overflow: visible; } .rdx-follow-btn.is-following { background: var(--rdx-surface); color: var(--rdx-ink-2); border-color: var(--rdx-line); } /* ---------- پروفایل / رزومه ---------- */ .rdx-profile__cover { height: 160px; background: linear-gradient(120deg, var(--rdx-primary-soft), var(--rdx-surface)); border-radius: 0 0 var(--rdx-radius) var(--rdx-radius); } .rdx-profile__cover img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .rdx-profile__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-top: -44px; padding-bottom: 20px; border-bottom: 1px solid var(--rdx-line); } .rdx-profile__avatar img { border-radius: 50%; border: 4px solid #fff; box-shadow: var(--rdx-shadow); } .rdx-profile__id { flex: 1; min-width: 200px; } .rdx-profile__name { font-size: clamp(22px, 4vw, 30px); margin: 0; } .rdx-profile__job { color: var(--rdx-primary); font-weight: 700; font-size: 14px; } .rdx-profile__stats { display: flex; gap: 20px; font-size: 13px; color: var(--rdx-ink-2); margin-top: 6px; } .rdx-profile__stats b { color: var(--rdx-ink); font-size: 15px; margin-inline-end: 4px; } .rdx-profile__actions { display: flex; gap: 10px; flex-wrap: wrap; } .rdx-profile__grid { display: grid; gap: 28px; padding-top: 28px; } @media (min-width: 900px) { .rdx-profile__grid { grid-template-columns: 300px 1fr; } } .rdx-resume-box { border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius); padding: 20px; margin-bottom: 16px; } .rdx-resume-box h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; } .rdx-resume-box h3::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rdx-primary); } .rdx-skill-tags { display: flex; flex-wrap: wrap; gap: 8px; } .rdx-skill-tags span { background: var(--rdx-surface); border: 1px solid var(--rdx-line); border-radius: 999px; padding: 4px 12px; font-size: 12px; } /* ---------- «دنبال می‌کند» در تب رزومه ---------- */ .rdx-following-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; margin-top: 10px; } .rdx-following-list__item { display: grid; justify-items: center; gap: 4px; text-align: center; } .rdx-following-list__item img { border-radius: 50%; } .rdx-following-list__item span { font-size: 11px; color: var(--rdx-ink-2); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* تب‌های پروفایل */ .rdx-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--rdx-line); margin-bottom: 20px; overflow-x: auto; } .rdx-tabs a { padding: 10px 16px; font-size: 14px; font-weight: 700; color: var(--rdx-ink-2); border-bottom: 2px solid transparent; white-space: nowrap; } .rdx-tabs a.is-active { color: var(--rdx-primary); border-color: var(--rdx-primary); } /* ---------- صفحه نمونه‌کار ---------- */ .rdx-project { max-width: 860px; margin-inline: auto; } .rdx-project__title { font-size: clamp(24px, 4vw, 36px); } .rdx-project__hero img { border-radius: var(--rdx-radius); width: 100%; } .rdx-project__bar { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-block: 1px solid var(--rdx-line); margin: 20px 0; flex-wrap: wrap; } .rdx-collab:not([data-rdx-collab]) { display: flex; flex-wrap: wrap; gap: 10px; } /* فیلد فرم همکاران: label بالا، فیلد تمام‌عرض خط بعد */ .rdx-collab[data-rdx-collab] { display: block; } .rdx-collab[data-rdx-collab] > label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 13px; color: var(--rdx-ink); } .rdx-collab[data-rdx-collab] .rdx-collab__search { width: 100%; } .rdx-collab[data-rdx-collab] .rdx-collab__search input { width: 100%; min-height: 46px; } .rdx-collab__item { display: flex; align-items: center; gap: 8px; background: var(--rdx-surface); border: 1px solid var(--rdx-line); border-radius: 999px; padding: 4px 14px 4px 6px; font-size: 12px; } .rdx-collab__item img { border-radius: 50%; } .rdx-collab__role { color: var(--rdx-ink-3); } /* ---------- فرم‌ها ---------- */ .rdx-form { max-width: 640px; margin-inline: auto; display: grid; gap: 16px; } .rdx-form label { font-weight: 700; font-size: 13px; display: block; margin-bottom: 6px; } .rdx-form input[type="text"], .rdx-form input[type="email"], .rdx-form input[type="url"], .rdx-form input[type="password"], .rdx-form textarea, .rdx-form select { width: 100%; padding: 12px 14px; border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius-sm); font: 400 14px var(--rdx-font-body); background: var(--rdx-bg); color: var(--rdx-ink); transition: border-color .15s ease; } .rdx-form input:focus, .rdx-form textarea:focus { border-color: var(--rdx-primary); outline: none; } .rdx-notice { border-radius: var(--rdx-radius-sm); padding: 12px 16px; font-size: 13px; } .rdx-notice--ok { background: #ECFDF5; color: #047857; } .rdx-notice--err { background: #FEF2F2; color: #B91C1C; } /* ---------- فوتر ---------- */ .rdx-footer { border-top: 1px solid var(--rdx-line); background: var(--rdx-surface); margin-top: 48px; } .rdx-footer__inner { display: grid; gap: 28px; padding: 40px 20px; } .rdx-footer__about p { color: var(--rdx-ink-2); font-size: 13px; max-width: 320px; } .rdx-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; } .rdx-footer__social { display: flex; gap: 16px; font-size: 13px; color: var(--rdx-ink-2); } .rdx-footer__bar { border-top: 1px solid var(--rdx-line); padding: 14px 0; font-size: 12px; color: var(--rdx-ink-3); } @media (min-width: 800px) { .rdx-footer__inner { grid-template-columns: 2fr 1fr 1fr; } } /* ---------- نوار پایین موبایل ---------- */ .rdx-mobile-nav { position: fixed; bottom: 0; inset-inline: 0; z-index: 60; height: calc(var(--rdx-mobile-nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); background: var(--rdx-glass); backdrop-filter: blur(12px); border-top: 1px solid var(--rdx-line); display: grid; grid-template-columns: repeat(var(--rdx-nav-cols, 5), 1fr); } .rdx-mobile-nav__item { display: grid; place-items: center; gap: 2px; font-size: 10px; color: var(--rdx-ink-2); padding-top: 8px; transition: color .15s var(--rdx-ease, ease); } .rdx-mobile-nav__item svg { width: 22px; height: 22px; } .rdx-mobile-nav__item.is-active { color: var(--rdx-primary); font-weight: 700; } .rdx-mobile-nav__item.is-active svg { stroke-width: 2.2; } /* دکمهٔ سوم (ثبت نمونه‌کار) همیشه به شکل FAB برجسته — مستقل از فعال بودن */ .rdx-mobile-nav__item:nth-child(3) { color: var(--rdx-ink-2); } .rdx-mobile-nav__item:nth-child(3) svg { background: var(--rdx-primary); color: #fff; border-radius: 50%; width: 50px; height: 50px; padding: 13px; margin-top: -26px; box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--rdx-primary) 70%, transparent), 0 0 0 4px var(--rdx-bg); transition: transform .15s var(--rdx-ease, ease); } .rdx-mobile-nav__item:nth-child(3):active svg { transform: scale(.92); } @media (min-width: 900px) { .rdx-mobile-nav { display: none; } } /* ---------- صفحه‌بندی و متفرقه ---------- */ .rdx-pagination { display: flex; justify-content: center; gap: 6px; padding: 28px 0; } .rdx-pagination .page-numbers { min-width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--rdx-line); border-radius: 10px; font-size: 13px; } .rdx-pagination .current { background: var(--rdx-primary); color: #fff; border-color: var(--rdx-primary); } .rdx-empty { text-align: center; color: var(--rdx-ink-3); padding: 60px 20px; } /* ---------- سازگاری المنتور ---------- */ .elementor-page .rdx-main { padding-bottom: 0; } .elementor-kit- .rdx-btn { font-family: var(--rdx-font-body); } /* ========================================================= v0.2 — کوییک‌ویو (پاپ‌آپ اکسپلور)، بازدید، OTP، پنل کاربری ========================================================= */ /* ---------- شمارنده بازدید ---------- */ .rdx-views { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--rdx-ink-3); } /* ---------- مودال کوییک‌ویو ---------- */ .rdx-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; } .rdx-modal[hidden] { display: none; } .rdx-modal__backdrop { position: absolute; inset: 0; background: rgba(28,25,23,.55); backdrop-filter: blur(4px); } .rdx-modal__panel { position: relative; width: min(960px, 100%); max-height: 92vh; overflow: auto; background: var(--rdx-bg); border-radius: var(--rdx-radius); box-shadow: 0 24px 64px -16px rgba(0,0,0,.35); animation: rdxPop .18s ease; } @keyframes rdxPop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } } .rdx-modal__close { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; background: var(--rdx-glass); color: var(--rdx-ink); font-size: 14px; } .rdx-spinner { width: 34px; height: 34px; margin: 80px auto; border: 3px solid var(--rdx-line); border-top-color: var(--rdx-primary); border-radius: 50%; animation: rdxSpin .7s linear infinite; } @keyframes rdxSpin { to { transform: rotate(360deg); } } /* چیدمان کوییک‌ویو: تصویر + ستون اطلاعات (اینستاگرامی) */ .rdx-qv { display: grid; } .rdx-qv__media { background: var(--rdx-surface); } .rdx-qv__media img { width: 100%; height: 100%; object-fit: cover; } .rdx-qv__side { padding: 20px; display: flex; flex-direction: column; } .rdx-qv__title { font-size: 18px; margin: 10px 0 4px; } .rdx-qv__excerpt { font-size: 13px; color: var(--rdx-ink-2); margin: 0 0 8px; } .rdx-qv__stats { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-block: 1px solid var(--rdx-line); margin: 8px 0; } .rdx-qv__comments { display: grid; gap: 14px; padding: 8px 0; } .rdx-qv__comment { display: flex; gap: 10px; font-size: 13px; } .rdx-qv__comment img { border-radius: 50%; flex-shrink: 0; } .rdx-qv__comment p { margin: 2px 0 0; color: var(--rdx-ink-2); } .rdx-qv__comment small { color: var(--rdx-ink-3); margin-inline-start: 6px; } .rdx-qv__empty, .rdx-qv__login { font-size: 13px; color: var(--rdx-ink-3); text-align: center; padding: 16px 0; } .rdx-qv__login a { color: var(--rdx-primary); font-weight: 700; } .rdx-qv__form { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--rdx-line); } .rdx-qv__form input { flex: 1; padding: 10px 14px; border: 1px solid var(--rdx-line); border-radius: 999px; font: 400 13px var(--rdx-font-body); } .rdx-qv__form input:focus { border-color: var(--rdx-primary); outline: none; } @media (min-width: 800px) { .rdx-qv { grid-template-columns: 1.2fr 1fr; align-items: start; } .rdx-modal__panel:has(.rdx-qv) { overflow: hidden; } /* اسکرول به ستون side سپرده می‌شود */ .rdx-qv__media { height: 92vh; position: sticky; top: 0; } /* فقط ستون اطلاعات اسکرول می‌شود؛ بخش کامنت اسکرول جدا ندارد */ .rdx-qv__side { max-height: 92vh; overflow-y: auto; } } /* ---------- دکمه Load More ---------- */ .rdx-loadmore-wrap { text-align: center; padding: 28px 0; } /* ---------- فرم OTP ---------- */ .rdx-otp__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .rdx-otp__role { border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius-sm); padding: 12px; text-align: center; cursor: pointer; font-size: 13px; font-weight: 700; } .rdx-otp__role:has(input:checked) { border-color: var(--rdx-primary); background: var(--rdx-primary-soft); color: var(--rdx-primary); } .rdx-otp__role input { display: none; } .rdx-otp__msg { text-align: center; font-size: 13px; min-height: 20px; } .rdx-otp__msg.is-ok { color: #047857; } .rdx-otp__msg.is-err { color: #B91C1C; } /* ---------- پنل کاربری ---------- */ .rdx-account__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--rdx-line); margin-bottom: 24px; } .rdx-account__head img { border-radius: 50%; } .rdx-account__role { font-size: 11px; font-weight: 700; color: var(--rdx-primary); background: var(--rdx-primary-soft); border-radius: 999px; padding: 3px 10px; } .rdx-account__grid { display: grid; gap: 20px; align-items: start; } @media (min-width: 900px) { .rdx-account__grid { grid-template-columns: 1fr 1fr; } } /* ========================================================= v0.3 — بازطراحی بر اساس طرح: هیرو دوستونه، تب‌ها، لیست فریلنسر، بنر اکسپلور، ورود دو ستونه، تیک تأیید، یوزرنیم ========================================================= */ /* ---------- عناصر مشترک ---------- */ .rdx-pill { display: inline-block; background: var(--rdx-primary-soft); color: var(--rdx-primary); font: 700 12px var(--rdx-font-body); border-radius: 999px; padding: 6px 14px; margin-bottom: 16px; } .rdx-btn--lg { padding: 13px 28px; font-size: 15px; } .rdx-btn--white { background: #fff; color: var(--rdx-primary); } .rdx-btn--white:hover { background: #FFF7F0; } .rdx-btn--icon { padding: 10px 13px; border: 1px solid var(--rdx-line); background: var(--rdx-bg); font-size: 15px; } .rdx-verified { display: inline-flex; vertical-align: middle; color: #2E90FA; margin-inline-start: 4px; } .rdx-verified svg { width: 18px; height: 18px; } /* ---------- هیرو دوستونه ---------- */ .rdx-hero--split { display: grid; gap: 40px; text-align: start; padding: 56px 20px 40px; align-items: center; } .rdx-hero--split .rdx-hero__title { font-size: clamp(28px, 4.5vw, 46px); } .rdx-hero--split .rdx-hero__subtitle { margin: 16px 0 26px; } .rdx-hero--split .rdx-hero__actions { justify-content: flex-start; } .rdx-stats { display: flex; gap: 34px; margin: 34px 0 0; padding: 0; flex-wrap: wrap; } .rdx-stats div { display: grid; gap: 2px; } .rdx-stats dt { font: 700 24px var(--rdx-font-display); color: var(--rdx-ink); } .rdx-stats dd { margin: 0; font-size: 12px; color: var(--rdx-ink-3); } .rdx-hero__visual { display: none; } .rdx-hero__card { background: var(--rdx-bg); border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius); box-shadow: var(--rdx-shadow); padding: 14px; max-width: 340px; margin-inline: auto; transform: rotate(-2deg); } .rdx-hero__card img { border-radius: var(--rdx-radius-sm); aspect-ratio: 4/3; object-fit: cover; } .rdx-hero__card .rdx-card__placeholder { border-radius: var(--rdx-radius-sm); } .rdx-hero__card-label { display: block; font-size: 11px; color: var(--rdx-ink-3); margin-bottom: 10px; } .rdx-hero__card-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-top: 10px; } .rdx-hero__card-row span { color: var(--rdx-primary); font-weight: 700; } @media (min-width: 900px) { .rdx-hero--split { grid-template-columns: 1.1fr .9fr; padding-block: 72px 56px; } .rdx-hero__visual { display: block; } } /* ---------- مراحل (چطور کار می‌کند) ---------- */ .rdx-steps { display: grid; gap: 16px; } .rdx-step { border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius); padding: 26px 22px; background: var(--rdx-surface); position: relative; } .rdx-step__num { display: inline-grid; place-items: center; width: 38px; height: 38px; background: var(--rdx-primary-soft); color: var(--rdx-primary); border-radius: 12px; font: 700 16px var(--rdx-font-display); margin-bottom: 14px; } .rdx-step h3 { font-size: 16px; margin: 0 0 6px; } .rdx-step p { font-size: 13px; color: var(--rdx-ink-2); margin: 0; } @media (min-width: 800px) { .rdx-steps { grid-template-columns: repeat(3, 1fr); } } /* ---------- تب‌های پیل و پروفایل ---------- */ .rdx-tabs--pills { gap: 8px; flex-wrap: wrap; overflow: visible; } .rdx-tabs--pills a { border: 1px solid var(--rdx-line); border-radius: 999px; padding: 7px 16px; font-size: 13px; border-bottom-width: 1px !important; color: var(--rdx-ink-2); } .rdx-tabs--pills a.is-active { background: var(--rdx-primary); border-color: var(--rdx-primary); color: #fff; } .rdx-tabs--profile { margin: 22px 0 24px; } /* ---------- بنر اکسپلور ---------- */ .rdx-banner { background: linear-gradient(120deg, var(--rdx-primary), #FF8A2B); border-radius: calc(var(--rdx-radius) + 6px); color: #fff; display: grid; gap: 26px; padding: 36px 30px; overflow: hidden; } .rdx-banner h2 { color: #fff; font-size: clamp(20px, 3vw, 28px); margin: 0 0 8px; } .rdx-banner p { font-size: 13px; opacity: .92; margin: 0 0 20px; max-width: 420px; } .rdx-banner__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: center; } .rdx-banner__thumbs img, .rdx-banner__ph { border-radius: var(--rdx-radius-sm); aspect-ratio: 1; object-fit: cover; width: 100%; background: rgba(255,255,255,.25); display: block; } @media (min-width: 900px) { .rdx-banner { grid-template-columns: 1fr 1fr; align-items: center; padding: 44px 40px; } } /* ---------- پروفایل: کاور برند و هدر ---------- */ .rdx-profile__cover--brand { height: 190px; border-radius: 0; background: linear-gradient(105deg, #FFD9B8 0%, var(--rdx-primary) 55%, #E85D00 100%); } .rdx-profile__head { margin-top: -52px; align-items: flex-end; } .rdx-profile__avatar img { width: 110px; height: 110px; } .rdx-profile__sub { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--rdx-ink-2); margin-top: 2px; } .rdx-profile__handle { color: var(--rdx-ink-3); font-size: 12px; } .rdx-resume-grid { display: grid; gap: 16px; align-items: start; } @media (min-width: 900px) { .rdx-resume-grid { grid-template-columns: 1fr 1fr; gap: 24px; } } .rdx-explore-grid--profile { columns: 2; } @media (min-width: 900px) { .rdx-explore-grid--profile { columns: 3; } } .rdx-skill-tags--outline span { background: var(--rdx-bg); border-color: var(--rdx-primary); color: var(--rdx-primary); } /* ---------- لیست ردیفی فریلنسرها ---------- */ .rdx-search { max-width: 100%; margin-bottom: 4px; } .rdx-search input { width: 100%; padding: 14px 18px; border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius); font: 400 14px var(--rdx-font-body); } .rdx-search input:focus { border-color: var(--rdx-primary); outline: none; } .rdx-frow { display: grid; gap: 14px; padding: 18px 20px; align-items: center; } .rdx-frow__id { display: flex; gap: 14px; align-items: center; } .rdx-frow__id .rdx-avatar { border-radius: 50%; } .rdx-frow__name { font-size: 16px; margin: 0; } .rdx-frow__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--rdx-ink-3); margin-top: 3px; } .rdx-frow__skills { justify-content: flex-start; } .rdx-frow__rate b { font-size: 15px; } .rdx-frow__rate small { color: var(--rdx-ink-3); } .rdx-frow__wtype { display: block; color: var(--rdx-ink-3); margin-top: 2px; } .rdx-frow__actions { display: flex; gap: 10px; flex-wrap: wrap; } @media (min-width: 950px) { .rdx-frow { grid-template-columns: 1.3fr 1fr auto auto; } .rdx-frow__rate { text-align: start; } } /* ---------- ورود دو ستونه ---------- */ .rdx-auth { display: grid; min-height: calc(100vh - 64px); } .rdx-auth__panel { display: none; background: linear-gradient(160deg, #FF8A2B, var(--rdx-primary) 60%, #E85D00); color: #fff; padding: 48px; } .rdx-auth__panel-inner { max-width: 380px; margin: auto; display: grid; place-items: center; text-align: center; height: 100%; align-content: center; gap: 6px; } .rdx-auth__spark { display: grid; place-items: center; width: 68px; height: 68px; font-size: 26px; background: rgba(255,255,255,.18); border-radius: 20px; margin-bottom: 18px; } .rdx-auth__panel h2 { color: #fff; font-size: 26px; margin: 0 0 10px; } .rdx-auth__panel p { font-size: 14px; opacity: .95; margin: 0; } .rdx-auth__form { max-width: 420px; width: 100%; margin: 0 auto; padding: 48px 22px 60px; display: grid; gap: 18px; align-content: start; } .rdx-auth__roles { display: grid; grid-template-columns: 1fr 1fr; background: var(--rdx-surface); border: 1px solid var(--rdx-line); border-radius: 999px; padding: 4px; } .rdx-auth__roles button { border: 0; background: none; padding: 10px; border-radius: 999px; font: 700 13px var(--rdx-font-body); cursor: pointer; color: var(--rdx-ink-2); } .rdx-auth__roles button.is-active { background: var(--rdx-primary); color: #fff; } .rdx-auth__title { font-size: 24px; margin: 0; } .rdx-auth__sub { font-size: 13px; color: var(--rdx-ink-2); margin: -8px 0 0; } .rdx-auth__terms { font-size: 12px; color: var(--rdx-ink-3); text-align: center; } .rdx-auth__terms a { color: var(--rdx-primary); } @media (min-width: 950px) { .rdx-auth { grid-template-columns: 1fr 1fr; } .rdx-auth__panel { display: grid; } .rdx-auth__form { padding-top: 80px; } } /* ---------- یوزرنیم ---------- */ .rdx-un-hint { display: block; min-height: 18px; font-size: 12px; margin-top: 6px; } .rdx-un-hint.is-ok { color: #047857; } .rdx-un-hint.is-err { color: #B91C1C; } .rdx-account__handle { font-size: 12px; color: var(--rdx-ink-3); background: var(--rdx-surface); border: 1px solid var(--rdx-line); border-radius: 999px; padding: 4px 12px; } /* ========================================================= v0.4 — رفع فونت، دیزاین مدرن تعامل‌ها، زنگوله، مودال‌ها، منشن، پنل، پله، فیلترها ========================================================= */ /* ---------- رفع فونت المان‌های فرم و دکمه‌ها (سراسری) ---------- */ button, input, select, textarea { font-family: var(--rdx-font-body); font-size: inherit; color: inherit; } /* ---------- لایک مدرن ---------- */ .rdx-like-btn, .rdx-like-static { border: 1px solid var(--rdx-line); border-radius: 999px; padding: 6px 12px; background: var(--rdx-bg); gap: 6px; transition: all .18s ease; } .rdx-like-btn:hover { border-color: #FDA4AF; color: #E11D48; background: #FFF1F2; } .rdx-like-btn.is-liked { background: #FFF1F2; border-color: #FDA4AF; color: #E11D48; } .rdx-like-btn.is-liked svg { animation: rdxHeart .35s ease; } @keyframes rdxHeart { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } } /* ---------- فالو مدرن ---------- */ .rdx-follow-btn { transition: all .18s ease; } .rdx-follow-btn.is-following { background: var(--rdx-bg); color: var(--rdx-ink-2); border: 1px solid var(--rdx-line); } .rdx-follow-btn.is-following:hover { border-color: #FCA5A5; color: #DC2626; } /* ---------- نشان‌ها ---------- */ .rdx-badge { display: inline-flex; align-items: center; gap: 4px; font: 700 11px var(--rdx-font-body); border-radius: 999px; padding: 3px 10px; background: var(--rdx-surface); border: 1px solid var(--rdx-line); color: var(--rdx-ink-2); } .rdx-badge.is-pending { background: #FFFBEB; border-color: #FDE68A; color: #B45309; } .rdx-badge.is-approved { background: #ECFDF5; border-color: #A7F3D0; color: #047857; } .rdx-badge.is-rejected { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; } .rdx-badge--boost { background: linear-gradient(120deg, var(--rdx-primary), #FF8A2B); border: 0; color: #fff; } .rdx-badge__reason { display: block; font-size: 11px; color: var(--rdx-ink-3); } .rdx-btn--xs { padding: 6px 14px; font-size: 12px; } /* ---------- زنگوله نوتیفیکیشن ---------- */ .rdx-bell { position: relative; } .rdx-bell__btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rdx-line); border-radius: 50%; background: var(--rdx-bg); cursor: pointer; color: var(--rdx-ink-2); transition: border-color .15s ease; } .rdx-bell__btn:hover { border-color: var(--rdx-primary); color: var(--rdx-primary); } .rdx-bell__btn svg { width: 19px; height: 19px; } .rdx-bell__count { position: absolute; top: -4px; inset-inline-start: -4px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--rdx-primary); color: #fff; border-radius: 999px; font: 700 10px/18px var(--rdx-font-body); text-align: center; } .rdx-bell__panel { position: absolute; top: calc(100% + 10px); inset-inline-end: -10px; z-index: 90; width: min(340px, calc(100vw - 32px)); background: var(--rdx-bg); border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius); box-shadow: var(--rdx-shadow); overflow: hidden; animation: rdxPop .15s ease; } .rdx-bell__head { padding: 12px 16px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--rdx-line); } .rdx-bell__list { max-height: 380px; overflow: auto; } .rdx-bell__item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--rdx-surface); font-size: 13px; transition: background .12s ease; } .rdx-bell__item:hover { background: var(--rdx-surface); } .rdx-bell__item.is-unread { background: var(--rdx-primary-soft); } .rdx-bell__item b { display: block; margin-bottom: 2px; } .rdx-bell__item p { margin: 0; color: var(--rdx-ink-2); font-size: 12px; } .rdx-bell__item small { color: var(--rdx-ink-3); font-size: 11px; } .rdx-bell__empty { padding: 30px 16px; text-align: center; color: var(--rdx-ink-3); font-size: 13px; } /* ---------- منشن ---------- */ .rdx-mention { color: var(--rdx-primary); font-weight: 700; } .rdx-mention-box { position: absolute; bottom: calc(100% + 6px); inset-inline: 0; z-index: 20; background: var(--rdx-bg); border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius-sm); box-shadow: var(--rdx-shadow); max-height: 240px; overflow: auto; } .rdx-mention-box button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none; cursor: pointer; text-align: start; font-size: 13px; } .rdx-mention-box button:hover { background: var(--rdx-surface); } .rdx-mention-box img { border-radius: 50%; } .rdx-mention-box small { color: var(--rdx-ink-3); } .rdx-qv__form { position: relative; } /* ---------- مودال کوچک (ویرایش اینلاین / پیام) ---------- */ .rdx-mini-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; } .rdx-mini-modal[hidden] { display: none; } .rdx-mini-modal__backdrop { position: absolute; inset: 0; background: rgba(28,25,23,.5); backdrop-filter: blur(3px); } .rdx-mini-modal__panel { position: relative; width: min(460px, 100%); background: var(--rdx-bg); border-radius: var(--rdx-radius); padding: 22px; box-shadow: 0 24px 64px -16px rgba(0,0,0,.35); animation: rdxPop .16s ease; display: grid; gap: 14px; } .rdx-mini-modal__title { font: 700 15px var(--rdx-font-display); margin: 0; } .rdx-mini-modal textarea, .rdx-mini-modal input[type="text"] { width: 100%; padding: 12px 14px; border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius-sm); font: 400 13px var(--rdx-font-body); } .rdx-mini-modal textarea:focus, .rdx-mini-modal input:focus { border-color: var(--rdx-primary); outline: none; } .rdx-mini-modal__actions { display: flex; gap: 10px; justify-content: flex-end; } /* ---------- مداد ویرایش اینلاین ---------- */ .rdx-edit-pencil { margin-inline-start: auto; width: 28px; height: 28px; border: 1px solid var(--rdx-line); border-radius: 8px; background: var(--rdx-bg); cursor: pointer; font-size: 12px; color: var(--rdx-ink-2); flex-shrink: 0; transition: all .15s ease; } .rdx-edit-pencil:hover { border-color: var(--rdx-primary); color: var(--rdx-primary); } .rdx-resume-box h3 { display: flex; align-items: center; gap: 8px; } /* ---------- بنر آنبوردینگ + نوار تکمیل پروفایل ---------- */ .rdx-onboard { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: linear-gradient(120deg, var(--rdx-primary-soft), #FFF7F0); border: 1px solid #FFD9B8; border-radius: var(--rdx-radius); padding: 16px 20px; margin-bottom: 20px; } .rdx-onboard p { margin: 4px 0 0; font-size: 13px; color: var(--rdx-ink-2); } .rdx-completion__bar { height: 8px; background: var(--rdx-surface); border-radius: 999px; overflow: hidden; border: 1px solid var(--rdx-line); margin-top: 4px; } .rdx-completion__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--rdx-primary), #FF8A2B); border-radius: 999px; transition: width .4s ease; } .rdx-completion__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .rdx-completion__list li { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 12px; background: var(--rdx-surface); border: 1px dashed var(--rdx-line); color: var(--rdx-ink-2); } .rdx-completion__list li.is-done { border-style: solid; background: #ECFDF5; border-color: #A7F3D0; color: #047857; } .rdx-completion__list li.is-done::before { content: '✓ '; } /* ---------- درخواست‌های پیام ---------- */ .rdx-msg-item { border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius-sm); padding: 12px 14px; } .rdx-msg-item__text { font-size: 13px; color: var(--rdx-ink-2); margin: 8px 0; line-height: 1.9; } .rdx-msg-item__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } /* ---------- گالری نمونه‌کار ---------- */ .rdx-project-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0; } .rdx-project-gallery img { border-radius: var(--rdx-radius-sm); width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .2s ease; } .rdx-project-gallery a:hover img { transform: scale(1.02); } @media (min-width: 700px) { .rdx-project-gallery { grid-template-columns: repeat(3, 1fr); } } .rdx-embed iframe { width: 100%; aspect-ratio: 16/9; border-radius: var(--rdx-radius); border: 0; } /* ---------- نوار فیلتر آرشیو فریلنسرها ---------- */ .rdx-filterbar { display: grid; gap: 10px; margin-bottom: 4px; grid-template-columns: 1fr; } .rdx-filterbar input, .rdx-filterbar select { padding: 12px 14px; border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius-sm); background: var(--rdx-bg); font-size: 13px; } .rdx-filterbar input:focus, .rdx-filterbar select:focus { border-color: var(--rdx-primary); outline: none; } @media (min-width: 900px) { .rdx-filterbar { grid-template-columns: 1.4fr 1fr 1fr 1fr auto auto; align-items: center; } } /* ---------- تب‌های صفحه ورود ---------- */ .rdx-auth__tabs { border-bottom: 1px solid var(--rdx-line); } .rdx-auth__tabs a { flex: 1; text-align: center; } /* ---------- لود شدن گرید اکسپلور ---------- */ .rdx-explore-grid.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s ease; } /* ========================================================= v0.5 — استوری، آواتار/کاور قابل تغییر، پلاس ========================================================= */ /* ---------- دکمه تغییر رسانه (آواتار/کاور) ---------- */ .rdx-media-btn { cursor: pointer; font-size: 13px; line-height: 1; } .rdx-avatar-wrap { position: relative; display: inline-block; } .rdx-avatar-wrap .rdx-media-btn, .rdx-profile__avatar .rdx-media-btn { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--rdx-bg); box-shadow: var(--rdx-shadow); } .rdx-profile__cover { position: relative; } .rdx-cover-change { position: absolute; bottom: 14px; inset-inline-end: 14px; } .rdx-cover-change .rdx-media-btn { background: rgba(255,255,255,.92); } .rdx-cover-btn-wrap { display: inline-flex; align-items: center; gap: 6px; } /* ---------- استوری: حلقه و نوار ---------- */ .rdx-story-ring { display: inline-grid; place-items: center; padding: 3px; border-radius: 50%; background: linear-gradient(45deg, var(--rdx-primary), #FF8A2B, #FFC163); } /* استوری دیده‌شده: حلقه خاکستری کم‌رنگ به‌جای گرادینت نارنجی — تا استوری جدید منتشر شود */ .rdx-story-ring.is-seen { background: var(--rdx-line); } .rdx-story-ring img { border-radius: 50%; border: 2px solid #fff; display: block; } .rdx-story-ring--add { width: 56px; height: 56px; font: 700 24px var(--rdx-font-display); color: var(--rdx-primary); background: var(--rdx-primary-soft); border: 2px dashed var(--rdx-primary); } .rdx-story-bar { display: flex; gap: 16px; overflow-x: auto; padding: 14px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rdx-story-bar::-webkit-scrollbar { display: none; } .rdx-story-bar__item { display: grid; gap: 6px; justify-items: center; border: 0; background: none; cursor: pointer; flex-shrink: 0; padding: 0; text-decoration: none; } .rdx-story-bar__add { text-decoration: none; } .rdx-story-bar__add--locked { position: relative; opacity: .85; } .rdx-story-bar__add--locked::after { content: '🔒'; position: absolute; top: 0; inset-inline-end: 6px; font-size: 11px; } .rdx-story-bar__item b { font: 700 11px var(--rdx-font-body); color: var(--rdx-ink-2); max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .rdx-story-bar__add b { color: var(--rdx-primary); } /* آواتار پروفایل با استوری فعال */ .rdx-profile__avatar.has-story { cursor: pointer; } .rdx-profile__avatar.has-story img { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--rdx-primary); } .rdx-profile__avatar.has-story.is-seen img { box-shadow: 0 0 0 3px var(--rdx-bg), 0 0 0 6px var(--rdx-line); } /* ---------- نمایشگر استوری ---------- */ .rdx-story-viewer { position: fixed; inset: 0; z-index: 130; background: rgba(12,10,9,.96); display: grid; place-items: center; } .rdx-story-viewer[hidden] { display: none; } .rdx-story-viewer__stage { position: relative; width: min(420px, 100vw); height: min(86vh, 760px); display: grid; } .rdx-story-viewer__media { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; } /* گرادینت تیره بالای صحنه تا نوار زمان و آیدی کاربر روی هر عکس/ویدیویی خوانا بمانند */ .rdx-story-viewer__stage::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 92px; z-index: 2; background: linear-gradient(to bottom, rgba(0,0,0,.6), transparent); pointer-events: none; border-radius: 14px 14px 0 0; } .rdx-story-viewer__bars { position: absolute; top: 10px; inset-inline: 12px; display: flex; gap: 4px; } .rdx-story-viewer__bars i { flex: 1; height: 3px; border-radius: 99px; background: rgba(255,255,255,.35); overflow: hidden; } .rdx-story-viewer__bars i span { display: block; height: 100%; width: 0; background: #fff; } .rdx-story-viewer__head { position: absolute; top: 22px; inset-inline: 12px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; } .rdx-story-viewer__head img { border-radius: 50%; } .rdx-story-viewer__head small { opacity: .8; } .rdx-story-viewer__head [data-sv-name] { font-weight: 700; } .rdx-story-viewer__head [data-sv-name]:hover { text-decoration: underline; } .rdx-story-viewer__head [data-sv-views] { opacity: .85; } .rdx-story-viewer__close { margin-inline-start: auto; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; } .rdx-story-viewer__nav { position: absolute; inset-block: 0; width: 34%; border: 0; background: none; cursor: pointer; pointer-events: none; } .rdx-story-viewer__nav--prev { inset-inline-start: 0; } .rdx-story-viewer__nav--next { inset-inline-end: 0; width: 66%; } .rdx-story-viewer__del { position: absolute; bottom: 14px; inset-inline-end: 14px; background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 999px; padding: 7px 14px; font: 700 12px var(--rdx-font-body); cursor: pointer; } /* ---------- اسکوپ منشن ---------- */ [data-rdx-mention-scope] { position: relative; } /* ========================================================= v0.6 — دیدگاه‌ها، صفحه پروژه، آپلود لحظه‌ای، ریپیتر ========================================================= */ /* ---------- صفحه نمونه‌کار ---------- */ .rdx-project__content { font-size: 14.5px; line-height: 2.1; color: var(--rdx-ink-2); } .rdx-project__content p { margin: 0 0 16px; } .rdx-project__content img { border-radius: var(--rdx-radius); } /* ---------- دیدگاه‌ها ---------- */ .rdx-comments { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rdx-line); } .rdx-comments__title { display: flex; align-items: center; gap: 10px; font: 700 17px var(--rdx-font-display); margin: 0 0 20px; } .rdx-comments__count { min-width: 26px; height: 26px; padding: 0 8px; display: grid; place-items: center; background: var(--rdx-primary-soft); color: var(--rdx-primary); border-radius: 999px; font: 700 12px var(--rdx-font-body); } .rdx-comments__list, .rdx-comments__list .children { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .rdx-comments__list .children { margin: 14px 0 0 0; padding-inline-start: 34px; } .rdx-comment__card { background: var(--rdx-bg); border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius); padding: 16px 18px; transition: border-color .15s ease; } .rdx-comment__card:hover { border-color: #E7E5E4; } .rdx-comment__head { display: flex; align-items: center; gap: 10px; } .rdx-comment__head img.avatar { border-radius: 50%; } .rdx-comment__who { display: grid; line-height: 1.5; } .rdx-comment__who b { font-size: 13px; display: flex; align-items: center; gap: 6px; } .rdx-comment__who b a { color: var(--rdx-ink); } .rdx-comment__who time { font-size: 11px; color: var(--rdx-ink-3); } .rdx-comment__owner { font: 700 10px var(--rdx-font-body); color: var(--rdx-primary); background: var(--rdx-primary-soft); border-radius: 999px; padding: 2px 8px; } .rdx-comment__reply { margin-inline-start: auto; } .rdx-comment__reply a { font: 700 12px var(--rdx-font-body); color: var(--rdx-ink-2); border: 1px solid var(--rdx-line); border-radius: 999px; padding: 5px 14px; transition: all .15s ease; } .rdx-comment__reply a:hover { border-color: var(--rdx-primary); color: var(--rdx-primary); } .rdx-comment__text { margin-top: 10px; font-size: 13.5px; line-height: 2; color: var(--rdx-ink-2); } .rdx-comment__text p { margin: 0 0 8px; } .rdx-comment__pending { color: #B45309; font-size: 12px; font-weight: 700; } .rdx-comments__empty, .rdx-comments__closed, .rdx-comments__login { background: var(--rdx-surface); border: 1px dashed var(--rdx-line); border-radius: var(--rdx-radius); padding: 22px; text-align: center; color: var(--rdx-ink-2); font-size: 13px; } .rdx-comments__login a { color: var(--rdx-primary); font-weight: 700; } /* فرم دیدگاه */ .rdx-comments__form { margin-top: 26px; background: var(--rdx-bg); border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius); padding: 20px; } .rdx-comments__form-title { margin: 0 0 14px; font: 700 15px var(--rdx-font-display); } .rdx-comments__form p { margin: 0 0 12px; } .rdx-comments__form input[type="text"], .rdx-comments__form input[type="email"], .rdx-comments__form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius-sm); font: 400 13px var(--rdx-font-body); background: var(--rdx-surface); transition: all .15s ease; } .rdx-comments__form input:focus, .rdx-comments__form textarea:focus { border-color: var(--rdx-primary); background: var(--rdx-bg); outline: none; box-shadow: 0 0 0 3px var(--rdx-primary-soft); } .rdx-comments__form .comment-form-author, .rdx-comments__form .comment-form-email { display: inline-block; width: calc(50% - 6px); } .rdx-comments__form .comment-form-author { margin-inline-end: 8px; } .rdx-comments__form .comment-reply-title small { margin-inline-start: 8px; font-size: 11px; } .rdx-comments .comment-respond { scroll-margin-top: 90px; } @media (max-width: 640px) { .rdx-comments__form .comment-form-author, .rdx-comments__form .comment-form-email { width: 100%; margin-inline-end: 0; } } /* ---------- ویجت آپلود لحظه‌ای ---------- */ .rdx-upwidget input[type="file"] { width: 100%; padding: 10px; border: 1px dashed var(--rdx-line); border-radius: var(--rdx-radius-sm); background: var(--rdx-surface); cursor: pointer; font-size: 12px; } .rdx-upwidget input[type="file"]:hover { border-color: var(--rdx-primary); } .rdx-upwidget__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .rdx-upitem { position: relative; width: 96px; } .rdx-upitem__thumb { width: 96px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--rdx-surface); border: 1px solid var(--rdx-line); display: grid; place-items: center; font-size: 22px; } .rdx-upitem__thumb img, .rdx-upitem__thumb video { width: 100%; height: 100%; object-fit: cover; } .rdx-upitem__bar { height: 5px; border-radius: 99px; background: var(--rdx-surface); border: 1px solid var(--rdx-line); margin-top: 6px; overflow: hidden; } .rdx-upitem__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rdx-primary), #FF8A2B); transition: width .2s ease; } .rdx-upitem__pct { font: 700 10px var(--rdx-font-body); color: var(--rdx-ink-2); text-align: center; display: block; margin-top: 3px; } .rdx-upitem.is-done .rdx-upitem__pct { color: #047857; } .rdx-upitem.is-err .rdx-upitem__pct { color: #B91C1C; } .rdx-upitem__x { position: absolute; top: -7px; inset-inline-start: -7px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--rdx-ink); color: #fff; font-size: 11px; cursor: pointer; line-height: 1; } /* نوار تأیید آواتار/کاور و استوری */ .rdx-confirm-bar { position: fixed; bottom: 18px; inset-inline: 0; z-index: 120; display: flex; justify-content: center; pointer-events: none; } .rdx-confirm-bar__panel { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: var(--rdx-bg); border: 1px solid var(--rdx-line); border-radius: 999px; padding: 10px 16px; box-shadow: 0 18px 48px -12px rgba(0,0,0,.3); animation: rdxPop .18s ease; } .rdx-confirm-bar__panel .rdx-upitem__bar { width: 120px; margin: 0; } .rdx-confirm-bar__label { font: 700 12px var(--rdx-font-body); } /* ---------- ریپیتر (سوابق، تحصیلات، زبان‌ها) ---------- */ .rdx-repeater__rows { display: grid; gap: 8px; margin-bottom: 10px; } .rdx-repeater__row { display: flex; gap: 8px; align-items: center; } .rdx-repeater__row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius-sm); font: 400 13px var(--rdx-font-body); background: var(--rdx-surface); } .rdx-repeater__row input:focus { border-color: var(--rdx-primary); background: var(--rdx-bg); outline: none; } .rdx-repeater__del { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--rdx-line); border-radius: 8px; background: var(--rdx-bg); color: var(--rdx-ink-3); cursor: pointer; transition: all .15s ease; } .rdx-repeater__del:hover { border-color: #FCA5A5; color: #DC2626; } @media (max-width: 640px) { .rdx-repeater__row { flex-wrap: wrap; } .rdx-repeater__row input { flex-basis: 100%; } } /* ---------- هدر صفحه نمونه‌کار ---------- */ .rdx-project__header { margin-bottom: 6px; } .rdx-project__byline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 14px 18px; background: var(--rdx-bg); border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius); } .rdx-project__creator { display: flex; align-items: center; gap: 12px; } .rdx-project__creator img { border-radius: 50%; } .rdx-project__creator-info { display: grid; line-height: 1.6; } .rdx-project__creator-info b { font-size: 14px; color: var(--rdx-ink); display: flex; align-items: center; gap: 5px; } .rdx-project__creator-info small { font-size: 11.5px; color: var(--rdx-ink-3); } .rdx-project__stats { margin-inline-start: auto; display: flex; gap: 16px; font-size: 12px; color: var(--rdx-ink-2); } .rdx-project__hero img { width: 100%; border-radius: var(--rdx-radius); box-shadow: var(--rdx-shadow); } .rdx-project__bar { position: sticky; top: 74px; z-index: 30; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: var(--rdx-glass); backdrop-filter: blur(8px); border: 1px solid var(--rdx-line); border-radius: 999px; padding: 8px 12px; margin: 18px 0; width: fit-content; } /* ========================================================= v0.7 — ری‌دیزاین پروفایل، کارت فریلنسر، منوی موبایل، ریسپانسیو کامل، PWA ========================================================= */ /* ---------- رفع باگ + ری‌دیزاین هدر پروفایل (استاندارد روز) ---------- */ /* باگ: position:relative روی کاور، stacking context ساخته بود و محتوای هدر (با margin منفی) زیر کاور می‌رفت. */ .rdx-profile__cover { position: relative; z-index: 0; height: 240px; overflow: hidden; } .rdx-profile__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.18)); pointer-events: none; } .rdx-profile__cover img { position: relative; z-index: 0; } .rdx-cover-change { z-index: 2; } .rdx-profile__head { position: relative; z-index: 2; /* همیشه روی کاور */ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; margin-top: -58px; padding-bottom: 22px; border-bottom: 1px solid var(--rdx-line); } .rdx-profile__avatar { position: relative; z-index: 3; flex-shrink: 0; width: 128px; height: 128px; border-radius: 50%; background: var(--rdx-bg); padding: 5px; box-shadow: 0 8px 28px -8px rgba(0,0,0,.25); } .rdx-profile__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .rdx-profile__avatar .rdx-media-btn { z-index: 4; } .rdx-profile__avatar.has-story { padding: 4px; background: linear-gradient(45deg, var(--rdx-primary), #FF8A2B, #FFC163); } .rdx-profile__avatar.has-story img { border: 3px solid #fff; box-shadow: none; } .rdx-profile__avatar.has-story.is-seen { background: var(--rdx-line); } .rdx-profile__id { flex: 1; min-width: 220px; padding-bottom: 4px; } .rdx-profile__name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 22px; margin: 0 0 4px; } .rdx-profile__sub { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--rdx-ink-2); } .rdx-profile__stats { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .rdx-profile__stats span { display: inline-flex; align-items: center; gap: 6px; background: var(--rdx-surface); border: 1px solid var(--rdx-line); border-radius: 999px; padding: 6px 14px; font-size: 12px; color: var(--rdx-ink-2); } .rdx-profile__stats b { color: var(--rdx-ink); font-size: 13px; } .rdx-profile__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-bottom: 6px; } .rdx-tabs--profile { position: sticky; top: 64px; z-index: 20; background: var(--rdx-glass); backdrop-filter: blur(8px); } /* ---------- اسپات‌لایت فریلنسرهای پله ---------- */ .rdx-spotlight { background: linear-gradient(135deg, #FFF7F0, var(--rdx-primary-soft)); border: 1px solid #FFD9B8; border-radius: var(--rdx-radius); padding: 20px; margin-bottom: 26px; } .rdx-spotlight__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .rdx-spotlight__head h2 { margin: 0; font-size: 17px; } .rdx-spotlight__head p { margin: 0; font-size: 12px; color: var(--rdx-ink-2); } .rdx-spotlight__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(280px, 82%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; } .rdx-spotlight__track::-webkit-scrollbar { display: none; } .rdx-spotlight__track > * { scroll-snap-align: start; } /* ---------- کارت شبکه‌ای فریلنسر ---------- */ .rdx-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .rdx-fcard { position: relative; background: var(--rdx-bg); border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .rdx-fcard:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -18px rgba(0,0,0,.18); border-color: #E7E5E4; } .rdx-fcard.is-boosted { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, var(--rdx-primary), #FFC163) border-box; } .rdx-fcard__cover { display: block; height: 84px; background: linear-gradient(120deg, var(--rdx-primary-soft), var(--rdx-surface)); } .rdx-fcard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .rdx-fcard__avatar { width: 84px; height: 84px; margin: -44px auto 0; position: relative; z-index: 2; border-radius: 50%; background: var(--rdx-bg); padding: 4px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.2); } .rdx-fcard__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .rdx-fcard__avatar.has-story { background: linear-gradient(45deg, var(--rdx-primary), #FFC163); cursor: pointer; } .rdx-fcard__avatar.has-story img { border: 3px solid #fff; } .rdx-fcard__avatar.has-story.is-seen { background: var(--rdx-line); } .rdx-fcard__body { padding: 12px 16px 18px; text-align: center; } .rdx-fcard__name { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15px; margin: 0 0 2px; } .rdx-fcard__name a { color: var(--rdx-ink); } .rdx-fcard__job { font-size: 12px; color: var(--rdx-ink-2); margin: 0 0 10px; } .rdx-fcard__skills { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .rdx-fcard__skills span { font: 700 10.5px var(--rdx-font-body); color: var(--rdx-ink-2); background: var(--rdx-surface); border: 1px solid var(--rdx-line); border-radius: 999px; padding: 4px 11px; } .rdx-fcard__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--rdx-surface); padding: 10px 0; margin-bottom: 12px; font-size: 10.5px; color: var(--rdx-ink-3); } .rdx-fcard__stats span { display: grid; gap: 1px; } .rdx-fcard__stats b { font-size: 14px; color: var(--rdx-ink); } .rdx-fcard__actions { display: flex; gap: 8px; justify-content: center; } .rdx-fcard__actions .rdx-btn { padding-block: 9px; font-size: 12px; } /* ---------- لیست فشرده ---------- */ .rdx-fcompact-list { display: grid; gap: 10px; } .rdx-fcompact { display: flex; align-items: center; gap: 12px; background: var(--rdx-bg); border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius-sm); padding: 10px 14px; transition: border-color .15s ease; } .rdx-fcompact:hover { border-color: var(--rdx-primary); } .rdx-fcompact img.avatar { border-radius: 50%; } .rdx-fcompact__id { flex: 1; min-width: 0; display: grid; line-height: 1.6; } .rdx-fcompact__id b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; } .rdx-fcompact__id b a { color: var(--rdx-ink); } .rdx-fcompact__id small { font-size: 11.5px; color: var(--rdx-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rdx-fcompact__actions { display: flex; gap: 6px; flex-shrink: 0; } /* ---------- منوی موبایل (کشو) ---------- */ .rdx-burger { position: relative; z-index: 101; } .rdx-burger span { transition: transform .22s ease, opacity .22s ease; } .rdx-burger.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); } .rdx-burger.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); } .rdx-drawer { position: fixed; top: 64px; inset-inline: 0; bottom: 0; z-index: 100; background: var(--rdx-bg); overflow-y: auto; padding-bottom: 30px; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; } .rdx-drawer.is-open { opacity: 1; transform: none; } .rdx-drawer__list a { font-size: 15px; padding: 13px 4px; border-bottom: 1px solid var(--rdx-surface); } .rdx-drawer__cta { display: grid; gap: 10px; padding: 18px 20px; } .rdx-btn--block { width: 100%; justify-content: center; text-align: center; } body.rdx-no-scroll { overflow: hidden; } /* ========================================================= ریسپانسیو کامل موبایل ========================================================= */ @media (max-width: 900px) { .rdx-header__actions .rdx-btn { display: none; } /* دکمه‌ها به کشو منتقل شدند */ .rdx-header__actions .rdx-bell { display: block; } .rdx-header__actions .rdx-theme-toggle { display: inline-flex; } } @media (max-width: 720px) { html { -webkit-text-size-adjust: 100%; } .rdx-container { padding-inline: 16px; } .rdx-section { padding-block: 26px; } /* پروفایل */ .rdx-profile__cover { height: 170px; border-radius: 0; } .rdx-profile__head { margin-top: -48px; gap: 12px; } .rdx-profile__avatar { width: 104px; height: 104px; } .rdx-profile__name { font-size: 18px; } .rdx-profile__id { min-width: 100%; } .rdx-profile__actions { width: 100%; } .rdx-profile__actions .rdx-btn { flex: 1; justify-content: center; } .rdx-tabs--profile { top: 58px; overflow-x: auto; scrollbar-width: none; } /* نمونه‌کار */ .rdx-project__title { font-size: 20px; } .rdx-project__byline { padding: 12px 14px; } .rdx-project__stats { margin-inline-start: 0; width: 100%; } .rdx-project__bar { position: static; width: 100%; justify-content: center; } .rdx-project-gallery { grid-template-columns: repeat(2, 1fr); } /* پنل کاربری */ .rdx-account__head { flex-wrap: wrap; } .rdx-account__head > div[style] { width: 100%; margin-inline-start: 0 !important; } .rdx-account__grid { grid-template-columns: 1fr !important; } /* فرم‌ها و مودال‌ها */ .rdx-mini-modal__panel { width: 100%; border-radius: var(--rdx-radius) var(--rdx-radius) 0 0; align-self: end; } .rdx-mini-modal { place-items: end center; padding: 0; } .rdx-bell__panel { position: fixed; top: 64px; inset-inline: 10px; width: auto; } /* اسپات‌لایت و کارت‌ها */ .rdx-spotlight { margin-inline: -16px; border-radius: 0; border-inline: 0; padding: 16px; } .rdx-fgrid { grid-template-columns: 1fr; } /* نوار فیلتر */ .rdx-filterbar { grid-template-columns: 1fr 1fr; } .rdx-filterbar .rdx-filterbar__q { grid-column: 1 / -1; } .rdx-filterbar .rdx-btn { grid-column: span 1; justify-content: center; } /* استوری‌ویوئر تمام صفحه */ .rdx-story-viewer__stage { width: 100vw; height: 100dvh; } .rdx-story-viewer__media { border-radius: 0; } /* دیدگاه‌ها */ .rdx-comments__list .children { padding-inline-start: 16px; } /* جدول‌مانندها */ .rdx-frow { flex-direction: column; align-items: stretch; } .rdx-frow__actions { justify-content: stretch; } .rdx-frow__actions .rdx-btn { flex: 1; justify-content: center; } } @media (max-width: 420px) { .rdx-profile__stats span { padding: 5px 10px; font-size: 11px; } .rdx-fcard__actions { flex-direction: column; } } /* حالت PWA نصب‌شده */ @media (display-mode: standalone) { .rdx-header { padding-top: env(safe-area-inset-top); } body { padding-bottom: env(safe-area-inset-bottom); } } /* ========================================================= v0.8 — هدر موبایل اپلیکیشنی، نوار پایین، بنر نصب PWA ========================================================= */ /* ---------- هدر: رفع نامرئی‌شدن در موبایل ---------- علت: پس‌زمینه نیمه‌شفاف + backdrop-filter که در برخی مرورگرهای موبایل ساپورت نمی‌شود و هدر روی محتوای سفید «گم» می‌شد. */ @supports not (backdrop-filter: blur(1px)) { .rdx-header { background: var(--rdx-bg); } } .rdx-header--static { position: static; } @media (max-width: 900px) { /* هدر اپلیکیشنی: fixed، توپُر، با سایه */ .rdx-header { position: fixed; top: 0; inset-inline: 0; z-index: 95; background: var(--rdx-bg); backdrop-filter: none; box-shadow: 0 1px 0 var(--rdx-line); } .rdx-header.is-scrolled { box-shadow: 0 4px 18px -8px rgba(0,0,0,.16); } .rdx-header--static { position: fixed; } /* در موبایل همیشه اپلیکیشنی */ body { padding-top: 58px; } .rdx-header__inner { height: 58px; gap: 12px; } .rdx-logo img { max-height: 34px; width: auto; } .rdx-logo__text { font-size: 19px; } .rdx-burger { padding: 12px; margin-inline-end: -8px; } /* هدف لمسی بزرگ‌تر */ .rdx-drawer { top: 58px; } .rdx-tabs--profile { top: 58px; } .rdx-bell__panel { top: 58px; } } /* ---------- نوار پایین اپلیکیشنی (Bottom Nav) ---------- خودِ نوار .rdx-mobile-nav است (بالاتر در فایل)؛ این‌جا فقط فاصله نوار تأیید شناور از نوار پایین، وقتی کلاس rdx-has-bnav روی body هست. */ @media (max-width: 900px) { body.rdx-has-bnav .rdx-confirm-bar { bottom: calc(76px + env(safe-area-inset-bottom)); } /* هدف‌های لمسی بزرگ‌تر در موبایل */ .rdx-btn { min-height: 42px; } input, select, textarea { font-size: 14px; } } /* ---------- بنر نصب اپلیکیشن (A2HS) ---------- */ .rdx-a2hs { position: fixed; bottom: calc(78px + env(safe-area-inset-bottom)); inset-inline: 0; display: flex; justify-content: center; gap: 8px; z-index: 97; pointer-events: none; animation: rdxPop .25s ease; } body:not(.rdx-has-bnav) .rdx-a2hs { bottom: calc(18px + env(safe-area-inset-bottom)); } .rdx-a2hs button { pointer-events: auto; border: 0; cursor: pointer; } /* توجه: این‌جا از رنگ ثابت تیره استفاده می‌شود نه var(--rdx-ink)، چون --rdx-ink در دارک‌مود روشن می‌شود و با متن سفید #fff ناخوانا می‌شد. */ .rdx-a2hs__go { background: #1C1917; color: #fff; font: 700 13px var(--rdx-font-body); padding: 12px 20px; border-radius: 999px; box-shadow: 0 14px 34px -10px rgba(0,0,0,.4); } .rdx-a2hs__x { width: 42px; border-radius: 50%; background: var(--rdx-bg); color: var(--rdx-ink-2); border: 1px solid var(--rdx-line) !important; font-size: 13px; } .rdx-a2hs--ios { max-width: min(360px, calc(100vw - 32px)); pointer-events: auto; background: #1C1917; color: #fff; border-radius: 16px; padding: 12px 14px; align-items: center; box-shadow: 0 14px 34px -10px rgba(0,0,0,.4); } .rdx-a2hs--ios .rdx-a2hs__msg { font-size: 12.5px; line-height: 1.8; } .rdx-a2hs--ios .rdx-a2hs__x { flex-shrink: 0; background: rgba(255,255,255,.15); border-color: transparent !important; color: #fff; } @media (min-width: 901px) { .rdx-a2hs { display: none; } } /* حالت نصب‌شده (standalone): تجربه کاملاً اپلیکیشنی */ @media (display-mode: standalone) { .rdx-a2hs { display: none; } .rdx-header { padding-top: env(safe-area-inset-top); } @media (max-width: 900px) { body { padding-top: calc(58px + env(safe-area-inset-top)); } } * { -webkit-tap-highlight-color: transparent; user-select: none; } input, textarea, [contenteditable] { user-select: text; } } /* ========================================================= v0.9 — دیزاین‌سیستم اپلیکیشنی توکن‌ها، آیکن‌ها، استیت‌های یکپارچه، میکروانیمیشن ========================================================= */ :root { /* مقیاس فاصله استاندارد */ --rdx-sp-1: 4px; --rdx-sp-2: 8px; --rdx-sp-3: 12px; --rdx-sp-4: 16px; --rdx-sp-5: 20px; --rdx-sp-6: 24px; --rdx-sp-7: 32px; --rdx-sp-8: 44px; /* شعاع و سایه یکپارچه */ --rdx-radius: 16px; --rdx-radius-sm: 12px; --rdx-radius-xs: 10px; --rdx-shadow-sm: 0 1px 2px rgba(0,0,0,.05); --rdx-shadow: 0 8px 24px -12px rgba(0,0,0,.14); --rdx-shadow-lg: 0 20px 48px -16px rgba(0,0,0,.2); /* حلقه فوکوس */ --rdx-ring: 0 0 0 3px color-mix(in srgb, var(--rdx-primary) 25%, transparent); /* زمان‌بندی انیمیشن */ --rdx-ease: cubic-bezier(.2, .8, .3, 1); } @supports not (color: color-mix(in srgb, red 50%, blue)) { :root { --rdx-ring: 0 0 0 3px rgba(255,110,0,.25); } } /* ---------- آیکن‌ها: اندازه و ضخامت یکسان در کل پروژه ---------- */ .rdx-i { flex-shrink: 0; display: inline-block; vertical-align: -4px; } .rdx-btn .rdx-i { vertical-align: middle; } /* ---------- دکمه‌ها: سیستم یکپارچه ---------- */ .rdx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; border-radius: 999px; font-weight: 600; letter-spacing: -.01em; transition: background .16s var(--rdx-ease), color .16s var(--rdx-ease), border-color .16s var(--rdx-ease), box-shadow .16s var(--rdx-ease), transform .12s var(--rdx-ease); } .rdx-btn:hover { transform: translateY(-1px); } .rdx-btn:active { transform: scale(.96); } .rdx-btn--primary { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--rdx-primary) 55%, transparent); } .rdx-btn--primary:hover { box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--rdx-primary) 65%, transparent); } .rdx-btn--xs { min-height: 34px; padding-block: 6px; font-size: var(--rdx-fs-xs); } .rdx-btn--xs .rdx-i { width: 15px; height: 15px; } .rdx-btn--icon { width: 42px; min-height: 42px; padding: 0; border-radius: 50%; background: var(--rdx-surface); border: 1px solid var(--rdx-line); } .rdx-btn--icon:hover { border-color: var(--rdx-primary); color: var(--rdx-primary); } /* ---------- سوییچ حالت تاریک/روشن ---------- */ .rdx-theme-toggle { position: relative; } .rdx-theme-toggle .rdx-i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity .15s var(--rdx-ease, ease), transform .15s var(--rdx-ease, ease); } .rdx-theme-toggle__sun { opacity: 0; transform: translate(-50%, -50%) rotate(-40deg); } .rdx-theme-toggle__moon { opacity: 1; } html.rdx-dark .rdx-theme-toggle__sun { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); } html.rdx-dark .rdx-theme-toggle__moon { opacity: 0; transform: translate(-50%, -50%) rotate(40deg); } /* ---------- استیت فوکوس یکپارچه (کیبورد) ---------- */ :where(a, button, input, select, textarea, [tabindex]):focus { outline: none; } :where(a, button, [tabindex]):focus-visible { box-shadow: var(--rdx-ring); border-radius: var(--rdx-radius-xs); } :where(input, select, textarea):focus-visible { box-shadow: var(--rdx-ring); border-color: var(--rdx-primary); } /* ---------- فرم‌ها: ظاهر یکسان همه ورودی‌ها ---------- */ .rdx-form input[type="text"], .rdx-form input[type="url"], .rdx-form input[type="email"], .rdx-form input[type="tel"], .rdx-form input[type="number"], .rdx-form select, .rdx-form textarea, .rdx-filterbar input, .rdx-filterbar select, .rdx-repeater__row input, .rdx-comments__form input, .rdx-comments__form textarea { min-height: 44px; border-radius: var(--rdx-radius-sm); border: 1.5px solid var(--rdx-line); background: var(--rdx-surface); padding: 10px 14px; transition: border-color .15s var(--rdx-ease), background .15s var(--rdx-ease), box-shadow .15s var(--rdx-ease); } .rdx-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--rdx-ink-3) 50%), linear-gradient(135deg, var(--rdx-ink-3) 50%, transparent 50%); background-position: calc(0% + 18px) 50%, calc(0% + 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-start: 34px; } .rdx-form :where(input, select, textarea):hover { border-color: #D6D3D1; } .rdx-form :where(input, select, textarea):focus { border-color: var(--rdx-primary); background: var(--rdx-bg); box-shadow: var(--rdx-ring); } /* ---------- کارت‌ها: زبان مشترک ---------- */ .rdx-resume-box, .rdx-comment__card, .rdx-fcompact, .rdx-project__byline { border-radius: var(--rdx-radius); box-shadow: var(--rdx-shadow-sm); } /* ---------- میکروانیمیشن ورود محتوا ---------- */ @media (prefers-reduced-motion: no-preference) { main, .rdx-container > .rdx-profile, .rdx-account { animation: rdxFadeUp .32s var(--rdx-ease); } @keyframes rdxFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .rdx-fcard, .rdx-card { animation: rdxFadeUp .3s var(--rdx-ease) backwards; } .rdx-mini-modal__panel { animation: rdxSheetUp .26s var(--rdx-ease); } @keyframes rdxSheetUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } } /* ---------- تب‌ها: زیرخط متحرک اپلیکیشنی ---------- */ .rdx-tabs a { position: relative; padding-block: 12px; font-weight: 600; color: var(--rdx-ink-3); } .rdx-tabs a::after { content: ''; position: absolute; bottom: -1px; inset-inline: 20%; height: 2.5px; border-radius: 99px; background: var(--rdx-primary); transform: scaleX(0); transition: transform .2s var(--rdx-ease); } .rdx-tabs a.is-active, .rdx-tabs .current a { color: var(--rdx-ink); } .rdx-tabs a.is-active::after, .rdx-tabs .current a::after { transform: scaleX(1); } /* ---------- موبایل: لمس و ژست ---------- */ @media (max-width: 900px) { .rdx-btn { min-height: 46px; } /* هدف لمسی ≥44px */ .rdx-btn--icon { width: 46px; } .rdx-header__actions { gap: 4px; } .rdx-drawer__list a { min-height: 50px; display: flex; align-items: center; } .rdx-story-bar { padding-block: 12px 8px; } /* اسکرول‌های افقی با مومنتوم و بدون اسکرول‌بار */ .rdx-spotlight__track, .rdx-story-bar, .rdx-tabs { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* لبه‌به‌لبه اپلیکیشنی */ .rdx-fcompact-list, .rdx-comments__list { gap: 8px; } } /* ---------- دسکتاپ: استفاده بهتر از فضا ---------- */ @media (min-width: 1200px) { .rdx-container { max-width: 1200px; } .rdx-fgrid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; } .rdx-project-gallery { grid-template-columns: repeat(3, 1fr); } } /* ---------- پاک‌سازی وب‌استایل‌های قدیمی ---------- */ .rdx-btn, .rdx-badge, .rdx-i, img { -webkit-user-drag: none; user-drag: none; } ::selection { background: var(--rdx-primary-soft); color: var(--rdx-primary); } /* ========================================================= v0.10 — اصلاحات UI: آواتارها، کارت‌های هم‌قد، استوری، همکاران ========================================================= */ /* ---------- آواتارها: هیچ‌جا کشیده نشوند ---------- */ img.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; } .rdx-comment__head img.avatar { width: 40px; height: 40px; } .rdx-fcompact img.avatar { width: 44px; height: 44px; } .rdx-collab__chip img, .rdx-collab__drop img { border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* ---------- کارت‌های فریلنسر: قد یکسان و مرتب ---------- */ .rdx-fgrid { align-items: stretch; } .rdx-fcard { display: flex; flex-direction: column; } .rdx-fcard__body { display: flex; flex-direction: column; flex: 1; } .rdx-fcard__name { min-height: 24px; } .rdx-fcard__name a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rdx-fcard__job { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 19px; } .rdx-fcard__skills { min-height: 27px; flex-wrap: nowrap; overflow: hidden; } .rdx-fcard__skills span { white-space: nowrap; } .rdx-fcard__stats { margin-top: auto; } .rdx-fcard__actions { margin-top: 12px; } .rdx-fcard__actions .rdx-btn { flex: 1; white-space: nowrap; padding-inline: 10px; } /* دکمه فالو: همیشه تک‌خطی */ .rdx-follow-btn { white-space: nowrap; } .rdx-follow-btn.is-following { background: var(--rdx-surface); color: var(--rdx-ink-2); border: 1px solid var(--rdx-line); box-shadow: none; } /* ---------- استوری‌ویوئر: نوار زمان و هد روی رسانه + فلش‌های واضح ---------- */ .rdx-story-viewer__bars { z-index: 3; } .rdx-story-viewer__head { z-index: 3; } .rdx-story-viewer__del { z-index: 3; } .rdx-story-viewer__media { z-index: 1; } .rdx-story-viewer__nav { z-index: 2; display: grid; align-items: center; } .rdx-story-viewer__nav i { font-style: normal; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 24px; opacity: 0; transition: opacity .2s var(--rdx-ease); backdrop-filter: blur(4px); pointer-events: auto; cursor: pointer; } /* دکمه استوپ/پخش با یک کلیک، وسط صحنه */ .rdx-story-viewer__pause { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; display: none; place-items: center; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; font-size: 22px; border: 0; cursor: pointer; backdrop-filter: blur(4px); pointer-events: none; } .rdx-story-viewer.is-paused .rdx-story-viewer__pause { display: grid; } .rdx-story-viewer__nav--prev i { justify-self: start; margin-inline-start: 10px; } .rdx-story-viewer__nav--next i { justify-self: end; margin-inline-end: 10px; } .rdx-story-viewer__stage:hover .rdx-story-viewer__nav i, .rdx-story-viewer__nav:focus-visible i { opacity: 1; } @media (max-width: 900px) { .rdx-story-viewer__nav i { opacity: .55; } } /* ---------- ویجت آپلود: محافظ نمایش ---------- */ .rdx-upitem { overflow: visible; } .rdx-upitem__thumb img, .rdx-upitem__thumb video { width: 100%; height: 100%; object-fit: cover; } .rdx-upwidget > img, .rdx-upwidget > video { display: none; } /* هر پیش‌نمایش سرگردان قدیمی */ /* ---------- همکاران پروژه: جستجو + چیپ ---------- */ .rdx-collab__search { position: relative; display: flex; align-items: center; gap: 8px; } .rdx-collab__search .rdx-i { position: absolute; inset-inline-start: 13px; color: var(--rdx-ink-3); pointer-events: none; } .rdx-collab__search input { width: 100%; padding-inline-start: 40px !important; } .rdx-collab__drop { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 40; background: var(--rdx-bg); border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius-sm); box-shadow: var(--rdx-shadow-lg); overflow: hidden; max-height: 260px; overflow-y: auto; } .rdx-collab__drop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; background: none; cursor: pointer; text-align: start; } .rdx-collab__drop button:hover { background: var(--rdx-surface); } .rdx-collab__drop span { display: grid; line-height: 1.5; } .rdx-collab__drop b { font-size: 13px; } .rdx-collab__drop small { font-size: 11px; color: var(--rdx-ink-3); } .rdx-collab__chips { display: grid; gap: 10px; margin-top: 12px; } .rdx-collab__chip { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; background: var(--rdx-surface); border: 1px solid var(--rdx-line); border-radius: 14px; padding: 10px 12px; } .rdx-collab__chip img { width: 40px; height: 40px; } .rdx-collab__chip .rdx-collab__who { display: grid; line-height: 1.5; min-width: 0; } .rdx-collab__chip b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rdx-collab__chip small { font-size: 11px; color: var(--rdx-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rdx-collab__chip .rdx-collab__role-input { grid-column: 1 / -1; width: 100%; min-height: 42px !important; background: var(--rdx-bg) !important; border: 1.5px solid var(--rdx-line) !important; border-radius: 10px !important; padding: 8px 12px !important; font-size: 13px !important; margin-top: 2px; } .rdx-collab__chip .rdx-collab__remove { border: 0; background: none; color: var(--rdx-ink-3); cursor: pointer; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; } .rdx-collab__chip .rdx-collab__remove:hover { background: var(--rdx-line); color: var(--rdx-ink); } .rdx-collab__chip button { width: 26px; height: 26px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--rdx-bg); color: var(--rdx-ink-3); cursor: pointer; font-size: 11px; } .rdx-collab__chip button:hover { color: #DC2626; } /* ========================================================= v0.11 — رزومه‌ساز، آیکن مداد، تب‌های تک‌خط، کوییک‌ویو ========================================================= */ /* ---------- دکمه ویرایش آواتار/کاور: دایره کامل با مداد ---------- */ .rdx-media-btn { min-height: 0 !important; width: 32px; height: 32px; padding: 0 !important; display: inline-grid !important; place-items: center; aspect-ratio: 1; border-radius: 50% !important; cursor: pointer; background: var(--rdx-bg); border: 1px solid var(--rdx-line); color: var(--rdx-ink-2); box-shadow: var(--rdx-shadow-sm); transition: color .15s var(--rdx-ease), border-color .15s var(--rdx-ease), transform .12s var(--rdx-ease); } .rdx-media-btn:hover { color: var(--rdx-primary); border-color: var(--rdx-primary); transform: translateY(-1px); } .rdx-media-btn .rdx-i { vertical-align: 0; } .rdx-avatar-wrap .rdx-media-btn, .rdx-profile__avatar .rdx-media-btn { width: 30px; height: 30px; } /* ---------- تب‌ها و آکاردئون‌ها: فقط یک خط زیر آیتم فعال ---------- */ .rdx-tabs a, .rdx-tabs a.is-active, .rdx-tabs .current a, .rdx-tabs a:hover, .rdx-tabs [aria-selected="true"] { border-bottom: 0 !important; box-shadow: none !important; text-decoration: none !important; } .rdx-tabs { border-bottom-width: 1px; } details.rdx-acc summary, .rdx-acc .is-open { border-bottom: 0 !important; text-decoration: none !important; } /* ---------- کوییک‌ویو: آواتار گرد کامنت‌ها + لایک ---------- */ .rdx-qv__comment { display: flex; gap: 10px; align-items: flex-start; } .rdx-qv__comment img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .rdx-qv__comment b { font-size: 12.5px; } .rdx-qv__comment small { font-size: 10.5px; color: var(--rdx-ink-3); } .rdx-qv__comment p { font-size: 12.5px; color: var(--rdx-ink-2); margin: 2px 0 0; } .rdx-collab__item img { border-radius: 50%; object-fit: cover; } /* ---------- دکمه‌های آیکنی هدر پروفایل ---------- */ .rdx-btn--icon.is-copied { color: #047857; border-color: #047857; font-size: 11px; width: auto; padding-inline: 12px !important; border-radius: 999px !important; } /* ---------- باکس رزومه‌ساز در پنل ---------- */ .rdx-rb__list { display: grid; gap: 8px; margin-bottom: 12px; } .rdx-rb__row { display: flex; align-items: center; gap: 10px; cursor: pointer; background: var(--rdx-surface); border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius-xs); padding: 9px 12px; transition: border-color .15s var(--rdx-ease); } .rdx-rb__row:hover { border-color: var(--rdx-primary); } .rdx-rb__row b { font-size: 12.5px; flex: 1; } .rdx-rb__row input[type="checkbox"] { accent-color: var(--rdx-primary); width: 16px; height: 16px; } .rdx-rb__ord { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--rdx-ink-3); } .rdx-rb__ord input { width: 58px; min-height: 30px !important; padding: 2px 8px !important; text-align: center; } .rdx-rb__actions { display: flex; gap: 8px; } /* v0.12 — انتخاب قالب رزومه در پنل */ .rdx-rb__tpl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .rdx-rb__tpl select { min-height: 38px; border-radius: 10px; border: 1.5px solid var(--rdx-line); background: var(--rdx-surface); padding: 6px 12px; } /* ========================================================= v0.13 — رزومه‌ساز: درگ، فلش‌ها، رنگ اختصاصی ========================================================= */ .rdx-rb__row { cursor: default; user-select: none; } .rdx-rb__row.is-dragging { opacity: .45; border-style: dashed; border-color: var(--rdx-primary); } .rdx-rb__grip { cursor: grab; color: var(--rdx-ink-3); display: grid; place-items: center; } .rdx-rb__grip:active { cursor: grabbing; } .rdx-rb__moves { display: flex; gap: 4px; } .rdx-rb__moves button { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--rdx-line); border-radius: 8px; background: var(--rdx-bg); color: var(--rdx-ink-3); cursor: pointer; transition: color .12s var(--rdx-ease), border-color .12s var(--rdx-ease); } .rdx-rb__moves button:hover { color: var(--rdx-primary); border-color: var(--rdx-primary); } .rdx-rot90 { transform: rotate(90deg); } .rdx-rb__accent { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; } .rdx-rb__accent label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; } .rdx-rb__accent input[type="checkbox"] { accent-color: var(--rdx-primary); width: 16px; height: 16px; } .rdx-rb__accent input[type="color"] { width: 44px; height: 32px; border: 1px solid var(--rdx-line); border-radius: 8px; padding: 2px; background: var(--rdx-bg); cursor: pointer; } .rdx-rb__accent input[type="color"]:disabled { opacity: .35; cursor: not-allowed; } @media (max-width: 720px) { .rdx-rb__row { flex-wrap: wrap; } .rdx-rb__row b { min-width: 40%; } } /* ========================================================= v0.14 — رفع اسکرول‌بار تب‌ها ========================================================= */ .rdx-tabs { scrollbar-width: none; -ms-overflow-style: none; } .rdx-tabs::-webkit-scrollbar { display: none; height: 0; } .rdx-tabs--profile { overflow: visible; } /* دسکتاپ: بدون اسکرول */ @media (max-width: 900px) { .rdx-tabs--profile { overflow-x: auto; overflow-y: hidden; } /* موبایل: اسکرول افقی بدون نوار */ } /* ========================================================= v0.22 — فرم‌های حرفه‌ای: تگ، مبلغ، تقویم، مودال، هشتگ ========================================================= */ /* ---------- راهنمای زیر فیلد ---------- */ .rdx-field-hint { display: block; font-size: 11.5px; color: var(--rdx-ink-3); margin-top: 5px; line-height: 1.7; } .rdx-field-hint code { background: var(--rdx-surface); border: 1px solid var(--rdx-line); border-radius: 5px; padding: 1px 5px; font-size: 11px; } .rdx-field-hint b { color: var(--rdx-primary); } /* ---------- فیلد تگ / هشتگ ---------- */ .rdx-tagfield__box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1.5px solid var(--rdx-line); border-radius: var(--rdx-radius-sm); background: var(--rdx-bg); padding: 7px 10px; min-height: 46px; cursor: text; transition: border-color .15s var(--rdx-ease), box-shadow .15s var(--rdx-ease); } .rdx-tagfield__box:focus-within { border-color: var(--rdx-primary); box-shadow: 0 0 0 3px var(--rdx-primary-soft); } .rdx-tagfield__chips { display: contents; } .rdx-tagfield__chip { display: inline-flex; align-items: center; gap: 6px; background: var(--rdx-primary-soft); color: var(--rdx-primary); border-radius: 999px; padding: 4px 10px 4px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; } .rdx-tagfield__chip b { cursor: pointer; font-size: 10px; opacity: .65; font-weight: 400; } .rdx-tagfield__chip b:hover { opacity: 1; } .rdx-tagfield__input { flex: 1; min-width: 130px; border: 0 !important; outline: 0; padding: 2px !important; min-height: 0 !important; background: transparent; font-size: 13px; font-family: inherit; } .rdx-tagfield__input:focus { box-shadow: none !important; } .rdx-tagfield__suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .rdx-tagfield__suggest small { font-size: 11px; color: var(--rdx-ink-3); margin-inline-end: 2px; } .rdx-tagfield__sug { background: var(--rdx-surface); border: 1px solid var(--rdx-line); color: var(--rdx-ink-2); border-radius: 999px; padding: 4px 11px; font-size: 11.5px; cursor: pointer; font-family: inherit; transition: border-color .12s var(--rdx-ease), color .12s var(--rdx-ease); } .rdx-tagfield__sug:hover { border-color: var(--rdx-primary); color: var(--rdx-primary); } /* ---------- هشتگ‌های نمایشی ---------- */ .rdx-hashtag { display: inline-flex; align-items: center; background: var(--rdx-primary-soft); color: var(--rdx-primary); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; text-decoration: none; transition: background .12s var(--rdx-ease); } .rdx-hashtag:hover { background: var(--rdx-primary); color: #fff; } .rdx-skill-tags--outline .rdx-hashtag { background: transparent; border: 1px solid var(--rdx-line); color: var(--rdx-ink-2); } .rdx-skill-tags--outline .rdx-hashtag:hover { border-color: var(--rdx-primary); color: var(--rdx-primary); background: transparent; } /* ---------- ریپیتر: تاریخ و سطح ---------- */ .rdx-rep-date { cursor: pointer; background-image: none; } .rdx-rep-date::placeholder { color: var(--rdx-ink-3); } .rdx-rep-level, .rdx-repeater__row select { min-height: 42px; border: 1.5px solid var(--rdx-line); border-radius: var(--rdx-radius-sm); padding: 8px 12px; background: var(--rdx-bg); font-family: inherit; font-size: 13px; color: var(--rdx-ink); } /* ---------- تقویم شمسی ---------- */ .rdx-jcal { position: absolute; z-index: 9999; width: 260px; background: var(--rdx-bg); border: 1px solid var(--rdx-line); border-radius: 14px; box-shadow: 0 22px 50px -18px rgba(28,25,23,.3); padding: 12px; font-family: inherit; } .rdx-jcal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .rdx-jcal__nav b { font-size: 14px; } .rdx-jcal__nav button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--rdx-line); background: var(--rdx-bg); cursor: pointer; color: var(--rdx-ink-2); font-size: 15px; line-height: 1; } .rdx-jcal__nav button:hover { border-color: var(--rdx-primary); color: var(--rdx-primary); } .rdx-jcal__months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .rdx-jcal__months button { border: 1px solid var(--rdx-line); background: var(--rdx-bg); border-radius: 9px; padding: 8px 4px; font-size: 11.5px; cursor: pointer; font-family: inherit; color: var(--rdx-ink-2); } .rdx-jcal__months button:hover { border-color: var(--rdx-primary); color: var(--rdx-primary); background: var(--rdx-primary-soft); } .rdx-jcal__foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rdx-line); } .rdx-jcal__foot button { flex: 1; border: 0; background: var(--rdx-surface); border-radius: 8px; padding: 7px; font-size: 11px; cursor: pointer; font-family: inherit; color: var(--rdx-ink-2); } .rdx-jcal__foot button:hover { background: var(--rdx-primary-soft); color: var(--rdx-primary); } .rdx-jcal__only { flex: 1 0 100% !important; background: var(--rdx-primary-soft) !important; color: var(--rdx-primary) !important; font-weight: 700; } /* ---------- مودال آپلود ---------- */ .rdx-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(28,25,23,.55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 18px; animation: rdxFade .15s var(--rdx-ease); } @keyframes rdxFade { from { opacity: 0; } to { opacity: 1; } } .rdx-modal__box { background: var(--rdx-bg); border-radius: 20px; padding: 24px; width: min(420px, 100%); box-shadow: 0 30px 70px -25px rgba(0,0,0,.5); position: relative; } .rdx-modal__box h3 { font-size: 16px; margin: 0 0 14px; } .rdx-modal__x { position: absolute; top: 14px; left: 14px; width: 30px; height: 30px; border: 0; background: var(--rdx-surface); border-radius: 50%; cursor: pointer; color: var(--rdx-ink-3); font-size: 13px; } .rdx-modal__x:hover { background: var(--rdx-line); color: var(--rdx-ink); } .rdx-modal__spec { background: var(--rdx-primary-soft); color: var(--rdx-primary); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px; } .rdx-modal__note { font-size: 12px; color: var(--rdx-ink-3); margin: 0 0 6px; line-height: 1.8; } .rdx-modal__drop { border: 2px dashed var(--rdx-line); border-radius: 14px; padding: 26px 14px; text-align: center; font-size: 12.5px; color: var(--rdx-ink-3); cursor: pointer; margin: 14px 0; transition: border-color .15s var(--rdx-ease), background .15s var(--rdx-ease); } .rdx-modal__drop:hover, .rdx-modal__drop.is-over { border-color: var(--rdx-primary); background: var(--rdx-primary-soft); color: var(--rdx-primary); } .rdx-modal__actions { display: flex; gap: 8px; } .rdx-modal__actions .rdx-btn { flex: 1; justify-content: center; } /* ---------- دکمه ارسال دیدگاه (input نمی‌تواند فرزند داشته باشد) ---------- */ .comment-form input[type="submit"], .rdx-comments__form input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px; border: 0; cursor: pointer; background: var(--rdx-primary); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700; border-radius: 999px; box-shadow: var(--rdx-shadow-sm); transition: background .15s var(--rdx-ease), transform .12s var(--rdx-ease); width: auto; } .comment-form input[type="submit"]:hover { background: var(--rdx-primary-hover); transform: translateY(-1px); } .comment-form .form-submit { margin: 12px 0 0; } .rdx-comment__ava { display: block; flex-shrink: 0; line-height: 0; } .rdx-comment__ava img { border-radius: 50%; object-fit: cover; } /* ---------- پیش‌نمایش آپلود نمونه‌کار (ضدکش، بدون شکست) ---------- */ .rdx-upwidget__list { display: flex !important; flex-wrap: wrap !important; gap: 10px; margin-top: 10px; align-items: flex-start; } .rdx-upitem { position: relative; width: 96px !important; flex: 0 0 96px !important; max-width: 96px !important; overflow: visible; } .rdx-upitem__thumb { display: grid !important; place-items: center; width: 96px !important; height: 72px !important; border-radius: 10px; overflow: hidden !important; background: var(--rdx-surface); border: 1px solid var(--rdx-line); } .rdx-upitem__thumb img, .rdx-upitem__thumb video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; max-width: none !important; max-height: none !important; } .rdx-upitem__x { position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; z-index: 2; border: 0; border-radius: 50%; background: rgba(28,25,23,.8); color: #fff; cursor: pointer; font-size: 10px; line-height: 1; display: grid; place-items: center; box-shadow: var(--rdx-shadow-sm); } .rdx-upitem__bar { display: block; height: 4px; background: var(--rdx-line); border-radius: 99px; margin-top: 5px; overflow: hidden; } .rdx-upitem__bar span { display: block; height: 100%; width: 0; background: var(--rdx-primary); transition: width .2s linear; } .rdx-upitem__pct { display: block; font-size: 10px; color: var(--rdx-ink-3); text-align: center; margin-top: 3px; font-weight: 400; } .rdx-upitem.is-done .rdx-upitem__bar { display: none; } .rdx-upitem.is-done .rdx-upitem__pct { color: #047857; } /* محافظ: هر رسانه سرگردان مستقیم داخل ویجت (کش قدیمی) پنهان بماند */ .rdx-upwidget > img, .rdx-upwidget > video, .rdx-upwidget__list > img, .rdx-upwidget__list > video { display: none !important; } /* v0.23 — تقویم: راهنما و «هنوز ادامه دارد» */ .rdx-jcal__hint { display: block; font-size: 11px; color: var(--rdx-primary); margin-bottom: 6px; text-align: center; } .rdx-jcal__current { background: var(--rdx-primary) !important; color: #fff !important; font-weight: 700; } .rdx-repeater__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rdx-repeater__row > input, .rdx-repeater__row > select { flex: 1 1 140px; min-width: 0; } .rdx-rep-sel { min-height: 42px; border: 1.5px solid var(--rdx-line); border-radius: var(--rdx-radius-sm); padding: 8px 12px; background: var(--rdx-bg); font-family: inherit; font-size: 13px; color: var(--rdx-ink); } .rdx-rep-date { cursor: pointer; background: var(--rdx-bg); } .rdx-qv__ava { display: block; flex-shrink: 0; line-height: 0; } .rdx-qv__ava img, .rdx-qv__comment img { border-radius: 50%; object-fit: cover; } .rdx-qv__comment a b { color: var(--rdx-ink); } .rdx-qv__comment a:hover b { color: var(--rdx-primary); } .rdx-qv__pending { display: block; font-size: 11px; color: var(--rdx-ink-3); margin: 4px 0 8px; } /* ========================================================= v0.24 — بازبینی جامع ریسپانسیو اپلیکیشنی (Kar Star) ========================================================= */ /* ---------- اکسپلور: تک‌ستونه اینستاگرامی در موبایل ---------- */ @media (max-width: 620px) { .rdx-explore-grid { columns: auto !important; column-gap: 0; display: grid; grid-template-columns: 1fr; gap: 14px; } .rdx-explore-grid .rdx-card { margin-bottom: 0; border-radius: var(--rdx-radius); } .rdx-explore-grid .rdx-card__media { aspect-ratio: 1 / 1; } .rdx-explore-grid .rdx-card__media img { width: 100%; height: 100%; object-fit: cover; } } /* ---------- اکشن‌های پروفایل: چیدمان درست موبایل ---------- */ @media (max-width: 720px) { .rdx-profile__actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: stretch; } /* دکمه اصلی (دنبال‌کردن / پیام / ویرایش) کنار آیکن‌ها، نه دوخطی */ .rdx-profile__actions .rdx-btn--primary, .rdx-profile__actions .rdx-btn--soft, .rdx-profile__actions .rdx-follow-btn { flex: 1 1 auto; min-width: 0; justify-content: center; min-height: 46px; white-space: nowrap; padding-inline: 14px; } /* متن دکمه هیچ‌وقت دوخطی نشود */ .rdx-profile__actions .rdx-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* دکمه‌های آیکنی (اشتراک، دانلود رزومه) اندازه ثابت کنار دکمه اصلی */ .rdx-profile__actions .rdx-btn--icon { flex: 0 0 46px; min-height: 46px; min-width: 46px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } } /* ---------- دکمه‌ها: هدف لمسی استاندارد ۴۴px ---------- */ @media (max-width: 720px) { .rdx-btn { min-height: 44px; } .rdx-btn--xs { min-height: 38px; } .rdx-btn--icon { min-height: 44px; min-width: 44px; padding: 10px; } .rdx-btn svg { flex-shrink: 0; } .rdx-btn span { white-space: nowrap; } input, select, textarea { font-size: 16px !important; } /* جلوگیری از زوم iOS */ .rdx-tagfield__input { font-size: 16px !important; } } /* ---------- تقویم شمسی: شیت پایین در موبایل ---------- */ .rdx-jcal--sheet { position: fixed !important; inset: auto 0 0 0 !important; top: auto !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; border-radius: 18px 18px 0 0 !important; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -12px 40px -12px rgba(0,0,0,.3) !important; animation: rdxSheetUp .22s var(--rdx-ease); z-index: 10001 !important; } @keyframes rdxSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .rdx-jcal--sheet .rdx-jcal__grid--month { grid-template-columns: repeat(4, 1fr); } .rdx-jcal--sheet .rdx-jcal__grid--year { grid-template-columns: repeat(4, 1fr); } .rdx-jcal--sheet .rdx-jcal__cell { padding: 13px 6px; font-size: 13px; } /* ساختار داخلی تقویم (مشترک) */ .rdx-jcal__year { flex: 1; margin-inline: 8px; border: 0; background: var(--rdx-surface); border-radius: 9px; padding: 8px; font: 700 14px inherit; font-family: inherit; cursor: pointer; color: var(--rdx-ink); } .rdx-jcal__year:hover { background: var(--rdx-primary-soft); color: var(--rdx-primary); } .rdx-jcal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .rdx-jcal__cell { border: 1px solid var(--rdx-line); background: var(--rdx-bg); border-radius: 9px; padding: 9px 4px; font-size: 12px; cursor: pointer; font-family: inherit; color: var(--rdx-ink-2); } .rdx-jcal__cell:hover { border-color: var(--rdx-primary); color: var(--rdx-primary); background: var(--rdx-primary-soft); } .rdx-jcal__cell.is-active { background: var(--rdx-primary); color: #fff; border-color: var(--rdx-primary); } .rdx-jcal__arrow { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--rdx-line); background: var(--rdx-bg); cursor: pointer; color: var(--rdx-ink-2); font-size: 17px; line-height: 1; flex-shrink: 0; } .rdx-jcal__arrow:hover { border-color: var(--rdx-primary); color: var(--rdx-primary); } /* ---------- ری‌فلو کارت‌های فریلنسر ---------- */ @media (max-width: 560px) { .rdx-freelancer-grid { grid-template-columns: 1fr; } .rdx-frow__id { width: 100%; } .rdx-project-gallery { grid-template-columns: 1fr !important; } } /* ---------- کوییک‌ویو: تمام‌صفحه در موبایل ---------- */ @media (max-width: 760px) { .rdx-modal__panel, .rdx-qv { grid-template-columns: 1fr !important; } .rdx-qv__media { max-height: 44vh; } .rdx-qv__media img { width: 100%; height: 100%; object-fit: cover; } .rdx-qv__side { max-height: none; overflow: visible; } } /* ---------- تنظیمات تایپوگرافی اپلیکیشنی ---------- */ @media (max-width: 720px) { .rdx-profile__bio { font-size: 14px; } .rdx-section__title { font-size: 19px; } h1 { font-size: 22px; } h2 { font-size: 18px; } } /* ---------- اصلاح ته‌نشینی محتوا پشت نوار پایین ---------- */ @media (max-width: 900px) { .rdx-main { padding-bottom: calc(var(--rdx-mobile-nav-h) + env(safe-area-inset-bottom) + 20px); } .rdx-jcal:not(.rdx-jcal--sheet) { max-width: calc(100vw - 16px); } } /* ---------- حالت PWA standalone: هدر امن‌تر ---------- */ @media (display-mode: standalone) { .rdx-header { padding-top: max(env(safe-area-inset-top), 8px); } .rdx-mobile-nav { padding-bottom: env(safe-area-inset-bottom); } .rdx-profile__cover { margin-top: 0; } } /* ========================================================= v0.24 — اکسپلور Dribbble-style: سرچ، pills، presets ========================================================= */ .rdx-explore__top { text-align: center; margin-bottom: 22px; } .rdx-explore__sub { color: var(--rdx-ink-3); font-size: 14px; margin-top: 6px; } /* سرچ پیشرفته */ .rdx-search { display: flex; gap: 10px; max-width: 720px; margin: 0 auto 16px; } .rdx-search__box { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--rdx-bg); border: 1.5px solid var(--rdx-line); border-radius: 999px; padding: 0 16px; transition: border-color .15s var(--rdx-ease), box-shadow .15s var(--rdx-ease); } .rdx-search__box:focus-within { border-color: var(--rdx-primary); box-shadow: 0 0 0 4px var(--rdx-primary-soft); } .rdx-search__box svg { color: var(--rdx-ink-3); flex-shrink: 0; } .rdx-search__box input { flex: 1; border: 0 !important; outline: 0; background: transparent; padding: 13px 0 !important; font-size: 14px !important; font-family: inherit; min-height: 0 !important; } .rdx-search__box input:focus { box-shadow: none !important; } .rdx-search__clear { border: 0; background: var(--rdx-surface); color: var(--rdx-ink-3); cursor: pointer; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; flex-shrink: 0; } .rdx-search__clear:hover { background: var(--rdx-line); color: var(--rdx-ink); } .rdx-search__sort select { height: 100%; min-height: 48px; border: 1.5px solid var(--rdx-line); border-radius: 999px; padding: 0 16px; background: var(--rdx-bg); font-family: inherit; font-size: 13px; color: var(--rdx-ink); cursor: pointer; } /* جست‌وجوهای پیشنهادی */ .rdx-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center; margin-bottom: 20px; } .rdx-presets__label { font-size: 12px; color: var(--rdx-ink-3); } .rdx-presets__chip { background: var(--rdx-bg); border: 1px solid var(--rdx-line); color: var(--rdx-ink-2); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; text-decoration: none; transition: all .13s var(--rdx-ease); } .rdx-presets__chip:hover { border-color: var(--rdx-primary); color: var(--rdx-primary); background: var(--rdx-primary-soft); } /* pills دسته‌بندی — بازطراحی تمیز (بدون تداخل زیرخط) */ .rdx-cats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; border: 0 !important; } .rdx-cats__pill { border: 1.5px solid var(--rdx-line) !important; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 700; color: var(--rdx-ink-2); text-decoration: none; background: var(--rdx-bg); transition: all .13s var(--rdx-ease); white-space: nowrap; line-height: 1; } .rdx-cats__pill:hover { border-color: var(--rdx-primary) !important; color: var(--rdx-primary); } .rdx-cats__pill.is-active { background: var(--rdx-primary); border-color: var(--rdx-primary) !important; color: #fff !important; } /* لود بی‌نهایت */ .rdx-infinite { text-align: center; padding: 24px 0 8px; min-height: 40px; } .rdx-infinite__spinner { display: inline-flex; align-items: center; gap: 8px; color: var(--rdx-ink-3); font-size: 13px; } /* [hidden] عادی از UA stylesheet ضعیف‌تر از این کلاس است؛ بدون این قانون، spinner.hidden=true هیچ‌وقت واقعاً مخفی نمی‌شود و انیمیشن لودینگ حتی بعد از تمام‌شدن لیست نشان داده می‌شود */ .rdx-infinite__spinner[hidden] { display: none; } .rdx-explore-grid.is-loading { opacity: .5; transition: opacity .2s; pointer-events: none; } @media (max-width: 620px) { .rdx-search { flex-direction: column; gap: 8px; } .rdx-search__sort select { width: 100%; } .rdx-cats { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; } .rdx-cats::-webkit-scrollbar { display: none; } .rdx-presets { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; } .rdx-presets::-webkit-scrollbar { display: none; } } /* v0.24 — Dropzone آپلود نمونه‌کار */ .rdx-dropzone { border: 2px dashed var(--rdx-line); border-radius: 14px; padding: 28px 18px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--rdx-ink-3); background: var(--rdx-surface); transition: border-color .15s var(--rdx-ease), background .15s var(--rdx-ease); } .rdx-dropzone:hover, .rdx-dropzone.is-over { border-color: var(--rdx-primary); background: var(--rdx-primary-soft); color: var(--rdx-primary); } .rdx-dropzone svg { color: var(--rdx-primary); } .rdx-dropzone b { font-size: 14px; color: var(--rdx-ink); } .rdx-dropzone span { font-size: 12px; } .rdx-upwidget__list:not(:empty) { margin-top: 12px; } /* وقتی فایلی آپلود شد، dropzone فشرده شود (single) */ .rdx-upwidget[data-single="1"] .rdx-upwidget__list:not(:empty) + input + .rdx-dropzone, .rdx-upwidget[data-single="1"] .rdx-dropzone { } /* v0.24 — input موبایل OTP */ .rdx-phone-input, .rdx-code-input { width: 100%; box-sizing: border-box; text-align: center; letter-spacing: 8px; font-size: 22px !important; font-weight: 700; direction: ltr; min-height: 56px; } .rdx-phone-input { letter-spacing: 4px; } .rdx-phone-input.is-valid { border-color: #10B981 !important; } .rdx-phone-input.is-valid:focus { box-shadow: 0 0 0 3px rgba(16,185,129,.15) !important; } .rdx-phone-input.is-invalid { border-color: #EF4444 !important; } .rdx-phone-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important; } .rdx-otp__role input:checked + span { color: var(--rdx-primary); font-weight: 700; } /* v0.25 — دکمه سرچ اکسپلور + فیلترهای فریلنسرها */ .rdx-search__btn { flex-shrink: 0; min-height: 48px; padding-inline: 22px; border-radius: 999px; } .rdx-search__btn span { white-space: nowrap; } .rdx-search--freelancers { max-width: 720px; margin: 0 auto 14px; } .rdx-ffilters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 720px; margin: 0 auto 18px; align-items: center; } .rdx-ffilters select { min-height: 46px; border: 1.5px solid var(--rdx-line); border-radius: 12px; padding: 0 14px; background: var(--rdx-bg); font-family: inherit; font-size: 13px; color: var(--rdx-ink); cursor: pointer; flex: 1; min-width: 160px; } .rdx-ffilters select:disabled { opacity: .55; cursor: not-allowed; } .rdx-ffilters .rdx-btn { flex-shrink: 0; } .rdx-frow-list { display: grid; gap: 14px; } @media (max-width: 620px) { .rdx-search--freelancers { flex-direction: column; } .rdx-search__btn { width: 100%; } .rdx-ffilters { flex-direction: column; } .rdx-ffilters select { width: 100%; } } /* پاک‌سازی پیل‌های قدیمی rdx-tabs--pills در جاهای دیگر (تداخل زیرخط) */ .rdx-tabs--pills { border-bottom: 0 !important; } .rdx-tabs--pills a { border-bottom: 1px solid var(--rdx-line) !important; } .rdx-tabs--pills a.is-active { color: #fff !important; border-color: var(--rdx-primary) !important; } /* v0.26 — استوری: نشانگر مکث هنگام نگه‌داشتن */ .rdx-story-viewer.is-paused .rdx-story-viewer__head, .rdx-story-viewer.is-paused .rdx-story-viewer__bars { opacity: .3; transition: opacity .2s; } .rdx-story-viewer.is-paused::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 60%, rgba(0,0,0,.25)); } /* v0.29 — Breadcrumb سئو */ .rdx-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--rdx-ink-3); margin-bottom: 16px; } .rdx-breadcrumb a { color: var(--rdx-ink-2); text-decoration: none; } .rdx-breadcrumb a:hover { color: var(--rdx-primary); } .rdx-breadcrumb span { color: var(--rdx-ink-3); } /* v0.29 — بخش لینک‌های سئو (شهرها/مهارت‌های محبوب) */ .rdx-seo-links { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rdx-line); display: grid; gap: 24px; } .rdx-seo-links__group h2 { font-size: 16px; margin: 0 0 12px; color: var(--rdx-ink); } .rdx-seo-links__list { display: flex; flex-wrap: wrap; gap: 8px; } .rdx-seo-links__list a { background: var(--rdx-surface); border: 1px solid var(--rdx-line); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; color: var(--rdx-ink-2); text-decoration: none; transition: all .13s var(--rdx-ease); } .rdx-seo-links__list a:hover { border-color: var(--rdx-primary); color: var(--rdx-primary); background: var(--rdx-primary-soft); } /* ========================================================= v0.32 — تجربه اپلیکیشنی: اسپلش، Safe Area، اسکلت لودینگ ========================================================= */ /* ---------- اسپلش هنگام اجرا (فقط PWA نصب‌شده، نه تب مرورگر معمولی) ---------- */ #rdx-splash { display: none; position: fixed; inset: 0; z-index: 999; background: var(--rdx-bg); place-items: center; gap: 16px; animation: rdxFade .2s var(--rdx-ease, ease); } html.rdx-standalone #rdx-splash { display: grid; } @media (display-mode: standalone), (display-mode: fullscreen) { #rdx-splash { display: grid; } } #rdx-splash img { border-radius: 22%; box-shadow: var(--rdx-shadow-lg, var(--rdx-shadow)); } #rdx-splash .rdx-logo__text { font: 700 22px var(--rdx-font-display); color: var(--rdx-ink); } #rdx-splash .rdx-spinner { width: 22px; height: 22px; margin: 0; border-width: 2.5px; } #rdx-splash.is-leaving { opacity: 0; pointer-events: none; transition: opacity .25s var(--rdx-ease, ease); } /* ---------- Safe Area برای حالت Standalone/نصب‌شده ---------- */ html.rdx-standalone .rdx-header { padding-top: env(safe-area-inset-top); } html.rdx-standalone .rdx-container { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); } /* ---------- اسکلت لودینگ (Shimmer) — پشت هر عکس تا بارگذاری کامل شود ---------- */ @keyframes rdxShimmer { 0% { background-position: -150% 0; } 100% { background-position: 250% 0; } } .rdx-card__media, .rdx-card__placeholder, .rdx-fcard__cover, .rdx-profile__cover, .rdx-skel { background-image: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--rdx-ink) 8%, transparent) 50%, transparent 65%); background-size: 200% 100%; background-repeat: no-repeat; animation: rdxShimmer 1.7s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .rdx-card__media, .rdx-card__placeholder, .rdx-fcard__cover, .rdx-profile__cover, .rdx-skel { animation: none; } } /* بلوک‌های اسکلت عمومی (کارت‌های placeholder هنگام اولین لود گرید ایجکسی) */ .rdx-skel { display: block; border-radius: var(--rdx-radius-sm); background-color: var(--rdx-surface); } .rdx-skel--text { height: 12px; border-radius: 6px; } .rdx-skel--title { height: 16px; width: 60%; border-radius: 6px; } .rdx-skel--avatar { border-radius: 50%; } .rdx-skel-card { background: var(--rdx-bg); border: 1px solid var(--rdx-line); border-radius: var(--rdx-radius); overflow: hidden; } .rdx-skel-card__media { aspect-ratio: 4/3; } .rdx-skel-card__body { padding: 12px 14px; display: grid; gap: 8px; } /* ========================================================= v0.33 — گذار نرم بین صفحات (View Transitions، بدون JS/روتر) مرورگرهایی که پشتیبانی نمی‌کنند، همان ناوبری معمولی را انجام می‌دهند — بدون خطا و بدون نیاز به تشخیص ویژگی. ========================================================= */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root) { animation: rdxViewOut .22s var(--rdx-ease, ease) both; } ::view-transition-new(root) { animation: rdxViewIn .28s var(--rdx-ease, ease) both; } @keyframes rdxViewOut { to { opacity: 0; transform: translateY(-6px); } } @keyframes rdxViewIn { from { opacity: 0; transform: translateY(6px); } } } /* ---------- Pull To Refresh ---------- */ .rdx-ptr { position: fixed; top: 0; inset-inline: 0; z-index: 200; display: flex; justify-content: center; padding-top: calc(10px + env(safe-area-inset-top)); transform: translateY(-100%); pointer-events: none; } .rdx-ptr__spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--rdx-line); border-top-color: var(--rdx-primary); background: var(--rdx-bg); box-shadow: var(--rdx-shadow); transition: transform .15s var(--rdx-ease, ease); } .rdx-ptr.is-ready .rdx-ptr__spin { transform: rotate(180deg); } .rdx-ptr.is-loading .rdx-ptr__spin { animation: rdxSpin .6s linear infinite; }