/* ============================================ SHARED SAFE AREA / MOBILE NAV SPACING ============================================ */ :root { --android-nav-inset-bottom: 0px; --bottom-nav-padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) - 8px)); } html.is-android-device { /* Android WebView already lays content above the system nav bar. Using the native nav inset here makes the footer too tall on some devices and navigation modes, so keep Android footer spacing fixed. */ --bottom-nav-padding-bottom: 12px; } .bottom-nav-shell { padding-bottom: var(--bottom-nav-padding-bottom); } /* ============================================ ISLA UNITED — Light Theme Overrides Applied when is set ============================================ */ /* --- TRANSITION (smooth theme switch) --- */ html.light *, html.light *::before, html.light *::after { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* ============================================ 1. BACKGROUND COLORS ============================================ */ /* Primary backgrounds */ html.light .bg-dark-900 { background-color: #f4f4f5 !important; } html.light .bg-dark-850 { background-color: #fafafa !important; } html.light .bg-dark-800 { background-color: #ffffff !important; } html.light .bg-dark-700 { background-color: #e4e4e7 !important; } html.light .bg-dark-600 { background-color: #d4d4d8 !important; } /* Body-level override */ html.light body.bg-dark-900 { background-color: #f4f4f5 !important; } /* Pure black backgrounds → light equivalents */ html.light .bg-black { background-color: #f4f4f5 !important; } html.light .bg-black\/80 { background-color: rgba(0, 0, 0, 0.4) !important; } html.light .bg-black\/90 { background-color: rgba(0, 0, 0, 0.5) !important; } html.light .bg-black\/95 { background-color: rgba(0, 0, 0, 0.5) !important; } html.light .bg-black\/50 { background-color: rgba(0, 0, 0, 0.2) !important; } /* Dark backgrounds with opacity */ html.light .bg-dark-900\/50 { background-color: rgba(244, 244, 245, 0.5) !important; } html.light .bg-dark-900\/80 { background-color: rgba(244, 244, 245, 0.8) !important; } html.light .bg-dark-900\/90 { background-color: rgba(244, 244, 245, 0.9) !important; } html.light .bg-dark-900\/95 { background-color: rgba(244, 244, 245, 0.95) !important; } html.light .bg-dark-800\/80 { background-color: rgba(255, 255, 255, 0.8) !important; } html.light .bg-dark-800\/90 { background-color: rgba(255, 255, 255, 0.9) !important; } html.light .bg-dark-800\/50 { background-color: rgba(255, 255, 255, 0.5) !important; } html.light .bg-dark-700\/50 { background-color: rgba(228, 228, 231, 0.5) !important; } /* White background elements in dark mode → subtle gray in light */ html.light .bg-white\/10 { background-color: rgba(0, 0, 0, 0.05) !important; } /* ============================================ 2. TEXT COLORS ============================================ */ /* Primary text */ html.light .text-white { color: #18181b !important; } html.light .text-white\/90 { color: rgba(24, 24, 27, 0.9) !important; } html.light .text-white\/70 { color: rgba(24, 24, 27, 0.7) !important; } html.light .text-white\/60 { color: rgba(24, 24, 27, 0.6) !important; } /* Gray scale text — invert for light bg readability */ html.light .text-gray-200 { color: #3f3f46 !important; } html.light .text-gray-300 { color: #52525b !important; } html.light .text-gray-400 { color: #71717a !important; } html.light .text-gray-500 { color: #71717a !important; } html.light .text-gray-600 { color: #a1a1aa !important; } /* Keep black text as-is (used on gold buttons) */ /* text-black stays #000 — no override needed */ /* Keep gold accent text unchanged — looks great on both themes */ /* text-gold-400, text-gold-500 — no override needed */ /* ============================================ 3. BORDER COLORS ============================================ */ html.light .border-dark-900 { border-color: #e4e4e7 !important; } html.light .border-dark-800 { border-color: #e4e4e7 !important; } html.light .border-dark-700 { border-color: #d4d4d8 !important; } html.light .border-dark-600 { border-color: #a1a1aa !important; } /* Borders with opacity */ html.light .border-dark-700\/50 { border-color: rgba(212, 212, 216, 0.5) !important; } html.light .border-dark-600\/50 { border-color: rgba(161, 161, 170, 0.5) !important; } /* White borders → dark borders */ html.light .border-white { border-color: #d4d4d8 !important; } html.light .border-white\/10 { border-color: rgba(0, 0, 0, 0.08) !important; } html.light .border-white\/20 { border-color: rgba(0, 0, 0, 0.1) !important; } /* ============================================ 4. GRADIENTS (override from/via/to stops) ============================================ */ /* Common gradient: from-dark-900 */ html.light .from-dark-900 { --tw-gradient-from: #f4f4f5 !important; } html.light .from-dark-800 { --tw-gradient-from: #ffffff !important; } html.light .from-dark-700 { --tw-gradient-from: #e4e4e7 !important; } html.light .via-dark-900\/60 { --tw-gradient-via: rgba(244, 244, 245, 0.6) !important; } html.light .via-transparent { --tw-gradient-via: transparent !important; } html.light .to-dark-900 { --tw-gradient-to: #f4f4f5 !important; } html.light .to-dark-800 { --tw-gradient-to: #ffffff !important; } html.light .to-transparent { --tw-gradient-to: transparent !important; } /* ============================================ 5. SHADOWS ============================================ */ /* Lighten shadows for light mode */ html.light .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05) !important; } html.light .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04) !important; } html.light .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1) !important; } html.light .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04) !important; } html.light .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.04) !important; } /* Custom neon shadow — subtle gold glow */ html.light .shadow-neon { box-shadow: 0 0 10px rgba(212, 175, 55, 0.15) !important; } html.light .shadow-inner-deep { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important; } /* Drop shadows */ html.light .drop-shadow-lg { filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04)) drop-shadow(0 4px 3px rgba(0,0,0,0.05)) !important; } html.light .drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0,0,0,0.05)) drop-shadow(0 2px 2px rgba(0,0,0,0.04)) !important; } /* ============================================ 6. SPECIFIC COMPONENT OVERRIDES ============================================ */ /* --- Inputs & Form Elements --- */ html.light input.bg-dark-900, html.light textarea.bg-dark-900, html.light select.bg-dark-900 { background-color: #f4f4f5 !important; color: #18181b !important; } html.light input.bg-dark-800, html.light textarea.bg-dark-800 { background-color: #ffffff !important; color: #18181b !important; border-color: #d4d4d8 !important; } html.light input::placeholder { color: #a1a1aa !important; } html.light textarea::placeholder { color: #a1a1aa !important; } /* --- Scrollbar (light mode) --- */ html.light .custom-scroll::-webkit-scrollbar-track { background: #f4f4f5; } html.light .custom-scroll::-webkit-scrollbar-thumb { background: #d4d4d8; } /* --- Carbon fiber texture overlay — hide in light mode --- */ html.light .bg-\[url\(\'https\:\/\/www\.transparenttextures\.com\/patterns\/carbon-fibre\.png\'\)\] { opacity: 0 !important; } /* --- 3D Buttons (profile/index) --- */ html.light .btn-3d-dark { background: #e4e4e7 !important; border-bottom-color: #d4d4d8 !important; color: #18181b !important; } /* --- Glass panel (profile.php) --- */ html.light .glass-panel { background: linear-gradient(145deg, #ffffff, #f4f4f5) !important; box-shadow: 8px 8px 20px #d4d4d8, -8px -8px 20px #ffffff !important; } /* --- Renew/Upgrade button (profile.php) — dark 3D button → gold 3D in light mode --- */ html.light .renew-card-btn { background: linear-gradient(to bottom, #F2D06B, #D4AF37) !important; color: #000 !important; border-bottom: 4px solid #AA8C2C !important; box-shadow: 0 10px 20px -5px rgba(212, 175, 55, 0.4) !important; } html.light .renew-card-btn:active { transform: translateY(2px); border-bottom: 0px solid transparent !important; } /* --- NBA Author names (index.php & workout.php) — gold → dark in light mode --- */ html.light .nba-author { color: #3f3f46 !important; } /* --- Quote card (index.php) — gradient → 3D card in light mode --- */ html.light .quote-card { background: linear-gradient(145deg, #ffffff, #f0f0f2) !important; box-shadow: 6px 6px 16px #d4d4d8, -6px -6px 16px #ffffff !important; border: 1px solid #e4e4e7 !important; } html.light .quote-card .quote-gradient { display: none !important; } /* --- Daily Grind (workout.php) — remove gradient overlay in light mode --- */ html.light .daily-grind-card { background-color: #ffffff !important; } html.light .daily-grind-gradient { background: linear-gradient(to top, rgba(255,255,255,0.95), transparent) !important; } /* --- Nav backdrop blur panels --- */ html.light .bg-dark-900\/90 { background-color: rgba(244, 244, 245, 0.9) !important; } html.light .bg-dark-900\/95 { background-color: rgba(244, 244, 245, 0.95) !important; } /* --- iframe/video containers keep dark --- */ html.light #videoModal .bg-dark-900, html.light #videoModal .bg-black { background-color: #000 !important; } /* ============================================ 7. HOVER STATE OVERRIDES ============================================ */ html.light .hover\:bg-dark-700:hover { background-color: #e4e4e7 !important; } html.light .hover\:bg-dark-600:hover { background-color: #d4d4d8 !important; } html.light .hover\:text-white:hover { color: #18181b !important; } html.light .hover\:bg-white:hover { background-color: #18181b !important; } html.light .hover\:bg-white:hover { color: #ffffff !important; } html.light .hover\:bg-black\/80:hover { background-color: rgba(0,0,0,0.6) !important; } /* ============================================ 8. FOCUS/ACTIVE STATE OVERRIDES ============================================ */ html.light .active\:bg-dark-600:active { background-color: #d4d4d8 !important; } html.light .focus\:border-gold-500:focus { border-color: #D4AF37 !important; } /* ============================================ 9. PEER (Toggle switches) — keep toggle functional ============================================ */ html.light .peer-checked\:bg-gold-500:is(:checked ~ *) { background-color: #D4AF37 !important; } /* ============================================ 10. GROUP HOVER OVERRIDES ============================================ */ html.light .group:hover .group-hover\:text-white { color: #18181b !important; } html.light .group:hover .group-hover\:text-black { color: #ffffff !important; } html.light .group:hover .group-hover\:bg-dark-700 { background-color: #e4e4e7 !important; } /* ============================================ 11. VIEW WORKOUT PAGE — LIGHT MODE ============================================ */ /* Back button — white pill with dark icon so it's visible on hero */ html.light #back-btn { background-color: rgba(255, 255, 255, 0.92) !important; color: #18181b !important; border-color: rgba(0, 0, 0, 0.10) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important; } html.light #back-btn:hover { background-color: #18181b !important; color: #ffffff !important; } /* Hero overlay gradient — completely hidden in light mode */ html.light .hero-overlay { background: none !important; } /* Hero title area — keep text white with strong shadow so it reads on any thumbnail */ html.light #hero-title-area .text-white, html.light #hero-title-area h1 { color: #ffffff !important; text-shadow: 0 2px 16px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.6) !important; } html.light #hero-title-area .text-gray-300, html.light #hero-title-area .text-gray-400 { color: rgba(255,255,255,0.85) !important; text-shadow: 0 1px 6px rgba(0,0,0,0.6) !important; } /* Category chips — keep gold but boost bg so it pops on dark thumbnails */ html.light #hero-title-area .bg-gold-500\/10 { background-color: rgba(212,175,55,0.25) !important; } html.light #hero-title-area .bg-black\/30 { background-color: rgba(0,0,0,0.45) !important; } html.light #hero-title-area .border-white\/10 { border-color: rgba(255,255,255,0.25) !important; } html.light #hero-title-area .text-gold-500\/70 { color: rgba(212,175,55,0.9) !important; } /* ============================================ 12. NATIVE PAGE TRANSITIONS (iOS Style) ============================================ */ html { /* Prevent white background flash when sliding out */ background-color: #09090b !important; } body { overflow-x: hidden; } /* 1. Standard (First Load / Direct Hit) */ body.page-enter-standard { animation: iosFadeIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* 2. Forward Navigation (Slide In Right, Slide Out Left) */ body.page-enter-forward { animation: iosSlideInRight 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; } body.page-leave-forward { animation: iosSlideOutLeft 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards !important; } /* 3. Backward Navigation (Slide In Left, Slide Out Right) */ body.page-enter-back { animation: iosSlideInLeft 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; } body.page-leave-back { animation: iosSlideOutRight 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards !important; } /* 4. Tab Navigation (Subtle Crossfade without sliding) */ body.page-enter-tab { animation: iosFadeIn 0.15s ease-out forwards; } body.page-leave-tab { animation: iosFadeOut 0.15s ease-in forwards !important; } /* --- Keyframes --- */ /* Simple Fades */ @keyframes iosFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes iosFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* Slide Forward */ @keyframes iosSlideInRight { 0% { transform: translateX(100%); opacity: 0.8; } 100% { transform: translateX(0); opacity: 1; } } @keyframes iosSlideOutLeft { 0% { transform: translateX(0); opacity: 1; } /* Scales down slightly and moves left, mimicking iOS nav stack */ 100% { transform: translateX(-25%) scale(0.98); opacity: 0; } } /* Slide Backward */ @keyframes iosSlideInLeft { /* Starting from the slight left scale */ 0% { transform: translateX(-25%) scale(0.98); opacity: 0; } 100% { transform: translateX(0) scale(1); opacity: 1; } } @keyframes iosSlideOutRight { /* Current page sweeps to the right */ 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(100%); opacity: 0.8; } } /* Exception for Video Player */ #videoModal { animation: none !important; }