/* ========================================= 1. GLOBAL COLORS & GLOWS (Works Everywhere) ========================================= */ :root { --theme-green: #4f4af9; --theme-glow: rgba(79, 74, 249, 0.4); --theme-intense-glow: rgba(79, 74, 249, 0.8); --font-sans: 'Titillium Web', 'Titillium', sans-serif !important; } * { font-family: var(--font-sans) !important; } /* Card Animations & Transparency */ .bg-card { background-color: rgba(0, 0, 0, 0.05) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; transition: all 0.3s ease !important; } .bg-card:hover { background-color: rgba(0, 0, 0, 0.1) !important; transform: translateY(-4px) scale(1.01) !important; box-shadow: 0 10px 30px -10px var(--theme-glow) !important; border-color: var(--theme-green) !important; } .bg-card [class*="absolute"] { display: none !important; } /* Nuke the Double Omniworld Text & Separator globally */ header span.hidden.text-sm.font-medium { display: none !important; } header .bg-border, header [data-orientation="vertical"], header .w-px, header hr { display: none !important; } /* ========================================= 2. DESKTOP ONLY LAYOUT (IGNORED ON MOBILE) ========================================= */ @media (min-width: 1024px) { /* A. Rip the sidebar container to the top and freeze it there */ div[data-slot="sidebar-wrapper"] { flex-direction: column !important; } div[data-slot="sidebar-gap"] { display: none !important; } /* HARD FORCE ALL BASE LAYERS TO ZERO OPACITY BACKGROUNDS */ div[data-slot="sidebar-container"], div[data-slot="sidebar"], div[data-slot="sidebar"] > div, [data-sidebar="sidebar"] { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 65px !important; min-height: 65px !important; z-index: 40 !important; display: flex !important; align-items: center !important; /* Wipe out conflicting structural engine background metrics */ --sidebar-background: transparent !important; --background: transparent !important; background: transparent !important; background-color: transparent !important; background-image: none !important; } /* MATED THE CARD STYLING CRITERIA SPECIFICALLY TO THE MAIN INJECTED PSEUDO-ELEMENT MASK */ div[data-slot="sidebar-container"]::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: -1 !important; pointer-events: none !important; /* MATCHED TO YOUR .bg-card STYLING INITIAL STATE */ background-color: rgba(0, 0, 0, 0.05) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-bottom: 2px solid #283041 !important; transition: all 0.3s ease !important; } /* MATCHED TO YOUR .bg-card:hover ANIMATION PROFILE */ div[data-slot="sidebar-container"]:hover::before { background-color: rgba(0, 0, 0, 0.1) !important; transform: translateY(-2px) scale(1.005) !important; /* Slightly scaled back for full-width layout safety */ box-shadow: 0 10px 30px -10px var(--theme-glow) !important; border-color: var(--theme-green) !important; } /* B. Force ALL menu items to fit on the screen without scrolling */ div[data-slot="sidebar-container"] nav, div[data-slot="sidebar-container"] ul, div[data-slot="sidebar-container"] > div { display: flex !important; flex-direction: row !important; width: 100% !important; padding-left: 1rem !important; padding-right: 350px !important; /* MASSIVE dead zone so it NEVER hits the coins */ justify-content: space-evenly !important; /* Forces all buttons to fit in the available space */ align-items: center !important; mask-image: none !important; -webkit-mask-image: none !important; /* Stop subelements from spawning alternative solid paint backgrounds */ background: transparent !important; background-color: transparent !important; } /* C. Scale the links down slightly so they comfortably fit */ div[data-slot="sidebar-container"] a, div[data-slot="sidebar-container"] button, div[data-slot="sidebar-container"] li { white-space: nowrap !important; font-size: 0.85rem !important; text-transform: uppercase !important; margin: 0 !important; padding: 0.25rem 0.5rem !important; /* Keeps text highly legible over the active background graphics */ color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; } /* D. Pin the Coins and Steam Profile safely in the top right corner */ header { position: fixed !important; top: 0 !important; right: 0 !important; height: 65px !important; width: auto !important; background: transparent !important; z-index: 999 !important; display: flex !important; align-items: center !important; padding-right: 1.5rem !important; border-bottom: 2px solid #283041 !important; } /* E. Make Main Content Full Width and push it down below the new menu */ main, main[data-slot="sidebar-inset"], .container, main > div { max-width: none !important; width: 100% !important; padding-top: 85px !important; /* Pushes the shop down so it isn't hidden under the menu */ padding-left: 2rem !important; padding-right: 2rem !important; } /* F. Kill the sidebar toggle button */ button[data-sidebar="trigger"], [data-slot="sidebar-trigger"] { display: none !important; } } /* ========================================= 3. NUKE THE ZOMBIE SCROLLBAR (DESKTOP ONLY) ========================================= */ @media (min-width: 1024px) { /* A. Forcefully hide the scrollbar track on all browsers */ div[data-slot="sidebar-container"], div[data-slot="sidebar-container"] nav, div[data-slot="sidebar-container"] ul, div[data-slot="sidebar-container"] > div { scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* IE/Edge */ overflow-x: hidden !important; /* Locks out the horizontal scroll entirely */ overflow-y: hidden !important; } /* B. Assassinate the custom Webkit (Chrome/Safari/Opera) scrollbar */ div[data-slot="sidebar-container"]::-webkit-scrollbar, div[data-slot="sidebar-container"] *::-webkit-scrollbar { display: none !important; height: 0px !important; width: 0px !important; background: transparent !important; } /* C. Close the giant ass space between the menu and the shop */ main, main[data-slot="sidebar-inset"], .container, main > div { padding-top: 70px !important; /* Reduced from 85px to pull the site back up tightly under the 65px menu */ } } @media (min-width: 1024px) { /* 1. SHRINK-WRAP THE COIN BOX & FORCE TRANSPARENCY */ header { width: max-content !important; /* Forces the invisible box to only be as wide as the coins/avatar */ background: transparent !important; pointer-events: none !important; /* Lets your mouse click "through" the empty parts of the box */ } /* Re-enable clicks just for the actual coin/profile buttons */ header * { background-color: transparent !important; /* Strips black backgrounds off inner elements too */ pointer-events: auto !important; } /* 2. FIX THE "DONAT" CHOP */ div[data-slot="sidebar-container"] nav, div[data-slot="sidebar-container"] ul, div[data-slot="sidebar-container"] > div { padding-right: 150px !important; /* Reduced from 350px to give the menu more room to breathe */ } div[data-slot="sidebar-container"] a, div[data-slot="sidebar-container"] button, div[data-slot="sidebar-container"] li { flex-shrink: 0 !important; overflow: visible !important; } /* 3. THE PERFECT GAP RESTORED */ main, main[data-slot="sidebar-inset"], .container, main > div { /* The header is 65px tall. 85px gives it exactly 20px of perfect breathing room. */ padding-top: 30px !important; margin-top: 0 !important; } div[data-slot="sidebar-gap"] { display: none !important; } } /* ========================================================================== 4. SEPARATED 3D ENGINE BARRIER (SHOP VS EDITOR FIX) ========================================================================== */ /* A. UNIVERSAL SAFETY CEILING - Stops the infinite expansion loop on all pages */ canvas, [class*="preview"] canvas, [id*="preview"] canvas { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; } /* B. SKIN EDITOR WORKSPACE - Forces full centering layout rules on the main builder page */ [class*="editor"] canvas, .skin-editor canvas, main:has([class*="editor"]) canvas { position: relative !important; display: block !important; margin-left: auto !important; margin-right: auto !important; top: 50% !important; transform: translateY(-50%) !important; /* Kept to keep your main editor dead-centered */ } /* C. SKIN SHOP CARDS - Safe alignment block that forces shop cards to remain normal */ div[class*="shop"] canvas, [id*="shop"] canvas, .bg-card canvas, div[data-slot="sidebar"] canvas { position: relative !important; display: block !important; margin: auto !important; /* Balanced grid clustering */ top: 0 !important; /* Removes the upward offset clipping your shop dinosaurs */ transform: none !important; /* Neutralizes the clipping factor */ } /* Parent container flexbox tuning */ div:has(> canvas) { display: flex !important; justify-content: center !important; align-items: center !important; } /* EDITS */ /* ============================================ 1. NATIVE VARIABLE REGISTRATIONS ============================================ */ @property --b1x { syntax: ''; inherits: false; initial-value: 12%; } @property --b1y { syntax: ''; inherits: false; initial-value: 85%; } @property --b1w { syntax: ''; inherits: false; initial-value: 20%; } @property --b1h { syntax: ''; inherits: false; initial-value: 20%; } @property --b2x { syntax: ''; inherits: false; initial-value: 88%; } @property --b2y { syntax: ''; inherits: false; initial-value: 45%; } @property --b2w { syntax: ''; inherits: false; initial-value: 15%; } @property --b2h { syntax: ''; inherits: false; initial-value: 15%; } @property --b3x { syntax: ''; inherits: false; initial-value: 48%; } @property --b3y { syntax: ''; inherits: false; initial-value: 78%; } @property --b3w { syntax: ''; inherits: false; initial-value: 22%; } @property --b3h { syntax: ''; inherits: false; initial-value: 22%; } @property --b4x { syntax: ''; inherits: false; initial-value: 25%; } @property --b4y { syntax: ''; inherits: false; initial-value: 18%; } @property --b4w { syntax: ''; inherits: false; initial-value: 14%; } @property --b4h { syntax: ''; inherits: false; initial-value: 14%; } /* ========================================================================== 2. UNIFIED BACKDROP CANVAS AND FRAMEWORK RESETS ========================================================================== */ html, body, #root, #__next, main, div[data-slot="sidebar-inset"] { background-color: transparent !important; } body { background-color: #05070f !important; position: relative !important; } /* Isolated pseudo-element to lock hardware acceleration and prevent lag */ body::before { content: "" !important; position: fixed !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; will-change: transform !important; transform: translate3d(0, 0, 0) !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; /* Stepping Haze + Layered Blob Canvases */ background-image: radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.11) 0% 15%, rgba(255, 255, 255, 0.07) 15% 32%, rgba(255, 255, 255, 0.04) 32% 48%, rgba(255, 255, 255, 0.015) 48% 65%, transparent 65% 100%), radial-gradient(ellipse var(--b1w) var(--b1h) at var(--b1x) var(--b1y), rgba(255, 255, 255, 0.09), transparent 85%), radial-gradient(ellipse var(--b2w) var(--b2h) at var(--b2x) var(--b2y), rgba(255, 255, 255, 0.06), transparent 85%), radial-gradient(ellipse var(--b3w) var(--b3h) at var(--b3x) var(--b3y), rgba(255, 255, 255, 0.08), transparent 85%), radial-gradient(ellipse var(--b4w) var(--b4h) at var(--b4x) var(--b4y), rgba(255, 255, 255, 0.06), transparent 85%) !important; animation: l1 47s infinite alternate ease-in-out, l2 73s infinite alternate ease-in-out, l3 59s infinite alternate ease-in-out, l4 89s infinite alternate ease-in-out !important; } /* ========================================================================== 3. OPTIMIZED TRANSFORMATION TRACKS ========================================================================== */ @keyframes l1 { 0% { --b1x: 12%; --b1y: 85%; --b1w: 20%; --b1h: 20%; } 33% { --b1x: 75%; --b1y: 52%; --b1w: 32%; --b1h: 14%; } 66% { --b1x: 18%; --b1y: 22%; --b1w: 14%; --b1h: 28%; } 100% { --b1x: 45%; --b1y: 15%; --b1w: 20%; --b1h: 20%; } } @keyframes l2 { 0% { --b2x: 88%; --b2y: 45%; --b2w: 15%; --b2h: 15%; } 25% { --b2x: 42%; --b2y: 82%; --b2w: 26%; --b2h: 11%; } 75% { --b2x: 15%; --b2y: 30%; --b2w: 12%; --b2h: 22%; } 100% { --b2x: 62%; --b2y: 12%; --b2w: 15%; --b2h: 15%; } } @keyframes l3 { 0% { --b3x: 48%; --b3y: 78%; --b3w: 22%; --b3h: 22%; } 33% { --b3x: 52%; --b3y: 18%; --b3w: 14%; --b3h: 32%; } 66% { --b3x: 85%; --b3y: 50%; --b3w: 30%; --b3h: 16%; } 100% { --b3x: 20%; --b3y: 40%; --b3w: 22%; --b3h: 22%; } } @keyframes l4 { 0% { --b4x: 25%; --b4y: 18%; --b4w: 14%; --b4h: 14%; } 40% { --b4x: 85%; --b4y: 22%; --b4w: 22%; --b4h: 10%; } 70% { --b4x: 40%; --b4y: 65%; --b4w: 10%; --b4h: 22%; } 100% { --b4x: 78%; --b4y: 85%; --b4w: 14%; --b4h: 14%; } }