/* ============================================ 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; }