/* ═══════════════════════════════════════════════════════════════════════════ XC Wiki — Brand Design System (Mintlify-style layout) Typefaces: DM Sans · JetBrains Mono (code) ═══════════════════════════════════════════════════════════════════════════ */ /* ── IAN Brand Tokens ──────────────────────────────────────────────────────── */ :root { --ian-amber-gold: #FFB500; --ian-coral-red: #FF5757; --ian-sky-blue: #13A3E0; --ian-fresh-green: #7ED956; --ian-ink-black: #0B111A; --ian-azure-blue: #00A9EB; --success: #7ED956; --success-bg: rgba(126,217,86,0.10); --warning: #FFB500; --warning-bg: rgba(255,181,0,0.10); --danger: #FF7070; --danger-bg: rgba(255,112,112,0.10); --info: #47BEF0; --info-bg: rgba(71,190,240,0.10); --ian-gradient-primary: linear-gradient(to right, #FFB500 0%, #FF5757 35%, #13A3E0 80%, #7ED956 100%); --ian-gradient-tagline: linear-gradient(to right, #FFB500 0%, #FF5757 50%, #239ED7 100%); /* ============================ THEME VARIABLES ============================ */ --bg-main: #ffffff; --bg-surface: #f8fafc; --text-main: #0f172a; --text-muted: #64748b; --border-default: #e5e7eb; --navbar-bg: #2c2f33; --navbar-border: #111111; --navbar-text: #ffffff; --section-title-bg: #2c2f33; --section-title-color: #eaeaea; --cap-card-title-color: #0f172a; --cap-card-icon-box-bg: #18191a; --cards-section-panel-bg: #ffffffb1; --cards-section-panel-border: #f0e5e5; --capability-card-bg: #fffefb3a; --capability-card-border: #8f8c8c; --capability-inactive-bg: color-mix(in srgb, var(--capability-card-bg) 65%, #d0d0d0); --capability-inactive-border: color-mix(in srgb, var(--capability-card-border) 55%, #9a9a9a); --capability-inactive-text: color-mix(in srgb, var(--cap-card-title-color) 62%, #8b8b8b); --capability-inactive-icon-bg: #6b6b6b66; --capability-inactive-icon-border: #5f5f5f88; --capability-inactive-icon-color: #f0f0f0; --dashboard-panel-bg: #e2e2dd7e; --dashboard-panel-border: #b0b09b; --kpi-card-bg: #2c2f33; --kpi-card-border: #23262a; } body { font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } html { direction: rtl; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, #8f8c8c 75%, transparent) transparent; } body { direction: rtl; } header, main, .hub-root, .hub-page, .login-root, .login-card-wrapper, .navbar, .cards-section-panel, .dashboard-panel { direction: ltr; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 4px; height: 4px; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: color-mix(in srgb, #a9a8a8 75%, transparent); border-radius: 999px; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: #8f8c8c; } /* LIGHT THEME EXAMPLE (force with class="light" on ) */ .light { --bg-main: #ffffff; --bg-surface: #f8fafc; --text-main: #0f172a; --text-muted: #64748b; --border-default: #e5e7eb; --navbar-bg: #2c2f33; --navbar-border: #111111; --navbar-text: #ffffff; --capability-inactive-bg: color-mix(in srgb, var(--capability-card-bg) 65%, #d0d0d0); --capability-inactive-border: color-mix(in srgb, var(--capability-card-border) 55%, #9a9a9a); --capability-inactive-text: color-mix(in srgb, var(--cap-card-title-color) 62%, #8b8b8b); --capability-inactive-icon-bg: #6b6b6b66; --capability-inactive-icon-border: #5f5f5f88; --capability-inactive-icon-color: #f0f0f0; } /* DARK THEME */ .dark { --bg-main: #0e0f12; --bg-surface: #020617; --text-main: #e5e7eb; --text-muted: #94a3b8; --border-default: #1e293b; --navbar-bg: #18191d55; --navbar-border: #404348; --navbar-text: #e5e7eb; --section-title-bg: #505357a3; --section-title-color: #d4d8dd89; --cap-card-title-color: #e5e7eb; --cap-card-icon-box-bg: #3e3e4059; --cards-section-panel-bg: #121415b4; --cards-section-panel-border: #2b3038; --capability-card-bg: #0f0f0f1b; --capability-card-border: #5b626a77; --capability-inactive-bg: #2e313acc; --capability-inactive-border: #585b6cb3; --capability-inactive-text: #b7b8c8; --capability-inactive-icon-bg: #4a485d99; --capability-inactive-icon-border: #65627cb8; --capability-inactive-icon-color: #eceaf6; --dashboard-panel-bg: #2c2f33ad; --dashboard-panel-border: #41444a6f; --kpi-card-bg: #0f0f0f1b; --kpi-card-border: #848b93a3; } /* ============================ GLOBAL STYLES ============================ */ /* ============================ BASE STYLES ============================ */ .hub-page { max-width: 1200px; margin: 80px auto 0; min-height: calc(100vh - 80px); display: flex; flex-direction: column; } .hub-root { position: relative; min-height: 100vh; overflow-x: hidden; overflow-y: visible; background: var(--bg-main); } .hub-root::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 130% 110% at 45% 28%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 45%, transparent 75%), radial-gradient(ellipse 45% 35% at 70% 5%, rgba(255, 255, 255, 1) 0%, transparent 55%); } .dark .hub-root::before { display: none; } .hub-root > header { position: relative; z-index: 1100; } .hub-root > main { position: relative; z-index: 10; } .hub-root > main, .hub-page, .hub-top-container, .hub-header, .hub-cards-section, .cards-grid { background: transparent; } .hub-bg-shape { z-index: 0; } body { background: var(--bg-main); color: var(--text-main); } main { background: var(--bg-surface); color: var(--text-main); } /* NAVBAR */ .navbar { height: 48px; min-height: 48px; background: var(--navbar-bg); color: var(--navbar-text); position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; border: none; border-bottom: 1px solid var(--navbar-border); border-radius: 0; font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* LEFT */ .navbar-left { display: flex; align-items: center; gap: 10px; } .navbar-brand-link { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; flex-shrink: 0; cursor: pointer; text-decoration: none; color: inherit; transition: opacity 0.15s ease; } .navbar-brand-link:hover, .navbar-brand-link:focus { opacity: 0.85; text-decoration: none; color: inherit; } .navbar-logo { width: 32px; height: 32px; border-radius: 0; background: transparent; color: inherit; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; object-fit: contain; } .navbar-brand-text { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; flex-shrink: 0; font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 0.5px; line-height: 1; } .navbar-brand-ian { background: var(--ian-gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .navbar-brand-keyhub { background: var(--ian-gradient-tagline); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .navbar-logo-text { text-shadow: 0 0 8px var(--cap-card-accent-color); } .navbar-user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .navbar-user-avatar-fallback, .navbar-user-avatar-icon { width: 32px; height: 32px; border-radius: 50%; background: #ffffff; color: #1a1a1a; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; } .navbar-user-avatar-icon svg { width: 18px; height: 18px; stroke-width: 2; } /* RIGHT */ .navbar-right { display: flex; align-items: center; gap: 12px; min-width: 0; } /* ICON BUTTON */ .navbar-icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--navbar-border); background: transparent; color: var(--navbar-text); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background-color 150ms ease, border-color 150ms ease; } .navbar-icon-btn:hover { background: color-mix(in srgb, var(--navbar-text) 10%, transparent); border-color: color-mix(in srgb, var(--navbar-text) 30%, transparent); } .navbar-logout-link { text-decoration: none; } .navbar-logout-icon { width: 18px; height: 18px; } .theme-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .theme-icon[hidden] { display: none !important; } .theme-icon svg { width: 18px; height: 18px; display: block; } /* SUN svg has dark strokes; brighten it so it is visible on dark backgrounds. */ .theme-icon-sun svg { filter: brightness(0) invert(1); } /* username as a "pill" */ .navbar-user-pill { display: inline-flex; align-items: center; flex: 0 1 auto; width: fit-content; max-width: min(68vw, 520px); overflow: visible; text-overflow: clip; white-space: nowrap; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; background: transparent; border: 1px solid var(--navbar-border); color: var(--navbar-text); font-size: 14px; font-weight: 500; height: 44px; transition: background-color 150ms ease, border-color 150ms ease; } .navbar-user-trigger.navbar-user-pill:hover { background: color-mix(in srgb, var(--navbar-text) 6%, transparent); border-color: color-mix(in srgb, var(--navbar-text) 25%, transparent); } /* User pill dropdown */ .navbar-user-wrapper { position: relative; display: inline-flex; z-index: 9999; } .navbar-user-trigger { border: none; cursor: pointer; font: inherit; color: inherit; } .navbar-user-trigger[aria-expanded="true"] .navbar-user-chevron { transform: rotate(180deg); } .navbar-user-chevron { display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; opacity: 0.85; transition: transform 150ms ease; } .navbar-user-chevron svg { width: 14px; height: 14px; } /* ── Inline stats (tokens + rank) in navbar ── */ .navbar-inline-stats-link { display: inline-flex; align-items: center; text-decoration: none; color: inherit; border-radius: 999px; transition: background-color 150ms ease, box-shadow 150ms ease; } .navbar-inline-stats-link:hover { text-decoration: none; } .navbar-inline-stats-link:hover .navbar-inline-stats { background: color-mix(in srgb, var(--ian-amber-gold, #f5a623) 10%, transparent); border-color: color-mix(in srgb, var(--ian-amber-gold, #f5a623) 30%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--ian-amber-gold, #f5a623) 12%, transparent); } .navbar-inline-stats { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px; border-radius: 999px; background: color-mix(in srgb, #fff 5%, transparent); border: 1px solid color-mix(in srgb, #fff 10%, transparent); height: 38px; transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } .navbar-inline-stat { display: inline-flex; align-items: center; gap: 8px; } .navbar-inline-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; } .navbar-inline-stat-icon--tokens { background: color-mix(in srgb, var(--ian-amber-gold, #f5a623) 18%, transparent); color: var(--ian-amber-gold, #f5a623); } .navbar-inline-stat-icon--rank { background: color-mix(in srgb, var(--ian-sky-blue, #4aa3df) 18%, transparent); color: var(--ian-sky-blue, #4aa3df); } .navbar-inline-stat-icon svg { width: 14px; height: 14px; } .navbar-inline-stat-text { display: flex; flex-direction: column; line-height: 1.15; gap: 0px; } .navbar-inline-stat-value { font-size: 13px; font-weight: 700; color: #f1f1f1; letter-spacing: -0.01em; } .navbar-inline-stat-label { font-size: 9px; font-weight: 500; color: color-mix(in srgb, #fff 50%, transparent); text-transform: uppercase; letter-spacing: 0.06em; } .navbar-inline-stat-divider { width: 1px; height: 20px; background: color-mix(in srgb, #fff 12%, transparent); flex-shrink: 0; } .navbar-inline-stats-loading { display: flex; align-items: center; justify-content: center; padding: 0 8px; min-width: 80px; } .navbar-inline-stats-loading .lb-spinner { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, #fff 20%, transparent); border-top-color: var(--ian-amber-gold, #f5a623); border-radius: 50%; animation: navbar-spin 700ms linear infinite; } @keyframes navbar-spin { to { transform: rotate(360deg); } } /* Navbar stays dark in light mode — no text color overrides needed for inline stats */ /* ── User dropdown (theme toggle + logout) ── */ .navbar-user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: #1f1f1f; border: 1px solid color-mix(in srgb, #fff 8%, transparent); border-radius: 10px; padding: 4px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); z-index: 9999; display: flex; flex-direction: column; gap: 2px; } .navbar-user-dropdown[hidden] { display: none; } .navbar-dropdown-action { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; transition: background-color 120ms ease; cursor: pointer; } .navbar-dropdown-action:hover { background: color-mix(in srgb, #fff 8%, transparent); } .navbar-dropdown-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: none; background: color-mix(in srgb, #fff 6%, transparent); color: var(--navbar-text); cursor: pointer; padding: 0; flex-shrink: 0; transition: background-color 120ms ease, color 120ms ease; } .navbar-dropdown-action-icon svg { width: 15px; height: 15px; } .navbar-dropdown-action-label { font-size: 13px; font-weight: 500; color: color-mix(in srgb, #fff 85%, transparent); transition: color 120ms ease; } .navbar-dropdown-action-logout { text-decoration: none; color: inherit; } .navbar-dropdown-action-logout:hover .navbar-dropdown-action-icon { color: #ef4444; background: color-mix(in srgb, #ef4444 12%, transparent); } .navbar-dropdown-action-logout:hover .navbar-dropdown-action-label { color: #ef4444; } /* Light theme overrides for dropdown */ html.light .navbar-user-dropdown { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); } html.light .navbar-dropdown-action:hover { background: rgba(0, 0, 0, 0.05); } html.light .navbar-dropdown-action-icon { background: rgba(0, 0, 0, 0.05); color: #333; } html.light .navbar-dropdown-action-label { color: #333; } html.light .navbar-dropdown-action-logout:hover .navbar-dropdown-action-icon { color: #ef4444; background: color-mix(in srgb, #ef4444 8%, transparent); } html.light .navbar-dropdown-action-logout:hover .navbar-dropdown-action-label { color: #ef4444; } .navbar-leaderboard-pill { display: inline-flex; align-items: center; gap: 6px; padding: 1px 12px; border-radius: 999px; background: #333; color: #f1f1f1; font-size: 14px; font-weight: 500; height: 36px; } .navbar-leaderboard-icon { font-size: 14px; line-height: 1; } .navbar-leaderboard-dot { width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--ian-amber-gold) 70%, #fff 30%); opacity: 0.9; } .navbar-controls-pill { display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 0; background: transparent; } .navbar-controls-pill .navbar-icon-btn { width: 40px; height: 40px; background: transparent; border: 1px solid var(--navbar-border); } .navbar-controls-pill .navbar-icon-btn:hover { background: color-mix(in srgb, var(--navbar-text) 10%, transparent); } .navbar-user-name { color: #f1f1f1; } .navbar-user-meta { display: inline-flex; align-items: center; gap: 3px; } .navbar-user-leaderboard { color: #f1f1f1; opacity: 0.85; } .navbar-user-leaderboard::before { content: "•"; display: inline-block; font-size: 0.6em; line-height: 1; vertical-align: middle; margin: 0 3px 0 1px; opacity: 0.7; } .navbar-leaderboard-pill .navbar-user-leaderboard::before { content: none; } .navbar-leaderboard-pill .navbar-user-leaderboard { color: var(--ian-amber-gold); opacity: 1; } /* ── Tooltip ─────────────────────────────────────── */ .tooltip-wrapper { position: relative; display: inline-flex; align-items: center; } .tooltip { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #f7f6f6; color: #131313; font-size: 12px; padding: 4px 10px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 100; } .tooltip-wrapper:hover .tooltip { opacity: 1; } .tooltip-top { bottom: 100%; margin-bottom: 8px; } .tooltip-bottom { top: 100%; margin-top: 8px; } .tooltip-left { right: 100%; margin-right: 8px; left: auto; transform: none; } .tooltip-right { left: 100%; margin-left: 8px; transform: none; } .navbar-login-link { text-decoration: none; } .navbar-login-link:hover { text-decoration: underline; text-underline-offset: 2px; } /*Welcome^*/ .header-title { font-size: calc(1.8rem + 5px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.1rem; text-align: center; } .header-lead { font-size: 1.6rem; font-weight: 400; line-height: 1.4; max-width: 520px; } .header-lead span { font-weight: 600; } .header-eyebrow { font-size: 1.8rem; font-weight: 700; margin: -0.1rem 0 0.9rem; text-align: center; letter-spacing: 0.04em; } /* cards container --------------------------------------------------------------*/ .section-title { display: inline-flex; align-items: center; margin: 0; background: var(--section-title-bg); color: var(--section-title-color); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 10px 13px; font-size: 0.98rem; font-weight: 700; line-height: 1.1; } .hub-page .section-title { margin-left: calc((100% - 85%) / 2); } .cards-grid { display: grid; /* <- KEY */ grid-template-columns: repeat(3, 1fr); /* 3 columns */ gap: 20px; grid-auto-rows: 1fr; align-items: stretch; width: 100%; box-sizing: border-box; } .cards-section-panel { background: var(--cards-section-panel-bg); border: 1px solid var(--cards-section-panel-border); border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; width: 85%; padding: 14px; box-sizing: border-box; margin: 0 auto 24px; min-height: fit-content; overflow: visible; } .hub-cards-section { width: 100%; max-width: 100%; min-height: auto; box-sizing: border-box; } .capability-card { background: var(--capability-card-bg); border: 1px solid var(--capability-card-border); --cap-card-accent-color: var(--ian-amber-gold); border-radius: 14px; padding: 22px; width: 100%; height: 100%; box-sizing: border-box; position: relative; overflow: hidden; transition: transform 160ms ease, opacity 160ms ease, filter 160ms ease, border-color 160ms ease; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 12px 24px rgba(0,0,0,0.1); min-height: 114px; } .capability-card-link { display: flex; height: 100%; color: inherit; text-decoration: none; } .capability-card-link:hover .capability-card { transform: translateY(-1px); } .capability-card--inactive { background: var(--capability-inactive-bg); border-color: var(--capability-inactive-border); filter: grayscale(1); opacity: 0.78; cursor: default; } .capability-card--inactive .cap-card-title, .capability-card--inactive .cap-card-description { color: var(--capability-inactive-text); } .capability-card--inactive .cap-card-icon-box { background: var(--capability-inactive-icon-bg); border-color: var(--capability-inactive-icon-border); box-shadow: none; color: var(--capability-inactive-icon-color); } .cap-card-ribbon { position: absolute; top: 12px; right: 0; padding: 4px 10px 4px 8px; background: #000; color: #fff; font-size: 0.43rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; border-radius: 999px 0 0 999px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.24); pointer-events: none; z-index: 1; } .cap-card-category { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; } .cap-card-title-row { display: flex; align-items: center; justify-content: flex-start; gap: 12px; } .cap-card-title { font-size: 1.2rem; font-weight: 600; line-height: 1.25; color: var(--cap-card-title-color); margin: 0; } .cap-card-icon-box { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border: 0.5px solid var(--cap-card-icon-box-bg); border-radius: 10px; background: var(--cap-card-icon-box-bg); box-shadow: 0 0 2px var(--cap-card-icon-box-bg); color: #fff; font-size: 1.1rem; } .cap-card-icon-box svg { width: 18px; height: 18px; stroke-width: 2; } .cap-card-description { font-size: 0.9rem; opacity: 0.75; margin: 0; } .cap-card-footer { margin-top: auto; /* pushes footer to the bottom */ display: flex; align-items: center; justify-content: space-between; } .cap-card-meta { font-size: 0.75rem; opacity: 0.6; } .cap-card-accent { width: 28px; height: 3px; border-radius: 0.5px; background: var(--cap-card-accent-color); box-shadow: 0 0 2px var(--cap-card-accent-color) } /*box-shadow: 0 0 8px var(--cap-card-accent-color);*/ .dark .capability-card { box-shadow: none; } /* dashboard container --------------------------------------------------------------*/ /* ===== DASHBOARD PANEL (BACKGROUND) ===== */ .dashboard-panel { display: block; width: 0; min-width: 0; padding: 0; margin: 0; border: 0; transform: none; overflow: hidden; } .dashboard-kpi-stack { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; } .kpi-card { display: flex; flex-direction: column; background: var(--kpi-card-bg); border: 1px solid var(--kpi-card-border); color: rgba(238, 234, 234, 0.826); border-radius: 11px; padding: 14px 17px; min-width: calc(183px * 1.96); } .kpi-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; } .kpi-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ian-amber-gold); margin: 0; } .kpi-badge { font-size: 0.65rem; background: var(--ian-amber-gold); color: var(--ian-ink-black); font-weight: 600; padding: 3px 6px; border-radius: 999px; } .kpi-value { font-size: 1.4rem; font-weight: 700; line-height: 1.1; } /* hub top container --------------------------------------------------------------*/ .hub-top-container { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; width: 92%; margin: 0 auto; } .hub-header { margin: 0 auto; text-align: center; } /* hub dashboard --------------------------------------------------------------*/ .hub-dashboard { display: flex; gap: 16px; } /* login page styles --------------------------------------------------------------*/ .login-bg-shape { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: transparent; } .login-bg-shape svg { width: 100%; height: 100%; } /* form */ .login-form { display: flex; flex-direction: column; gap: 1rem; } .login-card-wrapper { position: absolute; z-index: 10; min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 48px) clamp(20px, 6vw, 72px); box-sizing: border-box; } .login-card { background-color: #fffefb87; padding: clamp(28px, 4vw, 56px); width: fit-content; max-width: min(420px, 100%); border-radius: 16px; border: 1px solid #bfc3c8; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.333); position: relative; } .login-card.login-card-local { width: min(300px, 100%); max-width: 300px; padding: 24px 20px 19px; background: rgba(255, 255, 255, 0.88); border: 1px solid #bfc3c8; border-radius: 13px; box-shadow: none; display: flex; flex-direction: column; align-items: center; } .dark .login-card, .dark .login-card.login-card-sso { background-color: #101722; border-color: #5f6b7e; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55); } .dark .login-card.login-card-local { background: #1a2029; border-color: #586172; box-shadow: none; } .login-card.login-card-sso { width: min(420px, 100%); max-width: 420px; padding: 36px 32px 40px; background-color: #ffffff; border-radius: 20px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; align-items: center; gap: 20px; border: 1px solid #bfc3c8; } .login-logo { width: 220px; height: auto; } .login-logo-local { width: 180px; margin-bottom: 6px; } .brand-title { margin: 0; font-size: 44px; line-height: 0.95; font-weight: 700; text-align: center; background: var(--ian-gradient-tagline); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-title-local { margin-bottom: 26px; font-size: 26px; } .brand-line { display: block; } .sso-button { margin-top: 26px; width: 100%; height: 52px; background-color: #fbbf24; color: #111827; font-size: 16px; font-weight: 600; border: 1px solid #d9dee5; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; } .sso-button:hover { background-color: #f59e0b; } .sso-button:active { transform: translateY(1px); } .sso-icon { width: 22px; height: 22px; stroke-width: 2.25; } .sso-icon-svg { width: 20px; height: 20px; display: inline-block; vertical-align: middle; } .login-card-sso .login-form { width: 100%; } .login-page-theme-toggle { position: absolute; top: clamp(16px, 3vw, 28px); right: clamp(16px, 4vw, 36px); z-index: 2; width: 40px; height: 40px; border: 2px solid color-mix(in srgb, var(--text-main) 60%, var(--border-default)); background: color-mix(in srgb, var(--bg-main) 86%, transparent); color: var(--text-main); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-main) 85%, transparent); } .login-page-theme-toggle:hover { background: color-mix(in srgb, var(--text-main) 12%, var(--bg-main)); } .dark .login-page-theme-toggle .theme-icon-sun svg { filter: none; } .login-title { color: #000; } .login-title-local { margin: 0 0 23px; font-size: 1.92rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: #0f172a; text-align: center; } .dark .login-title { color: #f8fafc; } .dark .login-title-local { color: #f8fafc; } @media (max-width: 900px) { .login-card-wrapper { justify-content: center; } } @media (max-width: 900px) { .hub-page { margin: 64px 0 0; min-height: auto; padding: 0 12px 20px; box-sizing: border-box; } .hub-top-container { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; margin: 0; } .hub-header { width: 100%; } .dashboard-panel { width: 0; min-width: 0; margin-right: 0; padding: 0; transform: none; border: 0; box-sizing: border-box; overflow: hidden; } .dashboard-kpi-stack { align-items: stretch; } .kpi-card { min-width: 0; width: 100%; box-sizing: border-box; } .cards-section-panel { width: 100%; margin-bottom: 16px; box-sizing: border-box; } .hub-page .section-title { margin: 12px 0 0; } .cards-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } } @media (min-width: 600px) and (max-width: 900px) { .header-title, .header-eyebrow, .header-lead { text-align: center; } .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* wrapper field */ .login-field { display: flex; flex-direction: column; background-color: #f7f4ea0a; } .dark .login-field { background-color: transparent; } .login-form-local { width: 100%; gap: 14px; } .login-form-local .login-field { width: 100%; } .login-label { margin: 0 0 6px; color: #0f172a; font-size: 0.6rem; font-weight: 700; line-height: 1.2; } .dark .login-label { color: #f8fafc; } /* inputs */ .login-input { width: 90%; box-sizing: border-box; border-radius: 8px; border: 1px solid #111; padding: 0.65rem 0.9rem; font-size: 0.95rem; background-color: #f9f6ed1f; color: #111827; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .login-input-local, .login-password-wrap { width: 100%; } .login-input-local { width: 100%; min-height: 36px; border: 1px solid #d9dee5; border-radius: 7px; padding: 0 13px; background-color: #f3f4f6; color: #111827; font-size: 0.6rem; } .dark .login-input { border-color: #7a8494; background-color: #1a2432; color: #f3f4f6; } .dark .login-input-local { border-color: #313947; background-color: #262c34; color: #f8fafc; } .login-input::placeholder { color: #9ca3af; } .login-input-local::placeholder { color: #6b7280; } .dark .login-input::placeholder { color: #b8c0cc; } .dark .login-input-local::placeholder { color: #9aa3af; } .login-input:focus { border-color: #111; box-shadow: 0 0 0 1px #111; } .login-input-local:focus { border-color: #cbd5e1; box-shadow: none; } .dark .login-input:focus { border-color: #d3d8df; box-shadow: 0 0 0 1px #d3d8df; } .dark .login-input-local:focus { border-color: #4b5563; box-shadow: none; } .login-password-wrap { position: relative; width: 90%; box-sizing: border-box; } .login-form-local .login-password-wrap, .login-form-local #login-username, .login-form-local #password-input { width: 100%; } .login-password-input { width: 100%; box-sizing: border-box; padding-right: 2.4rem; } .password-toggle-btn { position: absolute; top: 50%; right: 0.65rem; transform: translateY(-50%); border: 0; background: transparent; color: #4b5563; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; } .password-toggle-btn:hover { color: #111827; } .login-card-local .password-toggle-btn { right: 12px; } .dark .password-toggle-btn { color: #cbd5e1; } .dark .password-toggle-btn:hover { color: #ffffff; } .password-toggle-btn svg { width: 18px; height: 18px; stroke-width: 2; } /* actions container */ .login-actions { margin-top: 0.5rem; } .login-root { position: relative; min-height: 100vh; overflow: hidden; background: #f8fafc10; } .login-root { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; } .dark .login-root { background: #0f1218; } .dark .login-bg-shape svg { filter: invert(1) hue-rotate(180deg); opacity: 0.82; } .login-root::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient( ellipse 78% 58% at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.04) 56%, rgba(255, 255, 255, 0.55) 76%, rgba(255, 255, 255, 0.9) 90%, rgba(255, 255, 255, 0.97) 100% ); } .dark .login-root::after { background: radial-gradient( ellipse 78% 58% at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 56%, rgba(0, 0, 0, 0.48) 76%, rgba(0, 0, 0, 0.72) 90%, rgba(0, 0, 0, 0.84) 100% ); } /* login button – black, full width */ .login-button { width: 100%; border-radius: 9999px; border: none; padding: 0.7rem 1rem; font-size: 0.95rem; font-weight: 600; background-color: #000; color: #f9fafb; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; } .login-button-local { margin-top: 4px; min-height: 37px; border-radius: 7px; background: linear-gradient(180deg, #ffbe38 0%, #f8ad1f 100%); color: #111827; font-size: 0.6rem; font-weight: 700; } .dark .login-button { background-color: #e5e7eb; color: #111827; } .dark .login-button-local { background: linear-gradient(180deg, #ffbe38 0%, #f8ad1f 100%); color: #111827; } .login-button:hover { background-color: #111; } .login-button-local:hover { background: linear-gradient(180deg, #ffc84d 0%, #f4a813 100%); } .dark .login-button:hover { background-color: #f8fafc; } .dark .login-button-local:hover { background: linear-gradient(180deg, #ffc84d 0%, #f4a813 100%); } .login-button:active { transform: translateY(1px); } .dark .sso-button { background-color: #1f2937; color: #fbbf24; border: 1px solid #fbbf24; } .dark .sso-button:hover { background-color: #111827; } .login-alt-link { display: inline-block; margin-top: 0.75rem; color: #111827; text-decoration: underline; text-underline-offset: 2px; font-size: 0.9rem; } /* ── Hub page layout ───────────────────────────────────────────────────────── */ .hub-top-left { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-width: 0; } /* ── Hub Viewer Card (rank + tokens, top-right) ────────────────────────────── */ .hub-viewer-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 100% ); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); min-width: 220px; flex-shrink: 0; align-self: flex-start; margin-left: auto; margin-right: 0; } .dark .hub-viewer-card { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100% ); border-color: rgba(255, 255, 255, 0.10); } /* Light mode: white-on-white is invisible — give the card a real surface. */ html.light .hub-viewer-card, .light .hub-viewer-card { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.85) 100% ); border-color: rgba(11, 17, 26, 0.12); box-shadow: 0 8px 24px rgba(11, 17, 26, 0.08); } html.light .hub-vc-email, .light .hub-vc-email { color: #475569; } html.light .hub-vc-tokens, .light .hub-vc-tokens { color: #475569; } .hub-vc-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .hub-vc-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #FFB500, #FF5757); color: #0B111A; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .hub-vc-avatar--img { background: none; object-fit: cover; width: 36px; height: 36px; } .hub-vc-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .hub-vc-email { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .hub-vc-right { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; } .hub-vc-rank-circle { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #FFB500 0%, #FF5757 50%, #13A3E0 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(255, 181, 0, 0.3); } .hub-vc-rank-num { font-weight: 700; font-size: 13px; color: #fff; } .hub-vc-tokens { font-size: 10px; color: var(--text-muted); white-space: nowrap; } @media (max-width: 900px) { .hub-viewer-card { display: none; } }