/* ========================================================================== Tuixent Meteo — shared stylesheet Light/dark via [data-theme="dark"] on ========================================================================== */ /* -------------------------------------------------------------------------- 1. CSS Custom Properties -------------------------------------------------------------------------- */ :root { /* Brand */ --station-color: #2563eb; --station-bg: rgba(37, 99, 235, 0.015); --station-border: rgba(37, 99, 235, 0.08); /* Semantic observation colours (used in KPI values + Chart.js) */ --color-tmax: #e53e3e; --color-tmin: #0ea5e9; --color-tmit: #f97316; --color-rain: #06b6d4; --color-wind: #d69e2e; --color-pressure: #7c3aed; --color-sun: #f59e0b; --color-uv: #a855f7; --color-humidity: #14b8a6; --color-dewpoint: #06b6d4; --color-windspd: #10b981; --color-windgust: #84cc16; --color-radiation:#f59e0b; --color-heatindex:#f97316; --color-windchill:#0ea5e9; --color-frost-bg: rgba(14, 165, 233, 0.22); --color-frost-txt:#0369a1; /* Page & layout */ --bg-page: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%); --bg-card: #ffffff; --bg-card-subtle: #f8fafc; --bg-table-head: #1e293b; --bg-hover: #f1f5f9; /* Navbar */ --bg-navbar: rgba(255, 255, 255, 0.95); --bg-navbar-menu: #ffffff; /* Text */ --text-main: #1a202c; --text-secondary: #2d3748; --text-muted: #718096; --text-placeholder:#94a3b8; /* Borders & shadows */ --border-color: #e2e8f0; --border-card: rgba(226, 232, 240, 0.8); --border-container: rgba(255, 255, 255, 0.18); --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06); --shadow-container: 0 8px 32px rgba(37, 99, 235, 0.12); --shadow-navbar: 0 2px 12px rgba(37, 99, 235, 0.1); --shadow-hover: 0 16px 40px rgba(37, 99, 235, 0.18), 0 6px 12px rgba(0, 0, 0, 0.1); --chart-grid: #e2e8f0; /* Misc */ --accent-color: #2b6cb0; --header-end: #3182ce; --success-color: #38a169; --warning-color: #d69e2e; --danger-color: #e53e3e; --border-radius: 12px; --border-radius-sm: 8px; /* Legacy aliases (kept for backward compat with inline styles) */ --primary-color: var(--text-main); --white: var(--bg-card); --light-gray: var(--bg-card-subtle); } [data-theme="dark"] { --bg-page: linear-gradient(135deg, #0f1117 0%, #1a1f2e 100%); --bg-card: #1e2433; --bg-card-subtle: #252d3d; --bg-table-head: #141824; --bg-hover: #2a3348; --bg-navbar: rgba(15, 17, 23, 0.97); --bg-navbar-menu: #1a1f2e; --text-main: #e2e8f0; --text-secondary: #cbd5e0; --text-muted: #a0aec0; --text-placeholder:#64748b; --border-color: #2d3748; --border-card: rgba(45, 55, 72, 0.9); --border-container: rgba(45, 55, 72, 0.5); --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3); --shadow-container: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-navbar: 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.4); --chart-grid: #2d3748; --accent-color: #4299e1; --header-end: #2b6cb0; --station-color: #4299e1; --station-bg: rgba(66, 153, 225, 0.08); --station-border: rgba(66, 153, 225, 0.15); --color-frost-bg: rgba(14, 165, 233, 0.15); --color-frost-txt:#38bdf8; --primary-color: var(--text-main); --white: var(--bg-card); --light-gray: var(--bg-card-subtle); } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg-page); color: var(--text-main); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.5; font-size: 14px; padding-top: 60px; transition: background 0.3s, color 0.3s; } /* -------------------------------------------------------------------------- 3. Navbar -------------------------------------------------------------------------- */ .navbar { position: fixed; top: 0; left: 0; right: 0; background: var(--bg-navbar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-navbar); z-index: 1000; border-bottom: 1px solid var(--border-color); transition: background 0.3s, border-color 0.3s; } .navbar-container { max-width: 1200px; margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } .navbar-brand { font-size: 1.125rem; font-weight: 700; color: var(--text-main); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; } .navbar-brand i { color: var(--station-color); font-size: 1.25rem; } .navbar-menu { display: flex; gap: 0.5rem; align-items: center; } .navbar-link { padding: 0.5rem 0.875rem; color: var(--text-main); text-decoration: none; border-radius: 6px; font-size: 0.875rem; font-weight: 500; transition: all 0.2s; display: flex; align-items: center; gap: 0.375rem; } .navbar-link:hover { background: rgba(37, 99, 235, 0.08); color: var(--station-color); } .navbar-link.active { background: var(--station-color); color: #fff; } .navbar-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--text-main); cursor: pointer; padding: 0.25rem; } /* Dark mode toggle button */ .dark-toggle { background: none; border: 1px solid var(--border-color); border-radius: 6px; padding: 0.4rem 0.6rem; color: var(--text-muted); cursor: pointer; font-size: 1rem; transition: all 0.2s; display: flex; align-items: center; } .dark-toggle:hover { color: var(--station-color); border-color: var(--station-color); } .dark-toggle .icon-sun { display: none; } .dark-toggle .icon-moon { display: block; } [data-theme="dark"] .dark-toggle .icon-sun { display: block; } [data-theme="dark"] .dark-toggle .icon-moon { display: none; } /* -------------------------------------------------------------------------- 4. Layout -------------------------------------------------------------------------- */ .main-container { max-width: 1200px; margin: 1.5rem auto; padding: 1.5rem; background: var(--bg-card); border-radius: var(--border-radius); box-shadow: var(--shadow-container); border: 1px solid var(--border-container); transition: background 0.3s, border-color 0.3s; } /* -------------------------------------------------------------------------- 5. Page header (gradient banner at top of each page) -------------------------------------------------------------------------- */ .page-header { background: linear-gradient(135deg, var(--accent-color), var(--header-end)); color: #fff; border-radius: var(--border-radius-sm); padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2); } .page-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; } .page-subtitle { font-size: 0.875rem; opacity: 0.9; } /* -------------------------------------------------------------------------- 6. Cards & chart containers -------------------------------------------------------------------------- */ .chart-container { background: var(--bg-card); border-radius: var(--border-radius-sm); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-card); border: 1px solid var(--border-card); position: relative; overflow: hidden; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; } .chart-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(37, 99, 235, 0.01), transparent); pointer-events: none; } .chart-title { font-size: 1rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.75rem; display: flex; align-items: center; letter-spacing: -0.025em; } .chart-icon { color: var(--station-color); margin-right: 0.5rem; } /* 2-column grid for charts */ .charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .charts-grid .chart-container { margin-bottom: 0; } .chart-full { grid-column: 1 / -1; } /* Summary chart box (used in any, arxiu-mes, arxiu-any) */ .chart-box { background: var(--bg-card-subtle); border-radius: var(--border-radius-sm); padding: 1rem; border: 1px solid var(--border-color); transition: background 0.3s, border-color 0.3s; } .chart-box h4 { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } /* Metric / KPI card (used inline → now a class) */ .kpi-card { background: var(--bg-card-subtle); border-radius: 6px; padding: 0.875rem; border: 1px solid var(--border-color); transition: background 0.3s, border-color 0.3s; } .kpi-label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; } .kpi-value { font-size: 1.25rem; font-weight: 700; } .kpi-sub { font-size: 0.75rem; color: var(--text-muted); } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; } /* Records section wrapper */ .records-section { background: var(--bg-card); border-radius: var(--border-radius-sm); padding: 1.25rem; margin-bottom: 1rem; border: 1px solid var(--border-card); box-shadow: var(--shadow-card); transition: background 0.3s, border-color 0.3s; } .records-title { font-size: 1rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .records-title i { color: var(--station-color); } /* Section title with bottom border */ .section-title { font-size: 1rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-color); } /* -------------------------------------------------------------------------- 7. Tables -------------------------------------------------------------------------- */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .data-table th { background: var(--bg-table-head); color: #fff; padding: 0.625rem 0.75rem; text-align: center; font-weight: 600; font-size: 0.75rem; } .data-table td { padding: 0.5rem 0.75rem; text-align: center; border-bottom: 1px solid var(--border-color); color: var(--text-main); transition: background 0.2s; } .data-table tr:hover td { background: var(--bg-hover); } /* Frost row */ .frost-row td { background: var(--color-frost-bg) !important; color: var(--color-frost-txt); } /* -------------------------------------------------------------------------- 8. Navigation prev/next (arxiu-mes, arxiu-any) -------------------------------------------------------------------------- */ .nav-prev-next { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .nav-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.15); color: #fff; border-radius: 6px; text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: background 0.2s; } .nav-btn:hover { background: rgba(255, 255, 255, 0.25); } /* -------------------------------------------------------------------------- 9. Footer -------------------------------------------------------------------------- */ .site-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color); text-align: center; color: var(--text-muted); font-size: 0.75rem; transition: border-color 0.3s, color 0.3s; } .site-footer a { color: var(--text-muted); } /* -------------------------------------------------------------------------- 10. Responsive -------------------------------------------------------------------------- */ @media (max-width: 768px) { body { padding-top: 56px; } .navbar-container { padding: 0.625rem 1rem; } .navbar-brand { font-size: 1rem; } .navbar-toggle { display: block; } .navbar-menu { position: fixed; top: 56px; left: 0; right: 0; background: var(--bg-navbar-menu); flex-direction: column; gap: 0; padding: 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-120%); transition: transform 0.3s ease, background 0.3s; border-bottom: 1px solid var(--border-color); } .navbar-menu.open { transform: translateY(0); } .navbar-link { width: 100%; padding: 0.75rem 1rem; border-radius: 4px; } .main-container { padding: 0.75rem; margin: 0.5rem; } .page-header { padding: 1rem; } .page-title { font-size: 1.5rem; } .chart-container { padding: 1rem; margin-bottom: 0.75rem; } .charts-grid { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .main-container { padding: 0.625rem; margin: 0.25rem; } .page-title { font-size: 1.25rem; } .chart-container { padding: 0.875rem; margin-bottom: 0.5rem; } .kpi-grid { grid-template-columns: 1fr 1fr; } }