@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap'); :root { --ink: #10131b; --panel: #171b27; --panel-2: #1e2333; --border: #2a3044; --text: #eef1f7; --text-dim: #8b92a8; --major: #fb8c00; --minor: #8e24aa; --bull: #26d99b; --bear: #f0506a; --radius: 14px; } /* --- حالت روز (لایت) - با گذاشتن data-theme="light" روی فعال می‌شود --- */ :root[data-theme="light"] { --ink: #f3f5f9; --panel: #ffffff; --panel-2: #f1f3f8; --border: #dde1ea; --text: #161925; --text-dim: #656d80; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ink); color: var(--text); font-family: 'Vazirmatn', system-ui, sans-serif; direction: rtl; font-variant-numeric: tabular-nums; transition: background-color .2s ease, color .2s ease; } body { background-image: radial-gradient(circle at 12% 8%, rgba(251, 140, 0, 0.10), transparent 40%), radial-gradient(circle at 88% 18%, rgba(142, 36, 170, 0.12), transparent 40%); background-attachment: fixed; } a { color: inherit; text-decoration: none; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* --- نوار بالا ------------------------------------------------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; } .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bull); box-shadow: 0 0 10px var(--bull); } .nav-links { display: flex; align-items: center; gap: 22px; font-size: .92rem; color: var(--text-dim); } .nav-links a:hover { color: var(--text); } /* --- دکمه‌ی تغییر حالت روز/شب --------------------------------------- */ .theme-toggle { background: var(--panel); border: 1px solid var(--border); color: var(--text); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; line-height: 1; } .theme-toggle:hover { border-color: var(--text-dim); } /* --- منوی آبشاری حساب کاربری ------------------------------------------ */ .account-menu { position: relative; } .account-btn { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 7px 14px; font-size: .9rem; cursor: pointer; font-family: inherit; } .account-btn:hover { border-color: var(--text-dim); } .account-btn .caret { font-size: .7rem; color: var(--text-dim); transition: transform .15s ease; } .account-menu.open .account-btn .caret { transform: rotate(180deg); } .account-dropdown { position: absolute; inset-inline-start: 0; top: calc(100% + 8px); min-width: 230px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.25); overflow: hidden; z-index: 60; display: none; } .account-menu.open .account-dropdown { display: block; } .account-dropdown .info-row { padding: 12px 16px; font-size: .84rem; color: var(--text-dim); border-bottom: 1px solid var(--border); background: var(--panel-2); } .account-dropdown a { display: block; padding: 12px 16px; font-size: .88rem; color: var(--text); } .account-dropdown a:hover { background: var(--panel-2); } .account-dropdown a:not(:last-child) { border-bottom: 1px solid var(--border); } /* --- دکمه‌ها ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 1px solid transparent; cursor: pointer; } .btn-primary { background: linear-gradient(135deg, var(--major), #ffb545); color: #16110a; } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--text-dim); } /* --- هیرو ---------------------------------------------------------------*/ .hero { padding: 72px 0 40px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } .eyebrow { color: var(--text-dim); font-size: .88rem; margin-bottom: 14px; } .hero h1 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.32; margin: 0 0 18px; font-weight: 800; } .hero h1 .accent { color: var(--major); } .hero p.lead { color: var(--text-dim); font-size: 1.05rem; line-height: 1.9; max-width: 46ch; margin: 0 0 30px; } .hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; } .fib-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .fib-card .cap { color: var(--text-dim); font-size: .82rem; margin-bottom: 6px; } .fib-card .sym { font-weight: 700; font-size: 1.1rem; margin-bottom: 14px; display:flex; align-items:center; gap:8px;} .fib-card .sym .badge-up { color: var(--bull); } /* --- بخش آمار ------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 30px 0 10px; } .stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .stat .num { font-size: 1.7rem; font-weight: 800; } .stat .label { color: var(--text-dim); font-size: .85rem; margin-top: 4px; } /* --- ویژگی‌ها ------------------------------------------------------- */ .features { padding: 60px 0; } .section-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; } .section-sub { color: var(--text-dim); margin-bottom: 32px; max-width: 60ch; line-height: 1.8; } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feature { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .feature .icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 1.1rem; } .feature h3 { margin: 0 0 8px; font-size: 1rem; } .feature p { margin: 0; color: var(--text-dim); font-size: .89rem; line-height: 1.8; } /* --- فوتر / CTA پایانی --------------------------------------------- */ .closing { text-align: center; padding: 70px 0 90px; } .closing h2 { font-size: 1.7rem; margin-bottom: 14px; } .closing p { color: var(--text-dim); margin-bottom: 26px; } footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--text-dim); font-size: .84rem; text-align: center; } /* ============================================================ داشبورد زنده ============================================================ */ .dash-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; flex-wrap: wrap; gap: 12px; } .live-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px; font-size: .85rem; color: var(--text-dim); } .live-pill .blip { width: 8px; height: 8px; border-radius: 50%; background: var(--bull); animation: pulse 1.6s infinite; } @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } } .dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 30px; } /* --- نوار فیلتر داشبورد -------------------------------------------- */ .filter-bar { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 28px; } .filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 140px; } .filter-field label { font-size: .78rem; color: var(--text-dim); } .filter-field select { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-family: inherit; font-size: .88rem; } .filter-reset { padding: 9px 18px; font-size: .85rem; } .chart-btn { margin-top: 14px; width: 100%; justify-content: center; padding: 9px 14px; font-size: .84rem; } .chart-btn-sm { padding: 5px 10px; font-size: .8rem; } /* --- مودال چارت و جزئیات سیگنال ------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(8,10,16,.72); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; } .modal-backdrop[hidden] { display: none; } .modal-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; padding: 26px; position: relative; } .modal-close { position: absolute; inset-inline-end: 16px; top: 16px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: .9rem; } .modal-head { margin-bottom: 16px; padding-inline-end: 40px; } .modal-symbol { font-size: 1.2rem; font-weight: 800; } .modal-sub { color: var(--text-dim); font-size: .88rem; margin-top: 4px; } .modal-chart-wrap { position: relative; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; min-height: 180px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 18px; } .modal-chart-wrap img { width: 100%; display: none; } .modal-chart-loading { color: var(--text-dim); font-size: .85rem; padding: 40px 0; } .modal-details { display: flex; flex-direction: column; gap: 8px; font-size: .87rem; } .modal-details .detail-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); } .modal-details .k { color: var(--text-dim); } .modal-details .v { font-weight: 600; } .modal-details .detail-row.tp .v { color: var(--bull); font-weight: 700; } .modal-details .detail-row.sl .v { color: var(--bear); font-weight: 700; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 40px; } .signal-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; } .signal-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; } .signal-card.dir-up::before { background: var(--bull); } .signal-card.dir-down::before { background: var(--bear); } .sc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .sc-symbol { font-weight: 800; font-size: 1.05rem; } .sc-kind { font-size: .74rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); } .sc-dir { font-size: .8rem; font-weight: 700; margin-bottom: 12px; } .sc-dir.up { color: var(--bull); } .sc-dir.down { color: var(--bear); } .sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: .84rem; } .sc-grid .k { color: var(--text-dim); } .sc-grid .v { font-weight: 600; } .sc-grid .v.tp-v { color: var(--bull); font-weight: 700; } .sc-grid .v.sl-v { color: var(--bear); font-weight: 700; } .sc-tf { color: var(--text-dim); font-size: .78rem; margin-top: 12px; } .empty-state { text-align: center; padding: 50px 20px; color: var(--text-dim); border: 1px dashed var(--border); border-radius: var(--radius); } .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } table.results { width: 100%; border-collapse: collapse; font-size: .87rem; } table.results th, table.results td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; } table.results th { color: var(--text-dim); font-weight: 600; background: var(--panel-2); } table.results tr:last-child td { border-bottom: none; } .res-win { color: var(--bull); font-weight: 700; } .res-loss { color: var(--bear); font-weight: 700; } @media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr 1fr; } .stats, .dash-stats { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .feature-grid, .stats, .dash-stats { grid-template-columns: 1fr; } }