/* ============================================================ The Fucking Weather — 90s Theme Applied when ============================================================ */ /* ============================================================ CSS Variable Overrides ============================================================ */ :root[data-theme="nineties"] { --text-primary: #ffff00; --text-secondary: #00ffff; --text-muted: #ff69b4; --search-bg: rgba(0, 0, 128, 0.85); --search-border: #00ffff; --search-text: #ffff00; --search-ph: #00cc88; --card-bg: rgba(0, 0, 128, 0.75); --card-border: #ff00ff; --link-color: #00ff00; --shadow: 0 0 8px #ff00ff, 0 0 16px rgba(255, 0, 255, 0.4); } /* ============================================================ Starfield Background (overrides all bg-* classes) ============================================================ */ :root[data-theme="nineties"] body { background-color: #000011 !important; background-image: radial-gradient(circle, rgba(255,255,255,0.95) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,0.65) 1px, transparent 1px), radial-gradient(circle, rgba(200,220,255,0.5) 1px, transparent 1px) !important; background-size: 103px 107px, 71px 67px, 53px 59px !important; background-position: 0 0, 37px 23px, 17px 51px !important; transition: none !important; font-family: 'Fredoka One', 'Comic Sans MS', 'Chalkboard SE', cursive !important; } /* ============================================================ Marquee ============================================================ */ #nineties-marquee { display: none; } :root[data-theme="nineties"] #nineties-marquee { display: block; background: #000080; border-top: 3px solid #00ffff; border-bottom: 3px solid #00ffff; padding: 5px 0; overflow: hidden; white-space: nowrap; font-family: 'Comic Sans MS', cursive; font-size: 0.9rem; color: #ffff00; } @keyframes tfw-marquee { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } } :root[data-theme="nineties"] #nineties-marquee span { display: inline-block; animation: tfw-marquee 28s linear infinite; } /* ============================================================ Header / Title ============================================================ */ @keyframes tfw-rainbow { 0% { color: #ff0000; text-shadow: 2px 2px 0 #000, 0 0 8px #ff0000; } 15% { color: #ff8800; text-shadow: 2px 2px 0 #000, 0 0 8px #ff8800; } 30% { color: #ffff00; text-shadow: 2px 2px 0 #000, 0 0 8px #ffff00; } 45% { color: #00ff00; text-shadow: 2px 2px 0 #000, 0 0 8px #00ff00; } 60% { color: #00ffff; text-shadow: 2px 2px 0 #000, 0 0 8px #00ffff; } 75% { color: #0088ff; text-shadow: 2px 2px 0 #000, 0 0 8px #0088ff; } 90% { color: #ff00ff; text-shadow: 2px 2px 0 #000, 0 0 8px #ff00ff; } 100% { color: #ff0000; text-shadow: 2px 2px 0 #000, 0 0 8px #ff0000; } } :root[data-theme="nineties"] header h1 { font-family: 'Fredoka One', 'Comic Sans MS', 'Chalkboard SE', cursive !important; font-size: clamp(1.4rem, 4vw, 2rem) !important; font-weight: 900 !important; letter-spacing: 0.08em !important; animation: tfw-rainbow 3s linear infinite !important; } /* ============================================================ Location ============================================================ */ :root[data-theme="nineties"] #location { color: #00ffff !important; font-family: 'Comic Sans MS', cursive !important; text-shadow: 1px 1px 0 #000080; } /* ============================================================ Temperature ============================================================ */ @keyframes tfw-neon-pulse { 0%, 100% { text-shadow: 0 0 8px #00ff00, 0 0 20px #00ff00, 0 0 40px #00aa00, 2px 2px 0 #003300; } 50% { text-shadow: 0 0 4px #00ff00, 0 0 10px #00aa00, 2px 2px 0 #003300; } } :root[data-theme="nineties"] #temperature { color: #00ff00 !important; font-family: 'Comic Sans MS', cursive !important; animation: tfw-neon-pulse 2.5s ease-in-out infinite !important; } @keyframes tfw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } :root[data-theme="nineties"] #unit-label { color: #ff00ff !important; animation: tfw-blink 1.2s step-end infinite !important; } /* ============================================================ °F / °C Toggle Button ============================================================ */ :root[data-theme="nineties"] #toggle-unit { background: linear-gradient(180deg, #c0c0c0 0%, #808080 100%) !important; border: 3px outset #c0c0c0 !important; border-radius: 2px !important; color: #000000 !important; font-family: 'Comic Sans MS', cursive !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :root[data-theme="nineties"] #toggle-unit:active { border-style: inset !important; } /* ============================================================ Condition ============================================================ */ :root[data-theme="nineties"] #condition { color: #ff69b4 !important; font-family: 'Comic Sans MS', cursive !important; letter-spacing: 0.18em !important; } /* ============================================================ One-liner & Advice ============================================================ */ :root[data-theme="nineties"] #one-liner { color: #ffff00 !important; font-family: 'Comic Sans MS', cursive !important; text-shadow: 2px 2px 0 #000000; background: rgba(0, 0, 128, 0.65) !important; border: 3px ridge #00ffff !important; padding: 0.75rem 1rem !important; border-radius: 0 !important; } :root[data-theme="nineties"] #advice { color: #00ffff !important; font-family: 'Comic Sans MS', cursive !important; text-shadow: 1px 1px 0 #000080; } /* ============================================================ Search Bar ============================================================ */ :root[data-theme="nineties"] #search-input { background: #000080 !important; border: 3px inset #c0c0c0 !important; border-radius: 0 !important; color: #ffff00 !important; font-family: 'Comic Sans MS', cursive !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :root[data-theme="nineties"] #search-input::placeholder { color: #00cc88 !important; } :root[data-theme="nineties"] #search-btn { background: linear-gradient(180deg, #c0c0c0 0%, #808080 100%) !important; border: 3px outset #c0c0c0 !important; border-radius: 0 !important; color: #000000 !important; font-family: 'Comic Sans MS', cursive !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :root[data-theme="nineties"] #search-btn:active { border-style: inset !important; transform: none !important; } /* ============================================================ Error Message ============================================================ */ :root[data-theme="nineties"] #error-msg { font-family: 'Comic Sans MS', cursive !important; border-radius: 0 !important; border: 3px inset #ff0000 !important; } /* ============================================================ Forecast Cards ============================================================ */ :root[data-theme="nineties"] .forecast-day { background: rgba(0, 0, 128, 0.8) !important; border: 3px outset #c0c0c0 !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 3px 3px 0 #000000 !important; } :root[data-theme="nineties"] .forecast-day .day-name { color: #ff00ff !important; font-family: 'Comic Sans MS', cursive !important; } :root[data-theme="nineties"] .forecast-day .day-condition { color: #00ffff !important; font-family: 'Comic Sans MS', cursive !important; } :root[data-theme="nineties"] .forecast-day .day-temps { color: #ffff00 !important; } :root[data-theme="nineties"] .forecast-day .low { color: #00ffff !important; } /* ============================================================ Footer ============================================================ */ :root[data-theme="nineties"] footer { color: #ff69b4 !important; font-family: 'Comic Sans MS', cursive !important; border-top: 3px ridge #00ffff !important; margin-top: 0.5rem; } :root[data-theme="nineties"] footer a { color: #00ff00 !important; text-decoration: underline !important; } /* ============================================================ Share Button ============================================================ */ :root[data-theme="nineties"] #share-btn { background: linear-gradient(180deg, #c0c0c0 0%, #808080 100%) !important; border: 3px outset #c0c0c0 !important; border-radius: 0 !important; color: #000000 !important; font-family: 'Fredoka One', 'Comic Sans MS', cursive !important; font-weight: bold !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :root[data-theme="nineties"] #share-btn:active { border-style: inset !important; transform: none !important; } :root[data-theme="nineties"] #share-btn.copied { background: linear-gradient(180deg, #00ff00 0%, #008800 100%) !important; border-color: #00ff00 !important; color: #000000 !important; } /* ============================================================ 90s Extras (badges, counter, best-viewed) ============================================================ */ #nineties-extras { display: none; } :root[data-theme="nineties"] #nineties-extras { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1rem; border-top: 3px ridge #00ffff; font-family: 'Comic Sans MS', cursive; } :root[data-theme="nineties"] #nineties-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } :root[data-theme="nineties"] #nineties-badges span { background: #000080; border: 2px outset #c0c0c0; color: #ffff00; font-size: 0.7rem; padding: 3px 8px; } :root[data-theme="nineties"] #hit-counter { color: #00ff00; font-family: 'Courier New', monospace; font-size: 0.85rem; background: #000000; border: 2px inset #c0c0c0; padding: 4px 12px; letter-spacing: 0.1em; } :root[data-theme="nineties"] #best-viewed { color: #ff69b4; font-size: 0.7rem; font-style: italic; } /* ============================================================ Theme Toggle Button ============================================================ */ #theme-toggle { position: fixed; bottom: 1.2rem; right: 1.2rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; padding: 0.45rem 0.85rem; font-family: 'Inter', sans-serif; font-size: 0.72rem; color: rgba(255,255,255,0.6); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 100; transition: background 0.2s; } #theme-toggle:hover { background: rgba(255,255,255,0.22); color: rgba(255,255,255,0.9); } @keyframes tfw-blink-toggle { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.5; } } :root[data-theme="nineties"] #theme-toggle { background: linear-gradient(180deg, #ffff00 0%, #ff8800 100%) !important; border: 3px outset #ffff00 !important; border-radius: 0 !important; color: #000000 !important; font-family: 'Comic Sans MS', cursive !important; font-weight: bold !important; font-size: 0.75rem !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: tfw-blink-toggle 1.5s step-end infinite; } :root[data-theme="nineties"] #theme-toggle:hover { background: linear-gradient(180deg, #ffffff 0%, #ffff00 100%) !important; color: #000000 !important; } :root[data-theme="nineties"] #theme-toggle:active { border-style: inset !important; }