/** * NEXOLLY DESIGN SYSTEM * One shared set of tokens and components. Every rebuilt page in this * pass includes this file and uses these classes instead of inventing * new one-off styles. Load this AFTER any page-specific overrides are * removed, BEFORE any remaining legacy page CSS. */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* Color */ --nx-bg: #0A0A0E; --nx-surface: #12121A; --nx-surface-2: #181822; --nx-border: rgba(255,255,255,0.08); --nx-border-strong: rgba(255,255,255,0.14); --nx-text: #F5F5F7; --nx-text-muted: #8B8FA3; --nx-text-faint: #5A5E70; --nx-gold: #FFD700; --nx-gold-dim: rgba(255,215,0,0.12); --nx-blue: #00CFFF; --nx-blue-dim: rgba(0,207,255,0.12); --nx-green: #00E676; --nx-green-dim: rgba(0,230,118,0.12); --nx-red: #FF5C5C; --nx-red-dim: rgba(255,92,92,0.12); --nx-amber: #FFC107; --nx-amber-dim: rgba(255,193,7,0.12); /* Spacing scale */ --nx-space-1: 4px; --nx-space-2: 8px; --nx-space-3: 12px; --nx-space-4: 16px; --nx-space-5: 20px; --nx-space-6: 24px; --nx-space-8: 32px; --nx-space-10: 40px; /* Radius */ --nx-radius-sm: 8px; --nx-radius-md: 12px; --nx-radius-lg: 16px; --nx-radius-xl: 20px; --nx-radius-full: 999px; /* Shadow */ --nx-shadow-sm: 0 2px 8px rgba(0,0,0,0.25); --nx-shadow-md: 0 8px 24px rgba(0,0,0,0.35); --nx-shadow-gold: 0 4px 16px rgba(255,215,0,0.15); /* Translucent chrome surfaces (topbar / mobile topbar / bottom nav) -- kept as their own tokens (not reused from --nx-surface) because they carry a blur + alpha look that the light theme inverts separately below. */ --nx-chrome-blur: rgba(10,10,14,0.85); --nx-chrome-blur-strong: rgba(10,10,14,0.92); --nx-chrome-blur-nav: rgba(18,18,26,0.97); /* Layout */ --nx-sidebar-w: 260px; --nx-sidebar-w-collapsed: 76px; --nx-topbar-h: 68px; --nx-bottomnav-h: 64px; --nx-content-max: 1280px; /* Typography */ --nx-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --nx-font-display: 'Poppins', var(--nx-font); } /* ============================================================ 1B. LIGHT THEME OVERRIDE Applied via [data-theme="light"] on . Dark (the values in :root above) stays the default/current baseline -- this block only overrides the same token names, so every component below that was already written against --nx-* variables re-themes automatically with zero component-level changes. Brand/status accent hues (gold, blue, green, red, amber) are intentionally NOT re-mapped: they're the same brand colors in both themes, same as any product's accent palette staying constant across light/dark. ============================================================ */ html[data-theme="light"] { --nx-bg: #F5F6FA; --nx-surface: #FFFFFF; --nx-surface-2: #F0F1F6; --nx-border: rgba(16,18,32,0.09); --nx-border-strong: rgba(16,18,32,0.16); --nx-text: #14141F; --nx-text-muted: #55586B; --nx-text-faint: #8A8DA0; --nx-shadow-sm: 0 2px 8px rgba(20,20,35,0.07); --nx-shadow-md: 0 8px 24px rgba(20,20,35,0.10); --nx-chrome-blur: rgba(255,255,255,0.85); --nx-chrome-blur-strong: rgba(255,255,255,0.92); --nx-chrome-blur-nav: rgba(255,255,255,0.97); /* --------------------------------------------------------------- GREEN/WHITE LIGHT THEME (2026-08-18 pass) --nx-gold is the single token every component (buttons, badges, active nav state, highlights, eyebrow labels) already reads for its "primary brand accent" -- remapping it here, scoped to [data-theme="light"] only, retints the whole light theme to a professional emerald green with zero changes to component CSS or view markup. Dark theme is untouched on purpose (this was a light-theme-only complaint about yellow/orange feeling unpolished), so nothing there can be broken by this. --------------------------------------------------------------- */ --nx-gold: #16A34A; /* primary accent (was #FFD700) */ --nx-gold-dim: rgba(22,163,74,0.12); --nx-shadow-gold: 0 4px 16px rgba(22,163,74,0.15); --nx-green-surface: #F0FDF4; --nx-green-surface-strong: #DCFCE7; /* ------------------------------------------------------------ GREEN + WHITE LIGHT THEME (2026-08-18) Every component in this file was already written against the --nx-gold / --nx-gold-dim / --nx-shadow-gold tokens, so re-pointing just those three tokens here re-themes the entire light mode to a professional emerald green with zero component-level changes -- same pattern the file already uses for bg/surface/text above. Dark mode (:root, top of file) is untouched and keeps its original gold-on-black look. ------------------------------------------------------------ */ --nx-gold: #16A34A; /* primary accent: emerald green */ --nx-gold-dim: rgba(22,163,74,0.12); --nx-shadow-gold: 0 4px 16px rgba(22,163,74,0.15); --nx-green: #16A34A; /* keep the "success" hue consistent with the new accent */ --nx-green-dim: rgba(22,163,74,0.12); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html, body.nx-app { transition: background-color .15s ease, color .15s ease; } body.nx-app { background: var(--nx-bg); color: var(--nx-text); font-family: var(--nx-font); margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ============================================================ 2. TYPOGRAPHY ============================================================ */ .nx-h1 { font-family: var(--nx-font-display); font-weight: 800; font-size: clamp(24px, 4vw, 34px); line-height: 1.2; margin: 0; } .nx-h2 { font-family: var(--nx-font-display); font-weight: 700; font-size: clamp(19px, 3vw, 24px); line-height: 1.3; margin: 0; } .nx-h3 { font-weight: 700; font-size: 17px; margin: 0; } .nx-body { font-size: 14px; line-height: 1.6; color: var(--nx-text-muted); } .nx-small { font-size: 12px; color: var(--nx-text-faint); } .nx-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--nx-gold); } /* ============================================================ 3. APP SHELL — sidebar (desktop) + topbar + bottom nav (mobile) ============================================================ */ .nx-shell { min-height: 100vh; display: flex; } .nx-sidebar { width: var(--nx-sidebar-w); flex-shrink: 0; background: var(--nx-surface); border-right: 1px solid var(--nx-border); position: fixed; top: 0; left: 0; bottom: 0; display: flex; flex-direction: column; padding: var(--nx-space-5) var(--nx-space-3); z-index: 100; } .nx-sidebar-brand { display: flex; align-items: center; gap: var(--nx-space-2); padding: var(--nx-space-2) var(--nx-space-3) var(--nx-space-6); text-decoration: none; color: var(--nx-text); } .nx-sidebar-brand img { width: 32px; height: 32px; } .nx-sidebar-brand span { font-family: var(--nx-font-display); font-weight: 800; font-size: 18px; } .nx-sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } .nx-sidebar-link { display: flex; align-items: center; gap: var(--nx-space-3); padding: 11px var(--nx-space-3); border-radius: var(--nx-radius-md); color: var(--nx-text-muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .15s, color .15s; } .nx-sidebar-link i { font-size: 18px; width: 20px; text-align: center; } .nx-sidebar-link:hover { background: var(--nx-surface-2); color: var(--nx-text); } .nx-sidebar-link.active { background: var(--nx-gold-dim); color: var(--nx-gold); font-weight: 600; } .nx-sidebar-footer { border-top: 1px solid var(--nx-border); padding-top: var(--nx-space-3); margin-top: var(--nx-space-3); } .nx-main { flex: 1; margin-left: var(--nx-sidebar-w); min-width: 0; display: flex; flex-direction: column; } .nx-topbar { height: var(--nx-topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--nx-space-6); border-bottom: 1px solid var(--nx-border); position: sticky; top: 0; background: var(--nx-chrome-blur); backdrop-filter: blur(10px); z-index: 50; } .nx-topbar-actions { display: flex; align-items: center; gap: var(--nx-space-4); } .nx-topbar-icon-btn { width: 40px; height: 40px; border-radius: var(--nx-radius-md); display: flex; align-items: center; justify-content: center; background: var(--nx-surface); border: 1px solid var(--nx-border); color: var(--nx-text-muted); text-decoration: none; position: relative; cursor: pointer; font: inherit; padding: 0; -webkit-appearance: none; appearance: none; } .nx-topbar-icon-btn:hover { color: var(--nx-text); border-color: var(--nx-border-strong); } .nx-topbar-icon-btn:focus-visible { outline: 2px solid var(--nx-gold); outline-offset: 2px; } .nx-topbar-icon-btn .nx-badge-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-red); border: 2px solid var(--nx-surface); } .nx-topbar-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--nx-gold-dim); color: var(--nx-gold); display: flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; } .nx-topbar-avatar img { width: 100%; height: 100%; object-fit: cover; } .nx-content { flex: 1; padding: var(--nx-space-6); max-width: var(--nx-content-max); width: 100%; margin: 0 auto; } .nx-page-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--nx-space-4); margin-bottom: var(--nx-space-6); } /* Mobile nav */ .nx-mobile-topbar { display: none; } .nx-bottom-nav { display: none; } @media (max-width: 1023px) { .nx-sidebar { display: none; } .nx-main { margin-left: 0; } .nx-mobile-topbar { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 var(--nx-space-4); border-bottom: 1px solid var(--nx-border); position: sticky; top: 0; background: var(--nx-chrome-blur-strong); backdrop-filter: blur(10px); z-index: 50; } .nx-topbar { display: none; } .nx-content { padding: var(--nx-space-4); padding-bottom: calc(var(--nx-bottomnav-h) + var(--nx-space-6)); } .nx-bottom-nav { display: flex; justify-content: space-around; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; height: var(--nx-bottomnav-h); background: var(--nx-chrome-blur-nav); backdrop-filter: blur(12px); border-top: 1px solid var(--nx-border); z-index: 100; padding-bottom: env(safe-area-inset-bottom); } .nx-bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--nx-text-faint); text-decoration: none; font-size: 10px; font-weight: 600; flex: 1; padding: 6px 0; min-width: 44px; min-height: 44px; justify-content: center; } .nx-bottom-nav-item i { font-size: 20px; } .nx-bottom-nav-item.active { color: var(--nx-gold); } } /* ============================================================ 4. CARDS ============================================================ */ .nx-card { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg); padding: var(--nx-space-5); transition: border-color 0.2s ease, transform 0.15s ease; } .nx-card:hover { border-color: rgba(255,215,0,0.15); } .nx-card-flat { background: var(--nx-surface-2); border-radius: var(--nx-radius-md); padding: var(--nx-space-4); } .nx-grid { display: grid; gap: var(--nx-space-4); } /* Profile page: two cards (avatar/info + stats) previously forced into a hardcoded inline "1fr 2fr" grid-template-columns that applied at every screen width, squeezing both cards narrow on mobile. Stack on mobile, go side-by-side from tablet width up. See app/views/dashboard/profile.php. */ .nx-profile-grid { grid-template-columns: 1fr; } @media (min-width: 768px) { .nx-profile-grid { grid-template-columns: 1fr 2fr; } } .nx-grid-2 { grid-template-columns: repeat(2, 1fr); } .nx-grid-3 { grid-template-columns: repeat(3, 1fr); } .nx-grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 640px) { .nx-grid-2, .nx-grid-3, .nx-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .nx-grid-3, .nx-grid-4 { grid-template-columns: 1fr 1fr; } } .nx-stat-card { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg); padding: var(--nx-space-5); } .nx-stat-card .nx-stat-icon { width: 40px; height: 40px; border-radius: var(--nx-radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--nx-space-3); font-size: 18px; } .nx-stat-card .nx-stat-value { font-family: var(--nx-font-display); font-weight: 800; font-size: 24px; display: block; } .nx-stat-card .nx-stat-label { color: var(--nx-text-muted); font-size: 12px; margin-top: 2px; display: block; } /* ============================================================ 5. BUTTONS ============================================================ */ .nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--nx-space-2); padding: 11px 20px; border-radius: var(--nx-radius-md); font-weight: 700; font-size: 14px; border: none; cursor: pointer; text-decoration: none; min-height: 44px; transition: transform .1s, opacity .15s; } .nx-btn:active { transform: scale(0.98); } .nx-btn-primary { background: var(--nx-gold); color: #0A0A0E; } .nx-btn-primary:hover { opacity: .92; } .nx-btn-secondary { background: var(--nx-surface-2); color: var(--nx-text); border: 1px solid var(--nx-border-strong); } .nx-btn-ghost { background: transparent; color: var(--nx-text-muted); border: 1px solid var(--nx-border); } .nx-btn-danger { background: var(--nx-red-dim); color: var(--nx-red); border: 1px solid rgba(255,92,92,0.25); } .nx-btn-sm { padding: 7px 14px; font-size: 12px; min-height: 36px; } .nx-btn-block { width: 100%; } .nx-btn:disabled { opacity: .5; cursor: not-allowed; } /* Settings > Appearance picker (data-nx-theme-option, wired in app-shell-end.php) */ .nx-theme-picker { display: flex; gap: var(--nx-space-3); flex-wrap: wrap; } .nx-theme-picker [data-nx-theme-option] { flex: 1; min-width: 140px; } .nx-theme-picker [data-nx-theme-option].active { background: var(--nx-gold-dim); color: var(--nx-gold); border-color: var(--nx-gold); } /* ============================================================ 6. FORMS ============================================================ */ .nx-field { margin-bottom: var(--nx-space-4); } .nx-label { display: block; font-size: 13px; font-weight: 600; color: var(--nx-text-muted); margin-bottom: var(--nx-space-2); } .nx-input, .nx-select, .nx-textarea { width: 100%; padding: 12px 14px; background: var(--nx-surface-2); border: 1px solid var(--nx-border-strong); border-radius: var(--nx-radius-md); color: var(--nx-text); font-size: 14px; font-family: inherit; min-height: 44px; } .nx-input:focus, .nx-select:focus, .nx-textarea:focus { outline: none; border-color: var(--nx-gold); } .nx-input::placeholder { color: var(--nx-text-faint); } .nx-hint { font-size: 12px; color: var(--nx-text-faint); margin-top: 4px; } .nx-error-text { font-size: 12px; color: var(--nx-red); margin-top: 4px; } /* ============================================================ 7. BADGES / ALERTS / TABLES ============================================================ */ .nx-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--nx-radius-full); font-size: 11px; font-weight: 700; } .nx-badge-gold { background: var(--nx-gold-dim); color: var(--nx-gold); } .nx-badge-green { background: var(--nx-green-dim); color: var(--nx-green); } .nx-badge-blue { background: var(--nx-blue-dim); color: var(--nx-blue); } .nx-badge-red { background: var(--nx-red-dim); color: var(--nx-red); } .nx-badge-amber { background: var(--nx-amber-dim); color: var(--nx-amber); } .nx-badge-gray { background: var(--nx-surface-2); color: var(--nx-text-muted); } .nx-alert { padding: var(--nx-space-4); border-radius: var(--nx-radius-md); font-size: 13px; display: flex; gap: var(--nx-space-3); align-items: flex-start; margin-bottom: var(--nx-space-4); } .nx-alert-success { background: var(--nx-green-dim); color: var(--nx-green); border: 1px solid rgba(0,230,118,0.2); } .nx-alert-error { background: var(--nx-red-dim); color: var(--nx-red); border: 1px solid rgba(255,92,92,0.2); } .nx-alert-info { background: var(--nx-blue-dim); color: var(--nx-blue); border: 1px solid rgba(0,207,255,0.2); } .nx-alert-warn { background: var(--nx-amber-dim); color: var(--nx-amber); border: 1px solid rgba(255,193,7,0.2); } .nx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .nx-table { width: 100%; border-collapse: collapse; min-width: 480px; } .nx-table th { text-align: left; padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--nx-text-faint); border-bottom: 1px solid var(--nx-border); } .nx-table td { padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--nx-border); } /* ============================================================ 8. STATES ============================================================ */ .nx-empty { text-align: center; padding: var(--nx-space-10) var(--nx-space-4); color: var(--nx-text-faint); } .nx-empty i { font-size: 36px; opacity: .4; margin-bottom: var(--nx-space-3); display: block; } .nx-empty-title { color: var(--nx-text-muted); font-weight: 600; margin-bottom: 4px; } .nx-skeleton { background: linear-gradient(90deg, var(--nx-surface-2) 25%, var(--nx-surface) 50%, var(--nx-surface-2) 75%); background-size: 200% 100%; animation: nx-shimmer 1.4s infinite; border-radius: var(--nx-radius-md); } @keyframes nx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .nx-spin { animation: nx-spin 0.7s linear infinite; } @keyframes nx-spin { to { transform: rotate(360deg); } } /* ============================================================ 9. UTILITIES ============================================================ */ .nx-flex { display: flex; } .nx-flex-col { display: flex; flex-direction: column; } .nx-items-center { align-items: center; } .nx-justify-between { justify-content: space-between; } .nx-gap-2 { gap: var(--nx-space-2); } .nx-gap-3 { gap: var(--nx-space-3); } .nx-gap-4 { gap: var(--nx-space-4); } .nx-mt-4 { margin-top: var(--nx-space-4); } .nx-mt-6 { margin-top: var(--nx-space-6); } .nx-mb-4 { margin-bottom: var(--nx-space-4); } .nx-w-full { width: 100%; } .nx-text-muted { color: var(--nx-text-muted); } .nx-hide-mobile { display: initial; } .nx-hide-desktop { display: none; } @media (max-width: 1023px) { .nx-hide-mobile { display: none !important; } .nx-hide-desktop { display: initial !important; } } /* ============================================================ 10. DASHBOARD ENHANCEMENTS ============================================================ */ /* Research Points card glow effect */ .nx-research-points { background: linear-gradient(135deg, var(--nx-surface), var(--nx-surface-2)); border-color: rgba(255,215,0,0.08); position: relative; overflow: hidden; } .nx-research-points::before { content: ''; position: absolute; top: -50%; right: -30%; width: 60%; height: 200%; background: radial-gradient(ellipse, rgba(255,215,0,0.04), transparent 70%); pointer-events: none; } /* Dashboard cards with hover effect */ .nx-card { transition: border-color 0.2s ease, transform 0.15s ease; } .nx-card:hover { border-color: rgba(255,215,0,0.15); } /* Stat cards grid responsive */ .nx-grid-dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nx-space-4); } @media (max-width: 420px) { .nx-grid-dashboard { grid-template-columns: 1fr; } } /* Activity feed styling */ .nx-activity-item { display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-3) var(--nx-space-4); background: var(--nx-surface-2); border-radius: var(--nx-radius-md); transition: background 0.15s ease; } .nx-activity-item:hover { background: var(--nx-surface); } .nx-activity-icon { width: 36px; height: 36px; border-radius: var(--nx-radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nx-activity-icon.green { background: var(--nx-green-dim); color: var(--nx-green); } .nx-activity-icon.gold { background: var(--nx-gold-dim); color: var(--nx-gold); } .nx-activity-icon.blue { background: var(--nx-blue-dim); color: var(--nx-blue); } /* Ensure content padding works with bottom nav */ @media (max-width: 1023px) { .nx-content { padding-bottom: calc(var(--nx-bottomnav-h) + var(--nx-space-6)); } } /* ============================================================ 11. TASK GRID - RESPONSIVE ============================================================ */ .nx-task-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--nx-space-3); } @media (min-width: 600px) { .nx-task-grid { grid-template-columns: repeat(3, 1fr); gap: var(--nx-space-4); } } @media (min-width: 900px) { .nx-task-grid { grid-template-columns: repeat(4, 1fr); gap: var(--nx-space-4); } } @media (min-width: 1200px) { .nx-task-grid { grid-template-columns: repeat(6, 1fr); gap: var(--nx-space-4); } } /* ============================================================ 12. TASK CARD ============================================================ */ .nx-task-card { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--nx-surface); border: 1px solid var(--nx-border-strong); border-radius: var(--nx-radius-lg); padding: var(--nx-space-4) var(--nx-space-3); text-decoration: none; color: var(--nx-text); transition: all 0.2s ease; min-height: 160px; position: relative; cursor: pointer; text-align: center; gap: var(--nx-space-2); } .nx-task-card:hover { border-color: var(--nx-gold); transform: translateY(-2px); box-shadow: var(--nx-shadow-gold); } .nx-task-card:active { transform: scale(0.97); } .nx-task-card.locked { opacity: 0.7; cursor: default; } .nx-task-card.locked:hover { transform: none; box-shadow: none; border-color: var(--nx-border-strong); } .nx-task-card-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--nx-gold-dim); flex-shrink: 0; } .nx-task-card-icon .nx-crypto-icon { font-size: 22px; color: var(--nx-gold); } .nx-task-card-icon .nx-crypto-icon.sol { color: #9945FF; } .nx-task-card-icon .nx-crypto-icon.link { color: #2A5ADA; } .nx-task-card-icon .nx-crypto-icon.sui { color: #4DA2FF; } .nx-task-card-icon .nx-crypto-icon.xrp { color: #00AAE4; } .nx-task-card-icon .nx-crypto-icon.pi { color: #FFD700; } .nx-task-card-reward { display: flex; align-items: baseline; gap: 2px; margin-top: 2px; } .nx-task-card-reward .nx-reward-amount { font-family: var(--nx-font-display); font-weight: 800; font-size: clamp(18px, 2.5vw, 24px); color: var(--nx-gold); } .nx-task-card-reward .nx-reward-label { font-size: 12px; color: var(--nx-text-muted); font-weight: 500; } .nx-task-card-type { font-size: 12px; color: var(--nx-text-muted); font-weight: 500; line-height: 1.3; } .nx-task-card-action { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--nx-gold); margin-top: 2px; } .nx-task-card-action i { font-size: 12px; transition: transform 0.2s ease; } .nx-task-card:hover .nx-task-card-action i { transform: translateX(3px); } .nx-task-card-lock { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--nx-text-faint); font-weight: 500; margin-top: 2px; } .nx-task-card-lock i { font-size: 12px; } /* ============================================================ 13. MOBILE DRAWER / MENU ============================================================ */ .nx-mobile-drawer { position: fixed; top: 0; left: -300px; width: 280px; max-width: 80vw; height: 100%; background: var(--nx-surface); z-index: 1000; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--nx-shadow-md); display: flex; flex-direction: column; } .nx-mobile-drawer.open { left: 0; } .nx-mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--nx-space-4) var(--nx-space-4); border-bottom: 1px solid var(--nx-border); flex-shrink: 0; } .nx-mobile-drawer-brand { display: flex; align-items: center; gap: var(--nx-space-2); font-family: var(--nx-font-display); font-weight: 800; font-size: 18px; color: var(--nx-text); } .nx-mobile-drawer-close { width: 40px; height: 40px; border: none; background: var(--nx-surface-2); border-radius: var(--nx-radius-md); color: var(--nx-text-muted); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .nx-mobile-drawer-close:hover { background: var(--nx-border); color: var(--nx-text); } .nx-mobile-drawer-nav { flex: 1; overflow-y: auto; padding: var(--nx-space-3) 0; } .nx-mobile-drawer-link { display: flex; align-items: center; gap: var(--nx-space-3); padding: 14px var(--nx-space-4); color: var(--nx-text-muted); text-decoration: none; font-size: 15px; font-weight: 500; transition: all 0.15s ease; border-radius: 0; } .nx-mobile-drawer-link i { font-size: 20px; width: 24px; text-align: center; } .nx-mobile-drawer-link:hover { background: var(--nx-surface-2); color: var(--nx-text); } .nx-mobile-drawer-link.active { background: var(--nx-gold-dim); color: var(--nx-gold); font-weight: 600; } .nx-mobile-drawer-divider { height: 1px; background: var(--nx-border); margin: var(--nx-space-3) var(--nx-space-4); } .nx-mobile-drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .nx-mobile-drawer-overlay.open { opacity: 1; pointer-events: all; } .nx-mobile-menu-btn { width: 40px; height: 40px; border: none; background: transparent; color: var(--nx-text); font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: var(--nx-radius-md); } .nx-mobile-menu-btn:hover { background: var(--nx-surface-2); } /* ============================================================ 14. BOTTOM NAV IMPROVEMENTS ============================================================ */ .nx-bottom-nav { display: none; justify-content: space-around; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; height: 72px; background: var(--nx-chrome-blur-nav); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--nx-border); z-index: 100; padding: 6px 0 env(safe-area-inset-bottom, 8px) 0; } @media (max-width: 1023px) { .nx-bottom-nav { display: flex; } } .nx-bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--nx-text-faint); text-decoration: none; font-size: 11px; font-weight: 500; flex: 1; padding: 6px 0; min-height: 52px; justify-content: center; transition: color 0.15s ease; position: relative; } .nx-bottom-nav-item i { font-size: 22px; transition: transform 0.15s ease; } .nx-bottom-nav-item span { font-size: 10px; line-height: 1.2; } .nx-bottom-nav-item.active { color: var(--nx-gold); } .nx-bottom-nav-item.active i { transform: translateY(-2px); } .nx-bottom-nav-item.active::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: var(--nx-gold); border-radius: 0 0 3px 3px; } .nx-bottom-nav-item:hover { color: var(--nx-text); } /* ============================================================ 15. RESPONSIVE GRID OVERRIDES ============================================================ */ @media (max-width: 420px) { .nx-task-grid { gap: var(--nx-space-2); } .nx-task-card { padding: var(--nx-space-3) var(--nx-space-2); min-height: 140px; } .nx-task-card-icon { width: 40px; height: 40px; } .nx-task-card-icon .nx-crypto-icon { font-size: 18px; } .nx-task-card-reward .nx-reward-amount { font-size: 16px; } .nx-task-card-type { font-size: 11px; } .nx-task-card-action { font-size: 11px; } } /* ============================================================ 16. SECTION HEADING IMPROVEMENTS ============================================================ */ .nx-h3 { font-weight: 700; font-size: clamp(18px, 2vw, 22px); margin: 0; } .nx-body { font-size: 15px; line-height: 1.6; color: var(--nx-text-muted); } /* ============================================================ 17. TASK GRID - MOBILE OVERRIDE FIX ============================================================ */ /* Force mobile task grid to 2 columns */ @media (max-width: 599px) { .nx-task-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--nx-space-3) !important; } .nx-task-card { min-height: 140px !important; padding: var(--nx-space-3) var(--nx-space-2) !important; background: var(--nx-surface) !important; border: 1px solid var(--nx-border-strong) !important; border-radius: var(--nx-radius-lg) !important; text-decoration: none !important; color: var(--nx-text) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: var(--nx-space-2) !important; transition: all 0.2s ease !important; cursor: pointer !important; } .nx-task-card:hover { border-color: var(--nx-gold) !important; transform: translateY(-2px) !important; box-shadow: var(--nx-shadow-gold) !important; } .nx-task-card:active { transform: scale(0.97) !important; } .nx-task-card.locked { opacity: 0.7 !important; cursor: default !important; } .nx-task-card.locked:hover { transform: none !important; box-shadow: none !important; border-color: var(--nx-border-strong) !important; } .nx-task-card-icon { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: var(--nx-gold-dim) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .nx-task-card-icon .nx-crypto-icon { font-size: 18px !important; color: var(--nx-gold) !important; } .nx-task-card-icon .nx-crypto-icon.sol { color: #9945FF !important; } .nx-task-card-icon .nx-crypto-icon.link { color: #2A5ADA !important; } .nx-task-card-icon .nx-crypto-icon.sui { color: #4DA2FF !important; } .nx-task-card-icon .nx-crypto-icon.xrp { color: #00AAE4 !important; } .nx-task-card-icon .nx-crypto-icon.pi { color: #FFD700 !important; } .nx-task-card-reward { display: flex !important; align-items: baseline !important; gap: 2px !important; } .nx-task-card-reward .nx-reward-amount { font-family: var(--nx-font-display) !important; font-weight: 800 !important; font-size: 16px !important; color: var(--nx-gold) !important; } .nx-task-card-reward .nx-reward-label { font-size: 11px !important; color: var(--nx-text-muted) !important; font-weight: 500 !important; } .nx-task-card-type { font-size: 11px !important; color: var(--nx-text-muted) !important; font-weight: 500 !important; line-height: 1.3 !important; } .nx-task-card-action { display: flex !important; align-items: center !important; gap: 4px !important; font-size: 11px !important; font-weight: 600 !important; color: var(--nx-gold) !important; margin-top: 2px !important; } .nx-task-card-action i { font-size: 11px !important; transition: transform 0.2s ease !important; } .nx-task-card:hover .nx-task-card-action i { transform: translateX(3px) !important; } .nx-task-card-lock { display: flex !important; align-items: center !important; gap: 4px !important; font-size: 10px !important; color: var(--nx-text-faint) !important; font-weight: 500 !important; margin-top: 2px !important; } .nx-task-card-lock i { font-size: 11px !important; } } /* Extra small mobile (320px - 374px) */ @media (max-width: 374px) { .nx-task-grid { gap: var(--nx-space-2) !important; } .nx-task-card { min-height: 120px !important; padding: var(--nx-space-2) !important; } .nx-task-card-icon { width: 32px !important; height: 32px !important; } .nx-task-card-icon .nx-crypto-icon { font-size: 14px !important; } .nx-task-card-reward .nx-reward-amount { font-size: 14px !important; } .nx-task-card-type { font-size: 10px !important; } .nx-task-card-action { font-size: 10px !important; } } /* ============================================================ 18. TEXT SIZE & BOLDNESS FIXES - APP-LIKE TYPOGRAPHY ============================================================ */ /* Task card text improvements */ .nx-task-card-reward .nx-reward-amount { font-size: clamp(20px, 3vw, 28px) !important; font-weight: 800 !important; letter-spacing: 0.5px !important; } .nx-task-card-reward .nx-reward-label { font-size: 13px !important; font-weight: 600 !important; } .nx-task-card-type { font-size: 13px !important; font-weight: 600 !important; color: var(--nx-text) !important; } .nx-task-card-action { font-size: 13px !important; font-weight: 700 !important; } .nx-task-card-action i { font-size: 13px !important; } .nx-task-card-lock { font-size: 12px !important; font-weight: 600 !important; } /* Bottom navigation text improvements */ .nx-bottom-nav-item { font-size: 12px !important; font-weight: 600 !important; } .nx-bottom-nav-item i { font-size: 24px !important; } .nx-bottom-nav-item span { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; } /* Mobile drawer text improvements */ .nx-mobile-drawer-link { font-size: 16px !important; font-weight: 600 !important; } .nx-mobile-drawer-link i { font-size: 22px !important; } /* Dashboard stats text improvements */ .nx-stat-card .nx-stat-value { font-size: 28px !important; font-weight: 800 !important; } .nx-stat-card .nx-stat-label { font-size: 13px !important; font-weight: 600 !important; } /* Activity feed text improvements */ .nx-activity-item { padding: var(--nx-space-4) var(--nx-space-4) !important; } .nx-activity-item > div:first-of-type { font-weight: 600 !important; font-size: 15px !important; } .nx-activity-item .nx-small { font-size: 13px !important; font-weight: 500 !important; } .nx-activity-item > div:last-of-type { font-weight: 700 !important; font-size: 16px !important; } /* Section heading improvements */ .nx-h3 { font-weight: 700 !important; font-size: clamp(20px, 2.5vw, 26px) !important; letter-spacing: -0.3px !important; } .nx-body { font-size: 16px !important; font-weight: 500 !important; line-height: 1.6 !important; } .nx-small { font-size: 14px !important; font-weight: 500 !important; } /* Research Points card */ .nx-research-points .nx-small { font-size: 14px !important; font-weight: 600 !important; letter-spacing: 1px !important; } .nx-research-points .nx-body { font-size: 17px !important; font-weight: 600 !important; } /* Quick stats card */ .nx-grid-2 .nx-card .nx-small { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.8px !important; } .nx-grid-2 .nx-card [style*="font-family:var(--nx-font-display)"] { font-size: clamp(22px, 3vw, 30px) !important; font-weight: 800 !important; } .nx-grid-2 .nx-card .nx-body { font-size: 15px !important; font-weight: 600 !important; } /* Wallet summary */ .nx-card .nx-small[style*="text-transform: uppercase"] { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.8px !important; } .nx-card [style*="font-family:var(--nx-font-display)"] { font-weight: 800 !important; } .nx-card .nx-body[style*="color:var(--nx-text-faint)"] { font-size: 15px !important; font-weight: 500 !important; } /* Empty state text */ .nx-empty .nx-h3 { font-size: 20px !important; font-weight: 700 !important; } .nx-empty .nx-body { font-size: 16px !important; font-weight: 500 !important; } .nx-empty .nx-small { font-size: 14px !important; font-weight: 500 !important; } /* Greeting text */ .nx-page-header .nx-h1 { font-size: clamp(28px, 5vw, 40px) !important; font-weight: 800 !important; } .nx-page-header .nx-body { font-size: 18px !important; font-weight: 500 !important; } /* Alert text */ .nx-alert { font-size: 15px !important; font-weight: 500 !important; } .nx-alert strong { font-weight: 700 !important; } /* Button text */ .nx-btn { font-weight: 700 !important; font-size: 15px !important; letter-spacing: 0.3px !important; } .nx-btn-sm { font-size: 13px !important; font-weight: 700 !important; } /* Badge text */ .nx-badge { font-size: 12px !important; font-weight: 700 !important; } /* Mobile topbar brand */ .nx-mobile-topbar span { font-weight: 800 !important; font-size: 18px !important; } /* ============================================================ 19. MOBILE OVERRIDES FOR TEXT SIZES ============================================================ */ @media (max-width: 599px) { /* Task card mobile text */ .nx-task-card-reward .nx-reward-amount { font-size: 18px !important; font-weight: 800 !important; } .nx-task-card-reward .nx-reward-label { font-size: 12px !important; font-weight: 600 !important; } .nx-task-card-type { font-size: 12px !important; font-weight: 600 !important; } .nx-task-card-action { font-size: 12px !important; font-weight: 700 !important; } /* Bottom nav mobile */ .nx-bottom-nav-item { font-size: 11px !important; font-weight: 600 !important; } .nx-bottom-nav-item i { font-size: 22px !important; } .nx-bottom-nav-item span { font-size: 10px !important; font-weight: 600 !important; } /* Greeting mobile */ .nx-page-header .nx-h1 { font-size: 24px !important; font-weight: 800 !important; } .nx-page-header .nx-body { font-size: 16px !important; font-weight: 500 !important; } /* Research points mobile */ .nx-research-points [style*="font-size:clamp(36px"] { font-size: 32px !important; font-weight: 800 !important; } /* Quick stats mobile */ .nx-grid-2 .nx-card [style*="font-family:var(--nx-font-display)"] { font-size: 20px !important; font-weight: 800 !important; } /* Section headings mobile */ .nx-h3 { font-size: 18px !important; font-weight: 700 !important; } .nx-body { font-size: 15px !important; font-weight: 500 !important; } .nx-small { font-size: 13px !important; font-weight: 500 !important; } } /* ============================================================ 20. EXTRA SMALL MOBILE (320-374px) ============================================================ */ @media (max-width: 374px) { .nx-task-card-reward .nx-reward-amount { font-size: 15px !important; font-weight: 800 !important; } .nx-task-card-type { font-size: 11px !important; font-weight: 600 !important; } .nx-task-card-action { font-size: 11px !important; font-weight: 700 !important; } .nx-page-header .nx-h1 { font-size: 22px !important; font-weight: 800 !important; } .nx-research-points [style*="font-size:clamp(36px"] { font-size: 28px !important; font-weight: 800 !important; } .nx-bottom-nav-item span { font-size: 9px !important; } .nx-bottom-nav-item i { font-size: 20px !important; } } /* ============================================================ 21. RESEARCH PLAYER - MOBILE RESPONSIVE ============================================================ */ /* Mobile first - research player */ #researchPlayer { transition: all 0.3s ease; } #researchPlayer .nx-card { padding: var(--nx-space-4); } /* Question options - touch friendly */ .nx-option-label { padding: var(--nx-space-3) var(--nx-space-4) !important; font-size: 16px !important; touch-action: manipulation; cursor: pointer; min-height: 52px; border-radius: var(--nx-radius-md); background: var(--nx-surface-2); border: 2px solid var(--nx-border); transition: all 0.2s ease; } .nx-option-label:active { transform: scale(0.98); } .nx-option-label input[type="radio"], .nx-option-label input[type="checkbox"] { width: 22px; height: 22px; min-width: 22px; min-height: 22px; accent-color: var(--nx-gold); cursor: pointer; } .nx-option-label.selected { border-color: var(--nx-gold); background: var(--nx-gold-dim); } /* Rating buttons - touch friendly */ .nx-rating-btn { min-width: 52px !important; min-height: 52px !important; font-size: 20px !important; padding: 12px 16px !important; border-radius: var(--nx-radius-md) !important; background: var(--nx-surface-2) !important; border: 2px solid var(--nx-border) !important; color: var(--nx-text-muted) !important; font-weight: 700 !important; cursor: pointer; transition: all 0.2s ease; touch-action: manipulation; } .nx-rating-btn:active { transform: scale(0.95); } .nx-rating-btn.active { background: var(--nx-gold) !important; color: #000 !important; border-color: var(--nx-gold) !important; } /* Progress bar */ #progressBar { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--nx-gold), #FFA500); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* Navigation buttons - mobile friendly */ #nextBtn, #prevBtn { min-height: 48px; min-width: 80px; font-size: 15px; font-weight: 600; touch-action: manipulation; border-radius: var(--nx-radius-md); } #nextBtn:active, #prevBtn:active { transform: scale(0.96); } /* Mobile specific overrides */ @media (max-width: 767px) { #researchPlayer .nx-card { padding: var(--nx-space-3); } .nx-option-label { padding: var(--nx-space-3) var(--nx-space-3) !important; font-size: 15px !important; min-height: 48px; } .nx-option-label input[type="radio"], .nx-option-label input[type="checkbox"] { width: 20px; height: 20px; min-width: 20px; min-height: 20px; } .nx-rating-btn { min-width: 44px !important; min-height: 44px !important; font-size: 18px !important; padding: 10px 12px !important; } #nextBtn, #prevBtn { min-height: 44px; min-width: 72px; font-size: 14px; } #researchContent .nx-h3 { font-size: 16px !important; } #researchContent .nx-body { font-size: 14px !important; } /* Progress text */ #progressText { font-size: 11px !important; } #progressPercent { font-size: 13px !important; } } /* Tablet */ @media (min-width: 768px) and (max-width: 1023px) { #researchPlayer .nx-card { padding: var(--nx-space-5); } .nx-option-label { padding: var(--nx-space-3) var(--nx-space-5) !important; font-size: 16px !important; } } /* Desktop */ @media (min-width: 1024px) { .nx-option-label:hover { border-color: var(--nx-gold-dim); background: var(--nx-surface); } } /* Safe area for notched phones */ @supports (padding: max(0px)) { .nx-bottom-nav { padding-bottom: max(env(safe-area-inset-bottom), 8px); } #researchPlayer { padding-bottom: max(env(safe-area-inset-bottom), var(--nx-space-4)); } } /* Smooth scroll for research content */ #researchContent { scroll-behavior: smooth; } /* Loading spinner for research player */ .nx-research-loading { display: flex; align-items: center; justify-content: center; padding: var(--nx-space-8); gap: var(--nx-space-3); } .nx-research-loading .nx-spinner { width: 32px; height: 32px; border: 3px solid var(--nx-border); border-top-color: var(--nx-gold); border-radius: 50%; animation: nx-spin 0.8s linear infinite; } /* Research card responsive adjustments */ .nx-task-card { touch-action: manipulation; } .nx-task-card:active { transform: scale(0.97); } /* Ensure no horizontal overflow on mobile */ .nx-card, .nx-shell, .nx-main, .nx-content { max-width: 100%; overflow-x: hidden; } /* Fix for long words in research content */ #researchContent { word-wrap: break-word; overflow-wrap: break-word; } /* ============================================================ 22. FLOATING TELEGRAM CHANNEL BUTTON (main dashboard page only) Markup lives solely in app/views/dashboard/index.php -- these classes exist here so they're reusable if ever needed elsewhere, but nothing else currently references them. Telegram's own brand blue (#229ED9) is used instead of --nx-gold: this is a third-party brand mark linking off-platform, not a Nexolly UI action, so it should read as distinct from primary buttons/links rather than themed to match them. It is NOT remapped by the light-theme override above, on purpose, for the same reason -- Telegram's own color identity should stay constant regardless of app theme, the same way the brand accent hues (gold/blue/green/red/amber) already do. z-index: 90 -- above ordinary page content, but intentionally BELOW the sidebar/bottom-nav (100) and mobile drawer/overlay (999/1000), so it can never sit on top of navigation or a modal. ============================================================ */ .nx-floating-telegram { position: fixed; right: var(--nx-space-6); bottom: var(--nx-space-6); z-index: 90; display: inline-flex; align-items: center; gap: var(--nx-space-2); padding: 13px 22px 13px 16px; background: #229ED9; color: #FFFFFF; border-radius: var(--nx-radius-full); text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1; box-shadow: 0 6px 20px rgba(34,158,217,0.35), var(--nx-shadow-md); border: 1px solid rgba(255,255,255,0.15); transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; } .nx-floating-telegram:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(34,158,217,0.45), var(--nx-shadow-md); opacity: .96; } .nx-floating-telegram:active { transform: translateY(0) scale(0.98); } .nx-floating-telegram:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(34,158,217,0.4), 0 6px 20px rgba(34,158,217,0.35); } .nx-floating-telegram-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .nx-floating-telegram-icon i { font-size: 22px; line-height: 1; } .nx-floating-telegram-label { white-space: nowrap; } /* Mobile/tablet (bottom nav is visible below 1024px, see section 3): collapse to a circular icon-only button and lift it above the 72px-tall bottom nav (section 14) plus the device safe area, so it can never cover bottom-nav items. */ @media (max-width: 1023px) { .nx-floating-telegram { right: var(--nx-space-4); bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--nx-space-4)); padding: 0; width: 52px; height: 52px; justify-content: center; gap: 0; } .nx-floating-telegram-label { display: none; } .nx-floating-telegram-icon i { font-size: 24px; } } /* Extra-small phones: slightly smaller button, tighter edge spacing */ @media (max-width: 374px) { .nx-floating-telegram { width: 46px; height: 46px; right: var(--nx-space-3); bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--nx-space-3)); } .nx-floating-telegram-icon i { font-size: 21px; } }