/* ========================================================================== ROI Dashboard — Design System Gold light theme (default) + dark theme, toggled via [data-theme] on Display/numbers: "Fraunces" · UI/body: "Manrope" · Data/tickets: "JetBrains Mono" ========================================================================== */ :root{ /* ---- Gold light theme ---- */ --bg: #FBF7EE; --surface: #FFFFFF; --surface-alt: #F4EDDA; --surface-raised:#FFFFFF; --text: #1F1B13; --text-muted: #6E644E; --text-soft: #948870; --border: #E7DDBF; --border-strong: #D8C795; --gold: #2196C9; --gold-bright: #4FC3F7; --gold-deep: #0B6FA8; --gold-ink: #0A3550; --gold-wash: #E3F4FD; --profit: #1E7B4D; --profit-bg: #E4F4EA; --loss: #B23A2E; --loss-bg: #FBE9E6; --pending: #9C6B12; --pending-bg: #FBF0D2; --shadow-sm: 0 1px 2px rgba(59, 46, 14, 0.06); --shadow-md: 0 8px 24px rgba(59, 46, 14, 0.08); --shadow-gold: 0 10px 30px rgba(33, 150, 201, 0.18); --font-display: 'Fraunces', Georgia, serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --header-h: 64px; --sidebar-w: 236px; --mobile-nav-h: 62px; --radius: 14px; --radius-sm: 9px; color-scheme: light; } html[data-theme="dark"]{ --bg: #121009; --surface: #1C1810; --surface-alt: #241E13; --surface-raised:#231D13; --text: #F3ECD8; --text-muted: #B5A886; --text-soft: #8C7F63; --border: #362C1A; --border-strong: #4A3B20; --gold: #E7C25E; --gold-bright: #F1CE6D; --gold-deep: #C9A227; --gold-ink: #FBF0D2; --gold-wash: #2C2411; --profit: #4CD695; --profit-bg: #17301F; --loss: #EB6E60; --loss-bg: #3A1C18; --pending: #F1CE6D; --pending-bg: #332911; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 10px 28px rgba(0,0,0,0.45); --shadow-gold: 0 10px 30px rgba(231, 194, 94, 0.14); color-scheme: dark; } /* ---- Reset / base ---- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; transition: background-color .25s ease, color .25s ease; } a{ color: inherit; text-decoration: none; } h1,h2,h3,h4,.stat-value,.ticket-pl{ font-family: var(--font-display); } ::selection{ background: var(--gold-bright); color: var(--gold-ink); } :focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Preloader — candlestick mark ========================================================================== */ #preloader{ position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity .4s ease, visibility .4s ease; } #preloader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; } .preloader-mark{ display: flex; flex-direction: column; align-items: center; gap: 18px; } .preloader-candles{ display: flex; align-items: flex-end; gap: 6px; height: 46px; } .preloader-candles span{ width: 8px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); animation: candle-bounce 1s ease-in-out infinite; box-shadow: var(--shadow-gold); } .preloader-candles span:nth-child(1){ height: 18px; animation-delay: 0s; } .preloader-candles span:nth-child(2){ height: 34px; animation-delay: .1s; } .preloader-candles span:nth-child(3){ height: 46px; animation-delay: .2s; } .preloader-candles span:nth-child(4){ height: 28px; animation-delay: .3s; } .preloader-candles span:nth-child(5){ height: 40px; animation-delay: .4s; } @keyframes candle-bounce{ 0%, 100% { transform: scaleY(0.55); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } } .preloader-label{ font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } /* ========================================================================== Top bar ========================================================================== */ .topbar{ height: var(--header-h); background: var(--surface); border-bottom: 1px solid var(--border); z-index: 1030; } .topbar-inner{ height: 100%; display: flex; align-items: center; gap: 14px; padding: 0 16px; max-width: 1600px; margin: 0 auto; } .icon-btn{ width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text); font-size: 1.15rem; transition: background-color .15s ease, border-color .15s ease; } .icon-btn:hover{ background: var(--surface-alt); border-color: var(--border); } .brand{ display: flex; align-items: center; gap: 9px; margin-right: auto; } .brand-mark{ color: var(--gold); display: inline-flex; } .brand-logo{ height: 28px; } .brand-word{ font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; color: var(--text); } .topbar-tools{ display: flex; align-items: center; gap: 12px; } /* Google Translate widget */ .translate-widget{ min-width: 46px; } .translate-widget .goog-te-gadget{ font-family: var(--font-body) !important; font-size: 0 !important; color: transparent !important; } .translate-widget .goog-te-gadget-simple{ background: var(--surface-alt) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; padding: 6px 10px !important; display: inline-flex !important; align-items: center; } .translate-widget .goog-te-gadget-simple .goog-te-menu-value span{ color: var(--text) !important; font-family: var(--font-body) !important; font-size: 13px !important; } .translate-widget img{ display: none !important; } .translate-widget .goog-te-gadget-simple .goog-te-menu-value:before{ content: "\F3E1"; font-family: 'bootstrap-icons' !important; font-size: 13px; color: var(--gold-deep); margin-right: 4px; } body > .skiptranslate.goog-te-banner-frame, .goog-te-banner-frame{ display: none !important; } body{ top: 0 !important; } .goog-tooltip, .goog-tooltip:hover{ display: none !important; } .goog-text-highlight{ background: none !important; box-shadow: none !important; } /* Theme toggle */ .theme-toggle{ border: none; background: transparent; padding: 0; cursor: pointer; } .toggle-track{ width: 52px; height: 28px; border-radius: 999px; display: flex; align-items: center; padding: 3px; background: linear-gradient(90deg, var(--gold-wash), var(--surface-alt)); border: 1px solid var(--border-strong); position: relative; transition: background .25s ease; } .toggle-thumb{ width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(160deg, var(--gold-bright), var(--gold-deep)); box-shadow: var(--shadow-gold); display: flex; align-items: center; justify-content: center; transform: translateX(0); transition: transform .25s cubic-bezier(.4,0,.2,1); position: relative; } .toggle-thumb i{ font-size: 11px; color: var(--gold-ink); position: absolute; transition: opacity .2s ease, transform .2s ease; } .toggle-thumb .moon-icon{ opacity: 0; transform: scale(.5); } .toggle-thumb .sun-icon{ opacity: 1; transform: scale(1); } html[data-theme="dark"] .toggle-track{ background: linear-gradient(90deg, #2C2411, #1C1810); } html[data-theme="dark"] .toggle-thumb{ transform: translateX(24px); } html[data-theme="dark"] .toggle-thumb .sun-icon{ opacity: 0; transform: scale(.5); } html[data-theme="dark"] .toggle-thumb .moon-icon{ opacity: 1; transform: scale(1); } /* Avatar */ .avatar-link{ position: relative; display: inline-flex; } .avatar-img, .avatar-fallback{ width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-bright); } .avatar-fallback{ display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--gold-bright), var(--gold-deep)); color: var(--gold-ink); font-weight: 700; font-size: 13px; font-family: var(--font-body); } .avatar-status{ position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--profit); border: 2px solid var(--surface); } /* ========================================================================== App shell layout ========================================================================== */ .app-shell{ display: flex; padding-top: var(--header-h); min-height: 100vh; } .app-sidebar{ width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); position: fixed; top: var(--header-h); bottom: 0; left: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 20px 14px; overflow-y: auto; z-index: 1020; transform: translateX(0); transition: transform .25s ease; } .sidebar-nav ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .sidebar-link{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 600; font-size: .92rem; transition: background-color .15s ease, color .15s ease; } .sidebar-link i{ font-size: 1.05rem; width: 20px; text-align: center; } .sidebar-link:hover{ background: var(--surface-alt); color: var(--text); } .sidebar-link.active{ background: linear-gradient(90deg, var(--gold-wash), transparent); color: var(--gold-deep); box-shadow: inset 3px 0 0 var(--gold); } html[data-theme="dark"] .sidebar-link.active{ color: var(--gold-bright); } .sidebar-tier-card{ margin-top: auto; margin-bottom: 12px; padding: 14px; border-radius: var(--radius-sm); background: linear-gradient(160deg, var(--gold-wash), var(--surface-alt)); border: 1px solid var(--border-strong); display: flex; flex-direction: column; gap: 4px; } .tier-eyebrow{ font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); font-weight: 700; } .tier-name{ font-weight: 700; color: var(--gold-deep); display: flex; align-items: center; gap: 6px; } .tier-cta{ font-size: .78rem; font-weight: 600; color: var(--text-muted); margin-top: 4px; } .sidebar-logout{ color: var(--loss); } .sidebar-backdrop{ display: none; position: fixed; inset: 0; top: var(--header-h); background: rgba(0,0,0,.4); z-index: 1015; } .app-main{ flex: 1 1 auto; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; } .app-main-inner{ padding: 24px 28px 40px; max-width: 1400px; width: 100%; margin: 0 auto; flex: 1; } /* ========================================================================== Page header ========================================================================== */ .page-heading{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; } .page-heading h1{ font-size: 1.7rem; font-weight: 600; margin: 0; letter-spacing: -.01em; } .page-heading p{ color: var(--text-muted); margin: 4px 0 0; font-size: .92rem; } /* ========================================================================== Stat cards ========================================================================== */ .stat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; } .stat-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; } .stat-card.is-hero{ background: linear-gradient(155deg, var(--gold-ink) 0%, #123B57 100%); color: #EAF6FF; border-color: var(--gold-deep); box-shadow: var(--shadow-gold); } html[data-theme="dark"] .stat-card.is-hero{ background: linear-gradient(155deg, #2c2411 0%, #1a1509 100%); } .stat-card.is-hero .stat-label{ color: rgba(234,246,255,.72); } .stat-card.is-hero .stat-value{ color: #F0FAFF; } .stat-card-top{ display: flex; align-items: center; justify-content: space-between; } .stat-icon{ width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--gold-wash); color: var(--gold-deep); font-size: 1rem; } .stat-card.is-hero .stat-icon{ background: rgba(255,255,255,.12); color: var(--gold-bright); } .stat-label{ font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; } .stat-value{ font-size: 1.7rem; font-weight: 600; letter-spacing: -.01em; } .stat-delta{ font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 2px 8px; border-radius: 999px; } .stat-delta.up{ color: var(--profit); background: var(--profit-bg); } .stat-delta.down{ color: var(--loss); background: var(--loss-bg); } /* ========================================================================== Panels / section cards ========================================================================== */ .panel{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .panel-header{ display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); gap: 10px; flex-wrap: wrap; } .panel-header h2{ font-size: 1.05rem; font-weight: 600; margin: 0; } .panel-header p{ margin: 2px 0 0; color: var(--text-muted); font-size: .82rem; } .panel-body{ padding: 20px; } .link-all{ font-size: .82rem; font-weight: 700; color: var(--gold-deep); } html[data-theme="dark"] .link-all{ color: var(--gold-bright); } /* ========================================================================== Trade tickets — ticket-stub cards (signature element) ========================================================================== */ .ticket-row{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .ticket{ position: relative; display: flex; border-radius: var(--radius-sm); overflow: hidden; border: 1px dashed var(--border-strong); background: var(--surface-alt); box-shadow: var(--shadow-sm); } .ticket-stub{ width: 74px; flex: 0 0 74px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--gold-bright), var(--gold-deep)); color: var(--gold-ink); font-family: var(--font-display); font-weight: 700; font-size: .78rem; writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: .08em; text-transform: uppercase; position: relative; } .ticket-stub::after{ content: ""; position: absolute; right: -6px; top: 0; bottom: 0; width: 12px; background-image: radial-gradient(circle 6px, var(--surface-alt) 6px, transparent 6.5px); background-size: 12px 22px; background-repeat: repeat-y; background-position: center; } .ticket-main{ flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .ticket-top{ display: flex; align-items: center; justify-content: space-between; } .ticket-id{ font-family: var(--font-mono); font-size: .74rem; color: var(--text-soft); } .ticket-asset{ font-weight: 700; font-size: .96rem; } .ticket-meta{ display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-muted); } .ticket-badge{ font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; } .ticket-badge.buy{ color: var(--profit); background: var(--profit-bg); } .ticket-badge.sell{ color: var(--loss); background: var(--loss-bg); } .ticket-status{ font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); } .ticket-status.open{ color: var(--gold-deep); border-color: var(--gold-bright); } .ticket-bottom{ display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .ticket-pl{ font-weight: 700; font-size: 1.05rem; font-family: var(--font-mono); transition: color .2s ease; } .ticket-pl.up{ color: var(--profit); } .ticket-pl.down{ color: var(--loss); } /* Live-updating value flash, used by app.js when AJAX polling changes a number */ @keyframes value-flash{ 0%{ background-color: rgba(231, 194, 94, .35); } 100%{ background-color: transparent; } } .flash-update{ animation: value-flash 900ms ease-out; border-radius: 4px; } /* ---- Open-ticket "live" treatment: rotating neon border + pulsing glow ---- */ :root{ --neon-green: #2fe870; } html[data-theme="dark"]{ --neon-green: #4dffa0; } @property --ticket-border-angle{ syntax: ''; inherits: false; initial-value: 0deg; } .ticket.is-open{ position: relative; isolation: isolate; border-color: transparent; } .ticket.is-open::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ticket-border-angle), transparent 0deg, var(--neon-green) 35deg, transparent 90deg, transparent 270deg, var(--neon-green) 325deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ticket-border-spin 3.2s linear infinite; pointer-events: none; z-index: 2; } .ticket.is-open::after{ content: ""; position: absolute; inset: -5px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(47, 232, 112, 0); animation: ticket-pulse-glow 2.4s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes ticket-border-spin{ to { --ticket-border-angle: 360deg; } } @keyframes ticket-pulse-glow{ 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 232, 112, 0); } 50% { box-shadow: 0 0 20px 3px rgba(47, 232, 112, .5); } } .ticket-live-dot{ display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--neon-green); box-shadow: 0 0 6px var(--neon-green); margin-right: 5px; animation: ticket-dot-blink 1.4s ease-in-out infinite; } @keyframes ticket-dot-blink{ 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce){ .ticket.is-open::before, .ticket.is-open::after, .ticket-live-dot{ animation: none; } } /* ========================================================================== Tables ========================================================================== */ .data-table{ width: 100%; border-collapse: collapse; font-size: .88rem; } .data-table th{ text-align: left; padding: 10px 12px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: 700; border-bottom: 1px solid var(--border); } .data-table td{ padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .data-table tr:last-child td{ border-bottom: none; } .data-table .amount{ font-family: var(--font-mono); font-weight: 600; } .amount.up{ color: var(--profit); } .amount.down{ color: var(--loss); } .status-pill{ font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .status-pill.completed{ color: var(--profit); background: var(--profit-bg); } .status-pill.pending{ color: var(--pending); background: var(--pending-bg); } .status-pill.failed{ color: var(--loss); background: var(--loss-bg); } /* ========================================================================== Buttons ========================================================================== */ .btn-gold{ background: linear-gradient(160deg, var(--gold-bright), var(--gold-deep)); color: var(--gold-ink); border: none; font-weight: 700; border-radius: 999px; padding: 8px 18px; box-shadow: var(--shadow-gold); transition: transform .15s ease, box-shadow .15s ease; } .btn-gold:hover{ transform: translateY(-1px); color: var(--gold-ink); } .btn-outline-gold{ background: transparent; border: 1.5px solid var(--gold); color: var(--gold-deep); font-weight: 700; border-radius: 999px; padding: 7px 16px; } html[data-theme="dark"] .btn-outline-gold{ color: var(--gold-bright); } /* ========================================================================== Footer (desktop) ========================================================================== */ .app-footer{ border-top: 1px solid var(--border); background: var(--surface); } .app-footer-inner{ max-width: 1400px; margin: 0 auto; padding: 16px 28px; } .footer-copy{ margin: 0 0 4px; font-size: .82rem; color: var(--text-muted); font-weight: 600; } .footer-risk{ margin: 0; font-size: .74rem; color: var(--text-soft); line-height: 1.6; max-width: 900px; } /* ========================================================================== Mobile bottom nav ========================================================================== */ .mobile-nav{ position: fixed; left: 0; right: 0; bottom: 0; height: var(--mobile-nav-h); background: var(--surface); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(5, 1fr); z-index: 1030; box-shadow: 0 -6px 20px rgba(0,0,0,.06); padding-bottom: env(safe-area-inset-bottom); } .mobile-nav-link{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-muted); font-size: .66rem; font-weight: 700; } .mobile-nav-link i{ font-size: 1.2rem; } .mobile-nav-link.active{ color: var(--gold-deep); } html[data-theme="dark"] .mobile-nav-link.active{ color: var(--gold-bright); } /* ========================================================================== Filter tabs (tickets, history) ========================================================================== */ .filter-tabs{ display: flex; gap: 6px; flex-wrap: wrap; } .filter-tab{ border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: .8rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; transition: all .15s ease; } .filter-tab:hover{ border-color: var(--gold); color: var(--text); } .filter-tab.active{ background: linear-gradient(160deg, var(--gold-bright), var(--gold-deep)); color: var(--gold-ink); border-color: transparent; } /* ========================================================================== Investment plan cards + active investment progress ========================================================================== */ .plan-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .plan-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; position: relative; box-shadow: var(--shadow-sm); } .plan-card.is-featured{ border-color: var(--gold); box-shadow: var(--shadow-gold); } .plan-ribbon{ position: absolute; top: -11px; left: 20px; background: linear-gradient(160deg, var(--gold-bright), var(--gold-deep)); color: var(--gold-ink); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; box-shadow: var(--shadow-gold); } .plan-name{ font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin: 0; } .plan-roi{ display: flex; align-items: baseline; gap: 6px; } .plan-roi .value{ font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--gold-deep); } html[data-theme="dark"] .plan-roi .value{ color: var(--gold-bright); } .plan-roi .unit{ color: var(--text-muted); font-size: .85rem; } .plan-range{ font-size: .82rem; color: var(--text-muted); font-family: var(--font-mono); } .plan-features{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .84rem; } .plan-features li{ display: flex; align-items: center; gap: 8px; color: var(--text-muted); } .plan-features li i{ color: var(--profit); } .invest-row{ display: flex; flex-direction: column; gap: 14px; } .invest-item{ border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; } .invest-item-top{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .invest-name{ font-weight: 700; } .invest-ticket{ font-family: var(--font-mono); font-size: .76rem; color: var(--text-soft); } .progress-track{ height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; } .progress-fill{ height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); } .invest-item-bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 10px; font-size: .8rem; color: var(--text-muted); } /* ========================================================================== Deposit / withdraw method cards ========================================================================== */ .method-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .method-card{ position: relative; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 16px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: border-color .15s ease, background-color .15s ease; } .method-card input{ position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; } .method-card i{ font-size: 1.5rem; color: var(--gold-deep); } .method-card .method-name{ font-weight: 700; font-size: .86rem; } .method-card .method-note{ font-size: .72rem; color: var(--text-soft); } .method-card:has(input:checked){ border-color: var(--gold); background: var(--gold-wash); } html[data-theme="dark"] .method-card i{ color: var(--gold-bright); } .method-card:hover:not(.is-unavailable){ border-color: var(--gold-bright); } .method-card.is-unavailable{ opacity: .5; cursor: not-allowed; } .method-card.is-unavailable:hover{ border-color: var(--border); } .balance-banner{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: linear-gradient(155deg, var(--gold-ink), #123B57); color: #EAF6FF; border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow-gold); margin-bottom: 20px; } html[data-theme="dark"] .balance-banner{ background: linear-gradient(155deg, #2c2411, #1a1509); } .balance-banner .label{ font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(234,246,255,.72); font-weight: 700; } .balance-banner .value{ font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: #F0FAFF; } /* ========================================================================== Referrals ========================================================================== */ .ref-link-box{ display: flex; align-items: center; gap: 8px; background: var(--surface-alt); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; } .ref-link-box code{ flex: 1; font-family: var(--font-mono); font-size: .82rem; color: var(--text); overflow-x: auto; white-space: nowrap; } .ref-stat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* ========================================================================== Account tier cards (upgrade.php) ========================================================================== */ .tier-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .tier-option-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; text-align: center; display: flex; flex-direction: column; gap: 12px; position: relative; } .tier-option-card.is-featured{ border-color: var(--gold); box-shadow: var(--shadow-gold); } .tier-option-card.is-current{ outline: 2px solid var(--profit); outline-offset: -2px; } .tier-icon-lg{ width: 52px; height: 52px; border-radius: 14px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: var(--gold-wash); color: var(--gold-deep); font-size: 1.4rem; } .tier-boost{ font-family: var(--font-mono); font-size: .84rem; color: var(--profit); font-weight: 700; } .tier-perks{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: .82rem; text-align: left; } .tier-perks li{ display: flex; align-items: center; gap: 8px; color: var(--text-muted); } .tier-perks li i{ color: var(--gold-deep); } /* ========================================================================== Auth layout (login.php / register.php) — split panel, sophisticated ========================================================================== */ .auth-shell{ min-height: 100vh; display: flex; background: var(--bg); } .auth-aside{ flex: 0 0 44%; max-width: 560px; position: relative; overflow: hidden; background: linear-gradient(155deg, var(--gold-ink) 0%, #123B57 60%, #071F30 100%); color: #EAF6FF; padding: 48px 44px; display: flex; flex-direction: column; justify-content: space-between; } html[data-theme="dark"] .auth-aside{ background: linear-gradient(155deg, #201a0d 0%, #14110a 100%); } .auth-aside::before{ content: ""; position: absolute; inset: -20%; opacity: .5; pointer-events: none; background-image: radial-gradient(circle at 20% 20%, rgba(79,195,247,.18), transparent 40%), radial-gradient(circle at 80% 70%, rgba(79,195,247,.14), transparent 45%); } .auth-aside-top{ position: relative; z-index: 1; } .auth-aside .auth-brand{ display: flex; align-items: center; gap: 10px; color: var(--gold-bright); margin-bottom: 46px; } .auth-aside .auth-brand span{ font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: #EAF6FF; } .auth-aside h2{ font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1.25; max-width: 380px; margin-bottom: 14px; } .auth-aside p.lede{ color: rgba(234,246,255,.72); max-width: 360px; font-size: .95rem; line-height: 1.6; } .auth-stat-row{ position: relative; z-index: 1; display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; } .auth-stat-row .stat{ display: flex; flex-direction: column; gap: 2px; } .auth-stat-row .stat .num{ font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--gold-bright); } .auth-stat-row .stat .lbl{ font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(234,246,255,.6); font-weight: 700; } .auth-quote{ position: relative; z-index: 1; border-top: 1px solid rgba(234,246,255,.16); padding-top: 20px; margin-top: 40px; font-size: .85rem; color: rgba(234,246,255,.65); font-style: italic; } .auth-main{ flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .auth-card{ width: 100%; max-width: 420px; } .auth-card-eyebrow{ font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-deep); font-weight: 800; margin-bottom: 8px; } html[data-theme="dark"] .auth-card-eyebrow{ color: var(--gold-bright); } .auth-card h1{ font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; margin-bottom: 6px; } .auth-card .auth-sub{ color: var(--text-muted); font-size: .9rem; margin-bottom: 28px; } .auth-mobile-brand{ display: none; } .form-floating-gold .form-label{ color: var(--text-muted); } .password-field{ position: relative; } .password-field .toggle-visibility{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-soft); font-size: 1rem; padding: 4px; } /* Password strength meter — cosmetic only; the one hard rule is length >= 6 */ .pw-meter{ margin-top: 8px; } .pw-meter-track{ display: flex; gap: 4px; height: 5px; } .pw-meter-seg{ flex: 1; border-radius: 999px; background: var(--border); transition: background-color .2s ease; } .pw-meter-seg.filled.weak{ background: var(--loss); } .pw-meter-seg.filled.fair{ background: var(--pending); } .pw-meter-seg.filled.good{ background: var(--gold); } .pw-meter-seg.filled.strong{ background: var(--profit); } .pw-meter-label{ font-size: .72rem; font-weight: 700; margin-top: 5px; color: var(--text-soft); } .pw-meter-label.weak{ color: var(--loss); } .pw-meter-label.fair{ color: var(--pending); } .pw-meter-label.good{ color: var(--gold-deep); } .pw-meter-label.strong{ color: var(--profit); } .pw-hint{ font-size: .74rem; color: var(--text-soft); margin-top: 6px; } .pw-hint.met{ color: var(--profit); } .auth-divider{ display: flex; align-items: center; gap: 10px; color: var(--text-soft); font-size: .78rem; margin: 22px 0; } .auth-divider::before, .auth-divider::after{ content: ""; flex: 1; height: 1px; background: var(--border); } .auth-alert{ border-radius: var(--radius-sm); padding: 10px 14px; font-size: .85rem; margin-bottom: 18px; display: flex; align-items: flex-start; gap: 8px; } .auth-alert.error{ background: var(--loss-bg); color: var(--loss); } .auth-alert.success{ background: var(--profit-bg); color: var(--profit); } /* ========================================================================== Locked payout fields (profile.php) ========================================================================== */ .payout-field{ border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 12px; } .payout-field-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .payout-field-label{ display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .88rem; } .payout-field-label i{ color: var(--gold-deep); font-size: 1rem; } html[data-theme="dark"] .payout-field-label i{ color: var(--gold-bright); } .lock-badge{ display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--profit); background: var(--profit-bg); padding: 2px 9px; border-radius: 999px; } .payout-locked-value{ font-family: var(--font-mono); font-size: .85rem; color: var(--text); background: var(--surface-alt); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 9px 12px; word-break: break-all; } .payout-note{ font-size: .74rem; color: var(--text-soft); margin-top: 6px; } .bank-field-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } /* ========================================================================== Invest modal — animated success/error result icons ========================================================================== */ .result-icon-circle{ width: 84px; height: 84px; margin: 0 auto 18px; } .result-icon-circle svg{ width: 100%; height: 100%; overflow: visible; } .result-icon-circle .ric-circle{ fill: none; stroke-width: 3; stroke-miterlimit: 10; stroke-dasharray: 166; stroke-dashoffset: 166; animation: ric-circle-draw .5s ease-out forwards; } .result-icon-circle.success .ric-circle{ stroke: var(--profit); } .result-icon-circle.error .ric-circle{ stroke: var(--loss); } .result-icon-circle .ric-check{ stroke: var(--profit); stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: ric-mark-draw .35s .45s ease-out forwards; } .result-icon-circle .ric-cross{ stroke: var(--loss); stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: ric-mark-draw .3s .45s ease-out forwards; } @keyframes ric-circle-draw{ to { stroke-dashoffset: 0; } } @keyframes ric-mark-draw{ to { stroke-dashoffset: 0; } } .result-title{ font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; margin-bottom: 6px; } .result-title.success{ color: var(--profit); } .result-title.error{ color: var(--loss); } @media (prefers-reduced-motion: reduce){ .result-icon-circle .ric-circle, .result-icon-circle .ric-check, .result-icon-circle .ric-cross{ animation: none; stroke-dashoffset: 0; } } @media (max-width: 991.98px){ .app-sidebar{ transform: translateX(-100%); box-shadow: var(--shadow-md); } .app-sidebar.is-open{ transform: translateX(0); } .sidebar-backdrop.is-open{ display: block; } .app-main{ margin-left: 0; } .app-main-inner{ padding: 18px 16px calc(var(--mobile-nav-h) + 24px); } .stat-grid{ grid-template-columns: repeat(2, 1fr); } .plan-grid, .tier-grid{ grid-template-columns: repeat(2, 1fr); } .ref-stat-grid{ grid-template-columns: repeat(2, 1fr); } .brand-word{ font-size: 1.1rem; } .auth-aside{ display: none; } .auth-main{ padding: 32px 20px; } .auth-mobile-brand{ display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--gold-deep); margin-bottom: 26px; } .auth-mobile-brand span{ font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--text); } .bank-field-grid{ grid-template-columns: 1fr; } } @media (max-width: 575.98px){ .stat-grid{ grid-template-columns: 1fr; } .brand-word{ display: none; } /* logo mark stays; frees space so the translator keeps its spot */ .topbar-tools{ gap: 8px; } .translate-widget .goog-te-gadget-simple{ padding: 5px 8px !important; } .ticket-row{ grid-template-columns: 1fr; } .plan-grid, .tier-grid, .ref-stat-grid{ grid-template-columns: 1fr; } }