/* ============================================================ MeteoPi — Restyling CSS puro, HTML originale invariato Toggle dark/light via data-theme su ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Outfit:wght@300;400;500;600&display=swap'); /* ── TEMA DARK (default) ─────────────────────────────────── */ :root, [data-theme="dark"] { --bg: #0f1117; --bg-card: #1a1d27; --bg-nav: #0a0c12; --bg-sidemenu: #0a0c12; --text: #dde3f0; --text-dim: #7a8499; --text-muted: #3d4357; --border: rgba(255,255,255,0.07); --shadow: 0 2px 16px rgba(0,0,0,0.55); --accent: #38bdf8; --orange: #fb923c; --green: #4ade80; --red: #f87171; --yellow: #facc15; --h1-color: rgba(255,255,255,0.45); --min-col: #60a5fa; --max-col: #f87171; --htemp-bg: #2d4a35; --htemp-txt: #7dcf95; --htemp-val: #c6f6d5; --hhum-bg: #2e3540; --hhum-txt: #8fa3b1; --hhum-val: #cbd5e1; --hwind-bg: #4a3018; --hwind-txt: #fb923c; --hwind-val: #fde68a; --hrain-bg: #1a3550; --hrain-txt: #60b8ef; --hrain-val: #bae6fd; --hpress-bg: #1a2030; --hpress-txt: #8899bb; --hpress-val:#c7d2fe; --hlight-bg: #3d3715; --hlight-txt: #e2c84b; --hlight-val:#fef08a; --nav-link: #f2f2f2; --nav-text: #c8d0e0; } /* ── TEMA LIGHT ──────────────────────────────────────────── */ [data-theme="light"] { --bg: #f1f5f9; --bg-card: #ffffff; --bg-nav: #e2e8f0; --bg-sidemenu: #e2e8f0; --text: #1e293b; --text-dim: #475569; --text-muted: #94a3b8; --border: rgba(0,0,0,0.09); --shadow: 0 2px 16px rgba(0,0,0,0.10); --accent: #0284c7; --orange: #ea7c0a; --green: #16a34a; --red: #dc2626; --yellow: #ca8a04; --h1-color: rgba(0,0,0,0.35); --min-col: #2563eb; --max-col: #dc2626; --htemp-bg: #dcfce7; --htemp-txt: #166534; --htemp-val: #14532d; --hhum-bg: #e2e8f0; --hhum-txt: #334155; --hhum-val: #0f172a; --hwind-bg: #fff7ed; --hwind-txt: #9a3412; --hwind-val: #431407; --hrain-bg: #eff6ff; --hrain-txt: #1d4ed8; --hrain-val: #1e3a8a; --hpress-bg: #f8fafc; --hpress-txt: #475569; --hpress-val:#1e293b; --hlight-bg: #fefce8; --hlight-txt: #854d0e; --hlight-val:#431a00; --nav-text: #475569; --nav-link: #1e293b; } /* ── BASE ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg); color: var(--text); font-family: 'Outfit', Verdana, sans-serif; font-size: 13px; line-height: 1.55; max-width: 1215px; margin: 0 auto; transition: background-color 0.3s, color 0.3s; } a { color: var(--accent); } /* ── NAVBAR ──────────────────────────────────────────────── */ .navbar { background-color: var(--bg-nav); height: 48px; display: flex; align-items: center; padding: 0 14px; gap: 8px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow); white-space: nowrap; overflow: hidden; transition: background-color 0.3s, border-color 0.3s; } .navbar a { color: var(--nav-link); text-decoration: none; padding: 2px 8px; font-size: 16px; } .navbar a:hover { background-color: rgba(128,128,128,0.15); border-radius: 4px; } /* Testo data/ora nella navbar */ .navbar .light_blu { color: var(--accent); } .navbar .light_orange { color: var(--orange); font-size: 12px; } .navbar span { font-size: 13px; color: var(--nav-text); vertical-align: middle; } /* Toggle posizionato tramite wrapper nella navbar */ .theme-toggle-wrap { margin-left: auto; display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; flex-shrink: 0; } .toggle-track { width: 38px; height: 21px; background: #374151; border-radius: 999px; position: relative; transition: background 0.3s; } [data-theme="light"] .toggle-track { background: #94a3b8; } .toggle-knob { width: 15px; height: 15px; background: #e2e8f0; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } [data-theme="light"] .toggle-knob { transform: translateX(17px); background: #1e293b; } .toggle-icon { font-size: 15px; line-height: 1; } /* ── SIDE NAV ────────────────────────────────────────────── */ .side-nav { height: 100%; width: 0; position: fixed; z-index: 999; top: 0; left: 0; background-color: var(--bg-sidemenu); overflow-x: hidden; padding-top: 60px; transition: width 0.4s ease; border-right: 1px solid var(--border); } .side-nav a { padding: 11px 11px 11px 28px; font-size: 16px; color: #ccc; display: block; transition: 0.25s; text-decoration: none; } .side-nav a:hover { color: var(--accent); padding-left: 34px; } .side-nav .btn-close { position: absolute; top: 4px; right: 18px; font-size: 34px; color: #666; } .side-nav .btn-close:hover { color: var(--red); } /* ── LAYOUT: wrapper float con clearfix ──────────────────── */ .header { overflow: hidden; } /* clearfix per i float */ /* ── CARD generiche: .l1 .m1 .r1 .l4 .m4 .r4 ───────────── */ .l1, .m1, .r1, .l2, .m2, .r2, .l4, .m4, .r4 { border-radius: 14px; background-color: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow); float: left; position: relative; margin-top: 6px; transition: background-color 0.3s, box-shadow 0.2s; } .l1, .m1, .r1, .l2, .m2, .r2 { width: 400px; height: 300px; } .l4 { width: 400px; height: 250px; padding: 0; } .m4 { width: 400px; height: 400px; margin-left: 5px; margin-right: 5px; overflow: hidden; } .r4 { width: 400px; height: 400px; } .m1 { margin-left: 5px; margin-right: 5px; } .m2 { margin-left: 5px; margin-right: 5px; } /* Hover sottile */ .l1:hover, .m1:hover, .r1:hover, .l4:hover, .m4:hover, .r4:hover { box-shadow: 0 6px 28px rgba(0,0,0,0.4); } /* ── INTESTAZIONE CARD: .h1 ──────────────────────────────── */ .h1 { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--h1-color); padding: 10px 12px 4px; display: block; width: 100%; text-align: left; } /* ── FOOTER CARD: .h2 e le hXxx ─────────────────────────── */ .h2 { position: absolute; bottom: 0; left: 0; width: 100%; border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; color: var(--text-dim); font-size: 11px; text-align: center; padding: 4px 8px; background: rgba(0,0,0,0.15); } [data-theme="light"] .h2 { background: rgba(0,0,0,0.05); } .hTemp, .hHum, .hWind, .hRain, .hPress, .hLight, .hEff { position: absolute; bottom: 0; left: 0; width: 100%; border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; text-align: center; padding: 5px 8px; } .hTemp, .hHum, .hWind, .hRain, .hPress, .hLight, .hEff { position: absolute; bottom: 0; left: 0; width: 100%; border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; text-align: center; padding: 5px 8px; } .hTemp { background: #6e9f75; color: #1e1e1e; } .hHum { background: #a5a5a4; color: #1e1e1e; } .hWind { background: #d8954c; color: #1e1e1e; } .hRain { background: #568dbc; color: #1e1e1e; } .hPress { background: transparent; color: var(--text-dim); } .hLight { background: #c6c24b; color: #1e1e1e; } .hEff { background: transparent; color: var(--text-dim); } /* In light theme schiarisci leggermente i footer */ [data-theme="light"] .hTemp { background: #4a8a55; color: #fff; } [data-theme="light"] .hHum { background: #7a7a79; color: #fff; } [data-theme="light"] .hWind { background: #c0703a; color: #fff; } [data-theme="light"] .hRain { background: #3a6f9e; color: #fff; } [data-theme="light"] .hLight { background: #a0a030; color: #fff; } /* ── GRAFICO mini ────────────────────────────────────────── */ .graph { border-radius: 8px; width: 100%; height: 40px; position: absolute; bottom: 24px; /* sopra il footer hXxx */ left: 0; } /* Box vento più alto per contenere PM 2.5 / PM 10 */ /* ── GAUGE ───────────────────────────────────────────────── */ .pressure { position: relative; width: 160px; height: 160px; box-sizing: border-box; float: left; margin: 10px 10px 10px 15px; } .wind { position: relative; width: 125px; height: 125px; box-sizing: border-box; float: left; margin: 15px; } .temperature { width: 100%; } /* ── GAUGE CSS helpers ───────────────────────────────────── */ .b-gauge { position:relative; width:100%; height:100%; box-sizing:border-box; font:normal 8px Verdana,sans-serif; } .b-gauge__block { position:absolute; overflow:visible; top:0; left:0; bottom:0; right:0; } .b-gauge__paths { width:100%; height:100%; } .b-gauge__label { position:absolute; } .b-gauge__mark { position:absolute; background:#ccc; width:1px; height:4px; } /* ── COLORI semantici ────────────────────────────────────── */ .max { color: red; font-weight: 700; } .min { color: #132c7b; font-weight: 700; } .light_blu { color: var(--accent); } .light_orange { color: var(--orange); } .sun { color: var(--yellow); } .dg { color: var(--text-muted); } /* ── Font size numerici ──────────────────────────────────── */ font[size="5"] { font-size: 26px; font-family: 'Space Mono', monospace; font-weight: 700; } /* ── Horizon card effemeridi ─────────────────────────────── */ horizon-card { --primary-text-color: var(--text); --secondary-text-color: var(--text-dim); --primary-color: var(--accent); font-size: 12px; display: block; } /* ── RESPONSIVE ──────────────────────────────────────────── */ /* Tablet: 2 colonne — le card si adattano al 50% */ @media only screen and (max-width: 830px) { .l1, .m1, .r1, .l2, .m2, .r2, .l4, .m4, .r4 { width: calc(50% - 6px); margin-left: 0; margin-right: 0; } .m1, .m2, .m4 { margin-left: 6px; margin-right: 0; } /* ogni 2 card, la terza va a capo: forza con nth-child */ /* lasciamo che il float lo faccia naturalmente al 50% */ } /* Mobile: 1 colonna */ @media only screen and (max-width: 520px) { .navbar { flex-wrap: wrap; min-height: auto; } .l1, .m1, .r1, .l2, .m2, .r2, .l4, .m4, .r4 { width: 100%; margin-left: 0 !important; margin-right: 0 !important; } font[size="5"] { font-size: 22px; } }