/* ============================================================ Hyper Tradex — THEME TOKENS Dark theme is default (matches product screenshots). Light theme activates via [data-theme="light"] on . ============================================================ */ :root{ /* ---- brand ---- */ /* ---- brand ---- */ --brand-green: #00a8e8; /* Cyan / Electric Blue (माध्यम टोन) */ --brand-green-bright: #38bdf8; /* Vibrant Cyan / Sky Blue (ब्राइट एरो टोन) */ --brand-green-dim: #0284c7; /* Darker Blue (डार्क शेड/होवर टोन) */ /* ---- accent palette (icon badges, categories) ---- */ --accent-green: #3daf93; --accent-blue: #3b82f6; --accent-purple: #a855f7; --accent-orange: #f59e0b; --accent-red: #ef4444; --accent-teal: #14b8a6; --accent-pink: #ec4899; /* ---- dark theme surface ---- */ --bg: #090a0d; --bg-elevated: #0d0f13; --sidebar-bg: #0a0b0f; --card-bg: #262d6015; --card-bg-soft: #0f1215; --card-border: rgba(255,255,255,0.07); --card-border-strong: rgba(255,255,255,0.12); --hairline: rgba(255,255,255,0.06); --text-primary: #f5f7f5; --text-secondary: #9aa39d; --text-tertiary: #6b756f; --text-on-brand: #06170c; --input-bg: rgba(255,255,255,0.04); --hover-bg: rgba(255,255,255,0.04); --active-bg: rgb(34 116 197 / 12%); --shadow-card: 0 1px 2px rgba(0,0,0,0.4); --shadow-pop: 0 8px 24px rgba(0,0,0,0.45); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 10px; --radius-pill: 999px; --font-display: 'Manrope', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', sans-serif; --up: #3daf93; --down: #ef4444; } html[data-theme="light"]{ --bg: #f2f5f2; --bg-elevated: #ffffff; --sidebar-bg: #ffffff; --card-bg: #ffffff; --card-bg-soft: #f7faf7; --card-border: rgba(15,23,20,0.08); --card-border-strong: rgba(15,23,20,0.14); --hairline: rgba(15,23,20,0.08); --text-primary: #0f1713; --text-secondary: #5b6660; --text-tertiary: #8a938e; --text-on-brand: #06170c; --input-bg: rgba(15,23,20,0.04); --hover-bg: rgba(15,23,20,0.04); --active-bg: rgb(34 146 197 / 12%); --shadow-card: 0 1px 2px rgba(15,23,20,0.06); --shadow-pop: 0 12px 28px rgba(15,23,20,0.12); } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; background:var(--bg); color:var(--text-primary); font-family:var(--font-body); font-size:14px; line-height:1.4; -webkit-font-smoothing:antialiased; transition:background .2s ease,color .2s ease; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3,h4{ margin:0; font-family:var(--font-display); } img{ max-width:100%; display:block; } ::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-thumb{ background:var(--card-border-strong); border-radius:8px; } ::-webkit-scrollbar-track{ background:transparent; } .up{ color:var(--up); } .down{ color:var(--down); } .ai-investment { display:flex; flex-direction:column; overflow:hidden; justify-content: space-between; gap:12px; } /* ---------- generic card ---------- */ .card{ background: linear-gradient(160deg, rgb(61 140 175 / 5%), transparent 45%), var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .card:hover{ border-color:var(--card-border-strong); box-shadow:0 10px 26px -10px rgba(0,0,0,0.5); } .card-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 10px 4px; } .card-head h3{ font-size:12px; font-weight:700; } .card-head .link{ font-size:12.5px; color:var(--text-secondary); font-weight:600; display:flex; align-items:center; gap:4px; } .card-head .link:hover{ color:var(--brand-green); } /* ---------- badges / pills ---------- */ .pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:700; } .pill-green{ background:rgba(34,197,94,0.14); color:#3daf93; } .pill-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; } /* ---------- icon badge ---------- */ .icon-badge{ width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .icon-badge svg{ width:35px; height:35px; } .ib-green{ background:linear-gradient(155deg,var(--accent-green),#237a63); box-shadow:0 6px 16px -6px rgba(61,175,147,.6); } .ib-blue{ background:linear-gradient(155deg,var(--accent-blue),#1d4ed8); box-shadow:0 6px 16px -6px rgba(59,130,246,.55); } .ib-purple{ background:linear-gradient(155deg,var(--accent-purple),#7e22ce); box-shadow:0 6px 16px -6px rgba(168,85,247,.55); } .ib-orange{ background:linear-gradient(155deg,var(--accent-orange),#c2760a); box-shadow:0 6px 16px -6px rgba(245,158,11,.55); } .ib-red{ background:linear-gradient(155deg,var(--accent-red),#b91c1c); box-shadow:0 6px 16px -6px rgba(239,68,68,.55); } .ib-teal{ background:linear-gradient(155deg,var(--accent-teal),#0d7a6e); box-shadow:0 6px 16px -6px rgba(20,184,166,.55); } .ib-pink{ background:linear-gradient(155deg,var(--accent-pink),#be185d); box-shadow:0 6px 16px -6px rgba(236,72,153,.55); } .ib-green,.ib-blue,.ib-purple,.ib-orange,.ib-red,.ib-teal,.ib-pink{ color:#fff; } .ib-soft{ opacity:1; } .icon-badge.soft{ background:transparent; } .icon-badge.soft.ib-green{ background:linear-gradient(155deg,var(--accent-green),#237a63); color: #fff; box-shadow:0 4px 12px -5px rgba(61,175,147,.6); } .icon-badge.soft.ib-blue{ background:linear-gradient(155deg,var(--accent-blue),#1d4ed8); color: #fff; box-shadow:0 4px 12px -5px rgba(59,130,246,.55); } .icon-badge.soft.ib-purple{ background:linear-gradient(155deg,var(--accent-purple),#7e22ce); color: #fff; box-shadow:0 4px 12px -5px rgba(168,85,247,.55); } .icon-badge.soft.ib-orange{ background:linear-gradient(155deg,var(--accent-orange),#c2760a); color: #fff; box-shadow:0 4px 12px -5px rgba(245,158,11,.55); } .icon-badge.soft.ib-red{ background:linear-gradient(155deg,var(--accent-red),#b91c1c); color: #fff; box-shadow:0 4px 12px -5px rgba(239,68,68,.55); } .icon-badge.soft.ib-teal{ background:linear-gradient(155deg,var(--accent-teal),#0d7a6e); color: #fff; box-shadow:0 4px 12px -5px rgba(20,184,166,.55); } /* ---------- buttons ---------- */ .btn{ border:1px solid var(--card-border-strong); background:var(--input-bg); color:var(--text-primary); padding:9px 16px; border-radius:10px; font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:all .15s ease; } .btn:hover{ background:var(--hover-bg); } .btn-primary{ background:linear-gradient(135deg,var(--brand-green-bright),var(--brand-green-dim)); border-color:var(--brand-green); color: #fff; box-shadow:0 6px 16px -6px rgba(61,175,147,.55); } .btn-primary:hover{ filter:brightness(1.08); transform:translateY(-1px); } .btn:not(.btn-primary):hover{ transform:translateY(-1px); } .btn-block{ width:100%; } /* ---------- theme toggle switch ---------- */ .theme-toggle{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--input-bg); border:1px solid var(--card-border); color:var(--text-secondary); } .theme-toggle:hover{ color:var(--brand-green); } .theme-toggle svg{ width:18px; height:18px; } [data-theme="light"] .icon-moon{ display:block; } [data-theme="light"] .icon-sun{ display:none; } html:not([data-theme="light"]) .icon-moon{ display:none; } html:not([data-theme="light"]) .icon-sun{ display:block; } /* ---------- progress bar ---------- */ .progress-track{ width:100%; height:8px; border-radius:99px; background:var(--input-bg); overflow:hidden; } .progress-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brand-green-dim),var(--brand-green-bright)); box-shadow:0 0 10px rgba(46,232,120,.45); transition:width .5s ease; } /* ---------- brand lockup ---------- */ .brand{ display:flex; align-items:center; gap:10px; justify-content: center; } .brand .logo-mark{ width:100px; height:60px; color:var(--brand-green); } .brand .logo-text{ line-height:1.1; } .brand .logo-text b{ display:block; font-family:var(--font-display); font-size:17px; font-weight:800; color:var(--brand-green); letter-spacing:.2px; } .brand .logo-text span{ display:block; font-size:10.5px; letter-spacing:2px; color:var(--text-secondary); font-weight:700; } /* ============================================================ RESPONSIVE VIEW SWITCH Every page ships BOTH a desktop layout (.view-desktop) and a mobile layout (.view-mobile). Only one is shown at a time. ============================================================ */ .view-mobile{ display:none; } @media (max-width:980px){ .view-desktop{ display:none !important; } .view-mobile{ display:block; } }