/* ============================================================================= EMPYREAN INTERNATIONAL — COMPONENT STYLES style.css | Step 0.1b | Refactor Roadmap v1.0 ============================================================================= REQUIRES: tokens.css loaded FIRST in SECTION MAP ─────────── §0 Global reset & base §1 Loading screens §2 Layout — app shell, sidebar, main content §3 Navigation — sidebar nav items, footer, mobile toggle §4 Section headers & search bar §5 Status / story bar (WhatsApp-style) §6 Base card §7 Social feed — impact story cards, action buttons §8 Marketplace / property cards §9 News list cards §10 Dashboard slider cards (news, market, reels, live) §11 Stat cards §12 Buttons §13 Form inputs & labels §14 Auth modal & card §15 Notification toast §16 Live stream — container, controls, overlays, gifts §17 Full-screen reel viewer §18 Profile — header, picture, tabs, gallery, bio §19 Suggested users widget §20 Messages / chat §21 Cart modal & payment §22 KYC form, upload areas, camera modal §23 Admin panel — queue items, KYC docs, disbursement §24 Dispute & complaint system §25 Staking indicators & rewards history §26 Settings & monetisation pages §27 NGO / grant portal & community tasks §28 Business page §29 Utility — upload progress, rich text toolbar, drag-scroll, media lightbox, misc §30 Animations & keyframes §31 Responsive overrides ============================================================================= */ /* ═══════════════════════════════════════════════════════════════════════════ §0 GLOBAL RESET & BASE ═══════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Syne:wght@700;800&family=Fraunces:ital,wght@0,600;0,700;1,500&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--background) !important; color: var(--text-primary); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.modal-open { overflow: hidden; } /* FIX (status upload screen "scrolling page instead of modal" bug): .main-content is its own independent scroll container (overflow-y:auto; height:100vh) -- locking body.overflow alone does nothing to it, so on mobile the page behind a modal kept scrolling instead of the modal's own internal .create-status-card scroll area. Lock it too whenever a modal is open. */ body.modal-open .main-content { overflow: hidden !important; } #app-container { display: flex; width: 100%; position: relative; } /* Animated section reveal */ /* FIX (2026-08-27 — "click a section, everything spills/overlaps"): added !important. Without it, any future stray inline style="display:..." set on a section by ANY script (e.g. app-fixes.js's own blank-screen recovery, before its 2026-08-27 fix) permanently overrides this rule for the rest of the page session, since inline styles beat a stylesheet rule of equal or lower specificity when the stylesheet rule has no !important — regardless of which section is actually supposed to be .active. This was the root cause of dashboard content (News & Updates, Reels, Community Feed) bleeding through underneath Wallet/Marketplace/etc. after almost any unrelated JS error fired elsewhere in the app. See app-fixes.js's own _checkAndRecover() fix from the same date for the other half of this. */ .content-section { display: none !important; } .content-section.active { display: block !important; animation: fadeIn 0.4s ease-in-out; } /* Layout grids */ .grid-2, .grid-3 { display: grid; gap: var(--gap-md); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* Scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(10, 14, 39, 0.15); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(10, 14, 39, 0.25); } /* ═══════════════════════════════════════════════════════════════════════════ §1 LOADING SCREENS ═══════════════════════════════════════════════════════════════════════════ */ /* — Splash screen (#loading-screen) — */ #loading-screen { position: fixed; inset: 0; background: var(--g-hero); z-index: var(--z-critical); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; transition: opacity var(--duration-sluggish) var(--ease-out), visibility var(--duration-sluggish) var(--ease-out); } #loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loading-avatar-frame { width: 120px; height: 120px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.15); border: 3px solid rgba(255, 255, 255, 0.4); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 0 40px rgba(255, 87, 34, 0.5), 0 0 80px rgba(142, 36, 170, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.1); animation: avatarPulse 2s ease-in-out infinite; } .loading-avatar-inner { width: 90px; height: 90px; border-radius: var(--radius-full); background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,87,34,0.4) 50%, rgba(142,36,170,0.3) 100%); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); } .loading-orbit { position: absolute; width: 140px; height: 140px; border: 2px solid transparent; border-top: 2px solid rgba(255, 87, 34, 0.6); border-right: 2px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-full); animation: orbit 1.5s linear infinite; } .loading-orbit2 { position: absolute; width: 160px; height: 160px; border: 1px solid transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-left: 1px solid rgba(255, 87, 34, 0.3); border-radius: var(--radius-full); animation: orbit 2.5s linear infinite reverse; } .loading-title { color: var(--color-white); font-family: var(--font-display); font-size: clamp(1rem, 3vw, 1.4rem); font-weight: var(--weight-bold); text-align: center; max-width: 320px; line-height: var(--leading-snug); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); padding: 0 20px; /* Gold shimmer applied via keyframe in §30 */ background: linear-gradient(90deg, var(--accent), var(--accent-bright), #fff, var(--accent-bright), var(--accent)); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldTextShimmer 2.5s linear infinite; } .app-loading-title { /* alias for JS-generated loading screens */ font-size: clamp(1rem, 3vw, 1.4rem); font-weight: var(--weight-extrabold); background: linear-gradient(90deg, var(--accent), var(--accent-bright), #fff, var(--accent-bright), var(--accent)); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldTextShimmer 2.5s linear infinite; } .loading-subtitle { color: rgba(255, 255, 255, 0.75); font-size: var(--text-sm); letter-spacing: var(--tracking-widest); text-transform: uppercase; text-align: center; } .loading-progress { width: 200px; height: 3px; background: rgba(255, 255, 255, 0.2); border-radius: var(--radius-xs); overflow: hidden; margin-top: 10px; } .loading-progress-bar { height: 100%; border-radius: var(--radius-xs); animation: loadProgress 2.5s ease-in-out infinite; } /* Gold shimmer variant used on second loading screen */ .loading-bar { background: linear-gradient(90deg, var(--color-gold-dark), var(--accent-bright), var(--accent), var(--accent-bright), var(--color-gold-dark)); background-size: 300% 100%; animation: goldBarShimmer 1.8s linear infinite; } /* — App loading screen (#app-loading-screen) — 2026-07-18: background/atmosphere simplified to match the new Empyrean Splash (starfield + glyph) markup in index.html, which now owns its own decorative CSS under #app-loading-screen / .emp-splash-* in a