.scootercam-tempest-card,
.scootercam-tempest-current,
.scootercam-tempest-forecast,
.scootercam-tempest-chart-container,
.scootercam-tempest-stats-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 20px 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.scootercam-tempest-error,
.scootercam-tempest-info {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 15px;
margin: 20px 0;
border-radius: 4px;
color: #856404;
}
.scootercam-tempest-info {
background: #d1ecf1;
border-left-color: #17a2b8;
color: #0c5460;
} .tempest-card-header {
padding: 20px;
border-bottom: 1px solid #e9ecef;
display: flex;
justify-content: space-between;
align-items: center;
}
.tempest-card-header h3 {
margin: 0;
font-size: 1.5em;
color: #2c3e50;
}
.tempest-card-updated {
color: #6c757d;
font-size: 0.9em;
}
.tempest-card-body {
padding: 20px;
}
.tempest-card-hero {
text-align: center;
padding: 30px 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
color: white;
margin-bottom: 20px;
}
.tempest-card-temp {
display: flex;
align-items: baseline;
justify-content: center;
gap: 5px;
}
.temp-value {
font-size: 4em;
font-weight: 700;
line-height: 1;
}
.temp-unit {
font-size: 2em;
font-weight: 300;
}
.tempest-card-feels {
margin-top: 10px;
font-size: 1.1em;
opacity: 0.9;
}
.tempest-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.tempest-card-item {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
transition: transform 0.2s, box-shadow 0.2s;
}
.tempest-card-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.item-icon {
font-size: 2em;
}
.item-content {
display: flex;
flex-direction: column;
}
.item-label {
font-size: 0.85em;
color: #6c757d;
margin-bottom: 4px;
}
.item-value {
font-size: 1.2em;
font-weight: 600;
color: #2c3e50;
} .scootercam-tempest-current {
padding: 20px;
}
.scootercam-tempest-current h3 {
margin: 0 0 20px 0;
color: #2c3e50;
}
.tempest-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
.tempest-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
padding: 30px;
color: white;
}
.tempest-temp {
font-size: 3em;
font-weight: 700;
line-height: 1;
}
.tempest-feels {
margin-top: 10px;
font-size: 1em;
opacity: 0.9;
}
.tempest-details {
display: flex;
flex-direction: column;
gap: 10px;
}
.tempest-row {
display: flex;
justify-content: space-between;
padding: 12px;
background: #f8f9fa;
border-radius: 6px;
}
.tempest-row .label {
color: #6c757d;
font-weight: 500;
}
.tempest-row .value {
color: #2c3e50;
font-weight: 600;
}
.tempest-updated {
margin-top: 15px;
text-align: center;
color: #6c757d;
font-size: 0.9em;
} .scootercam-tempest-forecast {
padding: 20px;
}
.scootercam-tempest-forecast h3 {
margin: 0 0 20px 0;
color: #2c3e50;
}
.tempest-table-wrapper {
overflow-x: auto;
}
.tempest-forecast-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95em;
}
.tempest-forecast-table thead {
background: #f8f9fa;
}
.tempest-forecast-table th {
padding: 12px;
text-align: left;
font-weight: 600;
color: #495057;
border-bottom: 2px solid #dee2e6;
}
.tempest-forecast-table td {
padding: 12px;
border-bottom: 1px solid #dee2e6;
}
.tempest-forecast-table tbody tr:hover {
background: #f8f9fa;
}
.tempest-forecast-table .icon {
font-size: 1.5em;
margin-right: 8px;
}
.tempest-forecast-table .conditions {
display: flex;
align-items: center;
}
.tempest-forecast-table .temp-high {
color: #dc3545;
font-weight: 600;
}
.tempest-forecast-table .temp-low {
color: #007bff;
font-weight: 600;
} .scootercam-tempest-chart-container {
padding: 20px;
}
.scootercam-tempest-chart-container h3 {
margin: 0 0 20px 0;
color: #2c3e50;
}
.scootercam-tempest-chart-container canvas {
max-width: 100%;
}
.chart-note {
margin-top: 10px;
text-align: center;
color: #6c757d;
font-size: 0.9em;
font-style: italic;
} .scootercam-tempest-stats-card {
padding: 20px;
}
.scootercam-tempest-stats-card h3 {
margin: 0 0 20px 0;
color: #2c3e50;
font-size: 1.5em;
}
.stats-subtitle {
color: #6c757d;
margin: -10px 0 20px 0;
font-size: 0.9em;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.stat-item {
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
}
.stat-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.stat-item.featured {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.stat-label {
display: block;
font-size: 0.9em;
color: #6c757d;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-item.featured .stat-label {
color: rgba(255, 255, 255, 0.9);
}
.stat-value {
display: block;
font-size: 2em;
font-weight: 700;
color: #2c3e50;
}
.stat-item.featured .stat-value {
color: white;
} .records-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.record-item {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
transition: transform 0.2s, box-shadow 0.2s;
}
.record-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.record-icon {
font-size: 3em;
}
.record-content {
display: flex;
flex-direction: column;
flex: 1;
}
.record-label {
font-size: 0.85em;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 5px;
}
.record-value {
font-size: 1.8em;
font-weight: 700;
color: #2c3e50;
margin-bottom: 3px;
}
.record-date {
font-size: 0.85em;
color: #6c757d;
} .comparison-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.comparison-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 15px;
align-items: center;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
}
.comparison-label {
font-weight: 600;
color: #2c3e50;
}
.comparison-this-week {
text-align: center;
font-size: 1.2em;
font-weight: 700;
color: #667eea;
}
.comparison-last-week {
text-align: center;
font-size: 1.2em;
font-weight: 700;
color: #6c757d;
}
.comparison-change {
text-align: center;
font-weight: 600;
padding: 8px;
border-radius: 6px;
}
.comparison-change.up {
background: #d4edda;
color: #155724;
}
.comparison-change.down {
background: #f8d7da;
color: #721c24;
}
.comparison-legend {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #dee2e6;
display: flex;
justify-content: space-around;
font-size: 0.9em;
color: #6c757d;
} @media (max-width: 768px) {
.tempest-grid {
grid-template-columns: 1fr;
}
.tempest-card-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: 1fr;
}
.records-grid {
grid-template-columns: 1fr;
}
.comparison-row {
grid-template-columns: 1fr;
text-align: center;
}
.comparison-label {
font-weight: 700;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #dee2e6;
}
.comparison-legend {
flex-direction: column;
gap: 5px;
text-align: center;
}
.temp-value {
font-size: 3em;
}
.tempest-forecast-table {
font-size: 0.85em;
}
.tempest-forecast-table th,
.tempest-forecast-table td {
padding: 8px;
}
}
@media (max-width: 480px) {
.tempest-card-header {
flex-direction: column;
gap: 10px;
text-align: center;
}
.temp-value {
font-size: 2.5em;
}
.tempest-temp {
font-size: 2.5em;
}
.record-item {
flex-direction: column;
text-align: center;
}
.tempest-forecast-table .icon {
display: none;
}
} @media (prefers-color-scheme: dark) {
.scootercam-tempest-card,
.scootercam-tempest-current,
.scootercam-tempest-forecast,
.scootercam-tempest-chart-container,
.scootercam-tempest-stats-card {
background: #1e1e1e;
color: #e0e0e0;
}
.tempest-card-header,
.tempest-card-item,
.tempest-row,
.stat-item,
.record-item,
.comparison-row {
background: #2d2d2d;
}
.tempest-card-header h3,
.scootercam-tempest-current h3,
.scootercam-tempest-forecast h3,
.scootercam-tempest-stats-card h3,
.item-value,
.tempest-row .value,
.stat-value,
.record-value,
.comparison-label {
color: #e0e0e0;
}
.tempest-forecast-table {
color: #e0e0e0;
}
.tempest-forecast-table thead {
background: #2d2d2d;
}
.tempest-forecast-table td {
border-bottom-color: #404040;
}
.tempest-forecast-table tbody tr:hover {
background: #333;
}
} @media print {
.scootercam-tempest-card,
.scootercam-tempest-current,
.scootercam-tempest-forecast,
.scootercam-tempest-stats-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
.tempest-card-hero,
.tempest-main {
background: #f0f0f0 !important;
color: #000 !important;
}
}