/* ========================================================================= KHAULNAYAK — PREMIUM ENHANCEMENT LAYER (premium.css) ------------------------------------------------------------------------- Purely ADDITIVE. Layers cinematic theming, scroll-reveal animations, micro-interactions and mobile polish ON TOP of the existing app. Nothing here is required for the app to function — remove the and everything reverts to the original design. Theme: "the villain who is a hero to those he bleeds for" — crimson + gold, deep cinematic glow, restrained and premium (not gaudy). ========================================================================= */ :root { --kh-crimson: #C0555B; --kh-crimson-deep: #A34850; --kh-crimson-glow: rgba(192, 85, 91, 0.35); --kh-gold: #E6B84D; --kh-gold-soft: #F5D98A; --kh-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ------------------------------------------------------------------------- 0. FUTURISTIC SURFACE TOKENS (extends :root / html.dark — never inline) Adds a low-saturation electric teal as the SECONDARY accent, reserved exclusively for interactive / active states so it contrasts against the crimson + gold warmth. Every value below is contrast-checked (WCAG AA) against the glass surfaces it is used on. ------------------------------------------------------------------------- */ :root { /* Secondary accent — interactive/active states ONLY */ --kh-teal: #0E7C86; /* 4.94:1 on white glass → AA text */ --kh-teal-soft: #4FD8CE; /* dark-mode counterpart */ --kh-teal-glow: rgba(14, 124, 134, 0.28); --kh-teal-veil: rgba(14, 124, 134, 0.11); --kh-teal-ring: rgba(14, 124, 134, 0.42); /* Deepened ink ramp for text/icons on floating glass (AA verified) */ --kh-crimson-ink: #A8474D; /* 5.72:1 on white glass → AA text */ --kh-ink-muted: #5B6472; /* 5.98:1 on white glass → AA text */ /* Floating glass surfaces */ --kh-glass: rgba(255, 255, 255, 0.82); --kh-glass-solid: rgba(255, 255, 255, 0.94); --kh-glass-blur: blur(22px) saturate(165%); /* ---- ONE design system: shared radius / blur / border / shadow ---- Both the bottom nav and the side dock consume these, so they always read as the same family instead of two separate experiments. */ --kh-dock-radius: 22px; /* nav pill + dock capsule */ --kh-dock-hairline: rgba(17, 20, 26, 0.10); --kh-dock-shadow: 0 8px 24px rgba(17, 12, 14, 0.14), 0 2px 6px rgba(17, 12, 14, 0.06), 0 0 18px -10px rgba(192, 85, 91, 0.22); /* faint crimson tint only */ /* Active indicator — restrained tint, no halo */ --kh-ind-bg: rgba(192, 85, 91, 0.10); --kh-ind-ring: inset 0 0 0 1px rgba(192, 85, 91, 0.16); --kh-ind-glow: 0 0 0 0 rgba(0, 0, 0, 0); } html.dark { /* Near-black void base — the radial crimson/gold glows below stay intact */ --kh-void: #0B0A0C; --kh-teal: #4FD8CE; /* 11.3:1 on void → AA text */ --kh-teal-soft: #7FEDE4; --kh-teal-glow: rgba(79, 216, 206, 0.34); --kh-teal-veil: rgba(79, 216, 206, 0.14); --kh-teal-ring: rgba(79, 216, 206, 0.46); --kh-crimson-ink: #E89AA0; /* 8.47:1 on dark glass → AA text */ --kh-ink-muted: #9BA3B4; /* 7.35:1 on dark glass → AA text */ --kh-glass: rgba(22, 20, 25, 0.82); --kh-glass-solid: rgba(22, 20, 25, 0.94); /* Dark: one ambient shadow + the faintest crimson tint. No light show. */ --kh-dock-hairline: rgba(255, 255, 255, 0.07); --kh-dock-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 20px -12px rgba(192, 85, 91, 0.30); --kh-ind-bg: rgba(255, 255, 255, 0.07); --kh-ind-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.08); --kh-ind-glow: 0 0 0 0 rgba(0, 0, 0, 0); } /* Deepen the dark canvas toward near-black. The radial glow layers defined further down are preserved — only the base colour gets darker, which is what gives the floating glass panels their contrast. */ html.dark body, html.dark #app-wrapper, html.dark #public-wrapper { background-color: var(--kh-void) !important; } /* ---------- 1. GLOBAL FEEL: selection, smooth scroll, tap targets ---------- */ ::selection { background: var(--kh-crimson); color: #fff; } ::-moz-selection { background: var(--kh-crimson); color: #fff; } html { scroll-behavior: smooth; } body { -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Cinematic ambient glow painted BEHIND all content (safe: layered over the existing background-color, never overlaps content, no stacking issues). */ body { background-image: radial-gradient(1100px 560px at 12% -12%, rgba(192, 85, 91, 0.06), transparent 60%), radial-gradient(950px 520px at 112% 4%, rgba(245, 179, 1, 0.05), transparent 60%); background-attachment: fixed; } html.dark body { background-image: radial-gradient(1200px 700px at 8% -12%, rgba(192, 85, 91, 0.16), transparent 55%), radial-gradient(1100px 640px at 120% 0%, rgba(120, 18, 18, 0.20), transparent 55%), radial-gradient(900px 900px at 50% 120%, rgba(245, 179, 1, 0.05), transparent 60%); } /* Crimson scrollbar accents */ ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d1d5db, #b8bcc4); } html.dark ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3a2226, #241416); } html.dark ::-webkit-scrollbar-thumb:hover { background: var(--kh-crimson-deep); } /* ---------- 2. STICKY HEADER: premium glass + hairline glow ---------- */ nav.sticky { backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); } nav.sticky::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--kh-crimson-glow), transparent); opacity: .6; pointer-events: none; } /* ---------- 3. CARDS: refined shadow + subtle hover lift ---------- */ .saas-card { transition: transform .28s var(--kh-ease), box-shadow .28s var(--kh-ease), border-color .28s ease, background-color .3s ease !important; will-change: transform; } .saas-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -14px rgba(17, 24, 39, 0.20), 0 4px 10px -6px rgba(17,24,39,.08); } html.dark .saas-card:hover { box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(192,85,91,.10) inset; border-color: #34212a !important; } /* Never lift the exported identity card (html2canvas capture must stay static) */ #ki-card-export, #ki-card-export * { transition: none !important; transform: none; } #ki-card-export:hover { transform: none !important; } /* ---------- 4. BUTTONS: shine sweep + tactile press ---------- */ .btn-primary { position: relative; overflow: hidden; isolation: isolate; } .btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,.28) 50%, transparent 72%); transform: translateX(-130%); transition: transform .6s var(--kh-ease); } .btn-primary:hover:not(:disabled)::after { transform: translateX(130%); } .btn-primary:active:not(:disabled) { transform: translateY(0) scale(.975); } .btn-outline:active:not(:disabled) { transform: translateY(0) scale(.975); } /* Ripple (added by premium.js) */ .kh-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.45); pointer-events: none; animation: khRipple .6s var(--kh-ease) forwards; z-index: 0; } .btn-outline .kh-ripple { background: rgba(192,85,91,.18); } @keyframes khRipple { to { transform: scale(2.6); opacity: 0; } } /* ---------- 5. INPUTS: softer premium focus + no iOS zoom ---------- */ .input-field:focus { box-shadow: 0 0 0 4px rgba(192, 85, 91, 0.12), 0 1px 2px rgba(0,0,0,.04); } @media (max-width: 640px) { /* 16px prevents iOS Safari from auto-zooming on focus */ .input-field { font-size: 16px !important; } } /* ---------- 6. SIDEBAR: active pill glow ---------- */ .sidebar-item { border-radius: 10px; } .sidebar-item.active-nav { box-shadow: 0 0 0 1px rgba(192,85,91,.12), 0 6px 16px -10px var(--kh-crimson-glow); } .sidebar-item i { transition: transform .2s var(--kh-ease); } .sidebar-item:hover i { transform: translateX(2px); } /* ---------- 7. SCROLL-REVEAL (progressive enhancement) ---------- Content is ONLY hidden when has .reveal-ready (added by premium.js after confirming JS runs & motion is allowed). If JS fails → nothing hides. */ html.reveal-ready .kh-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--kh-ease), transform .7s var(--kh-ease); will-change: opacity, transform; } html.reveal-ready .kh-reveal.is-visible { opacity: 1; transform: none; } /* ---------- 8. VIEW ENTRANCE: richer than the base fade ---------- */ @keyframes khViewIn { from { opacity: 0; transform: translateY(10px) scale(.994); filter: saturate(.9); } to { opacity: 1; transform: none; filter: none; } } .view-section.active.fade-enter { animation: khViewIn .5s var(--kh-ease) both; } /* ---------- 9. TOP SCROLL-PROGRESS BAR ---------- */ #kh-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100000; background: linear-gradient(90deg, var(--kh-crimson), #ff5a5f 45%, var(--kh-gold)); box-shadow: 0 0 12px var(--kh-crimson-glow); pointer-events: none; transition: width .12s linear; border-radius: 0 3px 3px 0; } /* ---------- 10. KHAULNAYAK THEME UTILITIES (reusable) ---------- */ .gold-text { background: linear-gradient(90deg, var(--kh-gold-soft), var(--kh-gold) 45%, #E38B00); -webkit-background-clip: text; background-clip: text; color: transparent; } .kh-crimson-text { background: linear-gradient(90deg, #ff5a5f, var(--kh-crimson)); -webkit-background-clip: text; background-clip: text; color: transparent; } .kh-glow-crimson { box-shadow: 0 0 24px -4px var(--kh-crimson-glow); } .kh-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .7rem; border-radius: 999px; font-weight: 800; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--kh-crimson); background: rgba(192,85,91,.10); border: 1px solid rgba(192,85,91,.22); } /* Slow living pulse for hero emblems (opt-in via .kh-pulse) */ @keyframes khPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,85,91,.45); } 50% { box-shadow: 0 0 0 14px rgba(192,85,91,0); } } .kh-pulse { animation: khPulse 2.8s var(--kh-ease) infinite; } /* Count-up / stat numbers get a subtle tabular alignment */ .kh-count { font-variant-numeric: tabular-nums; } /* ---------- 11. MODALS / OVERLAYS: smoother entrance ---------- */ @keyframes khModalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .kh-modal-in { animation: khModalIn .32s var(--kh-ease) both; } /* ---------- 12. SKELETON SHIMMER polish (if app uses .animate-pulse) ---------- */ html.dark .animate-pulse { background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.03), transparent); } /* ---------- 13. iOS SAFE-AREA for floating SOS button ---------- */ #sos-fab-btn { bottom: calc(1.5rem + env(safe-area-inset-bottom)); right: calc(1.5rem + env(safe-area-inset-right)); } /* ---------- 14. FOCUS-VISIBLE accessibility ring ---------- */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--kh-crimson); outline-offset: 2px; border-radius: 6px; } /* ========================================================================= REDUCED MOTION — respect the user's OS setting. Disable all motion. ========================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.reveal-ready .kh-reveal { opacity: 1 !important; transform: none !important; } #kh-scroll-progress { display: none; } } /* ========================================================================= 15. FUTURISTIC FX PACK (injected/toggled by premium.js — all additive) Live-scanning map radar, network "vitals" HUD, ECG heartbeat, ambient aurora + blood-cell particles, holographic card sheen. GPU-light (transform/opacity only). Fully disabled under prefers-reduced-motion. ========================================================================= */ /* ---- 15a. MAP "LIVE SCAN" RADAR OVERLAY ---- */ .kh-mapfx { position: absolute; inset: 0; z-index: 450; pointer-events: none; overflow: hidden; border-radius: inherit; } .kh-mapfx::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid rgba(192,85,91,.18); box-shadow: inset 0 0 55px rgba(192,85,91,.12); } .kh-mapfx.is-donor::before { border-color: rgba(16,185,129,.16); box-shadow: inset 0 0 55px rgba(16,185,129,.10); } .kh-grid { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 26px 26px; } /* Fix 4: circular radar sweep + sonar rings removed entirely — only the vertical top-to-bottom scanning line (.kh-scanline) remains. */ .kh-scanline { position: absolute; left: 0; right: 0; top: 0; height: 38%; background: linear-gradient(rgba(192,85,91,.12), rgba(192,85,91,0)); animation: khScan 3.8s linear infinite; } .kh-mapfx.is-donor .kh-scanline { background: linear-gradient(rgba(16,185,129,.12), rgba(16,185,129,0)); } .kh-corner { position: absolute; width: 16px; height: 16px; border: 2px solid rgba(192,85,91,.55); } .kh-mapfx.is-donor .kh-corner { border-color: rgba(16,185,129,.5); } .kh-corner.tl { left: 8px; top: 8px; border-right: 0; border-bottom: 0; } .kh-corner.tr { right: 8px; top: 8px; border-left: 0; border-bottom: 0; } .kh-corner.bl { left: 8px; bottom: 8px; border-right: 0; border-top: 0; } .kh-corner.br { right: 8px; bottom: 8px; border-left: 0; border-top: 0; } .kh-map-hud { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(5,5,6,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(192,85,91,.4); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } .kh-mapfx.is-donor .kh-map-hud { border-color: rgba(16,185,129,.4); } .kh-mapfx.is-donor .kh-map-hud .kh-live-dot { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,.7); } /* ---- 15b. LIVE DOT (shared) ---- */ .kh-live-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--kh-crimson); box-shadow: 0 0 8px var(--kh-crimson-glow); animation: khDot 1.5s ease-in-out infinite; } /* ---- 15c. ECG HEARTBEAT LINE ---- */ .kh-ecg { position: relative; height: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .kh-ecg-move { display: flex; width: 200%; height: 100%; animation: khEcg 2.4s linear infinite; } .kh-ecg-move svg { flex: 0 0 50%; width: 50%; height: 100%; display: block; } .kh-ecg-dot { position: absolute; top: 50%; right: 8%; width: 7px; height: 7px; border-radius: 50%; background: var(--kh-crimson); box-shadow: 0 0 10px 2px var(--kh-crimson-glow); transform: translateY(-50%); animation: khEcgDot 1.4s ease-in-out infinite; } /* ---- 15d. VITALS CONSOLE (home + dashboard) ---- */ .kh-vitals { position: relative; overflow: hidden; } .kh-vitals-home { margin-top: 2rem; padding: 1.05rem 1.25rem; border-radius: 1.5rem; border: 1px solid rgba(192,85,91,.16); background: linear-gradient(180deg, rgba(192,85,91,.05), rgba(245,179,1,.04)); } .kh-vitals-grid { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; } .kh-vitals-pulse { flex: 1 1 240px; min-width: 0; } .kh-vlabel { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--kh-crimson); } .kh-bpm-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; } .kh-bpm { font-family: "Anton", Impact, sans-serif; font-size: 1.7rem; line-height: 1; color: var(--kh-crimson); font-variant-numeric: tabular-nums; letter-spacing: .02em; } .kh-bpm-unit { font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #9aa0a6; } .kh-vchips { display: flex; gap: .4rem; flex-wrap: wrap; } .kh-vchip { display: inline-flex; align-items: center; gap: 5px; padding: .32rem .7rem; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--kh-crimson); background: rgba(192,85,91,.08); border: 1px solid rgba(192,85,91,.22); } .kh-vchip.g { color: #10b981; background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.3); } .kh-vchip.gold { color: #b6870a; background: rgba(245,179,1,.10); border-color: rgba(245,179,1,.3); } html.dark .kh-vchip.gold { color: var(--kh-gold-soft); } .kh-vitals-dash { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: .85rem 1.1rem; border-radius: 1.25rem; border: 1px solid rgba(192,85,91,.18); background: linear-gradient(90deg, rgba(192,85,91,.06), rgba(245,179,1,.05)); } .kh-vitals-mid { flex: 1 1 auto; min-width: 0; } .kh-reticle-wrap { position: relative; width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; color: var(--kh-crimson); font-size: 1.1rem; } .kh-reticle { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(192,85,91,.5); animation: khSpin 9s linear infinite; } .kh-reticle.inner { inset: 8px; border-style: solid; border-color: rgba(245,179,1,.4); animation-duration: 6s; animation-direction: reverse; } /* ---- 15e. AMBIENT AURORA + BLOOD-CELL PARTICLES ---- */ .kh-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: blur(30px); opacity: .7; background: radial-gradient(40% 50% at 15% 8%, rgba(192,85,91,.20), transparent 60%), radial-gradient(45% 55% at 90% 18%, rgba(245,179,1,.14), transparent 60%), radial-gradient(55% 60% at 60% 100%, rgba(185,21,28,.16), transparent 60%); animation: khAurora 18s ease-in-out infinite alternate; } .kh-particles { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .kh-cell { position: absolute; bottom: -24px; width: 9px; height: 9px; border-radius: 50%; opacity: .5; background: radial-gradient(circle at 35% 35%, rgba(255,120,120,.9), rgba(192,85,91,.25)); box-shadow: 0 0 10px rgba(192,85,91,.45); animation: khFloat linear infinite; } /* ---- 15f. HOLOGRAPHIC card sheen (hover) + wordmark flicker ---- */ .kh-holo { position: relative; } .kh-holo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,.12) 50%, transparent 58%); transform: translateX(-130%); transition: transform .8s var(--kh-ease); } @media (hover: hover) { .kh-holo:hover::after { transform: translateX(130%); } } .kh-holo-text { animation: khFlicker 6s infinite; } /* ---- 15g. KEYFRAMES ---- */ /* Fix 4: khSweep (radar) + khSonar (rings) keyframes removed — unused. */ @keyframes khScan { 0% { transform: translateY(-110%); } 100% { transform: translateY(300%); } } @keyframes khDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.6); } } @keyframes khEcg { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes khEcgDot { 0%,100% { opacity: 1; transform: translateY(-50%) scale(1); } 50% { opacity: .35; transform: translateY(-50%) scale(.7); } } @keyframes khSpin { to { transform: rotate(360deg); } } @keyframes khAurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 100% { transform: translate3d(3%, 2%, 0) scale(1.12); } } @keyframes khFloat { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .55; } 100% { transform: translateY(-460px) translateX(24px); opacity: 0; } } @keyframes khFlicker{ 0%,17%,20%,52%,55%,100% { filter: none; } 18.5% { filter: brightness(1.35) drop-shadow(0 0 10px var(--kh-crimson-glow)); } 53.5% { filter: brightness(1.2) drop-shadow(0 0 8px var(--kh-gold)); } } /* ---- 15h. REDUCED MOTION: kill the heavy FX entirely ---- */ @media (prefers-reduced-motion: reduce) { .kh-scanline, .kh-particles, .kh-aurora { display: none !important; } .kh-ecg-move, .kh-reticle, .kh-live-dot, .kh-ecg-dot, .kh-holo-text { animation: none !important; } } /* ========================================================================= 16. LEADERBOARD / CAMPUS RANKS — LAYOUT FIX ------------------------------------------------------------------------- BUG: names rendered one fragment per line ("Kaz/i/Sha/hria/r/Ka/mal"). ROOT CAUSE (confirmed): the stats column was `shrink-0` AND its inner flex container used `flex-wrap`, so its flex base size resolved to max-content and it could never give width back. The name column next to it carried `min-w-0`, so flexbox legally collapsed it to ~0px. Once the available width is narrower than a single word, Tailwind's `break-words` (overflow-wrap: break-word) is *required by spec* to split mid-word — producing the character-by-character stack. FIX: the row is a real flex row → [rank] [avatar] [name+uni] [stats]. The text block takes the remaining flexible width (flex: 1 1 0%; min-width: 0) and the stats column is allowed to shrink instead of hoarding width. Word breaking is reset to `word-break: normal` so text only ever wraps at spaces; `overflow-wrap: break-word` remains purely as a last-resort guard for a single unbreakable token (e.g. a long URL). Selectors are doubled up: semantic `.kh-lb-*` classes (emitted by app.js) plus ID-scoped structural fallbacks, so a stale cached app.js is still fixed. ID specificity (1,0,2) beats Tailwind's `.shrink-0` (0,1,0) — no !important needed. ========================================================================= */ /* ---- 16a. The row ---- */ .kh-lb-row, #leaderboard-list > li, #dedicated-leaderboard-list > li, #dashboard-leaderboard-list > li, #ref-leaderboard-list > li { display: flex; align-items: center; gap: .75rem; width: 100%; min-width: 0; } /* ---- 16b. Left group: rank + avatar + text — takes the flexible width ---- */ .kh-lb-main, #leaderboard-list > li > div:first-child, #dedicated-leaderboard-list > li > div:first-child, #dashboard-leaderboard-list > li > div:first-child, #ref-leaderboard-list > li > div:first-child { display: flex; align-items: center; gap: .75rem; flex: 1 1 0%; min-width: 0; } /* Rank badge + avatar never shrink and never distort */ .kh-lb-rank, .kh-lb-avatar { flex: 0 0 auto; } /* ---- 16c. THE FIX: name + university block ---- */ .kh-lb-text, #leaderboard-list > li > div:first-child > div:last-child, #dedicated-leaderboard-list > li > div:first-child > div:last-child, #dashboard-leaderboard-list > li > div:first-child > div:last-child, #ref-leaderboard-list > li > div:first-child > div:last-child { display: flex; flex-direction: column; justify-content: center; flex: 1 1 0%; /* take every remaining pixel */ min-width: 0; /* …and still be allowed to shrink inside the row */ } /* Reset the character-shredding wrap mode on every text node in the block */ .kh-lb-text > *, .kh-lb-name, .kh-lb-sub, #leaderboard-list > li span, #dedicated-leaderboard-list > li span, #dashboard-leaderboard-list > li span, #ref-leaderboard-list > li span { word-break: normal; /* <- kills the per-character breaking */ overflow-wrap: break-word; /* last-resort guard for one long token */ hyphens: manual; } .kh-lb-name { display: block; min-width: 0; line-height: 1.3; /* Wraps at spaces across up to 2 lines, then ellipsis. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kh-lb-name > i { -webkit-line-clamp: none; } .kh-lb-sub { display: -webkit-box; -webkit-line-clamp: 2; /* long university names → max 2 lines */ -webkit-box-orient: vertical; overflow: hidden; min-width: 0; line-height: 1.35; margin-top: .15rem; } /* ---- 16d. Stats column: compact, shrinkable, never hoards width ---- */ .kh-lb-stats, #leaderboard-list > li > div:last-child, #dedicated-leaderboard-list > li > div:last-child, #dashboard-leaderboard-list > li > div:last-child, #ref-leaderboard-list > li > div:last-child { flex: 0 1 auto; /* was shrink-0 → this is what starved the name */ min-width: 0; display: flex; align-items: center; justify-content: flex-end; text-align: right; } /* Keep each "12 REG" pair atomic so the stat block never splits a number from its label, but let the groups themselves sit on one tidy line. */ .kh-lb-stats span, #leaderboard-list > li > div:last-child span, #dedicated-leaderboard-list > li > div:last-child span, #dashboard-leaderboard-list > li > div:last-child span, #ref-leaderboard-list > li > div:last-child span { white-space: nowrap; } .kh-lb-statgroup { flex-wrap: nowrap !important; } /* ---- 16e. Narrow phones: stats drop to their own line ---- Below 480px there is not enough room for [rank][avatar][name][stats] on one line without squeezing the name. Rather than shrink the name column into a sliver (the original bug), the stats wrap underneath it — the row stays readable and the name keeps full-width word wrapping. */ @media (max-width: 479px) { .kh-lb-row, #leaderboard-list > li, #dedicated-leaderboard-list > li, #dashboard-leaderboard-list > li, #ref-leaderboard-list > li { flex-wrap: wrap; row-gap: .55rem; } .kh-lb-main, #leaderboard-list > li > div:first-child, #dedicated-leaderboard-list > li > div:first-child, #dashboard-leaderboard-list > li > div:first-child, #ref-leaderboard-list > li > div:first-child { flex: 1 1 100%; } .kh-lb-stats, #leaderboard-list > li > div:last-child, #dedicated-leaderboard-list > li > div:last-child, #dashboard-leaderboard-list > li > div:last-child, #ref-leaderboard-list > li > div:last-child { flex: 1 1 100%; justify-content: flex-start; padding-left: 0; } } /* ---- 16f. Rank-1 / "You" spotlight card — identical component, same fix ---- */ #donor-spotlight-card { display: flex; align-items: center; gap: 1rem; min-width: 0; } #donor-spotlight-card > div:last-child { flex: 1 1 0%; min-width: 0; } #donor-spotlight-card h4 { word-break: normal; overflow-wrap: break-word; hyphens: manual; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================================= 17. FLOATING BOTTOM NAVIGATION — compact glass tab bar ------------------------------------------------------------------------- Reference feel: a native iOS / Instagram tab bar. Thin, icon-forward, confident. No rainbow border, no per-icon halos, no giant centre orb — just one hairline, one ambient shadow, and a quiet sliding indicator. Total pill height lands ~58px. Motion is transform/opacity only. ========================================================================= */ #mobile-bottom-nav { bottom: calc(14px + env(safe-area-inset-bottom)) !important; padding-bottom: 0; pointer-events: none; /* only the pill itself is clickable */ transition: transform .38s var(--kh-ease), opacity .28s var(--kh-ease); will-change: transform, opacity; } #mobile-bottom-nav > div { pointer-events: none; } /* ---- 17a. The pill ---- */ #mobile-bottom-nav .mnav-dock, #mobile-bottom-nav > div > div { pointer-events: auto; position: relative; align-items: center !important; /* centre item is flush now */ margin-bottom: 0 !important; border: 1px solid var(--kh-dock-hairline) !important; /* single hairline */ border-radius: var(--kh-dock-radius) !important; background: var(--kh-glass) !important; backdrop-filter: var(--kh-glass-blur); -webkit-backdrop-filter: var(--kh-glass-blur); box-shadow: var(--kh-dock-shadow) !important; /* one ambient shadow */ padding: .25rem .4rem !important; gap: 0 !important; transition: transform .38s var(--kh-ease), box-shadow .38s var(--kh-ease), background-color .3s ease; will-change: transform; isolation: isolate; } /* ---- 17b. Sliding active indicator — one shared element, translated ---- */ .mnav-indicator { position: absolute; top: 50%; left: 0; height: 38px; width: 0; margin-top: -19px; border-radius: 14px; background: var(--kh-ind-bg); box-shadow: var(--kh-ind-ring); /* flat tint + hairline, no halo */ opacity: 0; z-index: 0; pointer-events: none; transform: translate3d(0, 0, 0); transition: transform .45s var(--kh-ease), width .45s var(--kh-ease), opacity .25s var(--kh-ease); will-change: transform, width; } .mnav-indicator.is-on { opacity: 1; } /* ---- 17c. Items: compact, icon-forward ---- */ #mobile-bottom-nav .mnav-item { position: relative; z-index: 1; gap: 2px !important; padding: 6px 0 5px !important; border-radius: 14px; font-size: 10px !important; letter-spacing: .01em !important; font-weight: 700 !important; text-transform: none !important; color: var(--kh-ink-muted); transition: color .25s var(--kh-ease), transform .18s var(--kh-ease); } #mobile-bottom-nav .mnav-item i { font-size: 23px !important; line-height: 1; transition: transform .28s var(--kh-ease); } #mobile-bottom-nav .mnav-item span { line-height: 1.2; } /* Active = crimson. No glow ring, no drop-shadow, just a confident tint. */ #mobile-bottom-nav .mnav-item.mnav-active, html.dark #mobile-bottom-nav .mnav-item.mnav-active { color: var(--kh-crimson-ink); } #mobile-bottom-nav .mnav-item.mnav-active i { transform: translateY(-1px); } html.dark #mobile-bottom-nav .mnav-item { color: var(--kh-ink-muted); } #mobile-bottom-nav .mnav-item:active { transform: scale(.94); } /* ---- 17d. Centre "Answer": a normal-sized item, just tinted primary ---- The old 56px raised orb is flattened into the row so the bar reads as one clean strip. Identity is carried by colour, not by size. */ #mobile-bottom-nav .mnav-center { top: 0 !important; } #mobile-bottom-nav .mnav-center .mnav-orb { width: auto !important; height: auto !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; color: inherit !important; font-size: inherit !important; display: block !important; transform: none !important; } #mobile-bottom-nav .mnav-center .mnav-orb i { font-size: 23px !important; line-height: 1; } #mobile-bottom-nav .mnav-center .mnav-label { margin-top: 2px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .01em !important; text-transform: none !important; color: inherit !important; } html.dark #mobile-bottom-nav .mnav-center .mnav-label { color: inherit !important; } /* Primary tint at rest so it still reads as the main action */ #mobile-bottom-nav .mnav-center, html.dark #mobile-bottom-nav .mnav-center { color: var(--kh-crimson-ink); } /* ---- 17e. Scroll-down: tuck. Scroll-up: restore. (premium.js toggles) ---- */ #mobile-bottom-nav.kh-nav-tuck { transform: translate3d(0, 10px, 0) scale(.97); opacity: .55; } /* ---- 17f. Spacing so the bar never covers content or the SOS button ---- */ @media (max-width: 1023px) { body.has-bottom-nav #app-wrapper { padding-bottom: 6rem; } body.has-bottom-nav #sos-fab-btn { bottom: calc(6rem + env(safe-area-inset-bottom)) !important; } } @media (max-width: 360px) { #mobile-bottom-nav > div { padding-left: .5rem; padding-right: .5rem; } #mobile-bottom-nav .mnav-item { font-size: 9px !important; } #mobile-bottom-nav .mnav-item i, #mobile-bottom-nav .mnav-center .mnav-orb i { font-size: 21px !important; } } /* ========================================================================= 18. FLOATING SIDE DOCK — desktop/tablet quick-action capsule ------------------------------------------------------------------------- ONE cohesive vertical capsule (not loose icons), same visual language as the bottom nav: same radius token, same blur, same hairline, same shadow. Sits in the middle-lower third of the viewport at the right edge. OVERLAP GUARANTEE: the capsule only exists at >=1024px, which is exactly the breakpoint where #mobile-bottom-nav is `display:none`. The two can therefore never collide at any scroll position or screen size. ========================================================================= */ #kh-side-dock { position: fixed; right: calc(16px + env(safe-area-inset-right)); top: 58%; /* middle-lower third */ z-index: 86; /* below the nav (88) + SOS (90) */ display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: var(--kh-dock-radius); border: 1px solid var(--kh-dock-hairline); background: var(--kh-glass); backdrop-filter: var(--kh-glass-blur); -webkit-backdrop-filter: var(--kh-glass-blur); box-shadow: var(--kh-dock-shadow); /* Entrance: fade + slide in from the right (same reveal pattern as §7) */ opacity: 0; transform: translate3d(24px, -50%, 0); transition: opacity .6s var(--kh-ease), transform .6s var(--kh-ease); will-change: opacity, transform; } #kh-side-dock.is-visible { opacity: 1; transform: translate3d(0, -50%, 0); } /* ---- 18a. Buttons: uniform, calm at rest ---- */ .kh-dock-btn { position: relative; width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--kh-ink-muted); cursor: pointer; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; transition: color .25s var(--kh-ease), background-color .25s var(--kh-ease), transform .18s var(--kh-ease); } .kh-dock-btn i { font-size: 20px; line-height: 1; pointer-events: none; } .kh-dock-btn:hover { color: var(--kh-crimson-ink); background: var(--kh-ind-bg); } .kh-dock-btn:active { transform: scale(.9); } .kh-dock-btn:focus-visible { outline: 2px solid var(--kh-teal); outline-offset: 2px; } /* Glow ring: fires ONLY on interaction, never idles */ .kh-dock-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 var(--kh-teal-glow); opacity: 0; pointer-events: none; z-index: -1; } @media (hover: hover) { .kh-dock-btn:hover::before { animation: khRing 1.8s var(--kh-ease) 2; opacity: 1; } } /* Ripple + sparks on click — softened so they read as a tap, not a firework */ .kh-dock-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: radial-gradient(circle, rgba(230,184,77,.32), rgba(192,85,91,.20) 55%, transparent 72%); pointer-events: none; z-index: 0; animation: khRipple .55s var(--kh-ease) forwards; } .kh-spark { position: absolute; width: 3px; height: 3px; left: 50%; top: 50%; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--kh-gold); pointer-events: none; opacity: 0; animation: khSpark .55s var(--kh-ease) forwards; } /* Divider between the primary action and the utility group */ .kh-dock-sep { width: 18px; height: 1px; flex: 0 0 auto; background: var(--kh-dock-hairline); margin: 3px 0; } /* Back-to-top only appears once there is somewhere to go back to */ .kh-dock-btn[data-kh-dock="top"] { opacity: 0; max-height: 0; pointer-events: none; transition: opacity .25s var(--kh-ease), max-height .25s var(--kh-ease); } #kh-side-dock.kh-scrolled .kh-dock-btn[data-kh-dock="top"] { opacity: 1; max-height: 36px; pointer-events: auto; } /* ---- 18b. Below lg: hide entirely ---- The bottom nav already carries navigation and the SOS button already owns the bottom-right corner. Stacking a third floating control there is what made the old build look like loose, unfinished icons. */ @media (max-width: 1023px) { #kh-side-dock { display: none !important; } } @keyframes khRing { 0% { box-shadow: 0 0 0 0 var(--kh-teal-glow); } 70% { box-shadow: 0 0 0 8px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } } @keyframes khSpark { 0% { opacity: .8; transform: translate3d(0,0,0) scale(1); } 100% { opacity: 0; transform: translate3d(var(--kh-sx,0), var(--kh-sy,0), 0) scale(.2); } } /* ---- 18c. REDUCED MOTION ---- */ @media (prefers-reduced-motion: reduce) { #kh-side-dock { opacity: 1 !important; transform: translate3d(0, -50%, 0) !important; } #mobile-bottom-nav.kh-nav-tuck { transform: none !important; opacity: 1 !important; } .mnav-indicator, .kh-dock-ripple, .kh-spark { transition: none !important; animation: none !important; } .kh-spark { display: none !important; } } /* ========================================================================= INSTAGRAM-STYLE FLOATING GLASS NAV OVERRIDES (FINAL FIX) ========================================================================= */ /* 1. NUKE THE OUTER WRAPPERS (This completely hides the black corners/box holding the pill) */ #mobile-bottom-nav, #mobile-bottom-nav > div { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } #mobile-bottom-nav::before, #mobile-bottom-nav::after { display: none !important; } /* 2. Perfect pill shape and intense blur */ :root { --kh-dock-radius: 999px !important; --kh-glass-blur: blur(35px) saturate(200%) !important; --kh-dock-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important; } /* 3. Glass texture and NO side shadows for dark mode */ html.dark { --kh-glass: rgba(10, 10, 10, 0.55) !important; --kh-dock-hairline: rgba(255, 255, 255, 0.15) !important; --kh-dock-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; } /* 4. Hide the sliding background box entirely */ .mnav-indicator { display: none !important; } /* 5. Mute inactive icons (Overrides the default red center button) */ #mobile-bottom-nav .mnav-item, #mobile-bottom-nav .mnav-center { color: #8e8e93 !important; } /* 6. Active icon color based on Light/Dark mode */ html:not(.dark) #mobile-bottom-nav .mnav-active { color: #000000 !important; } html.dark #mobile-bottom-nav .mnav-active { color: #ffffff !important; } /* 7. Add the Instagram-style notification dot under the active icon */ #mobile-bottom-nav .mnav-active::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; } html:not(.dark) #mobile-bottom-nav .mnav-active::after { background-color: #000000 !important; } html.dark #mobile-bottom-nav .mnav-active::after { background-color: #ffffff !important; } /* 8. Slim down the padding to make it a sleek bar */ #mobile-bottom-nav .mnav-dock, #mobile-bottom-nav > div > div { padding: 0.4rem 1rem !important; } /* 9. SAFELY hide text labels (Restores the middle "Answer" icon!) */ #mobile-bottom-nav .mnav-item span:not(.mnav-orb):not(.kh-ripple), #mobile-bottom-nav .mnav-label { display: none !important; } /* 10. Re-center and enlarge the icons slightly since labels are gone */ #mobile-bottom-nav .mnav-item i, #mobile-bottom-nav .mnav-center .mnav-orb i { font-size: 26px !important; margin-top: 6px; } /* ========================================================================= FORCE RESTORE ECG HEARTBEAT ANIMATION ========================================================================= */ .kh-ecg { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; height: 40px !important; overflow: hidden !important; margin-top: 1.25rem !important; /* Pushes it down slightly from the text */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) !important; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) !important; } .kh-ecg-move { display: flex !important; width: 200% !important; height: 100% !important; animation: khEcg 2.4s linear infinite !important; } .kh-ecg-move svg { flex: 0 0 50% !important; width: 50% !important; height: 100% !important; display: block !important; } /* Force the SVG line to be visible with the exact brand hex color */ .kh-ecg-move svg path { stroke: #C0555B !important; stroke-width: 2px !important; } /* Restore the glowing red dot */ .kh-ecg-dot { display: block !important; position: absolute !important; top: 50% !important; right: 8% !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #C0555B !important; box-shadow: 0 0 10px 2px rgba(192, 85, 91, 0.4) !important; transform: translateY(-50%) !important; animation: khEcgDot 1.4s ease-in-out infinite !important; } /* Ensure the animation keyframes exist */ @keyframes khEcg { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes khEcgDot { 0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); } 50% { opacity: 0.35; transform: translateY(-50%) scale(0.7); } } /* ========================================================================= PREMIUM FLOATING BLOOD GROUP EFFECT (POSITION FIXED) ========================================================================= */ .kh-floating-blood { position: absolute; top: -1.5rem; /* Changed from 1rem to push it much higher */ right: 0.5rem; font-size: 4.5rem; /* Made it slightly bigger */ font-weight: 900; font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -2px; pointer-events: none; z-index: 20; /* Premium Red Gradient */ color: transparent; background: linear-gradient(135deg, #ff7a80 0%, #C0555B 50%, #8c3b41 100%); -webkit-background-clip: text; background-clip: text; /* Slow Breathing Heartbeat Glow */ animation: khBloodPulse 3s ease-in-out infinite; } /* Make it larger and position it perfectly on Desktop/Tablets */ @media (min-width: 640px) { .kh-floating-blood { top: -2rem; /* Pushes it up beautifully into the desktop padding */ right: 1rem; font-size: 6rem; } } /* The Breathing Glow Animation */ @keyframes khBloodPulse { 0%, 100% { filter: drop-shadow(0 0 10px rgba(192, 85, 91, 0.3)); transform: scale(1); } 50% { filter: drop-shadow(0 0 25px rgba(192, 85, 91, 0.85)); transform: scale(1.05); } } /* ========================================================================= PREMIUM FLOATING SIDEBAR (DESKTOP) ========================================================================= */ @media (min-width: 1024px) { .premium-sidebar { background: var(--kh-glass) !important; backdrop-filter: var(--kh-glass-blur) !important; -webkit-backdrop-filter: var(--kh-glass-blur) !important; border: 1px solid var(--kh-dock-hairline) !important; box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5) !important; } /* Light mode specific glass effect */ html:not(.dark) .premium-sidebar { background: rgba(255, 255, 255, 0.75) !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1) !important; } /* Mute the internal dividers so they blend flawlessly into the glass */ .premium-sidebar .border-b, .premium-sidebar .border-t { border-color: rgba(150, 150, 150, 0.1) !important; } /* Inner edge highlight for a 3D bevel effect in dark mode */ html.dark .premium-sidebar::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); pointer-events: none; z-index: 10; } } /* ========================================================================= PREMIUM FLOATING SIDEBAR (DESKTOP) ========================================================================= */ @media (min-width: 1024px) { .premium-sidebar { background: var(--kh-glass) !important; backdrop-filter: var(--kh-glass-blur) !important; -webkit-backdrop-filter: var(--kh-glass-blur) !important; border: 1px solid var(--kh-dock-hairline) !important; box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5) !important; } html:not(.dark) .premium-sidebar { background: rgba(255, 255, 255, 0.75) !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1) !important; } .premium-sidebar .border-b, .premium-sidebar .border-t { border-color: rgba(150, 150, 150, 0.1) !important; } html.dark .premium-sidebar::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); pointer-events: none; z-index: 10; } }