/* ========================================================= 🎃 HALLOWEEN — Extended & Accessible Overlay Keep your original rules above; this augments coverage. Toggle: ========================================================= */ /* Optional self-hosted headline font (safe fallback if missing) */ @font-face{ font-family: "CreepsterPH"; src: url("/fonts/creepster.woff2") format("woff2"); font-display: swap; } /* --- Tokens (reuse your vars + add a few) --- */ body.halloween-mode{ --bg-surface: #1b1010; --bg-surface-2: #231416; --line: #3a2622; --text: #f7efe5; --muted: #cdb6a7; --accent-2: #ffb703; /* candy corn */ --accent-3: #6e2ca9; /* deep purple */ --ok: #31d17c; --warn: #ffb703; --danger: #ff4d4f; --focus: #ff7518; --radius: 16px; --shadow-deep: 0 16px 44px rgba(0,0,0,.55); --shadow-soft: 0 10px 30px rgba(0,0,0,.35); } /* --- Global base + accessibility --- */ body.halloween-mode{ background: radial-gradient(900px 450px at -10% -20%, rgba(255,117,24,.10), transparent 60%), radial-gradient(700px 400px at 120% 0%, rgba(110,44,169,.14), transparent 60%), var(--bg-dark); color: var(--text); } body.halloween-mode a{ color: var(--accent); text-decoration: underline; } body.halloween-mode a:hover{ color: var(--accent-2); } body.halloween-mode a:focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; } /* Limit flicker to main headings only for readability */ @keyframes textFlickerSoft{ 0%,100%{opacity:1} 50%{opacity:.92} } body.halloween-mode h1, body.halloween-mode h2{ font-family: "CreepsterPH", Georgia, "Times New Roman", serif; animation: textFlickerSoft 5s ease-in-out infinite; } body.halloween-mode h3, body.halloween-mode h4{ text-shadow: 0 1px 0 rgba(0,0,0,.35); } /* Do NOT flicker whole nav/footer/hero trees */ body.halloween-mode .navbar *, body.halloween-mode footer *, body.halloween-mode .hero *{ animation: none !important; } /* Motion safety */ @media (prefers-reduced-motion: reduce){ body.halloween-mode *{ animation:none!important; transition:none!important; } } /* --- Hero / banners --- */ body.halloween-mode .hero, body.halloween-mode .accessibility-hero{ background: linear-gradient(135deg, rgba(255,117,24,.26), rgba(110,44,169,.22)); color: var(--text-glow); border-bottom: 1px solid var(--line); text-shadow: 0 1px 0 rgba(0,0,0,.35); } body.halloween-mode .announcement-banner{ background: linear-gradient(90deg, rgba(255,117,24,.25), rgba(255,183,3,.18)); color: #fff5dc; border-bottom: 1px solid var(--line); } /* --- Cards / containers (features, generic .card, .container) --- */ body.halloween-mode .card, body.halloween-mode .container, body.halloween-mode .add-card, body.halloween-mode .item, body.halloween-mode .features, body.halloween-mode .feature-card{ background: linear-gradient(180deg, var(--bg-surface), var(--bg-surface-2)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-deep); color: var(--text); } body.halloween-mode .feature-card h2{ color:#ffd390; } body.halloween-mode .feature-card p{ color:#ffefde; } /* --- Accordion / details (FAQ, lists) --- */ body.halloween-mode summary{ background: linear-gradient(180deg, rgba(255,117,24,.16), rgba(255,183,3,.10)); color: #fff1da; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; } body.halloween-mode summary::-webkit-details-marker{ display:none; } body.halloween-mode summary::after{ content:"▾"; margin-left:auto; color: var(--accent-2); } body.halloween-mode details[open] summary::after{ content:"▴"; } body.halloween-mode details .a, body.halloween-mode details .body{ background: rgba(27,16,18,.88); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); } body.halloween-mode .match{ background: rgba(255,183,3,.28); color:#fff6e6; border-radius:6px; padding:0 2px; } /* --- Buttons / CTAs --- */ body.halloween-mode .btn, body.halloween-mode button, body.halloween-mode .back-btn, body.halloween-mode .emoji-btn{ appearance:none; border:1px solid var(--line); background: linear-gradient(180deg, rgba(255,117,24,.22), rgba(255,117,24,.10)); color:#ffeede; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; box-shadow: var(--shadow-soft); } body.halloween-mode .btn.brand, body.halloween-mode .brand{ background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-color: transparent; color:#2a130a; } body.halloween-mode .btn.delete, body.halloween-mode .delete-btn{ background: linear-gradient(180deg, rgba(255,77,79,.18), rgba(255,77,79,.07)); color:#ffdfe0; border-color:#5e1f22; } body.halloween-mode .btn:hover, body.halloween-mode button:hover{ filter: brightness(1.06); } body.halloween-mode .btn:focus-visible, body.halloween-mode button:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; } /* --- Inputs / forms --- */ body.halloween-mode input[type="text"], body.halloween-mode input[type="search"], body.halloween-mode input[type="password"], body.halloween-mode input[type="email"], body.halloween-mode textarea, body.halloween-mode select, body.halloween-mode .search{ background:#160d1a; color:#ffefde; border:1px solid var(--line); border-radius:12px; } body.halloween-mode input::placeholder, body.halloween-mode textarea::placeholder{ color:#c9b09f; } body.halloween-mode input:focus-visible, body.halloween-mode textarea:focus-visible, body.halloween-mode select:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; } /* Emoji tray (announcements editor) */ body.halloween-mode .emoji-tray{ background:#1b100f; border:1px solid var(--line); box-shadow: var(--shadow-deep); } body.halloween-mode .emoji-tray button{ color:#ffd390; } /* --- Tables (user manager, listings) --- */ body.halloween-mode .table-wrap{ background: var(--bg-surface); border:1px solid var(--line); border-radius: var(--radius); } body.halloween-mode table{ color:#fff3e5; border-collapse: separate; border-spacing: 0; } body.halloween-mode thead th{ background: rgba(255,117,24,.16); color:#ffe6c8; border-bottom:1px solid var(--line); } body.halloween-mode tbody td{ border-bottom:1px solid var(--line); } body.halloween-mode tbody tr:hover{ background: rgba(255,117,24,.08); } body.halloween-mode .avatar{ background: linear-gradient(180deg,#2a1a1a,#1e1211); color:#ffd390; } body.halloween-mode .badge, body.halloween-mode .tag{ border:1px solid var(--line); color:#ffe6c8; background: rgba(255,183,3,.14); } /* --- Toasts / status --- */ body.halloween-mode .toast{ background:#140b12; color:#ffeedd; border:1px solid var(--line); box-shadow: var(--shadow-deep); } body.halloween-mode .status .dot{ background:#5f5463; } body.halloween-mode .status.saving .dot{ background: var(--warn); } body.halloween-mode .status.saved .dot{ background: var(--ok); } /* --- Popup / modal --- */ body.halloween-mode #popup-notice, body.halloween-mode .modal, body.halloween-mode .popup{ background:#1a0f16; color:#ffeedd; border:2px solid var(--accent); box-shadow: 0 4px 24px rgba(0,0,0,.45), inset 0 0 0 1px var(--line); } body.halloween-mode .popup-buttons button, body.halloween-mode .modal .btn-primary{ background: linear-gradient(180deg, var(--accent), var(--accent-2)); color:#2a130a; border:none; } /* --- File cards / galleries --- */ body.halloween-mode .file-card{ background: linear-gradient(180deg, var(--bg-surface), var(--bg-surface-2)); border:1px solid var(--line); box-shadow: var(--shadow-deep); } body.halloween-mode .file-card img{ filter: saturate(1) contrast(1.04); } body.halloween-mode .file-name{ color:#ffe6c8; } /* --- Weather overlay (keep readable; no flicker) */ body.halloween-mode #weatherOverlay, body.halloween-mode #weatherOverlay *, body.halloween-mode #weatherOverlay.active, body.halloween-mode #weatherOverlay.active *{ animation: none !important; opacity: 1 !important; text-shadow: none !important; color: inherit !important; } body.halloween-mode #weather-toggle{ background: linear-gradient(135deg, #b85b12, #7b2f0b); color:#fff; border:3px solid #b85b12; box-shadow:0 0 10px rgba(0,0,0,.4); } body.halloween-mode #mountain-overlay{ background: rgba(17,10,15,.96); } body.halloween-mode .mountain-overlay-content{ background: linear-gradient(135deg, #1a131b, #291a2f); color:#ffeeda; box-shadow: var(--shadow-deep); } body.halloween-mode .forecast-day{ background: linear-gradient(135deg, rgba(255,183,3,.12), rgba(110,44,169,.12)); color:#ffefde; border:1px solid var(--line); } /* --- Footer (you already theme it; this keeps text readable) --- */ body.halloween-mode footer .footer-links a{ color:#ffb86b; } body.halloween-mode footer .footer-links a:hover{ color:#fff3e4; } body.halloween-mode .footer-note{ color:#d9cbdc; } /* --- Utility classes often seen on your pages --- */ body.halloween-mode .muted, body.halloween-mode .sub, body.halloween-mode .hint{ color: var(--muted); } body.halloween-mode .pill{ display:inline-block; border:1px solid var(--line); background: rgba(255,117,24,.12); color:#ffe6c8; border-radius:999px; padding:2px 10px; } /* --- Pagination / small nav blocks --- */ body.halloween-mode .pagination a, body.halloween-mode .pager a{ background:#160d1a; border:1px solid var(--line); color:#ffeeda; border-radius:10px; padding:.4rem .6rem; } body.halloween-mode .pagination a:hover{ background: rgba(255,117,24,.14); } /* --- Keep your cobwebs exactly as-is (no changes) --- */ /* .navbar::after and nav::before are already defined in your original CSS */ body.halloween-mode { --accent: #ff7518; --accent-glow: #ff9933; --text-glow: #fbeacc; --bg-dark: #1a0d0a; --bg-footer: #110705; --nav-bg: #2a1a1a; --shadow-glow: 0 0 8px rgba(255, 117, 24, 0.4); background: var(--bg-dark); } /* ============================== */ /* 🧭 Navbar Styling */ /* ============================== */ body.halloween-mode nav, body.halloween-mode .navbar { background: var(--nav-bg); border-bottom: 2px solid var(--accent); box-shadow: var(--shadow-glow); position: relative; z-index: 100; } body.halloween-mode .navbar a, body.halloween-mode nav a { color: var(--text-glow); text-shadow: 0 0 2px #ff6600; transition: all 0.3s ease; } body.halloween-mode .navbar a:hover, body.halloween-mode nav a:hover { color: #fff7dd; text-shadow: 0 0 8px #ff6600; } /* 🕸️ Merged Cobweb Corners (Small Left, Big Right) */ body.halloween-mode .navbar::after, body.halloween-mode nav::before { content: ""; position: absolute; top: 0; width: 180px; height: 180px; background: url('/images/decor/cobweb-corner.webp') no-repeat top left / contain; opacity: 0.85; pointer-events: none; z-index: 99; animation: cobwebSway 8s ease-in-out infinite; } /* Left Small Web */ body.halloween-mode .navbar::after { left: 0; } /* Right Large Web */ body.halloween-mode nav::before { top: -30px; right: -30px; left: auto; width: 300px; height: 300px; background: url('/images/decor/giant-spiderweb-corner.webp') no-repeat top right / contain; transform: scaleX(-1); z-index: 98; } /* 🕸️ Sway Animation */ @keyframes cobwebSway { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(2deg) scale(1.02); } } /* ============================== */ /* 🕯️ Typography — Glow Only Large Text */ /* ============================== */ body.halloween-mode h1, body.halloween-mode h2, body.halloween-mode h3, body.halloween-mode h4, body.halloween-mode .navbar *, body.halloween-mode .footer *, body.halloween-mode .hero * { color: var(--text-glow); animation: textFlicker 4s infinite alternate; text-shadow: 0 0 2px #ff6600, 0 0 6px #ff7518; } /* ============================== */ /* 🪦 Footer Styling */ /* ============================== */ body.halloween-mode footer { background: var(--bg-footer); border-top: 1px solid var(--accent); box-shadow: 0 -2px 8px rgba(255, 117, 24, 0.2); } body.halloween-mode footer a { color: #ffa94d; text-shadow: 0 0 2px #ff6600; } body.halloween-mode footer a:hover { color: #fff7cc; text-shadow: 0 0 6px #ffaa33; } /* 🎃 Disable Flicker in Weather Overlay Only */ body.halloween-mode #weatherOverlay, body.halloween-mode #weatherOverlay *, body.halloween-mode #weatherOverlay.active, body.halloween-mode #weatherOverlay.active * { animation: none !important; opacity: 1 !important; text-shadow: none !important; color: inherit !important; }