/* ============================== Theme tokens (global) Light default ============================== */ :root { --bg: #f8fafc; --panel: #ffffff; --panel-2: #f1f5f9; --border: rgba(15, 23, 42, 0.08); --shadow: 0 10px 30px rgba(15, 23, 42, 0.04); --text: #0f172a; --muted: #64748b; --brand: #2563eb; --brand-soft: rgba(37, 99, 235, 0.12); --brand-soft-2: rgba(37, 99, 235, 0.08); --good: #16a34a; --bad: #dc2626; --warn: #d97706; --quote-up: #2563eb; --quote-down: #dc2626; --btn-bg: #ffffff; --btn-border: rgba(15, 23, 42, 0.12); --table-head: #f8fafc; } /* ============================== Dark theme Toggle by adding: data-theme="dark" on ============================== */ html[data-theme="dark"] { --bg: #0b1220; --panel: #0f172a; --panel-2: #111c33; --border: rgba(148, 163, 184, 0.14); --shadow: 0 18px 60px rgba(0, 0, 0, 0.35); --text: #e5e7eb; --muted: #94a3b8; --brand: #60a5fa; --brand-soft: rgba(96, 165, 250, 0.18); --brand-soft-2: rgba(96, 165, 250, 0.12); --good: #22c55e; --bad: #ef4444; --warn: #f59e0b; --quote-up: #0477f3; --quote-down: #f75959; --btn-bg: rgba(255, 255, 255, 0.06); --btn-border: rgba(148, 163, 184, 0.18); --table-head: rgba(255, 255, 255, 0.04); } /* Smooth theme transitions */ * { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } html, body { height: 100%; } body{ margin: 0; background: var(--bg); color: var(--text); } * { box-sizing: border-box; margin: 0; padding: 0; } :root { --radius: 14px; --radius-pill: 999px; --shadow: 0 12px 30px rgba(15, 23, 42, 0.08); } html, body { height: 100%; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.4; } .hidden { display: none !important; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } html, body { background: var(--bg); color: var(--text); } /* ---- MT5-like modal ---- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); z-index: 1000; } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(980px, calc(100vw - 28px)); background: rgba(15,23,42,.96); border: 1px solid rgba(148,163,184,.20); border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.55); z-index: 1001; } .modal-hd{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background: rgba(2,6,23,.60); border-bottom:1px solid rgba(148,163,184,.16); } .modal-title{ font-weight:700; letter-spacing:.2px; } .modal-x{ border:1px solid rgba(148,163,184,.18); background: rgba(2,6,23,.55); color:#e2e8f0; width:34px; height:34px; border-radius:10px; cursor:pointer; } .modal-x:hover{ border-color: rgba(148,163,184,.35); } .modal-bd{ padding:14px; } .order-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:12px; } @media (max-width: 900px){ .order-grid{ grid-template-columns:1fr; } } .order-left .mini-chart{ height: 420px; border-radius: 12px; border:1px solid rgba(148,163,184,.16); background: rgba(2,6,23,.45); position:relative; overflow:hidden; } .mini-chart-title{ position:absolute; top:10px; left:10px; font-weight:700; } .mini-chart-sub{ position:absolute; bottom:10px; left:10px; font-size:12px; color:#94a3b8; } .order-right .form-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; } .order-right label{ width: 92px; color:#94a3b8; font-size:12px; } .order-right input, .order-right select{ width: 100%; } .order-right .split{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; align-items:start; } .order-right .split-item label{ width:auto; display:block; margin-bottom:6px; } .volume-wrap{ display:flex; gap:8px; align-items:center; width:100%; } .btn.vol{ width:42px; padding:9px 0; } .big-price{ text-align:center; font-size:44px; padding:16px 10px; border-radius: 12px; border:1px solid rgba(148,163,184,.16); background: rgba(2,6,23,.45); letter-spacing: .6px; margin: 12px 0; } .action-row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; } .wide{ padding:14px 12px; font-weight:700; } .mt5{ height:100vh; display:grid; grid-template-columns: 320px 1fr; grid-template-rows: 56px 1fr 260px; grid-template-areas: "topbar topbar" "left main" "terminal terminal"; background:#070b12; } .topbar{ grid-area:topbar; display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid rgba(148,163,184,.16); background:rgba(2,6,23,.70); } .top-left{ display:flex; align-items:center; gap:10px; } .brand{ font-weight:700; } .top-controls{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .leftdock{ grid-area:left; display:flex; flex-direction:column; gap:10px; padding:10px; border-right:1px solid rgba(148,163,184,.16); background:rgba(2,6,23,.35); min-width:300px; } .dockcard{ background:rgba(15,23,42,.92); border:1px solid rgba(148,163,184,.16); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; min-height:0; } .dockcard:last-child{ flex:1; } /* navigator fills remaining height */ .dockhd{ padding:10px 12px; background:rgba(2,6,23,.55); border-bottom:1px solid rgba(148,163,184,.16); display:flex; justify-content:space-between; align-items:center; gap:10px; } .dockbd{ padding:10px 12px; overflow:auto; min-height:0; } .docktitle{ font-weight:700; } .main{ grid-area:main; padding:10px; min-width:0; min-height:0; } .chartwrap{ height:100%; background:rgba(15,23,42,.92); border:1px solid rgba(148,163,184,.16); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; min-height:0; } .charthd{ padding:10px 12px; background:rgba(2,6,23,.55); border-bottom:1px solid rgba(148,163,184,.16); display:flex; justify-content:space-between; align-items:center; gap:10px; } .chart{ flex:1; min-height:0; } .terminal{ grid-area:terminal; border-top:1px solid rgba(148,163,184,.16); background:rgba(2,6,23,.55); display:flex; flex-direction:column; min-height:0; } .tabs{ display:flex; gap:6px; padding:8px 10px; border-bottom:1px solid rgba(148,163,184,.16); } .tab{ border:1px solid rgba(148,163,184,.16); background:rgba(15,23,42,.65); color:#e2e8f0; padding:8px 10px; border-radius:10px; cursor:pointer; font-size:13px; } .tab.active{ background: rgba(56,189,248,.18); border-color: rgba(56,189,248,.35); } .tabpane{ display:none; padding:10px; overflow:auto; min-height:0; } .tabpane.show{ display:block; } .tablewrap{ margin-top:10px; border:1px solid rgba(148,163,184,.16); border-radius:12px; overflow:auto; background:rgba(2,6,23,.45); } .navlinks{ display:flex; flex-direction:column; gap:8px; } .navlink{ text-decoration:none; color:#e2e8f0; padding:10px 10px; border-radius:10px; border:1px solid rgba(148,163,184,.12); background:rgba(2,6,23,.35); } .navlink:hover{ border-color: rgba(148,163,184,.30); } .ctl{ background:rgba(2,6,23,.55); border:1px solid rgba(148,163,184,.16); color:#e2e8f0; padding:8px 10px; border-radius:12px; } .mini{ width:110px; } :root{ --hiw-border: rgba(148,163,184,.14); --hiw-panel: rgba(2,6,23,.55); --hiw-panel2: rgba(15,23,42,.45); --hiw-text: #e2e8f0; --hiw-muted: #94a3b8; --hiw-accent: rgba(56,189,248,.55); --hiw-accent2: rgba(34,197,94,.35); --hiw-radius: 18px; } .hiw-hero{ padding: 26px 0 8px; } .hiw-hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items: start; } @media (max-width: 980px){ .hiw-hero-grid{ grid-template-columns: 1fr; } } .hiw-title{ font-size: clamp(28px, 4vw, 44px); line-height: 1.05; margin: 0 0 10px; color: var(--hiw-text); letter-spacing: -.3px; } .hiw-sub{ color: var(--hiw-muted); max-width: 60ch; margin: 0 0 16px; font-size: 15px; line-height: 1.55; } .hiw-card{ background: var(--hiw-panel); border: 1px solid var(--hiw-border); border-radius: var(--hiw-radius); box-shadow: 0 18px 60px rgba(0,0,0,.45); backdrop-filter: blur(12px); } .hiw-hero-cta{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 12px; } .hiw-pillbox{ padding: 14px; } .hiw-pillbox h3{ margin: 0 0 10px; font-size: 14px; color: var(--hiw-text); letter-spacing: .2px; } .hiw-pills{ display:flex; flex-wrap:wrap; gap:8px; } .hiw-pill{ padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(148,163,184,.18); background: rgba(2,6,23,.45); color: var(--hiw-text); font-size: 12px; opacity:.95; } /* Step tabs */ .hiw-stepsbar{ position: sticky; top: 64px; /* matches your mega nav height vibe */ z-index: 20; margin: 14px 0 18px; border: 1px solid var(--hiw-border); background: rgba(2,6,23,.55); border-radius: 999px; padding: 6px; backdrop-filter: blur(10px); } .hiw-steps{ display:flex; gap: 6px; } .hiw-stepbtn{ flex:1; display:flex; align-items:center; justify-content:center; gap:10px; height: 40px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--hiw-text); text-decoration:none; font-weight: 800; font-size: 13px; opacity:.8; } .hiw-stepbtn .n{ width: 22px; height: 22px; border-radius: 999px; display:grid; place-items:center; font-size: 12px; border: 1px solid rgba(148,163,184,.22); background: rgba(2,6,23,.35); opacity:.95; } .hiw-stepbtn.active{ opacity: 1; border-color: rgba(56,189,248,.28); background: linear-gradient(180deg, rgba(56,189,248,.20), rgba(56,189,248,.06)); } /* Sections */ .hiw-section{ padding: 18px 0; border-top: 1px solid rgba(148,163,184,.10); } .hiw-h2{ margin: 0 0 6px; color: var(--hiw-text); font-size: 20px; letter-spacing: -.2px; } .hiw-desc{ margin: 0 0 14px; color: var(--hiw-muted); line-height: 1.55; font-size: 14px; max-width: 80ch; } .hiw-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; } .col-4{ grid-column: span 4; } .col-6{ grid-column: span 6; } .col-8{ grid-column: span 8; } .col-12{ grid-column: span 12; } @media (max-width: 980px){ .col-4,.col-6,.col-8{ grid-column: span 12; } } .hiw-box{ padding: 14px; border-radius: 16px; border: 1px solid rgba(148,163,184,.16); background: rgba(15,23,42,.35); } .hiw-box h4{ margin: 0 0 6px; color: var(--hiw-text); font-size: 14px; } .hiw-box p{ margin: 0; color: var(--hiw-muted); font-size: 13px; line-height: 1.5; } .hiw-list{ margin: 10px 0 0; padding: 0 0 0 18px; color: var(--hiw-muted); font-size: 13px; line-height: 1.55; } .hiw-list li{ margin: 6px 0; } /* Phases table */ .hiw-tablewrap{ overflow:auto; border-radius: 16px; border: 1px solid rgba(148,163,184,.14); background: rgba(2,6,23,.35); } table.hiw-table{ width: 100%; border-collapse: collapse; min-width: 760px; } .hiw-table th, .hiw-table td{ padding: 12px 12px; border-bottom: 1px solid rgba(148,163,184,.10); text-align:left; font-size: 13px; color: var(--hiw-text); vertical-align: top; } .hiw-table th{ font-size: 12px; color: var(--hiw-muted); font-weight: 800; letter-spacing: .25px; background: rgba(15,23,42,.35); } .hiw-badge{ display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(148,163,184,.18); background: rgba(2,6,23,.45); color: var(--hiw-text); font-weight: 800; font-size: 12px; white-space: nowrap; } .hiw-dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(56,189,248,.9); box-shadow: 0 0 0 4px rgba(56,189,248,.12); } .hiw-dot.green{ background: rgba(34,197,94,.95); box-shadow: 0 0 0 4px rgba(34,197,94,.12); } /* FAQ accordion */ .hiw-faq .q{ width: 100%; display:flex; justify-content: space-between; gap: 12px; align-items:center; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(148,163,184,.14); background: rgba(2,6,23,.40); color: var(--hiw-text); cursor:pointer; font-weight: 800; font-size: 13px; } .hiw-faq .a{ display:none; padding: 10px 14px 14px; color: var(--hiw-muted); font-size: 13px; line-height: 1.55; } .hiw-faq .item.open .a{ display:block; } .hiw-faq .chev{ opacity:.7; } /* CTA */ .hiw-cta{ margin-top: 18px; padding: 16px; display:flex; align-items:center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: linear-gradient(180deg, rgba(56,189,248,.12), rgba(2,6,23,.35)); border: 1px solid rgba(56,189,248,.22); } .hiw-cta strong{ color: var(--hiw-text); font-size: 14px; } .hiw-cta span{ color: var(--hiw-muted); font-size: 13px; display:block; margin-top:2px; } .toast{ position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: rgba(2, 6, 23, .92); border: 1px solid rgba(148, 163, 184, .22); color: #e2e8f0; padding: 10px 12px; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.45); max-width: 720px; width: calc(100% - 28px); font-size: 13px; line-height: 1.25; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 9999; } .toast.show{ opacity: 1; transform: translateX(-50%) translateY(-2px); } .toast.bad{ border-color: rgba(239, 68, 68, .45); } .toast.good{ border-color: rgba(34, 197, 94, .45); } .toast .t-title{ font-weight: 700; margin-bottom: 2px; } .toast .t-body{ color: rgba(226, 232, 240, .9); }