Files
WEATHER/styles.css
T
2026-06-25 23:17:45 +00:00

783 lines
16 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* === Weather Consensus Enhanced Theme with Day/Night + Rain + Snow === */
/* ---------- Design tokens (Night default) ---------- */
:root {
--bg: #0b1220;
--bg-2: #0d1526;
--panel: #10192b;
--panel-2: #0f1726;
--card: #121c31;
--card-2: #16223a;
--muted: #98a2b3;
--text: #e6eefc;
--brand: #5ea0ff;
--accent: #8ef2d0;
--accent-2: #b388ff;
--warning: #ffd166;
--error: #ff6b6b;
--border: #1e2a42;
--glass: rgba(255, 255, 255, 0.05);
--shadow-lg: 0 20px 45px rgba(0, 0, 0, .35);
--shadow-md: 0 10px 25px rgba(0, 0, 0, .28);
--radius-lg: 16px;
--radius-md: 12px;
--radius-sm: 10px;
}
/* ---------- Day theme overrides (darker sky) ---------- */
body[data-theme="day"] {
--bg: #9ec7ff;
/* zenith */
--bg-2: #cfe4ff;
/* near horizon */
--panel: #ffffff;
--panel-2: #f6fbff;
--card: #ffffff;
--card-2: #f4f9ff;
--text: #0e1c33;
--muted: #3c4b63;
--border: #c0d6f7;
--brand: #2e75ff;
--accent: #00bba0;
--accent-2: #8a75ff;
}
/* ---------- Base ---------- */
* {
box-sizing: border-box
}
html,
body {
height: 100%
}
body {
margin: 0;
background:
radial-gradient(1200px 600px at 70% -10%, #1b2a4a33 0%, transparent 60%),
linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%);
color: var(--text);
font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
letter-spacing: .2px;
}
/* subtle animated star dots (night only) */
body:not([data-theme="day"])::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
radial-gradient(1px 1px at 10% 20%, #fff2 40%, transparent 41%),
radial-gradient(1px 1px at 80% 30%, #fff3 40%, transparent 41%),
radial-gradient(1px 1px at 50% 70%, #fff2 40%, transparent 41%),
radial-gradient(1px 1px at 20% 80%, #fff1 40%, transparent 41%);
animation: twinkle 8s linear infinite;
}
@keyframes twinkle {
0%,
100% {
opacity: .4
}
50% {
opacity: .8
}
}
.container {
width: min(1100px, 92vw);
margin: 0 auto;
padding: 1rem;
position: relative;
z-index: 2
}
/* ---------- Top gradient bar ---------- */
.topbar {
height: 6px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 5;
background: linear-gradient(90deg,
#4ea2ff 0%,
#7b86ff 20%,
#b07cff 40%,
#ff7fd1 60%,
#77e1c6 80%,
#4ea2ff 100%);
box-shadow: 0 2px 10px rgba(94, 160, 255, .6);
}
/* ---------- Header / Hero with clouds ---------- */
.site-header {
padding-top: 24px
}
.hero {
position: relative;
overflow: hidden;
border-bottom: 1px solid #12203b;
background: radial-gradient(800px 240px at 50% 0%, #1d2b48aa 0%, transparent 70%);
}
/* Day: softer atmospheric glow */
body[data-theme="day"] .hero {
background: radial-gradient(900px 260px at 70% -10%,
rgba(255, 255, 255, 0.65) 0%,
rgba(255, 255, 255, 0.15) 40%,
transparent 75%);
}
.hero-inner {
padding: 2.6rem 1rem 1.1rem
}
.controls {
display: flex;
gap: .9rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-top: .6rem;
}
.site-header h1 {
margin: .25rem 0 .35rem;
font-size: 2.1rem;
font-weight: 800;
letter-spacing: .3px;
text-shadow: 0 3px 16px rgba(0, 0, 0, .35);
}
body[data-theme="day"] .site-header h1 {
text-shadow: none
}
.tagline {
color: var(--muted);
margin: 0 .5rem .9rem;
text-align: center
}
/* ---------- Minimal modern sun (day only) ---------- */
.sun {
position: absolute;
top: 20px;
right: 40px;
width: 90px;
height: 90px;
display: none;
z-index: 0;
}
body[data-theme="day"] .sun {
display: block;
}
.sun .disc {
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%,
#fff7c2 0%,
#ffe169 45%,
#ffc94d 75%,
#ffb84b 100%);
box-shadow:
0 0 45px 12px rgba(255, 215, 91, 0.45),
0 0 120px 40px rgba(255, 215, 91, 0.15);
}
.sun .ray {
display: none !important;
}
/* if old markup exists */
/* ---------- Minimal modern moon (night only) ---------- */
.moon {
position: absolute;
top: 20px;
/* matches sun placement for symmetry */
right: 40px;
width: 84px;
height: 84px;
display: none;
z-index: 0;
/* behind clouds/precip, same as sun */
}
body[data-theme="night"] .moon {
display: block;
}
/* show only at night */
body[data-theme="day"] .moon {
display: none;
}
/* hide in day */
.moon .disc {
position: absolute;
inset: 0;
border-radius: 50%;
/* Soft, cool moon gradient */
background: radial-gradient(circle at 40% 40%,
#f7f9ff 0%,
#e9efff 45%,
#d6defe 72%,
#c3ccff 100%);
/* Subtle bluish glow */
box-shadow:
0 0 40px 12px rgba(150, 170, 255, 0.28),
0 0 120px 40px rgba(140, 160, 255, 0.14);
}
/* (Optional) very subtle craters — keep modern & minimal */
.moon .disc {
background:
radial-gradient(10px 10px at 28% 36%, rgba(0, 0, 0, .12) 0 55%, transparent 56%),
radial-gradient(7px 7px at 62% 30%, rgba(0, 0, 0, .10) 0 55%, transparent 56%),
radial-gradient(6px 6px at 50% 64%, rgba(0, 0, 0, .10) 0 55%, transparent 56%),
radial-gradient(circle at 40% 40%, #f7f9ff 0%, #e9efff 45%, #d6defe 72%, #c3ccff 100%);
}
/* Clouds */
.clouds {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 120px;
pointer-events: none;
z-index: 1;
opacity: .9;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .18));
}
.layer-back {
animation: driftBack 36s linear infinite;
opacity: .45
}
.layer-front {
animation: driftFront 28s linear infinite;
opacity: .65
}
.clouds svg {
width: 150%;
height: 100%
}
@keyframes driftBack {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-20%)
}
}
@keyframes driftFront {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-35%)
}
}
/* Lightning flash (kept subtle; barely visible by day) */
.lightning {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background: radial-gradient(400px 220px at 70% 0%, #fff0 0%, #fff0 55%, #fff3 55.5%, #fff0 56%);
mix-blend-mode: screen;
opacity: 0;
animation: flash 9s ease-in-out infinite;
}
@keyframes flash {
0%,
86%,
100% {
opacity: 0
}
89% {
opacity: .22
}
90% {
opacity: .55
}
92% {
opacity: .12
}
}
/* ---------- Rain overlay ---------- */
.rain {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
opacity: 0;
transition: opacity .3s ease
}
body.rainy .rain {
opacity: .65
}
.rain span {
position: absolute;
top: -10vh;
width: 2px;
height: 8vh;
background: linear-gradient(to bottom, #aee1ff 0%, #4f9bf2 80%, transparent 100%);
opacity: .8;
border-radius: 1px;
filter: blur(.3px);
animation: drop 1.2s linear infinite;
}
@keyframes drop {
0% {
transform: translateY(-12vh)
}
100% {
transform: translateY(110vh)
}
}
/* ---------- Snow overlay ---------- */
.snow {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
opacity: 0;
transition: opacity .3s ease
}
body.snowy .snow {
opacity: .9
}
.snow span {
position: absolute;
top: -10vh;
width: var(--size, 6px);
height: var(--size, 6px);
background: #ffffff;
border-radius: 50%;
opacity: var(--alpha, .9);
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .28));
animation: snowFall var(--dur, 8s) linear infinite;
animation-play-state: paused;
}
body.snowy .snow span {
animation-play-state: running;
}
@keyframes snowFall {
0% {
transform: translateY(-12vh) translateX(0)
}
100% {
transform: translateY(110vh) translateX(var(--drift, 40px))
}
}
/* ---------- Search ---------- */
.search {
display: flex;
gap: .6rem;
justify-content: center;
position: relative;
flex-wrap: wrap;
z-index: 4;
}
.search input {
width: min(520px, 86vw);
padding: .85rem 1rem;
border-radius: 12px;
border: 1px solid #22314e;
background: #0e1626;
color: var(--text);
outline: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 8px 18px rgba(0, 0, 0, .35);
}
body[data-theme="day"] .search input {
background: #ffffff;
border-color: #cfe3ff;
color: #10233d;
box-shadow: 0 8px 18px rgba(0, 0, 0, .10)
}
.search input:focus {
border-color: #2f4b7f;
box-shadow: 0 0 0 4px #2f4b7f33
}
.search button {
padding: .85rem 1rem;
border-radius: 12px;
border: none;
background: linear-gradient(135deg, var(--brand), var(--accent-2));
color: #061229;
font-weight: 800;
letter-spacing: .3px;
cursor: pointer;
box-shadow: var(--shadow-md);
}
.search button:hover {
filter: brightness(1.06)
}
.theme-toggle {
display: flex;
align-items: center;
gap: .45rem;
color: var(--muted);
font-weight: 600
}
.theme-toggle select {
appearance: none;
padding: .62rem .7rem;
border-radius: 10px;
border: 1px solid #22314e;
background: #0e1626;
color: var(--text)
}
body[data-theme="day"] .theme-toggle select {
background: #fff;
border-color: #cfe3ff;
color: #10233d
}
/* ---------- Autocomplete (portal dropdown) ---------- */
.sugg-box {
position: fixed;
/* NOTE: JS controls left/transform now */
display: none;
z-index: 10000;
background: #0e1626;
border: 1px solid #22314e;
border-radius: 12px;
box-shadow: 0 18px 38px rgba(0, 0, 0, .35);
max-height: 55vh;
overflow: auto;
color: var(--text);
/* No default left/transform here to avoid conflict with JS */
}
.sugg-item {
padding: .7rem .95rem;
border-bottom: 1px solid #18253e;
cursor: pointer;
color: var(--text);
}
.sugg-item:last-child {
border-bottom: none
}
.sugg-item:hover,
.sugg-item:focus {
background: #15223a;
outline: none
}
/* Day theme for autocomplete: light background + dark text */
body[data-theme="day"] .sugg-box {
background: #ffffff;
border-color: #cfe3ff;
color: #0e1c33;
box-shadow: 0 18px 38px rgba(0, 0, 0, .14);
}
body[data-theme="day"] .sugg-item {
color: #0e1c33;
border-bottom: 1px solid #e6efff;
}
body[data-theme="day"] .sugg-item:hover,
body[data-theme="day"] .sugg-item:focus {
background: #f0f6ff;
}
/* ---------- Panels & Grid ---------- */
.panel {
background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.1rem;
margin: 1rem 0;
color: var(--muted);
box-shadow: var(--shadow-md);
backdrop-filter: blur(4px);
}
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin: 1rem 0
}
@media(min-width:720px) {
.grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media(min-width:1024px) {
.grid {
grid-template-columns: repeat(3, 1fr)
}
}
/* ---------- Forecast cards ---------- */
.card {
position: relative;
background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
border: 1px solid #1f2c47;
border-radius: var(--radius-lg);
padding: 1rem;
box-shadow: var(--shadow-lg);
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(600px 300px at 120% -10%, rgba(94, 160, 255, 0.12), transparent 60%);
opacity: .8;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 50px rgba(0, 0, 0, .42);
border-color: #28406c;
}
.card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: .5rem;
gap: .6rem
}
.card .day {
font-weight: 700
}
.card .hi .label {
display: block;
color: var(--muted);
font-size: .8rem
}
.card .hi .val {
font-size: 1.4rem;
font-weight: 800
}
/* ---------- Metrics rows ---------- */
.metrics {
display: grid;
grid-template-columns: 1fr;
gap: .6rem;
margin-top: .6rem
}
.metric {
display: grid;
grid-template-columns: auto 1fr auto;
gap: .6rem;
align-items: center
}
.metric .i {
width: 24px;
height: 24px;
color: var(--accent);
display: grid;
place-items: center
}
.metric .i svg {
width: 22px;
height: 22px
}
.metric .name {
color: var(--muted)
}
.metric .value {
font-weight: 800
}
/* ---------- Provider breakdown ---------- */
.providers {
margin-top: .8rem
}
.providers summary {
cursor: pointer;
color: var(--brand);
font-weight: 700;
letter-spacing: .2px
}
.prov-pre {
white-space: pre-wrap;
overflow: auto;
background: #0e1626;
border: 1px dashed #27406b;
border-radius: 10px;
padding: .7rem;
margin: .6rem 0;
color: #bdd0ff;
}
body[data-theme="day"] .prov-pre {
background: #f6fbff;
color: #213555;
border-color: #cfe3ff
}
/* ---------- Utility / Micro ---------- */
.error {
background: #240d12;
border: 1px solid #4d1c2a;
color: #ffb5b5;
padding: .9rem;
border-radius: 12px
}
.site-footer {
padding: 1.2rem 0;
text-align: center;
color: var(--muted)
}
:focus-visible {
outline: 3px solid #6db0ff;
outline-offset: 2px
}
/* Reduced motion: keep precipitation (slower), disable heavy chrome */
@media (prefers-reduced-motion: reduce) {
.layer-back,
.layer-front,
.lightning,
body::before,
.sun {
animation: none !important
}
.rain span {
animation-duration: 2s !important;
}
.snow span {
animation-duration: calc(var(--dur, 8s) * 1.5) !important;
}
}
#useMyLocation{
padding:.85rem 1rem;
border-radius:12px;
border:1px solid var(--border);
background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
color:var(--text);
font-weight:700;
box-shadow: var(--shadow-md);
}
#useMyLocation:hover{ filter:brightness(1.03) }
body[data-theme="day"] #useMyLocation{
background:#ffffff;
border-color:#cfe3ff;
color:#10233d;
box-shadow:0 8px 18px rgba(0,0,0,.10);
}
#radarControls button {
padding:.55rem .9rem;
border-radius:10px;
border:1px solid var(--border);
background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
color:var(--text); font-weight:700;
}
/* --- Card header layout tweaks --- */
.card .card-head {
display: grid;
grid-template-columns: 1fr auto; /* date row on left, hi/low on right */
gap: .25rem 1rem;
align-items: center;
}
.card .card-head .date-row {
display: inline-flex;
align-items: center;
gap: .5rem;
white-space: nowrap; /* keep "Wed, Jan 28" together */
min-width: 0; /* prevent overflow issues in narrow cards */
}
.card .card-head .date-text {
font-weight: 600;
}
/* Small pill for “Today” */
.today-badge {
display: inline-block;
font-size: .78rem;
line-height: 1;
padding: .18rem .45rem;
border-radius: 999px;
background: rgba(80,145,255,.16); /* subtle blue pill on dark */
color: #b9d4ff; /* lighter blue text */
border: 1px solid rgba(80,145,255,.3);
user-select: none;
}
/* Optional: keep the hi/low line from wrapping too early */
.card .card-head .hi-lo {
white-space: nowrap;
justify-self: end;
}