/* ============================================================ SEASONAL THEMES — shared across timetable & faculty pages Works alongside the existing data-theme="dark|light" system. Activated via data-season="ramadan|..." on . ============================================================ */ /* ── Seasonal Decorations Container ──────────────────────── */ #seasonal-decorations { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3998; overflow: hidden; opacity: 0; transition: opacity 0.6s ease; } body[data-season]:not([data-season="none"]) #seasonal-decorations { opacity: 1; } /* ============================================================ RAMADAN THEME 🌙 Warm golden tones, crescent moons, hanging lanterns ============================================================ */ /* -- Color overrides (work in BOTH dark and light modes) -- */ [data-season="ramadan"] { --primary-accent: #d4a028; --secondary-accent: #e8c547; --accent-gradient-dark: linear-gradient(90deg, #d4a028, #e8c547); --accent-gradient-light: linear-gradient(90deg, #b8860b, #d4a028); --accent-gradient: var(--accent-gradient-dark); } [data-season="ramadan"][data-theme="dark"] { --bg-color: #0f0d14; --surface-color: #1a1520; --accent-gradient: var(--accent-gradient-dark); --card-hover-shadow: 0 8px 30px rgba(212, 160, 40, 0.2); } [data-season="ramadan"][data-theme="light"] { --bg-color: #fef9ed; --surface-color: #fffdf5; --accent-gradient: var(--accent-gradient-light); --card-hover-shadow: 0 8px 30px rgba(184, 134, 11, 0.15); } /* Blob colour override */ [data-season="ramadan"] body::before, body[data-season="ramadan"]::before { background: #d4a028 !important; } [data-season="ramadan"] body::after, body[data-season="ramadan"]::after { background: #e8c547 !important; } /* -- Hanging lanterns (icon-based) -- */ .ramadan-lantern { position: absolute; top: 0; color: #d4a028; display: flex; flex-direction: column; align-items: center; transform-origin: top center; animation: lanternSway 4s ease-in-out infinite alternate; } /* Rope */ .ramadan-lantern::before { content: ''; width: 1.5px; height: 14px; background: rgba(212, 160, 40, 0.5); flex-shrink: 0; } .ramadan-lantern svg { width: 44px; height: 44px; filter: drop-shadow(0 0 8px rgba(212, 160, 40, 0.5)); } /* Smaller lanterns */ .ramadan-lantern.small::before { height: 10px; } .ramadan-lantern.small svg { width: 32px; height: 32px; } .ramadan-lantern:nth-child(even) { animation-duration: 5s; animation-delay: -1s; } .ramadan-lantern:nth-child(3n) { animation-duration: 4.5s; animation-delay: -2s; } @keyframes lanternSway { 0% { transform: rotate(-3deg); } 100% { transform: rotate(3deg); } } /* -- Crescent moons -- */ .ramadan-moon { position: absolute; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset -10px 2px 0 0 #e8c547; opacity: 0.35; animation: moonFloat 8s ease-in-out infinite alternate; } .ramadan-moon.small { width: 18px; height: 18px; box-shadow: inset -7px 1px 0 0 #e8c547; opacity: 0.25; } @keyframes moonFloat { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-12px) rotate(10deg); } } /* -- Stars (tiny twinkling dots) -- */ .ramadan-star { position: absolute; width: 3px; height: 3px; background: #f5dfa0; border-radius: 50%; opacity: 0; animation: starTwinkle 3s ease-in-out infinite; } @keyframes starTwinkle { 0%, 100% { opacity: 0; } 50% { opacity: 0.7; } } /* Light mode: slightly lower opacity for decorations */ [data-theme="light"] .ramadan-lantern svg { filter: drop-shadow(0 0 6px rgba(184, 134, 11, 0.3)); } [data-theme="light"] .ramadan-moon { box-shadow: inset -10px 2px 0 0 #d4a028; opacity: 0.25; } [data-theme="light"] .ramadan-star { background: #d4a028; } /* ── Responsive: smaller decorations on small screens ─────── */ @media (max-width: 768px) { /* Lanterns: keep 5 (hide children 6-8), shrink & spread evenly */ .ramadan-lantern:nth-child(n+6) { display: none; } .ramadan-lantern::before { height: 10px; } .ramadan-lantern.small::before { height: 8px; } .ramadan-lantern svg { width: 34px; height: 34px; } .ramadan-lantern.small svg { width: 24px; height: 24px; } .ramadan-lantern:nth-child(1) { left: 8% !important; } .ramadan-lantern:nth-child(2) { left: 28% !important; } .ramadan-lantern:nth-child(3) { left: 48% !important; } .ramadan-lantern:nth-child(4) { left: 68% !important; } .ramadan-lantern:nth-child(5) { left: 88% !important; } /* Moons: keep 2 (hide children 11,12), shrink */ .ramadan-moon { width: 20px; height: 20px; box-shadow: inset -7px 1px 0 0 #e8c547; } .ramadan-moon.small { width: 14px; height: 14px; box-shadow: inset -5px 1px 0 0 #e8c547; } .ramadan-moon:nth-child(n+11) { display: none; } /* Stars: keep 8 (hide children 21-26), shrink */ .ramadan-star { width: 2px; height: 2px; } .ramadan-star:nth-child(n+21) { display: none; } } @media (max-width: 480px) { /* Lanterns: keep 4 (hide children 5-8), shrink more & spread evenly */ .ramadan-lantern:nth-child(n+5) { display: none; } .ramadan-lantern::before { height: 8px; } .ramadan-lantern.small::before { height: 6px; } .ramadan-lantern svg { width: 28px; height: 28px; filter: drop-shadow(0 0 4px rgba(212, 160, 40, 0.35)); } .ramadan-lantern.small svg { width: 20px; height: 20px; } .ramadan-lantern:nth-child(1) { left: 10% !important; } .ramadan-lantern:nth-child(2) { left: 35% !important; } .ramadan-lantern:nth-child(3) { left: 60% !important; } .ramadan-lantern:nth-child(4) { left: 85% !important; } /* Moons: keep 1 (hide children 10-12), smaller */ .ramadan-moon { width: 14px; height: 14px; box-shadow: inset -5px 1px 0 0 #e8c547; opacity: 0.2; } .ramadan-moon.small { width: 10px; height: 10px; box-shadow: inset -4px 1px 0 0 #e8c547; } .ramadan-moon:nth-child(n+10) { display: none; } /* Stars: keep 5 (hide children 18-26) */ .ramadan-star:nth-child(n+18) { display: none; } } /* ── Sidebar active season indicator ─────────────────────── */ [data-season="ramadan"] .sidebar-header h3::after { content: ' 🌙'; } /* ── Glow & shadow overrides (replace hardcoded blue glows) ── */ /* -- Shared: sidebar, focus rings, theme toggle -- */ [data-season="ramadan"] .sidebar-footer #themeToggleBtn:hover { box-shadow: 0 0 15px rgba(212, 160, 40, 0.3); } [data-season="ramadan"] *:focus-visible { outline-color: var(--primary-accent); } [data-season="ramadan"] button:focus-visible, [data-season="ramadan"] a:focus-visible, [data-season="ramadan"] input:focus-visible, [data-season="ramadan"] select:focus-visible, [data-season="ramadan"] textarea:focus-visible { box-shadow: 0 0 0 4px rgba(212, 160, 40, 0.25); } /* -- Timetable: day selector, view toggle, buttons -- */ [data-season="ramadan"] .day-selector button.active:not(.day-btn-saturday) { box-shadow: 0 0 20px rgba(212, 160, 40, 0.5); } [data-season="ramadan"] .view-btn.active { box-shadow: 0 0 20px rgba(212, 160, 40, 0.5); } [data-season="ramadan"] .campus-btn.active:not(.campus-btn-city) { box-shadow: 0 0 15px rgba(212, 160, 40, 0.4); } [data-season="ramadan"] header #sheetsLinkBtn:hover { box-shadow: 0 0 10px rgba(212, 160, 40, 0.5); } /* -- Timetable: search/filter focus glow -- */ [data-season="ramadan"] .search-filter-bar input:focus, [data-season="ramadan"] .search-container input:focus { box-shadow: 0 0 15px rgba(212, 160, 40, 0.4); } [data-season="ramadan"] .search-filter-bar .filter-select.active-filter { background: linear-gradient(135deg, rgba(212, 160, 40, 0.15), rgba(232, 197, 71, 0.08)); } /* -- Timetable: status badges & pulse animation -- */ [data-season="ramadan"] .status-badge.status-upcoming { background-color: rgba(232, 197, 71, 0.2); border-color: rgba(232, 197, 71, 0.4); } [data-season="ramadan"] .status-badge.status-ongoing { background-color: rgba(212, 160, 40, 0.2); border-color: rgba(212, 160, 40, 0.5); animation: ramadanPulse 2s infinite; } @keyframes ramadanPulse { 0% { box-shadow: 0 0 0 0 rgba(212, 160, 40, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(212, 160, 40, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 160, 40, 0); } } /* -- Timetable: share/export buttons -- */ [data-season="ramadan"] #shareScheduleBtn:hover { box-shadow: 0 0 12px rgba(212, 160, 40, 0.2); } [data-season="ramadan"] #copyScheduleLinkBtn { border-color: var(--primary-accent); color: var(--primary-accent); } [data-season="ramadan"] #copyScheduleLinkBtn:hover { background: rgba(212, 160, 40, 0.15); } /* -- Timetable: current class widget -- */ [data-season="ramadan"] .current-class-widget { background: linear-gradient(135deg, rgba(212, 160, 40, 0.15), rgba(232, 197, 71, 0.08)); } /* -- Timetable: notification/subscribe button glow -- */ [data-season="ramadan"] .subscribe-btn { box-shadow: 0 4px 15px rgba(212, 160, 40, 0.3); } [data-season="ramadan"] .subscribe-btn:hover { box-shadow: 0 6px 20px rgba(212, 160, 40, 0.35); } /* -- Timetable: modal shadows -- */ [data-season="ramadan"] .modal-content { box-shadow: 0 10px 40px rgba(212, 160, 40, 0.25); } /* -- Timetable: card highlight ring -- */ [data-season="ramadan"] .class-card.highlighted .class-card-inner { box-shadow: 0 0 0 4px var(--primary-accent), 0 0 30px rgba(212, 160, 40, 0.5) !important; } /* -- Timetable: schedule info backgrounds -- */ [data-season="ramadan"] .schedule-info-card, [data-season="ramadan"] .info-card { background: linear-gradient(135deg, rgba(212, 160, 40, 0.08), rgba(232, 197, 71, 0.05)); border-color: rgba(212, 160, 40, 0.15); } /* -- Faculty: filter button gradients & glows -- */ [data-season="ramadan"] .filter-button { background: linear-gradient(135deg, rgba(212, 160, 40, 0.1), rgba(232, 197, 71, 0.08)); border-color: rgba(212, 160, 40, 0.25); } [data-season="ramadan"] .filter-button:hover, [data-season="ramadan"] .filter-button.active { background: linear-gradient(135deg, rgba(212, 160, 40, 0.18), rgba(232, 197, 71, 0.12)); border-color: rgba(212, 160, 40, 0.4); box-shadow: 0 3px 10px rgba(212, 160, 40, 0.15); } /* -- Faculty: review/schedule modal shadow -- */ [data-season="ramadan"] .review-modal-content, [data-season="ramadan"] .schedule-modal-content { box-shadow: 0 10px 40px rgba(212, 160, 40, 0.25); } /* -- Faculty: submit button glow -- */ [data-season="ramadan"] .submit-review-btn { box-shadow: 0 4px 15px rgba(212, 160, 40, 0.4); } /* -- Faculty: department tag backgrounds -- */ [data-season="ramadan"] .dept-tag { background: rgba(212, 160, 40, 0.1); } /* -- Faculty: view schedule button -- */ [data-season="ramadan"] .view-schedule-btn { background: linear-gradient(135deg, rgba(212, 160, 40, 0.2), rgba(232, 197, 71, 0.15)); border-color: rgba(212, 160, 40, 0.4); } [data-season="ramadan"] .view-schedule-btn:hover { background: linear-gradient(135deg, rgba(212, 160, 40, 0.35), rgba(232, 197, 71, 0.25)); box-shadow: 0 6px 20px rgba(212, 160, 40, 0.3); } /* -- Main page: nav card icon color -- */ [data-season="ramadan"] .pulse-card .icon-circle { color: #d4a028; } [data-season="ramadan"] .nav-card:hover { box-shadow: 0 20px 40px rgba(212, 160, 40, 0.25); } [data-season="ramadan"] #themeToggleBtn:hover { border-color: var(--primary-accent); } /* -- User tips (both pages): glow & next-tip hover -- */ [data-season="ramadan"] .user-tip { box-shadow: 0 8px 30px rgba(212, 160, 40, 0.2); } [data-season="ramadan"] .user-tip-next:hover { background: rgba(212, 160, 40, 0.1); } /* -- Timetable: Reminders / notification toggle button -- */ [data-season="ramadan"] .notification-toggle-btn { background: var(--accent-gradient); } [data-season="ramadan"] .notification-toggle-btn:hover { box-shadow: 0 4px 15px rgba(212, 160, 40, 0.3); } [data-season="ramadan"] .notification-toggle-btn:not(.active):not(.denied) { animation: ramadanSubtlePulse 3s ease-in-out infinite; } @keyframes ramadanSubtlePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 160, 40, 0); } 50% { box-shadow: 0 0 0 4px rgba(212, 160, 40, 0.25); } } /* -- Timetable: location badges (override hardcoded blue) -- */ [data-season="ramadan"] .location-badge { background-color: rgba(212, 160, 40, 0.15); border-color: rgba(212, 160, 40, 0.4); } [data-season="ramadan"] .free-room-card .location-badge { background-color: rgba(212, 160, 40, 0.15); border-color: rgba(212, 160, 40, 0.4); } /* -- Timetable: "Available Now" badge (free rooms) -- */ [data-season="ramadan"] .availability-status { background-color: rgba(212, 160, 40, 0.1); border-color: rgba(212, 160, 40, 0.3); } /* -- Timetable: announcement bar -- */ [data-season="ramadan"] .announcement-bar { background: rgba(212, 160, 40, 0.15); } /* -- Timetable: notification info box -- */ [data-season="ramadan"] .notification-info-box { background: linear-gradient(135deg, rgba(212, 160, 40, 0.08), rgba(232, 197, 71, 0.05)); border-color: rgba(212, 160, 40, 0.15); } /* -- Timetable: weekly export slot (non-city-campus) -- */ [data-season="ramadan"] .image-export-container .export-weekly-slot.class-slot:not(.city-campus-slot) { background: linear-gradient(135deg, rgba(212, 160, 40, 0.12) 0%, rgba(232, 197, 71, 0.08) 100%); } /* -- Timetable: light-mode card hover shadow -- */ [data-season="ramadan"][data-theme="light"] .class-card:hover { box-shadow: 0 12px 40px rgba(184, 134, 11, 0.15); } /* ── City Campus purple: always hardcoded, immune to themes ── */ [data-season="ramadan"] .class-card.city-campus { background: linear-gradient(135deg, #a78bfa, #8b5cf6); } [data-season="ramadan"] .class-card.city-campus:hover { box-shadow: 0 8px 30px rgba(139, 92, 246, 0.25); } [data-season="ramadan"] .class-card.city-campus .location-badge { background-color: rgba(139, 92, 246, 0.15); color: #a78bfa; border-color: rgba(139, 92, 246, 0.4); } [data-season="ramadan"] .free-room-card.city-campus { background: linear-gradient(135deg, #a78bfa, #8b5cf6); } [data-season="ramadan"] .free-room-card.city-campus .location-badge { background-color: rgba(139, 92, 246, 0.15); color: #a78bfa; border-color: rgba(139, 92, 246, 0.4); } [data-season="ramadan"] .weekly-class-card.city-campus { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(167, 139, 250, 0.1)); border-color: rgba(139, 92, 246, 0.3); } [data-season="ramadan"] .weekly-class-card.city-campus .weekly-course-code { color: #a78bfa; } [data-season="ramadan"] .campus-btn.campus-btn-city.active { box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); } [data-season="ramadan"] .campus-btn.campus-btn-city:not(.active):hover { color: #a78bfa; } /* ── Saturday button: always purple, immune to themes ── */ [data-season="ramadan"] .day-selector .day-btn-saturday.active { background: linear-gradient(135deg, #a78bfa, #8b5cf6); box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); } [data-season="ramadan"] .day-selector .day-btn-saturday:not(.active):hover { color: #a78bfa; } /* -- Faculty: profile link button (override blue) -- */ [data-season="ramadan"] .profile-link a { background: linear-gradient(135deg, rgba(212, 160, 40, 0.1), rgba(232, 197, 71, 0.08)); border-color: rgba(212, 160, 40, 0.25); } [data-season="ramadan"] .profile-link a:hover { background: linear-gradient(135deg, rgba(212, 160, 40, 0.18), rgba(232, 197, 71, 0.12)); border-color: rgba(212, 160, 40, 0.4); box-shadow: 0 3px 10px rgba(212, 160, 40, 0.15); } [data-season="ramadan"][data-theme="light"] .profile-link a { background: linear-gradient(135deg, rgba(184, 134, 11, 0.08), rgba(212, 160, 40, 0.06)); border-color: rgba(184, 134, 11, 0.2); } [data-season="ramadan"][data-theme="light"] .profile-link a:hover { background: linear-gradient(135deg, rgba(184, 134, 11, 0.12), rgba(212, 160, 40, 0.1)); border-color: rgba(184, 134, 11, 0.35); } /* ── Smooth transition when switching seasons ────────────── */ body { transition: background-color 0.5s ease, color 0.3s ease; }