@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Bebas+Neue&display=swap");
.tagline {
color: #4a5568;
font-size: clamp(0.9rem, 2vw, 1.1rem);
font-weight: 300;
letter-spacing: 0.5px;
}
.update-time strong {
color: #EB232D;
font-weight: 600;
}
.stations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 15px;
margin: 0;
padding: 0;
width: 100%;
box-sizing: border-box;
}
.station-card {
background: #D5DEE9;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.station-card:hover {
transform: translateY(-2px);
border-color: rgba(235, 35, 45, 0.3);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.station-header {
background: linear-gradient(135deg, #EB232D 0%, #a01520 100%);
padding: 12px;
position: relative;
}
.station-name {
font-size: 1rem;
font-weight: 600;
color: white;
margin-bottom: 3px;
}
.station-location {
display: flex;
align-items: center;
gap: 6px;
margin-top: 5px;
}
.location-link {
color: rgba(255, 255, 255, 0.95);
text-decoration: none;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 5px;
transition: color 0.2s;
}
.location-link:hover {
color: #ffffff;
}
.location-icon {
width: 12px;
height: 12px;
fill: currentColor;
}
.price-grid {
padding: 12px;
background: #C8D3E0;
}
.fuel-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin-bottom: 6px;
background: rgba(255, 255, 255, 0.5);
border-radius: 6px;
border-left: 3px solid;
transition: background 0.2s;
}
.fuel-row:hover {
background: rgba(255, 255, 255, 0.7);
}
.fuel-row:last-child {
margin-bottom: 0;
}
.fuel-row.regular {
border-left-color: #059669;
}
.fuel-row.plus {
border-left-color: #2563eb;
}
.fuel-row.premium {
border-left-color: #9333ea;
}
.fuel-row.diesel {
border-left-color: #d97706;
}
.fuel-row.ethanol-free {
border-left-color: #059669;
}
.fuel-info {
display: flex;
align-items: center;
gap: 8px;
}
.fuel-name {
font-weight: 500;
font-size: 0.85rem;
color: #2d3748;
}
.fuel-octane {
background: rgba(235, 35, 45, 0.1);
color: #EB232D;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 600;
border: 1px solid rgba(235, 35, 45, 0.2);
}
.fuel-price {
font-family: 'Inter', monospace;
font-weight: 700;
font-size: 1.15rem;
color: #1a1a1a;
display: flex;
align-items: baseline;
}
.fuel-row.regular .fuel-price {
color: #059669;
}
.fuel-row.plus .fuel-price {
color: #2563eb;
}
.fuel-row.premium .fuel-price {
color: #9333ea;
}
.fuel-row.diesel .fuel-price {
color: #d97706;
}
.fuel-row.ethanol-free .fuel-price {
color: #059669;
}
.price-dollar {
font-size: 0.75em;
margin-right: 1px;
}
.price-cents {
font-size: 0.6em;
margin-left: 1px;
}
.price-fraction {
font-size: 0.5em;
vertical-align: super;
}
.store-id {
padding: 8px 12px;
background: #BCC7D6;
border-top: 1px solid rgba(0, 0, 0, 0.08);
text-align: center;
font-size: 0.7rem;
color: #4a5568;
letter-spacing: 0.5px;
}
.footer-tagline {
color: #4a5568;
font-size: 0.9rem;
margin-bottom: 15px;
}
.footer-link {
color: #EB232D;
text-decoration: none;
font-weight: 500;
transition: opacity 0.2s;
}
.footer-link:hover {
opacity: 0.8;
text-decoration: underline;
}
.error-message {
background: rgba(235, 35, 45, 0.08);
border: 1px solid rgba(235, 35, 45, 0.2);
color: #dc2626;
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 0.9rem;
box-shadow: 0 2px 8px rgba(235, 35, 45, 0.1);
}
.no-prices {
padding: 30px 15px;
text-align: center;
color: #64748b;
font-size: 0.85rem;
background: rgba(255, 255, 255, 0.3);
border: 1px dashed rgba(235, 35, 45, 0.3);
border-radius: 6px;
margin: 12px;
}
.no-prices-title {
color: #EB232D;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 5px;
}
.no-prices-message {
font-size: 0.75rem;
color: #64748b;
}
@media (max-width: 768px) {
.stations-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.update-bar {
flex-direction: column;
text-align: center;
}
.fuel-price {
font-size: 1.2rem;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.stations-grid {
grid-template-columns: repeat(2, 1fr);
}
}