@charset "UTF-8"; /* ------------------------------------------------ Animation Keyframes (used by Halloween) ------------------------------------------------ */ @keyframes skeleton-bob { 0% { transform: translateY(0); } 100% { transform: translateY(-50px); } } @keyframes horseman-float { 0% { transform: translateX(0) rotate(0deg); } 100% { transform: translateX(100px) rotate(10deg); } } /* ================================================= 1) HALLOWEEN (apply class on ) ================================================= */ .halloween-season { /* Background & Surfaces */ --main-bg-image: url('/img/haunted-house-day.png'); --card-bg-color: rgba(255, 255, 255, 0.15); /* Navbar & Footer */ --navbar-bg-color: rgba(255, 102, 0, 0.85); --navbar-text-color: #f0f0f0; --navbar-brand-color: #5e1c9a; --navbar-border-color: #5e1c9a; --footer-bg-color: rgba(94, 28, 154, 0.9); --footer-text-color: #f0f0f0; /* Text & Headings */ --heading-font: 'Creepster', cursive; --seasonal-heading-color: #ff6600; /* Theme Toggle */ #theme-toggle { color: #f0f0f0 !important; /* White text */ border-color: #f0f0f0 !important; /* White border */ background-color: transparent !important; } /* Iconography */ --seasonal-icon-url: url('/img/halloween-icon-ghost.svg'); --icon-color: #f0f0f0; } .halloween-season .seasonal-icon { opacity: 1; } /* Optional decorative sprites (controlled by your markup IDs): You can position these in HTML/CSS as you like. */ .halloween-season #skeleton { display: block; background-image: url('/img/skeleton.png'); left: 5%; animation: skeleton-bob 4s infinite alternate; } .halloween-season #horseman { display: block; background-image: url('/img/HeadlessHorseman.gif'); right: 5%; animation: horseman-float 5s infinite linear; } /* Dark override */ .halloween-season[data-theme="dark"] { --main-bg-image: url('/img/haunted-house-night.png'); --card-bg-color: rgba(255, 255, 255, 0.15); --footer-bg-color: rgba(94, 28, 154, 0.95); --footer-text-color: #f0f0f0; --seasonal-heading-color: #ffd28a; /* slightly lighter pumpkin in true dark */ --navbar-text-color: #f0f0f0; --icon-color: #f0f0f0; } /* ================================================= 2) CHRISTMAS ================================================= */ .christmas-season { --main-bg-image: url('/img/christmas-day.png'); --card-bg-color: rgba(255, 255, 255, 0.3); --navbar-bg-color: rgba(255, 255, 255, 0.9); --navbar-text-color: #c0392b; --navbar-brand-color: #27ae60; --navbar-border-color: #c0392b; --footer-bg-color: rgba(39, 174, 96, 0.85); --footer-text-color: #f0f0f0; --heading-font: 'Mountains of Christmas', cursive; --seasonal-heading-color: #c0392b; --seasonal-icon-url: url('/img/christmas-icon-snowflake.svg'); --icon-color: #c0392b; /* Theme Toggle */ #theme-toggle { color: #c0392b !important; /* Christmas Red text */ border-color: #c0392b !important; /* Christmas Red border */ background-color: transparent !important; } } .christmas-season .seasonal-icon { opacity: 1; } .christmas-season[data-theme="dark"] { --main-bg-image: url('/img/christmas-night.png'); --card-bg-color: rgba(0, 0, 0, 0.3); --footer-bg-color: rgba(39, 174, 96, 0.95); --footer-text-color: #f0f0f0; --seasonal-heading-color: #ffd700; --navbar-text-color: #ffd700; --icon-color: #ffd700; /* Theme Toggle */ #theme-toggle { color: #ffd700 !important; /* Gold text */ border-color: #ffd700 !important; /* Gold border */ } } /* ================================================= 3) WINTER (non-holiday) ================================================= */ .winter-season { --main-bg-image: url('/img/winter_flower_day2.jpg'); --card-bg-color: rgba(255, 255, 255, 0.3); --navbar-bg-color: rgba(255, 255, 255, 0.9); --navbar-text-color: #004d40; --navbar-border-color: #004d40; --footer-bg-color: #f0f0f0; --footer-text-color: #333333; --heading-font: Arial, sans-serif; --seasonal-heading-color: #004d40; --seasonal-icon-url: url('/img/winter-icon-mittens.svg'); --icon-color: #004d40; /* Theme Toggle */ #theme-toggle { color: #004d40 !important; /* Dark Teal text */ border-color: #004d40 !important; /* Dark Teal border */ background-color: transparent !important; } } .winter-season .seasonal-icon { opacity: 1; } .winter-season[data-theme="dark"] { --main-bg-image: url('/img/winter_flower_night2.jpg'); --card-bg-color: rgba(30, 30, 30, 0.3); --footer-bg-color: rgba(30, 30, 30, 0.9); --footer-text-color: #b2ebf2; --seasonal-heading-color: #b2ebf2; --navbar-text-color: #b2ebf2; --icon-color: #b2ebf2; /* Theme Toggle */ #theme-toggle { color: #b2ebf2 !important; /* Light Blue text */ border-color: #b2ebf2 !important; /* Light Blue border */ } } /* ================================================= 4) SPRING ================================================= */ .spring-season { --main-bg-image: url('/img/flowers_day.jpg'); --card-bg-color: rgba(255, 255, 255, 0.3); --navbar-bg-color: rgba(255, 255, 255, 0.9); --navbar-text-color: #4CAF50; --navbar-border-color: #4CAF50; --footer-bg-color: #f0f0f0; --footer-text-color: #333333; --heading-font: Arial, sans-serif; --seasonal-heading-color: #4CAF50; --seasonal-icon-url: url('/img/spring-icon-flower.svg'); --icon-color: #4CAF50; /* Theme Toggle */ #theme-toggle { color: #4CAF50 !important; /* Bright Green text */ border-color: #4CAF50 !important; /* Bright Green border */ background-color: transparent !important; } } .spring-season .seasonal-icon { opacity: 1; } .spring-season[data-theme="dark"] { --main-bg-image: url('/img/flowers_night.png'); --card-bg-color: rgba(30, 30, 30, 0.3); --footer-bg-color: rgba(30, 30, 30, 0.9); --footer-text-color: #81C784; --seasonal-heading-color: #81C784; --navbar-text-color: #81C784; --icon-color: #81C784; /* Theme Toggle */ #theme-toggle { color: #3e5f3f !important; /* Dark Green text */ border-color: #bbf4bd !important; /* Light Green border */ } } /* ================================================= 5) SUMMER ================================================= */ .summer-season { --main-bg-image: url('/img/wheat_day.jpg'); --card-bg-color: rgba(255, 255, 255, 0.3); --navbar-bg-color: rgba(255, 255, 255, 0.9); --navbar-text-color: #FF9800; --navbar-border-color: #FF9800; --footer-bg-color: #f0f0f0; --footer-text-color: #333333; --heading-font: Arial, sans-serif; --seasonal-heading-color: #FF9800; --seasonal-icon-url: url('/img/summer-icon-sun.svg'); --icon-color: #FF9800; /* Theme Toggle */ #theme-toggle { color: #FF9800 !important; /* Deep Orange text */ border-color: #FF9800 !important; /* Deep Orange border */ background-color: transparent !important; } } .summer-season .seasonal-icon { opacity: 1; } .summer-season[data-theme="dark"] { --main-bg-image: url('/img/wheat_night.png'); --card-bg-color: rgba(30, 30, 30, 0.3); --footer-bg-color: rgba(30, 30, 30, 0.9); --footer-text-color: #FFEB3B; --seasonal-heading-color: #FFEB3B; --navbar-text-color: #FFEB3B; --icon-color: #FFEB3B; /* Theme Toggle */ #theme-toggle { color: #FFEB3B !important; /* Yellow/Sun text */ border-color: #FFEB3B !important; /* Yellow/Sun border */ } } /* ================================================= 6) FALL ================================================= */ .fall-season { --main-bg-image: url('/img/maple_day.jpg'); --card-bg-color: rgba(255, 255, 255, 0.3); --navbar-bg-color: rgba(255, 255, 255, 0.9); --navbar-text-color: #D32F2F; --navbar-border-color: #D32F2F; --footer-bg-color: #f0f0f0; --footer-text-color: #333333; --heading-font: Arial, sans-serif; --seasonal-heading-color: #D32F2F; --seasonal-icon-url: url('/img/fall-icon-leaf.svg'); --icon-color: #D32F2F; /* Theme Toggle */ #theme-toggle { color: #D32F2F !important; /* Burgundy/Deep Red text */ border-color: #D32F2F !important; /* Burgundy/Deep Red border */ background-color: transparent !important; } } .fall-season .seasonal-icon { opacity: 1; } .fall-season[data-theme="dark"] { --main-bg-image: url('/img/maple_night.png'); --card-bg-color: rgba(30, 30, 30, 0.3); --footer-bg-color: rgba(30, 30, 30, 0.9); --footer-text-color: #FFB300; --seasonal-heading-color: #FFB300; --navbar-text-color: #FFB300; --icon-color: #FFB300; /* Theme Toggle */ #theme-toggle { color: #FFB300 !important; /* Amber/Orange text */ border-color: #FFB300 !important; /* Amber/Orange border */ } }