/** * TEMPORARY CHRISTMAS MODE STYLES * * All styles are scoped under .theme-christmas class. * This entire file can be deleted after Christmas. * * TO REMOVE AFTER CHRISTMAS: * 1. Delete this file * 2. Remove the CSS link from master.blade.php * 3. Remove the conditional class from master.blade.php body tag */ /* ============================================ CHRISTMAS THEME - SCOPED STYLES ============================================ */ .theme-christmas { /* Subtle festive color accents */ --christmas-red: #C41E3A; --christmas-green: #228B22; --christmas-gold: #DAA520; --christmas-snow: #FFFAF0; } /* Header & Navigation - Subtle festive touches */ .theme-christmas .app-header { background: linear-gradient(135deg, rgba(196, 30, 58, 0.05) 0%, rgba(34, 139, 34, 0.05) 100%); border-bottom: 2px solid rgba(196, 30, 58, 0.1); } .theme-christmas .app-header::before { content: '🎄'; opacity: 0.3; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; pointer-events: none; } /* Sidebar - Gentle festive accent */ /* Sidebar background styling removed to avoid transparency issues */ .theme-christmas .app-sidebar .menu-item .menu-link.active { background: rgba(196, 30, 58, 0.08); border-left: 3px solid var(--christmas-red); } /* Buttons - Premium festive styling */ .theme-christmas .btn-primary { background: linear-gradient(135deg, var(--christmas-red) 0%, #A01A2E 100%); border-color: var(--christmas-red); box-shadow: 0 2px 8px rgba(196, 30, 58, 0.2); } .theme-christmas .btn-primary:hover { background: linear-gradient(135deg, #A01A2E 0%, var(--christmas-red) 100%); box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3); transform: translateY(-1px); transition: all 0.2s ease; } .theme-christmas .btn-success { background: linear-gradient(135deg, var(--christmas-green) 0%, #1A6B1A 100%); border-color: var(--christmas-green); } .theme-christmas .btn-success:hover { background: linear-gradient(135deg, #1A6B1A 0%, var(--christmas-green) 100%); } /* Cards - Subtle festive borders with gift pompons */ .theme-christmas .card { border: 1px solid rgba(196, 30, 58, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(34, 139, 34, 0.05); position: relative; } /* Realistic Christmas light bulbs around cards with color-changing animation */ .theme-christmas .card::after { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; pointer-events: none; background-image: /* Top border bulbs - closer spacing */ radial-gradient(ellipse at 6% 0%, var(--christmas-red) 3px 4px, transparent 3px 4px), radial-gradient(circle at 6% -1px, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 18% 0%, var(--christmas-green) 3px 4px, transparent 3px 4px), radial-gradient(circle at 18% -1px, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 30% 0%, var(--christmas-gold) 3px 4px, transparent 3px 4px), radial-gradient(circle at 30% -1px, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 42% 0%, var(--christmas-red) 3px 4px, transparent 3px 4px), radial-gradient(circle at 42% -1px, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 54% 0%, var(--christmas-green) 3px 4px, transparent 3px 4px), radial-gradient(circle at 54% -1px, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 66% 0%, var(--christmas-gold) 3px 4px, transparent 3px 4px), radial-gradient(circle at 66% -1px, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 78% 0%, var(--christmas-red) 3px 4px, transparent 3px 4px), radial-gradient(circle at 78% -1px, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 90% 0%, var(--christmas-green) 3px 4px, transparent 3px 4px), radial-gradient(circle at 90% -1px, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 94% 0%, var(--christmas-gold) 3px 4px, transparent 3px 4px), radial-gradient(circle at 94% -1px, rgba(255, 255, 255, 0.3) 1px, transparent 1px), /* Right border bulbs - closer spacing */ radial-gradient(ellipse at 100% 8%, var(--christmas-red) 4px 3px, transparent 4px 3px), radial-gradient(circle at 99px 8%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 100% 20%, var(--christmas-green) 4px 3px, transparent 4px 3px), radial-gradient(circle at 99px 20%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 100% 32%, var(--christmas-gold) 4px 3px, transparent 4px 3px), radial-gradient(circle at 99px 32%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 100% 44%, var(--christmas-red) 4px 3px, transparent 4px 3px), radial-gradient(circle at 99px 44%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 100% 56%, var(--christmas-green) 4px 3px, transparent 4px 3px), radial-gradient(circle at 99px 56%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 100% 68%, var(--christmas-gold) 4px 3px, transparent 4px 3px), radial-gradient(circle at 99px 68%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 100% 80%, var(--christmas-red) 4px 3px, transparent 4px 3px), radial-gradient(circle at 99px 80%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 100% 92%, var(--christmas-green) 4px 3px, transparent 4px 3px), radial-gradient(circle at 99px 92%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), /* Bottom border bulbs - closer spacing */ radial-gradient(ellipse at 94% 100%, var(--christmas-gold) 3px 4px, transparent 3px 4px), radial-gradient(circle at 94% 101%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 90% 100%, var(--christmas-red) 3px 4px, transparent 3px 4px), radial-gradient(circle at 90% 101%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 78% 100%, var(--christmas-green) 3px 4px, transparent 3px 4px), radial-gradient(circle at 78% 101%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 66% 100%, var(--christmas-gold) 3px 4px, transparent 3px 4px), radial-gradient(circle at 66% 101%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 54% 100%, var(--christmas-red) 3px 4px, transparent 3px 4px), radial-gradient(circle at 54% 101%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 42% 100%, var(--christmas-green) 3px 4px, transparent 3px 4px), radial-gradient(circle at 42% 101%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 30% 100%, var(--christmas-gold) 3px 4px, transparent 3px 4px), radial-gradient(circle at 30% 101%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 18% 100%, var(--christmas-red) 3px 4px, transparent 3px 4px), radial-gradient(circle at 18% 101%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 6% 100%, var(--christmas-green) 3px 4px, transparent 3px 4px), radial-gradient(circle at 6% 101%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), /* Left border bulbs - closer spacing */ radial-gradient(ellipse at 0% 92%, var(--christmas-gold) 4px 3px, transparent 4px 3px), radial-gradient(circle at 1px 92%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 0% 80%, var(--christmas-red) 4px 3px, transparent 4px 3px), radial-gradient(circle at 1px 80%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 0% 68%, var(--christmas-green) 4px 3px, transparent 4px 3px), radial-gradient(circle at 1px 68%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 0% 56%, var(--christmas-gold) 4px 3px, transparent 4px 3px), radial-gradient(circle at 1px 56%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 0% 44%, var(--christmas-red) 4px 3px, transparent 4px 3px), radial-gradient(circle at 1px 44%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 0% 32%, var(--christmas-green) 4px 3px, transparent 4px 3px), radial-gradient(circle at 1px 32%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 0% 20%, var(--christmas-gold) 4px 3px, transparent 4px 3px), radial-gradient(circle at 1px 20%, rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(ellipse at 0% 8%, var(--christmas-red) 4px 3px, transparent 4px 3px), radial-gradient(circle at 1px 8%, rgba(255, 255, 255, 0.3) 1px, transparent 1px); background-size: 100% 100%; background-repeat: no-repeat; animation: christmasBulbsColorChange 4s ease-in-out infinite; z-index: 1; opacity: 0.95; } @keyframes christmasBulbsColorChange { 0% { filter: hue-rotate(0deg) drop-shadow(0 0 5px rgba(196, 30, 58, 0.8)) drop-shadow(0 0 10px rgba(196, 30, 58, 0.6)); } 33% { filter: hue-rotate(120deg) drop-shadow(0 0 5px rgba(34, 139, 34, 0.8)) drop-shadow(0 0 10px rgba(34, 139, 34, 0.6)); } 66% { filter: hue-rotate(240deg) drop-shadow(0 0 5px rgba(218, 165, 32, 0.8)) drop-shadow(0 0 10px rgba(218, 165, 32, 0.6)); } 100% { filter: hue-rotate(360deg) drop-shadow(0 0 5px rgba(196, 30, 58, 0.8)) drop-shadow(0 0 10px rgba(196, 30, 58, 0.6)); } } @keyframes pomponGlow { 0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(196, 30, 58, 0.6), 0 0 15px rgba(196, 30, 58, 0.4), inset -2px -2px 4px rgba(0, 0, 0, 0.2); } 50% { transform: scale(1.1); box-shadow: 0 0 12px rgba(196, 30, 58, 0.8), 0 0 20px rgba(196, 30, 58, 0.6), inset -2px -2px 4px rgba(0, 0, 0, 0.2); } } .theme-christmas .card-header { background: linear-gradient(135deg, rgba(196, 30, 58, 0.03) 0%, rgba(34, 139, 34, 0.03) 100%); border-bottom: 1px solid rgba(196, 30, 58, 0.1); position: relative; } /* Badges - Festive colors */ .theme-christmas .badge.bg-primary { background-color: var(--christmas-red) !important; } .theme-christmas .badge.bg-success { background-color: var(--christmas-green) !important; } /* Links - Festive hover effect */ .theme-christmas a:not(.btn):hover { color: var(--christmas-red); transition: color 0.2s ease; } /* Tables - Subtle row highlights */ .theme-christmas .table tbody tr:hover { background-color: rgba(34, 139, 34, 0.03); } .theme-christmas .table thead th { border-bottom: 2px solid rgba(196, 30, 58, 0.2); color: var(--christmas-red); font-weight: 600; } /* Icons - Subtle festive glow on hover */ .theme-christmas .btn-icon:hover { background-color: rgba(196, 30, 58, 0.1); transition: background-color 0.2s ease; } /* Alerts - Festive styling */ .theme-christmas .alert-primary { background-color: rgba(196, 30, 58, 0.1); border-color: var(--christmas-red); color: #A01A2E; } .theme-christmas .alert-success { background-color: rgba(34, 139, 34, 0.1); border-color: var(--christmas-green); color: #1A6B1A; } /* Loading states - Festive spinner */ .theme-christmas .spinner-border-primary { border-color: var(--christmas-red); border-right-color: transparent; } /* Dropdowns - Festive accent */ .theme-christmas .dropdown-menu { border: 1px solid rgba(196, 30, 58, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(34, 139, 34, 0.05); } .theme-christmas .dropdown-item:hover { background-color: rgba(196, 30, 58, 0.08); } /* Form inputs - Festive focus states */ .theme-christmas .form-control:focus, .theme-christmas .form-select:focus { border-color: var(--christmas-red); box-shadow: 0 0 0 0.25rem rgba(196, 30, 58, 0.15); } /* Progress bars - Festive colors */ .theme-christmas .progress-bar.bg-primary { background-color: var(--christmas-red) !important; } .theme-christmas .progress-bar.bg-success { background-color: var(--christmas-green) !important; } /* Realistic snow falling animation with multiple layers and natural movement */ .theme-christmas::before { content: ''; position: fixed; top: -10%; left: 0; width: 100%; height: 110%; pointer-events: none; overflow: hidden; background-image: /* Layer 1: Large snowflakes - slow, heavy fall */ radial-gradient(circle at 7% 0%, rgba(255, 255, 255, 0.95) 3.5px, transparent 3.5px), radial-gradient(circle at 23% 0%, rgba(255, 255, 255, 0.9) 3px, transparent 3px), radial-gradient(circle at 41% 0%, rgba(255, 255, 255, 0.92) 4px, transparent 4px), radial-gradient(circle at 57% 0%, rgba(255, 255, 255, 0.88) 2.8px, transparent 2.8px), radial-gradient(circle at 73% 0%, rgba(255, 255, 255, 0.94) 3.2px, transparent 3.2px), radial-gradient(circle at 89% 0%, rgba(255, 255, 255, 0.91) 3.3px, transparent 3.3px), radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.87) 2.5px, transparent 2.5px), radial-gradient(circle at 36% 0%, rgba(255, 255, 255, 0.93) 3.8px, transparent 3.8px), radial-gradient(circle at 64% 0%, rgba(255, 255, 255, 0.89) 2.9px, transparent 2.9px), radial-gradient(circle at 86% 0%, rgba(255, 255, 255, 0.92) 3.1px, transparent 3.1px), /* Layer 2: Medium snowflakes - moderate speed */ radial-gradient(circle at 11% 0%, rgba(255, 255, 255, 0.82) 2px, transparent 2px), radial-gradient(circle at 28% 0%, rgba(255, 255, 255, 0.78) 2.3px, transparent 2.3px), radial-gradient(circle at 44% 0%, rgba(255, 255, 255, 0.85) 1.8px, transparent 1.8px), radial-gradient(circle at 61% 0%, rgba(255, 255, 255, 0.8) 2.1px, transparent 2.1px), radial-gradient(circle at 77% 0%, rgba(255, 255, 255, 0.83) 2.2px, transparent 2.2px), radial-gradient(circle at 19% 0%, rgba(255, 255, 255, 0.79) 1.9px, transparent 1.9px), radial-gradient(circle at 33% 0%, rgba(255, 255, 255, 0.84) 2.4px, transparent 2.4px), radial-gradient(circle at 51% 0%, rgba(255, 255, 255, 0.81) 2px, transparent 2px), radial-gradient(circle at 69% 0%, rgba(255, 255, 255, 0.86) 1.7px, transparent 1.7px), radial-gradient(circle at 83% 0%, rgba(255, 255, 255, 0.77) 2.5px, transparent 2.5px), /* Layer 3: Small snowflakes - fast, light fall */ radial-gradient(circle at 4% 0%, rgba(255, 255, 255, 0.72) 1.2px, transparent 1.2px), radial-gradient(circle at 17% 0%, rgba(255, 255, 255, 0.68) 1px, transparent 1px), radial-gradient(circle at 31% 0%, rgba(255, 255, 255, 0.74) 1.3px, transparent 1.3px), radial-gradient(circle at 47% 0%, rgba(255, 255, 255, 0.7) 0.9px, transparent 0.9px), radial-gradient(circle at 63% 0%, rgba(255, 255, 255, 0.76) 1.4px, transparent 1.4px), radial-gradient(circle at 79% 0%, rgba(255, 255, 255, 0.71) 1.1px, transparent 1.1px), radial-gradient(circle at 9% 0%, rgba(255, 255, 255, 0.73) 1.15px, transparent 1.15px), radial-gradient(circle at 26% 0%, rgba(255, 255, 255, 0.69) 0.95px, transparent 0.95px), radial-gradient(circle at 54% 0%, rgba(255, 255, 255, 0.75) 1.25px, transparent 1.25px), radial-gradient(circle at 71% 0%, rgba(255, 255, 255, 0.67) 0.85px, transparent 0.85px), radial-gradient(circle at 96% 0%, rgba(255, 255, 255, 0.7) 1px, transparent 1px); background-size: /* Large flakes - wide spacing, slow */ 350px 400px, 320px 380px, 380px 420px, 340px 390px, 360px 410px, 330px 370px, 310px 360px, 370px 430px, 350px 400px, 340px 385px, /* Medium flakes - medium spacing */ 220px 300px, 240px 320px, 200px 280px, 230px 310px, 250px 330px, 210px 290px, 260px 340px, 225px 305px, 245px 325px, 235px 315px, /* Small flakes - tight spacing, fast */ 140px 250px, 160px 270px, 120px 230px, 150px 260px, 170px 280px, 130px 240px, 180px 290px, 145px 255px, 155px 265px, 165px 275px, 135px 245px; background-position: /* Staggered initial positions for natural look */ 0 -50px, 50px -120px, 100px -30px, 150px -90px, 200px -60px, 250px -110px, 30px -140px, 80px -20px, 130px -80px, 180px -150px, 15px -70px, 45px -100px, 75px -40px, 105px -130px, 135px -10px, 25px -160px, 55px -50px, 85px -120px, 115px -20px, 145px -90px, 8px -35px, 28px -85px, 48px -15px, 68px -105px, 88px -45px, 108px -125px, 18px -55px, 38px -95px, 58px -25px, 78px -115px, 98px -5px; animation: realisticSnowFall 25s linear infinite; z-index: 0; opacity: 0.85; } @keyframes realisticSnowFall { 0% { background-position: 0 -50px, 50px -120px, 100px -30px, 150px -90px, 200px -60px, 250px -110px, 30px -140px, 80px -20px, 130px -80px, 180px -150px, 15px -70px, 45px -100px, 75px -40px, 105px -130px, 135px -10px, 25px -160px, 55px -50px, 85px -120px, 115px -20px, 145px -90px, 8px -35px, 28px -85px, 48px -15px, 68px -105px, 88px -45px, 108px -125px, 18px -55px, 38px -95px, 58px -25px, 78px -115px, 98px -5px; } 100% { background-position: /* Large flakes - slow fall with significant horizontal drift (wind) */ 45px calc(100vh + 350px), 95px calc(100vh + 320px), 145px calc(100vh + 380px), 195px calc(100vh + 340px), 245px calc(100vh + 360px), 295px calc(100vh + 330px), 65px calc(100vh + 310px), 115px calc(100vh + 370px), 165px calc(100vh + 350px), 215px calc(100vh + 340px), /* Medium flakes - moderate speed with drift */ 35px calc(100vh + 220px), 75px calc(100vh + 240px), 115px calc(100vh + 200px), 155px calc(100vh + 230px), 195px calc(100vh + 250px), 55px calc(100vh + 210px), 95px calc(100vh + 260px), 125px calc(100vh + 225px), 175px calc(100vh + 245px), 205px calc(100vh + 235px), /* Small flakes - fast fall with slight drift */ 28px calc(100vh + 140px), 48px calc(100vh + 160px), 68px calc(100vh + 120px), 88px calc(100vh + 150px), 108px calc(100vh + 170px), 38px calc(100vh + 130px), 58px calc(100vh + 180px), 78px calc(100vh + 145px), 98px calc(100vh + 155px), 118px calc(100vh + 165px), 138px calc(100vh + 135px); } } /* Snow layer is behind everything - no layout changes needed */ /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { .theme-christmas::before { animation: none; } }