/* ========================================================= هدفهام — متغیرهای پایه‌ی طراحی (رنگ، فاصله، سایه) این‌ها به‌صورت CSS Variable تعریف شدن تا هرجای فایل بشه ازشون استفاده کرد و با تغییر یه‌جا، کل اپ آپدیت بشه. ========================================================= */ :root{ --primary: #6C4FE0; --primary-2: #8B6FF0; --primary-dark: #4C34AE; --primary-soft: #F1ECFF; --primary-soft-2: #E6DEFF; --success: #26C48A; --success-soft: #E4F9F1; --warning: #FF9F43; --warning-soft: #FFF3E4; --danger: #FF6B6B; --danger-soft: #FFE9E9; --gold: #E8AC3E; --gold-2: #C98A1E; --bg: #F6F4FC; --surface: #FFFFFF; --text: #221D35; --text-muted:#666181; --text-faint:#B7B3CC; --border: #EDEAFB; --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 11px; --shadow-sm: 0 2px 10px rgba(76, 52, 174, .06); --shadow-md: 0 10px 30px rgba(76, 52, 174, .10); --shadow-btn: 0 8px 20px rgba(108, 79, 224, .35); } /* نسخه‌ی حالت تاریک همون متغیرها — با data-theme="dark" روی فعال می‌شه */ [data-theme="dark"]{ --bg: #16121F; --surface: #1F1A2E; --text: #F1EEFA; --text-muted:#9C97B8; --text-faint:#8F8BA7; --border: #2C2640; --primary-soft: #2A2247; --primary-soft-2:#332A57; --success-soft:#173029; --warning-soft:#332615; --danger-soft:#331B22; --shadow-sm: 0 2px 10px rgba(0,0,0,.25); --shadow-md: 0 10px 30px rgba(0,0,0,.35); } *{ box-sizing:border-box; } html,body{ height:100%; } body{ font-family:"Vazirmatn", sans-serif; background: var(--bg); color: var(--text); direction: rtl; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; } /* ========================================================= قاب اصلی اپ — کل صفحه رو پر می‌کنه، بدون فریم موبایلِ ساختگی. روی صفحه‌های عریض (دسکتاپ) عرضش محدود می‌مونه تا فرم موبایلی حفظ بشه. ========================================================= */ .app-backdrop{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:44px 20px; background: radial-gradient(circle at 14% 18%, #E9E2FF 0%, transparent 45%), radial-gradient(circle at 86% 82%, #DCF3EA 0%, transparent 42%), var(--bg); } /* روی موبایل واقعی، اپ کل صفحه رو بدون فریم پر می‌کنه (طبق درخواست قبلی). روی دسکتاپ/تبلت، همون محتوا رو داخل یه موکاپِ گوشیِ شیک نشون می‌دیم تا صفحه‌ی خالی و کِش‌اومده نباشه و بلافاصله معلوم باشه اپِ موبایله. */ .phone{ position:relative; width:100%; max-width:420px; height:860px; max-height:90vh; background:var(--surface); border-radius:44px; box-shadow: 0 30px 70px rgba(40, 20, 90, .28), 0 0 0 10px #0E0B17, 0 0 0 12px #2b2540; overflow:hidden; display:flex; flex-direction:column; } /* نوچ بالای گوشی — با ::before ساخته شده، پس نیازی به تغییر در HTML نداشت */ .phone::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:26px; background:#0E0B17; border-radius:0 0 18px 18px; z-index:50; } /* روی موبایل واقعی: فریم/سایه/نوچ حذف بشه و اپ کل صفحه رو پر کنه */ @media (max-width: 480px){ .app-backdrop{ padding:0; background:var(--bg); } .phone{ width:100%; height:100dvh; max-height:none; border-radius:0; box-shadow:none; } .phone::before{ display:none; } } /* ========================================================= پشته‌ی صفحات — همه‌ی ۱۷ صفحه‌ی اپ روی هم قرار می‌گیرن و فقط اونی که کلاس active داره دیده می‌شه (بقیه opacity:0 و pointer-events:none هستن). جابه‌جایی با تابع goTo() در app.js انجام می‌شه. ========================================================= */ .screens{ position:relative; flex:1; overflow:hidden; } .screen{ position:absolute; inset:0; display:flex; flex-direction:column; opacity:0; visibility:hidden; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease; pointer-events:none; } .screen.active{ opacity:1; visibility:visible; transform:none; pointer-events:auto; } .screen-body{ flex:1; overflow-y:auto; padding: 20px 20px 18px; } .screen-body::-webkit-scrollbar{ width:0; } .screen-header{ padding: 20px 20px 10px; flex-shrink:0; } .screen-header .top-row{ display:flex; align-items:center; justify-content:space-between; } .icon-btn{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--primary-soft); color:var(--primary); border:none; font-size:17px; flex-shrink:0; } .icon-btn.ghost{ background:transparent; color:var(--text); } .icon-btn.on-dark{ background:rgba(255,255,255,.18); color:#fff; } /* ========================================================= منوی پایین — روی همه‌ی صفحات به‌جز لاگین/OTP نمایش داده می‌شه. محتواش رو تابع buildNav در app.js با جاوااسکریپت پر می‌کنه. ========================================================= */ .bottom-nav{ flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding: 8px 22px calc(env(safe-area-inset-bottom, 0px) + 10px); background:color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-top:1px solid var(--border); position:relative; z-index:10; } .nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none; color:var(--text-faint); font-size:10.5px; font-family:inherit; font-weight:500; padding:4px 6px; } .nav-item i{ font-size:19px; } .nav-item.active{ color:var(--primary); } .nav-fab{ width:44px; height:44px; border-radius:50%; background:linear-gradient(145deg, var(--primary-2), var(--primary)); color:#fff; border:none; display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow: var(--shadow-btn); flex-shrink:0; } /* ========================================================= دکمه‌ها — چند سبک آماده: بنفشِ اصلی، بنفشِ کم‌رنگ، طلایی (پرمیوم)، شبکه‌های اجتماعی ========================================================= */ .btn-brand{ background:linear-gradient(135deg, var(--primary-2), var(--primary-dark)); color:#fff; border:none; border-radius:16px; padding:14px; font-weight:700; font-size:15px; box-shadow: var(--shadow-btn); } .btn-brand:active{ transform:translateY(1px); } .btn-outline-soft{ background:var(--primary-soft); color:var(--primary); border:none; border-radius:16px; padding:13px; font-weight:700; font-size:14px; } .btn-gold{ background:linear-gradient(135deg, #F3C765, var(--gold-2)); color:#3B2405; border:none; border-radius:16px; padding:14px; font-weight:800; font-size:15px; box-shadow: 0 10px 24px rgba(201,138,30,.35); } .btn-social{ display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:14px; padding:11px; font-weight:600; font-size:13.5px; } /* ========================================================= کارت‌ها و اجزای عمومی — کارت‌های سفید، آمار کوچیک، تراشه‌ها، نوار پیشرفت، ردیف‌های لیست، فرم‌ها و غیره؛ در بیشتر صفحات استفاده می‌شن ========================================================= */ .card-surface{ background:var(--surface); border-radius:var(--r-lg); box-shadow: var(--shadow-sm); border:1px solid var(--border); } .stat-pill{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 10px; text-align:center; } .stat-pill .val{ font-size:16px; font-weight:800; } .stat-pill .lbl{ font-size:11px; color:var(--text-muted); margin-top:2px; } .chip{ display:inline-flex; align-items:center; padding:7px 16px; border-radius:20px; font-size:12.5px; font-weight:700; background:var(--primary-soft); color:var(--primary); border:none; white-space:nowrap; } .chip.active{ background:var(--primary); color:#fff; } .progress-thin{ height:6px; border-radius:6px; background:var(--border); overflow:hidden; } .progress-thin > span{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, var(--primary-2), var(--primary)); } .task-row{ display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:13px; margin-bottom:10px; } .task-icon{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; } .avatar-ring{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--primary-2), var(--primary)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; } .section-title{ font-size:14px; font-weight:800; margin: 18px 0 10px; } .list-tile{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); cursor:pointer; border-radius:var(--r-md); padding:13px 14px; margin-bottom:9px; } .list-tile .tile-icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--primary-soft); color:var(--primary); font-size:15px; } .list-tile .chev{ color:var(--text-faint); font-size:13px; } .form-control, .form-select{ background:var(--bg) !important; border:1px solid var(--border); border-radius:14px; padding:12px 14px; font-size:14px; color:var(--text) !important; } .form-control:focus, .form-select:focus{ background:var(--bg) !important; color:var(--text) !important; border-color:var(--primary-2); box-shadow:0 0 0 3px var(--primary-soft); } .form-control::placeholder, textarea::placeholder{ color:var(--text-faint) !important; opacity:1; } /* بوتسترپ رنگِ ثابتِ خودشو برای .text-muted داره که به تمِ ما (روشن/تاریک) گوش نمی‌ده — همینه که خیلی‌جاها (مثلِ درباره‌ی ما) توی حالتِ دارک ناخوانا بود */ .text-muted{ color:var(--text-muted) !important; } .form-label{ font-size:12.5px; font-weight:700; color:var(--text-muted); margin-bottom:6px; } /* هر کدوم از ۴ باکسِ ورود کد پیامکی */ .otp-box{ width:52px; height:58px; text-align:center; font-size:22px; font-weight:800; padding:0; } .form-check-input:checked{ background-color:var(--primary); border-color:var(--primary); } /* سوییچ روشن/خاموش (برای تنظیمات مثل اعلان‌ها) */ .toggle{ width:44px; height:26px; border-radius:20px; background:var(--border); position:relative; border:none; flex-shrink:0; } .toggle::after{ content:""; position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; } .toggle.on{ background:var(--primary); } .toggle.on::after{ transform:translateX(-18px); } /* دایره‌ی نمایش/تنظیم زمان پومودورو */ .dial-wrap{ position:relative; width:230px; height:230px; margin:14px auto; } .dial-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); } .dial-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .dial-center .num{ font-size:40px; font-weight:800; line-height:1; } .dial-center .lbl{ font-size:12px; color:var(--text-muted); margin-top:6px; } .stepper{ display:flex; align-items:center; gap:10px; } .stepper button{ width:28px; height:28px; border-radius:50%; background:var(--primary-soft); color:var(--primary); border:none; font-weight:700; } /* صفحه‌ی جلسه‌ی فعال پومودورو (هدر بنفش تمام‌صفحه) */ .session-hero{ background:linear-gradient(160deg, #7C5CF0, #4C34AE 65%); background-size:180% 180%; animation: heroGradient 12s ease infinite; color:#fff; flex:1; display:flex; flex-direction:column; position:relative; overflow:hidden; } @keyframes heroGradient{ 0%{ background-position:0% 30%; } 50%{ background-position:100% 70%; } 100%{ background-position:0% 30%; } } .orb{ position:absolute; border-radius:50%; filter:blur(30px); opacity:.35; pointer-events:none; z-index:0; } .orb-1{ width:180px; height:180px; background:#B29CFF; top:-40px; right:-40px; animation:orbFloat1 9s ease-in-out infinite; } .orb-2{ width:140px; height:140px; background:#FFD08A; bottom:60px; left:-30px; animation:orbFloat2 11s ease-in-out infinite; } .orb-3{ width:110px; height:110px; background:#7CE0C8; bottom:-30px; right:40px; animation:orbFloat1 13s ease-in-out infinite reverse; } @keyframes orbFloat1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-16px,18px) scale(1.12); } } @keyframes orbFloat2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(14px,-14px) scale(1.08); } } .session-hero .screen-header, .session-hero .screen-body{ position:relative; z-index:2; } .break-hero{ background:linear-gradient(160deg, #35C495, #1E8F6B 65%); color:#fff; flex:1; display:flex; flex-direction:column; } .big-ring{ width:250px; height:250px; margin:20px auto; position:relative; transition: width .3s ease, height .3s ease; } .big-ring svg{ width:100%; height:100%; transform:rotate(-90deg); } .big-ring .center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .big-ring .time{ font-size:42px; font-weight:800; } .big-ring .of{ font-size:12.5px; opacity:.85; margin-top:4px; } /* حالت فوکوس — عناصر کم‌اهمیت مخفی می‌شن، فقط تایمر بزرگ می‌مونه */ .session-hero.focus-active .session-hide-focus{ display:none !important; } .session-hero.focus-active .big-ring{ width:280px; height:280px; margin-top:40px; } .session-hero.focus-active #exitFocusBtn{ display:block !important; } .session-hero.focus-active .orb{ opacity:.55; } /* ردیف انتخاب صدای محیطی (نویز سفید، باران، کافه، ...) */ .sound-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px; scrollbar-width:none; } .sound-row::-webkit-scrollbar{ display:none; } .sound-chip{ flex-shrink:0; display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff; border-radius:14px; padding:8px 12px; font-size:11.5px; font-weight:700; backdrop-filter: blur(4px); } .sound-chip.active{ background:#fff; color:var(--primary-dark); border-color:#fff; } .sound-chip .eq{ display:inline-flex; align-items:flex-end; gap:1.5px; height:10px; } .sound-chip .eq i{ width:2px; background:currentColor; border-radius:1px; animation:eqBar 0.9s ease-in-out infinite; opacity:.5; } .sound-chip.active .eq i{ opacity:1; } .sound-chip .eq i:nth-child(1){ height:4px; animation-delay:0s; } .sound-chip .eq i:nth-child(2){ height:9px; animation-delay:.2s; } .sound-chip .eq i:nth-child(3){ height:6px; animation-delay:.4s; } .sound-chip:not(.playing) .eq i{ animation-play-state:paused; } @keyframes eqBar{ 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1.4); } } .pill-btn-light{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:16px; padding:12px; font-weight:700; font-size:13.5px; backdrop-filter: blur(4px); } /* حباب‌های چت دستیار هوش مصنوعی */ .chat-bubble{ max-width:80%; padding:11px 14px; border-radius:16px; font-size:13.5px; line-height:1.9; margin-bottom:10px; } .chat-bubble.bot{ background:var(--primary-soft); color:var(--text); border-bottom-right-radius:4px; align-self:flex-start; } .chat-bubble.user{ background:var(--primary); color:#fff; border-bottom-left-radius:4px; align-self:flex-end; margin-inline-start:auto; } .chat-suggest{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px 13px; font-size:12.5px; font-weight:600; color:var(--primary); margin-bottom:8px; } /* گرید تقویم شمسی (نمای ماه) */ .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center; } .cal-grid .dow{ font-size:11px; color:var(--text-muted); font-weight:700; padding-bottom:4px; } .cal-day{ aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:12px; font-size:12.5px; font-weight:600; color:var(--text); border:none; background:transparent; position:relative; transition: background .15s ease, transform .12s ease; } .cal-day:active{ transform:scale(.92); } .cal-day.muted{ color:var(--text-faint); } .cal-day.today{ box-shadow:inset 0 0 0 1.5px var(--primary); color:var(--primary); font-weight:800; } .cal-day.selected{ background:var(--primary); color:#fff; font-weight:800; box-shadow:0 6px 14px rgba(108,79,224,.35); } .cal-day.selected.today{ box-shadow:0 6px 14px rgba(108,79,224,.35); } .cal-day-dots{ display:flex; align-items:center; gap:2px; height:6px; } .cal-dot{ width:4.5px; height:4.5px; border-radius:50%; flex-shrink:0; } .cal-dot-goal{ width:8px; height:4.5px; border-radius:3px; } .cal-day-more{ font-size:8px; font-weight:800; color:var(--text-faint); } .cal-day.selected .cal-day-more{ color:rgba(255,255,255,.85); } /* دکمه‌ی عنوان بالای تقویم (برای باز کردن پرش ۱۰ساله) */ .cal-title-btn{ border:none; background:none; display:flex; align-items:center; gap:5px; font-weight:800; font-size:14.5px; color:var(--text); } /* تب سوییچِ لغزشیِ نمای روز/هفته/ماه/آجندا */ .cal-view-switch{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); background:var(--primary-soft); border-radius:14px; padding:4px; margin-top:10px; } .cal-view-indicator{ position:absolute; top:4px; bottom:4px; left:4px; width:calc(25% - 4px); background:var(--surface); border-radius:10px; box-shadow: var(--shadow-sm); transition: left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1); z-index:0; } .cal-view-tab{ position:relative; z-index:1; border:none; background:none; padding:8px 4px; font-size:12px; font-weight:700; color:var(--text-muted); font-family:inherit; transition: color .2s ease; } .cal-view-tab.active{ color:var(--primary); } /* پنل‌های هر نما + انیمیشن ورود */ .cal-view-pane{ animation: calFadeIn .25s ease; } @keyframes calFadeIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } .cal-nav-row{ display:flex; align-items:center; justify-content:space-between; margin: 12px 0 10px; } .cal-nav-row .cal-nav-label{ font-size:12.5px; font-weight:700; color:var(--text-muted); text-align:center; flex:1; } #calDayDetail{ animation: calFadeIn .3s ease; } /* ردیف هدرِ ۷ روزه‌ی نمای هفته */ .cal-week-headers{ display:grid; grid-template-columns:44px repeat(7,1fr); text-align:center; margin-bottom:6px; } .cal-week-headers .wk-spacer{} .wk-day-btn{ border:none; background:none; padding:6px 2px; display:flex; flex-direction:column; align-items:center; gap:3px; border-radius:12px; } .wk-day-btn .wd-name{ font-size:10px; color:var(--text-muted); font-weight:700; } .wk-day-btn .wd-num{ font-size:13px; font-weight:800; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .wk-day-btn.today .wd-num{ box-shadow:inset 0 0 0 1.5px var(--primary); color:var(--primary); } .wk-day-btn.selected .wd-num{ background:var(--primary); color:#fff; } /* نوار رویدادهای تمام‌روز (بالای جدول ساعتی) */ .cal-allday-row{ display:grid; grid-template-columns:44px repeat(7,1fr); gap:2px; margin-bottom:6px; } .cal-allday-cell{ min-height:16px; display:flex; flex-direction:column; gap:2px; padding:0 2px; } .cal-allday-chip{ font-size:8.5px; font-weight:800; border-radius:4px; padding:1.5px 3px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* جدول ساعتی مشترک نمای روز و هفته */ .cal-timeline-scroll{ max-height:52vh; min-height:320px; overflow-y:auto; border-radius:14px; border:1px solid var(--border); background:var(--surface); } .cal-timeline-wrap{ display:flex; --hour-px: 56px; } .cal-hours-col{ width:44px; flex-shrink:0; position:relative; background-image: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px var(--hour-px)); } .cal-hour-label{ position:absolute; right:4px; transform:translateY(-50%); font-size:9.5px; color:var(--text-faint); font-weight:700; } .cal-days-cols{ flex:1; display:grid; position:relative; background-image: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px var(--hour-px)); } .cal-day-col{ position:relative; border-inline-start:1px solid var(--border); } .cal-event-block{ position:absolute; left:2px; right:2px; border-radius:8px; padding:3px 6px; font-size:10px; font-weight:700; color:#fff; overflow:hidden; box-shadow:0 3px 8px rgba(0,0,0,.12); cursor:pointer; transition: transform .12s ease; } .cal-event-block:active{ transform:scale(.97); } .cal-event-block .eb-time{ font-size:8.5px; font-weight:600; opacity:.9; display:block; } .cal-timeline-single .cal-event-block{ font-size:12px; padding:6px 10px; } .cal-timeline-single .cal-event-block .eb-time{ font-size:10px; } /* لیست خطیِ نمای آجندا */ .agenda-group-title{ font-size:12px; font-weight:800; color:var(--text-muted); margin: 16px 0 8px; display:flex; align-items:center; gap:8px; } .agenda-group-title .badge-today{ background:var(--primary); color:#fff; font-size:10px; font-weight:800; border-radius:6px; padding:1px 7px; } .agenda-item{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:11px 12px; margin-bottom:8px; border-inline-start:3px solid var(--primary); } .agenda-item .ai-icon{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; flex-shrink:0; } .agenda-type-badge{ font-size:9.5px; font-weight:800; padding:2px 7px; border-radius:6px; } /* ========================================================= گیمیفیکیشن — نوار XP، بج سطح، سکه، دستاوردها، نشان‌ها، چالش‌های روزانه/هفتگی، فروشگاه جوایز، جدول امتیازات ========================================================= */ .level-card{ background:linear-gradient(135deg, #7C5CF0, #4C34AE); border-radius:22px; padding:20px; color:#fff; box-shadow: var(--shadow-btn); } .level-badge{ width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg, #F3C765, var(--gold-2)); display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0; box-shadow:0 6px 14px rgba(0,0,0,.25); } .level-badge .lvl-lbl{ font-size:7px; font-weight:700; opacity:.85; margin-top:-2px; } .xp-bar-track{ height:9px; border-radius:6px; background:rgba(255,255,255,.22); overflow:hidden; margin-top:10px; } .xp-bar-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg, #FFD98A, #F3C765); width:0%; transition: width 1s cubic-bezier(.4,0,.2,1); } .coin-chip{ display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.18); border-radius:12px; padding:5px 11px; font-weight:800; font-size:12.5px; } .achv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .achv-tile{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:12px 6px; text-align:center; position:relative; } .achv-tile .achv-icon{ width:38px; height:38px; border-radius:12px; margin:0 auto 6px; display:flex; align-items:center; justify-content:center; font-size:16px; background:linear-gradient(135deg, var(--primary-2), var(--primary)); color:#fff; } .achv-tile.locked .achv-icon{ background:var(--border); color:var(--text-faint); } .achv-tile.locked{ opacity:.6; } .achv-tile .achv-lbl{ font-size:9.5px; font-weight:700; line-height:1.5; } .achv-tile .lock-badge{ position:absolute; top:6px; left:6px; font-size:9px; color:var(--text-faint); } .badge-row{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; } .badge-row::-webkit-scrollbar{ display:none; } .badge-circle{ flex-shrink:0; width:56px; text-align:center; } .badge-circle .bc-ico{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; margin-bottom:5px; } .badge-circle .bc-lbl{ font-size:9px; font-weight:700; color:var(--text-muted); } .challenge-row{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 14px; margin-bottom:9px; } .challenge-row .chal-ico{ width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--primary-soft); color:var(--primary); } .challenge-row.done .chal-ico{ background:var(--success-soft); color:var(--success); } .xp-reward{ font-size:10.5px; font-weight:800; color:var(--gold-2); background:#FFF4DD; border-radius:8px; padding:3px 8px; white-space:nowrap; } .reward-row{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; } .reward-row::-webkit-scrollbar{ display:none; } .reward-card{ flex-shrink:0; width:128px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:12px; text-align:center; } .reward-card .rc-ico{ font-size:22px; color:var(--primary); margin-bottom:6px; } .reward-card .rc-title{ font-size:11px; font-weight:700; min-height:30px; } .reward-card .rc-cost{ font-size:11px; font-weight:800; color:var(--gold-2); margin:6px 0; } .leader-row{ display:flex; align-items:center; gap:10px; padding:10px 6px; border-radius:12px; } .leader-row.me{ background:var(--primary-soft); } .leader-rank{ width:22px; text-align:center; font-weight:800; font-size:12.5px; color:var(--text-muted); } .leader-rank.top1{ color:var(--gold-2); } .leader-rank.top2{ color:#9AA0AE; } .leader-rank.top3{ color:#C98A5C; } /* ========================================================= دستیار هوش مصنوعی — تب سوییچِ ۳تایی (امروز/تحلیل/گفتگو)، کارت انگیزشیِ چرخشی، ردیف پیشنهادها، تحلیل اهداف ========================================================= */ .coach-tabs{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); background:var(--primary-soft); border-radius:14px; padding:4px; margin-top:10px; } .coach-indicator{ position:absolute; top:4px; bottom:4px; left:4px; width:calc(33.333% - 4px); background:var(--surface); border-radius:10px; box-shadow:var(--shadow-sm); transition:left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1); z-index:0; } .coach-tab{ position:relative; z-index:1; border:none; background:none; padding:8px 4px; font-size:12.5px; font-weight:700; color:var(--text-muted); font-family:inherit; transition:color .2s ease; } .coach-tab.active{ color:var(--primary); } .coach-pane{ animation: calFadeIn .25s ease; } .motivate-card{ background:linear-gradient(135deg, var(--primary-2), var(--primary-dark)); color:#fff; border-radius:20px; padding:18px; text-align:center; box-shadow: var(--shadow-btn); } .motivate-card .dots-pager span{ background:rgba(255,255,255,.35); } .motivate-card .dots-pager span.on{ background:#fff; } .coach-suggest-row{ display:flex; align-items:flex-start; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 14px; margin-bottom:9px; } .coach-suggest-row i{ color:var(--primary); font-size:16px; margin-top:2px; } .goal-analysis-row{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:13px 14px; margin-bottom:10px; } .spark-bar{ flex:1; background:linear-gradient(180deg, var(--primary-2), var(--primary)); border-radius:3px 3px 0 0; min-width:6px; } /* داشبورد گزارش‌ها: گیج‌های دایره‌ای + نمودارها */ .gauge-card{ position:relative; } .gauge-wrap{ position:relative; width:100%; height:64px; } .gauge-wrap canvas{ width:100% !important; height:100% !important; } .gauge-val{ position:absolute; left:0; right:0; bottom:2px; text-align:center; font-size:14px; font-weight:800; color:var(--text); } .chart-h-sm{ position:relative; height:150px; } .chart-h-md{ position:relative; height:190px; } .chart-donut-wrap{ position:relative; width:110px; height:110px; flex-shrink:0; } .cat-legend-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:11.5px; } .cat-legend-dot{ width:9px; height:9px; border-radius:3px; flex-shrink:0; } .cat-legend-row .lbl{ flex:1; color:var(--text); font-weight:600; } .cat-legend-row .pct{ font-weight:800; color:var(--text-muted); } /* ========================================================= دیت‌پیکر شمسی — پاپ‌آپ وسط صفحه، با دراپ‌داون سال (بازه‌ی ۱۰ ساله) و ماه ========================================================= */ .dp-overlay, .tp-overlay{ position:absolute; inset:0; z-index:200; background:rgba(20, 14, 40, .55); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .2s ease; } .dp-overlay.show, .tp-overlay.show{ opacity:1; visibility:visible; } .dp-sheet, .tp-sheet{ width:100%; max-width:330px; background:var(--surface); border-radius:24px; padding:20px 20px 16px; transform:scale(.92); transition:transform .2s ease; display:flex; flex-direction:column; box-shadow: var(--shadow-md); } .dp-overlay.show .dp-sheet, .tp-overlay.show .tp-sheet{ transform:scale(1); } .dp-title, .tp-title{ text-align:center; font-weight:800; font-size:15.5px; margin-bottom:16px; } .dp-header{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:14px; } .dp-select{ border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:12px; padding:8px 10px; font-family:inherit; font-weight:700; font-size:13px; text-align:center; } .dp-body{ overflow-y:auto; } .dp-body .cal-day{ cursor:pointer; } .dp-body .cal-day:active{ background:var(--primary-soft); } .dp-actions, .tp-actions{ display:flex; gap:8px; margin-top:16px; } .dp-actions .btn-brand, .tp-actions .btn-brand{ flex:1.3; padding:11px; font-size:13.5px; } .dp-actions .btn-outline-soft, .tp-actions .btn-outline-soft{ flex:1; padding:11px; font-size:13px; } /* ========================================================= پیکرِ ساعتِ چرخ‌دار (اسکرول عمودی) — دو ستونِ عدد (ساعت/دقیقه) که با اسکرول‌کردن، عددِ وسط (هایلایت‌شده) انتخاب می‌شه — طبقِ طرحِ مرجع ========================================================= */ .tp-wheels{ display:flex; align-items:center; justify-content:center; gap:14px; position:relative; margin-bottom:6px; direction:ltr; /* ساعت (اولین المان) چپ، دقیقه (آخرین المان) راست */ } .tp-wheel{ width:70px; height:150px; /* ۳ آیتمِ ۵۰پیکسلی نمایان */ overflow-y:scroll; scroll-snap-type:y mandatory; scrollbar-width:none; -ms-overflow-style:none; } .tp-wheel::-webkit-scrollbar{ display:none; } .tp-wheel-track{ padding:50px 0; } /* یه‌آیتم فاصله بالا/پایین تا اولین/آخرین عدد هم بتونه وسط بشینه */ .tp-wheel-item{ height:50px; line-height:50px; text-align:center; scroll-snap-align:center; font-size:17px; font-weight:700; color:var(--text-muted); transition:color .15s ease, font-size .15s ease; } .tp-wheel-item.tp-center{ color:var(--primary); font-size:24px; font-weight:800; } .tp-wheel-colon{ font-size:22px; font-weight:800; color:var(--text-muted); } .tp-wheel-highlight{ position:absolute; right:0; left:0; top:50%; height:50px; transform:translateY(-50%); background:var(--primary-soft); border-radius:12px; pointer-events:none; z-index:-1; } /* گوی کوچیک روی مسیر دایره‌ی پومودورو */ #pomoDialSvg{ touch-action:none; } #pomoKnob{ transition: none; } /* تصویر SVG صفحه‌ی خوش‌آمدگویی */ .hero-art{ width:100%; height:340px; border-radius:26px; background:linear-gradient(180deg, #FBF7EE 0%, var(--primary-soft) 100%); position:relative; overflow:hidden; margin-bottom:6px; } .dots-pager{ display:flex; gap:6px; justify-content:center; margin:14px 0; } .dots-pager span{ width:7px; height:7px; border-radius:50%; background:var(--border); } .dots-pager span.on{ width:20px; border-radius:5px; background:var(--primary); } .badge-soft{ font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:8px; } .badge-success{ background:var(--success-soft); color:var(--success); } .badge-warning{ background:var(--warning-soft); color:var(--warning); } .badge-gold{ background:#FFF4DD; color:var(--gold-2); } ::selection{ background:var(--primary-soft-2); } .dot{ width:6px; height:6px; border-radius:50%; display:inline-block; } /* کلاس‌های کمکی کوچیک */ .fw-800{ font-weight:800; } .text-primary-brand{ color:var(--primary); } .fs-11{ font-size:11px; } .fs-12{ font-size:12px; } .fs-13{ font-size:13px; } /* اسلایدرِ دایره‌ایِ درون‌خطی (۱ تا ۱۰۰) — برای انتخابِ تعدادِ پومودورو */ .circular-slider{ text-align:center; user-select:none; } .circular-slider .cs-svg{ touch-action:none; cursor:pointer; } .circular-slider .cs-handle{ cursor:grab; } .circular-slider .cs-value{ font-size:26px; font-weight:800; margin-top:-86px; margin-bottom:60px; color:var(--text); } .circular-slider .cs-label{ font-size:11px; color:var(--text-muted); margin-top:4px; } /* احترام به prefers-reduced-motion — کاربرهایی که تویِ سیستم‌عاملشون گفتن انیمیشن‌ها رو کمتر می‌خوان، همه‌ی ترنزیشن‌ها/انیمیشن‌های اپ باید غیرفعال بشن (طبقِ چک‌لیستِ استانداردِ دسترسی‌پذیری) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================= ویزاردِ استپ‌بای‌استپِ ساختِ هدف — دایره‌های شماره‌دار متصل به خط ========================================================= */ .wizard-steps{ display:flex; align-items:center; justify-content:center; margin-bottom:6px; } .wizard-step-item{ display:flex; align-items:center; } .wizard-step-circle{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:var(--surface); border:2px solid var(--border); color:var(--text-muted); transition: all .2s ease; flex-shrink:0; } .wizard-step-circle.current{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 0 0 4px var(--primary-soft); } .wizard-step-circle.done{ background:var(--success); border-color:var(--success); color:#fff; } .wizard-step-line{ width:22px; height:2px; background:var(--border); transition: background .2s ease; } .wizard-step-line.done{ background:var(--success); } /* سواچ‌های انتخابِ رنگ/آیکون — مشترک بینِ فرمِ هدف و فرمِ تسک */ .color-swatch{ width:34px; height:34px; border-radius:50%; cursor:pointer; display:block; border:3px solid transparent; transition:.15s; } .color-swatch:has(input:checked){ border-color:var(--text); transform:scale(1.1); } .icon-swatch{ width:44px; height:44px; border-radius:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--border); color:var(--text-muted); font-size:18px; } .icon-swatch:has(input:checked){ border-color:var(--primary); background:var(--primary-soft); color:var(--primary); } /* ========================================================= جشنِ ارتقاءِ سطح (Level Up) — کارتِ گرادیانی + کانفتیِ CSS-محض ========================================================= */ .levelup-overlay{ position:fixed; inset:0; z-index:200; background:rgba(10,8,20,.75); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:.25s ease; } .levelup-overlay.show{ opacity:1; visibility:visible; } .levelup-card{ width:88%; max-width:320px; border-radius:28px; padding:32px 24px; text-align:center; position:relative; overflow:hidden; background:linear-gradient(160deg,#3B2E7A 0%,#1F1740 100%); color:#fff; transform:scale(.85); transition:.3s cubic-bezier(.34,1.56,.64,1); } .levelup-overlay.show .levelup-card{ transform:scale(1); } .levelup-badge{ width:96px; height:96px; margin:0 auto 14px; border-radius:50%; background:radial-gradient(circle,#F3C765 0%,#C98A1E 100%); display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:900; color:#fff; box-shadow:0 0 0 8px rgba(243,199,101,.18); animation: levelupPop .5s cubic-bezier(.34,1.56,.64,1); } @keyframes levelupPop{ 0%{ transform:scale(0); } 70%{ transform:scale(1.15); } 100%{ transform:scale(1); } } .levelup-title{ font-size:22px; font-weight:800; margin-bottom:4px; } .levelup-sub{ font-size:13px; opacity:.85; margin-bottom:18px; } .levelup-rewards{ display:flex; justify-content:center; gap:16px; margin-bottom:20px; } .levelup-reward-chip{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; font-weight:700; } .confetti-piece{ position:absolute; top:-10px; width:8px; height:14px; opacity:.9; animation: confettiFall linear forwards; } @keyframes confettiFall{ to{ transform: translateY(420px) rotate(540deg); opacity:0; } } @media (prefers-reduced-motion: reduce) { .levelup-badge{ animation:none; } .confetti-piece{ animation:none; display:none; } } /* ========================================================= منویِ کشویی (Hamburger Drawer) — از راست میاد بیرون (RTL) ========================================================= */ .drawer-overlay{ position:absolute; inset:0; z-index:150; background:rgba(10,8,20,.55); opacity:0; visibility:hidden; transition:.25s ease; } .drawer-overlay.show{ opacity:1; visibility:visible; } .side-drawer{ position:absolute; top:0; bottom:0; right:0; z-index:151; width:78%; max-width:280px; background:var(--surface); padding:20px 16px; transform:translateX(100%); transition:transform .3s cubic-bezier(.25,.9,.35,1); overflow-y:auto; box-shadow:-8px 0 24px rgba(0,0,0,.15); } .side-drawer.show{ transform:translateX(0); } .drawer-link{ display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:12px; font-size:13px; font-weight:700; color:var(--text); text-decoration:none; margin-bottom:2px; transition: background .15s ease; } .drawer-link:hover, .drawer-link:focus{ background:var(--bg); color:var(--text); } .drawer-link-icon{ width:32px; height:32px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; } .drawer-profile-card{ display:flex; align-items:center; gap:10px; background:linear-gradient(135deg, var(--primary-soft), var(--surface)); border:1px solid var(--border); border-radius:16px; padding:12px; margin-bottom:16px; } .drawer-section-label{ font-size:10px; font-weight:800; color:var(--text-faint); text-transform:uppercase; letter-spacing:.5px; margin:14px 8px 6px; } .drawer-section-label:first-of-type{ margin-top:0; } /* ========================================================= پاپ‌آپِ کوچیکِ «احسنت!» — برای تکمیلِ معمولیِ تسک/پومودورو (نه Level Up) ========================================================= */ .xptoast-overlay{ position:fixed; inset:0; z-index:199; background:rgba(10,8,20,.55); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:.2s ease; } .xptoast-overlay.show{ opacity:1; visibility:visible; } .xptoast-card{ width:80%; max-width:280px; border-radius:24px; padding:28px 20px; text-align:center; background:var(--surface); transform:scale(.85); transition:.3s cubic-bezier(.34,1.56,.64,1); } .xptoast-overlay.show .xptoast-card{ transform:scale(1); } .xptoast-star{ width:76px; height:76px; margin:0 auto 12px; border-radius:50%; background:var(--primary-soft); display:flex; align-items:center; justify-content:center; font-size:32px; color:var(--primary); animation: levelupPop .4s cubic-bezier(.34,1.56,.64,1); } .xptoast-title{ font-size:16px; font-weight:800; margin-bottom:14px; color:var(--text); } .xptoast-rewards{ display:flex; justify-content:center; gap:20px; margin-bottom:18px; } .xptoast-reward-chip{ font-size:13px; font-weight:800; color:var(--text); } /* بخش‌های تاشو (برای دسترسیِ سریعِ درصدِ پیشرفت زیرِ هر تسک/هدف) */ .chevron-icon{ transition:transform .2s ease; color:var(--text-muted); } .chevron-icon.open{ transform:rotate(180deg); } .collapsible-body{ display:none; } .collapsible-body.open{ display:block; } /* ========================================================= آیکونِ راهنما — دکمه‌ی «؟» کوچیک که با کلیک، توضیح رو نشون می‌ده (نه Hover، چون روی موبایل کار نمی‌کنه) ========================================================= */ .help-icon-wrap{ position:relative; display:inline-block; margin-right:4px; } .help-icon-btn{ width:16px; height:16px; border-radius:50%; background:var(--border); color:var(--text-muted); border:none; font-size:10px; font-weight:800; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; vertical-align:middle; } .help-bubble{ display:none; position:absolute; top:22px; right:-8px; z-index:60; width:200px; max-width:60vw; background:var(--text); color:var(--surface); font-size:11px; font-weight:500; line-height:1.7; padding:9px 11px; border-radius:12px; box-shadow:var(--shadow-md); } .help-bubble.show{ display:block; } .counter-btn{ width:48px; height:48px; border-radius:50%; background:var(--primary-soft); color:var(--primary); border:none; font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; transition: background .15s ease, transform .1s ease; } .counter-btn:hover{ background:var(--primary); color:#fff; } .counter-btn:active{ transform:scale(0.92); } .counter-btn:disabled{ opacity:.4; } /* Toastِ پاداش — بعدِ تیک‌زدنِ تسک/عادت یا رسیدنِ پیشرفت به ۱۰۰٪ نشون داده می‌شه */ .reward-toast{ position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:60; width:calc(100% - 32px); max-width:340px; display:flex; align-items:center; gap:10px; background:linear-gradient(145deg, var(--primary-2), var(--primary)); color:#fff; border-radius:16px; padding:12px 14px; box-shadow:0 10px 30px rgba(109,76,255,.35); cursor:pointer; animation: reward-toast-in .3s ease; } .reward-toast-icon{ width:36px; height:36px; border-radius:50%; flex-shrink:0; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:17px; } @keyframes reward-toast-in{ from{ opacity:0; transform:translateX(-50%) translateY(-14px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } } /* .chip-active اینجا اضافه شد چون توی نسخه‌ی Razorِ اصلی این کلاس فقط توی