/*
* MysticSwell - Consolidated Stylesheet
* Sections: Variables | Base | Typography | Layout | Nav | Search | Cards |
* Forecast | Quality | Tide | Settings | Forms | Modals | Footer |
* Utilities | Responsive
*/
/* ====== 1. CSS VARIABLES ====== */
:root {
/* Constrained coastal palette: navy + sand + one blue accent */
--ocean-blue: #0e7490;
--ocean-blue-dark: #0c5f75;
--ocean-blue-light: #22d3ee;
--wave-teal: #0ea5c6;
--surf-navy: #0f1d2e;
--foam-white: #f5f2eb;
--sand: #c4a882;
--sand-light: #e8ddd0;
--sand-muted: #a89478;
--quality-epic: #2d7a4f;
--quality-very-good: #3d9060;
--quality-good: #b8860b;
--quality-fair: #c26a2f;
--quality-poor: #a83232;
--white: #fefefe;
--gray-50: #f7f6f4;
--gray-100: #efeee9;
--gray-200: #dddbd4;
--gray-300: #c2bfb6;
--gray-400: #908c82;
--gray-500: #6b675e;
--gray-600: #4a4740;
--gray-700: #35322d;
--gray-800: #23211d;
--gray-900: #141310;
--bg-primary: #f5f2eb;
--bg-secondary: #eee9e0;
--bg-tertiary: #e8e3da;
--text-primary: #1a1814;
--text-secondary: #6b675e;
--text-muted: #908c82;
--border-color: #dddbd4;
--accent-gold: #c4a882;
--surf-navy-hover: #1a2a3f;
--quality-poor-hover: #8b2828;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--shadow-sm: 0 1px 2px 0 rgba(20, 19, 16, 0.04);
--shadow-md: 0 4px 6px -1px rgba(20, 19, 16, 0.07), 0 2px 4px -2px rgba(20, 19, 16, 0.04);
--shadow-lg: 0 10px 15px -3px rgba(20, 19, 16, 0.08), 0 4px 6px -4px rgba(20, 19, 16, 0.03);
--shadow-xl: 0 20px 25px -5px rgba(20, 19, 16, 0.08), 0 8px 10px -6px rgba(20, 19, 16, 0.03);
/* Font families */
--font-display: 'Fraunces', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
}
/* ====== 2. BASE / RESET ====== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
font-family: var(--font-body);
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
ul, ol { list-style: none; }
/* ====== 3. TYPOGRAPHY ====== */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.2; font-weight: 600; color: var(--text-primary); }
a { color: var(--ocean-blue); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--surf-navy); }
.text-muted { color: var(--text-muted); }
.text-small { font-size: 0.85rem; }
.tabular-nums { font-variant-numeric: tabular-nums; }
/* Touch feedback for interactive elements */
@media (hover: none) {
.nav-link:active, .bottom-nav-item:active, .btn:active,
.search-item:active, .user-dropdown a:active, .user-dropdown-btn:active,
.fc-strip-card:active, .fc-day-header:active, .fc-chart-tab:active,
.hm-region-tile:active, .hm-card:active, .fc-nearby-card:active,
.rg-card:active { opacity: 0.7; transition-duration: 0.05s; }
}
/* Prevent iOS zoom on all form inputs */
input, select, textarea { font-size: max(1rem, 16px); }
/* ====== 4. LAYOUT ====== */
.main-content {
max-width: 1400px; margin: 0 auto;
padding: var(--space-xl) var(--space-lg);
background-color: var(--bg-primary);
}
.page-section { margin-bottom: var(--space-2xl); }
.content-section { margin-bottom: var(--space-xl); }
.section-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: var(--space-xl); flex-wrap: wrap; gap: var(--space-md);
}
.section-title {
font-size: 1.75rem; font-weight: 400; color: var(--text-primary);
display: flex; align-items: center; gap: var(--space-md); letter-spacing: -0.01em;
}
.section-title i { font-size: 1.5rem; color: var(--sand-muted); }
.section-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.page-header { text-align: center; margin-bottom: var(--space-xl); }
.page-title { font-family: var(--font-display); font-size: 2.5rem; font-weight: 400; margin-bottom: var(--space-sm); }
.page-subtitle { color: var(--text-secondary); font-size: 1.1rem; font-weight: 500; }
/* Hero */
.hero-section {
text-align: center; margin-bottom: var(--space-xl);
padding: var(--space-2xl) var(--space-lg);
background: var(--surf-navy);
border-radius: var(--radius-xl); color: var(--white);
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 400;
margin-bottom: var(--space-lg); letter-spacing: -0.01em; line-height: 1.1;
}
.hero-subtitle {
font-size: 1.1rem; opacity: 0.95; max-width: 700px;
margin: 0 auto var(--space-xl); line-height: 1.6;
}
.hero-cta {
display: flex; gap: var(--space-md); justify-content: center;
align-items: center; flex-wrap: wrap;
}
/* Quick Stats */
.quick-stats {
background: var(--white); border-radius: var(--radius-xl); padding: var(--space-xl);
margin-bottom: var(--space-xl); box-shadow: var(--shadow-md); border: 1px solid var(--gray-200);
}
.stats-header {
text-align: center; margin-bottom: var(--space-lg);
padding-bottom: var(--space-md); border-bottom: 1px solid var(--gray-200);
}
.stats-location { font-size: 1.75rem; font-weight: 700; margin-bottom: var(--space-xs); }
.stats-subtitle { color: var(--text-secondary); font-size: 0.95rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); }
.stat-item {
text-align: center; padding: var(--space-lg); background: var(--bg-secondary);
border-radius: var(--radius-lg); transition: transform 0.2s ease;
}
.stat-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat-value {
font-size: 2rem; font-weight: 800; color: var(--ocean-blue);
margin-bottom: var(--space-sm); font-variant-numeric: tabular-nums;
}
.stat-label {
font-size: 0.85rem; color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.info-box {
text-align: center; margin-top: var(--space-lg); padding: var(--space-lg);
background: var(--bg-secondary); border-radius: var(--radius-md);
color: var(--text-secondary); font-size: 0.9rem; border-left: 4px solid var(--ocean-blue);
}
.info-box i { color: var(--ocean-blue); margin-right: var(--space-sm); }
/* ====== 5. NAVIGATION ====== */
.header {
background: var(--surf-navy);
color: var(--white); position: sticky; top: 0; z-index: 1000;
box-shadow: 0 1px 0 rgba(255,255,255,0.06);
padding-top: env(safe-area-inset-top); /* iOS notch */
}
.nav-container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-lg); }
.navbar {
display: flex; justify-content: space-between; align-items: center;
height: 64px; gap: var(--space-lg); position: relative;
}
.logo {
display: flex; align-items: center; gap: var(--space-sm);
font-family: var(--font-display); font-size: 1.35rem; font-weight: 400;
text-decoration: none; color: var(--white); letter-spacing: 0.01em;
flex-shrink: 0; transition: transform 0.2s ease; min-height: 44px; padding: var(--space-xs) 0;
}
.logo:hover { transform: scale(1.02); color: var(--white); }
.logo i { font-size: 1.75rem; color: var(--white); flex-shrink: 0; }
.logo span:not(.beta-sticker) { white-space: nowrap; }
.beta-sticker {
background: var(--wave-teal); color: var(--white); font-size: 0.6rem; font-weight: 700;
padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); margin-left: var(--space-sm);
text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0;
}
.nav-menu {
display: flex; list-style: none; gap: var(--space-sm);
align-items: center; margin: 0; padding: 0;
}
.nav-link {
color: rgba(255, 255, 255, 0.9); text-decoration: none; font-weight: 500;
padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
transition: all 0.2s ease; font-size: 0.9rem; display: flex; align-items: center;
gap: var(--space-xs); min-height: 44px; position: relative; white-space: nowrap;
}
.nav-link::after {
content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
width: 0; height: 2px; background: var(--white); transition: width 0.3s ease;
}
.nav-link:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--white); }
.nav-link:hover::after { width: 60%; }
.nav-link.active { background-color: rgba(255, 255, 255, 0.15); color: var(--white); }
.nav-link.active::after { width: 80%; }
.nav-link.premium {
background: linear-gradient(135deg, var(--quality-fair), #ea580c); color: var(--white); font-weight: 600;
}
.nav-link.premium:hover { background: linear-gradient(135deg, #ea580c, var(--quality-poor)); transform: translateY(-1px); }
.desktop-controls { display: flex; align-items: center; gap: var(--space-md); }
/* User Menu */
.login-link {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.8); font-size: 0.95rem;
transition: background 0.15s, border-color 0.15s;
}
.login-link:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.25); color: var(--white); }
.user-menu {
position: relative;
}
.user-menu-btn {
display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.85);
font-size: 0.95rem; cursor: pointer;
width: 34px; height: 34px; min-width: 34px; min-height: 34px;
border-radius: 50%; transition: background .15s, border-color .15s;
}
.user-menu-btn:hover, .user-menu-btn:active { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.25); color: var(--white); }
.user-dropdown {
display: none; position: absolute; right: 0; top: calc(100% + 21px);
min-width: 180px; z-index: 1001;
}
.user-dropdown.show { display: block; }
.user-dropdown-inner {
background: #fff; border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(15,29,46,0.15);
border: 1px solid var(--gray-200); overflow: hidden;
}
.user-dropdown-inner a,
.user-dropdown-btn {
display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: .85rem;
color: #1a1a1a; text-decoration: none; width: 100%; border: none; background: none;
cursor: pointer; font-family: var(--font-body); text-align: left;
}
.user-dropdown-header {
padding: 12px 16px; border-bottom: 1px solid #ece8e0;
}
.user-dropdown-name { font-size: .88rem; font-weight: 600; color: #1a1a1a; }
.user-dropdown-email {
font-size: .75rem; color: #6b6358; margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-dropdown-inner a:hover,
.user-dropdown-btn:hover { background: #f5f2eb; }
.user-dropdown-inner i { width: 16px; text-align: center; color: #6b6358; font-size: .8rem; }
/* Mobile Menu Button */
.mobile-menu-btn {
display: none; background: none; border: none; color: var(--white); font-size: 1.5rem;
cursor: pointer; padding: var(--space-sm); min-width: 44px; min-height: 44px;
border-radius: var(--radius-md); transition: background-color 0.2s ease;
flex-shrink: 0; position: relative; z-index: 1001;
}
.mobile-menu-btn:hover { background-color: rgba(255, 255, 255, 0.1); }
.mobile-menu-btn:active { background-color: rgba(255, 255, 255, 0.2); }
/* Mobile Menu Backdrop */
.mobile-menu-backdrop {
display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5); z-index: 998; opacity: 0; transition: opacity 0.3s ease;
}
.mobile-menu-backdrop.active { display: block; opacity: 1; }
/* Mobile Bottom Nav */
.mobile-bottom-nav {
display: none; position: fixed; bottom: 0; left: 0; right: 0;
background: var(--white); border-top: 1px solid var(--gray-200);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); z-index: 999;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-items {
display: flex; justify-content: space-around; align-items: center;
height: 64px; padding: var(--space-xs) var(--space-sm); max-width: 100%; margin: 0 auto;
}
.bottom-nav-item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; color: var(--text-secondary); text-decoration: none; font-size: 0.7rem;
padding: var(--space-xs) var(--space-sm); min-width: 64px; min-height: 64px;
transition: all 0.2s ease; background: none; border: none; cursor: pointer;
font-family: inherit; border-radius: var(--radius-md); position: relative;
flex: 1 1 0; max-width: 80px; text-align: center;
}
.bottom-nav-item i { font-size: 1.3rem; transition: transform 0.2s ease; }
.bottom-nav-item span { font-weight: 500; line-height: 1; }
.bottom-nav-item.active { color: var(--ocean-blue); background-color: rgba(26, 111, 160, 0.1); }
.bottom-nav-item.active i { transform: scale(1.1); }
.bottom-nav-item:hover, .bottom-nav-item:focus { color: var(--ocean-blue); background-color: rgba(26, 111, 160, 0.05); }
.bottom-nav-item:active { transform: scale(0.95); }
/* ====== 6. SEARCH ====== */
.location-search {
display: flex; align-items: center; gap: var(--space-sm);
background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md); border: 1px solid rgba(255, 255, 255, 0.2);
position: relative; flex-shrink: 0;
}
.location-search input {
background: none; border: none; color: var(--white); width: 200px; outline: none; font-size: 1rem; /* >=16px prevents iOS zoom */
}
.location-search input::placeholder { color: rgba(255, 255, 255, 0.7); }
.search-dropdown {
position: absolute; top: 100%; left: 0; right: 0; background: var(--white);
border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid var(--ocean-blue);
max-height: 300px; overflow-y: auto; z-index: 1000; display: none; margin-top: var(--space-xs);
}
.search-dropdown.show { display: block; }
.search-item {
padding: var(--space-md); cursor: pointer; color: var(--text-primary);
border-bottom: 1px solid var(--gray-200); display: flex; justify-content: space-between;
min-height: 44px; /* touch target */
align-items: center; user-select: none; -webkit-user-select: none;
pointer-events: auto; position: relative; z-index: 10; transition: background-color 0.2s ease;
}
.search-item:hover { background: var(--bg-secondary); border-left: 3px solid var(--ocean-blue); }
.search-item:last-child { border-bottom: none; }
.search-item-name { font-weight: 500; }
.search-item-conditions { font-size: 0.8rem; color: var(--text-secondary); }
/* Search Modal (Mobile) */
.search-modal {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5);
z-index: 200; display: none; align-items: flex-start; padding-top: 60px;
}
.search-modal.active { display: flex; }
.search-modal-content {
background: var(--white); width: 100%; max-width: 600px; margin: 0 auto;
border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: calc(100vh - 60px); overflow-y: auto;
}
.search-modal-header {
padding: var(--space-lg); border-bottom: 1px solid var(--gray-200);
display: flex; align-items: center; gap: var(--space-md);
position: sticky; top: 0; background: var(--white); z-index: 10;
}
.search-modal-header input { flex: 1; border: none; font-size: 1.1rem; outline: none; }
.search-modal-close {
background: none; border: none; font-size: 1.5rem; color: var(--text-secondary);
cursor: pointer; padding: var(--space-sm); min-width: 44px; min-height: 44px;
}
/* ====== 7. CARDS ====== */
.forecast-preview {
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
gap: var(--space-lg); margin-bottom: var(--space-xl);
}
.spot-card {
background: var(--white); border-radius: var(--radius-xl); overflow: hidden;
box-shadow: var(--shadow-md); transition: all 0.3s ease; cursor: pointer; border: 1px solid var(--gray-200);
}
.spot-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--ocean-blue-light); }
.spot-card:active { transform: translateY(-1px); transition-duration: 0.05s; }
.spot-card-header {
padding: var(--space-lg);
background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
border-bottom: 1px solid var(--gray-200);
}
.spot-name-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-sm); }
.spot-name { font-size: 1.25rem; font-weight: 700; margin: 0; }
.spot-meta { display: flex; gap: var(--space-md); font-size: 0.85rem; color: var(--text-secondary); }
.spot-card-body { padding: var(--space-lg); }
.current-conditions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.condition-primary { display: flex; flex-direction: column; gap: var(--space-xs); }
.condition-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; }
.condition-value { font-size: 2rem; font-weight: 800; color: var(--ocean-blue); font-variant-numeric: tabular-nums; }
.mini-forecast {
display: flex; gap: var(--space-sm); padding: var(--space-md); background: var(--bg-secondary);
border-radius: var(--radius-md); overflow-x: auto; margin-bottom: var(--space-md);
}
.mini-hour { flex: 0 0 auto; text-align: center; min-width: 60px; }
.mini-hour-time { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; margin-bottom: var(--space-xs); }
.mini-hour-icon { font-size: 1.25rem; margin-bottom: var(--space-xs); }
.mini-hour-height { font-size: 0.85rem; font-weight: 700; color: var(--ocean-blue); }
.mini-hour-stars { font-size: 0.7rem; color: var(--quality-good); }
.sparkline-container { height: 40px; margin: var(--space-md) 0; }
.sparkline { stroke: var(--ocean-blue); fill: none; stroke-width: 2; }
.sparkline-fill { fill: url(#sparkline-gradient); opacity: 0.2; }
.spot-details-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm);
padding-top: var(--space-md); border-top: 1px solid var(--gray-200);
}
.detail-item { display: flex; align-items: center; gap: var(--space-xs); font-size: 0.85rem; color: var(--text-secondary); }
.detail-item i { color: var(--ocean-blue); width: 16px; }
.detail-value { font-weight: 600; color: var(--text-primary); }
.best-time-badge {
display: inline-flex; align-items: center; gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
background: linear-gradient(135deg, var(--quality-good), var(--quality-fair));
color: var(--white); border-radius: var(--radius-sm); font-size: 0.75rem;
font-weight: 600; margin-top: var(--space-sm);
}
/* Day Card */
.day-card {
background: var(--white); margin-bottom: var(--space-xl); border-radius: var(--radius-xl);
box-shadow: var(--shadow-md); border: 1px solid var(--gray-200);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; position: relative;
}
.day-card::before {
content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(26, 111, 160, 0.06), transparent);
transition: left 0.6s ease;
}
.day-card:hover::before { left: 100%; }
.day-card:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(26, 111, 160, 0.15); border-color: var(--ocean-blue-light); }
.day-card.expanded { border-color: var(--ocean-blue); box-shadow: 0 12px 35px rgba(26, 111, 160, 0.1); transform: translateY(-2px); }
/* ====== 8. FORECAST ====== */
.day-header {
background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-blue-dark));
color: var(--white); padding: var(--space-xl); position: relative;
}
.day-header > div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.date-section { display: flex; align-items: center; gap: var(--space-sm); font-size: 1.25rem; font-weight: 600; }
.controls { display: flex; gap: var(--space-sm); align-items: center; }
.expand-toggle-btn {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(26, 111, 160, 0.1));
border: 1px solid rgba(255, 255, 255, 0.3); color: var(--white);
padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-lg);
font-size: 0.875rem; font-weight: 600; cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center;
gap: var(--space-sm); position: relative; overflow: hidden; box-shadow: var(--shadow-md); z-index: 10;
}
.expand-toggle-btn::before {
content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.expand-toggle-btn:hover::before { left: 100%; }
.expand-toggle-btn:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(26, 111, 160, 0.15));
transform: translateY(-2px); box-shadow: 0 8px 25px rgba(26, 111, 160, 0.2);
}
.help-icon-link {
background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--white); padding: var(--space-sm); border-radius: var(--radius-md);
text-decoration: none; transition: all 0.2s ease; width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
}
.help-icon-link:hover { background-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); color: var(--white); }
.table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.clickable-table { cursor: pointer; transition: all 0.3s ease; position: relative; }
.clickable-table:hover { background: rgba(26, 111, 160, 0.02); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26, 111, 160, 0.1); }
/* Forecast Table */
.forecast-table { width: 100%; border-collapse: collapse; background: transparent; border: none; min-width: 100%; }
.forecast-table th {
background: linear-gradient(135deg, var(--gray-50), var(--bg-tertiary));
color: var(--text-primary); font-weight: 600; padding: var(--space-md); border: none;
font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; text-align: center;
}
.forecast-table th br { display: none; }
.forecast-table td {
padding: var(--space-md); border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.05);
vertical-align: middle; transition: background-color 0.3s ease; text-align: center;
}
.forecast-table tbody tr:hover { background: rgba(26, 111, 160, 0.05); }
.surf-size {
background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-blue-dark));
color: var(--white); padding: var(--space-sm) var(--space-md); border-radius: 12px;
font-weight: 700; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(26, 111, 160, 0.3);
transition: all 0.3s ease; display: inline-block;
}
.surf-size:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(26, 111, 160, 0.4); }
.wind-arrow { display: inline-block; transition: all 0.3s ease; font-size: 1.2rem; margin-left: var(--space-sm); color: var(--quality-fair); }
.metric-badge {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.1), rgba(26, 111, 160, 0.1));
color: var(--ocean-blue); padding: var(--space-xs) var(--space-lg); border-radius: 8px;
font-weight: 500; border: 1px solid rgba(26, 111, 160, 0.2);
}
.weather-icon { font-size: 1.2rem; margin-right: var(--space-sm); color: var(--accent-gold); }
.wave-icon { color: var(--ocean-blue); margin-right: var(--space-sm); }
.extra-row { background: rgba(249, 250, 251, 0.5); animation: slideDown 0.3s ease-out; }
.no-data { color: var(--text-secondary); font-style: italic; font-size: 0.9rem; opacity: 0.7; }
/* Timeline */
.timeline-container { background: var(--white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: var(--space-xl); }
.timeline-header {
padding: var(--space-lg); background: linear-gradient(135deg, var(--gray-50), var(--white));
border-bottom: 1px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center;
}
.timeline-title { font-size: 1.5rem; font-weight: 700; }
.timeline-controls { display: flex; gap: var(--space-sm); }
.timeline-scroll { overflow-x: auto; overflow-y: visible; padding: var(--space-md) 0; -webkit-overflow-scrolling: touch; }
.timeline-scroll::-webkit-scrollbar { height: 8px; }
.timeline-scroll::-webkit-scrollbar-track { background: var(--gray-100); }
.timeline-scroll::-webkit-scrollbar-thumb { background: var(--ocean-blue); border-radius: 4px; }
.timeline-grid { display: grid; grid-template-rows: auto repeat(4, minmax(80px, auto)); min-width: max-content; padding: 0 var(--space-lg); }
.timeline-hours { display: grid; grid-auto-flow: column; grid-auto-columns: 100px; gap: 1px; background: var(--gray-200); padding-left: 120px; }
.timeline-hour-cell { background: var(--white); padding: var(--space-md); text-align: center; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; border-left: 1px solid var(--gray-200); }
.timeline-hour-cell.current-hour { background: var(--ocean-blue); color: var(--white); }
.timeline-lane { display: grid; grid-template-columns: 120px 1fr; gap: 0; background: var(--gray-200); min-height: 80px; }
.lane-label { background: var(--bg-secondary); padding: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; border-right: 2px solid var(--gray-300); position: sticky; left: 0; z-index: 10; }
.lane-label i { color: var(--ocean-blue); font-size: 1.1rem; }
.lane-cells { display: grid; grid-auto-flow: column; grid-auto-columns: 100px; gap: 1px; }
.lane-cell { background: var(--white); padding: var(--space-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); border-left: 1px solid var(--gray-200); transition: background 0.2s ease; }
.lane-cell:hover { background: var(--bg-secondary); }
.lane-cell-value { font-size: 1.1rem; font-weight: 700; color: var(--ocean-blue); font-variant-numeric: tabular-nums; }
.lane-cell-icon { font-size: 1.25rem; color: var(--text-secondary); }
.wind-arrow-icon { transition: transform 0.3s ease; }
/* Wave Bar */
.wave-bar { width: 100%; height: 40px; background: linear-gradient(135deg, var(--ocean-blue-light), var(--ocean-blue)); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.wave-bar::after { content: ''; position: absolute; inset: 0; background: url('data:image/svg+xml,'); background-size: 50px 20px; animation: wave-motion 2s linear infinite; }
.wave-bar.quality-epic { background: linear-gradient(135deg, var(--quality-epic), #047857); }
.wave-bar.quality-very-good { background: linear-gradient(135deg, var(--quality-very-good), var(--quality-epic)); }
.wave-bar.quality-good { background: linear-gradient(135deg, var(--quality-good), #b45309); }
.wave-bar.quality-fair { background: linear-gradient(135deg, var(--quality-fair), #c2410c); }
.wave-bar.quality-poor { background: linear-gradient(135deg, var(--quality-poor), #b91c1c); }
.hover-col { background-color: var(--gray-50); }
/* Chart Section */
.chart-section {
background-color: var(--white); padding: var(--space-xl); margin-bottom: var(--space-xl);
border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--gray-200);
position: relative; overflow: hidden;
}
.chart-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--ocean-blue), var(--ocean-blue-light), var(--ocean-blue-dark)); }
.chart-container { position: relative; height: 320px; background-color: var(--white); border-radius: var(--radius-lg); padding: var(--space-md); border: 1px solid var(--gray-200); }
/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); padding: var(--space-sm) 0; font-size: 0.9rem; flex-wrap: wrap; }
.breadcrumb-item { display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); text-decoration: none; transition: color 0.2s ease; white-space: nowrap; }
.breadcrumb-item:hover { color: var(--ocean-blue); }
.breadcrumb-item.active { color: var(--text-primary); font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-separator { color: var(--text-secondary); font-size: 0.8rem; flex-shrink: 0; }
/* Last Updated */
.last-updated-section { background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-blue-dark)); border-radius: var(--radius-lg); margin: var(--space-lg) 0; padding: var(--space-md); box-shadow: var(--shadow-md); }
.last-updated-content { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-md); }
.update-info { display: flex; align-items: center; gap: var(--space-sm); color: var(--white); font-size: 0.9rem; }
.update-info i { color: var(--ocean-blue-light); font-size: 1rem; }
.update-label { font-weight: 600; opacity: 0.9; }
.update-time { font-weight: 700; background: rgba(255, 255, 255, 0.1); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-family: 'Courier New', monospace; }
/* Comparison */
.comparison-section { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-md); border: 1px solid var(--border-color); }
.comparison-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xl); padding-bottom: var(--space-md); border-bottom: 2px solid var(--border-color); }
.comparison-title { font-size: 1.5rem; margin: 0; }
.data-sources { display: flex; gap: var(--space-xl); font-size: 0.9rem; color: var(--text-secondary); }
.data-source { display: flex; align-items: center; gap: var(--space-sm); }
.data-source i { color: var(--primary-purple); }
.comparison-table { width: 100%; border-collapse: collapse; margin-top: var(--space-md); }
.comparison-table th, .comparison-table td { padding: var(--space-lg); text-align: left; border-bottom: 1px solid var(--border-color); }
.comparison-table th { background: var(--bg-secondary); font-weight: 600; position: sticky; top: 0; }
.comparison-table tr:hover { background: var(--bg-secondary); }
.time-column { font-weight: 500; }
.data-column { text-align: center; }
.gfs-data { color: var(--primary-purple); font-weight: 500; }
.surfline-data { color: var(--mystic-cyan); font-weight: 500; }
.difference { font-weight: 600; }
.difference.positive { color: var(--quality-epic); }
.difference.negative { color: var(--quality-poor); }
.difference.neutral { color: var(--text-secondary); }
/* ====== 9. QUALITY INDICATORS ====== */
.star-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 1rem; line-height: 1; }
.star { color: var(--gray-300); font-size: 1em; transition: transform 0.2s ease; }
.star.filled, .star.half { color: #fbbf24; filter: drop-shadow(0 1px 2px rgba(251, 191, 36, 0.3)); }
.quality-badge-large { display: flex; align-items: center; justify-content: center; padding: var(--space-md); border-radius: var(--radius-lg); font-weight: 700; font-size: 0.9rem; text-align: center; }
.quality-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.85rem; }
.quality-epic { background: linear-gradient(135deg, var(--quality-epic), #047857); color: var(--white); }
.quality-very-good { background: linear-gradient(135deg, var(--quality-very-good), var(--quality-epic)); color: var(--white); }
.quality-good { background: linear-gradient(135deg, var(--quality-good), #b45309); color: var(--gray-900); }
.quality-fair { background: linear-gradient(135deg, var(--quality-fair), #c2410c); color: var(--gray-900); }
.quality-poor { background: linear-gradient(135deg, var(--quality-poor), #b91c1c); color: var(--white); }
.quality-pill { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.05em; box-shadow: var(--shadow-sm); }
.quality-pill.quality-epic { background-color: var(--quality-epic); }
.quality-pill.quality-very-good { background-color: var(--quality-very-good); }
.quality-pill.quality-good { background-color: var(--quality-good); }
.quality-pill.quality-fair { background-color: var(--quality-fair); }
.quality-pill.quality-poor { background-color: var(--quality-poor); }
.quality-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.quality-dot.green { background: var(--quality-epic); }
.quality-dot.yellow { background: var(--quality-good); }
.quality-dot.orange { background: var(--quality-fair); }
.quality-dot.red { background: var(--quality-poor); }
.surf-quality { padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 0.78rem; text-align: center; min-width: 70px; display: inline-block; }
.surf-quality.poor { background: var(--quality-poor); color: var(--white); }
.surf-quality.fair { background: var(--quality-fair); color: var(--white); }
.surf-quality.good { background: var(--quality-good); color: var(--white); }
.surf-quality.very-good { background: var(--quality-very-good); color: var(--white); }
.surf-quality.epic { background: var(--quality-epic); color: var(--white); }
.quality-star-cell { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.quality-star-cell + .lane-cell-value { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); text-align: center; }
/* ====== 10. TIDE SECTION ====== */
.tide-chart-section { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), var(--gray-50)); border-radius: var(--radius-xl); padding: var(--space-xl); margin-top: var(--space-md); border: 1px solid rgba(0, 0, 0, 0.05); animation: slideIn 0.4s ease-out; }
.tide-times { display: flex; gap: var(--space-xl); justify-content: center; flex-wrap: wrap; margin-top: var(--space-lg); }
.tide-group { background: rgba(255, 255, 255, 0.8); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.05); min-width: 200px; }
.tide-group h6 { font-weight: 600; margin-bottom: var(--space-md); font-size: 1rem; }
.tide-badge { background: linear-gradient(135deg, var(--ocean-blue), var(--wave-teal)); color: var(--white); padding: var(--space-sm) var(--space-md); border-radius: 8px; margin: var(--space-xs); display: inline-block; font-weight: 500; box-shadow: 0 2px 8px rgba(26, 111, 160, 0.2); transition: all 0.3s ease; }
.tide-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26, 111, 160, 0.3); }
.tide-badge.low { background: linear-gradient(135deg, var(--text-secondary), var(--gray-600)); }
.tide-curve-container { height: 60px; position: relative; }
.tide-curve { stroke: var(--wave-teal); fill: none; stroke-width: 2; }
.tide-fill { fill: var(--wave-teal); opacity: 0.1; }
.tide-marker { fill: var(--wave-teal); }
/* ====== 11. SETTINGS DROPDOWN ====== */
.settings-dropdown { position: relative; display: flex; align-items: center; }
.settings-btn {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.85);
padding: 6px 12px; border-radius: var(--radius-md); cursor: pointer;
transition: background 0.15s, border-color 0.15s; display: flex; align-items: center;
gap: 6px; font-size: 0.8rem; font-weight: 500; position: relative;
font-family: var(--font-body);
}
.settings-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); color: var(--white); }
.settings-btn.active { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); color: var(--white); }
.settings-btn i.fa-chevron-down { font-size: 0.6rem; opacity: 0.6; transition: transform 0.2s; }
.settings-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--white); color: var(--text-primary); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(15,29,46,0.15); border: 1px solid var(--gray-200); padding: var(--space-md); min-width: 240px; z-index: 1000; display: none; }
.settings-menu.show { display: block; animation: fadeInDown 0.15s ease-out; }
.settings-menu h3 { font-size: 0.85rem; font-weight: 600; margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); }
.settings-group { display: flex; flex-direction: column; gap: 2px; }
.setting-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.setting-item:not(:last-child) { border-bottom: 1px solid var(--gray-100); }
.setting-label { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 500; color: var(--text-primary); }
.setting-label i { width: 14px; color: var(--text-secondary); font-size: 0.8rem; }
.compact-switch { position: relative; width: 40px; height: 20px; background-color: var(--gray-300); border-radius: 10px; transition: all 0.2s ease; cursor: pointer; flex-shrink: 0; }
.compact-switch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background-color: var(--white); border-radius: 50%; transition: all 0.2s ease; box-shadow: var(--shadow-sm); }
.compact-switch.active { background-color: var(--ocean-blue); }
.compact-switch.active::before { transform: translateX(20px); }
.mobile-units-section { display: none; }
.user-icon-btn { background: none; border: none; color: var(--white); font-size: 1.5rem; cursor: pointer; padding: var(--space-sm); border-radius: var(--radius-md); transition: background 0.2s ease; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.user-icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
.user-dropdown-menu { position: absolute; top: 100%; right: 0; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border: 1px solid var(--gray-200); min-width: 250px; margin-top: var(--space-sm); display: none; z-index: 1000; }
.user-dropdown-menu.show { display: block; animation: fadeInDown 0.2s ease-out; }
.user-dropdown-menu h4 { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--gray-200); font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.user-dropdown-item { padding: var(--space-md) var(--space-lg); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray-100); transition: background 0.2s ease; }
.user-dropdown-item:last-child { border-bottom: none; }
.user-dropdown-item:hover { background: var(--bg-secondary); }
/* ====== 12. FORMS ====== */
.btn {
font-family: var(--font-display);
padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); font-weight: 600;
text-decoration: none; transition: all 0.2s ease; border: none; cursor: pointer;
font-size: 0.95rem; display: inline-flex; align-items: center; gap: var(--space-sm);
}
.btn-primary { background: var(--surf-navy); color: var(--white); }
.btn-primary:hover { background: var(--surf-navy-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--white); }
.btn-secondary { background: var(--white); color: var(--surf-navy); border: 1px solid var(--gray-300); }
.btn-secondary:hover { background: var(--bg-secondary); border-color: var(--surf-navy); color: var(--surf-navy); }
.btn-danger { background: var(--quality-poor); color: var(--white); }
.btn-danger:hover { background: var(--quality-poor-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--white); }
.spot-dropdown { width: 100%; padding: var(--space-lg); border: 2px solid var(--border-color); border-radius: var(--radius-md); font-size: 1rem; background: var(--white); transition: border-color 0.3s ease; }
.spot-dropdown:focus { outline: none; border-color: var(--ocean-blue); box-shadow: 0 0 0 3px rgba(26, 111, 160, 0.15); }
.favorite-btn { position: relative; z-index: 2; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: var(--space-sm); border-radius: var(--radius-md); transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.favorite-btn:hover { background: var(--bg-secondary); color: var(--ocean-blue); transform: scale(1.1); }
.favorite-btn.active { color: var(--ocean-blue); }
.favorite-btn i { font-size: 1.25rem; transition: transform 0.2s ease; }
.favorite-btn:active i { transform: scale(0.9); }
.favorites-bar { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-xl); box-shadow: var(--shadow-md); border: 1px solid var(--gray-200); }
.favorites-bar h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); }
.favorites-bar h3 i { color: var(--ocean-blue); }
.favorite-chips { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--bg-secondary); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); color: var(--text-primary); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: all 0.2s ease; }
.chip:hover { background: var(--ocean-blue); color: var(--white); border-color: var(--ocean-blue); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.empty-favorites { text-align: center; padding: var(--space-xl); color: var(--text-secondary); }
.empty-favorites i { font-size: 3rem; color: var(--gray-300); margin-bottom: var(--space-md); }
.empty-favorites p { font-size: 1rem; margin-bottom: var(--space-md); }
.fab-btn { position: fixed; bottom: 80px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-blue-dark)); color: var(--white); border: none; box-shadow: 0 4px 12px rgba(26, 111, 160, 0.3); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 90; }
.fab-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(26, 111, 160, 0.4); }
.fab-btn:active { transform: scale(0.95); }
.fab-btn.active { background: linear-gradient(135deg, var(--wave-teal), var(--ocean-blue)); }
.fab-btn i { transition: transform 0.2s ease; }
.fab-btn:active i { transform: rotate(15deg) scale(1.2); }
.refresh-rankings-btn { background: var(--ocean-blue); color: var(--white); border: none; padding: var(--space-md) var(--space-xl); border-radius: var(--radius-lg); cursor: pointer; font-size: 0.95rem; font-weight: 600; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: var(--space-sm); box-shadow: var(--shadow-sm); }
.refresh-rankings-btn:hover { background: var(--ocean-blue-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* ====== 13. MODALS ====== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 2000; display: none; align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal-content { background: var(--white); border-radius: var(--radius-xl); padding: var(--space-xl); max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--gray-200); }
.modal-close { background: none; border: none; font-size: 1.5rem; color: var(--text-secondary); cursor: pointer; padding: var(--space-sm); min-width: 44px; min-height: 44px; border-radius: var(--radius-md); transition: background 0.2s ease; }
.modal-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
/* ====== 14. FOOTER ====== */
.footer { background: var(--white); border-top: 1px solid var(--gray-200); margin-top: var(--space-2xl); padding: var(--space-2xl) 0; }
.site-footer {
background: var(--gray-900); color: var(--gray-400);
padding: var(--space-2xl) 0 var(--space-xl);
margin-top: var(--space-2xl);
}
.site-footer a { color: var(--gray-300); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.footer-brand { font-family: var(--font-display); color: var(--white); font-size: 1.25rem; margin: 0 0 var(--space-sm); }
.footer-brand i { color: var(--sand); }
.footer-tagline { font-size: 0.85rem; line-height: 1.5; margin: 0; }
.footer-heading { color: var(--gray-200); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--space-md); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: var(--space-sm); }
.footer-links a { font-size: 0.9rem; }
.footer-bottom { border-top: 1px solid var(--gray-700); padding-top: var(--space-lg); margin-top: var(--space-lg); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); font-size: 0.8rem; }
.footer-copyright { color: var(--gray-500); }
.footer-note { color: var(--gray-500); }
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-lg); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-xl); margin-bottom: var(--space-xl); }
.footer-text { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin-bottom: var(--space-md); }
/* ====== 15. UTILITIES ====== */
.skip-nav { position: absolute; top: -100px; left: 0; background: var(--ocean-blue); color: var(--white); padding: var(--space-md) var(--space-lg); text-decoration: none; z-index: 1000; border-radius: 0 0 var(--radius-md) 0; font-weight: 600; }
.skip-nav:focus { top: 0; outline: 3px solid var(--white); outline-offset: 2px; color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }
/* Focus (WCAG AA) */
*:focus-visible { outline: 2px solid var(--ocean-blue); outline-offset: 2px; border-radius: var(--radius-sm); }
.nav-link:focus-visible, .mobile-menu-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; background-color: rgba(255, 255, 255, 0.2); }
.btn:focus-visible { outline: 2px solid var(--ocean-blue); outline-offset: 2px; }
.btn-secondary:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--ocean-blue); outline-offset: 2px; border-radius: var(--radius-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ocean-blue); outline-offset: 2px; border-color: var(--ocean-blue); }
.bottom-nav-item:focus-visible { outline: 2px solid var(--ocean-blue); outline-offset: 2px; }
*:focus:not(:focus-visible) { outline: none; }
/* States */
.loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-2xl); color: var(--text-secondary); min-height: 200px; }
.loading-spinner { width: 48px; height: 48px; border: 4px solid var(--gray-200); border-top-color: var(--ocean-blue); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: var(--space-md); }
.loading { opacity: 0.6; pointer-events: none; }
.loading-overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; z-index: 1000; transition: opacity 0.3s ease; }
.loading-overlay.hidden { opacity: 0; pointer-events: none; }
.error-state { background: var(--gray-50); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; color: var(--text-secondary); }
.error-state i { font-size: 3rem; color: var(--quality-poor); margin-bottom: var(--space-md); }
.empty-state { text-align: center; padding: var(--space-2xl); color: var(--text-secondary); }
.empty-state i { font-size: 3rem; color: var(--gray-400); margin-bottom: var(--space-md); opacity: 0.5; }
/* Skeleton Loading */
.skeleton { background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--white) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: var(--radius-md); }
.skeleton-text { height: 1rem; margin-bottom: var(--space-sm); }
.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-text.long { width: 100%; }
.skeleton-title { height: 1.5rem; width: 70%; margin-bottom: var(--space-md); }
.skeleton-card { padding: var(--space-lg); border-radius: var(--radius-lg); border: 1px solid var(--ocean-blue); }
.skeleton-button { height: 2.5rem; width: 120px; border-radius: var(--radius-md); }
/* Notifications */
.notification { position: fixed; top: 80px; right: 20px; background: var(--white); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); display: flex; align-items: center; gap: var(--space-sm); z-index: 1000; opacity: 0; transform: translateX(400px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); min-width: 250px; border-left: 4px solid var(--ocean-blue); }
.notification.show { opacity: 1; transform: translateX(0); }
.notification i { font-size: 1.25rem; color: var(--ocean-blue); }
.notification-success { border-left-color: var(--quality-epic); }
.notification-success i { color: var(--quality-epic); }
.notification-info { border-left-color: var(--ocean-blue); }
.notification-info i { color: var(--ocean-blue); }
.swipe-indicator { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); color: var(--white); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-lg); font-size: 0.85rem; z-index: 100; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.swipe-indicator.show { opacity: 1; }
/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; max-height: 0; transform: translateY(-10px); } to { opacity: 1; max-height: 100px; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes wave-motion { 0% { background-position: 0 0; } 100% { background-position: 50px 0; } }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.fade-in { animation: fadeIn 0.4s ease-out; }
/* Map */
.map-section { background: rgba(255, 255, 255, 0.95); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); border: 1px solid rgba(255, 255, 255, 0.3); position: relative; margin-bottom: var(--space-xl); }
.map-container { height: 600px; width: 100%; position: relative; }
#surf-map { height: 100%; width: 100%; z-index: 1; }
.map-info { display: flex; justify-content: center; align-items: center; gap: var(--space-md); }
.spot-count { color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.surf-popup { font-family: inherit; min-width: 250px; }
.popup-header { font-size: 1.2rem; font-weight: 700; margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); border-bottom: 2px solid var(--gray-200); padding-bottom: var(--space-sm); }
.popup-conditions { margin-bottom: var(--space-md); }
.conditions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-md); }
.condition-item { text-align: center; }
.surf-rating { text-align: center; padding: var(--space-md); background: var(--bg-secondary); border-radius: var(--radius-lg); margin-bottom: var(--space-md); }
.rating-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-xs); }
.rating-value { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.popup-actions { display: flex; gap: var(--space-sm); }
.popup-btn { background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-blue-dark)); color: var(--white); border: none; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; flex: 1; text-decoration: none; text-align: center; box-shadow: 0 4px 12px rgba(26, 111, 160, 0.3); }
.popup-btn:hover { background: linear-gradient(135deg, var(--ocean-blue-dark), var(--ocean-blue)); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26, 111, 160, 0.4); color: var(--white); }
.wave-marker { background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-blue-dark)); width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 4px 12px rgba(26, 111, 160, 0.4); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; }
.wave-marker:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(26, 111, 160, 0.6); }
/* ====== 16. RESPONSIVE ====== */
/* Desktop Timeline (1024px+) */
@media (min-width: 1024px) {
.timeline-scroll { overflow-x: visible; padding: 0; }
.timeline-grid { display: block; min-width: 0; padding: 0; }
.timeline-hours { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-flow: row; padding-left: 120px; width: 100%; }
.timeline-hour-cell { width: 100%; }
.timeline-lane { display: flex; width: 100%; min-width: 0; }
.lane-label { width: 120px; flex-shrink: 0; position: static; border-right: 1px solid var(--gray-200); }
.lane-cells { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-flow: row; flex: 1 1 0; min-width: 0; }
.lane-cell { width: 100%; }
.nav-menu { gap: var(--space-md); }
.nav-link { font-size: 0.95rem; padding: var(--space-sm) var(--space-lg); }
}
/* Desktop - hide mobile elements */
@media (min-width: 769px) {
.mobile-bottom-nav { display: none !important; }
.mobile-menu-backdrop { display: none !important; }
.fab-btn { bottom: 20px; }
body { padding-bottom: 0; }
}
/* Search icon — only visible on tablet where full search bar is hidden */
.nav-search-icon {
display: none; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.8); font-size: 0.9rem;
cursor: pointer; width: 34px; height: 34px; border-radius: 50%;
align-items: center; justify-content: center;
transition: background .15s, border-color .15s;
}
.nav-search-icon:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.25); color: var(--white); }
/* Hide mobile-only items on wider screens */
/* Mobile units panel in hamburger — pinned to bottom */
.mobile-units-item { margin-top: auto !important; border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-md) !important; }
.mobile-units-panel { padding: 0 var(--space-sm); }
.mobile-units-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.5); font-weight: 600; margin-bottom: 8px; }
.mobile-units-title i { margin-right: 6px; }
.mobile-unit-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: .88rem; color: rgba(255,255,255,.85); }
@media (min-width: 900px) {
.mobile-search-item { display: none !important; }
.mobile-auth-item { display: none !important; }
.mobile-units-item { display: none !important; }
.nav-search-icon { display: none !important; }
}
/* --- Tablet (max-width: 899px) --- */
@media (max-width: 899px) {
.desktop-search-full { display: none !important; }
.nav-search-icon { display: flex; align-items: center; }
.mobile-menu-btn { z-index: 1001; position: relative; flex-shrink: 0; }
}
@media (max-width: 1024px) {
.nav-container { padding: 0 var(--space-md); }
.nav-menu { gap: var(--space-xs); }
.nav-link { font-size: 0.85rem; padding: var(--space-sm); }
.logo { font-size: 1.3rem; }
.logo i { font-size: 1.5rem; }
}
/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
.mobile-bottom-nav { display: flex; }
.bottom-nav-items { display: grid; grid-template-columns: repeat(4, 1fr); }
.bottom-nav-item { min-width: 0; padding: var(--space-sm); }
.bottom-nav-item span { font-size: 0.7rem; }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.nav-container { padding: 0 var(--space-sm); }
.logo span:not(.beta-sticker) { display: inline; font-size: 1.2rem; }
.mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
.desktop-controls { display: none !important; }
.navbar > .settings-dropdown { display: none !important; }
.nav-menu {
position: fixed; top: 64px; left: -100%; width: 100%; max-width: 320px;
height: calc(100vh - 64px);
background: linear-gradient(135deg, var(--ocean-blue) 0%, var(--ocean-blue-dark) 100%);
flex-direction: column; justify-content: flex-start; align-items: stretch;
padding: var(--space-lg) 0; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
gap: var(--space-xs); z-index: 999; overflow-y: auto; overflow-x: hidden;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
}
.nav-menu.active { left: 0; }
.nav-menu li { width: 100%; padding: 0 var(--space-md); }
.nav-menu li.mobile-search-item {
display: block !important; padding: 0 var(--space-md) var(--space-md);
margin-bottom: var(--space-sm); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-link {
display: flex; width: 100%; padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md); font-size: 1rem; min-height: 48px;
align-items: center; justify-content: flex-start; gap: var(--space-md);
}
.nav-link::after { display: none; }
.nav-link.active { background-color: rgba(255, 255, 255, 0.2); font-weight: 600; }
.nav-link i { width: 20px; text-align: center; }
.mobile-search { display: flex !important; width: 100%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-md); position: relative; }
.mobile-search input { flex: 1; width: 100%; color: var(--white); }
.mobile-search input::placeholder { color: rgba(255, 255, 255, 0.7); }
.mobile-search .search-dropdown { position: absolute; top: 100%; left: 0; right: 0; max-height: 50vh; border-radius: 0 0 var(--radius-md) var(--radius-md); border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); z-index: 100; }
.forecast-preview { grid-template-columns: 1fr !important; }
.current-conditions, .spot-details-grid { grid-template-columns: 1fr; }
.spot-card { margin-bottom: var(--space-lg); }
.forecast-table { min-width: 700px; font-size: 0.8rem; }
.forecast-table th, .forecast-table td { padding: 0.4rem 0.2rem; white-space: nowrap; }
.forecast-table th { text-align: center; font-size: 0.7rem; padding: 0.5rem 0.25rem; vertical-align: middle; line-height: 1.1; }
.forecast-table th i { display: block; font-size: 0.9rem; margin-right: 0; margin-bottom: 0.2rem; }
.forecast-table th br { display: inline !important; }
.day-header { padding: var(--space-sm); }
.day-header div { flex-direction: column; align-items: center; gap: var(--space-md); text-align: center; }
.day-header div > div:first-child { display: flex; align-items: center; justify-content: center; flex-direction: row; }
.day-header div > div:last-child { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); flex-direction: row; flex-wrap: nowrap; }
.expand-toggle-btn { font-size: 0.75rem; padding: 0.4rem 0.8rem; min-width: auto; white-space: nowrap; }
.help-icon-link { width: 32px; height: 32px; padding: 0.4rem; }
.surf-size { font-size: 0.8rem; padding: 0.3rem 0.6rem; min-width: auto; }
.surf-quality { font-size: 0.8rem; padding: 0.4rem 0.7rem; min-width: 75px; }
.metric-badge { font-size: 0.7rem; padding: 0.2rem 0.5rem; }
.wind-arrow { font-size: 1rem; margin-left: 0.25rem; }
.quality-badge-large { font-size: 0.85rem; padding: var(--space-sm) var(--space-md); }
.star-rating { gap: 4px; font-size: 1.1rem; }
.timeline-hours, .lane-cells { grid-auto-columns: 70px; }
.lane-label { grid-template-columns: 100px 1fr; font-size: 0.85rem; }
.table-wrapper { margin: 0; padding: 0 var(--space-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.table-wrapper::-webkit-scrollbar { height: 6px; }
.table-wrapper::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 3px; }
.table-wrapper::-webkit-scrollbar-thumb { background: var(--ocean-blue); border-radius: 3px; }
.table-wrapper::-webkit-scrollbar-thumb:hover { background: var(--ocean-blue-dark); }
.tide-chart-section { margin-top: 0; padding: var(--space-lg) var(--space-md); border-radius: var(--radius-lg); }
.tide-times { flex-direction: row; gap: var(--space-md); justify-content: space-between; margin-top: var(--space-md); }
.tide-group { flex: 1; min-width: 0; max-width: calc(50% - 0.5rem); padding: var(--space-md); }
.clickable-table:hover { transform: none; box-shadow: none; }
.btn { min-height: 44px; padding: var(--space-md) var(--space-lg); font-size: 1rem; }
input, select, textarea { min-height: 44px; padding: var(--space-sm) var(--space-md); font-size: 16px; }
input[type="checkbox"], input[type="radio"] { min-height: 44px; min-width: 44px; margin: var(--space-sm); }
.chart-container { height: 300px; padding: var(--space-sm); }
.map-section { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); border-radius: 0; border: none; box-shadow: none; }
.map-container { height: 400px; }
.conditions-grid { grid-template-columns: 1fr; gap: var(--space-sm); }
.popup-btn { padding: var(--space-lg) var(--space-md); font-size: 0.8rem; }
.hero-title { font-size: 2rem; }
.hero-cta { flex-direction: column; gap: var(--space-sm); }
.hero-cta .btn { width: 100%; max-width: 100%; }
.section-header { flex-direction: column; align-items: flex-start; }
.section-actions { flex-wrap: nowrap; gap: var(--space-sm); }
.section-actions .btn { flex: 1; min-width: 0; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.last-updated-content { flex-direction: column; align-items: center; gap: var(--space-sm); }
.update-info { font-size: 0.85rem; }
.notification { top: auto; bottom: 90px; left: 20px; right: 20px; min-width: auto; }
.mobile-units-section .mobile-compact-switch { min-height: auto; min-width: auto; }
.mobile-forecast-cell { min-height: 44px; padding: var(--space-sm); }
}
/* --- Small Mobile (max-width: 480px) --- */
@media (max-width: 480px) {
.nav-container { padding: 0 var(--space-xs); }
.logo i { font-size: 1.5rem; }
.logo span:not(.beta-sticker) { font-size: 1rem; }
.nav-menu { max-width: 100%; }
.bottom-nav-item { font-size: 0.65rem; min-width: 56px; padding: var(--space-xs); }
.bottom-nav-item i { font-size: 1.2rem; }
.bottom-nav-item span { font-size: 0.65rem; }
.stats-grid { grid-template-columns: 1fr; }
.chart-container { height: 280px; padding: var(--space-sm); }
.spot-name { font-size: 1.1rem; }
.spot-meta { flex-direction: column; gap: var(--space-sm); }
.spot-details-grid { gap: var(--space-md); }
}
/* --- Extra Small (max-width: 375px) --- */
@media (max-width: 375px) {
.timeline-hours, .lane-cells { grid-auto-columns: 90px; }
.lane-label { width: 100px; font-size: 0.8rem; }
.lane-cell-value { font-size: 1rem; }
.spot-card { margin-bottom: var(--space-md); }
.bottom-nav-item span { display: none; }
.bottom-nav-item { min-width: 48px; }
.bottom-nav-item i { font-size: 1.4rem; }
.logo span:not(.beta-sticker) { font-size: 0.85rem; }
}
/* ====== HOMEPAGE ====== */
/* ── Hero — full-bleed, data-first ── */
.hm-hero {
background-image: linear-gradient(to bottom, rgba(15,29,46,0.55), rgba(15,29,46,0.7)), url('/static/images/hero.webp');
background-size: 120%;
background-position: center 70%;
background-repeat: no-repeat;
color: var(--white);
position: relative;
overflow: hidden;
}
.hm-hero-inner {
max-width: 1200px;
margin: 0 auto;
padding: clamp(2.5rem, 6vw, 4.5rem) var(--space-lg) 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
.hm-hero-content { padding-bottom: clamp(3rem, 6vw, 5rem); }
.hm-hero-eyebrow {
font-size: 0.82rem; font-weight: 500; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--wave-teal);
margin: 0 0 var(--space-md);
display: flex; align-items: center; gap: 10px;
}
.hm-hero-eyebrow::before {
content: ''; width: 20px; height: 1px;
background: var(--wave-teal); opacity: 0.5;
}
.hm-hero-headline {
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0 0 var(--space-md);
color: var(--white);
}
.hm-hero-sub {
font-size: 0.9rem; font-weight: 400;
color: rgba(232,226,214,0.75);
margin: 0 0 var(--space-lg);
max-width: 380px; line-height: 1.55;
}
/* Hero search */
.hm-hero-search {
position: relative; max-width: 360px;
}
.hm-hero-search input {
width: 100%;
background: rgba(15,29,46,0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 8px;
padding: 0.7rem 1rem 0.7rem 2.6rem;
color: var(--white);
font-size: 1rem; font-weight: 400; /* >=16px prevents iOS zoom */
font-family: var(--font-body);
outline: none;
transition: background 0.2s, border-color 0.2s;
}
.hm-hero-search input::placeholder { color: rgba(255,255,255,0.45); }
.hm-hero-search input:focus {
background: rgba(15,29,46,0.55);
border-color: rgba(255,255,255,0.3);
}
.hm-search-icon {
position: absolute; left: 0.85rem; top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
color: rgba(255,255,255,0.35);
pointer-events: none;
}
.hm-hero-search .home-search-results {
position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
background: var(--white); border-radius: var(--radius-md);
box-shadow: 0 12px 40px rgba(15,29,46,0.25); overflow: hidden;
}
.home-search-result {
display: flex; justify-content: space-between; align-items: center;
padding: 0.65rem 1rem;
color: var(--text-primary); text-decoration: none;
border-bottom: 1px solid var(--gray-100);
transition: background 0.1s;
}
.home-search-result:last-child { border-bottom: none; }
.home-search-result:hover { background: var(--gray-50); }
.home-search-result-name { font-weight: 600; font-size: 0.85rem; }
.home-search-result-region { font-size: 0.7rem; color: var(--text-secondary); }
/* Hero region tiles — the first data a surfer sees */
.hm-hero-regions {
display: flex; flex-direction: column; gap: 8px;
padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hm-region-tile {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 10px;
text-decoration: none;
color: var(--surf-navy);
box-shadow: 0 2px 8px rgba(15,29,46,0.12);
transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.hm-region-tile:hover {
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.25);
transform: translateY(-1px);
}
.hm-region-name {
font-family: var(--font-display);
font-size: 1rem; font-weight: 600;
color: var(--white);
}
.hm-region-detail {
font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.5);
}
.hm-hero-regions .hm-hero-search {
max-width: 100%;
margin-top: 4px;
}
/* Hero wave divider */
.hm-hero-wave {
display: block; width: 100%; height: 40px;
position: relative; z-index: 1;
}
/* ── Body container ── */
.hm-body {
max-width: 1200px; margin: 0 auto;
padding: var(--space-lg) var(--space-md);
}
/* ── Favourites ── */
.home-favourites {
background: var(--white); border-radius: var(--radius-lg);
padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg);
border: 1px solid var(--gray-200);
}
.home-section-label {
font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-secondary);
margin: 0 0 var(--space-sm);
}
.home-fav-chips { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.home-fav-chip {
display: inline-block; padding: 0.35rem 0.9rem;
background: var(--gray-50); border-radius: 100px;
font-size: 0.8rem; font-weight: 500; color: var(--text-primary);
text-decoration: none; border: 1px solid var(--gray-200);
transition: all 0.15s ease;
}
.home-fav-chip:hover { background: var(--surf-navy); color: var(--white); border-color: var(--surf-navy); }
.home-fav-empty { text-align: center; padding: var(--space-sm); color: var(--text-secondary); font-size: 0.85rem; }
.home-fav-empty p { margin: 0; }
/* ── Section header ── */
.home-section-header {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: var(--space-md);
}
.home-section-title {
font-family: var(--font-display);
font-size: 1.35rem; font-weight: 400; color: var(--text-primary);
margin: 0; letter-spacing: -0.01em;
}
.home-view-all {
font-size: 0.8rem; font-weight: 600; color: var(--text-secondary);
text-decoration: none; white-space: nowrap;
transition: color 0.15s ease;
}
.home-view-all:hover { color: var(--ocean-blue); }
/* Typed spot animation */
.hm-typed-spot {
color: var(--wave-teal);
border-right: 2px solid var(--wave-teal);
animation: blink-caret 0.7s step-end infinite;
display: inline-block;
min-width: 1px;
line-height: inherit;
}
.hm-typed-spot::after {
content: '\00a0';
visibility: hidden;
}
@keyframes blink-caret {
50% { border-color: transparent; }
}
/* Hero updated timestamp */
.hm-hero-updated {
display: block; margin-top: 6px;
font-size: 0.75rem; font-weight: 500;
color: rgba(232,226,214,0.35);
}
/* Quality legend */
.hm-quality-legend {
display: flex; gap: 14px; flex-wrap: wrap;
margin-bottom: 14px;
font-size: 0.72rem; color: var(--text-secondary);
}
.hm-legend-item {
display: flex; align-items: center; gap: 5px;
font-weight: 500;
}
.hm-legend-dot {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0;
}
.hm-legend-epic { background: var(--quality-epic); }
.hm-legend-very-good { background: var(--quality-very-good); }
.hm-legend-good { background: var(--quality-good); }
.hm-legend-fair { background: var(--quality-fair); }
.hm-legend-poor { background: var(--quality-poor); }
/* Safety note */
.hm-safety-note {
display: flex; align-items: center; gap: 8px;
margin-top: 14px;
font-size: 0.78rem; color: var(--text-secondary);
line-height: 1.4;
}
.hm-safety-note svg { flex-shrink: 0; color: var(--sand-muted); }
/* ── Spot cards ── */
.hm-spots { margin-bottom: var(--space-xl); }
.hm-spot-grid {
display: grid;
grid-template-columns: 1fr; /* mobile-first: 1 column */
gap: 18px;
}
/* Card shell */
.hm-card {
position: relative;
background: var(--white);
border-radius: 16px;
overflow: hidden;
display: flex; flex-direction: column;
border: 1px solid var(--gray-200);
transition: box-shadow 0.2s, transform 0.2s;
}
.hm-card-link {
position: absolute; inset: 0; z-index: 1;
text-decoration: none; color: inherit;
}
.hm-card-link:focus-visible {
outline: 2px solid var(--ocean-blue); outline-offset: 2px;
border-radius: 16px;
}
.hm-card:hover {
border-color: var(--gray-300);
box-shadow: 0 8px 28px rgba(15,29,46,0.1);
transform: translateY(-2px);
}
/* ── Top: name + quality badge ── */
.hm-card-top {
display: flex; justify-content: space-between;
align-items: flex-start; gap: 12px;
padding: 20px 22px 0;
}
.hm-card-top-left { min-width: 0; }
.hm-card-name {
font-family: var(--font-display);
font-size: 1.15rem; font-weight: 600;
margin: 0; line-height: 1.2;
color: var(--text-primary);
}
.hm-card-meta {
font-size: 0.78rem;
color: var(--text-secondary);
display: block; margin-top: 4px;
}
.hm-card-quality {
flex-shrink: 0; font-size: 0.72rem; font-weight: 700;
padding: 5px 12px; border-radius: 8px;
white-space: nowrap; line-height: 1.2;
letter-spacing: 0.01em;
}
/* ── Key stats: waves / period / wind ── */
.hm-card-stats {
display: flex;
gap: 0;
padding: 18px 22px 16px;
border-bottom: 1px solid var(--gray-100);
}
.hm-kv {
flex: 1;
text-align: center;
padding: 0 4px;
border-right: 1px solid var(--gray-100);
}
.hm-kv:last-child { border-right: none; }
.hm-kv-val {
font-family: var(--font-display);
font-size: 1.65rem; font-weight: 400;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
line-height: 1.1;
display: block;
}
.hm-kv-val small {
font-size: 0.48em;
color: var(--text-secondary);
font-weight: 400;
}
.hm-kv-label {
font-size: 0.72rem;
color: var(--text-secondary);
font-weight: 500;
line-height: 1.3;
display: block;
margin-top: 4px;
}
/* Wind class tag — sits in card meta line */
.hm-wind-tag {
font-size: 0.72rem; font-weight: 600;
}
.hm-wind-tag.wind-offshore { color: #059669; }
.hm-wind-tag.wind-cross-off { color: #10b981; }
.hm-wind-tag.wind-cross { color: #b45309; }
.hm-wind-tag.wind-cross-on { color: #c2410c; }
.hm-wind-tag.wind-onshore { color: #dc2626; }
/* ── Upcoming hours ── */
.hm-card-upcoming {
padding: 14px 22px 0;
}
.hm-card-upcoming-label {
font-size: 0.65rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-secondary);
display: block; margin-bottom: 8px;
}
.hm-card-hours {
display: flex; gap: 0;
background: var(--bg-secondary);
border-radius: 10px;
overflow: hidden;
}
.hm-hour {
flex: 1; text-align: center;
padding: 10px 4px;
border-right: 1px solid var(--gray-200);
}
.hm-hour:last-child { border-right: none; }
.hm-hour-time {
display: block; font-size: 0.7rem;
color: var(--text-secondary); font-weight: 600;
margin-bottom: 4px;
}
.hm-hour-val {
display: block; font-family: var(--font-display);
font-size: 1.05rem; font-weight: 400;
color: var(--surf-navy);
}
/* ── Footer: tide + fav ── */
.hm-card-foot {
display: flex; justify-content: space-between;
align-items: center; gap: 8px;
padding: 14px 22px 16px;
margin-top: auto;
}
.hm-card-tide {
display: flex; gap: 14px;
font-size: 0.8rem; color: var(--text-secondary);
font-weight: 500;
}
.hm-card-tide span {
display: flex; align-items: center; gap: 4px;
}
/* ── Responsive ── */
@media (max-width: 960px) {
.hm-spot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
.hm-spot-grid { grid-template-columns: repeat(3, 1fr); }
.hm-spot-grid.hm-grid-1 { grid-template-columns: 1fr; max-width: 480px; }
.hm-spot-grid.hm-grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 601px) and (max-width: 959px) {
.hm-spot-grid.hm-grid-1 { grid-template-columns: 1fr; max-width: 400px; }
}
@media (max-width: 600px) {
.hm-spot-grid { grid-template-columns: 1fr; }
.hm-card:hover { transform: none; }
.hm-card-top { padding: 18px 18px 0; }
.hm-card-stats { padding: 16px 18px 14px; }
.hm-card-upcoming { padding: 12px 18px 0; }
.hm-card-foot { padding: 12px 18px 14px; }
.hm-kv-val { font-size: 1.45rem; }
}
/* Quality badge colors */
.quality-epic { background: var(--quality-epic); color: var(--white); }
.quality-very-good { background: var(--quality-very-good); color: var(--white); }
.quality-good { background: var(--quality-good); color: var(--white); }
.quality-fair { background: var(--quality-fair); color: var(--white); }
.quality-poor { background: var(--quality-poor); color: var(--white); }
/* ── How it works ── */
.hm-how {
background: var(--bg-tertiary);
margin: 0 calc(-50vw + 50%);
padding: clamp(3rem, 6vw, 4.5rem) var(--space-lg);
margin-bottom: var(--space-2xl);
}
.hm-how-header {
max-width: 620px; margin: 0 auto var(--space-2xl);
text-align: center;
}
.hm-how-eyebrow {
font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ocean-blue);
margin: 0 0 var(--space-sm);
}
.hm-how-title {
font-family: var(--font-display);
font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 400;
color: var(--text-primary); margin: 0 0 var(--space-md);
letter-spacing: -0.01em; line-height: 1.2;
}
.hm-how-desc {
font-size: 0.92rem; line-height: 1.65; color: var(--text-secondary);
margin: 0;
}
/* Steps */
.hm-how-steps {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2.5vw, 28px);
max-width: 960px; margin: 0 auto var(--space-2xl);
}
.hm-step {
background: var(--white);
border-radius: 10px; padding: clamp(20px, 2.5vw, 28px);
border: 1px solid var(--gray-200);
position: relative;
}
.hm-step-num {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: var(--surf-navy); color: var(--white);
font-family: var(--font-display); font-size: 0.85rem; font-weight: 400;
margin-bottom: 14px; flex-shrink: 0;
}
.hm-step-title {
font-family: var(--font-display);
font-size: 1.05rem; font-weight: 600;
color: var(--text-primary); margin: 0 0 8px;
line-height: 1.25;
}
.hm-step-desc {
font-size: 0.84rem; line-height: 1.6; color: var(--text-secondary);
margin: 0;
}
/* Fact stats */
.hm-how-facts {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 10px; max-width: 640px; margin: 0 auto;
}
.hm-fact {
background: var(--white);
border-radius: 8px; padding: 16px 12px;
border: 1px solid var(--gray-200);
text-align: center;
}
.hm-fact-num {
font-family: var(--font-display);
font-size: 1.6rem; font-weight: 400;
color: var(--surf-navy); line-height: 1;
display: block; margin-bottom: 5px;
}
.hm-fact-label {
font-size: 0.65rem; color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.04em;
font-weight: 600; line-height: 1.3;
}
/* ── Region links ── */
.hm-regions { margin-bottom: var(--space-2xl); }
.hm-regions-header { margin-bottom: var(--space-lg); }
.hm-regions-sub {
font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5;
margin: 6px 0 0; max-width: 480px;
}
.hm-region-grid {
display: flex; flex-direction: column; gap: 0;
border: 1px solid var(--gray-200);
border-radius: 10px; overflow: hidden;
background: var(--white);
}
.hm-region-link {
display: flex; align-items: center; gap: var(--space-md);
padding: 18px 22px;
text-decoration: none; color: var(--text-primary);
border-bottom: 1px solid var(--gray-100);
transition: background 0.12s;
}
.hm-region-link:last-child { border-bottom: none; }
.hm-region-link:hover { background: var(--gray-50); }
.hm-region-link-name {
font-family: var(--font-display);
font-size: 1.05rem; font-weight: 600; flex: 1;
}
.hm-region-link-meta {
display: flex; align-items: center; gap: 10px;
}
.hm-region-link-count {
font-size: 0.8rem; color: var(--text-secondary);
}
.hm-region-link svg {
color: var(--gray-300);
transition: transform 0.15s, color 0.15s;
flex-shrink: 0;
}
.hm-region-link:hover svg { transform: translateX(3px); color: var(--ocean-blue); }
/* ── Signup prompt (logged out, no favourites) ── */
.hm-signup-prompt {
background: linear-gradient(135deg, rgba(14,116,144,0.06), rgba(15,29,46,0.04));
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
margin-bottom: var(--space-xl);
overflow: hidden;
}
.hm-signup-inner {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-lg); padding: var(--space-lg) var(--space-xl);
}
.hm-signup-title {
font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
margin: 0 0 4px; color: var(--text-primary);
}
.hm-signup-desc {
font-size: 0.85rem; color: var(--text-secondary); margin: 0; max-width: 480px;
}
@media (max-width: 768px) {
.hm-signup-inner { flex-direction: column; text-align: center; padding: var(--space-lg); }
}
/* ── Community photo strip ── */
.hm-photos { margin-bottom: var(--space-xl); }
.hm-photo-strip {
display: flex; gap: 8px; overflow-x: auto;
padding: 0 0 var(--space-sm);
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hm-photo-strip::-webkit-scrollbar { display: none; }
.hm-photo-item {
flex: 0 0 auto; height: 200px; position: relative;
border-radius: var(--radius-md); overflow: hidden;
}
.hm-photo-item img {
height: 100%; width: auto; display: block; object-fit: cover;
min-width: 150px;
}
.hm-photo-caption {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 24px 10px 8px;
background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
font-size: 0.7rem; color: var(--white); line-height: 1.3;
}
.hm-photo-spot {
position: absolute; top: 8px; left: 8px;
font-size: 0.6rem; font-weight: 600; color: var(--white);
background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
padding: 2px 8px; border-radius: 4px; text-decoration: none;
}
.hm-photo-spot:hover { background: rgba(0,0,0,0.6); }
@media (max-width: 768px) {
.hm-photo-item { height: 160px; }
}
/* ── Regional summary ── */
.hm-region-summary-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.hm-region-summary-card {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--radius-md); padding: 16px;
text-decoration: none; color: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.hm-region-summary-card:hover {
border-color: var(--gray-300); box-shadow: var(--shadow-sm);
}
.hm-rs-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 10px;
}
.hm-rs-name {
font-family: var(--font-display); font-size: 1rem; font-weight: 600;
color: var(--text-primary);
}
.hm-rs-count { font-size: 0.72rem; color: var(--text-muted); }
.hm-rs-best { margin-bottom: 6px; }
.hm-rs-best-label {
font-size: 0.6rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 3px;
}
.hm-rs-best-info {
display: flex; justify-content: space-between; align-items: center;
}
.hm-rs-spot-name { font-size: 0.82rem; font-weight: 500; color: var(--text-primary); }
.hm-rs-stats { display: flex; align-items: center; gap: 6px; }
.hm-rs-quality {
font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 4px;
}
.hm-rs-wave { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; }
.hm-rs-firing {
font-size: 0.7rem; color: var(--quality-epic); font-weight: 600;
}
/* ── Feature showcase ── */
.hm-features { margin-bottom: var(--space-xl); }
.hm-feature-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 12px; margin-bottom: var(--space-lg);
}
.hm-feature-card {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--radius-md); padding: 20px;
transition: border-color 0.15s;
}
.hm-feature-card:hover { border-color: var(--gray-300); }
.hm-feature-icon {
width: 36px; height: 36px; border-radius: 8px;
background: rgba(14,116,144,0.08); color: var(--ocean-blue);
display: flex; align-items: center; justify-content: center;
font-size: 0.9rem; margin-bottom: 12px;
}
.hm-feature-title {
font-family: var(--font-display); font-size: 0.9rem; font-weight: 600;
color: var(--text-primary); margin: 0 0 4px;
}
.hm-feature-desc {
font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; margin: 0;
}
@media (max-width: 768px) {
.hm-feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.hm-feature-grid { grid-template-columns: 1fr; }
}
/* ── CTA strip ── */
.hm-cta {
background: var(--surf-navy);
margin: 0 calc(-50vw + 50%);
padding: clamp(2.5rem, 5vw, 3.5rem) var(--space-lg);
text-align: center;
margin-bottom: var(--space-2xl);
color: var(--white);
}
.hm-cta-title {
font-family: var(--font-display);
font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 400;
margin: 0 0 8px; letter-spacing: -0.01em;
color: var(--white);
}
.hm-cta-desc {
font-size: 0.9rem; color: rgba(232,226,214,0.55);
margin: 0 0 var(--space-lg); line-height: 1.5;
}
.hm-cta-actions {
display: flex; gap: 10px;
justify-content: center; flex-wrap: wrap;
}
.hm-cta-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 12px 28px; border-radius: 8px;
font-size: 0.88rem; font-weight: 500;
text-decoration: none; cursor: pointer;
transition: background 0.15s, border-color 0.15s;
min-height: 48px;
}
.hm-cta-btn--primary {
background: var(--white); color: var(--surf-navy);
}
.hm-cta-btn--primary:hover { background: var(--sand-light); color: var(--surf-navy); }
.hm-cta-btn--secondary {
background: transparent; color: rgba(232,226,214,0.7);
border: 1px solid rgba(255,255,255,0.15);
}
.hm-cta-btn--secondary:hover {
border-color: rgba(255,255,255,0.3);
color: var(--white);
}
/* ── FAQ ── */
.hm-faq { margin-bottom: var(--space-2xl); }
.hm-faq .home-section-title { margin-bottom: var(--space-lg); }
/* ── Homepage responsive ── */
@media (max-width: 768px) {
.hm-hero {
background-size: cover;
background-position: center 40%;
}
.hm-hero-inner {
grid-template-columns: 1fr;
padding: var(--space-xl) var(--space-md) 0;
}
.hm-hero-content { padding-bottom: var(--space-lg); }
.hm-hero-regions { padding-bottom: clamp(2rem, 4vw, 3rem); }
.hm-hero-headline { font-size: clamp(1.8rem, 7vw, 2.4rem); }
.hm-hero-search { max-width: 100%; }
.hm-body { padding: var(--space-md) var(--space-sm); }
.hm-spot-grid { grid-template-columns: 1fr; }
.hm-how { margin-left: calc(-1 * var(--space-sm)); margin-right: calc(-1 * var(--space-sm)); }
.hm-how-steps { grid-template-columns: 1fr; gap: 12px; }
.hm-how-facts { grid-template-columns: repeat(2, 1fr); }
.hm-cta { margin-left: calc(-1 * var(--space-sm)); margin-right: calc(-1 * var(--space-sm)); }
.hm-cta-actions { flex-direction: column; align-items: stretch; }
.hm-cta-btn { width: 100%; }
}
@media (max-width: 480px) {
.hm-hero-inner { padding: var(--space-lg) var(--space-sm) 0; }
.hm-stat-val { font-size: 0.95rem; }
.hm-stat--hero .hm-stat-val { font-size: 1.15rem; }
.hm-how-facts { gap: 6px; }
.hm-fact { padding: 12px 8px; }
.hm-fact-num { font-size: 1.3rem; }
}
/* ====== FORECAST PAGE ====== */
/* ── Spot hero — full-bleed dark ── */
.fc-hero {
background-image: linear-gradient(to bottom, rgba(15,29,46,0.55), rgba(15,29,46,0.7)), url('/static/images/hero.webp');
background-size: 120%;
background-position: center 70%;
background-repeat: no-repeat;
color: var(--white);
position: relative;
}
.fc-hero-inner {
max-width: 1000px; margin: 0 auto;
padding: 0 var(--space-lg);
}
.fc-hero-wave {
display: block; width: 100%; height: 40px;
position: relative; z-index: 1;
}
/* Breadcrumb on dark */
.fc-hero-breadcrumb {
display: flex; align-items: center; gap: 6px;
font-size: 0.78rem;
padding-top: clamp(1.2rem, 3vw, 2rem);
margin-bottom: var(--space-lg);
}
.fc-hero-breadcrumb a {
color: rgba(232,226,214,0.45);
text-decoration: none; transition: color 0.15s;
}
.fc-hero-breadcrumb a:hover { color: var(--white); }
.fc-hero-breadcrumb span { color: rgba(232,226,214,0.3); }
.fc-hero-breadcrumb span:last-child { color: rgba(232,226,214,0.65); }
/* ── Two-column hero layout ── */
/* Hero name row */
.fc-hero-name-row {
display: flex; justify-content: space-between;
align-items: flex-start; gap: 12px; margin-bottom: 20px;
}
.fc-hero-name {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 400;
margin: 0; line-height: 1.1; color: var(--white);
}
.fc-hero-meta {
font-size: 0.75rem; color: rgba(232,226,214,0.4);
display: block; margin-top: 5px;
}
.favorite-btn--dark { color: rgba(232,226,214,0.4); font-size: 1.2rem; }
.favorite-btn--dark:hover { color: var(--white); }
/* Primary block: wave height + sparkline */
.fc-hero-primary {
display: flex; align-items: center;
gap: clamp(20px, 4vw, 40px);
margin-bottom: 20px;
}
.fc-hero-wave-block {
display: flex; align-items: center; gap: 14px;
flex-shrink: 0;
}
.fc-hero-wave-big {
display: flex; align-items: baseline; gap: 2px;
}
.fc-hero-wave-val {
font-family: var(--font-display);
font-size: clamp(3.5rem, 10vw, 5rem); font-weight: 400;
color: var(--white); line-height: 1;
font-variant-numeric: tabular-nums;
}
.fc-hero-rating {
display: flex; flex-direction: column;
align-items: flex-start; gap: 6px;
}
.fc-hero-stars { font-size: 1.1rem; }
.fc-hero-stars .star-rating { display: flex; gap: 2px; }
.fc-hero-stars .star.filled,
.fc-hero-stars .star.half { color: var(--white); }
.fc-hero-stars .star { color: rgba(232,226,214,0.15); font-size: 1.1rem; }
.fc-hero-quality {
font-size: 0.78rem; font-weight: 700;
padding: 5px 14px; border-radius: 6px; white-space: nowrap;
}
/* 24hr sparkline */
.fc-hero-sparkline {
flex: 1; min-width: 120px;
position: relative;
}
.fc-hero-sparkline-wrap {
position: relative; width: 100%; height: 110px;
}
.fc-hero-sparkline-label {
position: absolute; top: -2px; right: 0; z-index: 1;
font-size: 0.6rem; color: rgba(232,226,214,0.3);
text-transform: uppercase; letter-spacing: 0.05em;
}
/* Conditions bar: 4 cards */
.fc-hero-conditions {
display: flex; gap: 2px;
background: rgba(255,255,255,0.04);
border-radius: 10px; overflow: hidden;
margin-bottom: 14px;
}
.fc-hero-conditions > .fc-hero-cond-card { flex: 1 1 0; min-width: 0; }
.fc-hero-cond-card {
padding: 12px 14px;
background: rgba(255,255,255,0.03);
}
.fc-hero-cond-title {
display: block; font-size: 0.6rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: rgba(232,226,214,0.55); margin-bottom: 6px;
}
.fc-hero-cond-main {
display: flex; align-items: center; gap: 5px;
color: rgba(232,226,214,0.85); margin-bottom: 3px;
}
.fc-hero-cond-main strong {
font-family: var(--font-display);
font-size: 1.1rem; font-weight: 600; color: var(--white);
font-variant-numeric: tabular-nums;
}
.fc-hero-cond-main span {
font-size: 0.8rem; color: rgba(255,255,255,0.8);
}
.fc-hero-cond-gust {
font-size: 0.75rem !important; color: rgba(255,255,255,0.7) !important;
font-weight: 400 !important;
}
.fc-hero-cond-gust::before { content: '/ '; }
.fc-hero-cond-detail {
display: block; font-size: 0.72rem; color: rgba(255,255,255,0.7);
line-height: 1.3;
}
/* Hero quick facts */
.fc-hero-facts {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 14px;
}
.fc-hero-fact {
font-size: 0.7rem; font-weight: 500;
color: rgba(232,226,214,0.55);
background: rgba(255,255,255,0.06);
padding: 4px 10px; border-radius: 20px;
}
.fc-hero-desc {
font-size: 0.85rem; color: rgba(232,226,214,0.7);
line-height: 1.55; margin: 8px 0 0; max-width: 600px;
}
/* Spot description — expandable */
.fc-hero-about {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.fc-hero-about-text {
font-size: 0.88rem;
color: rgba(232,226,214,0.72);
line-height: 1.65;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fc-hero-about-text--expanded {
-webkit-line-clamp: unset;
display: block;
}
.fc-hero-about-toggle {
background: none; border: none; cursor: pointer;
font-size: 0.78rem; font-weight: 600;
color: var(--wave-teal);
padding: 6px 0 0; margin: 0;
font-family: var(--font-body);
}
.fc-hero-about-toggle:hover { color: var(--white); }
/* ── Tab navigation ── */
.fc-tabs {
background: var(--white);
border-bottom: 1px solid var(--gray-200);
position: sticky; top: 56px; z-index: 50;
}
.fc-tabs-inner {
max-width: 1000px; margin: 0 auto;
display: flex; align-items: center; gap: 0;
padding: 0 var(--space-lg);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.fc-tabs-inner::-webkit-scrollbar { display: none; }
.fc-tab {
padding: 14px 16px;
font-size: 0.82rem; font-weight: 600;
color: var(--text-secondary);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.fc-tab:hover { color: var(--text-primary); }
.fc-tab--active {
color: var(--surf-navy);
border-bottom-color: var(--surf-navy);
}
.fc-tab-select {
margin-left: auto;
padding: 6px 12px; border: 1px solid var(--gray-300);
border-radius: 6px; font-size: 1rem; font-family: var(--font-body); /* >=16px prevents iOS zoom */
background: var(--white); color: var(--text-secondary);
cursor: pointer;
}
/* Section labels */
.fc-section {
margin-bottom: var(--space-xl);
scroll-margin-top: 120px;
}
.fc-section-label {
display: block;
font-size: 0.7rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-secondary);
margin-bottom: 10px;
}
/* Page body */
.fc-page {
max-width: 1000px; margin: 0 auto;
padding: var(--space-md) var(--space-lg);
}
.fc-spot-select {
padding: 8px 14px; border: 1px solid var(--gray-300);
border-radius: 8px; font-size: 1rem; font-family: var(--font-body); /* >=16px prevents iOS zoom */
background: var(--white); color: var(--text-primary);
cursor: pointer; min-height: 40px;
}
/* Section labels */
.fc-section { margin-bottom: var(--space-lg); }
.fc-section-label {
display: block;
font-size: 0.7rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-secondary);
margin-bottom: 10px;
}
/* AI Overview */
.fc-ai-overview {
background: var(--bg-secondary);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 20px;
margin-bottom: var(--space-lg);
}
.fc-ai-overview-header {
font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--ocean-blue);
margin-bottom: var(--space-xs);
}
.fc-ai-overview-header i { margin-right: 0.3em; }
.fc-ai-overview-text {
font-size: 0.9rem; line-height: 1.6; color: var(--text-primary);
margin: 0;
}
/* Skeleton loader */
.fc-ai-wizard-msg {
font-size: 0.8rem; color: var(--ocean-blue); font-style: italic;
margin: 0 0 0.4rem 0; opacity: 0.8;
animation: ai-fade 0.4s ease-in-out;
}
@keyframes ai-fade { from { opacity: 0; } to { opacity: 0.8; } }
.fc-ai-skeleton { display: flex; flex-direction: column; gap: 0.4rem; }
.fc-ai-skeleton-line {
height: 0.55rem; border-radius: 4px;
background: linear-gradient(90deg, rgba(26,111,160,0.08) 25%, rgba(26,111,160,0.18) 50%, rgba(26,111,160,0.08) 75%);
background-size: 200% 100%;
animation: ai-shimmer 1.5s ease-in-out infinite;
width: 100%;
}
.fc-ai-skeleton-line--med { width: 85%; }
.fc-ai-skeleton-line--short { width: 60%; }
@keyframes ai-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Chart tabs */
.fc-chart-tabs {
display: flex; gap: 0; margin-bottom: 0;
border-bottom: 2px solid var(--gray-200);
}
.fc-chart-tab {
padding: 10px 20px; font-size: 0.82rem; font-weight: 600;
color: var(--text-secondary); background: none; border: none;
cursor: pointer; position: relative;
font-family: var(--font-display);
transition: color 0.15s;
}
.fc-chart-tab:hover { color: var(--text-primary); }
.fc-chart-tab--active {
color: var(--surf-navy);
}
.fc-chart-tab--active::after {
content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
height: 2px; background: var(--surf-navy);
}
/* Chart */
.fc-chart-wrap {
background: var(--white); border-radius: 0 0 12px 12px;
border: 1px solid var(--gray-200); border-top: none;
padding: var(--space-md);
height: 260px; position: relative;
}
.fc-chart-wrap:last-child { margin-bottom: var(--space-lg); }
/* Day cards */
.fc-days { display: flex; flex-direction: column; gap: 12px; }
.fc-day {
background: var(--white); border-radius: 12px;
border: 1px solid var(--gray-200); overflow: hidden;
}
/* Paywall blur for non-logged-in users */
.fc-locked { filter: blur(6px); pointer-events: none; user-select: none; }
.fc-strip-card.fc-locked { filter: blur(4px); pointer-events: none; }
.fc-paywall-gate { position: relative; }
.fc-paywall-blur { filter: blur(6px); pointer-events: none; user-select: none; }
.fc-paywall-prompt {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
text-align: center; z-index: 10; background: rgba(255,255,255,0.92);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg);
box-shadow: 0 8px 32px rgba(15,29,46,0.12); max-width: 380px; width: 90%;
}
.fc-paywall-prompt i { font-size: 1.4rem; color: var(--ocean-blue); margin-bottom: 10px; }
.fc-paywall-prompt h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; margin-bottom: 8px; }
.fc-paywall-prompt p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; }
.fc-paywall-btn {
display: inline-block; padding: 10px 28px; background: var(--ocean-blue); color: #fff;
border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600;
text-decoration: none; transition: background 0.15s;
}
.fc-paywall-btn:hover { background: #0c5f75; color: #fff; }
.fc-ai-locked { filter: blur(6px); pointer-events: none; user-select: none; }
.fc-day-header {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 20px;
background: var(--surf-navy);
color: var(--white); cursor: pointer; user-select: none;
transition: background 0.15s;
}
.fc-day-header:hover { background: #162a3e; }
.fc-day-title {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; font-size: 0.95rem;
}
.fc-day-date {
font-family: var(--font-display);
font-weight: 600; font-size: 1rem;
}
.fc-day-badge {
font-size: 0.7rem; font-weight: 700; padding: 3px 10px;
border-radius: 100px; background: rgba(255,255,255,0.15);
}
.fc-day-quality { background: none; }
.fc-day-best {
background: var(--quality-epic) !important;
}
.fc-day-chevron { transition: transform 0.2s ease; font-size: 0.85rem; opacity: 0.7; }
/* Hour rows (grid layout) */
.fc-hours { font-size: 0.95rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fc-hour-row {
display: grid;
grid-template-columns: 58px 78px 80px 1fr 1fr 1fr 1fr;
align-items: center;
border-bottom: 1px solid var(--gray-100);
}
.fc-hour-row > div {
padding: 10px 8px;
display: flex; align-items: center; gap: 5px;
min-width: 0; overflow: hidden;
}
.fc-hour-head {
background: var(--bg-secondary); font-weight: 600; font-size: 0.72rem;
text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary);
border-bottom: 2px solid var(--gray-200);
}
.fc-hour-head > div { padding: 10px 8px; }
.fc-hour-row:last-child { border-bottom: none; }
/* Row quality tinting */
.fc-row-q-epic { background: rgba(45,122,79,0.1); }
.fc-row-q-very-good { background: rgba(61,144,96,0.08); }
.fc-row-q-good { background: rgba(184,134,11,0.07); }
.fc-row-q-fair { background: rgba(194,106,47,0.05); }
.fc-row-q-poor { background: rgba(168,50,50,0.04); }
/* Stars in table */
.fc-h-stars { justify-content: center; overflow: hidden; }
.fc-h-stars .star-rating { font-size: 0.75rem; gap: 1px; display: flex; }
.fc-h-stars .star { font-size: 0.75rem; color: var(--gray-300); }
.fc-h-stars .star.filled { color: var(--text-primary); }
.fc-h-stars .star.half { color: var(--text-primary); }
/* Direction arrows */
.fc-dir-arrow {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.fc-dir-arrow--swell { color: var(--ocean-blue); }
.fc-dir-arrow--wind { color: var(--text-secondary); }
.fc-h-time strong {
font-family: var(--font-display);
font-size: 0.95rem; font-weight: 600;
}
.fc-val-big {
font-family: var(--font-display);
font-weight: 400; color: var(--surf-navy);
font-size: 1.15rem;
font-variant-numeric: tabular-nums;
}
/* Wind cell */
.fc-h-wind {
flex-direction: column; align-items: flex-start !important;
gap: 1px !important;
}
.fc-wind-top {
display: flex; align-items: center; gap: 4px;
}
.fc-wind-nums {
display: flex; align-items: baseline; gap: 4px;
font-variant-numeric: tabular-nums;
}
.fc-wind-sustained {
font-weight: 600; font-size: 0.88rem; color: var(--text-primary);
}
.fc-wind-sustained small { font-weight: 400; font-size: 0.7rem; color: var(--text-secondary); }
.fc-wind-gust {
font-size: 0.75rem; color: var(--text-tertiary); font-weight: 400;
}
.fc-h-wind .hm-wind-tag {
font-size: 0.65rem; white-space: nowrap;
}
.fc-head-light {
font-weight: 400; color: var(--text-tertiary); text-transform: none;
}
.fc-no-data { color: var(--gray-300); }
/* Weather cell */
.fc-h-weather {
flex-direction: column; align-items: center !important;
gap: 2px !important;
font-size: 0.82rem; color: var(--text-secondary);
text-align: center;
}
.fc-weather-icon {
font-size: 1rem; color: var(--text-primary);
}
.fc-weather-temp {
font-weight: 600; font-size: 0.85rem; color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.fc-weather-precip {
font-size: 0.7rem; color: var(--ocean-blue);
}
/* Empty state */
.fc-empty {
text-align: center; padding: var(--space-2xl);
color: var(--text-secondary);
}
.fc-empty i { font-size: 2rem; color: var(--gray-300); margin-bottom: var(--space-md); display: block; }
.fc-empty p { margin: 0 0 var(--space-xs); }
.fc-empty-sub { font-size: 0.85rem; }
/* ====== SPOT GUIDE ====== */
.sg {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: 16px; overflow: hidden;
}
.sg-header {
background: var(--surf-navy); color: var(--white);
padding: 28px 28px 24px;
}
.sg-title {
font-family: var(--font-display);
font-size: 1.35rem; font-weight: 400;
margin: 0 0 6px; color: var(--white);
}
.sg-intro {
font-size: 0.88rem; color: rgba(232,226,214,0.55);
margin: 0; line-height: 1.5;
}
/* Facts grid */
.sg-facts {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 0;
border-bottom: 1px solid var(--gray-200);
}
.sg-fact {
display: flex; align-items: flex-start; gap: 12px;
padding: 18px 20px;
border-right: 1px solid var(--gray-100);
border-bottom: 1px solid var(--gray-100);
}
.sg-fact:nth-child(3n) { border-right: none; }
.sg-fact-icon {
width: 20px; height: 20px; flex-shrink: 0;
color: var(--ocean-blue); margin-top: 2px;
}
.sg-fact-label {
display: block; font-size: 0.65rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--text-secondary); margin-bottom: 2px;
}
.sg-fact-val {
display: block; font-size: 0.92rem; font-weight: 600;
color: var(--text-primary); line-height: 1.3;
}
/* Content blocks */
.sg-content {
display: grid; grid-template-columns: 1fr 1fr;
gap: 0;
}
.sg-block {
padding: 22px 24px;
border-right: 1px solid var(--gray-100);
border-bottom: 1px solid var(--gray-100);
}
.sg-block:nth-child(2n) { border-right: none; }
.sg-block--warning {
border-left: 3px solid var(--quality-fair);
}
.sg-block-title {
font-family: var(--font-display);
font-size: 0.95rem; font-weight: 600;
color: var(--text-primary); margin: 0 0 8px;
display: flex; align-items: center; gap: 8px;
}
.sg-block-title svg { color: var(--ocean-blue); flex-shrink: 0; }
.sg-block--warning .sg-block-title svg { color: var(--quality-fair); }
.sg-block p {
font-size: 0.85rem; line-height: 1.65;
color: var(--text-secondary); margin: 0 0 8px;
}
.sg-block p:last-child { margin-bottom: 0; }
/* External links */
.sg-links {
display: flex; gap: 10px; flex-wrap: wrap;
padding: 18px 24px;
border-bottom: 1px solid var(--gray-100);
}
.sg-link {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; border-radius: 8px;
background: var(--bg-secondary);
border: 1px solid var(--gray-200);
font-size: 0.85rem; font-weight: 600;
color: var(--text-primary);
text-decoration: none;
transition: border-color 0.15s, background 0.15s;
}
.sg-link:hover {
border-color: var(--ocean-blue);
background: var(--white);
}
.sg-link svg { color: var(--ocean-blue); flex-shrink: 0; }
.sg-link--muted {
background: none; border-color: var(--gray-100);
color: var(--text-secondary); font-weight: 400;
font-size: 0.8rem; cursor: default;
}
.sg-link--muted svg { color: var(--gray-300); }
.sg-link--muted a { color: var(--ocean-blue); font-weight: 600; }
/* Water temp section */
.sg-temps {
padding: 22px 24px;
}
.sg-temps .sg-block-title { margin-bottom: 14px; }
/* Water temperature chart */
.fc-temp-grid {
display: flex; gap: 4px; align-items: flex-end;
height: 100px;
}
.fc-temp-col {
flex: 1; display: flex; flex-direction: column;
align-items: center; gap: 3px;
}
.fc-temp-bar-wrap {
width: 100%; height: 60px;
display: flex; align-items: flex-end;
justify-content: center;
}
.fc-temp-bar {
width: 100%; max-width: 28px;
background: var(--ocean-blue);
border-radius: 4px 4px 0 0;
min-height: 4px;
transition: height 0.3s;
}
.fc-temp-val {
font-family: var(--font-display);
font-size: 0.72rem; font-weight: 400;
color: var(--text-primary);
}
.fc-temp-month {
font-size: 0.58rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.03em;
color: var(--text-secondary);
}
@media (max-width: 768px) {
.sg-header { padding: 20px; }
.sg-facts { grid-template-columns: repeat(2, 1fr); }
.sg-fact:nth-child(3n) { border-right: 1px solid var(--gray-100); }
.sg-fact:nth-child(2n) { border-right: none; }
.sg-content { grid-template-columns: 1fr; }
.sg-block { border-right: none !important; }
.sg-block, .sg-temps { padding: 18px; }
}
/* Nearby spots */
.fc-nearby {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.fc-nearby-card {
display: block;
background: var(--white); border: 1px solid var(--gray-200);
border-radius: 12px; padding: 16px 18px;
text-decoration: none; color: inherit;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.fc-nearby-card:hover {
border-color: var(--gray-300);
box-shadow: 0 4px 16px rgba(15,29,46,0.08);
transform: translateY(-1px);
}
.fc-nearby-top {
display: flex; justify-content: space-between;
align-items: center; gap: 8px; margin-bottom: 8px;
}
.fc-nearby-name {
font-family: var(--font-display);
font-size: 0.95rem; font-weight: 600;
color: var(--text-primary);
}
.fc-nearby-quality {
font-size: 0.65rem; font-weight: 700;
padding: 3px 8px; border-radius: 6px;
flex-shrink: 0;
}
.fc-nearby-stats {
display: flex; justify-content: space-between;
align-items: baseline;
}
.fc-nearby-wave {
font-family: var(--font-display);
font-size: 1.2rem; font-weight: 400;
color: var(--surf-navy);
}
.fc-nearby-dist {
font-size: 0.75rem; color: var(--text-secondary);
}
@media (max-width: 768px) {
.fc-nearby { grid-template-columns: 1fr; }
}
/* Historic conditions */
.fc-historic-wrap {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: 12px; padding: var(--space-md);
height: 220px; position: relative;
}
.fc-historic-note {
font-size: 0.75rem; color: var(--text-muted);
margin: 8px 0 0; font-style: italic;
}
/* Seasonal overview */
.fc-seasonal {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: 12px; padding: var(--space-md);
}
.fc-seasonal-grid {
display: grid; grid-template-columns: repeat(12, 1fr);
gap: 4px; text-align: center;
}
.fc-seasonal-month {
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.fc-seasonal-label {
font-size: 0.7rem; font-weight: 600; color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.03em;
}
.fc-seasonal-bar {
width: 100%; max-width: 28px; min-height: 4px;
border-radius: 3px 3px 0 0;
}
.fc-seasonal-val {
font-size: 0.75rem; font-weight: 600; color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.fc-seasonal-suit {
font-size: 0.65rem; color: var(--text-tertiary);
}
.fc-seasonal-note {
font-size: 0.75rem; color: var(--text-muted);
margin: 10px 0 0; font-style: italic; text-align: center;
}
@media (max-width: 768px) {
.fc-seasonal-grid { grid-template-columns: repeat(6, 1fr); gap: 6px; }
}
/* ── Forecast responsive ── */
/* Tablet: collapse swell2 */
@media (max-width: 900px) {
.fc-hour-row { grid-template-columns: 48px 64px 68px 1fr 1fr 1fr; }
.fc-h-swell2 { display: none; }
}
/* Mobile */
@media (max-width: 768px) {
.fc-page { padding: var(--space-sm); }
.fc-hero-inner { padding: 0 var(--space-md); }
.fc-hero-primary { flex-direction: column; align-items: flex-start; gap: 12px; }
.fc-hero-sparkline { width: 100%; height: 60px; }
.fc-hero-wave-val { font-size: 3rem; }
.fc-hero-name { font-size: 1.3rem; }
.fc-hero-conditions { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.fc-hero-conditions::-webkit-scrollbar { display: none; }
.fc-hero-conditions > .fc-hero-cond-card { flex: 0 0 auto; min-width: 120px; }
.fc-tabs-inner { padding: 0 var(--space-sm); gap: 0; }
.fc-tab { padding: 12px 12px; font-size: 0.75rem; }
.fc-tab-select { font-size: 1rem; padding: 8px 12px; } /* >=16px prevents iOS zoom */
.fc-chart-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fc-chart-tab { padding: 10px 14px; font-size: 0.75rem; white-space: nowrap; }
.fc-chart-wrap { height: 180px; padding: var(--space-sm); }
/* Mobile: 2-line card rows */
.fc-hour-head { display: none; }
.fc-hour-row {
display: grid;
grid-template-columns: 46px 1fr 1fr 1fr;
grid-template-rows: auto auto;
font-size: 0.82rem;
padding: 6px 0;
row-gap: 0;
}
.fc-hour-row > div { padding: 4px 6px; }
/* Row 1: Time | Stars | Surf | Wind */
.fc-h-time {
grid-row: 1 / 3; align-self: center;
justify-content: flex-start !important;
}
.fc-h-time strong { font-size: 0.82rem; }
.fc-h-stars { grid-row: 1; grid-column: 2; justify-content: flex-start; }
.fc-h-stars .star-rating { font-size: 0.6rem; }
.fc-h-stars .star { font-size: 0.6rem; }
.fc-h-surf { grid-row: 1; grid-column: 3; }
.fc-val-big { font-size: 0.9rem; }
.fc-h-wind { grid-row: 1; grid-column: 4; flex-direction: row !important; gap: 4px !important; flex-wrap: nowrap; }
.fc-h-wind .fc-wind-top { display: contents; }
.fc-h-wind .fc-wind-top .hm-wind-tag { display: none; }
.fc-h-wind .fc-wind-top .fc-dir-arrow svg { width: 14px; height: 14px; }
.fc-h-wind .fc-wind-nums { gap: 2px; }
.fc-h-wind .fc-wind-sustained { font-size: 0.82rem; }
.fc-h-wind .fc-wind-sustained small { display: none; }
.fc-h-wind .fc-wind-gust { font-size: 0.7rem; }
.fc-h-wind .fc-wind-gust::before { content: '/'; }
/* Row 2: _ | Swell | Weather (spans 2) */
.fc-h-swell { display: flex !important; grid-row: 2; grid-column: 2 / 4; font-size: 0.75rem; color: var(--text-secondary); }
.fc-h-swell .fc-dir-arrow svg { width: 12px; height: 12px; }
.fc-h-swell2 { display: none; }
.fc-h-weather { display: flex !important; grid-row: 2; grid-column: 4; font-size: 0.75rem; flex-direction: row !important; gap: 4px !important; }
.fc-h-weather .fc-weather-icon { font-size: 0.75rem; }
.fc-h-weather .fc-weather-temp { font-size: 0.75rem; }
.surf-quality { font-size: 0.68rem; padding: 3px 8px; min-width: 58px; }
.fc-day-header { padding: 12px 16px; }
.fc-day-title { font-size: 0.88rem; }
.fc-hero-tags { gap: 6px; }
}
@media (max-width: 480px) {
.fc-seasonal-grid { grid-template-columns: repeat(4, 1fr); }
.fc-hero-name { font-size: 1.2rem; }
.fc-hero-val { font-size: 1.2rem; }
.fc-hero-label { font-size: 0.65rem; }
.fc-hero-desc { max-width: 100%; }
}
/* ── Wind direction classification colors ── */
.wind-offshore { color: #059669; }
.wind-cross-off { color: #10b981; }
.wind-cross { color: #d97706; }
.wind-cross-on { color: #ea580c; }
.wind-onshore { color: #dc2626; }
.fc-wind-label {
display: inline-block; font-size: 0.65rem; font-weight: 700;
padding: 1px 6px; border-radius: 9999px; color: var(--white);
line-height: 1.4; text-transform: uppercase; letter-spacing: 0.03em;
min-width: 70px; text-align: center;
white-space: nowrap; vertical-align: middle;
}
.fc-wind-label.wind-offshore { background: #059669; }
.fc-wind-label.wind-cross-off { background: #10b981; }
.fc-wind-label.wind-cross { background: #d97706; }
.fc-wind-label.wind-cross-on { background: #ea580c; }
.fc-wind-label.wind-onshore { background: #dc2626; }
/* ── 7-Day Overview Strip ── */
.fc-day-strip {
display: flex; gap: 8px; overflow-x: auto;
padding: 12px 0 4px; margin-bottom: var(--space-lg);
-webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.fc-day-strip::-webkit-scrollbar { height: 4px; }
.fc-day-strip::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }
.fc-strip-card {
flex: 1 0 0; min-width: 90px; padding: 12px 14px;
text-align: center;
background: var(--white); border: 1px solid var(--gray-200);
border-radius: 10px; cursor: pointer;
transition: border-color 0.15s, background 0.15s;
position: relative;
}
.fc-strip-card:hover { border-color: var(--gray-300); background: var(--gray-50); }
.fc-strip-card.active {
border-color: var(--surf-navy); background: var(--surf-navy); color: var(--white);
}
.fc-strip-card.active .fc-strip-day { color: var(--white); }
.fc-strip-card.active .fc-strip-range { color: rgba(255,255,255,0.8); }
.fc-strip-day {
font-family: var(--font-display);
font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
}
.fc-strip-range {
font-family: var(--font-display);
font-size: 0.9rem; font-weight: 400; color: var(--text-secondary);
margin-top: 3px;
}
.fc-strip-dot {
width: 8px; height: 8px; border-radius: 50%; display: block;
margin: 6px auto 0;
}
.fc-strip-best {
position: absolute; top: -8px; right: -4px;
font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
background: var(--quality-epic); color: var(--white);
padding: 2px 7px; border-radius: 100px; letter-spacing: 0.04em;
}
.fc-strip-best-day { border-color: var(--quality-epic); }
/* Quality dot variants for strip */
.quality-dot-epic { background: var(--quality-epic); }
.quality-dot-very-good { background: var(--quality-very-good); }
.quality-dot-good { background: var(--quality-good); }
.quality-dot-fair { background: var(--quality-fair); }
.quality-dot-poor { background: var(--quality-poor); }
/* ── Swell direction text ── */
.fc-swell-dir {
font-weight: 700; color: var(--text-primary); font-size: 0.85rem;
white-space: nowrap;
}
/* ── Tide curve ── */
/* Tide chart */
/* Inline today's tide mini-chart */
.fc-tide-inline { margin-bottom: var(--space-md); }
.fc-tide-mini-wrap {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: 12px; padding: var(--space-sm) var(--space-md);
height: 100px; position: relative;
}
.fc-tide-mini-times {
display: flex; gap: var(--space-md); flex-wrap: wrap;
padding: var(--space-xs) 0;
font-size: 0.8rem; color: var(--text-secondary);
}
.fc-tide-mini-entry { display: flex; align-items: center; gap: 3px; }
.fc-tide-mini-entry.fc-tide-high { color: var(--ocean-blue); }
.fc-tide-mini-entry.fc-tide-low { color: var(--text-muted); }
.fc-tide-mini-entry small { color: var(--text-secondary); }
.fc-tide-chart-wrap {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: 12px; padding: var(--space-md);
height: 200px; position: relative;
}
/* Tide location */
.fc-tide-location {
font-size: 0.75rem; color: var(--text-secondary);
margin: 8px 0 16px; font-style: italic;
}
/* 7-day tide table */
.fc-tide-table {
display: flex; flex-direction: column; gap: 0;
background: var(--white); border: 1px solid var(--gray-200);
border-radius: 12px; overflow: hidden;
margin-top: 12px;
}
.fc-tide-day {
display: flex; align-items: center; gap: 16px;
padding: 10px 16px;
border-bottom: 1px solid var(--gray-100);
}
.fc-tide-day:last-child { border-bottom: none; }
.fc-tide-day:nth-child(odd) { background: var(--gray-50); }
.fc-tide-day-date {
font-family: var(--font-display);
font-size: 0.82rem; font-weight: 600;
color: var(--text-primary);
min-width: 90px; flex-shrink: 0;
}
.fc-tide-times {
display: flex; gap: 14px; flex-wrap: wrap;
}
.fc-tide-entry {
display: flex; align-items: center; gap: 4px;
font-size: 0.8rem; color: var(--text-secondary);
font-weight: 500;
}
.fc-tide-entry small {
font-size: 0.7rem; color: var(--text-muted);
}
.fc-tide-high svg { color: var(--ocean-blue); }
.fc-tide-low svg { color: var(--sand-muted); }
@media (max-width: 768px) {
.fc-tide-day { flex-direction: column; gap: 4px; align-items: flex-start; }
.fc-tide-times { gap: 10px; }
}
/* ── Spot metadata bar ── */
.fc-spot-meta-tags {
display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs);
}
.fc-meta-tag {
font-size: 0.7rem; font-weight: 600; padding: 2px 8px;
border-radius: var(--radius-sm); background: var(--gray-100);
color: var(--text-secondary); white-space: nowrap;
}
/* ── Forecast responsive additions ── */
@media (max-width: 768px) {
.fc-wind-label { display: none; }
.fc-day-strip { gap: var(--space-xs); }
.fc-strip-card { min-width: 80px; padding: var(--space-xs) var(--space-sm); }
.fc-strip-day { font-size: 0.65rem; }
.fc-strip-range { font-size: 0.7rem; }
.fc-tide-chart-wrap { height: 160px; }
.fc-spot-meta-tags { gap: 4px; }
.fc-meta-tag { font-size: 0.6rem; padding: 1px 6px; }
}
/* ====== REGION PAGE ====== */
.rg-hero {
background: var(--surf-navy); color: var(--white); position: relative;
}
.rg-hero-inner {
max-width: 1000px; margin: 0 auto;
padding: 0 var(--space-lg);
}
.rg-hero-eyebrow {
font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--wave-teal);
margin: 0 0 var(--space-sm);
}
.rg-hero-title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 5vw, 2.5rem); font-weight: 400;
margin: 0 0 var(--space-sm); color: var(--white);
}
.rg-hero-sub {
font-size: 0.92rem; color: rgba(232,226,214,0.55);
margin: 0; line-height: 1.55; max-width: 560px;
padding-bottom: clamp(2rem, 5vw, 3rem);
}
.rg-hero-wave {
display: block; width: 100%; height: 40px;
position: relative; z-index: 1;
}
.rg-body {
max-width: 1000px; margin: 0 auto;
padding: var(--space-lg);
}
/* Spots section */
.rg-spots { margin-bottom: var(--space-2xl); }
.rg-spots-header {
display: flex; justify-content: space-between;
align-items: baseline; gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.rg-spots-title {
font-family: var(--font-display);
font-size: 1.35rem; font-weight: 400;
color: var(--text-primary); margin: 0;
}
.rg-spots-count {
font-size: 0.82rem; color: var(--text-secondary); font-weight: 500;
}
.rg-spots-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
/* Spot cards — consistent with /forecast and /spots */
.rg-card {
display: block;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 14px;
padding: 20px 22px;
text-decoration: none; color: inherit;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.rg-card:hover {
border-color: var(--gray-300);
box-shadow: 0 6px 20px rgba(15,29,46,0.08);
transform: translateY(-2px);
}
.rg-card-top {
display: flex; justify-content: space-between;
align-items: flex-start; gap: 10px;
margin-bottom: 16px;
}
.rg-card-top-left { min-width: 0; }
.rg-card-name {
font-family: var(--font-display);
font-size: 1.1rem; font-weight: 600;
display: block; line-height: 1.2;
color: var(--text-primary);
}
.rg-card-meta {
font-size: 0.75rem; color: var(--text-secondary);
display: block; margin-top: 4px;
}
.rg-card-quality {
font-size: 0.72rem; font-weight: 700;
padding: 5px 12px; border-radius: 8px;
flex-shrink: 0; white-space: nowrap;
}
/* Stats */
.rg-card-stats {
display: flex; gap: 0;
margin-bottom: 12px;
}
.rg-kv {
flex: 1; text-align: center;
border-right: 1px solid var(--gray-100);
padding: 0 6px;
}
.rg-kv:last-child { border-right: none; }
.rg-kv-val {
font-family: var(--font-display);
font-size: 1.4rem; font-weight: 400;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
line-height: 1.1; display: block;
}
.rg-kv-val small { font-size: 0.48em; color: var(--text-secondary); }
.rg-kv-label {
font-size: 0.7rem; color: var(--text-secondary);
font-weight: 500; display: block; margin-top: 3px;
}
/* Description snippet */
.rg-card-desc {
font-size: 0.8rem; color: var(--text-secondary);
line-height: 1.55; margin: 0 0 10px;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
}
/* Tags */
.rg-card-tags {
display: flex; gap: 6px; flex-wrap: wrap;
}
.rg-tag {
font-size: 0.68rem; font-weight: 500;
padding: 3px 8px; border-radius: 100px;
background: var(--bg-secondary);
color: var(--text-secondary);
}
/* About region */
.rg-about {
background: var(--bg-tertiary);
margin: 0 calc(-50vw + 50%);
padding: clamp(2.5rem, 5vw, 3.5rem) var(--space-lg);
margin-bottom: var(--space-2xl);
}
.rg-about-title {
font-family: var(--font-display);
font-size: 1.4rem; font-weight: 400;
color: var(--text-primary); margin: 0 0 var(--space-md);
text-align: center;
}
.rg-about-body {
max-width: 680px; margin: 0 auto;
font-size: 0.92rem; line-height: 1.7;
color: var(--text-secondary);
}
.rg-about-body p { margin: 0 0 var(--space-md); }
.rg-about-body p:last-child { margin-bottom: 0; }
/* Quick facts */
.rg-facts {
margin-bottom: var(--space-xl);
}
.rg-facts-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0; background: var(--white);
border: 1px solid var(--gray-200); border-radius: 12px;
overflow: hidden;
}
.rg-fact {
display: flex; flex-direction: column; align-items: center;
gap: 4px; padding: 20px 12px; text-align: center;
}
.rg-fact + .rg-fact { border-left: 1px solid var(--gray-100); }
.rg-fact-icon { color: var(--ocean-blue); }
.rg-fact-label {
font-size: 0.68rem; color: var(--text-tertiary);
text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.rg-fact-val {
font-family: var(--font-display); font-size: 0.95rem;
font-weight: 600; color: var(--surf-navy);
}
@media (max-width: 600px) {
.rg-facts-grid { grid-template-columns: repeat(2, 1fr); }
.rg-fact:nth-child(n+3) { border-top: 1px solid var(--gray-100); }
.rg-fact:nth-child(3) { border-left: none; }
}
/* Hero summary bar */
.rg-hero-summary {
display: flex; flex-wrap: wrap; gap: 12px 24px;
margin-top: var(--space-md);
font-size: 0.85rem; color: rgba(255,255,255,0.8);
}
.rg-hero-condition {
display: flex; align-items: center; gap: 6px;
}
.rg-hero-condition i { font-size: 1rem; color: #fff; }
.rg-hero-bestday {
color: rgba(255,255,255,0.8); text-decoration: none;
display: flex; align-items: center; gap: 6px;
}
.rg-hero-bestday:hover { color: #fff; }
.rg-hero-bestday strong { color: #fff; }
.rg-hero-bestday .quality-epic,
.rg-hero-bestday .quality-very-good,
.rg-hero-bestday .quality-good,
.rg-hero-bestday .quality-fair,
.rg-hero-bestday .quality-poor {
font-size: 0.72rem; padding: 2px 8px;
border-radius: var(--radius-full);
}
/* FAQ */
.rg-faq {
max-width: 720px; margin: var(--space-xl) auto;
}
.rg-faq-title {
font-family: var(--font-display); font-size: 1.3rem;
font-weight: 400; margin: 0 0 var(--space-md); color: var(--surf-navy);
}
.rg-faq-list {
display: flex; flex-direction: column; gap: 0;
}
.rg-faq-item {
border-bottom: 1px solid var(--gray-200);
}
.rg-faq-item summary {
padding: 14px 0; cursor: pointer;
font-weight: 600; font-size: 0.9rem; color: var(--text-primary);
list-style: none;
display: flex; justify-content: space-between; align-items: center;
}
.rg-faq-item summary::after {
content: '+'; font-size: 1.2rem; color: var(--text-tertiary);
font-weight: 300; flex-shrink: 0; margin-left: 12px;
}
.rg-faq-item[open] summary::after { content: '\2212'; }
.rg-faq-item summary::-webkit-details-marker { display: none; }
.rg-faq-item p {
margin: 0 0 14px; font-size: 0.85rem; color: var(--text-secondary);
line-height: 1.6;
}
/* Related regions */
.rg-related {
margin: var(--space-xl) 0;
}
.rg-related-title {
font-family: var(--font-display); font-size: 1.1rem;
font-weight: 400; margin: 0 0 var(--space-md); color: var(--surf-navy);
}
.rg-related-links {
display: flex; flex-wrap: wrap; gap: 8px;
}
.rg-related-link {
padding: 8px 16px; font-size: 0.82rem; font-weight: 500;
color: var(--surf-navy); background: var(--bg-secondary);
border: 1px solid var(--gray-200); border-radius: var(--radius-full);
text-decoration: none; transition: all 0.15s;
}
.rg-related-link:hover {
background: var(--surf-navy); color: #fff; border-color: var(--surf-navy);
}
/* CTA */
.rg-cta {
background: var(--surf-navy);
margin: 0 calc(-50vw + 50%);
padding: clamp(2rem, 4vw, 3rem) var(--space-lg);
text-align: center; color: var(--white);
margin-bottom: var(--space-2xl);
}
.rg-cta-title {
font-family: var(--font-display);
font-size: 1.3rem; font-weight: 400;
margin: 0 0 6px;
}
.rg-cta-desc {
font-size: 0.88rem; color: rgba(232,226,214,0.5);
margin: 0 0 var(--space-lg);
}
.rg-cta-actions {
display: flex; gap: 10px;
justify-content: center; flex-wrap: wrap;
}
/* Responsive */
@media (max-width: 768px) {
.rg-body { padding: var(--space-md) var(--space-sm); }
.rg-hero-inner { padding: 0 var(--space-md); }
.rg-spots-grid { grid-template-columns: 1fr; }
.rg-card:hover { transform: none; }
.rg-about { margin-left: calc(-1 * var(--space-sm)); margin-right: calc(-1 * var(--space-sm)); }
.rg-cta { margin-left: calc(-1 * var(--space-sm)); margin-right: calc(-1 * var(--space-sm)); }
.rg-cta-actions { flex-direction: column; align-items: stretch; }
}
/* ====== CHARTS PAGE ====== */
.ch-hero {
background-image: linear-gradient(to bottom, rgba(15,29,46,0.55), rgba(15,29,46,0.7)), url('/static/images/hero.webp');
background-size: 120%;
background-position: center 70%;
background-repeat: no-repeat;
color: var(--white);
}
.ch-hero-inner {
max-width: 1000px; margin: 0 auto;
padding: clamp(2rem, 5vw, 3rem) var(--space-lg) clamp(1.5rem, 3vw, 2rem);
text-align: center;
}
.ch-hero-eyebrow {
font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--wave-teal);
margin: 0 0 var(--space-sm);
}
.ch-hero-title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 400;
margin: 0 0 8px; color: var(--white);
}
.ch-hero-sub {
font-size: 0.88rem; color: rgba(232,226,214,0.5);
margin: 0; line-height: 1.5; max-width: 520px;
display: inline-block;
}
/* Map container */
.ch-map-container {
position: relative;
background: #0a1628;
}
#ch-map {
width: 100%; height: 65vh;
min-height: 400px; max-height: 700px;
}
/* Region selector */
/* Chart type selector */
.ch-chart-types {
position: absolute; top: 16px; left: 50%;
transform: translateX(-50%);
display: flex; gap: 4px;
background: rgba(15,29,46,0.85);
backdrop-filter: blur(8px);
border-radius: 10px; padding: 4px;
z-index: 10;
}
.ch-type-btn {
padding: 8px 14px; border: none;
border-radius: 8px; font-size: 0.78rem;
font-weight: 600; font-family: var(--font-body);
cursor: pointer; transition: background 0.15s, color 0.15s;
background: transparent; color: rgba(232,226,214,0.55);
}
.ch-type-btn:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.ch-type-btn--active {
background: var(--white) !important;
color: var(--surf-navy) !important;
}
.ch-regions {
position: absolute; top: 60px; left: 16px;
display: flex; gap: 4px;
background: rgba(15,29,46,0.85);
backdrop-filter: blur(8px);
border-radius: 10px; padding: 4px;
z-index: 10;
}
.ch-region-btn {
padding: 8px 14px; border: none;
border-radius: 8px; font-size: 0.78rem;
font-weight: 600; font-family: var(--font-body);
cursor: pointer; transition: background 0.15s, color 0.15s;
background: transparent; color: rgba(232,226,214,0.55);
}
.ch-region-btn:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.ch-region-btn--active {
background: var(--white) !important;
color: var(--surf-navy) !important;
}
/* Legend */
.ch-legend {
position: absolute; top: 16px; right: 56px;
background: rgba(15,29,46,0.85);
backdrop-filter: blur(8px);
border-radius: 10px; padding: 10px 14px;
z-index: 10;
}
.ch-legend-title {
font-size: 0.65rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: rgba(232,226,214,0.5);
display: block; margin-bottom: 6px;
}
.ch-legend-bar {
display: flex; align-items: center; gap: 6px;
}
.ch-legend-gradient {
width: 120px; height: 10px; border-radius: 3px;
background: linear-gradient(to right,
#0a1628, #1a2d5a, #2e5a8f, #4a9cc9, #48b8a0, #52be80,
#a8d840, #f4d03f, #f39c12, #e74c3c, #9b2c2c, #6b2c8f);
}
.ch-legend-label {
font-size: 0.62rem; color: rgba(232,226,214,0.5);
font-weight: 500;
}
/* Timeline */
.ch-timeline {
position: absolute; bottom: 0; left: 0; right: 0;
background: rgba(15,29,46,0.9);
backdrop-filter: blur(8px);
z-index: 10;
}
.ch-timeline-inner {
display: flex; align-items: center; gap: 16px;
padding: 12px 20px;
max-width: 1000px; margin: 0 auto;
}
.ch-controls { display: flex; gap: 6px; flex-shrink: 0; }
.ch-ctrl-btn {
width: 44px; height: 44px; border-radius: 50%; /* min touch target */
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
color: var(--white); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s;
}
.ch-ctrl-btn:hover { background: rgba(255,255,255,0.15); }
.ch-ctrl-btn--play { background: var(--ocean-blue); border-color: var(--ocean-blue); }
.ch-ctrl-btn--play:hover { background: var(--wave-teal); }
.ch-time-display {
font-family: var(--font-display);
font-size: 0.88rem; font-weight: 400;
color: var(--white);
min-width: 180px; flex-shrink: 0;
}
.ch-slider-wrap { flex: 1; min-width: 0; }
.ch-slider {
width: 100%; height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.15);
outline: none; -webkit-appearance: none;
cursor: pointer;
}
.ch-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px; height: 16px; border-radius: 50%;
background: var(--white); cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.ch-slider::-moz-range-thumb {
width: 16px; height: 16px; border-radius: 50%;
background: var(--white); cursor: pointer;
border: none;
}
.ch-slider-labels {
display: flex; justify-content: space-between;
font-size: 0.6rem; color: rgba(232,226,214,0.3);
margin-top: 4px; padding: 0 2px;
}
/* Hover tooltip */
.ch-tooltip {
position: absolute;
pointer-events: none;
background: rgba(15,29,46,0.92);
color: var(--white);
padding: 6px 12px;
border-radius: 8px;
font-size: 0.82rem;
font-family: var(--font-body);
z-index: 15;
display: none;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.ch-tooltip-val {
font-family: var(--font-display);
font-size: 1.1rem; font-weight: 400;
}
.ch-tooltip-label {
font-size: 0.68rem;
color: rgba(232,226,214,0.5);
}
/* Spot markers on chart */
.ch-spot-marker {
width: 10px; height: 10px;
background: var(--white);
border: 2px solid var(--surf-navy);
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
cursor: pointer;
}
/* Loading */
.ch-loading {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: rgba(15,29,46,0.9);
color: rgba(232,226,214,0.7);
padding: 12px 24px; border-radius: 10px;
font-size: 0.82rem; z-index: 20;
}
/* Body note */
.ch-body {
max-width: 1000px; margin: 0 auto;
padding: var(--space-lg);
}
.ch-note {
font-size: 0.82rem; color: var(--text-secondary);
line-height: 1.55; max-width: 600px;
}
/* Responsive */
@media (max-width: 768px) {
#ch-map { height: 55vh; min-height: 350px; }
.ch-chart-types { top: 10px; padding: 3px; gap: 2px; }
.ch-type-btn { padding: 6px 8px; font-size: 0.65rem; }
.ch-regions { top: 52px; left: 10px; }
.ch-region-btn { padding: 6px 10px; font-size: 0.72rem; }
.ch-legend { top: 10px; right: 48px; padding: 8px 10px; }
.ch-legend-gradient { width: 80px; }
.ch-timeline-inner { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
.ch-time-display { min-width: auto; font-size: 0.82rem; }
.ch-slider-labels { font-size: 0.55rem; }
.ch-body { padding: var(--space-md) var(--space-sm); }
}
/* ====== SPOTS PAGE ====== */
/* Hero */
.sp-hero {
background-image: linear-gradient(to bottom, rgba(15,29,46,0.55), rgba(15,29,46,0.7)), url('/static/images/hero.webp');
background-size: 120%;
background-position: center 70%;
background-repeat: no-repeat;
color: var(--white);
position: relative;
}
.sp-hero-inner {
max-width: 1000px; margin: 0 auto;
padding: clamp(2.5rem, 6vw, 4rem) var(--space-lg) 0;
text-align: center;
}
.sp-hero-eyebrow {
font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--wave-teal);
margin: 0 0 var(--space-sm);
}
.sp-hero-title {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 400;
margin: 0 0 var(--space-sm); color: var(--white);
}
.sp-hero-sub {
font-size: 0.92rem; color: rgba(232,226,214,0.55);
margin: 0; line-height: 1.55;
padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.sp-hero-wave {
display: block; width: 100%; height: 40px;
position: relative; z-index: 1;
}
/* Body */
.sp-body {
max-width: 1000px; margin: 0 auto;
padding: var(--space-lg);
}
/* Map */
.sp-map-section { margin-bottom: var(--space-lg); }
.sp-map-wrap {
background: transparent;
border: none;
}
#dotMap {
width: 100%; position: relative;
}
#dotMap svg {
display: block; margin: 0 auto; cursor: grab;
}
#dotMap svg:active { cursor: grabbing; }
/* Zoom controls */
.sp-map-controls {
position: absolute; top: 12px; right: 12px; z-index: 5;
display: flex; flex-direction: column; gap: 0;
border-radius: 8px; overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.sp-map-ctrl {
width: 32px; height: 32px;
background: #fff; border: none;
font-size: 1.1rem; font-weight: 300; color: var(--text-primary);
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background 0.15s;
}
.sp-map-ctrl:hover { background: var(--gray-100); }
.sp-map-ctrl + .sp-map-ctrl { border-top: 1px solid var(--gray-200); }
/* Map popup */
.sp-map-popup {
position: absolute; z-index: 10;
background: #fff; border-radius: 12px;
box-shadow: 0 6px 24px rgba(0,0,0,0.14);
padding: 16px 18px; min-width: 200px; max-width: 250px;
pointer-events: auto;
font-family: var(--font-body);
}
.sp-map-popup::after {
content: ''; position: absolute;
bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
width: 12px; height: 12px; background: #fff;
box-shadow: 2px 2px 4px rgba(0,0,0,0.06);
}
.sp-map-popup-header {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-bottom: 12px;
}
.sp-map-popup-name {
font-family: var(--font-display); font-size: 0.95rem;
font-weight: 600; color: var(--surf-navy);
}
.sp-map-popup-badge {
font-size: 0.68rem; font-weight: 600; padding: 3px 10px;
border-radius: var(--radius-full); white-space: nowrap; flex-shrink: 0;
}
.sp-map-popup-stats {
display: flex; gap: 0; margin-bottom: 14px;
border-top: 1px solid var(--gray-100); padding-top: 10px;
}
.sp-map-popup-stat {
flex: 1; text-align: center;
display: flex; flex-direction: column; gap: 2px;
}
.sp-map-popup-stat + .sp-map-popup-stat {
border-left: 1px solid var(--gray-100);
}
.sp-map-popup-val {
font-family: var(--font-display); font-weight: 600;
font-size: 1rem; color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.sp-map-popup-val small {
font-weight: 400; font-size: 0.7rem; color: var(--text-secondary);
}
.sp-map-popup-label {
font-size: 0.65rem; color: var(--text-tertiary);
text-transform: uppercase; letter-spacing: 0.03em;
}
.sp-map-popup-btn {
display: block; text-align: center; padding: 8px 14px;
background: var(--surf-navy); color: #fff; border-radius: 8px;
font-size: 0.78rem; font-weight: 500; text-decoration: none;
transition: background 0.15s;
}
.sp-map-popup-btn:hover { background: #1a2d42; }
/* Pin marker */
@keyframes pinDrop {
0% { opacity: 0; transform: translate(-50%, -100%) translateY(-40px); }
60% { opacity: 1; transform: translate(-50%, -100%) translateY(4px); }
80% { transform: translate(-50%, -100%) translateY(-2px); }
100% { transform: translate(-50%, -100%) translateY(0); }
}
@keyframes pulsate {
0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}
.sp-pin {
position: absolute;
width: 12px; height: 12px;
margin-left: -6px; margin-top: -12px;
z-index: 3; text-decoration: none;
animation: pinDrop 0.5s ease-out both;
}
.sp-pin::before {
content: '';
display: block; width: 12px; height: 12px;
background: var(--surf-navy);
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
position: relative; z-index: 2;
transition: transform 0.15s, background 0.15s;
}
.sp-pin:hover::before {
transform: scale(1.4);
background: #d94f30;
}
.sp-pin::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 24px; height: 24px;
border: 2px solid var(--surf-navy);
border-radius: 50%;
animation: pulsate 2.5s ease-out infinite;
opacity: 0;
z-index: 1;
}
.sp-pin:hover::after {
animation: none; opacity: 0;
}
/* Pin label */
.sp-pin-label {
position: absolute;
left: 16px; top: 50%;
transform: translateY(-50%);
font-size: 0.7rem; font-weight: 600;
color: var(--surf-navy);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
.sp-pin:hover .sp-pin-label {
opacity: 1;
}
/* Directory */
.sp-directory { margin-bottom: var(--space-2xl); }
.sp-directory-title {
font-family: var(--font-display);
font-size: 1.5rem; font-weight: 400;
margin: 0 0 6px; color: var(--text-primary);
}
.sp-directory-sub {
font-size: 0.88rem; color: var(--text-secondary);
margin: 0 0 var(--space-xl); line-height: 1.5;
}
/* Region groups */
.sp-region { margin-bottom: var(--space-xl); }
.sp-region-name {
font-family: var(--font-display);
font-size: 1.15rem; font-weight: 600;
color: var(--text-primary); margin: 0 0 var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--gray-200);
}
.sp-region-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
}
/* Spot cards */
.sp-spot-card {
display: block;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 18px 20px;
text-decoration: none; color: inherit;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.sp-spot-card:hover {
border-color: var(--gray-300);
box-shadow: 0 6px 20px rgba(15,29,46,0.08);
transform: translateY(-2px);
}
.sp-spot-top {
display: flex; justify-content: space-between;
align-items: flex-start; gap: 10px;
margin-bottom: 14px;
}
.sp-spot-name {
font-family: var(--font-display);
font-size: 1.05rem; font-weight: 600;
display: block; line-height: 1.2;
color: var(--text-primary);
}
.sp-spot-meta {
font-size: 0.75rem; color: var(--text-secondary);
display: block; margin-top: 3px;
}
.sp-spot-quality {
font-size: 0.72rem; font-weight: 700;
padding: 5px 12px; border-radius: 8px;
flex-shrink: 0; white-space: nowrap;
}
/* Stats */
.sp-spot-stats {
display: flex; gap: 0;
margin-bottom: 10px;
}
.sp-kv {
flex: 1; text-align: center;
border-right: 1px solid var(--gray-100);
padding: 0 6px;
}
.sp-kv:last-child { border-right: none; }
.sp-kv-val {
font-family: var(--font-display);
font-size: 1.3rem; font-weight: 400;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
line-height: 1.1;
display: block;
}
.sp-kv-val small {
font-size: 0.48em; color: var(--text-secondary);
}
.sp-kv-val--text {
font-size: 0.9rem; font-weight: 500;
}
.sp-kv-label {
font-size: 0.68rem; color: var(--text-secondary);
font-weight: 500; display: block;
margin-top: 3px;
}
/* Description snippet */
.sp-spot-desc {
font-size: 0.78rem; color: var(--text-secondary);
line-height: 1.5; margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Responsive */
@media (max-width: 768px) {
.sp-body { padding: var(--space-md) var(--space-sm); }
.sp-map-wrap { border-radius: 10px; }
.sp-region-grid { grid-template-columns: 1fr; }
.sp-spot-card:hover { transform: none; }
.sp-map-popup { min-width: 160px; max-width: 200px; padding: 12px 14px; }
.sp-map-popup-val { font-size: 0.88rem; }
.sp-map-ctrl { width: 40px; height: 40px; font-size: 1.2rem; }
}
/* ====== FORECAST LANDING ====== */
/* Hero — full-bleed */
.fl-hero {
background-image: linear-gradient(to bottom, rgba(15,29,46,0.55), rgba(15,29,46,0.7)), url('/static/images/hero.webp');
background-size: 120%;
background-position: center 70%;
background-repeat: no-repeat;
color: var(--white);
position: relative;
}
.fl-hero-inner {
max-width: 1000px; margin: 0 auto;
padding: clamp(2.5rem, 6vw, 4rem) var(--space-lg) 0;
text-align: center;
}
.fl-hero-eyebrow {
font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--wave-teal);
margin: 0 0 var(--space-sm);
}
.fl-hero-title {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 400;
margin: 0 0 var(--space-sm); letter-spacing: -0.01em;
color: var(--white);
}
.fl-hero-sub {
font-size: 0.92rem; color: rgba(232,226,214,0.55);
margin: 0; line-height: 1.5;
padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.fl-hero-updated {
display: block; margin-top: 6px;
font-size: 0.75rem; color: rgba(232,226,214,0.35);
}
.fl-hero-wave {
display: block; width: 100%; height: 40px;
position: relative; z-index: 1;
}
/* Body */
.fl-body {
max-width: 1000px; margin: 0 auto;
padding: var(--space-lg);
}
/* Region sections */
.fl-region { margin-bottom: var(--space-2xl); }
.fl-region-header {
display: flex; justify-content: space-between;
align-items: baseline; gap: var(--space-md);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--gray-200);
}
.fl-region-name {
font-family: var(--font-display);
font-size: 1.2rem; font-weight: 600;
color: var(--text-primary); margin: 0;
}
.fl-region-count {
font-size: 0.78rem; color: var(--text-secondary);
font-weight: 500;
}
/* Spot grid */
.fl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
/* Spot cards */
.fl-card {
display: block;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 18px 20px;
text-decoration: none; color: inherit;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.fl-card:hover {
border-color: var(--gray-300);
box-shadow: 0 6px 20px rgba(15,29,46,0.08);
transform: translateY(-2px);
}
.fl-card-top {
display: flex; justify-content: space-between;
align-items: flex-start; gap: 10px;
margin-bottom: 16px;
}
.fl-card-top-left { min-width: 0; }
.fl-card-name {
font-family: var(--font-display);
font-size: 1.08rem; font-weight: 600;
margin: 0; line-height: 1.2;
color: var(--text-primary);
}
.fl-card-meta {
display: block; margin-top: 4px;
font-size: 0.75rem;
}
.fl-card-quality {
font-size: 0.72rem; font-weight: 700;
padding: 5px 12px; border-radius: 8px;
flex-shrink: 0; white-space: nowrap;
}
/* Stats */
.fl-card-stats {
display: flex; gap: 0;
}
.fl-kv {
flex: 1; text-align: center;
border-right: 1px solid var(--gray-100);
padding: 0 6px;
}
.fl-kv:last-child { border-right: none; }
.fl-kv-val {
font-family: var(--font-display);
font-size: 1.4rem; font-weight: 400;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
line-height: 1.1;
display: block;
}
.fl-kv-val small {
font-size: 0.48em; color: var(--text-secondary);
}
.fl-kv-label {
font-size: 0.7rem; color: var(--text-secondary);
font-weight: 500; display: block;
margin-top: 3px;
}
/* Responsive */
@media (max-width: 768px) {
.fl-body { padding: var(--space-md) var(--space-sm); }
.fl-grid { grid-template-columns: 1fr; }
.fl-card:hover { transform: none; }
}
@media (max-width: 480px) {
.fl-kv-val { font-size: 1.2rem; }
.fl-card { padding: 14px 16px; }
}
/* ====== HELP PAGE ====== */
.help-page { max-width: 900px; margin: 0 auto; }
.quick-nav {
margin-bottom: var(--space-xl);
}
.quick-nav-links {
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--space-sm);
}
.quick-nav-link {
display: flex; align-items: center; gap: var(--space-sm);
padding: var(--space-md); background: var(--white);
border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
text-decoration: none; transition: all 0.2s ease;
}
.quick-nav-link i { color: var(--ocean-blue); font-size: 0.9rem; }
.quick-nav-link:hover {
border-color: var(--ocean-blue); background: var(--foam-white);
transform: translateY(-1px); box-shadow: var(--shadow-sm);
color: var(--ocean-blue);
}
.help-section {
background: var(--white); border-radius: var(--radius-xl);
padding: var(--space-xl); margin-bottom: var(--space-lg);
border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm);
}
.help-section-title {
font-size: 1.35rem; font-weight: 800; color: var(--text-primary);
margin: 0 0 var(--space-lg); display: flex; align-items: center;
gap: var(--space-sm); padding-bottom: var(--space-md);
border-bottom: 2px solid var(--ocean-blue);
}
.help-section-title i { color: var(--ocean-blue); font-size: 1.1rem; }
.help-section-content { color: var(--text-secondary); line-height: 1.7; }
.help-section-content > p { margin-bottom: var(--space-md); }
.help-cards {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-md); margin-top: var(--space-md);
}
.help-card {
background: var(--bg-secondary); border-radius: var(--radius-lg);
padding: var(--space-lg); border-left: 4px solid var(--ocean-blue);
}
.help-card-title {
font-size: 1rem; font-weight: 700; color: var(--text-primary);
margin: 0 0 var(--space-sm); display: flex; align-items: center;
gap: var(--space-sm);
}
.help-card-title i { color: var(--ocean-blue); }
.help-card p { margin: 0; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }
.help-card-good { border-left-color: var(--quality-epic); }
.help-card-good .help-card-title i { color: var(--quality-epic); }
.help-card-warning { border-left-color: var(--quality-good); }
.help-card-warning .help-card-title i { color: var(--quality-good); }
.help-card-bad { border-left-color: var(--quality-poor); }
.help-card-bad .help-card-title i { color: var(--quality-poor); }
.help-table-wrapper { overflow-x: auto; margin-top: var(--space-md); }
.help-table {
width: 100%; border-collapse: collapse; font-size: 0.9rem;
}
.help-table th {
background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-blue-dark));
color: var(--white); font-weight: 600; padding: var(--space-md);
text-align: left;
}
.help-table th:first-child { border-radius: var(--radius-md) 0 0 0; }
.help-table th:last-child { border-radius: 0 var(--radius-md) 0 0; }
.help-table td {
padding: var(--space-md); border-bottom: 1px solid var(--gray-200);
color: var(--text-secondary);
}
.help-table tbody tr:hover { background: var(--foam-white); }
.help-table td:first-child { font-weight: 600; color: var(--text-primary); }
.quality-cards {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-md); margin-top: var(--space-md);
}
.quality-card {
background: var(--bg-secondary); border-radius: var(--radius-lg);
padding: var(--space-lg); text-align: center;
}
.quality-card .quality-badge {
display: inline-block; margin-bottom: var(--space-sm);
padding: var(--space-xs) var(--space-md); font-size: 0.85rem;
}
.quality-card p { margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.help-faq { display: flex; flex-direction: column; gap: var(--space-sm); }
.faq-item {
background: var(--bg-secondary); border-radius: var(--radius-lg);
border: 1px solid var(--gray-200); overflow: hidden;
transition: border-color 0.2s ease;
}
.faq-item[open] { border-color: var(--ocean-blue); }
.faq-question {
font-weight: 600; font-size: 0.95rem; padding: var(--space-md) var(--space-lg);
cursor: pointer; display: flex; align-items: center; gap: var(--space-sm);
list-style: none; color: var(--text-primary); transition: color 0.2s ease;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
content: '\f078'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
font-weight: 900; font-size: 0.7rem; margin-left: auto; color: var(--text-secondary);
transition: transform 0.2s ease;
}
.faq-item[open] .faq-question::after { transform: rotate(180deg); }
.faq-question:hover { color: var(--ocean-blue); }
.faq-question i { color: var(--ocean-blue); width: 20px; text-align: center; flex-shrink: 0; }
.faq-answer {
padding: 0 var(--space-lg) var(--space-lg);
color: var(--text-secondary); font-size: 0.9rem; line-height: 1.7;
}
.faq-answer p { margin: 0; }
.help-contact-section {
background: linear-gradient(135deg, var(--ocean-blue), var(--surf-navy));
border-radius: var(--radius-xl); padding: var(--space-xl);
margin-bottom: var(--space-lg); color: var(--white); text-align: center;
}
.help-contact-section .help-section-title {
color: var(--white); border-bottom-color: rgba(255,255,255,0.3);
justify-content: center;
}
.help-contact-section .help-section-title i { color: rgba(255,255,255,0.8); }
.help-contact-section .help-section-content { color: rgba(255,255,255,0.9); }
.help-contact-section .help-section-content p { margin-bottom: var(--space-lg); }
.help-contact-links {
display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap;
}
@media (max-width: 768px) {
.help-page { padding: var(--space-md); }
.help-section { padding: var(--space-lg); }
.help-section-title { font-size: 1.15rem; }
.quick-nav-links { grid-template-columns: repeat(2, 1fr); }
.help-cards { grid-template-columns: 1fr; }
.quality-cards { grid-template-columns: repeat(2, 1fr); }
.help-contact-links { flex-direction: column; align-items: stretch; }
.help-contact-links .btn { justify-content: center; }
}
@media (max-width: 480px) {
.quick-nav-links { grid-template-columns: 1fr; }
.quality-cards { grid-template-columns: 1fr; }
}
/* ====== FAVOURITES PAGE ====== */
.favourites-page { max-width: 900px; margin: 0 auto; }
.favourites-section, .add-spots-section {
margin-bottom: var(--space-xl);
}
.favourites-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: var(--space-md);
}
.empty-favourites {
text-align: center; padding: var(--space-2xl);
background: var(--bg-secondary); border-radius: var(--radius-xl);
border: 2px dashed var(--gray-300);
}
.empty-favourites i { font-size: 3rem; color: var(--gray-400); margin-bottom: var(--space-md); display: block; }
.empty-favourites h3 { font-size: 1.25rem; margin: 0 0 var(--space-sm); color: var(--text-primary); }
.empty-favourites p { margin: 0; color: var(--text-secondary); font-size: 0.95rem; }
.search-box {
position: relative; margin-bottom: var(--space-lg);
}
.search-box input {
width: 100%; padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-2xl);
border: 2px solid var(--gray-200); border-radius: var(--radius-lg);
font-size: 0.95rem; background: var(--white); color: var(--text-primary);
transition: border-color 0.2s ease;
}
.search-box input:focus { border-color: var(--ocean-blue); outline: none; box-shadow: 0 0 0 3px rgba(26,111,160,0.1); }
.search-box input::placeholder { color: var(--text-secondary); }
.search-box > i {
position: absolute; left: var(--space-md); top: 50%;
transform: translateY(-50%); color: var(--text-secondary); font-size: 0.9rem;
pointer-events: none;
}
.available-spots-grid {
display: flex; flex-direction: column; gap: var(--space-xs);
}
.available-spot-card {
display: flex; justify-content: space-between; align-items: center;
padding: var(--space-md) var(--space-lg);
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--radius-lg); transition: all 0.15s ease;
}
.available-spot-card:hover { border-color: var(--ocean-blue-light); background: var(--foam-white); }
.available-spot-info { min-width: 0; }
.available-spot-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.available-spot-region { font-size: 0.8rem; color: var(--text-secondary); }
.add-favourite-btn {
background: var(--ocean-blue); color: var(--white); border: none;
padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
font-size: 0.85rem; font-weight: 600; cursor: pointer;
transition: all 0.2s ease; flex-shrink: 0; display: flex; align-items: center;
gap: var(--space-xs);
}
.add-favourite-btn:hover { background: var(--ocean-blue-dark); transform: translateY(-1px); }
.remove-favourite-btn-header {
background: none; border: 1px solid var(--gray-300); color: var(--text-secondary);
padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
font-size: 0.8rem; font-weight: 500; cursor: pointer;
transition: all 0.2s ease; display: flex; align-items: center;
gap: var(--space-xs);
}
.remove-favourite-btn-header:hover {
border-color: var(--quality-poor); color: var(--quality-poor);
background: rgba(220,38,38,0.05);
}
.favourite-card-footer {
padding: var(--space-sm) var(--space-md);
border-top: 1px solid var(--gray-100);
display: flex; justify-content: flex-end;
}
.no-spots-found {
text-align: center; padding: var(--space-xl); color: var(--text-secondary);
font-style: italic;
}
.spot-card-link { text-decoration: none; color: inherit; display: block; }
.star-rating-center { display: flex; justify-content: center; margin: var(--space-xs) 0; }
@media (max-width: 768px) {
.favourites-page { padding: var(--space-md); }
.favourites-grid { grid-template-columns: 1fr; }
}
/* ====== ABOUT PAGE ====== */
/* ====== ABOUT PAGE ====== */
.ab-hero { background: var(--surf-navy); color: var(--white); position: relative; }
.ab-hero-inner {
max-width: 1000px; margin: 0 auto;
padding: clamp(2.5rem, 6vw, 4rem) var(--space-lg) 0;
text-align: center;
}
.ab-hero-eyebrow {
font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--wave-teal); margin: 0 0 var(--space-sm);
}
.ab-hero-title {
font-family: var(--font-display); font-size: clamp(1.8rem, 4.5vw, 2.6rem);
font-weight: 400; margin: 0 0 var(--space-sm); color: var(--white);
}
.ab-hero-sub {
font-size: 0.92rem; color: rgba(232,226,214,0.55); margin: 0; line-height: 1.55;
max-width: 520px; display: inline-block;
padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.ab-hero-wave { display: block; width: 100%; height: 40px; position: relative; z-index: 1; }
.ab-body { max-width: 800px; margin: 0 auto; padding: var(--space-lg); }
.ab-section { margin-bottom: var(--space-2xl); }
.ab-section-title {
font-family: var(--font-display); font-size: 1.4rem; font-weight: 400;
color: var(--text-primary); margin: 0 0 var(--space-md);
}
.ab-prose p {
font-size: 0.92rem; line-height: 1.7; color: var(--text-secondary);
margin: 0 0 var(--space-md);
}
/* Steps */
.ab-steps {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.ab-step {
background: var(--white); border-radius: 12px; padding: 22px;
border: 1px solid var(--gray-200);
}
.ab-step-num {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: var(--surf-navy); color: var(--white);
font-family: var(--font-display); font-size: 0.85rem;
margin-bottom: 12px;
}
.ab-step h3 {
font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
color: var(--text-primary); margin: 0 0 8px;
}
.ab-step p {
font-size: 0.84rem; line-height: 1.6; color: var(--text-secondary); margin: 0;
}
/* Tech section */
.ab-tech {
background: var(--bg-tertiary);
margin: 0 calc(-50vw + 50%) var(--space-2xl);
padding: clamp(2.5rem, 5vw, 3.5rem) var(--space-lg);
}
.ab-tech-inner { max-width: 800px; margin: 0 auto; }
.ab-tech-title {
font-family: var(--font-display); font-size: 1.4rem; font-weight: 400;
color: var(--text-primary); margin: 0 0 var(--space-lg); text-align: center;
}
.ab-tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ab-tech-block {
background: var(--white); border-radius: 12px; padding: 22px;
border: 1px solid var(--gray-200);
}
.ab-tech-block h3 {
font-family: var(--font-display); font-size: 1rem; font-weight: 600;
color: var(--text-primary); margin: 0 0 12px;
}
.ab-tech-block ul { list-style: none; padding: 0; margin: 0; }
.ab-tech-block li {
padding: 6px 0 6px 20px; position: relative;
font-size: 0.84rem; color: var(--text-secondary); line-height: 1.5;
}
.ab-tech-block li::before {
content: '\2713'; position: absolute; left: 0;
color: var(--ocean-blue); font-weight: 700; font-size: 0.8rem;
}
/* CTA */
.ab-cta {
background: var(--surf-navy); color: var(--white);
margin: 0 calc(-50vw + 50%);
padding: clamp(2rem, 4vw, 3rem) var(--space-lg);
text-align: center;
}
.ab-cta-title {
font-family: var(--font-display); font-size: 1.3rem; font-weight: 400;
margin: 0 0 6px; color: var(--white);
}
.ab-cta-desc {
font-size: 0.88rem; color: rgba(232,226,214,0.5);
margin: 0 0 var(--space-lg);
}
.ab-cta-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) {
.ab-body { padding: var(--space-md) var(--space-sm); }
.ab-steps { grid-template-columns: 1fr; }
.ab-tech-grid { grid-template-columns: 1fr; }
.ab-tech { margin-left: calc(-1 * var(--space-sm)); margin-right: calc(-1 * var(--space-sm)); }
.ab-cta { margin-left: calc(-1 * var(--space-sm)); margin-right: calc(-1 * var(--space-sm)); }
.ab-cta-actions { flex-direction: column; align-items: stretch; }
}
/* ====== COMPARISON PAGE ====== */
.cmp-body { max-width: 1000px; margin: 0 auto; padding: var(--space-lg); }
.cmp-selector { margin-bottom: var(--space-xl); }
.cmp-selector-label {
display: block; font-size: 0.72rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-secondary); margin-bottom: 8px;
}
.cmp-section { margin-bottom: var(--space-xl); }
.cmp-section-title {
font-family: var(--font-display); font-size: 1.3rem; font-weight: 400;
color: var(--text-primary); margin: 0 0 4px;
}
.cmp-meta { font-size: 0.78rem; color: var(--text-secondary); margin: 0 0 var(--space-md); }
/* Chart */
.cmp-chart-wrap {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: 12px; padding: var(--space-md);
height: 280px; position: relative;
}
.cmp-legend {
display: flex; gap: 16px; margin-top: 10px;
font-size: 0.78rem; color: var(--text-secondary);
}
.cmp-legend-item { display: flex; align-items: center; gap: 6px; }
.cmp-legend-dot {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
/* Table */
.cmp-table-wrap { overflow-x: auto; }
.cmp-table {
width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.cmp-table th {
text-align: left; padding: 10px 12px;
font-size: 0.72rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--text-secondary);
border-bottom: 2px solid var(--gray-200);
background: var(--bg-secondary);
}
.cmp-day-row td {
padding: 10px 12px; font-weight: 600;
background: var(--surf-navy); color: var(--white);
font-family: var(--font-display); font-size: 0.9rem;
}
.cmp-hour-row td { padding: 8px 12px; border-bottom: 1px solid var(--gray-100); }
.cmp-hour-row--alt { background: var(--gray-50); }
.cmp-time { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; }
.cmp-gfs {
display: block; font-family: var(--font-display);
font-size: 0.92rem; font-weight: 400; color: #0e7490;
}
.cmp-sl {
display: block; font-size: 0.78rem; color: #b45309;
}
.cmp-diff {
font-family: var(--font-display); font-size: 0.85rem; font-weight: 400;
color: var(--text-secondary);
}
.cmp-diff--pos { color: #059669; }
.cmp-diff--neg { color: #dc2626; }
.cmp-empty {
text-align: center; padding: var(--space-2xl);
color: var(--text-secondary); font-size: 0.92rem;
}
.cmp-logout {
text-align: center; margin-top: var(--space-lg);
font-size: 0.82rem;
}
.cmp-logout a { color: var(--text-secondary); }
@media (max-width: 768px) {
.cmp-body { padding: var(--space-md) var(--space-sm); }
.cmp-chart-wrap { height: 220px; }
.cmp-table { font-size: 0.78rem; }
.cmp-table th, .cmp-hour-row td { padding: 6px 8px; }
}
/* ====== SPOT COMPARE PAGE ====== */
.sc-selectors {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 14px; margin-bottom: var(--space-xl);
}
.sc-sel-label {
display: block; font-size: 0.68rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-secondary); margin-bottom: 6px;
}
.sc-table-wrap { overflow-x: auto; }
.sc-table {
width: 100%; border-collapse: collapse;
background: var(--white); border-radius: 12px;
overflow: hidden; border: 1px solid var(--gray-200);
}
.sc-table th {
padding: 16px 18px; text-align: center;
background: var(--surf-navy); color: var(--white);
font-family: var(--font-display);
font-size: 1rem; font-weight: 600;
}
.sc-spot-link { color: var(--white); text-decoration: none; }
.sc-spot-link:hover { text-decoration: underline; }
.sc-quality {
display: inline-block; font-size: 0.65rem; font-weight: 700;
padding: 3px 8px; border-radius: 100px; margin-top: 6px;
}
.sc-table td {
padding: 12px 18px; border-bottom: 1px solid var(--gray-100);
text-align: center;
}
.sc-label {
text-align: left !important; font-size: 0.78rem;
font-weight: 600; color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.04em;
background: var(--gray-50);
}
.sc-val {
font-family: var(--font-display);
font-size: 1.1rem; font-weight: 400;
color: var(--text-primary);
}
.sc-val--primary { font-size: 1.3rem; color: var(--surf-navy); }
.sc-val .star-rating { justify-content: center; }
@media (max-width: 768px) {
.sc-selectors { grid-template-columns: 1fr; }
.sc-table th { font-size: 0.85rem; padding: 12px; }
.sc-table td { padding: 10px 12px; }
.sc-val { font-size: 0.95rem; }
}
/* ====== LEGAL PAGES ====== */
.legal-page { max-width: 800px; margin: 0 auto; padding: var(--space-md); }
.legal-header {
text-align: center; margin-bottom: var(--space-xl);
padding: var(--space-xl) var(--space-md);
background: linear-gradient(135deg, var(--ocean-blue), var(--deep-sea));
border-radius: var(--radius-lg); color: var(--white);
}
.legal-header h1 { color: var(--white); margin-bottom: var(--space-xs); }
.legal-updated { opacity: 0.8; font-size: 0.85rem; }
.legal-body { padding: 0 var(--space-sm); }
.legal-section {
margin-bottom: var(--space-xl);
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--gray-100);
}
.legal-section:last-child { border-bottom: none; }
.legal-section h2 {
font-size: 1.2rem; color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.legal-section h3 {
font-size: 1rem; color: var(--text-secondary);
margin: var(--space-md) 0 var(--space-xs);
}
.legal-section p { color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-sm); }
.legal-section ul {
color: var(--text-secondary); line-height: 1.7;
padding-left: 1.5rem; margin-bottom: var(--space-sm);
}
.legal-section li { margin-bottom: var(--space-xs); }
.legal-section a { color: var(--ocean-blue); text-decoration: underline; }
@media (max-width: 768px) {
.legal-page { padding: var(--space-sm); }
.legal-header { padding: var(--space-lg) var(--space-sm); }
}
/* ====== MAPS PAGE POLISH ====== */
.controls-section {
padding: var(--space-lg); margin-bottom: var(--space-md);
}
.dropdowns-container {
display: flex; gap: var(--space-lg); flex-wrap: wrap;
margin-bottom: var(--space-md);
}
.custom-dropdown { flex: 1; min-width: 200px; position: relative; }
.dropdown-label {
font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--text-secondary);
margin-bottom: var(--space-xs); display: flex; align-items: center;
gap: var(--space-xs);
}
.dropdown-label i { color: var(--ocean-blue); font-size: 0.7rem; }
.dropdown-button {
width: 100%; padding: var(--space-md);
background: var(--white); border: 2px solid var(--gray-200);
border-radius: var(--radius-lg); font-size: 0.95rem;
color: var(--text-primary); cursor: pointer;
display: flex; justify-content: space-between; align-items: center;
transition: border-color 0.2s ease; font-weight: 500;
}
.dropdown-button:hover { border-color: var(--ocean-blue); }
.dropdown-arrow { font-size: 0.75rem; color: var(--text-secondary); transition: transform 0.2s ease; }
.dropdown-menu {
display: none; position: absolute; top: 100%;
left: 0; right: 0; background: var(--white);
border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg); z-index: 100;
max-height: 300px; overflow-y: auto; margin-top: var(--space-xs);
}
.dropdown-menu.show { display: block; }
.dropdown-item {
padding: var(--space-md); cursor: pointer;
transition: background 0.15s ease; font-size: 0.9rem;
color: var(--text-primary);
}
.dropdown-item:hover { background: var(--foam-white); }
.dropdown-item.selected { background: var(--foam-white); color: var(--ocean-blue); font-weight: 600; }
.spot-count {
display: flex; align-items: center; gap: var(--space-xs);
font-size: 0.9rem; font-weight: 600; color: var(--text-secondary);
}
.spot-count i { color: var(--ocean-blue); }
@media (max-width: 768px) {
.dropdowns-container { flex-direction: column; gap: var(--space-md); }
}
/* Model comparison page */
.mc-models {
display: flex; gap: 12px; margin-bottom: var(--space-xl);
flex-wrap: wrap;
}
.mc-model-card {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; background: var(--white);
border: 1px solid var(--gray-200); border-radius: 10px;
flex: 1; min-width: 220px;
}
.mc-model-dot {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.mc-model-card strong {
display: block; font-size: 0.88rem; color: var(--text-primary);
}
.mc-model-detail {
display: block; font-size: 0.72rem; color: var(--text-tertiary); margin-top: 2px;
}
.mc-spot-header {
display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
}
.mc-spot-name {
font-family: var(--font-display); font-size: 1.3rem;
font-weight: 400; color: var(--surf-navy); margin: 0;
}
.mc-spot-coords {
font-size: 0.72rem; color: var(--text-tertiary);
}
.mc-model-tag {
display: inline-block; font-size: 0.62rem; font-weight: 600;
padding: 2px 8px; border-radius: 20px;
background: var(--bg-secondary); color: var(--text-secondary);
margin-left: 4px; vertical-align: middle;
}
.mc-chart-wrap {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: 12px; padding: var(--space-md);
height: 260px; position: relative; margin-bottom: var(--space-md);
}
.mc-table-wrap { overflow-x: auto; margin-bottom: var(--space-md); }
.mc-table {
width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.mc-table th {
padding: 8px 10px; text-align: left;
font-size: 0.68rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--text-secondary); background: var(--bg-secondary);
border-bottom: 2px solid var(--gray-200);
}
.mc-th-gfs { color: rgba(239,68,68,0.7); }
.mc-th-ibi { color: var(--ocean-blue); }
.mc-table td {
padding: 7px 10px; border-bottom: 1px solid var(--gray-100);
font-variant-numeric: tabular-nums;
}
.mc-time {
font-weight: 600; font-size: 0.78rem; color: var(--text-primary);
white-space: nowrap;
}
.mc-val { color: var(--text-secondary); }
.mc-val--gfs { color: rgba(239,68,68,0.8); }
.mc-val--ibi { color: var(--ocean-blue); font-weight: 600; }
.mc-val--diff { font-size: 0.75rem; }
.mc-diff--pos { color: var(--ocean-blue); }
.mc-diff--neg { color: rgba(239,68,68,0.7); }
.mc-explainer {
background: var(--bg-secondary); border-radius: 12px;
padding: 24px; max-width: 720px;
}
.mc-explainer h3 {
font-family: var(--font-display); font-size: 1.1rem;
font-weight: 400; color: var(--surf-navy); margin: 0 0 12px;
}
.mc-explainer p {
font-size: 0.85rem; color: var(--text-secondary);
line-height: 1.6; margin: 0 0 10px;
}
.mc-explainer p:last-child { margin-bottom: 0; }
.mc-loading {
display: flex; align-items: center; justify-content: center;
gap: 10px; padding: 40px; color: var(--text-tertiary);
font-size: 0.85rem;
}
.mc-spinner {
width: 20px; height: 20px; border: 2px solid var(--gray-200);
border-top-color: var(--ocean-blue); border-radius: 50%;
animation: mc-spin 0.6s linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
.mc-models { flex-direction: column; }
.mc-chart-wrap { height: 200px; }
}
/* ═══════════════════════════════════════════
Community — Gallery, Posts, Likes, Upload
═══════════════════════════════════════════ */
/* Tab count badge */
.fc-tab-count {
display: inline-flex; align-items: center; justify-content: center;
background: var(--gray-200); color: var(--text-secondary);
font-size: 0.65rem; font-weight: 700; border-radius: 8px;
min-width: 18px; height: 16px; padding: 0 5px; margin-left: 3px;
}
/* Photo gallery grid */
.community-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: var(--space-md);
}
@media (max-width: 768px) { .community-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .community-gallery { grid-template-columns: 1fr; } }
.community-photo-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-md);
overflow: hidden;
transition: box-shadow 0.15s;
}
.community-photo-card:hover { box-shadow: var(--shadow-sm); }
.community-photo-link { display: block; }
.community-photo-link img {
width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
}
.community-photo-caption {
padding: 8px 10px 0; font-size: 0.78rem; color: var(--text-secondary);
line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.community-photo-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 10px 8px;
}
.community-photo-user {
font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
}
/* Like button */
.community-like-btn {
display: inline-flex; align-items: center; gap: 4px;
background: none; border: none; cursor: pointer;
font-size: 0.78rem; color: var(--text-secondary);
padding: 4px 6px; border-radius: var(--radius-sm);
transition: color 0.15s;
}
.community-like-btn:hover { color: var(--text-primary); }
.community-like-btn.liked { color: #ef4444; }
.community-like-btn.liked:hover { color: #dc2626; }
.community-like-btn:disabled { cursor: default; opacity: 0.5; }
.community-like-btn i { font-size: 0.82rem; }
/* Report button */
.community-report-btn {
display: inline-flex; align-items: center; justify-content: center;
background: none; border: none; cursor: pointer;
color: var(--gray-300); font-size: 0.65rem; padding: 4px 5px;
border-radius: var(--radius-sm); transition: color 0.15s;
}
.community-report-btn:hover { color: var(--text-secondary); }
/* Hidden photos on spot page (show in batches of 6) */
.spot-photo-hidden { display: none; }
/* Report modal reasons */
.report-reasons { display: flex; flex-direction: column; gap: 6px; }
.report-reason-opt {
display: flex; align-items: center; gap: 8px;
font-size: 0.82rem; cursor: pointer; padding: 6px 8px;
border-radius: var(--radius-sm); transition: background 0.1s;
}
.report-reason-opt:hover { background: var(--gray-50); }
.report-reason-opt input { margin: 0; }
/* Local knowledge posts */
.community-posts {
display: flex; flex-direction: column; gap: 8px;
margin-bottom: var(--space-md);
}
.community-post-card {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--radius-md); padding: 12px 14px;
}
.community-post-body {
font-size: 0.88rem; line-height: 1.55; color: var(--text-primary);
margin-bottom: 6px; word-wrap: break-word;
}
.community-post-footer {
display: flex; align-items: center; justify-content: space-between;
}
.community-post-user {
font-size: 0.72rem; color: var(--text-secondary);
}
.community-post-pending {
border-style: dashed; opacity: 0.7;
}
.community-post-pending-label {
font-size: 0.75rem; color: var(--text-muted);
}
.community-post-pending-label i { margin-right: 3px; }
/* Post form */
.community-post-form {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--radius-md); padding: 12px;
}
.community-post-form textarea {
width: 100%; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
padding: 10px 12px; font-size: 0.88rem; font-family: var(--font-body);
resize: vertical; min-height: 60px; box-sizing: border-box;
transition: border-color 0.15s;
}
.community-post-form textarea:focus {
outline: none; border-color: var(--ocean-blue);
box-shadow: 0 0 0 3px rgba(14,116,144,0.1);
}
.community-post-form-footer {
display: flex; align-items: center; justify-content: space-between;
margin-top: 8px;
}
.char-count { font-size: 0.72rem; color: var(--text-muted); }
/* Section header with inline action */
.community-section-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 2px;
}
.community-header-action {
display: inline-flex; align-items: center; gap: 5px;
font-size: 0.78rem; font-weight: 600; color: var(--ocean-blue);
background: none; border: 1px solid rgba(14,116,144,0.25);
border-radius: var(--radius-sm); padding: 6px 12px;
cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.community-header-action:hover {
background: rgba(14,116,144,0.06); border-color: rgba(14,116,144,0.4);
}
.community-header-action i { font-size: 0.7rem; }
/* Empty card — horizontal layout for spot page */
.community-empty-card {
display: flex; align-items: flex-start; gap: 16px;
background: var(--white); border: 1.5px dashed var(--gray-200);
border-radius: var(--radius-md); padding: 20px;
}
.community-empty-card-icon {
width: 44px; height: 44px; border-radius: var(--radius-md);
background: rgba(14,116,144,0.06); color: var(--ocean-blue);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 1.1rem;
}
.community-empty-card-text { flex: 1; }
.community-empty-card-text strong {
display: block; font-size: 0.88rem; font-weight: 600;
color: var(--text-primary); margin-bottom: 4px;
}
.community-empty-card-text p {
font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5;
margin: 0 0 10px;
}
.community-empty-card-text p:last-child { margin-bottom: 0; }
.community-empty-card-text a {
color: var(--ocean-blue); font-weight: 600; text-decoration: none;
}
.community-empty-card-text a:hover { text-decoration: underline; }
/* Empty hero — gallery page full-width empty state */
.community-empty-hero {
text-align: center; padding: var(--space-2xl) var(--space-lg);
max-width: 400px; margin: 0 auto;
}
.community-empty-hero .community-empty-icon {
width: 72px; height: 72px; border-radius: 50%;
background: rgba(14,116,144,0.06);
display: flex; align-items: center; justify-content: center;
margin: 0 auto var(--space-lg);
}
.community-empty-hero .community-empty-icon i {
font-size: 1.6rem; color: var(--ocean-blue); opacity: 0.7;
}
.community-empty-title {
font-family: var(--font-display); font-size: 1.2rem; font-weight: 400;
color: var(--text-primary); margin: 0 0 8px;
}
.community-empty-desc {
font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6;
margin: 0 0 var(--space-lg);
}
.community-empty-action {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.85rem; font-weight: 600; color: #fff;
background: var(--ocean-blue); border: none;
border-radius: var(--radius-md); padding: 10px 22px;
text-decoration: none; transition: background 0.15s;
}
.community-empty-action:hover { background: #0c5f75; color: #fff; }
/* Post form wrapper (handles empty state layout) */
.community-post-form-wrap {
margin-top: var(--space-sm);
}
.community-post-form-wrap--empty {
background: var(--white); border: 1.5px dashed var(--gray-200);
border-radius: var(--radius-md); padding: 20px;
text-align: center;
}
.community-post-form-wrap--empty .community-empty-card-icon {
margin: 0 auto;
}
.community-post-form-intro {
font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5;
margin: 0 0 14px; max-width: 380px; margin-left: auto; margin-right: auto;
}
.community-post-form-wrap--empty .community-post-form {
background: none; border: none; padding: 0;
}
.community-post-form-wrap--empty .community-post-form textarea {
text-align: left;
}
@media (max-width: 480px) {
.community-empty-card { flex-direction: column; text-align: center; align-items: center; }
.community-empty-card-icon { margin: 0 auto; }
}
/* Upload modal */
.upload-modal-overlay {
position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
padding: var(--space-lg);
}
.upload-modal {
background: var(--white); border-radius: var(--radius-lg);
max-width: 480px; width: 100%; padding: var(--space-lg);
box-shadow: var(--shadow-xl); max-height: 90vh; overflow-y: auto;
}
.upload-modal-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--space-md);
}
.upload-modal-header h3 {
font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; margin: 0;
}
.upload-modal-close {
background: none; border: none; font-size: 1.4rem; color: var(--text-secondary);
cursor: pointer; padding: 0 4px; line-height: 1;
}
.upload-modal-close:hover { color: var(--text-primary); }
.upload-dropzone {
border: 2px dashed var(--gray-300); border-radius: var(--radius-md);
padding: var(--space-xl) var(--space-lg); text-align: center;
color: var(--text-secondary); cursor: pointer;
transition: border-color 0.15s, background 0.15s;
margin-bottom: var(--space-md);
}
.upload-dropzone:hover,
.upload-dropzone.drag-active {
border-color: var(--ocean-blue); background: rgba(14,116,144,0.04);
}
.upload-dropzone i { font-size: 2rem; color: var(--gray-400); margin-bottom: 8px; display: block; }
.upload-dropzone p { margin: 0 0 4px; font-size: 0.85rem; }
.upload-hint { font-size: 0.72rem; color: var(--text-muted); }
.upload-browse {
color: var(--ocean-blue); font-weight: 600; cursor: pointer;
text-decoration: underline;
}
.upload-preview {
position: relative; margin-bottom: var(--space-md);
border-radius: var(--radius-md); overflow: hidden;
}
.upload-preview img {
width: 100%; max-height: 300px; object-fit: contain;
background: var(--gray-100); display: block;
}
.upload-preview-remove {
position: absolute; top: 8px; right: 8px;
background: rgba(0,0,0,0.6); color: #fff; border: none;
width: 28px; height: 28px; border-radius: 50%;
font-size: 1rem; cursor: pointer; display: flex;
align-items: center; justify-content: center;
}
.upload-preview-remove:hover { background: rgba(0,0,0,0.8); }
.upload-caption-input {
width: 100%; padding: 10px 12px; border: 1px solid var(--gray-200);
border-radius: var(--radius-sm); font-size: 0.88rem;
font-family: var(--font-body); box-sizing: border-box;
margin-bottom: var(--space-md); transition: border-color 0.15s;
}
.upload-caption-input:focus {
outline: none; border-color: var(--ocean-blue);
box-shadow: 0 0 0 3px rgba(14,116,144,0.1);
}
.upload-submit { width: 100%; justify-content: center; }
.upload-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.upload-status {
text-align: center; font-size: 0.82rem; margin-top: var(--space-sm);
color: var(--text-secondary); min-height: 1.2em;
}
/* ── Gallery page ── */
.gallery-hero {
background: var(--surf-navy); color: var(--sand);
padding: var(--space-2xl) var(--space-lg) var(--space-xl);
}
.gallery-hero-inner {
max-width: 1000px; margin: 0 auto;
}
.gallery-hero-title {
font-family: var(--font-display); font-size: 1.6rem; font-weight: 400;
margin: 0 0 6px; color: var(--white);
}
.gallery-hero-sub {
font-size: 0.88rem; color: rgba(232,226,214,0.65); margin: 0;
}
.gallery-page { max-width: 1000px; margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
.community-photo-spot {
color: var(--ocean-blue); text-decoration: none; font-weight: 500;
margin-left: 2px;
}
.community-photo-spot:hover { text-decoration: underline; }
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-load-more {
display: block; margin: var(--space-xl) auto 0; padding: 10px 28px;
font-size: 0.85rem; font-weight: 600; color: var(--ocean-blue);
background: rgba(14,116,144,0.08); border: none;
border-radius: var(--radius-md); cursor: pointer;
transition: background 0.15s;
}
.gallery-load-more:hover { background: rgba(14,116,144,0.14); }
/* ── Photo Lightbox ── */
.photo-lightbox {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,0.92);
display: flex; align-items: center; justify-content: center;
padding: var(--space-md);
}
.lightbox-close {
position: absolute; top: 16px; right: 16px; z-index: 2;
background: rgba(255,255,255,0.15); border: none;
color: #fff; font-size: 1.4rem; width: 40px; height: 40px;
border-radius: 50%; cursor: pointer; display: flex;
align-items: center; justify-content: center;
transition: background 0.15s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); }
.lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,0.12); border: none;
color: #fff; font-size: 1.1rem; width: 44px; height: 44px;
border-radius: 50%; cursor: pointer; display: flex;
align-items: center; justify-content: center; z-index: 2;
transition: background 0.15s;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-nav--prev { left: 16px; }
.lightbox-nav--next { right: 16px; }
.lightbox-content {
display: flex; flex-direction: column; align-items: center;
max-width: 90vw; max-height: 90vh;
}
.lightbox-img {
max-width: 90vw; max-height: 75vh; object-fit: contain;
border-radius: var(--radius-md);
}
.lightbox-info {
background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
border-radius: var(--radius-md); padding: 12px 16px;
margin-top: 12px; color: #fff; min-width: 200px;
text-align: center;
}
.lightbox-meta { font-size: 0.82rem; margin-bottom: 4px; }
.lightbox-user { font-weight: 600; }
.lightbox-sep { margin: 0 6px; opacity: 0.5; }
.lightbox-spot { color: rgba(255,255,255,0.8); text-decoration: none; }
.lightbox-spot:hover { color: #fff; text-decoration: underline; }
.lightbox-caption {
font-size: 0.85rem; color: rgba(255,255,255,0.8);
margin-bottom: 8px; line-height: 1.4;
}
.lightbox-info .community-like-btn { color: rgba(255,255,255,0.7); }
.lightbox-info .community-like-btn:hover { color: #fff; }
.lightbox-info .community-like-btn.liked { color: #ef4444; }
@media (max-width: 640px) {
.lightbox-nav { width: 36px; height: 36px; font-size: 0.9rem; }
.lightbox-nav--prev { left: 8px; }
.lightbox-nav--next { right: 8px; }
.lightbox-img { max-height: 65vh; border-radius: var(--radius-sm); }
.lightbox-info { padding: 10px 12px; }
}
/* =====================================================
Admin · Spot Management (/dashboard/spots)
===================================================== */
.adm-page { max-width: 1200px; margin: 0 auto; padding: var(--space-xl) var(--space-lg) var(--space-2xl); }
.adm-header {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--space-lg); flex-wrap: wrap;
padding-bottom: var(--space-lg); margin-bottom: var(--space-lg);
border-bottom: 1px solid var(--gray-200);
}
.adm-header-titles { min-width: 0; }
.adm-eyebrow {
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-muted); margin: 0 0 4px;
}
.adm-title {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(1.4rem, 1.6vw + 1rem, 1.85rem);
color: var(--text-primary); margin: 0; line-height: 1.1;
}
.adm-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: var(--radius-md);
font-size: 0.85rem; font-weight: 600; line-height: 1; cursor: pointer;
border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s;
text-decoration: none; white-space: nowrap;
}
.adm-btn i { font-size: 0.78rem; }
.adm-btn-primary { background: var(--surf-navy); color: var(--white); }
.adm-btn-primary:hover { background: var(--surf-navy-hover); color: var(--white); }
.adm-btn-ghost { background: var(--white); color: var(--text-primary); border-color: var(--gray-300); }
.adm-btn-ghost:hover { border-color: var(--surf-navy); color: var(--surf-navy); }
.adm-btn:focus-visible { outline: 2px solid var(--ocean-blue); outline-offset: 2px; }
.adm-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.adm-alerts:empty { display: none; }
.adm-alerts { margin-bottom: var(--space-md); }
/* Toolbar — search + region chips */
.adm-toolbar {
display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap;
padding: var(--space-md); margin-bottom: var(--space-md);
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.adm-search {
position: relative; flex: 1 1 280px; min-width: 240px;
}
.adm-search > i {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--text-muted); font-size: 0.85rem; pointer-events: none;
}
.adm-search input {
width: 100%; padding: 10px 14px 10px 38px;
background: var(--bg-page); border: 1px solid var(--gray-200);
border-radius: var(--radius-md); font-size: 0.92rem; color: var(--text-primary);
font-family: inherit; transition: border-color 0.15s, background 0.15s;
}
.adm-search input::placeholder { color: var(--text-muted); }
.adm-search input:focus {
outline: none; background: var(--white); border-color: var(--surf-navy);
box-shadow: 0 0 0 3px rgba(15, 29, 46, 0.08);
}
.adm-search input::-webkit-search-cancel-button { cursor: pointer; }
.adm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border-radius: 999px;
background: var(--bg-page); border: 1px solid var(--gray-200);
color: var(--text-secondary); font-size: 0.82rem; font-weight: 500;
cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.adm-chip:hover { border-color: var(--gray-400); color: var(--text-primary); }
.adm-chip.is-active {
background: var(--surf-navy); border-color: var(--surf-navy); color: var(--white);
}
.adm-chip.is-active .adm-chip-count { color: rgba(255,255,255,0.75); }
.adm-chip-count {
font-variant-numeric: tabular-nums;
font-size: 0.74rem; color: var(--text-muted); font-weight: 500;
}
.adm-chip:focus-visible { outline: 2px solid var(--ocean-blue); outline-offset: 2px; }
.adm-result-count {
font-size: 0.78rem; color: var(--text-muted);
margin: 0 0 8px 4px; font-variant-numeric: tabular-nums;
}
/* Table */
.adm-table-wrap {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.adm-table {
width: 100%; border-collapse: collapse; font-size: 0.88rem;
}
.adm-table thead th {
text-align: left; font-weight: 600; font-size: 0.72rem;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--text-muted); padding: 12px 16px;
background: var(--bg-page); border-bottom: 1px solid var(--gray-200);
}
.adm-table tbody td {
padding: 14px 16px; border-bottom: 1px solid var(--gray-100);
vertical-align: middle; color: var(--text-primary);
}
.adm-table tbody tr:last-child td { border-bottom: none; }
.adm-row { transition: background 0.12s; }
.adm-row:hover { background: var(--bg-page); }
.adm-row.is-inactive .adm-spot-name,
.adm-row.is-inactive .adm-spot-id,
.adm-row.is-inactive .adm-cell-region,
.adm-row.is-inactive .adm-cell-type,
.adm-row.is-inactive .adm-cell-coords { opacity: 0.55; }
.adm-spot-name { font-weight: 600; line-height: 1.2; }
.adm-spot-id {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.72rem; color: var(--text-muted); margin-top: 3px;
letter-spacing: -0.01em;
}
.adm-cell-region { color: var(--text-secondary); white-space: nowrap; }
.adm-cell-type { color: var(--text-secondary); }
.adm-cell-coords {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.78rem; color: var(--text-muted); white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.adm-actions-col { width: 1%; }
/* Status pill */
.adm-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
font-size: 0.74rem; font-weight: 600; line-height: 1.2;
white-space: nowrap;
}
.adm-pill-dot {
width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}
.adm-pill-active {
background: rgba(34, 139, 84, 0.10); color: #1f7a4b;
}
.adm-pill-inactive {
background: rgba(107, 99, 88, 0.10); color: var(--text-muted);
}
/* Icon-only action buttons */
.adm-icon-btns { display: inline-flex; gap: 4px; justify-content: flex-end; }
.adm-icon-btn {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid transparent;
border-radius: var(--radius-md);
color: var(--text-muted); font-size: 0.82rem;
cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.adm-icon-btn:hover {
background: var(--bg-page); border-color: var(--gray-200); color: var(--surf-navy);
}
.adm-icon-btn-danger:hover {
background: rgba(184, 50, 36, 0.08); border-color: rgba(184, 50, 36, 0.2); color: var(--bg-unsafe);
}
.adm-icon-btn:focus-visible { outline: 2px solid var(--ocean-blue); outline-offset: 1px; }
/* Empty state */
.adm-empty {
padding: var(--space-2xl) var(--space-lg);
text-align: center; color: var(--text-muted);
}
.adm-empty i { font-size: 1.5rem; opacity: 0.5; margin-bottom: 8px; display: block; }
.adm-empty p { margin: 0; font-size: 0.9rem; }
/* Mobile — collapse less-critical columns and stack actions below */
@media (max-width: 768px) {
.adm-page { padding: var(--space-md); }
.adm-header { gap: var(--space-md); align-items: flex-start; }
.adm-header-actions { width: 100%; }
.adm-header-actions .adm-btn { flex: 1; justify-content: center; }
.adm-table thead { display: none; }
.adm-table, .adm-table tbody, .adm-table tr, .adm-table td {
display: block; width: 100%;
}
.adm-row { padding: 12px 14px; border-bottom: 1px solid var(--gray-100); position: relative; }
.adm-row:last-child { border-bottom: none; }
.adm-table tbody td { padding: 2px 0; border-bottom: none; }
.adm-cell-spot { padding-bottom: 8px !important; }
.adm-cell-region::before { content: "Region · "; color: var(--text-muted); font-size: 0.78rem; }
.adm-cell-type::before { content: "Type · "; color: var(--text-muted); font-size: 0.78rem; }
.adm-cell-coords { font-size: 0.74rem; }
.adm-cell-actions { padding-top: 10px !important; }
.adm-icon-btns { justify-content: flex-start; }
}
/* SR-only utility (used for actions column header) */
.adm-table .sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* =====================================================
Admin · Spot Modal
===================================================== */
.adm-modal {
position: fixed; inset: 0; z-index: 2000;
background: rgba(15, 29, 46, 0.55);
backdrop-filter: blur(4px);
display: none; align-items: stretch; justify-content: flex-end;
padding: 0;
opacity: 0; transition: opacity 0.18s ease;
}
.adm-modal.active { display: flex; opacity: 1; }
.adm-modal-panel {
background: var(--white);
width: min(720px, 100%);
height: 100%;
display: flex; flex-direction: column;
box-shadow: -16px 0 48px rgba(0,0,0,0.18);
transform: translateX(20px); opacity: 0;
transition: transform 0.22s ease, opacity 0.22s ease;
}
.adm-modal.active .adm-modal-panel { transform: translateX(0); opacity: 1; }
.adm-modal-header {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--space-md);
padding: 18px 24px 16px;
background: var(--white);
border-bottom: 1px solid var(--gray-200);
}
.adm-modal-eyebrow {
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-muted); margin: 0 0 4px;
}
.adm-modal-title {
font-family: var(--font-display); font-weight: 400;
font-size: 1.35rem; color: var(--text-primary); margin: 0; line-height: 1.2;
}
.adm-modal-close {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid transparent;
border-radius: var(--radius-md);
color: var(--text-muted); font-size: 0.95rem;
cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
flex-shrink: 0;
}
.adm-modal-close:hover { background: var(--bg-page); border-color: var(--gray-200); color: var(--text-primary); }
.adm-modal-form { flex: 1; overflow-y: auto; padding: 8px 24px 96px; }
/* Section grouping */
.adm-section {
padding: 18px 0;
border-bottom: 1px solid var(--gray-100);
}
.adm-section:last-of-type { border-bottom: none; }
.adm-section-title {
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-muted); margin: 0 0 12px;
}
/* Fields */
.adm-field { margin-bottom: 14px; }
.adm-field:last-child { margin-bottom: 0; }
.adm-field label {
display: block;
font-size: 0.78rem; font-weight: 600; color: var(--text-primary);
margin-bottom: 6px;
}
.adm-req { color: var(--bg-unsafe); font-weight: 700; margin-left: 1px; }
.adm-hint {
display: block; margin-top: 5px;
font-size: 0.74rem; color: var(--text-muted); line-height: 1.4;
}
.adm-field input[type="text"],
.adm-field input[type="number"],
.adm-field input[type="search"],
.adm-field select,
.adm-field textarea {
width: 100%;
padding: 10px 12px;
background: var(--white);
border: 1px solid var(--gray-300);
border-radius: var(--radius-md);
font-size: 0.9rem; font-family: inherit; color: var(--text-primary);
line-height: 1.4;
transition: border-color 0.15s, box-shadow 0.15s;
}
.adm-field input:focus,
.adm-field select:focus,
.adm-field textarea:focus {
outline: none; border-color: var(--surf-navy);
box-shadow: 0 0 0 3px rgba(15, 29, 46, 0.08);
}
.adm-field textarea { resize: vertical; min-height: 72px; }
.adm-field select {
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.adm-grid-2 {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
/* Toggle (Active switch) */
.adm-toggle {
position: relative;
display: flex; align-items: center; gap: 12px;
padding: 12px; margin: 0;
background: var(--bg-page); border: 1px solid var(--gray-200);
border-radius: var(--radius-md); cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.adm-toggle:hover { border-color: var(--gray-300); }
.adm-toggle input {
position: absolute;
width: 1px; height: 1px;
min-width: 0; min-height: 0;
margin: 0; padding: 0; border: 0;
opacity: 0; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap;
pointer-events: none;
}
.adm-toggle-track {
display: inline-block;
position: relative; flex-shrink: 0;
width: 38px; height: 22px;
background: var(--gray-300); border-radius: 999px;
transition: background 0.18s;
}
.adm-toggle-thumb {
display: block;
position: absolute; top: 2px; left: 2px;
width: 18px; height: 18px;
background: var(--white); border-radius: 999px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform 0.18s;
}
.adm-toggle input:checked ~ .adm-toggle-track { background: #1f7a4b; }
.adm-toggle input:checked ~ .adm-toggle-track .adm-toggle-thumb { transform: translateX(16px); }
.adm-toggle input:focus-visible ~ .adm-toggle-track {
box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.25);
}
.adm-toggle-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.adm-toggle-text strong { font-size: 0.88rem; color: var(--text-primary); font-weight: 600; }
.adm-toggle-text small { font-size: 0.76rem; color: var(--text-muted); }
/* Sticky footer with Save / Cancel */
.adm-modal-footer {
position: sticky; bottom: 0; z-index: 1;
display: flex; gap: 10px; justify-content: flex-end;
padding: 14px 24px;
background: var(--white);
border-top: 1px solid var(--gray-200);
margin: 0 -24px;
}
/* Mobile — full-screen sheet */
@media (max-width: 640px) {
.adm-modal { justify-content: stretch; }
.adm-modal-panel { width: 100%; }
.adm-grid-2 { grid-template-columns: 1fr; }
.adm-modal-form { padding: 4px 18px 96px; }
.adm-modal-header { padding: 14px 18px 12px; }
.adm-modal-footer { padding: 12px 18px; margin: 0 -18px; }
}