/* ======================================== APRIL FOOLS THEME ======================================== */ /* Applied via data-theme="aprilfools" on element */ /* Activates site-wide during April 1st */ [data-theme="aprilfools"] { /* Primary colors → Dusty Blue (from stables stat card) */ --color-primary: #7a9aad; /* Dusty blue */ --color-primary-dark: #5c7a8a; /* Deeper blue for hover */ --color-primary-light: #9db5c4; /* Lighter blue for accents */ /* Link colors to match */ --color-link: #7a9aad; --color-link-hover: #5c7a8a; /* Keep shadow focus consistent with blue tint */ --shadow-focus: 0 0 0 3px rgba(122, 154, 173, 0.2); /* User entry highlight - light blue tint */ --color-user-entry: rgba(122, 154, 173, 0.12); --color-user-entry-hover: rgba(122, 154, 173, 0.18); } /* April Fools water caustic background overlay */ [data-theme="aprilfools"] body { position: relative; background-color: var(--color-bg); } [data-theme="aprilfools"] body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../../images/aprilfools_theme/AprilFools_Background_Adjusted.png'); background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0.20; pointer-events: none; z-index: -1; } /* April Fools banner - overlays top of hero section */ .aprilfools-banner { display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none; text-align: left; } [data-theme="aprilfools"] .aprilfools-banner { display: block; } .aprilfools-banner img { max-width: 400px; width: 100%; height: auto; } /* Responsive banner sizing */ @media (max-width: 768px) { .aprilfools-banner img { max-width: 280px; } } /* April Fools logo variant */ .logo-aprilfools { display: none; } [data-theme="aprilfools"] .logo-light { display: none; } [data-theme="aprilfools"] .logo-dark { display: none; } [data-theme="aprilfools"] .logo-aprilfools { display: inline; } /* April Fools theme nav hover overrides */ [data-theme="aprilfools"] .topnav ul li a:hover:not(.active):not(.dropbtn), [data-theme="aprilfools"] .topnav > a:hover, [data-theme="aprilfools"] .topnav ul li.dropdown .dropbtn:hover, [data-theme="aprilfools"] .topnav ul li.dropdown:hover .dropbtn { background-color: var(--color-primary-light); } /* April Fools hero - push text up above the horse */ [data-theme="aprilfools"] .hero-page, .aprilfools-hero { align-items: flex-start; padding-top: 8vh; } /* April Fools theme hero text - blue with minimal shadow */ [data-theme="aprilfools"] .hero-title, .aprilfools-hero .hero-title { color: #7a9aad; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); } /* April Fools theme hero button - uses theme colors */ [data-theme="aprilfools"] .hero-button, .aprilfools-hero .hero-button { background: rgba(255, 255, 255, 0.95); color: #7a9aad; } [data-theme="aprilfools"] .hero-button:hover, .aprilfools-hero .hero-button:hover { background: #ffffff; color: #5c7a8a; } /* April Fools theme table headers - ensure legible text on blue backgrounds */ [data-theme="aprilfools"] .club-class-req-table th { color: #ffffff; }