/* ======================================== BIRTHDAY THEME ======================================== */ /* Applied via data-theme="birthday" on element */ /* Activates site-wide during March or on individual user birthdays */ [data-theme="birthday"] { /* Primary colors → Lavender/Purple (matches bunting colors) */ --color-primary: #8d6e8f; /* Dusty purple from wireframe */ --color-primary-dark: #7a5c7c; /* Deeper purple for hover */ --color-primary-light: #a888aa; /* Lighter purple for accents */ /* Link colors to match */ --color-link: #8d6e8f; --color-link-hover: #7a5c7c; /* Keep shadow focus consistent with purple tint */ --shadow-focus: 0 0 0 3px rgba(141, 110, 143, 0.2); /* User entry highlight - light purple tint */ --color-user-entry: rgba(141, 110, 143, 0.12); --color-user-entry-hover: rgba(141, 110, 143, 0.18); } /* Birthday confetti background on body */ [data-theme="birthday"] body { background-image: url('../../images/birthday_theme/Birthday_ConfettiGreyBackground.png'); background-repeat: repeat; background-attachment: fixed; background-size: 350px; /* Scale down confetti for better visibility */ background-color: var(--color-bg); /* Fallback if image doesn't load */ } /* Birthday bunting banner - overlays top of hero section */ .birthday-bunting { display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none; text-align: left; } [data-theme="birthday"] .birthday-bunting { display: block; } .birthday-bunting img { max-width: 400px; width: 100%; height: auto; } /* Responsive bunting sizing */ @media (max-width: 768px) { .birthday-bunting img { max-width: 280px; } } /* Birthday logo variant */ .logo-birthday { display: none; } [data-theme="birthday"] .logo-light { display: none; } [data-theme="birthday"] .logo-birthday { display: inline; } /* Birthday theme nav hover overrides */ [data-theme="birthday"] .topnav ul li a:hover:not(.active):not(.dropbtn), [data-theme="birthday"] .topnav > a:hover, [data-theme="birthday"] .topnav ul li.dropdown .dropbtn:hover, [data-theme="birthday"] .topnav ul li.dropdown:hover .dropbtn { background-color: var(--color-primary-light); } /* Birthday theme hero text - purple with minimal shadow */ [data-theme="birthday"] .hero-title, .birthday-hero .hero-title { color: #8d6e8f; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); } /* Birthday theme hero button - uses theme colors */ [data-theme="birthday"] .hero-button, .birthday-hero .hero-button { background: rgba(255, 255, 255, 0.95); color: #8d6e8f; } [data-theme="birthday"] .hero-button:hover, .birthday-hero .hero-button:hover { background: #ffffff; color: #7a5c7c; } /* Birthday theme table headers - ensure legible text on purple backgrounds */ [data-theme="birthday"] .club-class-req-table th { color: #ffffff; }