/* ═══════════════════════════════════════════════════════════════════
FISH KORAVI — REFINED VISUAL LAYER
Loaded after each page's inline styles to elevate the aesthetic
toward a premium marine-electronics feel (Garmin / GoPro).
Does NOT modify structure, IDs, class names, or JS behavior.
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
/* ── Refined color tokens (override inline :root vars) ─────────────── */
:root {
--ocean: #030A14 !important;
--deep: #071628 !important;
--water: #0B3958 !important;
--teal: #16B3C7 !important;
--teal-lt: #4DE3FF !important;
--sun: #FFB547 !important;
--sand: #F0D28E !important;
--white: #F4FBFF !important;
--muted: #8FB6CE !important;
--border: rgba(77, 227, 255, 0.14) !important;
--fresh: #E9A93F !important;
--fresh-lt: #F7C978 !important;
--fresh-dark: #B57D1E !important;
--fresh-border: rgba(233, 169, 63, 0.18) !important;
/* new tokens */
--k-bg-1: #020814;
--k-bg-2: #051324;
--k-bg-3: #0A2140;
--k-glow: 0 0 0 1px rgba(77, 227, 255, 0.10), 0 24px 60px -20px rgba(2, 8, 20, 0.75);
--k-glow-hover: 0 0 0 1px rgba(77, 227, 255, 0.28), 0 30px 80px -20px rgba(2, 20, 40, 0.85);
--k-radius: 16px;
--k-radius-lg: 22px;
}
/* ── Global body: ocean depth gradient ─────────────────────────────── */
html, body {
background: radial-gradient(1200px 800px at 15% -10%, #0B2648 0%, transparent 55%),
radial-gradient(1000px 700px at 90% 110%, #05304A 0%, transparent 60%),
linear-gradient(180deg, var(--k-bg-1) 0%, var(--k-bg-2) 40%, var(--k-bg-1) 100%) !important;
color: var(--white);
font-family: 'Manrope', 'Source Sans 3', system-ui, -apple-system, sans-serif !important;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: rgba(77, 227, 255, 0.28); color: #fff; }
/* Depth grain layer */
body::before {
content: '';
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image:
radial-gradient(circle at 22% 30%, rgba(77, 227, 255, 0.05) 0%, transparent 45%),
radial-gradient(circle at 78% 78%, rgba(255, 181, 71, 0.03) 0%, transparent 45%),
url("data:image/svg+xml;utf8,");
mix-blend-mode: screen; opacity: 0.55;
}
body > * { position: relative; z-index: 1; }
/* Numeric / data readouts use monospace for that marine-electronics feel */
.temp-value, .tide-value, .stat-number, .catch-time,
[id$="-data"] .value, [id$="-data"] strong, .mono,
.tide-time, .tide-height, .stat-num, .rating-num {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
/* ── Cards: glass, deep, elegant ──────────────────────────────────── */
.card, .ai-card, .info-card, .builder-card, .mockup-phone-wrap,
.spot-modal, .species-modal-content, .rig-card, .bait-card, .lure-card {
background: linear-gradient(180deg, rgba(10, 33, 64, 0.55), rgba(5, 19, 36, 0.85)) !important;
border: 1px solid rgba(77, 227, 255, 0.10) !important;
border-radius: var(--k-radius) !important;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow: var(--k-glow);
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.35s ease;
}
.card:hover, .ai-card:hover, .info-card:hover {
transform: translateY(-2px);
box-shadow: var(--k-glow-hover);
border-color: rgba(77, 227, 255, 0.24) !important;
}
.card { padding: 22px 22px 24px !important; }
/* Card headings — remove the "top gradient bar" ornaments look and
replace with a clean left accent */
.card h2, .ai-card h3, .card > h2 {
font-family: 'Oswald', sans-serif !important;
color: var(--white) !important;
font-size: 0.95rem !important;
letter-spacing: 2.2px !important;
text-transform: uppercase;
padding-left: 12px !important;
position: relative;
margin-bottom: 16px !important;
border-left: 3px solid var(--teal-lt) !important;
border-top: none !important;
border-bottom: none !important;
}
.card h2 svg, .ai-card h3 svg { color: var(--teal-lt); flex-shrink: 0; }
/* ── Buttons — pill shaped with aqua glow ─────────────────────────── */
.btn-primary, .btn-sun, .btn-fresh, a.btn-fresh, button.btn-primary, .baitshop-search-btn,
#chat-send, #baitshop-search, #baitshop-gps, #lake-search-btn, #lake-gps-btn {
border-radius: 999px !important;
font-family: 'Manrope', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
position: relative; overflow: hidden;
}
.btn-primary, button.btn-primary, #chat-send, #baitshop-search {
background: linear-gradient(135deg, #16B3C7 0%, #4DE3FF 55%, #22D3EE 100%) !important;
color: #04121F !important;
box-shadow: 0 12px 32px -10px rgba(77, 227, 255, 0.5), inset 0 1px 0 rgba(255,255,255,0.25) !important;
border: none !important;
}
.btn-primary:hover, button.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 18px 40px -10px rgba(77, 227, 255, 0.65), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
/* Freshwater CTA — same pill shape, green gradient + glow */
.btn-fresh, a.btn-fresh {
background: linear-gradient(135deg, #E9A93F 0%, #F7C978 55%, #B57D1E 100%) !important;
color: #04121F !important;
box-shadow: 0 12px 32px -10px rgba(233, 169, 63, 0.5), inset 0 1px 0 rgba(255,255,255,0.25) !important;
border: none !important;
}
.btn-fresh:hover, a.btn-fresh:hover {
transform: translateY(-1px);
box-shadow: 0 18px 40px -10px rgba(233, 169, 63, 0.65), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.btn-sun {
background: linear-gradient(135deg, #FFB547 0%, #FFD37A 100%) !important;
color: #21160A !important;
border: none !important;
box-shadow: 0 12px 32px -10px rgba(255, 181, 71, 0.55) !important;
}
.btn-sun:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -10px rgba(255, 181, 71, 0.7) !important; }
.btn-outline {
border: 1px solid rgba(77, 227, 255, 0.35) !important;
color: var(--teal-lt) !important;
background: rgba(11, 57, 88, 0.25) !important;
border-radius: 999px !important;
backdrop-filter: blur(8px);
transition: all 0.28s ease !important;
}
.btn-outline:hover {
background: rgba(22, 179, 199, 0.15) !important;
border-color: rgba(77, 227, 255, 0.6) !important;
color: #fff !important;
}
/* Ripple on click */
.btn-primary::after, .btn-sun::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.35) 0%, transparent 45%);
opacity: 0; transition: opacity 0.5s;
}
.btn-primary:active::after, .btn-sun:active::after { opacity: 1; transition: none; }
/* ── Inputs ────────────────────────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="email"], input[type="search"],
select, textarea, #chat-input, #species-search, #baitshop-input, #lake-input, #log-species {
background: rgba(3, 12, 24, 0.7) !important;
border: 1px solid rgba(77, 227, 255, 0.18) !important;
border-radius: 12px !important;
color: var(--white) !important;
font-family: 'Manrope', sans-serif !important;
transition: all 0.25s ease !important;
padding: 12px 16px !important;
}
input:focus, select:focus, textarea:focus {
outline: none !important;
border-color: rgba(77, 227, 255, 0.55) !important;
box-shadow: 0 0 0 4px rgba(77, 227, 255, 0.10) !important;
background: rgba(3, 12, 24, 0.9) !important;
}
input::placeholder { color: rgba(143, 182, 206, 0.55) !important; }
/* ── Top nav → refined pill nav (still visible on desktop) ─────────── */
#main-nav {
background: rgba(3, 10, 20, 0.75) !important;
backdrop-filter: blur(20px) saturate(140%) !important;
-webkit-backdrop-filter: blur(20px) saturate(140%) !important;
border-bottom: 1px solid rgba(77, 227, 255, 0.12) !important;
box-shadow: 0 8px 24px -12px rgba(0,0,0,0.6);
}
#main-nav .nav-tab {
color: rgba(143, 182, 206, 0.7) !important;
font-family: 'Oswald', sans-serif !important;
letter-spacing: 1.6px !important;
transition: all 0.25s ease !important;
position: relative;
}
#main-nav .nav-tab.active {
color: var(--teal-lt) !important;
background: linear-gradient(180deg, rgba(77,227,255,0.10) 0%, transparent 100%) !important;
}
#main-nav .nav-tab.active::after {
content: ''; position: absolute; left: 20%; right: 20%; bottom: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--teal-lt), transparent);
border-radius: 2px;
}
#main-nav .nav-tab:hover { color: var(--white) !important; }
#main-nav .nav-tab .nav-icon-svg { stroke-width: 1.8; }
/* ── Bottom nav on mobile (progressive enhancement) ────────────────── */
@media (max-width: 720px) {
#main-nav {
position: fixed !important;
top: auto !important; bottom: 0 !important;
left: 0 !important; right: 0 !important;
z-index: 999;
padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
border-top: 1px solid rgba(77, 227, 255, 0.14) !important;
border-bottom: none !important;
box-shadow: 0 -14px 40px -12px rgba(0,0,0,0.7);
}
#main-nav .nav-tab {
flex-direction: column !important;
padding: 8px 4px !important;
font-size: 0.62rem !important;
gap: 3px !important;
}
#main-nav .nav-tab .nav-icon-svg { width: 20px !important; height: 20px !important; }
#main-nav .nav-tab.active::after { display: none; }
#main-nav .nav-tab.active {
background: none !important;
}
#main-nav .nav-tab.active .nav-icon-svg { filter: drop-shadow(0 0 8px rgba(77, 227, 255, 0.6)); }
body { padding-bottom: 80px !important; }
}
/* ── Best-day banner ────────────────────────────────────────────────── */
.best-day-banner {
background: linear-gradient(135deg, rgba(255, 181, 71, 0.08), rgba(77, 227, 255, 0.06)) !important;
border: 1px solid rgba(255, 181, 71, 0.25) !important;
border-radius: var(--k-radius-lg) !important;
padding: 24px 28px !important;
position: relative; overflow: hidden;
}
.best-day-banner::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(600px 200px at 20% 50%, rgba(255, 181, 71, 0.10), transparent 60%);
pointer-events: none;
}
/* ── Landing hero refinement ───────────────────────────────────────── */
.hero { position: relative; }
.hero::before {
content: '';
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(700px 400px at 50% 20%, rgba(77, 227, 255, 0.10), transparent 60%),
radial-gradient(500px 300px at 80% 80%, rgba(255, 181, 71, 0.06), transparent 60%);
}
.hero-headline, .hero-headline span {
letter-spacing: -0.5px !important;
line-height: 0.95 !important;
text-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.hero-tagline {
background: rgba(11, 57, 88, 0.35) !important;
border: 1px solid rgba(255, 181, 71, 0.35) !important;
backdrop-filter: blur(8px);
border-radius: 999px !important;
padding: 12px 24px !important;
color: var(--sun) !important;
font-weight: 700 !important;
}
.hero-sub { color: rgba(244, 251, 255, 0.72) !important; }
.stats-bar {
border-top: 1px solid rgba(77, 227, 255, 0.14) !important;
border-bottom: 1px solid rgba(77, 227, 255, 0.14) !important;
background: linear-gradient(180deg, rgba(11, 57, 88, 0.18), rgba(3, 12, 24, 0.35)) !important;
backdrop-filter: blur(10px);
}
.stat-number {
background: linear-gradient(135deg, var(--teal-lt) 0%, var(--sun) 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
font-family: 'Oswald', sans-serif !important;
}
.stat-label { color: rgba(143, 182, 206, 0.75) !important; letter-spacing: 2.4px !important; }
.water-toggle {
background: rgba(3, 12, 24, 0.6) !important;
border: 1px solid rgba(77, 227, 255, 0.20) !important;
padding: 5px !important;
border-radius: 999px !important;
backdrop-filter: blur(10px);
}
.toggle-btn.active.salt {
background: linear-gradient(135deg, #16B3C7, #4DE3FF) !important;
color: #04121F !important;
box-shadow: 0 6px 20px -6px rgba(77, 227, 255, 0.6) !important;
}
.toggle-btn.active.fresh {
background: linear-gradient(135deg, #E9A93F, #F7C978) !important;
color: #04121F !important;
box-shadow: 0 6px 20px -6px rgba(233, 169, 63, 0.55) !important;
}
/* Conditions ticker */
#conditions-ticker {
background: linear-gradient(180deg, rgba(3, 10, 20, 0.98), rgba(3, 10, 20, 0.92)) !important;
border-bottom: 1px solid rgba(77, 227, 255, 0.16) !important;
backdrop-filter: blur(12px);
}
/* ── AI features grid on landing ───────────────────────────────────── */
.ai-card {
padding: 28px !important;
border-radius: var(--k-radius-lg) !important;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.4s ease;
}
.ai-card:hover {
transform: translateY(-6px);
border-color: rgba(77, 227, 255, 0.28) !important;
box-shadow: 0 30px 80px -20px rgba(2, 20, 40, 0.9),
0 0 0 1px rgba(77, 227, 255, 0.24);
}
.ai-card h3 {
font-family: 'Oswald', sans-serif !important;
letter-spacing: 1.6px !important;
}
.ai-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(77, 227, 255, 0.15), rgba(22, 179, 199, 0.08));
border: 1px solid rgba(77, 227, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
/* ── Species cards ─────────────────────────────────────────────────── */
.species-card, .species-tile, [class*="species-item"] {
background: linear-gradient(180deg, rgba(11, 33, 64, 0.55), rgba(5, 19, 36, 0.85)) !important;
border: 1px solid rgba(77, 227, 255, 0.10) !important;
border-radius: var(--k-radius) !important;
overflow: hidden;
transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.species-card:hover, .species-tile:hover {
transform: translateY(-3px) scale(1.01);
border-color: rgba(77, 227, 255, 0.32) !important;
box-shadow: 0 24px 60px -20px rgba(2, 20, 40, 0.9);
}
/* ── Chat UI ───────────────────────────────────────────────────────── */
#chat-box {
background: rgba(3, 12, 24, 0.5) !important;
border: 1px solid rgba(77, 227, 255, 0.10) !important;
border-radius: var(--k-radius) !important;
padding: 18px !important;
backdrop-filter: blur(10px);
}
#chat-box .msg, #chat-box .chat-msg,
#chat-box > div {
border-radius: 14px !important;
}
#chat-box .user, #chat-box .msg-user, #chat-box .chat-user {
background: linear-gradient(135deg, rgba(77, 227, 255, 0.14), rgba(22, 179, 199, 0.08)) !important;
border: 1px solid rgba(77, 227, 255, 0.22) !important;
color: var(--white) !important;
}
#chat-box .ai, #chat-box .msg-ai, #chat-box .chat-ai, #chat-box .bot {
background: rgba(11, 57, 88, 0.35) !important;
border: 1px solid rgba(77, 227, 255, 0.10) !important;
color: var(--white) !important;
}
/* ── Map controls ──────────────────────────────────────────────────── */
.map-btn {
background: rgba(3, 12, 24, 0.85) !important;
border: 1px solid rgba(77, 227, 255, 0.20) !important;
color: var(--teal-lt) !important;
border-radius: 999px !important;
transition: all 0.25s ease !important;
backdrop-filter: blur(8px);
}
.map-btn:hover {
background: rgba(22, 179, 199, 0.20) !important;
border-color: rgba(77, 227, 255, 0.55) !important;
color: #fff !important;
}
/* ── Region selector ───────────────────────────────────────────────── */
#region-selector, .region-select {
background: rgba(3, 12, 24, 0.85) !important;
border: 1px solid rgba(77, 227, 255, 0.28) !important;
color: var(--teal-lt) !important;
border-radius: 999px !important;
font-family: 'Oswald', sans-serif !important;
letter-spacing: 1.4px !important;
}
/* ── Modal / overlay refinements ───────────────────────────────────── */
.spot-modal-overlay, .species-modal-overlay, [class*="modal-overlay"] {
background: rgba(2, 8, 16, 0.72) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.spot-modal, .species-modal {
border-radius: var(--k-radius-lg) !important;
border: 1px solid rgba(77, 227, 255, 0.16) !important;
box-shadow: 0 40px 100px -20px rgba(0,0,0,0.9);
}
/* ── Scrollbars ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(77, 227, 255, 0.22), rgba(22, 179, 199, 0.35));
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(77, 227, 255, 0.45), rgba(22, 179, 199, 0.6));
background-clip: padding-box;
}
/* ── Skeleton loader helper (works for "Loading..." text nodes) ────── */
[id$="-data"]:empty::before,
[id="tide-data"]:only-child,
[id="moon-data"]:only-child {
/* no-op — page already renders skeletons */
}
/* ── Motion: entrance staggering for cards ─────────────────────────── */
@keyframes k-fade-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.tab-content.active .card, .tab-content.active .best-day-banner,
.ai-grid .ai-card, .stats-inner .stat-item {
animation: k-fade-up 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.tab-content.active .card:nth-child(1) { animation-delay: 0.04s; }
.tab-content.active .card:nth-child(2) { animation-delay: 0.10s; }
.tab-content.active .card:nth-child(3) { animation-delay: 0.16s; }
.tab-content.active .card:nth-child(4) { animation-delay: 0.22s; }
.tab-content.active .card:nth-child(5) { animation-delay: 0.28s; }
.tab-content.active .card:nth-child(6) { animation-delay: 0.34s; }
.tab-content.active .card:nth-child(7) { animation-delay: 0.40s; }
.stats-inner .stat-item:nth-child(1) { animation-delay: 0.10s; }
.stats-inner .stat-item:nth-child(2) { animation-delay: 0.16s; }
.stats-inner .stat-item:nth-child(3) { animation-delay: 0.22s; }
.stats-inner .stat-item:nth-child(4) { animation-delay: 0.28s; }
.stats-inner .stat-item:nth-child(5) { animation-delay: 0.34s; }
@keyframes k-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Reduce heavy top borders / gradient bars on cards (many inline styles
add a colored strip on top) — soften them */
.card::before, .ai-card::before { opacity: 0.45 !important; }
/* ── Freshwater theme tint ─────────────────────────────────────────── */
body.fw-mode, body[data-water="fresh"] {
background: radial-gradient(1200px 800px at 15% -10%, #0B3B2E 0%, transparent 55%),
radial-gradient(1000px 700px at 90% 110%, #052E1E 0%, transparent 60%),
linear-gradient(180deg, var(--k-bg-1) 0%, #041E14 40%, var(--k-bg-1) 100%) !important;
}
/* ── Loader polish ─────────────────────────────────────────────────── */
#fiq-loader {
background: radial-gradient(circle at 50% 40%, #052442 0%, #010812 60%, #01050c 100%) !important;
}
.loader-wordmark {
font-family: 'Oswald', sans-serif !important;
background: linear-gradient(135deg, #4DE3FF 0%, #FFB547 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent !important;
}
/* Nice focus rings for accessibility */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
outline: 2px solid rgba(77, 227, 255, 0.6) !important;
outline-offset: 3px !important;
}
/* Reduce heavy emoji weight next to text in headings */
h1 > i, h2 > i, h3 > i { opacity: 0.9; }
/* Elevate the primary CTA on mobile */
@media (max-width: 720px) {
.hero-btns .btn-primary {
box-shadow: 0 20px 50px -10px rgba(77, 227, 255, 0.55) !important;
}
}
/* ── Print / share widget polish ───────────────────────────────────── */
#bite-card {
border-radius: var(--k-radius-lg) !important;
border: 1px solid rgba(77, 227, 255, 0.14) !important;
box-shadow: 0 40px 100px -20px rgba(0,0,0,0.9);
overflow: hidden;
}
/* ═══════════════════════════════════════════════════════════════════
B · SKELETON LOADERS for pre-fetch "Loading…" text nodes
Uses :has()/:only-child heuristic — the moment JS injects real DOM
children, the shimmer stops. No JS coordination needed.
═══════════════════════════════════════════════════════════════════ */
@keyframes k-skeleton {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
#tide-data, #moon-data, #sun-data, #solunar-data, #temp-data,
#weather-data, #fish-data, #wtemp-data, #streamflow-data,
#lake-conditions-data {
min-height: 80px;
position: relative;
}
/* Only apply shimmer while the element still contains a plain text
placeholder (no child elements yet). */
[id$="-data"]:not(:has(> *)) {
color: transparent !important;
border-radius: 12px;
background: linear-gradient(
90deg,
rgba(77, 227, 255, 0.04) 0%,
rgba(77, 227, 255, 0.12) 45%,
rgba(77, 227, 255, 0.20) 50%,
rgba(77, 227, 255, 0.12) 55%,
rgba(77, 227, 255, 0.04) 100%
);
background-size: 200% 100%;
animation: k-skeleton 1.6s ease-in-out infinite;
}
/* Also shimmer common headline loaders on landing / best-day banner */
#best-day-result:empty,
#report-date:empty {
display: inline-block;
min-width: 180px;
min-height: 1.2em;
color: transparent !important;
border-radius: 8px;
background: linear-gradient(
90deg,
rgba(77, 227, 255, 0.06) 0%,
rgba(77, 227, 255, 0.18) 50%,
rgba(77, 227, 255, 0.06) 100%
);
background-size: 200% 100%;
animation: k-skeleton 1.6s ease-in-out infinite;
}
/* ═══════════════════════════════════════════════════════════════════
C · EMOJI REFINEMENT — visually normalize emoji-based feature icons
in the AI grid + card headers so they feel like designed marks
rather than randomly-sized OS glyphs.
═══════════════════════════════════════════════════════════════════ */
.ai-card .ai-icon,
.ai-card [class*="icon"]:not(svg):not([class*="svg"]) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 16px;
font-size: 1.6rem !important;
background: linear-gradient(135deg, rgba(77, 227, 255, 0.12), rgba(22, 179, 199, 0.06));
border: 1px solid rgba(77, 227, 255, 0.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06),
0 8px 24px -12px rgba(77, 227, 255, 0.35);
filter: saturate(0.9) brightness(1.05);
transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1);
}
.ai-card:hover .ai-icon { transform: scale(1.08) rotate(-3deg); }
/* Builder avatar (star / etc) */
.builder-avatar {
background: linear-gradient(135deg, rgba(255, 181, 71, 0.22), rgba(77, 227, 255, 0.10)) !important;
border: 1px solid rgba(255, 181, 71, 0.35) !important;
color: var(--sun) !important;
box-shadow: 0 12px 30px -12px rgba(255, 181, 71, 0.45);
}
/* Hero badge — reduce emoji visual noise (small + slightly desaturated) */
.hero-badge {
background: rgba(11, 57, 88, 0.35) !important;
border: 1px solid rgba(77, 227, 255, 0.22) !important;
color: var(--teal-lt) !important;
backdrop-filter: blur(8px);
border-radius: 999px !important;
letter-spacing: 3px !important;
padding: 10px 20px !important;
}
/* Water-toggle icons visually match */
.toggle-btn.salt, .toggle-btn.fresh {
font-family: 'Manrope', sans-serif !important;
letter-spacing: 1.6px !important;
}
/* Ticker loading emoji: pulse instead of stale */
#ticker-loading {
color: var(--teal-lt) !important;
animation: k-ticker-pulse 1.4s ease-in-out infinite;
font-family: 'Manrope', sans-serif !important;
letter-spacing: 2px !important;
}
@keyframes k-ticker-pulse {
0%, 100% { opacity: 0.65; }
50% { opacity: 1; }
}
/* CTA button emoji visual balance */
.btn-primary, .btn-sun, .cta-btn, .cta-btn-fresh {
font-size: 1.02rem !important;
}
/* Feature grid emoji containers: normalize any inline emoji-only spans
that sit inside .ai-card by giving them the ai-icon treatment via
attribute selectors (best-effort). */
.ai-card > span:first-child,
.ai-card > div[class*="icon"] {
font-size: 1.5rem;
filter: drop-shadow(0 4px 10px rgba(77, 227, 255, 0.25));
}
/* ═══════════════════════════════════════════════════════════════════
POLISH PASS · Professional depth, hierarchy & motion
═══════════════════════════════════════════════════════════════════ */
/* ── Landing hero: animated ocean horizon ──────────────────────────── */
.hero {
padding-bottom: 140px !important;
min-height: 100vh;
}
.hero::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 220px;
background:
radial-gradient(1200px 200px at 50% 100%, rgba(77, 227, 255, 0.18) 0%, transparent 70%),
linear-gradient(180deg, transparent 0%, rgba(11, 57, 88, 0.35) 100%);
pointer-events: none;
z-index: 0;
}
/* SVG horizon wave loop */
.hero .hero-btns, .hero .stats-bar { position: relative; z-index: 2; }
.hero .hero-horizon,
.hero:not(:has(.hero-horizon))::before {
content: '';
position: absolute;
left: -5%; right: -5%; bottom: 0;
height: 90px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-x;
background-size: 100% 100%;
animation: k-wave 18s linear infinite;
pointer-events: none;
z-index: 1;
}
@keyframes k-wave {
0% { transform: translateX(0); }
100% { transform: translateX(-5%); }
}
/* Hero brand type: crisp letter-spacing lock */
.hero-logo + h1, .hero-headline {
letter-spacing: -1px !important;
font-weight: 800 !important;
}
.hero-headline span {
background: linear-gradient(135deg, #4DE3FF 0%, #F7C978 40%, #FFB547 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* ── Best-day banner: professional layout with pulse accent ────────── */
.best-day-banner {
padding: 32px 36px 32px 60px !important;
position: relative;
text-align: center;
}
.best-day-banner::after {
content: '';
position: absolute;
left: 30px; top: 50%;
width: 8px; height: 8px;
border-radius: 999px;
background: var(--sun);
box-shadow: 0 0 0 4px rgba(255, 181, 71, 0.18),
0 0 20px rgba(255, 181, 71, 0.75);
animation: k-pulse 2.2s ease-in-out infinite;
}
@keyframes k-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(255,181,71,0.18), 0 0 20px rgba(255,181,71,0.75); transform: translateY(-50%) scale(1); }
50% { box-shadow: 0 0 0 10px rgba(255,181,71,0), 0 0 30px rgba(255,181,71,0.85); transform: translateY(-50%) scale(1.15); }
}
@media (max-width: 720px) {
.best-day-banner { padding: 20px !important; text-align: center; }
.best-day-banner::after { left: 50%; transform: translateX(-50%) translateY(0); top: 14px; }
@keyframes k-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(255,181,71,0.18), 0 0 20px rgba(255,181,71,0.75); transform: translateX(-50%) scale(1); }
50% { box-shadow: 0 0 0 10px rgba(255,181,71,0), 0 0 30px rgba(255,181,71,0.85); transform: translateX(-50%) scale(1.15); }
}
}
/* ── Section titles hierarchy ──────────────────────────────────────── */
.section-tag {
display: block !important;
width: fit-content !important;
margin: 0 auto 14px !important;
padding: 6px 14px;
border-radius: 999px;
background: rgba(77, 227, 255, 0.10) !important;
border: 1px solid rgba(77, 227, 255, 0.28) !important;
color: var(--teal-lt) !important;
font-size: 0.68rem !important;
letter-spacing: 3px !important;
text-transform: uppercase;
text-align: center !important;
font-weight: 700 !important;
backdrop-filter: blur(6px);
}
.section-title {
letter-spacing: -0.5px !important;
line-height: 1.05 !important;
}
.section-sub {
color: rgba(244, 251, 255, 0.62) !important;
max-width: 720px;
line-height: 1.6 !important;
}
/* ── AI feature grid: consistent premium cards ─────────────────────── */
.ai-grid { gap: 20px !important; }
.ai-card {
padding: 32px 28px !important;
position: relative;
overflow: hidden;
}
.ai-card::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(500px 200px at 100% 0%, rgba(77, 227, 255, 0.06), transparent 60%);
pointer-events: none;
opacity: 0.6;
transition: opacity 0.4s ease;
}
.ai-card:hover::before { opacity: 1; }
.ai-card .ai-badge, .ai-card [class*="badge"] {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 181, 71, 0.14) !important;
border: 1px solid rgba(255, 181, 71, 0.28) !important;
color: var(--sun) !important;
font-size: 0.62rem !important;
letter-spacing: 2px !important;
text-transform: uppercase;
font-weight: 700 !important;
}
/* ── Footer refinement ─────────────────────────────────────────────── */
footer {
border-top: 1px solid rgba(77, 227, 255, 0.10) !important;
background: rgba(3, 10, 20, 0.65) !important;
backdrop-filter: blur(20px);
margin-top: 40px !important;
}
footer .footer-logo {
background: linear-gradient(135deg, #4DE3FF 0%, #FFB547 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
font-family: 'Oswald', sans-serif !important;
letter-spacing: 4px !important;
}
/* ── Nav tab uniformity ────────────────────────────────────────────── */
#main-nav .nav-tab {
font-size: 0.7rem !important;
padding: 12px 8px !important;
}
@media (min-width: 721px) {
#main-nav .nav-tab .nav-icon-svg { width: 18px; height: 18px; margin-bottom: 4px; }
}
/* ── Tab content: better spacing ──────────────────────────────────── */
.tab-content {
padding-top: 24px !important;
}
.tab-content .header {
margin-bottom: 32px !important;
}
/* ── Modal / popover refinement ────────────────────────────────────── */
.species-modal-content, .spot-modal {
padding: 36px 32px !important;
}
.species-close, .modal-close {
background: rgba(77, 227, 255, 0.10) !important;
border: 1px solid rgba(77, 227, 255, 0.22) !important;
color: var(--teal-lt) !important;
border-radius: 999px !important;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
transition: all 0.25s ease;
}
.species-close:hover, .modal-close:hover {
background: rgba(77, 227, 255, 0.20) !important;
transform: rotate(90deg);
}
/* ── Chat send button as pill icon ─────────────────────────────────── */
#chat-send {
padding: 12px 22px !important;
font-weight: 700 !important;
}
/* ── Tighten mobile scroll ─────────────────────────────────────────── */
@media (max-width: 720px) {
.tab-content { padding-top: 16px !important; padding-left: 16px !important; padding-right: 16px !important; }
.card { padding: 18px !important; }
.hero { padding-top: 96px !important; padding-bottom: 100px !important; min-height: 90vh; }
.hero::after, .hero::before { height: 140px; }
.section-title { font-size: 1.6rem !important; }
.best-day-banner { padding: 20px !important; }
}
/* ── Species grid tile lift ────────────────────────────────────────── */
.species-grid { gap: 16px !important; }
.species-item, .species-card {
padding: 18px !important;
}
.species-item .fish-name, .species-card .fish-name,
.species-item .name, .species-card .name {
font-family: 'Oswald', sans-serif !important;
letter-spacing: 1.4px !important;
color: var(--white) !important;
font-weight: 600 !important;
}
/* ── License / catch-log form fields ──────────────────────────────── */
.catch-log-field label {
font-family: 'Oswald', sans-serif !important;
letter-spacing: 1.8px !important;
color: var(--muted) !important;
font-size: 0.72rem !important;
text-transform: uppercase;
margin-bottom: 6px !important;
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ── Hover state polish for tap-cards ──────────────────────────────── */
.fish-item, .catch-item, .baitshop-item, .rig-item {
transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
border-radius: 12px;
padding: 12px 14px !important;
border: 1px solid rgba(77, 227, 255, 0.06);
}
.fish-item:hover, .catch-item:hover, .baitshop-item:hover, .rig-item:hover {
transform: translateX(3px);
background: rgba(77, 227, 255, 0.05);
border-color: rgba(77, 227, 255, 0.18);
}
/* ── Small utility: divider line ───────────────────────────────────── */
hr, .divider {
border: none !important;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(77,227,255,0.22), transparent) !important;
margin: 24px 0 !important;
}
/* ── Selection color already set — reinforce ───────────────────────── */
::-moz-selection { background: rgba(77,227,255,0.28); color: #fff; }
/* ── Report-date: highlight as a premium data chip ─────────────────── */
#report-date:not(:empty) {
display: block;
width: fit-content;
}
/* Ensure it's centered when its parent uses flex/text-align:center */
#tab-reports .card { text-align: center; }
#tab-reports #report-content { text-align: left; margin-top: 16px; }
/* ═══════════════════════════════════════════════════════════════════
GLOBAL CENTERING PASS — mobile & desktop consistency
═══════════════════════════════════════════════════════════════════ */
/* Tab section wrappers keep a max-width and stay centered on the page */
.section-wrap, .tab-content > .header,
.tab-content > .card, .tab-content > .best-day-banner,
.tab-content > .report-section {
max-width: 1280px;
margin-left: auto !important;
margin-right: auto !important;
}
/* Report section (Daily Fishing Report card): center all children */
.report-section {
text-align: center !important;
padding: 28px 24px !important;
background: linear-gradient(180deg, rgba(10, 33, 64, 0.55), rgba(5, 19, 36, 0.85)) !important;
border: 1px solid rgba(77, 227, 255, 0.10) !important;
border-radius: var(--k-radius) !important;
backdrop-filter: blur(14px) saturate(140%);
box-shadow: var(--k-glow);
}
.report-section > * { margin-left: auto; margin-right: auto; }
.report-section .report-label {
display: inline-flex; align-items: center; gap: 6px;
justify-content: center;
font-family: 'Oswald', sans-serif !important;
letter-spacing: 2.2px !important;
text-transform: uppercase;
color: var(--teal-lt) !important;
font-size: 0.85rem !important;
margin-bottom: 14px !important;
}
#report-date {
display: block !important;
width: fit-content;
text-align: center !important;
margin: 12px auto 20px !important;
padding: 8px 20px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, rgba(255,181,71,0.14), rgba(77,227,255,0.10)) !important;
border: 1px solid rgba(255,181,71,0.32) !important;
color: var(--sun) !important;
font-family: 'Oswald', sans-serif !important;
font-size: 0.85rem !important;
letter-spacing: 2.4px !important;
text-transform: uppercase;
font-weight: 600 !important;
box-shadow: 0 8px 24px -10px rgba(255,181,71,0.35);
}
#report-date:empty {
background: linear-gradient(90deg, rgba(77,227,255,0.06), rgba(77,227,255,0.18), rgba(77,227,255,0.06)) !important;
background-size: 200% 100% !important;
border-color: rgba(77, 227, 255, 0.14) !important;
min-width: 220px;
min-height: 1.6em;
color: transparent !important;
animation: k-skeleton 1.6s ease-in-out infinite;
}
#report-content {
text-align: left; /* Body text still left-aligned inside for readability */
max-width: 720px;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 20px;
}
/* Tab headers centered */
.tab-header-title, .tab-header-sub, .header {
text-align: center !important;
}
.tab-header-title { margin-left: auto; margin-right: auto; }
/* Best-day banner: keep content centered, pulse on the left as an accent */
.best-day-banner { text-align: center !important; }
.best-day-banner > * { margin-left: auto; margin-right: auto; }
/* Card headings: keep the left-accent bar but center the icon+text row */
.card > h2, .card h2 {
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center !important;
}
/* Chat / input wrappers centered */
.chat-input-wrap, .chat-wrap, #chat-box + div {
max-width: 780px;
margin-left: auto !important;
margin-right: auto !important;
}
/* Hero content already centered — reinforce */
.hero, .hero-btns, .water-toggle-wrap, .stats-inner {
text-align: center;
}
.hero-btns { justify-content: center !important; flex-wrap: wrap; }
/* Grids: center themselves within the container */
.ai-grid, .species-grid, .rig-grid, .stats-inner {
margin-left: auto !important;
margin-right: auto !important;
justify-items: center;
}
/* Species search bar centered */
.species-search {
max-width: 620px;
margin-left: auto !important;
margin-right: auto !important;
}
/* Filter tabs centered */
.species-filter-tabs, .ai-species-grid, .target-pills, .rig-technique-pills {
justify-content: center !important;
text-align: center;
}
/* Modal content centered */
.species-modal-content, .spot-modal { text-align: center; }
.species-modal-content > *, .spot-modal > * { margin-left: auto; margin-right: auto; }
/* On mobile, keep primary CTAs full-width & centered */
@media (max-width: 720px) {
.hero-btns .btn-primary, .hero-btns .btn-outline, .hero-btns button {
width: 100%;
max-width: 320px;
justify-content: center;
}
.best-day-banner { padding: 22px 20px !important; }
.card, .report-section, .best-day-banner {
margin-left: auto !important;
margin-right: auto !important;
}
.report-section > .report-label, #report-date { display: block; }
#report-date { margin: 10px auto 18px !important; }
/* Ensure card headings don't wrap awkwardly on tiny screens */
.card > h2, .card h2 {
flex-wrap: wrap;
font-size: 0.85rem !important;
}
}
/* Ensure the outer body content itself is centered when very wide */
main, .app-body, .tab-content, body > section {
margin-left: auto !important;
margin-right: auto !important;
}
/* ═══════════════════════════════════════════════════════════════════
CENTERING PASS 2 — Explore / My Fishing / License / form rows
═══════════════════════════════════════════════════════════════════ */
/* All cards inside main tab content — center the header/paragraph rows */
.tab-content .card > h2,
.tab-content .card > .card-title,
.tab-content .card > p,
.tab-content .card > .section-tip,
.tab-content .card > label,
.tab-content .card > .form-label,
.tab-content .card > .disclaimer {
text-align: center !important;
}
/* ── Bait Shop Finder / Species Search / Lake Search — center toolbars */
#tab-explore .card,
#tab-explore .bait-shop-finder,
#tab-explore .nautical-chart,
#tab-explore .species-search-wrap,
#tab-explore .section-wrap > .card {
text-align: center;
}
#tab-explore input[type="text"],
#tab-explore .search-row,
#tab-explore .bait-shop-search-row,
#baitshop-input {
max-width: 520px;
margin-left: auto !important;
margin-right: auto !important;
}
/* Toolbar rows containing input + buttons: flex centered, wrap on mobile */
#tab-explore .card > div:has(> input + button),
#tab-explore .card > div:has(> button),
.map-controls, .map-toolbar, #tab-explore .card > div[style*="flex"] {
display: flex !important;
flex-wrap: wrap;
justify-content: center !important;
gap: 10px;
align-items: center;
}
/* Map legend + map itself centered */
#map-legend { justify-content: center !important; }
#map { margin-left: auto !important; margin-right: auto !important; max-width: 100%; }
/* Species browse view: filter tabs + grid centered */
.species-filter-tabs, .species-popular-label { text-align: center !important; }
.species-popular-label { display: block; }
/* ── My Fishing tab: Catch Logger form ────────────────────────────── */
#tab-myfishing .card { text-align: center; }
#tab-myfishing .catch-log-grid,
#tab-myfishing .catch-form,
#tab-myfishing form,
#tab-myfishing .card > div:has(.catch-log-field) {
justify-content: center !important;
justify-items: center;
}
#tab-myfishing .catch-log-field {
text-align: left; /* individual field label above input */
}
#tab-myfishing .catch-log-field label {
text-align: center !important;
display: block !important;
justify-content: center;
}
#tab-myfishing .catch-log-field input,
#tab-myfishing .catch-log-field textarea,
#tab-myfishing .catch-log-field select {
margin-left: auto !important;
margin-right: auto !important;
width: 100%;
}
#tab-myfishing .catch-upload-area,
#tab-myfishing .add-photo,
#tab-myfishing #log-btn,
#tab-myfishing .btn-primary,
#tab-myfishing .btn-sun {
margin-left: auto !important;
margin-right: auto !important;
display: flex !important;
justify-content: center;
}
/* Reset All button — center it (was floating right) */
#tab-myfishing .card > div:has(> h2 + button),
#reset-all-btn, .reset-all-btn, [data-testid="reset-all"] {
margin-left: auto !important;
margin-right: auto !important;
display: inline-flex !important;
justify-content: center;
}
#tab-myfishing .card > .card-header,
#tab-myfishing .card > div:first-child:has(button) {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
/* ── License tab: state selector + info panels ─────────────────────── */
#tab-license .card { text-align: center; }
#tab-license select, #tab-license input,
#tab-license .state-info,
#tab-license .who-needs-license,
#tab-license .license-disclaimer {
max-width: 720px;
margin-left: auto !important;
margin-right: auto !important;
}
#tab-license .state-info,
#tab-license .who-needs-license {
text-align: center;
padding: 18px 22px;
}
#tab-license .state-info h3,
#tab-license .who-needs-license h3,
#tab-license .state-info .state-name {
text-align: center !important;
}
#tab-license .buy-license-btn,
#tab-license .btn-sun,
#tab-license .btn-primary {
margin-left: auto !important;
margin-right: auto !important;
}
#tab-license label { text-align: center !important; display: block; }
/* Any button on its own line inside a card → center */
.card > button:only-child,
.card > .btn-primary:only-child,
.card > .btn-sun:only-child,
.card > .btn-outline:only-child {
margin-left: auto !important;
margin-right: auto !important;
display: flex !important;
justify-content: center;
}
/* Card sections that use inline flex — force wrap + center */
.card > div[style*="display:flex"],
.card > div[style*="display: flex"] {
justify-content: center !important;
flex-wrap: wrap;
}
/* ── Home region toolbar (dropdown + switch) — already centered as a
group but ensure the wrapper is flex-centered on all viewports */
#tab-home .header > div:has(#region-selector),
#tab-home .header > div:has(> select) {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap;
gap: 10px;
}
/* Mobile: form grid stacks + centers */
@media (max-width: 720px) {
#tab-myfishing .catch-log-field { width: 100%; }
#tab-explore .card > div:has(> input + button) { flex-direction: column; }
#tab-explore .card > div:has(> input + button) > * { width: 100%; }
#tab-license select { width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════════
CENTERING PASS 3 — sub-section labels / helper text inside cards
═══════════════════════════════════════════════════════════════════ */
.ai-tool-section-label,
.ai-target-label,
.rig-label,
.field-group-label,
.ai-species-grid,
.target-pills,
.rig-technique-pills,
.rig-species-pills,
.section-tip,
.section-hint,
.helper-text,
.card .subtitle,
.card > small {
text-align: center !important;
justify-content: center !important;
display: block;
margin-left: auto !important;
margin-right: auto !important;
}
.ai-species-grid, .target-pills, .rig-technique-pills, .rig-species-pills {
display: flex !important;
flex-wrap: wrap;
gap: 8px;
}
/* Any container that holds only pills/chips → center them */
.card > div:has(> .pill),
.card > div:has(> .chip),
.card > div:has(> .target-pill) {
justify-content: center !important;
display: flex;
flex-wrap: wrap;
}
/* ═══════════════════════════════════════════════════════════════════
SOCIAL LAYER · Community Catch Feed / Likes / Comments / Photos
═══════════════════════════════════════════════════════════════════ */
.k-social-card { padding: 28px !important; }
/* Angler name row */
.k-angler-bar { margin: 14px auto 20px; max-width: 520px; text-align: center; }
.k-angler-label {
display: block; font-family: 'Oswald', sans-serif;
font-size: 0.65rem; letter-spacing: 2px; color: var(--muted);
text-transform: uppercase; margin-bottom: 6px;
}
.k-angler-input-row { display: flex; gap: 8px; justify-content: center; }
.k-angler-input-row input {
flex: 1; max-width: 280px; text-align: center;
}
.k-angler-save { white-space: nowrap; padding: 10px 18px !important; }
/* Share form */
.k-share-form {
max-width: 720px; margin: 0 auto 24px;
padding: 20px; border-radius: 16px;
background: rgba(3, 12, 24, 0.4);
border: 1px solid rgba(77, 227, 255, 0.10);
}
.k-share-grid {
display: grid; gap: 10px; margin-bottom: 12px;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.k-share-grid input { width: 100%; }
.k-photo-row {
display: flex; justify-content: center; align-items: center;
gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.k-photo-btn { display: inline-flex; align-items: center; gap: 6px; }
.k-photo-preview {
position: relative; display: inline-flex;
border-radius: 10px; overflow: hidden;
border: 1px solid rgba(77,227,255,0.28);
}
.k-photo-preview img { width: 72px; height: 72px; object-fit: cover; display: block; }
.k-photo-clear {
position: absolute; top: 4px; right: 4px;
width: 22px; height: 22px; border-radius: 999px;
background: rgba(0,0,0,0.7); color: #fff;
border: none; cursor: pointer; font-size: 16px; line-height: 1;
}
.k-share-actions { display: flex; justify-content: center; }
/* Feed tab pills */
.k-feed-tabs {
display: flex; justify-content: center; gap: 6px;
margin: 8px auto 20px; flex-wrap: wrap;
padding: 5px; background: rgba(3,12,24,0.6);
border: 1px solid rgba(77,227,255,0.16);
border-radius: 999px; width: fit-content;
}
.k-feed-tab {
padding: 8px 18px; border-radius: 999px;
background: transparent; border: none; cursor: pointer;
color: var(--muted); font-family: 'Oswald', sans-serif;
font-size: 0.72rem; letter-spacing: 1.8px;
text-transform: uppercase; font-weight: 600;
transition: all 0.22s ease;
}
.k-feed-tab:hover { color: var(--teal-lt); }
.k-feed-tab.active {
background: linear-gradient(135deg, #16B3C7, #4DE3FF);
color: #04121F;
box-shadow: 0 4px 14px -4px rgba(77,227,255,0.5);
}
/* Feed list */
#catch-feed-list {
display: grid; gap: 14px;
max-width: 720px; margin: 0 auto;
}
.k-feed-empty {
text-align: center; padding: 32px 16px;
color: var(--muted); font-size: 0.9rem; line-height: 1.6;
}
/* Individual catch card */
.k-catch-card {
background: linear-gradient(180deg, rgba(10,33,64,0.55), rgba(5,19,36,0.85));
border: 1px solid rgba(77,227,255,0.10);
border-radius: 18px;
overflow: hidden;
text-align: left;
box-shadow: var(--k-glow);
transition: transform 0.28s ease, border-color 0.28s ease;
}
.k-catch-card:hover {
transform: translateY(-1px);
border-color: rgba(77,227,255,0.24);
}
.k-catch-head {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; position: relative;
}
.k-avatar {
width: 40px; height: 40px; border-radius: 999px;
background: linear-gradient(135deg, #16B3C7, #4DE3FF);
color: #04121F; display: inline-flex;
align-items: center; justify-content: center;
font-family: 'Oswald', sans-serif; font-size: 0.85rem;
font-weight: 700; letter-spacing: 0.5px;
flex-shrink: 0;
}
.k-catch-meta { flex: 1; min-width: 0; }
.k-catch-name {
font-family: 'Oswald', sans-serif; font-size: 0.92rem;
color: var(--white); letter-spacing: 1.4px; font-weight: 600;
}
.k-catch-time {
color: var(--muted); font-size: 0.75rem; margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k-hot-badge, .k-score-badge {
padding: 4px 10px; border-radius: 999px;
font-family: 'Oswald', sans-serif; font-size: 0.62rem;
letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700;
white-space: nowrap;
}
.k-hot-badge {
background: rgba(255,181,71,0.18); color: var(--sun);
border: 1px solid rgba(255,181,71,0.36);
}
.k-score-badge {
background: rgba(77,227,255,0.14); color: var(--teal-lt);
border: 1px solid rgba(77,227,255,0.32);
}
/* ─── Community feed post photo ──────────────────────────────
The block resizes to each photo's own natural shape: the image
fills the full width and the block height follows the image's
aspect ratio. Result: photo is always fully visible (no crop) and
fills its whole block edge-to-edge (no empty letterbox bars),
whether portrait or landscape.
*/
.k-catch-photo {
position: relative;
width: 100%;
overflow: hidden;
background: radial-gradient(ellipse at center, #0a1420 0%, #030A14 100%);
cursor: zoom-in;
line-height: 0;
}
.k-catch-photo img {
display: block;
width: 100%;
height: auto; /* natural aspect ratio — no crop, no bars */
object-fit: contain;
object-position: center center;
transition: transform 0.4s ease;
}
.k-catch-photo:hover img { transform: scale(1.02); }
.k-catch-body { padding: 14px 18px 8px; }
.k-catch-species {
color: var(--white); font-size: 1rem; margin-bottom: 8px; text-align: left;
}
.k-catch-species strong {
font-family: 'Oswald', sans-serif; letter-spacing: 1.4px;
color: var(--teal-lt); font-weight: 600;
}
.k-catch-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.k-tag {
padding: 4px 10px; border-radius: 999px;
background: rgba(77,227,255,0.08);
border: 1px solid rgba(77,227,255,0.18);
color: var(--teal-lt);
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem; font-weight: 500;
}
.k-tag-weight {
background: rgba(255,181,71,0.10); border-color: rgba(255,181,71,0.24); color: var(--sun);
}
.k-tag-bait {
background: rgba(233,169,63,0.10); border-color: rgba(233,169,63,0.24); color: var(--fresh-lt);
}
.k-catch-actions {
display: flex; gap: 6px; padding: 8px 12px 12px;
border-top: 1px solid rgba(77,227,255,0.06);
margin-top: 6px;
}
.k-btn-like, .k-btn-comment {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
background: transparent; border: 1px solid rgba(77,227,255,0.14);
color: var(--muted); cursor: pointer;
font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600;
transition: all 0.22s ease;
}
.k-btn-like:hover, .k-btn-comment:hover {
border-color: rgba(77,227,255,0.36);
color: var(--white);
background: rgba(77,227,255,0.06);
}
.k-btn-like.liked {
border-color: rgba(255, 90, 120, 0.55);
color: #ff6b8a;
background: rgba(255, 90, 120, 0.10);
}
.k-btn-like.liked svg { animation: k-like-pop 0.35s ease; }
@keyframes k-like-pop {
0% { transform: scale(1); }
50% { transform: scale(1.35); }
100% { transform: scale(1); }
}
/* Comment thread */
.k-comment-thread {
padding: 12px 16px 16px;
border-top: 1px solid rgba(77,227,255,0.06);
background: rgba(3, 12, 24, 0.35);
}
.k-comments-list { margin-bottom: 12px; }
.k-comments-empty {
text-align: center; padding: 12px;
color: var(--muted); font-size: 0.82rem;
}
.k-comment {
padding: 8px 12px; border-radius: 10px;
background: rgba(11, 57, 88, 0.28);
margin-bottom: 8px;
border: 1px solid rgba(77,227,255,0.08);
}
.k-comment-head {
font-size: 0.72rem; color: var(--muted);
margin-bottom: 4px;
}
.k-comment-head strong {
color: var(--teal-lt); font-family: 'Oswald', sans-serif;
letter-spacing: 1px; font-weight: 600;
}
.k-comment-text { color: var(--white); font-size: 0.88rem; line-height: 1.5; }
.k-comment-input-row {
display: flex; gap: 8px;
}
.k-comment-input { flex: 1; padding: 10px 14px !important; }
.k-comment-send { padding: 8px 18px !important; white-space: nowrap; }
/* ── Landing "Live Community" section ──────────────────────────────── */
.k-community-wall {
padding: 80px 24px;
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
.k-community-wall .section-title { margin-bottom: 12px; }
.k-community-strip {
display: grid; gap: 16px; margin: 40px auto 0;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (max-width: 720px) {
.k-social-card { padding: 18px !important; }
.k-share-grid { grid-template-columns: 1fr 1fr; }
.k-catch-head { padding: 12px 14px; }
.k-catch-body { padding: 12px 14px 6px; }
.k-catch-actions { padding: 8px 10px 10px; }
.k-btn-like, .k-btn-comment { padding: 8px 14px; font-size: 0.88rem; }
.k-feed-tab { padding: 8px 14px; font-size: 0.68rem; }
.k-community-wall { padding: 50px 16px; }
}
/* ═══════════════════════════════════════════════════════════════════
SOCIAL LAYER · POLISH v2 (fix visual issues)
═══════════════════════════════════════════════════════════════════ */
/* Kill the orphaned left-accent bar on the community feed h2 heading
(looked bad when heading is center-aligned via flex) */
.k-social-card > h2 {
border-left: none !important;
padding-left: 0 !important;
justify-content: center !important;
font-size: 1.1rem !important;
letter-spacing: 3px !important;
margin-bottom: 8px !important;
color: var(--white) !important;
}
.k-social-card > h2 .h2-icon,
.k-social-card > h2 svg {
width: 22px !important; height: 22px !important;
padding: 6px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(77,227,255,0.14), rgba(22,179,199,0.06));
border: 1px solid rgba(77,227,255,0.22);
box-sizing: content-box !important;
}
.k-social-card > .section-tip {
color: rgba(244,251,255,0.65) !important;
margin-bottom: 22px !important;
}
/* SHARE FORM — better layout & mobile handling */
.k-share-form {
padding: 22px 22px 18px !important;
border-radius: 18px !important;
}
.k-share-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
gap: 12px !important;
}
.k-share-grid input {
padding: 12px 14px !important;
font-size: 0.92rem !important;
}
/* Feed tabs — always fit on one row */
.k-feed-tabs {
width: 100% !important;
max-width: 460px !important;
padding: 4px !important;
gap: 2px !important;
}
.k-feed-tab {
flex: 1;
padding: 9px 8px !important;
font-size: 0.66rem !important;
letter-spacing: 1.4px !important;
white-space: nowrap;
text-align: center;
}
/* Section spacing tighter */
#catch-feed-list {
margin-top: 8px !important;
gap: 12px !important;
}
/* Better empty state */
.k-feed-empty {
padding: 40px 20px !important;
border: 1px dashed rgba(77,227,255,0.16);
border-radius: 16px;
background: rgba(3,12,24,0.35);
color: var(--muted) !important;
font-size: 0.9rem !important;
line-height: 1.7 !important;
}
/* Catch card refinement — more depth, better padding */
.k-catch-card {
border-radius: 16px !important;
border-color: rgba(77,227,255,0.14) !important;
}
.k-catch-head {
padding: 14px 16px 12px !important;
gap: 10px !important;
}
.k-avatar {
width: 38px !important; height: 38px !important;
font-size: 0.82rem !important;
}
.k-catch-name {
font-size: 0.88rem !important;
letter-spacing: 1px !important;
margin-bottom: 0 !important;
}
.k-catch-time {
font-size: 0.72rem !important;
color: rgba(143,182,206,0.75) !important;
}
.k-catch-species { font-size: 0.94rem !important; margin-bottom: 10px !important; }
.k-catch-species strong { font-size: 1rem !important; }
.k-catch-body { padding: 4px 16px 12px !important; }
.k-catch-actions {
padding: 10px 14px 12px !important;
gap: 8px !important;
background: rgba(3,12,24,0.35);
}
.k-btn-like, .k-btn-comment {
padding: 6px 14px !important;
font-size: 0.78rem !important;
border-color: rgba(77,227,255,0.12) !important;
}
.k-btn-like svg, .k-btn-comment svg {
width: 14px !important; height: 14px !important;
}
/* Photo picker — cleaner inline */
.k-photo-row {
margin-bottom: 12px !important;
padding-top: 4px;
}
.k-photo-btn {
padding: 10px 18px !important;
font-size: 0.82rem !important;
border-color: rgba(77,227,255,0.24) !important;
}
/* Mobile fixes — single column form, tight tabs, no truncation */
@media (max-width: 720px) {
.k-social-card { padding: 20px 16px !important; }
.k-social-card > h2 {
font-size: 0.92rem !important;
letter-spacing: 2.2px !important;
flex-wrap: nowrap !important;
}
.k-share-form {
padding: 16px !important;
border-radius: 14px !important;
}
.k-share-grid {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.k-share-grid input {
padding: 12px 14px !important;
font-size: 0.9rem !important;
}
.k-feed-tabs {
width: 100% !important;
max-width: 100% !important;
}
.k-feed-tab {
padding: 10px 6px !important;
font-size: 0.62rem !important;
letter-spacing: 1.2px !important;
}
.k-catch-head { padding: 12px 14px !important; }
.k-catch-body { padding: 4px 14px 10px !important; }
.k-catch-actions { padding: 10px 12px !important; }
.k-angler-input-row { flex-direction: column !important; align-items: stretch !important; }
.k-angler-input-row input { max-width: 100% !important; width: 100% !important; }
.k-angler-save { width: 100% !important; }
}
/* Community wall grid tighter */
.k-community-strip {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 18px !important;
}
/* ── Delete controls (own posts + admin) ───────────────────────────── */
.k-btn-delete {
padding: 6px;
border-radius: 999px;
background: transparent;
border: 1px solid rgba(255, 90, 90, 0.20);
color: rgba(255, 120, 130, 0.85);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.22s ease;
margin-left: 6px;
flex-shrink: 0;
}
.k-btn-delete:hover {
background: rgba(255, 90, 90, 0.14);
border-color: rgba(255, 90, 90, 0.55);
color: #ff7a86;
transform: scale(1.05);
}
.k-btn-delete svg { display: block; }
.k-comment { position: relative; padding-right: 32px !important; }
.k-comment-del {
position: absolute;
top: 6px; right: 6px;
width: 22px; height: 22px;
border-radius: 999px;
background: transparent;
border: 1px solid rgba(255, 90, 90, 0.20);
color: rgba(255, 120, 130, 0.7);
cursor: pointer;
font-size: 14px;
line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: all 0.22s ease;
}
.k-comment-del:hover {
background: rgba(255, 90, 90, 0.16);
border-color: rgba(255, 90, 90, 0.55);
color: #ff7a86;
}
/* Admin mode badge (subtle indicator in top-right of viewport) */
body.k-admin-mode .k-admin-badge,
.k-admin-mode > .k-admin-badge {
display: inline-flex !important;
}
.k-admin-badge {
display: none;
position: fixed;
top: 12px; right: 12px;
z-index: 10000;
padding: 5px 12px;
border-radius: 999px;
background: rgba(255, 90, 90, 0.16);
border: 1px solid rgba(255, 90, 90, 0.45);
color: #ff7a86;
font-family: 'Oswald', sans-serif;
font-size: 0.66rem;
letter-spacing: 2.4px;
font-weight: 700;
pointer-events: none;
backdrop-filter: blur(10px);
align-items: center;
gap: 6px;
box-shadow: 0 6px 20px -6px rgba(255, 90, 90, 0.4);
}
.k-admin-badge::before {
content: '';
width: 6px; height: 6px;
border-radius: 999px;
background: #ff7a86;
box-shadow: 0 0 8px #ff7a86;
animation: k-pulse-red 1.6s ease-in-out infinite;
}
@keyframes k-pulse-red {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ═══════════════════════════════════════════════════════════════════
FINAL FIXES — Center catch card content + admin-only delete
═══════════════════════════════════════════════════════════════════ */
/* CENTER EVERYTHING in a catch card */
.k-catch-card {
text-align: center !important;
}
.k-catch-head {
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
padding: 16px 18px 6px !important;
position: relative;
}
.k-avatar {
margin: 0 auto !important;
}
.k-catch-meta {
flex: none !important;
min-width: 0;
text-align: center !important;
width: 100%;
}
.k-catch-name, .k-catch-time {
text-align: center !important;
white-space: normal !important;
overflow: visible !important;
}
.k-catch-body { padding: 4px 18px 12px !important; text-align: center !important; }
.k-catch-species { text-align: center !important; }
.k-catch-tags { justify-content: center !important; }
.k-catch-actions { justify-content: center !important; }
/* HOT BITE / SCORE badges — sit ABOVE the name, centered on their own row */
.k-hot-badge, .k-score-badge {
position: static !important;
}
.k-catch-head .k-hot-badge,
.k-catch-head .k-score-badge {
order: -1; /* appear above the avatar */
margin-bottom: 4px;
}
/* Trash button — position absolutely in top-right corner */
.k-btn-delete {
position: absolute !important;
top: 12px !important;
right: 12px !important;
margin-left: 0 !important;
z-index: 2;
}
/* Photo stays full-width above the body */
.k-catch-photo { text-align: center; }
/* ═══════════════════════════════════════════════════════════════════
FINAL FIXES — Species cards centered + nav back to top on mobile
═══════════════════════════════════════════════════════════════════ */
/* ── SPECIES CARDS — original horizontal layout (icon left, content flowing right) */
.species-card {
/* keep the original app.html inline style: flex row with gap, icon on left */
/* Only add subtle premium touches — no layout override */
border-radius: 12px !important;
transition: background 0.2s ease, transform 0.2s ease !important;
}
.species-card:hover {
background: rgba(26, 159, 181, 0.08) !important;
transform: translateX(3px);
}
.species-card .species-chevron { opacity: 0.55; }
.species-card:hover .species-chevron { opacity: 1; }
/* ── NAV — BOTTOM on mobile (as user prefers) */
@media (max-width: 720px) {
#main-nav {
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important; right: 0 !important;
z-index: 999;
padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
border-top: 1px solid rgba(77, 227, 255, 0.14) !important;
border-bottom: none !important;
box-shadow: 0 -14px 40px -12px rgba(0,0,0,0.7);
}
#main-nav .nav-tab {
flex-direction: column !important;
padding: 8px 4px !important;
font-size: 0.62rem !important;
gap: 3px !important;
}
#main-nav .nav-tab .nav-icon-svg { width: 20px !important; height: 20px !important; }
#main-nav .nav-tab.active::after { display: none !important; }
#main-nav .nav-tab.active { background: none !important; }
#main-nav .nav-tab.active .nav-icon-svg { filter: drop-shadow(0 0 8px rgba(77, 227, 255, 0.6)); }
body { padding-top: 0 !important; padding-bottom: 80px !important; }
}
/* ═══════════════════════════════════════════════════════════════════
PHASE 1 · Firebase Auth · Profile card + Sign-in button
═══════════════════════════════════════════════════════════════════ */
.fk-nav-profile-wrap {
position: fixed;
top: 68px; /* sits just below the desktop top nav */
right: 16px;
z-index: 999;
}
@media (max-width: 720px) {
.fk-nav-profile-wrap {
position: fixed !important;
top: 10px !important; /* mobile nav is at bottom → top is clear */
right: 10px !important;
left: auto !important;
padding: 0;
z-index: 1000;
}
.fk-signin-btn {
padding: 7px 12px;
font-size: 0.72rem;
gap: 6px;
}
.fk-signin-btn svg { width: 14px !important; height: 14px !important; }
.fk-profile-meta { max-width: 100px; }
.fk-profile-name { font-size: 0.72rem; }
.fk-profile-email { display: none; }
.fk-profile-card { padding: 4px 10px 4px 4px; }
.fk-avatar-img, .fk-avatar-init { width: 28px; height: 28px; }
}
.fk-hero-profile-wrap {
display: flex; justify-content: center;
margin: -10px auto 16px;
}
/* Sign-in button (Google) */
.fk-signin-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 9px 20px;
border-radius: 999px;
background: linear-gradient(135deg, #16B3C7 0%, #4DE3FF 100%);
color: #04121F;
border: none;
font-family: 'Manrope', sans-serif;
font-weight: 700; font-size: 0.85rem;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow: 0 8px 24px -8px rgba(77, 227, 255, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
transition: all 0.25s ease;
}
.fk-signin-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 30px -8px rgba(77, 227, 255, 0.6);
}
/* Profile card (signed in) */
.fk-profile-card {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 14px 6px 6px;
border-radius: 999px;
background: rgba(3, 12, 24, 0.85);
border: 1px solid rgba(77, 227, 255, 0.22);
backdrop-filter: blur(10px);
box-shadow: 0 8px 24px -10px rgba(0,0,0,0.6);
}
.fk-avatar-img, .fk-avatar-init {
width: 32px; height: 32px;
border-radius: 999px;
object-fit: cover;
border: 1px solid rgba(77, 227, 255, 0.28);
flex-shrink: 0;
}
.fk-avatar-init {
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #16B3C7, #4DE3FF);
color: #04121F;
font-family: 'Oswald', sans-serif;
font-weight: 700; font-size: 0.85rem;
}
.fk-profile-meta {
display: flex; flex-direction: column;
line-height: 1.15;
min-width: 0;
max-width: 180px;
}
.fk-profile-name {
color: var(--white);
font-family: 'Oswald', sans-serif;
font-size: 0.82rem;
letter-spacing: 1px;
font-weight: 600;
white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.fk-profile-email {
color: rgba(143, 182, 206, 0.75);
font-size: 0.7rem;
white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.fk-profile-signout {
background: transparent;
border: 1px solid rgba(77, 227, 255, 0.18);
color: var(--teal-lt);
border-radius: 999px;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.22s ease;
flex-shrink: 0;
}
.fk-profile-signout:hover {
background: rgba(77, 227, 255, 0.14);
border-color: rgba(77, 227, 255, 0.5);
}
@media (max-width: 720px) {
.fk-nav-profile-wrap {
position: fixed !important;
top: 10px !important;
right: 10px !important;
left: auto !important;
padding: 0;
order: 0;
z-index: 1000;
}
.fk-signin-btn {
padding: 7px 12px;
font-size: 0.72rem;
gap: 6px;
}
.fk-signin-btn svg { width: 14px !important; height: 14px !important; }
.fk-profile-meta { max-width: 90px; }
.fk-profile-name { font-size: 0.72rem; }
.fk-profile-email { display: none; }
.fk-profile-card { padding: 4px 10px 4px 4px; }
.fk-avatar-img, .fk-avatar-init { width: 28px; height: 28px; }
}
/* ═══════════════════════════════════════════════════════════════════
PHASE M · MOBILE RESPONSIVENESS AUDIT (360px – 430px)
Desktop styles above are untouched. This section is additive-only
and only activates on small phone viewports. Preserves all
existing functionality — no layout removal, only refinement.
═══════════════════════════════════════════════════════════════════ */
/* ── Global: prevent horizontal scroll & wire safe-area everywhere ── */
@media (max-width: 720px) {
html, body {
max-width: 100vw;
overflow-x: hidden;
}
body {
/* iOS notch / gesture bar side padding */
padding-left: env(safe-area-inset-left, 0px) !important;
padding-right: env(safe-area-inset-right, 0px) !important;
}
/* Guard: no element should push horizontal overflow */
img, video, canvas, iframe, svg { max-width: 100%; height: auto; }
/* Break long words in chat/tooltips/etc. */
p, span, div, li, a { word-wrap: break-word; overflow-wrap: break-word; }
}
/* ── Small phones (≤ 430px): iPhone 12/13/14/15 std, most Androids ── */
@media (max-width: 430px) {
/* ------- Typography scaling ------- */
.hero-headline, .hero-headline span {
font-size: clamp(2.1rem, 11vw, 3rem) !important;
letter-spacing: -0.5px !important;
line-height: 1 !important;
}
.hero-tagline {
font-size: 0.75rem !important;
padding: 10px 14px !important;
line-height: 1.35 !important;
letter-spacing: 0.6px !important;
}
h1 { font-size: clamp(1.6rem, 7vw, 2.1rem) !important; }
h2 { font-size: clamp(1rem, 4.6vw, 1.25rem) !important; }
h3 { font-size: clamp(0.95rem, 4.2vw, 1.1rem) !important; }
.report-label { font-size: 1.5rem !important; letter-spacing: 2.5px !important; }
.best-day-result { font-size: 1.35rem !important; }
/* ------- Bottom nav — tighter, safe-area aware ------- */
#main-nav {
padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
}
#main-nav .nav-tab {
padding: 6px 2px !important;
font-size: 0.58rem !important;
letter-spacing: 0.4px !important;
gap: 2px !important;
min-width: 0 !important;
}
#main-nav .nav-tab .nav-icon-svg { width: 18px !important; height: 18px !important; }
body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; }
/* ------- Sections & cards: reduce excessive padding ------- */
.dashboard { padding: 12px 12px !important; gap: 10px !important; }
.card { padding: 16px 14px !important; border-radius: 14px !important; }
.card h2 { font-size: 0.7rem !important; margin-bottom: 12px !important; padding-bottom: 10px !important; }
.best-day-banner { padding: 18px 16px !important; border-radius: 16px !important; }
/* Report section gets extra breathing room on mobile — title + button need it */
.report-section {
padding: 20px 18px !important;
}
.baitshop-section,
.catch-identifier-section, .catch-log-section, .lure-section,
.bait-section, .map-section, .ai-section {
padding: 0 12px 18px !important;
}
.species-section { padding: 30px 12px !important; }
/* Ensure cards stack cleanly */
.dashboard { grid-template-columns: 1fr !important; }
.stats-inner { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.ai-grid, .rig-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
.species-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
/* ------- Hero — tighten spacing ------- */
.hero { padding: 96px 14px 20px !important; }
.hero-btns { gap: 10px !important; margin-top: 12px !important; }
.hero-btns .btn-primary, .hero-btns .btn-outline, .hero-btns button {
width: 100% !important;
max-width: 320px !important;
padding: 12px 18px !important;
font-size: 0.85rem !important;
}
.water-toggle {
width: 100% !important;
max-width: 320px !important;
margin: 0 auto !important;
}
.water-toggle .toggle-btn {
padding: 10px 14px !important;
font-size: 0.78rem !important;
letter-spacing: 1.4px !important;
}
.fk-hero-profile-wrap { margin: 2px auto 12px !important; }
/* ------- Header / top area (marketing pages only — exclude in-app header) ------- */
.header:not(.k-home-header) {
padding: 16px 12px 20px !important;
min-height: 0 !important;
}
.header:not(.k-home-header)::before, .header:not(.k-home-header) .header-bg { opacity: 0 !important; } /* kill the beach photo backdrop so the logo sits on pure body color */
.header:not(.k-home-header)::after { opacity: 0.5 !important; }
.header:not(.k-home-header) img { height: 180px !important; width: auto !important; max-width: 82vw !important; aspect-ratio: auto !important; object-fit: contain !important; margin-bottom: 8px !important; }
.hero-logo { height: auto !important; width: 96vw !important; max-width: 520px !important; margin-bottom: 10px !important; }
#conditions-ticker {
font-size: 0.7rem !important;
padding: 6px 8px !important;
line-height: 1.3 !important;
}
/* ------- Best-day banner — stack cleanly ------- */
.best-day-inner { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
.best-day-inner > * { max-width: 100% !important; }
/* ------- Report score circle scales down ------- */
.report-score { gap: 14px !important; margin-bottom: 18px !important; }
.report-score-circle { width: 74px !important; height: 74px !important; }
/* ------- Chat UI ------- */
#chat-box {
padding: 12px !important;
min-height: 100px !important;
max-height: 300px !important;
border-radius: 14px !important;
}
#chat-box .msg, #chat-box .chat-msg, #chat-box > div {
max-width: 92% !important;
font-size: 0.88rem !important;
}
.chat-input-wrap { gap: 8px !important; }
#chat-input {
padding: 12px 14px !important;
font-size: 0.9rem !important;
border-radius: 12px !important;
}
/* ------- Buttons / pills — reduce padding ------- */
.bait-targets, .lure-targets, .lure-clarity-btns, .target-pills,
.rig-technique-pills, .species-filter-tabs {
gap: 8px !important;
}
.bait-targets > *, .lure-targets > *, .lure-clarity-btns > *,
.target-pills > *, .rig-technique-pills > *, .species-filter-tabs > * {
padding: 8px 14px !important;
font-size: 0.75rem !important;
letter-spacing: 1px !important;
}
.report-btn { padding: 11px 16px !important; font-size: 0.78rem !important; }
/* ------- Species cards — fixed heights removed, tighter ------- */
.species-card {
padding: 14px 10px !important;
min-height: auto !important;
}
.species-card-emoji { font-size: 2.2rem !important; margin-bottom: 6px !important; }
.species-card-name { font-size: 0.82rem !important; }
/* ------- Modals — remove fixed widths, add safe padding ------- */
.species-modal-inner, .spot-modal, #pwa-install-modal > div {
padding: 20px 16px !important;
max-width: 100% !important;
border-radius: 18px !important;
margin: 8px !important;
}
.species-info-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
/* ------- Map ------- */
#map { height: 300px !important; border-radius: 14px !important; }
.map-btn { padding: 7px 12px !important; font-size: 0.72rem !important; }
/* ------- Community feed (if present) ------- */
.community-post, .feed-post {
padding: 14px 12px !important;
border-radius: 14px !important;
}
.post-header { flex-wrap: wrap !important; gap: 8px !important; }
.post-actions { flex-wrap: wrap !important; gap: 8px !important; }
/* ------- Tables — allow horizontal scroll instead of overflow ------- */
table {
display: block !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* ------- Ensure no element has a hard min-width breaking layout ------- */
.hero-btns, .stats-bar, .card, .dashboard > *, .report-section,
.ai-section, .catch-log-section, .catch-identifier-section {
min-width: 0 !important;
}
/* ------- Firebase auth profile — even tighter ------- */
.fk-nav-profile-wrap {
top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
right: 8px !important;
}
.fk-signin-btn { padding: 6px 11px !important; font-size: 0.68rem !important; gap: 5px !important; }
.fk-signin-btn svg { width: 12px !important; height: 12px !important; }
.fk-profile-card { padding: 3px 9px 3px 3px !important; gap: 8px !important; }
.fk-avatar-img, .fk-avatar-init { width: 26px !important; height: 26px !important; }
.fk-profile-meta { max-width: 84px !important; }
}
/* ── Very small phones (≤ 380px): iPhone SE, older Androids ── */
@media (max-width: 380px) {
.hero-headline, .hero-headline span { font-size: 1.9rem !important; }
.hero-tagline { font-size: 0.7rem !important; padding: 9px 12px !important; }
h1 { font-size: 1.5rem !important; }
h2 { font-size: 0.95rem !important; }
.dashboard { padding: 10px 10px !important; }
.card { padding: 14px 12px !important; }
.baitshop-section,
.catch-identifier-section, .catch-log-section, .lure-section,
.bait-section, .map-section, .ai-section {
padding: 0 10px 16px !important;
}
.stats-inner { grid-template-columns: 1fr !important; }
.species-grid { grid-template-columns: 1fr !important; }
#main-nav .nav-tab {
padding: 5px 1px !important;
font-size: 0.54rem !important;
}
#main-nav .nav-tab .nav-icon-svg { width: 16px !important; height: 16px !important; }
body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; }
.fk-signin-btn { font-size: 0.64rem !important; padding: 5px 10px !important; }
.fk-profile-meta { max-width: 74px !important; }
}
/* ═══════════════════════════════════════════════════════════════════
PHASE M · FIXES (round 2)
1. Dashboard cards must stretch to full column width on mobile
2. Water-toggle pill fits its two buttons cleanly (no overlap)
3. Phone mockup + glow can't overflow section on small phones
═══════════════════════════════════════════════════════════════════ */
/* ── 1. All dashboard cards fill their grid track on mobile ── */
@media (max-width: 720px) {
.dashboard {
justify-items: stretch !important;
align-items: start !important;
}
.dashboard > .card {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
justify-self: stretch !important;
}
}
/* ── 2. Landing page: water-toggle refined on mobile ── */
@media (max-width: 480px) {
.water-toggle {
flex-direction: column !important;
border-radius: 18px !important;
padding: 6px !important;
gap: 6px !important;
width: min(320px, 88vw) !important;
box-sizing: border-box !important;
}
.water-toggle .toggle-btn {
width: 100% !important;
border-radius: 12px !important;
padding: 12px 16px !important;
justify-content: center !important;
box-shadow: none !important; /* kill the glow that visually collides with pill border */
}
/* Restore the elevation only via inner ring on the ACTIVE button */
.water-toggle .toggle-btn.salt.active {
background: linear-gradient(135deg, var(--teal), #0d7a92) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14) !important;
}
.water-toggle .toggle-btn.fresh.active {
background: linear-gradient(135deg, var(--fresh), var(--fresh-dark)) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14) !important;
}
}
/* ── 3. Phone mockup section: contain the glow + phone on small screens ── */
@media (max-width: 720px) {
.mockup-section {
padding: 60px 16px 70px !important;
overflow: hidden !important; /* clip float + glow overflow */
}
.mockup-inner {
gap: 32px !important;
grid-template-columns: 1fr !important;
max-width: 100% !important;
}
.mockup-phone-wrap {
width: 100% !important;
max-width: 100% !important;
overflow: visible;
padding: 20px 0 !important;
}
.phone-glow {
width: 240px !important;
height: 240px !important;
}
.mockup-phone {
width: min(210px, 62vw) !important;
/* Kill the rotation so it can't peek out of the section on tiny screens */
animation: phone-float-mobile 5s ease-in-out infinite !important;
}
.mockup-phone::before,
.mockup-phone::after { display: none !important; } /* side buttons — visually too much clutter on mobile */
}
@keyframes phone-float-mobile {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
/* ═══════════════════════════════════════════════════════════════════
HEADER — kill legacy dark-box overlays so the page keeps one uniform
ocean background from top to bottom (fixes visible dark rectangle
behind the logo/header on saltwater + freshwater at every viewport).
═══════════════════════════════════════════════════════════════════ */
.tab-content > .header,
#tab-home > .header,
.header {
background: transparent !important;
border-bottom: none !important;
min-height: 0 !important;
overflow: visible !important;
}
.tab-content > .header::before,
#tab-home > .header::before,
.header::before,
.header-bg {
opacity: 0 !important;
background: none !important;
display: none !important;
}
.header::after { opacity: 0 !important; }
/* ═══════════════════════════════════════════════════════════════════
NAV TABS — punch up so tabs pop and don't blend into the app.
Applies to both saltwater (teal) + freshwater (green) via per-tab
accent colours already inherited from the pages' inline styles.
═══════════════════════════════════════════════════════════════════ */
#main-nav { backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; background: rgba(4, 10, 18, 0.85) !important; box-shadow: 0 6px 28px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.06) !important; }
.nav-tab { padding: 12px 4px 10px !important; position: relative; overflow: hidden; }
.nav-tab .nav-icon-svg { color: #a9c2d2 !important; opacity: 0.88; width: 24px !important; height: 24px !important; transition: color .18s ease, filter .18s ease, transform .18s ease !important; }
.nav-tab .nav-label { color: #a9c2d2 !important; opacity: 0.92; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 1.5px !important; transition: color .18s ease, text-shadow .18s ease !important; }
.nav-tab:hover .nav-icon-svg { transform: translateY(-1px) scale(1.05); color: #d6eaf5 !important; }
.nav-tab:hover .nav-label { color: #d6eaf5 !important; }
.nav-tab.active {
background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%) !important;
border-bottom-width: 4px !important;
}
.nav-tab.active::before {
content: ""; position: absolute; inset: auto 20% 0 20%; height: 4px;
background: currentColor; border-radius: 4px 4px 0 0;
box-shadow: 0 0 18px 2px currentColor, 0 0 6px currentColor;
pointer-events: none;
}
.nav-tab.active .nav-icon-svg { filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 3px currentColor); transform: translateY(-1px) scale(1.08); }
.nav-tab.active .nav-label { text-shadow: 0 0 12px currentColor, 0 0 4px currentColor; font-weight: 700 !important; }
/* ═══════════════════════════════════════════════════════════════════
CATCH IDENTIFIER — dual-button row (Take Photo + Upload)
═══════════════════════════════════════════════════════════════════ */
.catch-btn-row { display: flex; gap: 12px; margin-top: 8px; }
.catch-mode-btn {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: linear-gradient(135deg, rgba(26,159,181,0.18), rgba(26,159,181,0.06));
border: 1.5px solid rgba(26,159,181,0.55); color: var(--teal-lt, #7fdbff);
border-radius: 12px; padding: 14px 16px;
font-family: 'Oswald', sans-serif; font-size: 0.88rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.catch-mode-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(26,159,181,0.6); background: linear-gradient(135deg, rgba(26,159,181,0.28), rgba(26,159,181,0.10)); }
.catch-mode-btn.secondary { background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border-color: rgba(255,255,255,0.18); color: #d6eaf5; }
.catch-mode-btn.secondary:hover { background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)); box-shadow: 0 6px 18px -8px rgba(255,255,255,0.4); }
.catch-mode-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 480px) { .catch-btn-row { gap: 8px; } .catch-mode-btn { padding: 12px 10px; font-size: 0.78rem; } }
/* ═══════════════════════════════════════════════════════════════════
SALTWATER · KORAVI AI CARDS — align visual layout with freshwater
Removes the large centered "ai-tool-icon" block above the h2,
inlines it beside the title, converts vertical scrolling species
tiles into freshwater's compact horizontal Title Case pills.
Applies only to #tab-ai cards on the saltwater app.
═══════════════════════════════════════════════════════════════════ */
/* 1 · Shrink the standalone .ai-tool-icon svg + pull it inline w/ h2 */
#tab-ai .card > svg.ai-tool-icon {
width: 22px !important;
height: 22px !important;
margin: 0 auto 4px !important;
stroke-width: 2 !important;
opacity: 0.95;
display: block !important;
filter: drop-shadow(0 0 6px rgba(77, 227, 255, 0.35));
}
/* 2 · Tighten h2 to match freshwater's compact section title */
#tab-ai .card > h2 {
font-family: 'Oswald', sans-serif !important;
font-size: 0.85rem !important;
letter-spacing: 2.5px !important;
text-transform: uppercase;
color: var(--teal-lt) !important;
margin: 0 0 6px !important;
text-align: center !important;
border-left: none !important;
padding-left: 0 !important;
justify-content: center !important;
}
/* 3 · Make .ai-card-desc read the same as freshwater's .section-tip */
#tab-ai .ai-card-desc {
font-size: 0.82rem !important;
color: var(--muted) !important;
margin: 0 auto 20px !important;
text-align: center !important;
line-height: 1.5 !important;
max-width: 640px;
}
/* 4 · Convert horizontal-scroll species grid into wrapping pill row */
#tab-ai .ai-species-grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
justify-content: center !important;
overflow-x: visible !important;
padding-bottom: 0 !important;
margin-bottom: 20px !important;
}
/* 5 · Restyle species tiles / JS-generated target-btns as freshwater pills */
#tab-ai .ai-species-tile,
#tab-ai .ai-species-grid .target-btn,
#tab-ai .ai-species-grid .lure-target-btn {
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
padding: 8px 16px !important;
border-radius: 999px !important;
min-width: 0 !important;
background: rgba(3, 12, 24, 0.7) !important;
border: 1px solid rgba(77, 227, 255, 0.18) !important;
transition: all 0.2s ease !important;
font-family: 'Source Sans 3', 'Manrope', sans-serif !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--muted) !important;
white-space: nowrap !important;
}
#tab-ai .ai-species-tile::before,
#tab-ai .ai-species-grid .target-btn::before,
#tab-ai .ai-species-grid .lure-target-btn::before { display: none !important; }
#tab-ai .ai-species-tile:hover,
#tab-ai .ai-species-grid .target-btn:hover,
#tab-ai .ai-species-grid .lure-target-btn:hover {
border-color: rgba(77, 227, 255, 0.55) !important;
background: rgba(11, 57, 88, 0.4) !important;
color: var(--teal-lt) !important;
transform: none !important;
}
#tab-ai .ai-species-tile.active,
#tab-ai .ai-species-grid .target-btn.active,
#tab-ai .ai-species-grid .lure-target-btn.active {
background: rgba(26, 179, 199, 0.22) !important;
border-color: var(--teal-lt) !important;
color: var(--teal-lt) !important;
}
/* SVG inside JS-generated pills */
#tab-ai .ai-species-grid .target-btn svg,
#tab-ai .ai-species-grid .lure-target-btn svg {
width: 13px !important;
height: 13px !important;
flex-shrink: 0;
}
/* 6 · Icon inside tile: small inline mark, not big stacked emoji */
#tab-ai .ai-species-tile-icon {
font-size: 0.85rem !important;
line-height: 1 !important;
display: inline-flex;
align-items: center;
}
#tab-ai .ai-species-tile-icon svg {
width: 13px !important;
height: 13px !important;
}
/* 7 · Tile label: Title Case pill text (matches freshwater .target-btn) */
#tab-ai .ai-species-tile-name {
font-family: 'Source Sans 3', 'Manrope', sans-serif !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--muted) !important;
white-space: nowrap;
}
#tab-ai .ai-species-tile:hover .ai-species-tile-name,
#tab-ai .ai-species-tile.active .ai-species-tile-name {
color: var(--teal-lt) !important;
}
/* 8 · Clarity tiles: same treatment (wrap + Title Case pill) */
#tab-ai .ai-clarity-grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
justify-content: center !important;
grid-template-columns: none !important;
margin-bottom: 20px !important;
}
#tab-ai .ai-clarity-tile {
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
padding: 8px 16px !important;
border-radius: 999px !important;
background: rgba(3, 12, 24, 0.7) !important;
border: 1px solid rgba(77, 227, 255, 0.18) !important;
}
#tab-ai .ai-clarity-tile::before { display: none !important; }
#tab-ai .ai-clarity-tile:hover {
border-color: rgba(77, 227, 255, 0.55) !important;
background: rgba(11, 57, 88, 0.4) !important;
}
#tab-ai .ai-clarity-tile.active {
background: rgba(26, 179, 199, 0.22) !important;
border-color: var(--teal-lt) !important;
/* ═══════════════════════════════════════════════════════════════════
SALTWATER · WATER TEMP + SOLUNAR — mirror freshwater
Adds the .wtemp-* / .solunar-period-* / .sp-* class rules that only
exist in freshwater.html's inline style block, so the same JS-generated
markup renders identically on the saltwater app.
═══════════════════════════════════════════════════════════════════ */
/* Water temperature card */
.wtemp-big {
font-family: 'Oswald', sans-serif !important;
font-size: 3rem !important;
font-weight: 700 !important;
text-align: center !important;
line-height: 1 !important;
margin-bottom: 4px !important;
color: var(--teal) !important;
}
.wtemp-label {
font-size: 0.75rem !important;
color: var(--muted) !important;
text-align: center !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
margin-bottom: 14px !important;
}
.wtemp-species { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.wtemp-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 7px 10px !important;
background: rgba(3, 12, 24, 0.7) !important;
border-radius: 8px !important;
border: 1px solid rgba(77, 227, 255, 0.10) !important;
}
.wtemp-row-name { font-size: 0.82rem !important; color: var(--white) !important; }
.wtemp-row-status {
font-size: 0.75rem !important;
font-family: 'Oswald', sans-serif !important;
letter-spacing: 1px !important;
padding: 2px 8px !important;
border-radius: 20px !important;
}
.wtemp-hot { background: rgba(247,201,120,0.12) !important; color: var(--teal-lt) !important; border: 1px solid rgba(247,201,120,0.28) !important; }
.wtemp-ok { background: rgba(251,191,36,0.12) !important; color: #fbbf24 !important; border: 1px solid rgba(251,191,36,0.28) !important; }
.wtemp-cold { background: rgba(99,179,237,0.12) !important; color: #63b3ed !important; border: 1px solid rgba(99,179,237,0.28) !important; }
/* Solunar period rows (Fish Activity Today) */
.solunar-periods { display: flex !important; flex-direction: column !important; gap: 7px !important; margin-top: 14px !important; }
.solunar-period-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 9px 12px !important;
background: rgba(3, 12, 24, 0.7) !important;
border: 1px solid rgba(77, 227, 255, 0.10) !important;
border-radius: 8px !important;
}
.solunar-period-time { font-family: 'Oswald', sans-serif !important; font-size: 0.92rem !important; color: var(--white) !important; }
.solunar-period-type { font-size: 0.72rem !important; color: var(--muted) !important; margin-top: 2px !important; }
.solunar-period-badge {
font-family: 'Oswald', sans-serif !important;
font-size: 0.68rem !important;
letter-spacing: 1px !important;
border-radius: 20px !important;
padding: 3px 10px !important;
font-weight: 600 !important;
}
.sp-major {
background: rgba(255, 181, 71, 0.14) !important;
color: var(--sun) !important;
border: 1px solid rgba(255, 181, 71, 0.36) !important;
}
.sp-minor {
background: rgba(95, 245, 168, 0.10) !important;
color: var(--teal-lt) !important;
border: 1px solid rgba(95, 245, 168, 0.28) !important;
}
.buoy-pill {
background: rgba(3, 12, 24, 0.7) !important;
border: 1px solid rgba(77, 227, 255, 0.14) !important;
border-radius: 20px !important;
padding: 5px 12px !important;
font-size: 0.78rem !important;
color: var(--muted) !important;
}
.buoy-pill span { color: var(--teal-lt) !important; font-weight: 700 !important; }
}
#tab-ai .ai-clarity-tile-icon,
#tab-ai .ai-clarity-grid .clarity-btn > svg:first-child { font-size: 0.85rem !important; line-height: 1 !important; }
#tab-ai .ai-clarity-tile-icon svg,
#tab-ai .ai-clarity-grid .clarity-btn svg { width: 13px !important; height: 13px !important; }
#tab-ai .ai-clarity-tile-name,
#tab-ai .ai-clarity-grid .clarity-btn {
font-family: 'Source Sans 3', 'Manrope', sans-serif !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--muted) !important;
white-space: nowrap !important;
}
#tab-ai .ai-clarity-grid .clarity-btn {
padding: 8px 16px !important;
border-radius: 999px !important;
background: rgba(3, 12, 24, 0.7) !important;
border: 1px solid rgba(77, 227, 255, 0.18) !important;
}
#tab-ai .ai-clarity-grid .clarity-btn:hover {
border-color: rgba(77, 227, 255, 0.55) !important;
color: var(--teal-lt) !important;
}
#tab-ai .ai-clarity-grid .clarity-btn.active {
background: rgba(26, 179, 199, 0.22) !important;
border-color: var(--teal-lt) !important;
color: var(--teal-lt) !important;
}
#tab-ai .ai-clarity-tile:hover .ai-clarity-tile-name,
#tab-ai .ai-clarity-tile.active .ai-clarity-tile-name {
color: var(--teal-lt) !important;
}
/* 9 · Small "Select your target species" label — center + soften */
#tab-ai .ai-tool-section-label {
text-align: center !important;
margin: 4px auto 10px !important;
color: var(--muted) !important;
}
/* 10 · Card outer wrapper: same subtle inner glow as freshwater */
#tab-ai .card {
background: linear-gradient(180deg, rgba(10, 33, 64, 0.55), rgba(5, 19, 36, 0.85)) !important;
border: 1px solid rgba(77, 227, 255, 0.14) !important;
}
/* Mobile compaction — keep pills readable + wrap cleanly */
@media (max-width: 480px) {
#tab-ai .ai-species-tile,
#tab-ai .ai-clarity-tile { padding: 7px 13px !important; }
#tab-ai .ai-species-tile-name,
#tab-ai .ai-clarity-tile-name { font-size: 0.8rem !important; }
#tab-ai .card > svg.ai-tool-icon { width: 20px !important; height: 20px !important; }
#tab-ai .card > h2 { font-size: 0.78rem !important; letter-spacing: 2px !important; }
}
/* ═══════════════════════════════════════════════════════════════
MODE BADGE + HABITAT CHIPS (Freshwater vs Saltwater modes)
═══════════════════════════════════════════════════════════════ */
.k-mode-pill {
display: inline-block;
margin-left: 8px;
padding: 3px 10px;
border-radius: 999px;
font-family: 'Manrope', system-ui, sans-serif;
font-weight: 700;
font-size: 0.62rem;
letter-spacing: 1.4px;
text-transform: uppercase;
vertical-align: 4px;
white-space: nowrap;
}
.k-mode-pill.k-mode-salt {
background: linear-gradient(135deg, rgba(26,159,181,0.22), rgba(77,227,255,0.14));
color: #4de3ff;
border: 1px solid rgba(77,227,255,0.4);
box-shadow: 0 0 12px rgba(77,227,255,0.2) inset;
}
.k-mode-pill.k-mode-fresh {
background: linear-gradient(135deg, rgba(233,169,63,0.22), rgba(181,125,30,0.14));
color: #F7C978;
border: 1px solid rgba(233,169,63,0.4);
box-shadow: 0 0 12px rgba(233,169,63,0.2) inset;
}
@media (max-width: 520px) {
.k-mode-pill { display: block; margin: 4px 0 0; font-size: 0.58rem; letter-spacing: 1.2px; vertical-align: baseline; }
}
.k-habitat-row {
margin: 4px 0 16px;
padding: 12px 14px;
background: rgba(8,14,20,0.55);
border: 1px solid rgba(77,227,255,0.14);
border-radius: 12px;
}
.k-habitat-label {
font-family: 'Oswald', sans-serif;
font-size: 0.66rem;
letter-spacing: 2.4px;
text-transform: uppercase;
color: rgba(230,245,255,0.55);
margin-bottom: 8px;
}
.k-habitat-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.k-habitat-chip {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(77,227,255,0.24);
border-radius: 999px;
padding: 7px 14px;
color: #d9edf7;
font-family: 'Manrope', system-ui, sans-serif;
font-weight: 600;
font-size: 0.78rem;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.k-habitat-chip:hover {
background: rgba(77,227,255,0.08);
border-color: rgba(77,227,255,0.5);
}
.k-habitat-chip.active {
background: linear-gradient(135deg, rgba(26,159,181,0.35), rgba(77,227,255,0.22));
border-color: #4de3ff;
color: #eafaff;
box-shadow: 0 4px 14px rgba(77,227,255,0.22);
}
.k-habitat-chip--fresh {
border-color: rgba(233,169,63,0.32);
}
.k-habitat-chip--fresh:hover {
background: rgba(233,169,63,0.08);
border-color: rgba(233,169,63,0.55);
}
.k-habitat-chip--fresh.active {
background: linear-gradient(135deg, rgba(181,125,30,0.35), rgba(233,169,63,0.22));
border-color: #F7C978;
color: #eaffe4;
box-shadow: 0 4px 14px rgba(233,169,63,0.22);
}
/* Promoted saltwater tide card sits directly under the status strip */
.k-tide-promoted {
border: 1px solid rgba(77,227,255,0.22);
box-shadow: 0 6px 24px -12px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03);
}
/* ═══════════════════════════════════════════════════════════════
LANDING MODE CHOOSER (index.html)
═══════════════════════════════════════════════════════════════ */
.fk-mode-chooser {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 780px;
margin: 22px auto 32px;
padding: 0 16px;
}
@media (max-width: 640px) { .fk-mode-chooser { grid-template-columns: 1fr; } }
.fk-mode-card {
display: block;
padding: 22px 20px 24px;
border-radius: 18px;
text-decoration: none;
color: #e6f7ff;
border: 1px solid rgba(77,227,255,0.24);
background: linear-gradient(155deg, rgba(10,25,38,0.9), rgba(3,10,20,0.9));
box-shadow: 0 12px 34px -18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.03);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
position: relative;
overflow: hidden;
}
.fk-mode-card:hover {
transform: translateY(-3px);
border-color: rgba(77,227,255,0.55);
box-shadow: 0 22px 44px -18px rgba(0,0,0,0.75);
}
.fk-mode-card.fk-mode-salt::before,
.fk-mode-card.fk-mode-fresh::before {
content: ''; position: absolute; top: -30%; right: -20%;
width: 220px; height: 220px; border-radius: 50%;
filter: blur(48px); opacity: 0.28; pointer-events: none;
}
.fk-mode-card.fk-mode-salt::before { background: #4de3ff; }
.fk-mode-card.fk-mode-fresh::before { background: #F7C978; }
.fk-mode-card.fk-mode-fresh {
border-color: rgba(233,169,63,0.28);
background: linear-gradient(155deg, rgba(10,28,20,0.9), rgba(4,14,10,0.92));
}
.fk-mode-card .fk-mode-eyebrow {
font-family: 'Oswald', sans-serif;
font-size: 0.66rem; letter-spacing: 2.6px; text-transform: uppercase;
color: rgba(230,245,255,0.6); margin-bottom: 8px;
}
.fk-mode-card .fk-mode-title {
font-family: 'Oswald', sans-serif;
font-size: 1.7rem; letter-spacing: 1.5px; text-transform: uppercase;
color: #4de3ff; margin-bottom: 6px;
}
.fk-mode-card.fk-mode-fresh .fk-mode-title { color: #F7C978; }
.fk-mode-card .fk-mode-desc {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 0.86rem; color: rgba(230,245,255,0.78); line-height: 1.4;
margin-bottom: 14px;
}
.fk-mode-card .fk-mode-cta {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'Manrope', system-ui, sans-serif;
font-weight: 700; font-size: 0.82rem; letter-spacing: 0.4px;
color: #4de3ff;
}
.fk-mode-card.fk-mode-fresh .fk-mode-cta { color: #F7C978; }
.fk-mode-card .fk-mode-tag {
display: inline-block; margin-top: 10px;
padding: 2px 10px; border-radius: 999px;
background: rgba(77,227,255,0.12); color: #a3ecff;
border: 1px solid rgba(77,227,255,0.32);
font-family: 'Manrope', system-ui, sans-serif;
font-weight: 600; font-size: 0.7rem; letter-spacing: 0.5px;
}
.fk-mode-card.fk-mode-fresh .fk-mode-tag {
background: rgba(233,169,63,0.12); color: #cff5d9;
border-color: rgba(233,169,63,0.32);
}
/* ═══════════════════════════════════════════════════════════════
ADVANTAGE STRIP (index.html hero) — 4 compact feature cards
═══════════════════════════════════════════════════════════════ */
.fk-adv-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
max-width: 900px;
margin: 26px auto 8px;
padding: 0 8px;
position: relative; z-index: 1;
}
@media (max-width: 820px) { .fk-adv-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .fk-adv-strip { grid-template-columns: 1fr; gap: 10px; } }
.fk-adv-card {
position: relative;
padding: 14px 14px 15px;
border-radius: 14px;
background: linear-gradient(155deg, rgba(10,25,38,0.72), rgba(3,10,20,0.72));
border: 1px solid rgba(77,227,255,0.18);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
box-shadow: 0 6px 18px -10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03);
text-align: left;
overflow: hidden;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.fk-adv-card:hover {
transform: translateY(-2px);
border-color: rgba(77,227,255,0.42);
box-shadow: 0 14px 28px -12px rgba(0,0,0,0.7), 0 0 22px -8px rgba(77,227,255,0.28);
}
.fk-adv-card .fk-adv-icon { font-size: 1.35rem; line-height: 1; margin-bottom: 6px; filter: drop-shadow(0 2px 8px rgba(77,227,255,0.35)); }
.fk-adv-card .fk-adv-title { font-family: 'Oswald', sans-serif; font-size: 0.82rem; letter-spacing: 1.2px; text-transform: uppercase; color: #eafaff; margin-bottom: 4px; }
.fk-adv-card .fk-adv-desc { font-family: 'Manrope', system-ui, sans-serif; font-size: 0.74rem; line-height: 1.45; color: rgba(220,240,250,0.7); }
.fk-adv-card.fk-adv--gulf { border-color: rgba(244,162,40,0.32); }
.fk-adv-card.fk-adv--gulf:hover { border-color: rgba(244,162,40,0.6); box-shadow: 0 14px 28px -12px rgba(0,0,0,0.7), 0 0 22px -8px rgba(244,162,40,0.32); }
.fk-adv-card.fk-adv--gulf .fk-adv-title { color: #ffd48a; }
.fk-adv-card.fk-adv--moon { border-color: rgba(180,200,255,0.24); }
.fk-adv-card.fk-adv--moon:hover { border-color: rgba(180,200,255,0.55); box-shadow: 0 14px 28px -12px rgba(0,0,0,0.7), 0 0 22px -8px rgba(180,200,255,0.28); }
.fk-adv-card.fk-adv--moon .fk-adv-title { color: #c7d5ff; }
.fk-adv-card.fk-adv--patterns { border-color: rgba(77,227,255,0.28); }
.fk-adv-card.fk-adv--patterns .fk-adv-title { color: #a3ecff; }
.fk-adv-card.fk-adv--water { border-color: rgba(233,169,63,0.28); }
.fk-adv-card.fk-adv--water:hover { border-color: rgba(233,169,63,0.55); box-shadow: 0 14px 28px -12px rgba(0,0,0,0.7), 0 0 22px -8px rgba(233,169,63,0.28); }
.fk-adv-card.fk-adv--water .fk-adv-title { color: #cff5d9; }
.fk-adv-card { opacity: 0; transform: translateY(8px); animation: fkadvin .55s cubic-bezier(0.2, 0.9, 0.3, 1.05) forwards; }
.fk-adv-card:nth-child(1) { animation-delay: 0.05s; }
.fk-adv-card:nth-child(2) { animation-delay: 0.15s; }
.fk-adv-card:nth-child(3) { animation-delay: 0.25s; }
.fk-adv-card:nth-child(4) { animation-delay: 0.35s; }
@keyframes fkadvin { to { opacity: 1; transform: translateY(0); } }
/* ═══════════════════════════════════════════════════════════════
LANDING · Prominent Sign-In (fills space where water toggle used to live)
═══════════════════════════════════════════════════════════════ */
.fk-hero-profile-wrap--lg {
margin: 6px auto 22px !important;
}
.fk-hero-profile-wrap--lg .fk-signin-btn {
padding: 14px 30px !important;
font-size: 1rem !important;
gap: 12px !important;
border-radius: 999px !important;
letter-spacing: 0.02em !important;
box-shadow: 0 12px 36px -10px rgba(77, 227, 255, 0.6), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}
.fk-hero-profile-wrap--lg .fk-signin-btn svg { width: 20px !important; height: 20px !important; }
.fk-hero-profile-wrap--lg .fk-signin-btn:hover {
transform: translateY(-2px);
box-shadow: 0 18px 42px -10px rgba(77, 227, 255, 0.72), inset 0 1px 0 rgba(255,255,255,0.32) !important;
}
@media (max-width: 640px) {
.fk-hero-profile-wrap--lg .fk-signin-btn { padding: 12px 24px !important; font-size: 0.92rem !important; }
.fk-hero-profile-wrap--lg .fk-signin-btn svg { width: 18px !important; height: 18px !important; }
}
/* ═══════════════════════════════════════════════════════════════════
PREMIUM BAIT / LURE TOOL CARDS
Scoped under .k-premium-card — does not affect other tool cards.
Two color themes: .k-premium-bait (cyan) .k-premium-lure (purple)
═══════════════════════════════════════════════════════════════════ */
.k-premium-card {
position: relative !important;
padding: 0 !important;
overflow: hidden !important;
background: linear-gradient(180deg, rgba(6, 20, 40, 0.92), rgba(2, 10, 22, 0.98)) !important;
border-radius: 24px !important;
border: 1px solid rgba(77, 227, 255, 0.08) !important;
box-shadow:
0 0 0 1px rgba(77, 227, 255, 0.06),
0 30px 80px -30px rgba(0, 0, 0, 0.9),
inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
}
.k-premium-card::before {
content: '';
position: absolute;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: auto !important;
inset: 0;
border-radius: 24px;
padding: 1px;
background: linear-gradient(140deg, rgba(77, 227, 255, 0.28), rgba(77, 227, 255, 0) 40%, rgba(77, 227, 255, 0) 60%, rgba(77, 227, 255, 0.18)) !important;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 2;
}
.k-premium-card.k-premium-lure::before {
background: linear-gradient(140deg, rgba(176, 133, 255, 0.32), rgba(176, 133, 255, 0) 40%, rgba(176, 133, 255, 0) 60%, rgba(176, 133, 255, 0.22));
}
.k-premium-card:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 1px rgba(77, 227, 255, 0.16),
0 36px 90px -30px rgba(0, 0, 0, 0.95),
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.k-premium-card.k-premium-lure:hover {
box-shadow:
0 0 0 1px rgba(176, 133, 255, 0.22),
0 36px 90px -30px rgba(0, 0, 0, 0.95),
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
/* Hero row (icon + title + decorative background) */
.k-premium-hero {
position: relative;
display: flex;
align-items: flex-start;
gap: 18px;
padding: 28px 28px 22px;
min-height: 160px;
overflow: hidden;
isolation: isolate;
}
.k-premium-hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(600px 240px at 100% 0%, rgba(77, 227, 255, 0.22) 0%, transparent 55%),
radial-gradient(400px 200px at 100% 100%, rgba(77, 227, 255, 0.10) 0%, transparent 60%);
z-index: -1;
pointer-events: none;
}
.k-premium-card.k-premium-lure .k-premium-hero::before {
background:
radial-gradient(600px 240px at 100% 0%, rgba(176, 133, 255, 0.24) 0%, transparent 55%),
radial-gradient(400px 200px at 100% 100%, rgba(126, 92, 255, 0.14) 0%, transparent 60%);
}
/* Decorative fish/lure imagery in the hero — sits behind the text */
.k-premium-hero-art {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 52%;
max-width: 460px;
min-width: 200px;
background-repeat: no-repeat;
background-position: right center;
background-size: cover;
opacity: 0.92;
pointer-events: none;
z-index: -1;
/* Strong left-fade so text never overlaps the image */
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.15) 25%, rgba(0,0,0,0.7) 55%, #000 80%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.15) 25%, rgba(0,0,0,0.7) 55%, #000 80%);
}
.k-premium-hero-art::after {
/* Blue/purple tint overlay so the photo blends with the card theme */
content: '';
position: absolute; inset: 0;
mix-blend-mode: color;
background: linear-gradient(90deg, rgba(4, 14, 28, 0.9), rgba(2, 22, 44, 0.35) 60%, transparent);
}
.k-premium-bait .k-premium-hero-art {
background-image:
linear-gradient(90deg, rgba(2, 10, 22, 0.98) 0%, rgba(2, 10, 22, 0.7) 25%, rgba(2, 10, 22, 0.25) 50%, transparent 75%),
url('/bait-hero.jpg?v=1');
background-position: right center;
background-size: cover;
filter: saturate(1.05) contrast(1.03);
}
.k-premium-lure .k-premium-hero-art {
background-image:
linear-gradient(90deg, rgba(2, 10, 22, 0.98) 0%, rgba(2, 10, 22, 0.7) 25%, rgba(2, 10, 22, 0.25) 50%, transparent 75%),
url('/lure-hero.jpg?v=1');
background-position: right center;
background-size: cover;
filter: saturate(1.08) contrast(1.03);
}
.k-premium-hero-icon {
flex: 0 0 auto;
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, rgba(77, 227, 255, 0.18), rgba(77, 227, 255, 0.04));
border: 1px solid rgba(77, 227, 255, 0.22);
border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 22px -6px rgba(77, 227, 255, 0.35);
color: #4DE3FF;
}
.k-premium-lure .k-premium-hero-icon {
background: linear-gradient(160deg, rgba(176, 133, 255, 0.20), rgba(126, 92, 255, 0.05));
border-color: rgba(176, 133, 255, 0.28);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 22px -6px rgba(176, 133, 255, 0.4);
color: #C7A6FF;
}
.k-premium-hero-icon svg { width: 26px; height: 26px; display: block; }
.k-premium-hero-text {
flex: 1 1 auto;
min-width: 0;
max-width: 62%;
}
.k-premium-title {
font-family: 'Manrope', 'Oswald', sans-serif !important;
font-weight: 800 !important;
font-size: 1.5rem !important;
line-height: 1.15 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #F4FBFF !important;
margin: 0 0 8px !important;
text-align: left !important;
}
.k-premium-sub {
font-size: 0.9rem !important;
color: #9EB6CE !important;
line-height: 1.55 !important;
margin: 0 !important;
text-align: left !important;
max-width: 44ch;
}
.k-premium-sub strong { color: #F4FBFF; font-weight: 600; }
.k-premium-bait .k-premium-title-em { color: #4DE3FF !important; }
.k-premium-lure .k-premium-title-em { color: #C7A6FF !important; }
/* Live conditions strip */
.k-premium-conditions {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
padding: 0 28px 22px;
z-index: 3;
}
.k-cond {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(4, 14, 28, 0.7);
border: 1px solid rgba(77, 227, 255, 0.12);
border-radius: 12px;
min-width: 0;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.k-premium-lure .k-cond {
border-color: rgba(176, 133, 255, 0.18);
}
.k-cond-icon {
flex: 0 0 auto;
width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
color: #4DE3FF;
opacity: 0.95;
}
.k-premium-lure .k-cond-icon { color: #C7A6FF; }
.k-cond-icon svg { width: 20px; height: 20px; }
.k-cond-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.k-cond-value {
font-family: 'Manrope', 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.98rem;
font-weight: 700;
color: #F4FBFF;
letter-spacing: 0.01em;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.k-cond-label {
font-size: 0.68rem;
color: #8FB6CE;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
}
/* Divider + section label */
.k-premium-divider {
height: 1px;
margin: 4px 28px 18px;
background: linear-gradient(90deg, transparent, rgba(77, 227, 255, 0.35), transparent);
}
.k-premium-lure .k-premium-divider {
background: linear-gradient(90deg, transparent, rgba(176, 133, 255, 0.4), transparent);
}
.k-premium-section-label {
text-align: center;
font-family: 'Manrope', 'Oswald', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #4DE3FF;
margin: 0 28px 16px;
}
.k-premium-lure .k-premium-section-label { color: #C7A6FF; }
/* Species pill container */
.k-premium-pills-wrap {
padding: 0 24px 8px;
}
.k-premium-pills-wrap .target-pills,
.k-premium-pills-wrap #bait-target-pills,
.k-premium-pills-wrap #lure-target-pills {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
justify-content: center !important;
margin: 0 !important;
padding: 4px 0 !important;
}
/* Pill chip look — applied to all target/lure buttons inside a premium card */
.k-premium-card .target-btn,
.k-premium-card .lure-target-btn,
.k-premium-card .ai-species-tile {
background: rgba(6, 22, 44, 0.85) !important;
border: 1px solid rgba(77, 227, 255, 0.16) !important;
color: #B9D2E6 !important;
border-radius: 999px !important;
padding: 8px 18px !important;
font-family: 'Manrope', 'Source Sans 3', sans-serif !important;
font-weight: 600 !important;
font-size: 0.82rem !important;
letter-spacing: 0.02em !important;
transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
white-space: nowrap !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
.k-premium-card .target-btn:hover,
.k-premium-card .lure-target-btn:hover {
border-color: rgba(77, 227, 255, 0.42) !important;
color: #E6F6FF !important;
transform: translateY(-1px);
}
.k-premium-card .target-btn.active,
.k-premium-card .lure-target-btn.active,
.k-premium-card .ai-species-tile.active {
background: linear-gradient(140deg, rgba(77, 227, 255, 0.24), rgba(77, 227, 255, 0.08)) !important;
border-color: rgba(77, 227, 255, 0.65) !important;
color: #EAF9FF !important;
box-shadow: 0 0 0 1px rgba(77, 227, 255, 0.28), 0 8px 22px -10px rgba(77, 227, 255, 0.6) !important;
}
.k-premium-lure .target-btn:hover,
.k-premium-lure .lure-target-btn:hover {
border-color: rgba(176, 133, 255, 0.45) !important;
color: #F1E9FF !important;
}
.k-premium-lure .lure-target-btn.active,
.k-premium-lure .target-btn.active,
.k-premium-lure .ai-species-tile.active {
background: linear-gradient(140deg, rgba(176, 133, 255, 0.28), rgba(126, 92, 255, 0.10)) !important;
border-color: rgba(176, 133, 255, 0.7) !important;
color: #F5EEFF !important;
box-shadow: 0 0 0 1px rgba(176, 133, 255, 0.32), 0 8px 22px -10px rgba(176, 133, 255, 0.6) !important;
}
.k-premium-card .target-btn svg,
.k-premium-card .lure-target-btn svg { opacity: 0.85; }
/* Clarity chips (saltwater ai-clarity-grid + freshwater .target-pills wrapping clarity-btn) */
.k-premium-card .ai-clarity-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
gap: 10px !important;
padding: 0 24px 4px !important;
margin-top: 4px !important;
}
.k-premium-card .clarity-btn,
.k-premium-card .ai-clarity-tile {
background: rgba(6, 22, 44, 0.85) !important;
border: 1px solid rgba(176, 133, 255, 0.18) !important;
color: #B9D2E6 !important;
border-radius: 12px !important;
padding: 10px 14px !important;
font-weight: 600 !important;
font-size: 0.82rem !important;
letter-spacing: 0.02em !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.k-premium-card .clarity-btn:hover,
.k-premium-card .ai-clarity-tile:hover {
border-color: rgba(176, 133, 255, 0.5) !important;
color: #F1E9FF !important;
}
.k-premium-card .clarity-btn.active,
.k-premium-card .ai-clarity-tile.active {
background: linear-gradient(140deg, rgba(176, 133, 255, 0.24), rgba(126, 92, 255, 0.08)) !important;
border-color: rgba(176, 133, 255, 0.65) !important;
color: #F5EEFF !important;
box-shadow: 0 0 0 1px rgba(176, 133, 255, 0.28), 0 8px 22px -10px rgba(176, 133, 255, 0.55) !important;
}
/* CTA button */
.k-premium-cta-wrap {
display: flex;
justify-content: center;
padding: 16px 24px 28px;
}
.k-premium-card #bait-btn,
.k-premium-card #lure-btn,
.k-premium-card .k-premium-cta {
position: relative;
min-width: min(360px, 88%);
padding: 15px 32px !important;
font-family: 'Manrope', sans-serif !important;
font-weight: 700 !important;
font-size: 0.98rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #04121F !important;
border-radius: 999px !important;
border: 0 !important;
cursor: pointer !important;
background: linear-gradient(120deg, #6EF0FF 0%, #16B3C7 60%, #0E7C90 100%) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.14) inset,
0 14px 34px -12px rgba(77, 227, 255, 0.72),
0 4px 12px -4px rgba(2, 8, 20, 0.6) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
}
.k-premium-card.k-premium-lure #lure-btn,
.k-premium-card.k-premium-lure .k-premium-cta {
color: #180C2E !important;
background: linear-gradient(120deg, #E0BFFF 0%, #B085FF 55%, #7D5CFF 100%) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.16) inset,
0 14px 34px -12px rgba(176, 133, 255, 0.72),
0 4px 12px -4px rgba(2, 8, 20, 0.6) !important;
}
.k-premium-card #bait-btn:hover,
.k-premium-card #lure-btn:hover,
.k-premium-card .k-premium-cta:hover {
transform: translateY(-2px);
filter: brightness(1.05);
}
.k-premium-card #bait-btn:disabled,
.k-premium-card #lure-btn:disabled { opacity: 0.7; cursor: default; transform: none; }
/* Result area padding so bait/lure result reports still look clean */
.k-premium-card #bait-result,
.k-premium-card #lure-result {
padding: 0 24px 24px;
}
.k-premium-card #bait-result:empty,
.k-premium-card #lure-result:empty { padding: 0; }
/* Neutralise legacy #tab-ai .card padding for our premium cards */
#tab-ai .card.k-premium-card { padding: 0 !important; }
#tab-ai .card.k-premium-card h2 { margin: 0; padding: 0; }
#tab-ai .card.k-premium-card::before { display: none; }
/* Tablet layout — 4 columns still fit */
@media (max-width: 900px) {
.k-premium-hero { min-height: 150px; padding: 24px 22px 20px; }
.k-premium-hero-art { width: 44%; max-width: 320px; }
.k-premium-title { font-size: 1.35rem !important; letter-spacing: 0.05em !important; }
.k-premium-conditions { padding: 0 22px 18px; }
.k-premium-divider { margin: 4px 22px 16px; }
.k-premium-section-label { margin: 0 22px 14px; }
.k-premium-pills-wrap { padding: 0 18px 8px; }
.k-premium-card .ai-clarity-grid { padding: 0 18px 4px !important; }
.k-premium-cta-wrap { padding: 14px 20px 24px; }
.k-premium-card #bait-result,
.k-premium-card #lure-result { padding: 0 18px 22px; }
}
/* Mobile — conditions strip becomes 2×2, hero art fades further */
@media (max-width: 640px) {
.k-premium-hero {
padding: 22px 18px 18px;
min-height: 140px;
flex-direction: row;
gap: 14px;
}
.k-premium-hero-icon { width: 44px; height: 44px; border-radius: 12px; }
.k-premium-hero-icon svg { width: 22px; height: 22px; }
.k-premium-title { font-size: 1.15rem !important; letter-spacing: 0.05em !important; }
.k-premium-sub { font-size: 0.82rem !important; }
.k-premium-hero-text { max-width: 100%; }
.k-premium-hero-art {
width: 55%;
min-width: 150px;
opacity: 0.35;
mask-image: linear-gradient(90deg, transparent 0%, #000 50%, #000 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%, #000 100%);
}
.k-premium-conditions {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding: 0 18px 16px;
}
.k-cond { padding: 8px 10px; }
.k-cond-icon { width: 22px; height: 22px; }
.k-cond-icon svg { width: 18px; height: 18px; }
.k-cond-value { font-size: 0.9rem; }
.k-cond-label { font-size: 0.62rem; letter-spacing: 0.05em; }
.k-premium-divider { margin: 2px 18px 14px; }
.k-premium-section-label { margin: 0 18px 12px; font-size: 0.68rem; letter-spacing: 0.22em; }
.k-premium-pills-wrap { padding: 0 14px 6px; }
.k-premium-card .target-btn,
.k-premium-card .lure-target-btn,
.k-premium-card .ai-species-tile { padding: 7px 14px !important; font-size: 0.78rem !important; }
.k-premium-card .ai-clarity-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
padding: 0 14px 4px !important;
}
.k-premium-cta-wrap { padding: 12px 16px 22px; }
.k-premium-card #bait-btn,
.k-premium-card #lure-btn,
.k-premium-card .k-premium-cta {
min-width: 100%;
padding: 14px 22px !important;
font-size: 0.9rem !important;
letter-spacing: 0.06em !important;
}
.k-premium-card #bait-result,
.k-premium-card #lure-result { padding: 0 14px 20px; }
}
/* ══════════════════════════════════════════════════════════════
FISHING GUIDE — PREMIUM CARD (Saltwater + Freshwater)
Flagship chat card at the top of the Koravi AI tab.
══════════════════════════════════════════════════════════════ */
.fk-guide-shell {
max-width: 1300px;
margin: 0 auto;
padding: 24px 16px 8px;
}
.fk-guide-card {
--fg-teal: #2dd4bf;
--fg-cyan: #22d3ee;
--fg-text: #e8f1f5;
--fg-dim: #7d95a8;
--fg-panel: #0b1826;
position: relative;
background:
linear-gradient(180deg, rgba(45, 212, 191, 0.05) 0%, rgba(11, 24, 38, 0) 15%),
var(--fg-panel);
border: 1px solid rgba(45, 212, 191, 0.18);
border-top: 1px solid rgba(45, 212, 191, 0.4);
border-radius: 18px;
padding: 30px 26px 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.fk-guide-card::before {
content: "";
position: absolute;
top: -80px;
right: -80px;
width: 260px;
height: 260px;
background: radial-gradient(circle, rgba(45, 212, 191, 0.10) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.fk-guide-card > * { position: relative; z-index: 1; }
/* Header */
.fk-guide-header {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 18px;
text-align: left;
}
.fk-guide-icon {
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 12px;
border: 1px solid rgba(45, 212, 191, 0.35);
background: rgba(45, 212, 191, 0.06);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 18px rgba(45, 212, 191, 0.15);
}
.fk-guide-icon svg {
width: 22px;
height: 22px;
color: var(--fg-teal);
}
.fk-guide-headline { min-width: 0; }
.fk-guide-eyebrow {
font-family: 'Oswald', 'Segoe UI', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
color: var(--fg-teal);
margin-bottom: 4px;
text-transform: uppercase;
}
.fk-guide-title {
margin: 0 0 6px !important;
font-family: 'Oswald', 'Segoe UI', sans-serif;
font-size: 20px !important;
letter-spacing: 1.5px !important;
font-weight: 800 !important;
line-height: 1.15 !important;
text-align: left !important;
border: none !important;
padding: 0 !important;
}
.fk-guide-title-a { color: #fff; }
.fk-guide-title-b { color: var(--fg-teal); }
.fk-guide-sub {
margin: 0;
font-size: 13.5px;
color: var(--fg-dim);
line-height: 1.5;
text-align: left;
}
/* Live conditions strip */
.fk-guide-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-bottom: 20px;
}
.fk-guide-stat {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(45, 212, 191, 0.15);
border-radius: 10px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.fk-guide-stat-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fg-teal);
}
.fk-guide-stat-icon svg {
width: 16px;
height: 16px;
}
.fk-guide-stat-body { min-width: 0; line-height: 1.15; }
.fk-guide-stat-val {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--fg-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fk-guide-stat-lbl {
display: block;
font-size: 10px;
letter-spacing: 0.5px;
color: var(--fg-dim);
text-transform: uppercase;
margin-top: 2px;
}
/* Chat window (wraps #chat-box + prompt pills) */
.fk-guide-chatwin {
background: rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
padding: 16px;
margin-bottom: 14px;
}
.fk-guide-card #chat-box {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
min-height: 60px;
max-height: 360px;
overflow-y: auto;
}
.fk-guide-card .chat-msg {
display: flex;
gap: 10px;
margin-bottom: 10px;
align-items: flex-start;
}
.fk-guide-card .chat-msg.user { flex-direction: row-reverse; }
.fk-guide-card .chat-avatar {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 9px;
border: 1px solid rgba(45, 212, 191, 0.35);
background: rgba(45, 212, 191, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fg-teal);
}
.fk-guide-card .chat-msg.user .chat-avatar {
border-color: rgba(34, 211, 238, 0.35);
background: rgba(34, 211, 238, 0.10);
color: var(--fg-cyan);
}
.fk-guide-card .chat-bubble {
background: rgba(255, 255, 255, 0.035) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 12px !important;
padding: 12px 14px !important;
font-size: 13.5px !important;
line-height: 1.55 !important;
color: #dce8ee !important;
max-width: 100%;
}
.fk-guide-card .chat-msg.user .chat-bubble {
background: rgba(34, 211, 238, 0.10) !important;
border-color: rgba(34, 211, 238, 0.22) !important;
}
/* Suggested prompt pills */
.fk-guide-prompts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.fk-guide-pill {
font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
font-size: 12.5px;
color: var(--fg-dim);
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(45, 212, 191, 0.22);
border-radius: 999px;
padding: 7px 14px;
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
white-space: nowrap;
}
.fk-guide-pill:hover,
.fk-guide-pill:focus-visible {
color: #fff;
border-color: var(--fg-teal);
background: rgba(45, 212, 191, 0.10);
box-shadow: 0 0 14px rgba(45, 212, 191, 0.20);
outline: none;
}
/* Input row */
.fk-guide-input-row {
display: flex;
gap: 10px;
align-items: stretch;
}
.fk-guide-card #chat-input {
flex: 1;
background: rgba(0, 0, 0, 0.28) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 12px !important;
padding: 14px 16px !important;
color: var(--fg-text) !important;
font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important;
font-size: 13.5px !important;
outline: none !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.fk-guide-card #chat-input::placeholder { color: #54697a !important; }
.fk-guide-card #chat-input:focus {
border-color: rgba(45, 212, 191, 0.55) !important;
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12) !important;
}
.fk-guide-card #chat-send {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 0 22px !important;
min-height: 48px;
border: none !important;
border-radius: 12px !important;
font-family: 'Oswald', 'Segoe UI', sans-serif !important;
font-weight: 700 !important;
font-size: 13.5px !important;
letter-spacing: 1px !important;
color: #04222a !important;
background: linear-gradient(135deg, var(--fg-teal), var(--fg-cyan)) !important;
box-shadow: 0 0 22px rgba(45, 212, 191, 0.35) !important;
cursor: pointer !important;
transition: transform 0.12s ease, box-shadow 0.15s ease !important;
white-space: nowrap;
}
.fk-guide-card #chat-send:hover {
transform: translateY(-1px);
box-shadow: 0 0 28px rgba(45, 212, 191, 0.5) !important;
}
.fk-guide-card #chat-send:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
/* Responsive */
@media (max-width: 720px) {
.fk-guide-shell { padding: 16px 12px 4px; }
.fk-guide-card { padding: 22px 18px 20px; border-radius: 16px; }
.fk-guide-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fk-guide-title { font-size: 18px !important; letter-spacing: 1.2px !important; }
.fk-guide-sub { font-size: 13px; }
.fk-guide-card #chat-send { padding: 0 16px !important; min-height: 46px; }
}
/* ══════════════════════════════════════════════════════════════
FISHING WINDOW PREDICTOR — PREMIUM CARD (Saltwater + Freshwater)
Sits below the Fishing Guide inside the Koravi AI tab.
══════════════════════════════════════════════════════════════ */
.fk-wp-shell {
max-width: 1300px;
margin: 0 auto;
padding: 4px 16px 8px;
}
.fk-wp-card {
--wp-teal: #2dd4bf;
--wp-cyan: #22d3ee;
--wp-text: #e8f1f5;
--wp-dim: #7d95a8;
--wp-panel: #0b1826;
position: relative;
background:
linear-gradient(180deg, rgba(45, 212, 191, 0.06) 0%, rgba(11, 24, 38, 0) 20%),
var(--wp-panel);
border: 1px solid rgba(45, 212, 191, 0.18);
border-top: 1px solid rgba(45, 212, 191, 0.4);
border-radius: 18px;
padding: 30px 28px 30px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
text-align: center;
}
.fk-wp-card::before {
content: "";
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 340px;
height: 220px;
background: radial-gradient(circle, rgba(45, 212, 191, 0.12) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.fk-wp-card > * { position: relative; z-index: 1; }
.fk-wp-icon {
width: 64px;
height: 64px;
margin: 0 auto 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--wp-teal);
filter: drop-shadow(0 0 16px rgba(45, 212, 191, 0.40));
}
.fk-wp-icon svg { width: 100%; height: 100%; }
.fk-wp-eyebrow {
font-family: 'Oswald', 'Segoe UI', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
color: var(--wp-teal);
margin-bottom: 6px;
text-transform: uppercase;
}
.fk-wp-title {
margin: 0 0 10px !important;
font-family: 'Oswald', 'Segoe UI', sans-serif;
font-size: 22px !important;
letter-spacing: 1.5px !important;
font-weight: 800 !important;
line-height: 1.15 !important;
color: #fff !important;
border: none !important;
padding: 0 !important;
text-align: center !important;
}
.fk-wp-title-a { color: #fff; }
.fk-wp-title-b { color: var(--wp-teal); }
.fk-wp-sub {
margin: 0 auto 22px;
max-width: 520px;
font-size: 13.5px;
color: var(--wp-dim);
line-height: 1.6;
text-align: center;
}
.fk-wp-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
max-width: 620px;
margin: 0 auto 24px;
}
.fk-wp-stat {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(45, 212, 191, 0.15);
border-radius: 10px;
padding: 12px 10px;
min-width: 0;
}
.fk-wp-stat-val {
font-size: 15px;
font-weight: 700;
color: var(--wp-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fk-wp-stat-lbl {
font-size: 10px;
letter-spacing: 0.5px;
color: var(--wp-dim);
text-transform: uppercase;
margin-top: 4px;
}
.fk-wp-cta-wrap { text-align: center; }
.fk-wp-card #window-btn,
.fk-wp-card .fk-wp-cta {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 16px 36px !important;
border: none !important;
border-radius: 14px !important;
font-family: 'Oswald', 'Segoe UI', sans-serif !important;
font-weight: 800 !important;
font-size: 14px !important;
letter-spacing: 0.06em !important;
color: #04222a !important;
background: linear-gradient(135deg, var(--wp-teal), var(--wp-cyan)) !important;
box-shadow: 0 0 30px rgba(45, 212, 191, 0.40), 0 8px 20px rgba(0, 0, 0, 0.3) !important;
cursor: pointer !important;
transition: transform 0.12s ease, box-shadow 0.15s ease !important;
text-transform: uppercase;
}
.fk-wp-card #window-btn svg,
.fk-wp-card .fk-wp-cta svg { width: 18px; height: 18px; flex-shrink: 0; }
.fk-wp-card #window-btn:hover,
.fk-wp-card .fk-wp-cta:hover {
transform: translateY(-2px);
box-shadow: 0 0 38px rgba(45, 212, 191, 0.55), 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}
.fk-wp-card #window-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.fk-wp-fineprint {
margin-top: 12px;
font-size: 11px;
color: #4d6274;
letter-spacing: 0.3px;
}
.fk-wp-card #window-result:not(:empty) {
margin-top: 22px;
text-align: left;
}
@media (max-width: 720px) {
.fk-wp-shell { padding: 4px 12px 4px; }
.fk-wp-card { padding: 24px 18px 24px; border-radius: 16px; }
.fk-wp-title { font-size: 18px !important; letter-spacing: 1.2px !important; }
.fk-wp-sub { font-size: 13px; }
.fk-wp-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fk-wp-stat { padding: 10px 8px; }
.fk-wp-stat-val { font-size: 13px; }
.fk-wp-card #window-btn,
.fk-wp-card .fk-wp-cta { padding: 14px 26px !important; font-size: 13px !important; }
}
/* ══════════════════════════════════════════════════════════════
FISHING WINDOW PREDICTOR — GOLD TREATMENT (highlight moment)
Overrides the teal treatment above with a gold background wash,
gold border, gold eyebrow + title accent, and layered wave SVGs.
The target icon and CTA button INTENTIONALLY remain teal.
══════════════════════════════════════════════════════════════ */
.fk-wp-card {
--wp-gold: #d9a441;
background:
radial-gradient(ellipse 900px 500px at 20% 100%, rgba(217, 164, 65, 0.14) 0%, transparent 65%),
radial-gradient(ellipse 700px 400px at 85% 0%, rgba(217, 164, 65, 0.08) 0%, transparent 60%),
linear-gradient(180deg, var(--card-bg) 0%, var(--ocean) 60%, var(--ocean) 100%) !important;
border: 1px solid rgba(217, 164, 65, 0.22) !important;
border-top: 1px solid rgba(217, 164, 65, 0.45) !important;
}
/* Kill the teal radial glow behind the header (::before) — replaced by gold wash */
.fk-wp-card::before { display: none !important; }
/* Wave layer — sits behind text/button but above card background */
.fk-wp-card .fk-wp-waves {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 140px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
/* Ensure content sits above waves */
.fk-wp-card > *:not(.fk-wp-waves) { position: relative; z-index: 1; }
/* Gold eyebrow */
.fk-wp-card .fk-wp-eyebrow { color: var(--wp-gold); }
/* Title: keep FISHING WINDOW white, PREDICTOR now gold */
.fk-wp-card .fk-wp-title-a { color: #fff; }
.fk-wp-card .fk-wp-title-b { color: var(--wp-gold); }
/* Stat chips: gold border, darker blurred fill */
.fk-wp-card .fk-wp-stat {
border: 1px solid rgba(217, 164, 65, 0.25);
background: rgba(4, 12, 18, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* Icon and CTA button STAY teal — do not override those rules. */
/* ══════════════════════════════════════════════════════════════
SALTWATER-ONLY OVERRIDES (Koravi Guide tab)
Applied via `.fk-salt` marker class added in app.html only.
Reverts gold Predictor treatment to a flat teal card, and
applies gold→teal accent glow to the Fishing Guide card below.
Freshwater is untouched.
══════════════════════════════════════════════════════════════ */
/* Fishing Window Predictor — flat panel, teal, no glow */
.fk-wp-card.fk-salt {
background: var(--card-bg) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 16px !important;
box-shadow: none !important;
padding: 32px 28px 34px !important;
}
.fk-wp-card.fk-salt::before,
.fk-wp-card.fk-salt::after { display: none !important; content: none !important; }
.fk-wp-card.fk-salt .fk-wp-waves { display: none !important; }
/* Predictor eyebrow + title accent → teal */
.fk-wp-card.fk-salt .fk-wp-eyebrow { color: #2dd4bf !important; }
.fk-wp-card.fk-salt .fk-wp-title-a { color: #fff !important; }
.fk-wp-card.fk-salt .fk-wp-title-b { color: #2dd4bf !important; }
/* Predictor stat chips → neutral, flat */
.fk-wp-card.fk-salt .fk-wp-stat {
background: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Predictor CTA → fully rounded pill, teal→cyan gradient, no glow */
.fk-wp-card.fk-salt #window-btn,
.fk-wp-card.fk-salt .fk-wp-cta {
border-radius: 999px !important;
background: linear-gradient(135deg, #5be3f3 0%, #0eacc4 100%) !important;
box-shadow: none !important;
padding: 15px 34px !important;
min-height: 0 !important;
text-transform: uppercase;
letter-spacing: 0.5px !important;
color: #04222a !important;
}
.fk-wp-card.fk-salt #window-btn:hover,
.fk-wp-card.fk-salt .fk-wp-cta:hover {
box-shadow: none !important;
transform: translateY(-1px);
}
.fk-wp-card.fk-salt #window-btn svg,
.fk-wp-card.fk-salt .fk-wp-cta svg { display: none !important; }
/* Fishing Guide — gold→teal accent (saltwater only) */
.fk-guide-card.fk-salt {
border: 1px solid rgba(252, 181, 72, 0.35) !important;
border-top: 1px solid rgba(252, 181, 72, 0.35) !important;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(252, 181, 72, 0.12),
0 0 40px rgba(252, 181, 72, 0.22),
0 0 80px rgba(24, 179, 197, 0.15) !important;
}
.fk-guide-card.fk-salt::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: 18px 18px 0 0;
background: linear-gradient(90deg, #FCB548 0%, #18B3C5 100%);
z-index: 2;
pointer-events: none;
}
/* ══════════════════════════════════════════════════════════════
SALTWATER-ONLY: Center header/title/description on
Fishing Guide + Bait Recommendation + Lure Selector,
and remove the gold glow/border from the Fishing Guide.
══════════════════════════════════════════════════════════════ */
/* Fishing Guide — remove gold treatment, restore teal borders + shadow */
.fk-guide-card.fk-salt {
border: 1px solid rgba(45, 212, 191, 0.18) !important;
border-top: 1px solid rgba(45, 212, 191, 0.4) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
}
.fk-guide-card.fk-salt::after { display: none !important; content: none !important; }
/* Fishing Guide — center the header block (icon on top, text centered below) */
.fk-guide-card.fk-salt .fk-guide-header {
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.fk-guide-card.fk-salt .fk-guide-headline { text-align: center; }
.fk-guide-card.fk-salt .fk-guide-eyebrow,
.fk-guide-card.fk-salt .fk-guide-title,
.fk-guide-card.fk-salt .fk-guide-sub {
text-align: center !important;
}
/* Bait Recommendation + Lure Selector — center hero header (saltwater) */
.k-premium-card.fk-salt .k-premium-hero {
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
}
.k-premium-card.fk-salt .k-premium-hero-text {
max-width: 100%;
width: 100%;
text-align: center;
}
.k-premium-card.fk-salt .k-premium-title,
.k-premium-card.fk-salt .k-premium-sub {
text-align: center !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Kill the orphaned left-accent bar on centered .k-premium-title
(inherited from the generic .card h2 rule at line 102) */
.k-premium-card.fk-salt .k-premium-title {
border-left: none !important;
padding-left: 0 !important;
}
.fk-guide-card.fk-salt .fk-guide-title {
border-left: none !important;
padding-left: 0 !important;
}
/* Give the header room to breathe over the fish photo — shrink the art fade */
.k-premium-card.fk-salt .k-premium-hero-art {
opacity: 0.55;
}
/* ══════════════════════════════════════════════════════════════
KORAVI CONDITIONS — Environmental Intelligence signature panel
One cohesive premium component on Home. Saltwater only for now.
Mobile-first vertical stack; scales to a wider layout on desktop.
══════════════════════════════════════════════════════════════ */
.fk-koravi-conditions {
--fkc-teal: #2dd4bf;
--fkc-cyan: #22d3ee;
--fkc-gold: #fcb548;
--fkc-text: #e8f1f5;
--fkc-dim: #7d95a8;
--fkc-line: rgba(45, 212, 191, 0.14);
max-width: 1300px;
margin: 4px auto 22px;
padding: 18px 18px 8px;
background:
radial-gradient(ellipse 700px 320px at 90% -20%, rgba(34, 211, 238, 0.09) 0%, transparent 60%),
linear-gradient(180deg, rgba(8, 20, 34, 0.85) 0%, rgba(4, 12, 22, 0.92) 100%);
border: 1px solid rgba(45, 212, 191, 0.16);
border-top: 1px solid rgba(45, 212, 191, 0.38);
border-radius: 18px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
position: relative;
overflow: hidden;
}
.fk-koravi-conditions::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(45, 212, 191, 0.04) 0%, transparent 30%);
pointer-events: none;
z-index: 0;
}
.fk-koravi-conditions > * { position: relative; z-index: 1; }
/* Header row */
.fk-koravi-conditions .fkc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding: 0 2px;
}
.fkc-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
}
.fkc-eyebrow-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--fkc-teal);
box-shadow: 0 0 10px rgba(45, 212, 191, 0.7);
}
.fkc-eyebrow-text {
font-family: 'Oswald', 'Manrope', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--fkc-teal);
}
.fkc-status {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.66rem;
font-family: 'Oswald', 'Manrope', sans-serif;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--fkc-dim);
}
.fkc-status-pulse {
display: inline-block;
width: 8px; height: 8px; border-radius: 50%;
background: var(--fkc-cyan);
box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6);
animation: fkc-pulse 2.4s ease-out infinite;
}
@keyframes fkc-pulse {
0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); }
70% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}
/* Rows list */
.fk-koravi-conditions .fkc-rows {
list-style: none;
padding: 0;
margin: 0;
}
.fk-koravi-conditions .fkc-row {
position: relative;
display: grid;
grid-template-columns: 30px 1fr auto;
grid-template-areas:
"icon body score"
"bar bar bar";
column-gap: 12px;
row-gap: 6px;
align-items: center;
padding: 12px 4px 12px;
border-bottom: 1px solid var(--fkc-line);
}
.fk-koravi-conditions .fkc-row:last-child { border-bottom: none; }
/* Vertical connector between rows (marine-intelligence "chain") */
.fk-koravi-conditions .fkc-tick {
position: absolute;
left: 15px;
bottom: -6px;
width: 1px;
height: 12px;
background: linear-gradient(180deg, rgba(45, 212, 191, 0.35), transparent);
z-index: 2;
}
.fk-koravi-conditions .fkc-icon {
grid-area: icon;
width: 30px; height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fkc-teal);
background: rgba(45, 212, 191, 0.06);
border: 1px solid rgba(45, 212, 191, 0.22);
border-radius: 8px;
transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.fk-koravi-conditions .fkc-icon svg { width: 16px; height: 16px; }
.fk-koravi-conditions .fkc-body {
grid-area: body;
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.15;
}
.fk-koravi-conditions .fkc-name {
font-family: 'Oswald', 'Manrope', sans-serif;
font-size: 0.62rem;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--fkc-dim);
margin-bottom: 3px;
}
.fk-koravi-conditions .fkc-value {
font-family: 'Manrope', 'Segoe UI', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--fkc-text);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fk-koravi-conditions .fkc-score-wrap {
grid-area: score;
display: inline-flex;
align-items: baseline;
gap: 3px;
color: var(--fkc-dim);
}
.fk-koravi-conditions .fkc-score {
font-family: 'Oswald', 'Manrope', sans-serif;
font-size: 0.9rem;
font-weight: 700;
color: var(--fkc-teal);
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.fk-koravi-conditions .fkc-score-lbl {
font-size: 0.62rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--fkc-dim);
}
/* Strength bar */
.fk-koravi-conditions .fkc-bar {
grid-area: bar;
display: block;
height: 2px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.fk-koravi-conditions .fkc-bar-fill {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--fkc-teal), var(--fkc-cyan));
transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow: 0 0 8px rgba(45, 212, 191, 0.4);
}
.fk-koravi-conditions .fkc-bar-fill.is-high {
background: linear-gradient(90deg, var(--fkc-teal), var(--fkc-gold));
box-shadow: 0 0 10px rgba(252, 181, 72, 0.35);
}
.fk-koravi-conditions .fkc-bar-fill.is-mid { background: linear-gradient(90deg, #22d3ee, #7d95a8); }
.fk-koravi-conditions .fkc-bar-fill.is-low { background: linear-gradient(90deg, #f87171, #f5c060); }
/* Row tinting: exceptional states earn a subtle gold-tinged icon + score */
.fk-koravi-conditions .fkc-row.is-high .fkc-icon {
color: var(--fkc-gold);
border-color: rgba(252, 181, 72, 0.5);
background: rgba(252, 181, 72, 0.08);
box-shadow: 0 0 12px rgba(252, 181, 72, 0.20);
}
.fk-koravi-conditions .fkc-row.is-high .fkc-score { color: var(--fkc-gold); }
.fk-koravi-conditions .fkc-row.is-low .fkc-icon {
color: #f87171;
border-color: rgba(248, 113, 113, 0.35);
background: rgba(248, 113, 113, 0.06);
}
.fk-koravi-conditions .fkc-row.is-low .fkc-score { color: #f87171; }
/* Desktop: still comfortable, but a bit tighter vertical rhythm */
@media (min-width: 720px) {
.fk-koravi-conditions { padding: 22px 26px 14px; }
.fk-koravi-conditions .fkc-row {
grid-template-columns: 34px 1fr auto;
padding: 14px 6px;
column-gap: 16px;
}
.fk-koravi-conditions .fkc-name { font-size: 0.66rem; }
.fk-koravi-conditions .fkc-value { font-size: 1.05rem; }
.fk-koravi-conditions .fkc-score { font-size: 0.98rem; }
}
/* ═══════════════════════════════════════════════════════════════════
HOME DECISION FLOW — Fishing Score / Prime Window / Target Species
/ Game Plan / Fishing Intelligence Tools
═══════════════════════════════════════════════════════════════════ */
/* ── Hide the moved cards on Home; they now live in Fishing Tools ── */
#tab-home .k-hidden-source { display: none !important; }
/* ── FISHING SCORE HERO ── */
.k-home-score-hero {
max-width: 960px;
margin: 14px auto 18px;
padding: 22px 24px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(26,159,181,0.14), rgba(244,162,40,0.06));
border: 1px solid rgba(77,227,255,0.24);
box-shadow: 0 10px 40px -18px rgba(77,227,255,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
.k-score-dial-wrap {
display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 22px;
}
@media (max-width: 520px) {
.k-score-dial-wrap { grid-template-columns: 110px 1fr; gap: 16px; }
.k-home-score-hero { padding: 18px 16px; margin: 12px auto 14px; }
}
.k-score-dial { position: relative; width: 140px; height: 140px; }
@media (max-width: 520px) { .k-score-dial { width: 110px; height: 110px; } }
.k-score-svg { width: 100%; height: 100%; display: block; }
.k-score-fill { transition: stroke-dashoffset 0.9s cubic-bezier(0.22,1,0.36,1); }
.k-score-inner {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; line-height: 1;
}
.k-score-num {
font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 2.6rem;
color: #F5FBFF; letter-spacing: 1px;
}
@media (max-width: 520px) { .k-score-num { font-size: 2rem; } }
.k-score-out {
font-family: 'Oswald', sans-serif; font-size: 0.62rem;
letter-spacing: 2.5px; color: rgba(230,245,255,0.55); margin-top: 6px;
}
.k-score-copy { min-width: 0; }
.k-score-eyebrow {
font-family: 'Oswald', sans-serif; font-size: 0.66rem;
letter-spacing: 3px; text-transform: uppercase; color: var(--teal-lt); margin-bottom: 6px;
}
.k-score-status {
font-family: 'Oswald', sans-serif; font-size: 1.35rem; font-weight: 700;
color: #F5FBFF; letter-spacing: 1px; margin-bottom: 6px;
}
@media (max-width: 520px) { .k-score-status { font-size: 1.1rem; } }
.k-score-desc { font-size: 0.85rem; color: rgba(230,245,255,0.68); line-height: 1.5; }
/* ── PRIME WINDOW CARD ── */
.k-home-prime-window {
max-width: 960px; margin: 0 auto 18px;
padding: 18px 20px;
background: rgba(8,20,34,0.85);
border: 1px solid rgba(244,162,40,0.28);
border-radius: 18px;
box-shadow: 0 6px 24px -12px rgba(244,162,40,0.35);
}
.k-prime-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.k-prime-eyebrow {
font-family: 'Oswald', sans-serif; font-size: 0.72rem;
letter-spacing: 2.5px; text-transform: uppercase; color: var(--sun);
display: inline-flex; align-items: center; gap: 6px;
}
.k-prime-status { font-size: 0.75rem; color: rgba(230,245,255,0.55); font-family: 'Oswald', sans-serif; letter-spacing: 1.5px; }
.k-prime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .k-prime-grid { grid-template-columns: 1fr; } }
.k-prime-slot {
padding: 14px 16px; border-radius: 12px;
background: rgba(10,47,71,0.55); border: 1px solid rgba(77,227,255,0.15);
}
.k-prime-primary { border-color: rgba(244,162,40,0.35); background: rgba(244,162,40,0.06); }
.k-prime-slot-label { font-family: 'Oswald', sans-serif; font-size: 0.62rem; letter-spacing: 2px; color: rgba(230,245,255,0.55); text-transform: uppercase; margin-bottom: 6px; }
.k-prime-slot-time { font-family: 'Oswald', sans-serif; font-size: 1.3rem; font-weight: 700; color: #F5FBFF; letter-spacing: 1px; margin-bottom: 4px; }
.k-prime-primary .k-prime-slot-time { color: var(--sun); }
.k-prime-slot-note { font-size: 0.78rem; color: rgba(230,245,255,0.6); }
/* ── TARGET SPECIES CARD ── */
.k-home-target-species {
max-width: 960px; margin: 0 auto 18px;
padding: 18px 20px;
background: rgba(8,20,34,0.85);
border: 1px solid rgba(77,227,255,0.22);
border-radius: 18px;
}
.k-target-head { margin-bottom: 12px; }
.k-target-eyebrow {
font-family: 'Oswald', sans-serif; font-size: 0.72rem;
letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal-lt);
display: inline-flex; align-items: center; gap: 6px;
}
.k-target-sub { font-size: 0.78rem; color: rgba(230,245,255,0.55); margin-top: 4px; }
.k-target-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.k-target-empty { color: rgba(230,245,255,0.5); font-size: 0.85rem; padding: 8px 0; grid-column: 1 / -1; }
.k-target-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 10px;
background: rgba(10,47,71,0.55); border: 1px solid rgba(77,227,255,0.15);
transition: border-color 0.2s, transform 0.15s;
}
.k-target-item:hover { border-color: rgba(77,227,255,0.4); transform: translateY(-1px); }
.k-target-item-emoji { width: 34px; height: 34px; border-radius: 8px; background: rgba(26,159,181,0.14); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.k-target-item-info { min-width: 0; flex: 1; }
.k-target-item-name { font-family: 'Oswald', sans-serif; font-size: 0.85rem; font-weight: 600; color: #F5FBFF; text-transform: uppercase; letter-spacing: 0.8px; }
.k-target-item-detail { font-size: 0.72rem; color: rgba(230,245,255,0.6); margin-top: 2px; }
/* ── TODAY'S GAME PLAN ── */
.k-home-gameplan {
max-width: 960px; margin: 0 auto 18px;
padding: 20px;
background: linear-gradient(135deg, rgba(26,159,181,0.10), rgba(244,162,40,0.05));
border: 1px solid rgba(77,227,255,0.24);
border-radius: 18px;
}
.k-gp-head { margin-bottom: 14px; }
.k-gp-eyebrow {
font-family: 'Oswald', sans-serif; font-size: 0.72rem;
letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal-lt);
display: inline-flex; align-items: center; gap: 6px;
}
.k-gp-sub { font-size: 0.78rem; color: rgba(230,245,255,0.55); margin-top: 4px; }
.k-gp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.k-gp-cell {
padding: 14px 16px; border-radius: 12px;
background: rgba(6,30,47,0.75); border: 1px solid rgba(77,227,255,0.18);
}
.k-gp-cell-icon { font-size: 1.4rem; margin-bottom: 6px; }
.k-gp-cell-label { font-family: 'Oswald', sans-serif; font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--teal-lt); margin-bottom: 6px; }
.k-gp-cell-value { font-size: 0.9rem; color: #F5FBFF; line-height: 1.45; font-weight: 500; }
.k-gp-grid-6 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.k-gp-grid-detail { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 14px; }
/* ── UNIFIED GAME PLAN — hero + activity + also-active + CTA ── */
.k-gp-merged .k-gp-hero {
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding: 16px 18px; border-radius: 14px; margin-bottom: 2px;
background: linear-gradient(135deg, rgba(26,159,181,0.16), rgba(6,30,47,0.5));
border: 1px solid rgba(77,227,255,0.24);
}
.k-gp-hero-species { font-family: 'Oswald', sans-serif; font-size: 1.9rem; font-weight: 700; color: #F5FBFF; text-transform: uppercase; letter-spacing: 1px; line-height: 1.05; }
.k-gp-hero-activity { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-family: 'Oswald', sans-serif; font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(230,245,255,0.85); }
.k-gp-activity-dot { width: 10px; height: 10px; border-radius: 50%; background: #7d95a8; box-shadow: 0 0 8px currentColor; }
.k-gp-hero-activity.is-high { color: #2ee6a0; } .k-gp-hero-activity.is-high .k-gp-activity-dot { background: #2ee6a0; }
.k-gp-hero-activity.is-mid { color: var(--sun); } .k-gp-hero-activity.is-mid .k-gp-activity-dot { background: var(--sun); }
.k-gp-hero-activity.is-low { color: #f87171; } .k-gp-hero-activity.is-low .k-gp-activity-dot { background: #f87171; }
.k-gp-hero-window { text-align: right; }
.k-gp-hero-time { font-family: 'Oswald', sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--sun); letter-spacing: 0.5px; }
.k-gp-hero-window-note { font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(230,245,255,0.6); }
.k-gp-also { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 2px; }
.k-gp-also:empty { display: none; }
.k-gp-also-label { font-family: 'Oswald', sans-serif; font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(230,245,255,0.5); }
.k-gp-also-chip { font-size: 0.72rem; padding: 4px 10px; border-radius: 999px; background: rgba(77,227,255,0.1); border: 1px solid rgba(77,227,255,0.22); color: #EAFBFF; }
.k-gp-cta {
margin-top: 14px; width: 100%; padding: 14px 18px; border-radius: 12px; cursor: pointer;
border: 1px solid rgba(77,227,255,0.4); background: linear-gradient(135deg, rgba(77,227,255,0.16), rgba(77,227,255,0.06));
color: #EAFBFF; font-family: 'Oswald', sans-serif; font-size: 0.82rem; letter-spacing: 2px; text-transform: uppercase;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.k-gp-cta:hover { background: rgba(77,227,255,0.26); border-color: rgba(77,227,255,0.7); transform: translateY(-1px); }
@media (max-width: 520px) {
.k-gp-hero { align-items: flex-start; }
.k-gp-hero-window { text-align: left; }
.k-gp-hero-species { font-size: 1.6rem; }
}
/* ── YOUR FISHING PLAN — why footer ── */
.k-gp-why {
margin-top: 14px; padding: 12px 14px; border-radius: 12px;
background: rgba(6,30,47,0.55); border: 1px solid rgba(244,162,40,0.28);
font-size: 0.86rem; color: rgba(230,245,255,0.85); line-height: 1.5;
}
.k-gp-why-label {
display: inline-block; font-family: 'Oswald', sans-serif; font-size: 0.6rem;
letter-spacing: 2px; text-transform: uppercase; color: var(--sun); margin-right: 8px;
}
/* ── WHERE TO FISH ── */
.k-home-where {
max-width: 960px; margin: 0 auto 18px; padding: 18px 20px; border-radius: 18px;
background: linear-gradient(135deg, rgba(26,159,181,0.12), rgba(6,30,47,0.6));
border: 1px solid rgba(77,227,255,0.22);
}
.k-where-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.k-where-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.k-spots-list { display: grid; gap: 8px; }
.k-spot-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; background: rgba(6,30,47,0.7); border: 1px solid rgba(77,227,255,0.18); color: inherit; cursor: pointer; transition: border-color 0.2s, transform 0.15s; }
.k-spot-item:hover { border-color: rgba(77,227,255,0.5); transform: translateY(-1px); }
.k-spot-name { font-family: 'Oswald', sans-serif; font-size: 0.92rem; font-weight: 600; color: #F5FBFF; }
.k-spot-meta { display: flex; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.k-spot-type { font-size: 0.7rem; color: rgba(230,245,255,0.6); }
.k-spot-fish { font-size: 0.7rem; color: var(--teal-lt); }
.k-spot-dist { text-align: right; font-family: 'Oswald', sans-serif; font-size: 0.85rem; color: #EAFBFF; white-space: nowrap; }
.k-spot-verified { display: block; font-size: 0.6rem; letter-spacing: 1px; text-transform: uppercase; color: #2ee6a0; margin-top: 2px; }
.k-where-copy { min-width: 0; flex: 1; }
.k-where-eyebrow {
font-family: 'Oswald', sans-serif; font-size: 0.7rem; letter-spacing: 2.5px;
text-transform: uppercase; color: var(--teal-lt); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.k-where-title { font-family: 'Oswald', sans-serif; font-size: 1.1rem; font-weight: 600; color: #F5FBFF; text-transform: uppercase; letter-spacing: 0.5px; }
.k-where-sub { font-size: 0.8rem; color: rgba(230,245,255,0.62); margin-top: 3px; max-width: 52ch; }
.k-where-btn {
flex-shrink: 0; padding: 12px 20px; border-radius: 12px;
border: 1px solid rgba(77,227,255,0.4); background: rgba(77,227,255,0.12); color: #EAFBFF;
font-family: 'Oswald', sans-serif; font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase;
cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.k-where-btn:hover { background: rgba(77,227,255,0.22); border-color: rgba(77,227,255,0.7); transform: translateY(-1px); }
/* ── BAIT & LURE INTEL ── */
.k-home-baitlure {
max-width: 960px; margin: 0 auto 18px; padding: 20px; border-radius: 18px;
background: linear-gradient(135deg, rgba(244,162,40,0.08), rgba(6,30,47,0.6));
border: 1px solid rgba(244,162,40,0.26);
}
.k-bl-head { margin-bottom: 12px; }
.k-bl-eyebrow {
font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 2.5px;
text-transform: uppercase; color: var(--sun); display: inline-flex; align-items: center; gap: 6px;
}
.k-bl-sub { font-size: 0.78rem; color: rgba(230,245,255,0.55); margin-top: 4px; }
.k-bl-reco { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (max-width: 520px) { .k-bl-reco { grid-template-columns: 1fr; } }
.k-bl-reco-row { padding: 12px 14px; border-radius: 12px; background: rgba(6,30,47,0.7); border: 1px solid rgba(244,162,40,0.18); }
.k-bl-reco-label { display: block; font-family: 'Oswald', sans-serif; font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase; color: var(--teal-lt); margin-bottom: 5px; }
.k-bl-reco-val { font-size: 0.92rem; color: #F5FBFF; font-weight: 500; }
.k-bl-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.k-bl-btn {
flex: 1; min-width: 160px; padding: 13px 16px; border-radius: 12px;
border: 1px solid rgba(77,227,255,0.3); background: rgba(10,47,71,0.6); color: #EAFBFF;
font-family: 'Oswald', sans-serif; font-size: 0.76rem; letter-spacing: 1.4px; text-transform: uppercase;
cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.k-bl-btn:hover { transform: translateY(-1px); border-color: rgba(77,227,255,0.6); }
.k-bl-btn-primary { background: linear-gradient(135deg, var(--sun), #f0b64a); color: #0a1420; border-color: transparent; font-weight: 600; }
.k-bl-btn-primary:hover { filter: brightness(1.05); }
/* ── conditions tagline (why the score) ── */
.fk-koravi-conditions .fkc-tagline { font-size: 0.74rem; color: rgba(230,245,255,0.55); margin: -2px 0 10px; letter-spacing: 0.3px; }
/* ── home section entrance stagger ── */
@keyframes kHomeFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.k-home-prime-window, .k-home-target-species, .k-home-gameplan, .k-home-where, .k-home-baitlure { animation: kHomeFadeUp 0.5s ease both; }
.k-home-target-species { animation-delay: 0.05s; }
.k-home-gameplan { animation-delay: 0.1s; }
.k-home-where { animation-delay: 0.15s; }
.k-home-baitlure { animation-delay: 0.2s; }
/* ── FISHING INTELLIGENCE TOOLS ROW ── */
.k-home-tools {
max-width: 960px; margin: 0 auto 28px;
padding: 6px 4px 0;
}
.k-tools-eyebrow {
font-family: 'Oswald', sans-serif; font-size: 0.72rem;
letter-spacing: 3px; text-transform: uppercase;
color: var(--muted); margin-bottom: 10px; padding-left: 4px;
}
.k-tools-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
@media (max-width: 520px) {
.k-tools-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
}
.k-tool-tile {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 14px 8px;
background: rgba(10,47,71,0.6); border: 1px solid rgba(77,227,255,0.18);
border-radius: 14px; text-decoration: none; color: inherit;
transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.k-tool-tile:hover {
border-color: rgba(77,227,255,0.5);
transform: translateY(-2px);
box-shadow: 0 10px 20px -10px rgba(77,227,255,0.4);
}
.k-tool-icon { font-size: 1.5rem; line-height: 1; }
.k-tool-name {
font-family: 'Oswald', sans-serif; font-size: 0.65rem;
letter-spacing: 1.2px; text-transform: uppercase; color: #F5FBFF; text-align: center;
}
@media (max-width: 520px) {
.k-tool-icon { font-size: 1.25rem; }
.k-tool-name { font-size: 0.58rem; letter-spacing: 0.8px; }
}
/* ── SECTION LABEL for moved-to-tools zone ── */
.k-tools-env-header {
max-width: 1300px; margin: 20px auto 8px; padding: 0 16px;
}
.k-tools-env-header-inner {
font-family: 'Oswald', sans-serif; font-size: 0.72rem;
letter-spacing: 3px; text-transform: uppercase; color: var(--muted);
padding-bottom: 8px; border-bottom: 1px solid rgba(77,227,255,0.18);
}
/* ═══════════════════════════════════════════════════════════════════════
FRESHWATER · MY FISHING PREMIUM OVERHAUL (WizSignal parity)
Scoped strictly to freshwater body.fk-freshwater #tab-myfishing so saltwater is untouched.
═══════════════════════════════════════════════════════════════════════ */
/* Root variables inherited from .fk-koravi-conditions treatment */
:root {
--fkmf-teal: #2dd4bf;
--fkmf-cyan: #22d3ee;
--fkmf-green: #E9A93F;
--fkmf-gold: #fcb548;
--fkmf-dim: #7d95a8;
--fkmf-text: #e8f1f5;
--fkmf-line: rgba(233,169,63,0.14);
}
/* ── Section tab-header banner tightening (mobile safety) ── */
body.fk-freshwater #tab-myfishing .tab-header-banner {
padding: 26px 18px 22px !important;
}
/* ── Unified premium card shell for every freshwater My-Fishing block ── */
body.fk-freshwater #tab-myfishing > .section-wrap > .report-section,
body.fk-freshwater #tab-myfishing > .section-wrap > .card {
max-width: 1180px !important;
margin: 0 auto 22px !important;
padding: 28px 26px !important;
background:
radial-gradient(ellipse 780px 340px at 92% -18%, rgba(233,169,63,0.10) 0%, transparent 60%),
linear-gradient(180deg, rgba(8, 22, 18, 0.85) 0%, rgba(4, 14, 12, 0.94) 100%) !important;
border: 1px solid rgba(233,169,63,0.18) !important;
border-top: 1px solid rgba(233,169,63,0.4) !important;
border-radius: 20px !important;
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
box-shadow:
0 24px 60px rgba(0,0,0,0.42),
inset 0 1px 0 rgba(255,255,255,0.03) !important;
position: relative;
overflow: hidden;
}
body.fk-freshwater #tab-myfishing > .section-wrap > .report-section::before,
body.fk-freshwater #tab-myfishing > .section-wrap > .card::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(233,169,63,0.05) 0%, transparent 32%);
pointer-events: none;
z-index: 0;
}
body.fk-freshwater #tab-myfishing > .section-wrap > .report-section > *,
body.fk-freshwater #tab-myfishing > .section-wrap > .card > * {
position: relative;
z-index: 1;
}
/* Kill inherited yellow top-line on report-section (was gold gradient bar) */
body.fk-freshwater #tab-myfishing .report-section::before {
background: linear-gradient(180deg, rgba(233,169,63,0.05) 0%, transparent 32%) !important;
height: 100% !important;
}
/* ── 1) DAILY FRESHWATER FISHING REPORT ── */
body.fk-freshwater #tab-myfishing .report-section {
text-align: center !important;
}
body.fk-freshwater #tab-myfishing .report-section .report-label {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
font-family: 'Oswald', sans-serif !important;
font-size: 0.78rem !important;
letter-spacing: 3.2px !important;
text-transform: uppercase !important;
color: var(--fkmf-green) !important;
margin: 0 0 10px 0 !important;
padding: 8px 16px !important;
background: rgba(233,169,63,0.08) !important;
border: 1px solid rgba(233,169,63,0.24) !important;
border-radius: 999px !important;
text-align: center !important;
}
body.fk-freshwater #tab-myfishing .report-section #report-date {
display: block !important;
width: fit-content !important;
max-width: 92% !important;
margin: 14px auto 22px !important;
padding: 10px 24px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, rgba(233,169,63,0.14), rgba(45,212,191,0.10)) !important;
border: 1px solid rgba(233,169,63,0.28) !important;
color: #d7fbe4 !important;
font-family: 'Oswald', sans-serif !important;
font-size: 0.9rem !important;
letter-spacing: 2.6px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
text-align: center !important;
box-shadow: 0 8px 24px -10px rgba(233,169,63,0.4) !important;
}
body.fk-freshwater #tab-myfishing .report-section #report-date:empty {
min-width: 220px;
min-height: 1.5em;
color: transparent !important;
animation: k-skeleton 1.6s ease-in-out infinite;
}
body.fk-freshwater #tab-myfishing .report-section #report-btn {
padding: 14px 30px !important;
min-height: 48px !important;
font-size: 0.88rem !important;
letter-spacing: 2px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #E9A93F 0%, #22d3ee 100%) !important;
color: #04140b !important;
font-family: 'Oswald', sans-serif !important;
font-weight: 700 !important;
border: none !important;
box-shadow: 0 12px 30px rgba(233,169,63,0.32), 0 0 0 1px rgba(233,169,63,0.35) inset !important;
transition: transform .18s ease, box-shadow .18s ease !important;
}
body.fk-freshwater #tab-myfishing .report-section #report-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 18px 36px rgba(233,169,63,0.4), 0 0 0 1px rgba(233,169,63,0.5) inset !important;
}
body.fk-freshwater #tab-myfishing .report-section #report-btn:disabled {
opacity: 0.55 !important;
}
body.fk-freshwater #tab-myfishing #report-content {
text-align: left !important;
max-width: 780px !important;
margin: 24px auto 8px !important;
padding: 22px 22px !important;
background: rgba(8,20,16,0.55) !important;
border: 1px solid rgba(233,169,63,0.14) !important;
border-radius: 14px !important;
line-height: 1.75 !important;
color: #dfeee6 !important;
font-size: 0.94rem !important;
}
body.fk-freshwater #tab-myfishing #report-content:empty { display: none !important; }
body.fk-freshwater #tab-myfishing #report-content h3,
body.fk-freshwater #tab-myfishing #report-content h4 {
font-family: 'Oswald', sans-serif !important;
font-size: 0.9rem !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: var(--fkmf-green) !important;
margin: 20px 0 10px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid rgba(233,169,63,0.14) !important;
}
body.fk-freshwater #tab-myfishing #report-content h3:first-child,
body.fk-freshwater #tab-myfishing #report-content h4:first-child { margin-top: 0 !important; }
body.fk-freshwater #tab-myfishing #report-content strong { color: var(--fkmf-green) !important; }
body.fk-freshwater #tab-myfishing #report-content ul { padding-left: 22px !important; margin: 8px 0 14px !important; }
body.fk-freshwater #tab-myfishing #report-content li { margin-bottom: 6px !important; }
/* ── 2) CATCH LOGGER premium restyle ── */
body.fk-freshwater #tab-myfishing .card > h2 {
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-family: 'Oswald', sans-serif !important;
font-size: 1.05rem !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--fkmf-text) !important;
margin: 0 0 6px 0 !important;
padding-bottom: 0 !important;
}
body.fk-freshwater #tab-myfishing .card > h2 .h2-icon {
width: 20px !important; height: 20px !important;
stroke: var(--fkmf-green) !important;
filter: drop-shadow(0 0 10px rgba(233,169,63,0.35));
}
body.fk-freshwater #tab-myfishing .card .section-tip {
color: var(--fkmf-dim) !important;
font-size: 0.86rem !important;
margin: 0 0 22px 0 !important;
line-height: 1.55 !important;
}
body.fk-freshwater #tab-myfishing .k-habitat-row {
margin: 4px 0 20px !important;
padding: 14px 16px !important;
background: rgba(233,169,63,0.04) !important;
border: 1px solid rgba(233,169,63,0.14) !important;
border-radius: 14px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
body.fk-freshwater #tab-myfishing .k-habitat-label {
font-family: 'Oswald', sans-serif;
font-size: 0.68rem;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--fkmf-dim);
}
body.fk-freshwater #tab-myfishing .k-habitat-chips { display: flex; gap: 8px; flex-wrap: wrap; }
body.fk-freshwater #tab-myfishing .k-habitat-chip--fresh {
padding: 8px 16px !important;
border-radius: 999px !important;
border: 1px solid rgba(233,169,63,0.28) !important;
background: rgba(233,169,63,0.06) !important;
color: #cbedd5 !important;
font-family: 'Oswald', sans-serif !important;
font-size: 0.78rem !important;
letter-spacing: 1.6px !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: all .18s ease !important;
}
body.fk-freshwater #tab-myfishing .k-habitat-chip--fresh:hover {
background: rgba(233,169,63,0.12) !important;
border-color: rgba(233,169,63,0.45) !important;
transform: translateY(-1px);
}
body.fk-freshwater #tab-myfishing .k-habitat-chip--fresh.is-selected,
body.fk-freshwater #tab-myfishing .k-habitat-chip--fresh[aria-pressed="true"] {
background: linear-gradient(135deg, rgba(233,169,63,0.32), rgba(45,212,191,0.24)) !important;
border-color: rgba(233,169,63,0.6) !important;
color: #fff !important;
box-shadow: 0 6px 16px rgba(233,169,63,0.25);
}
body.fk-freshwater #tab-myfishing .catch-log-grid {
gap: 16px !important;
}
body.fk-freshwater #tab-myfishing .catch-log-field label {
color: var(--fkmf-green) !important;
font-size: 0.68rem !important;
letter-spacing: 2.4px !important;
margin-bottom: 8px !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
body.fk-freshwater #tab-myfishing .catch-log-field label svg { stroke: var(--fkmf-green) !important; }
body.fk-freshwater #tab-myfishing .catch-log-field input {
background: rgba(8,20,16,0.75) !important;
border: 1px solid rgba(233,169,63,0.20) !important;
border-radius: 12px !important;
padding: 13px 15px !important;
color: #eaf7ef !important;
font-size: 0.95rem !important;
transition: border-color .18s ease, box-shadow .18s ease !important;
}
body.fk-freshwater #tab-myfishing .catch-log-field input::placeholder { color: rgba(139, 175, 155, 0.55) !important; }
body.fk-freshwater #tab-myfishing .catch-log-field input:focus {
border-color: rgba(233,169,63,0.55) !important;
box-shadow: 0 0 0 3px rgba(233,169,63,0.14) !important;
outline: none !important;
}
body.fk-freshwater #tab-myfishing .catch-photo-upload-area {
margin: 18px 0 22px !important;
padding: 20px !important;
background: rgba(233,169,63,0.04) !important;
border: 1px dashed rgba(233,169,63,0.28) !important;
border-radius: 14px !important;
display: flex !important;
gap: 12px !important;
align-items: center !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
body.fk-freshwater #tab-myfishing .k-photo-btn {
padding: 11px 22px !important;
border-radius: 999px !important;
background: rgba(233,169,63,0.10) !important;
border: 1px solid rgba(233,169,63,0.35) !important;
color: #d3f5df !important;
font-family: 'Oswald', sans-serif !important;
font-size: 0.78rem !important;
letter-spacing: 1.6px !important;
text-transform: uppercase !important;
transition: all .18s ease !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
body.fk-freshwater #tab-myfishing .k-photo-btn:hover {
background: rgba(233,169,63,0.18) !important;
border-color: rgba(233,169,63,0.55) !important;
transform: translateY(-1px);
}
body.fk-freshwater #tab-myfishing #log-catch-btn {
padding: 15px 34px !important;
min-height: 52px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #E9A93F 0%, #22d3ee 100%) !important;
color: #04140b !important;
font-family: 'Oswald', sans-serif !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
letter-spacing: 2.2px !important;
border: none !important;
box-shadow: 0 14px 30px rgba(233,169,63,0.35) !important;
transition: transform .18s ease, box-shadow .18s ease !important;
margin-top: 6px !important;
}
body.fk-freshwater #tab-myfishing #log-catch-btn:hover {
transform: translateY(-2px);
box-shadow: 0 18px 36px rgba(233,169,63,0.45) !important;
}
body.fk-freshwater #tab-myfishing #catch-history {
margin-top: 22px !important;
padding-top: 22px !important;
border-top: 1px solid rgba(233,169,63,0.12) !important;
}
body.fk-freshwater #tab-myfishing #catch-list:empty::before {
content: "Your logged catches will appear here — build your personal record book.";
display: block;
text-align: center;
font-size: 0.86rem;
color: var(--fkmf-dim);
padding: 10px 0;
font-style: italic;
}
/* ── 3) MY FISHING PATTERNS premium restyle ── */
body.fk-freshwater #tab-myfishing #patterns-empty {
padding: 40px 20px !important;
background: rgba(233,169,63,0.04) !important;
border: 1px dashed rgba(233,169,63,0.24) !important;
border-radius: 16px !important;
margin: 12px 0 4px !important;
}
body.fk-freshwater #tab-myfishing .ai-insight-block {
padding: 18px 20px !important;
margin: 4px 0 20px !important;
background: linear-gradient(135deg, rgba(233,169,63,0.10), rgba(45,212,191,0.06)) !important;
border: 1px solid rgba(233,169,63,0.26) !important;
border-left: 3px solid var(--fkmf-green) !important;
border-radius: 14px !important;
}
body.fk-freshwater #tab-myfishing .ai-insight-label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-family: 'Oswald', sans-serif !important;
font-size: 0.7rem !important;
letter-spacing: 2.6px !important;
text-transform: uppercase !important;
color: var(--fkmf-green) !important;
margin-bottom: 8px !important;
}
body.fk-freshwater #tab-myfishing .pattern-tab-btn {
padding: 9px 16px !important;
border-radius: 999px !important;
background: rgba(233,169,63,0.06) !important;
border: 1px solid rgba(233,169,63,0.20) !important;
color: #cbedd5 !important;
font-family: 'Oswald', sans-serif !important;
font-size: 0.72rem !important;
letter-spacing: 1.6px !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: all .18s ease !important;
}
body.fk-freshwater #tab-myfishing .pattern-tab-btn:hover {
background: rgba(233,169,63,0.14) !important;
border-color: rgba(233,169,63,0.45) !important;
}
body.fk-freshwater #tab-myfishing .pattern-tab-btn.active {
background: linear-gradient(135deg, rgba(233,169,63,0.32), rgba(45,212,191,0.24)) !important;
border-color: rgba(233,169,63,0.6) !important;
color: #fff !important;
box-shadow: 0 6px 16px rgba(233,169,63,0.25);
}
body.fk-freshwater #tab-myfishing .pattern-tab-content {
padding: 16px 18px !important;
background: rgba(8,20,16,0.5) !important;
border: 1px solid rgba(233,169,63,0.12) !important;
border-radius: 14px !important;
margin-bottom: 20px !important;
min-height: 96px;
}
body.fk-freshwater #tab-myfishing .pb-card {
padding: 16px 14px !important;
background: rgba(8,20,16,0.6) !important;
border: 1px solid rgba(233,169,63,0.18) !important;
border-radius: 14px !important;
text-align: center !important;
transition: transform .18s ease, border-color .18s ease;
}
body.fk-freshwater #tab-myfishing .pb-card:hover {
transform: translateY(-2px);
border-color: rgba(233,169,63,0.4);
}
body.fk-freshwater #tab-myfishing .pb-label {
font-family: 'Oswald', sans-serif !important;
font-size: 0.62rem !important;
letter-spacing: 2.4px !important;
text-transform: uppercase !important;
color: var(--fkmf-dim) !important;
margin-bottom: 10px !important;
}
body.fk-freshwater #tab-myfishing .pb-value {
font-family: 'Oswald', sans-serif !important;
font-size: 1.35rem !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
margin-bottom: 4px !important;
}
body.fk-freshwater #tab-myfishing .pb-sub {
font-size: 0.72rem !important;
color: var(--fkmf-dim) !important;
letter-spacing: 0.4px !important;
}
/* Species/bait/time bar rows (already-existing chart rows keep base layout, we polish) */
body.fk-freshwater #tab-myfishing #chart-species > div,
body.fk-freshwater #tab-myfishing #chart-bait > div,
body.fk-freshwater #tab-myfishing #chart-time > div {
padding: 8px 12px !important;
border-radius: 10px !important;
background: rgba(233,169,63,0.04) !important;
border: 1px solid rgba(233,169,63,0.12) !important;
margin-bottom: 6px !important;
}
/* ── 4) COMMUNITY CATCH FEED premium restyle ── */
body.fk-freshwater #tab-myfishing .k-social-card .k-angler-bar {
padding: 14px 16px !important;
background: rgba(233,169,63,0.04) !important;
border: 1px solid rgba(233,169,63,0.16) !important;
border-radius: 14px !important;
margin-bottom: 16px !important;
}
body.fk-freshwater #tab-myfishing .k-social-card .k-angler-label {
font-family: 'Oswald', sans-serif !important;
font-size: 0.66rem !important;
letter-spacing: 2.4px !important;
text-transform: uppercase !important;
color: var(--fkmf-dim) !important;
display: block !important;
margin-bottom: 8px !important;
}
body.fk-freshwater #tab-myfishing .k-social-card .k-angler-input-row {
display: flex !important;
gap: 10px !important;
align-items: center !important;
}
body.fk-freshwater #tab-myfishing .k-social-card #k-angler-name {
flex: 1 !important;
background: rgba(8,20,16,0.7) !important;
border: 1px solid rgba(233,169,63,0.22) !important;
border-radius: 10px !important;
padding: 11px 14px !important;
color: #eaf7ef !important;
font-size: 0.92rem !important;
}
body.fk-freshwater #tab-myfishing .k-social-card #k-angler-name:focus {
border-color: rgba(233,169,63,0.55) !important;
box-shadow: 0 0 0 3px rgba(233,169,63,0.14) !important;
outline: none !important;
}
body.fk-freshwater #tab-myfishing .k-social-card .k-share-form {
padding: 18px 16px !important;
background: rgba(8,20,16,0.5) !important;
border: 1px solid rgba(233,169,63,0.12) !important;
border-radius: 14px !important;
margin-bottom: 18px !important;
}
body.fk-freshwater #tab-myfishing .k-social-card .k-share-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
gap: 10px !important;
margin-bottom: 12px !important;
}
body.fk-freshwater #tab-myfishing .k-social-card .k-share-grid input {
background: rgba(8,20,16,0.85) !important;
border: 1px solid rgba(233,169,63,0.18) !important;
border-radius: 10px !important;
padding: 11px 13px !important;
color: #eaf7ef !important;
font-size: 0.9rem !important;
}
body.fk-freshwater #tab-myfishing .k-social-card .k-share-grid input:focus {
border-color: rgba(233,169,63,0.55) !important;
box-shadow: 0 0 0 3px rgba(233,169,63,0.14) !important;
outline: none !important;
}
body.fk-freshwater #tab-myfishing .k-social-card .k-photo-row {
display: flex !important;
gap: 10px !important;
align-items: center !important;
flex-wrap: wrap !important;
margin-bottom: 12px !important;
}
body.fk-freshwater #tab-myfishing .k-social-card .k-share-actions { text-align: right; }
body.fk-freshwater #tab-myfishing .k-social-card .k-share-actions #cf-submit {
padding: 12px 28px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #E9A93F 0%, #22d3ee 100%) !important;
color: #04140b !important;
border: none !important;
font-family: 'Oswald', sans-serif !important;
font-weight: 700 !important;
font-size: 0.82rem !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
cursor: pointer !important;
box-shadow: 0 10px 24px rgba(233,169,63,0.3) !important;
transition: transform .18s ease, box-shadow .18s ease;
}
body.fk-freshwater #tab-myfishing .k-social-card .k-share-actions #cf-submit:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(233,169,63,0.4) !important;
}
body.fk-freshwater #tab-myfishing .k-social-card .k-feed-tabs {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin: 8px 0 18px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid rgba(233,169,63,0.12) !important;
}
body.fk-freshwater #tab-myfishing .k-social-card .k-feed-tab {
padding: 9px 18px !important;
background: rgba(233,169,63,0.06) !important;
border: 1px solid rgba(233,169,63,0.20) !important;
border-radius: 999px !important;
color: #cbedd5 !important;
font-family: 'Oswald', sans-serif !important;
font-size: 0.72rem !important;
letter-spacing: 1.6px !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: all .18s ease !important;
}
body.fk-freshwater #tab-myfishing .k-social-card .k-feed-tab:hover {
background: rgba(233,169,63,0.14) !important;
border-color: rgba(233,169,63,0.45) !important;
}
body.fk-freshwater #tab-myfishing .k-social-card .k-feed-tab.active {
background: linear-gradient(135deg, rgba(233,169,63,0.32), rgba(45,212,191,0.24)) !important;
border-color: rgba(233,169,63,0.6) !important;
color: #fff !important;
box-shadow: 0 6px 16px rgba(233,169,63,0.25);
}
body.fk-freshwater #tab-myfishing .k-social-card .k-feed-empty {
padding: 40px 16px !important;
text-align: center !important;
color: var(--fkmf-dim) !important;
font-size: 0.9rem !important;
background: rgba(233,169,63,0.03) !important;
border: 1px dashed rgba(233,169,63,0.16) !important;
border-radius: 14px !important;
}
/* ── Mobile tightening (≤ 520px) ── */
@media (max-width: 520px) {
body.fk-freshwater #tab-myfishing > .section-wrap > .report-section,
body.fk-freshwater #tab-myfishing > .section-wrap > .card {
padding: 22px 18px !important;
margin-bottom: 18px !important;
border-radius: 18px !important;
}
body.fk-freshwater #tab-myfishing .report-section .report-label { font-size: 0.72rem !important; letter-spacing: 2.6px !important; }
body.fk-freshwater #tab-myfishing .report-section #report-date { font-size: 0.82rem !important; letter-spacing: 2.2px !important; padding: 8px 18px !important; }
body.fk-freshwater #tab-myfishing .report-section #report-btn { padding: 12px 22px !important; font-size: 0.82rem !important; }
body.fk-freshwater #tab-myfishing #report-content { padding: 18px 16px !important; font-size: 0.9rem !important; }
body.fk-freshwater #tab-myfishing .card > h2 { font-size: 0.92rem !important; letter-spacing: 2.4px !important; }
body.fk-freshwater #tab-myfishing .catch-log-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
body.fk-freshwater #tab-myfishing .catch-log-field input { padding: 11px 13px !important; font-size: 0.9rem !important; }
body.fk-freshwater #tab-myfishing .catch-photo-upload-area { padding: 16px !important; gap: 10px !important; }
body.fk-freshwater #tab-myfishing #log-catch-btn { padding: 13px 26px !important; font-size: 0.86rem !important; }
body.fk-freshwater #tab-myfishing .pb-value { font-size: 1.15rem !important; }
body.fk-freshwater #tab-myfishing .k-social-card .k-share-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 380px) {
body.fk-freshwater #tab-myfishing .catch-log-grid { grid-template-columns: 1fr !important; }
}
/* ═══ END FRESHWATER MY-FISHING PREMIUM OVERHAUL ═══ */
/* ═══════════════════════════════════════════════════════════════════════
SALTWATER · FISHING SCORE WATER-FILL CARD (app.html only)
Distinct class .k-water-score-card — freshwater keeps its dial.
═══════════════════════════════════════════════════════════════════════ */
.k-water-score-card {
--kws-teal: #2dd4bf;
--kws-gold: #FCB548;
--kws-panel: #061831;
--kws-panel2: #0a1f3d;
--kws-line: rgba(45,212,191,0.14);
max-width: 1300px;
margin: 8px auto 22px;
padding: 26px 26px 24px;
position: relative;
background: linear-gradient(180deg, var(--kws-panel2), var(--kws-panel));
border: 1px solid var(--kws-line);
border-radius: 20px;
overflow: hidden;
color: #eaf3f5;
}
.k-water-score-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--kws-gold), var(--kws-teal) 55%, transparent 100%);
z-index: 5;
}
.k-water-score-card .kws-eyebrow {
font-family: 'IBM Plex Mono', 'Oswald', monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--kws-teal);
margin: 0 0 8px;
}
.k-water-score-card .kws-title {
display: inline-flex;
align-items: center;
font-family: 'Space Grotesk', 'Oswald', system-ui, sans-serif;
font-size: 20px;
font-weight: 700;
color: #fff;
margin: 0 0 8px;
background: rgba(45,212,191,0.10);
border: 1px solid rgba(45,212,191,0.28);
padding: 5px 16px 6px;
border-radius: 999px;
letter-spacing: 0.4px;
}
.k-water-score-card .kws-desc {
color: #a9c0cc;
font-size: 13px;
line-height: 1.55;
margin: 0 0 18px;
max-width: 600px;
}
.k-water-score-card .kws-tank {
position: relative;
height: 140px;
border-radius: 12px;
background: #03101c;
border: 1px solid rgba(45,212,191,0.22);
overflow: hidden;
}
.k-water-score-card .kws-water-fill {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 0%;
transition: height 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: height;
}
.k-water-score-card .kws-water-body {
position: absolute;
inset: 0;
top: 10px;
background: linear-gradient(180deg, rgba(45,212,191,0.30), rgba(24,179,197,0.44) 40%, rgba(11,60,84,0.65));
}
.k-water-score-card .kws-wave-svg {
position: absolute;
left: 0;
top: -8px;
width: 200%;
height: 24px;
}
.k-water-score-card .kws-wave1 { animation: kws-wave-move 5.5s linear infinite; }
.k-water-score-card .kws-wave2 { animation: kws-wave-move 8s linear infinite reverse; opacity: 0.55; top: -4px; }
@keyframes kws-wave-move {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.k-water-score-card .kws-bubble {
position: absolute;
bottom: 0;
border-radius: 50%;
background: rgba(255,255,255,0.35);
animation: kws-rise linear infinite;
}
@keyframes kws-rise {
0% { transform: translateY(0); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.4; }
100% { transform: translateY(-140px); opacity: 0; }
}
.k-water-score-card .kws-caustic {
position: absolute;
inset: 0;
mix-blend-mode: screen;
opacity: 0.25;
background:
radial-gradient(ellipse 60px 20px at 20% 40%, rgba(255,255,255,0.5), transparent 70%),
radial-gradient(ellipse 80px 24px at 70% 65%, rgba(255,255,255,0.4), transparent 70%);
animation: kws-shimmer 4s ease-in-out infinite alternate;
}
@keyframes kws-shimmer {
from { transform: translateX(-10px) scale(1); }
to { transform: translateX(10px) scale(1.05); }
}
.k-water-score-card .kws-waterline-glow {
position: absolute;
left: 0; right: 0; top: 0;
height: 14px;
z-index: 4;
background: linear-gradient(180deg, rgba(45,212,191,0.55), transparent);
filter: blur(2px);
}
.k-water-score-card .kws-score-overlay {
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: flex-end;
z-index: 5;
pointer-events: none;
}
.k-water-score-card .kws-n {
font-family: 'IBM Plex Mono', 'Oswald', monospace;
font-weight: 600;
color: #fff;
line-height: 1;
text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 24px rgba(45,212,191,0.65);
font-size: 52px;
letter-spacing: 0.5px;
}
.k-water-score-card .kws-n sup {
font-size: 14px;
color: #e4f6f4;
font-weight: 500;
margin-left: 4px;
}
.k-water-score-card .kws-depth-label {
position: absolute;
right: 14px;
top: 14px;
z-index: 5;
font-family: 'IBM Plex Mono', 'Oswald', monospace;
font-size: 9.5px;
letter-spacing: 0.08em;
color: rgba(234,243,245,0.72);
text-transform: uppercase;
}
@media (max-width: 520px) {
.k-water-score-card { padding: 22px 20px 20px; margin-bottom: 18px; }
.k-water-score-card .kws-title { font-size: 17px; padding: 4px 13px 5px; }
.k-water-score-card .kws-desc { font-size: 12.5px; margin-bottom: 14px; }
.k-water-score-card .kws-tank { height: 128px; }
.k-water-score-card .kws-n { font-size: 44px; }
.k-water-score-card .kws-score-overlay { left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.k-water-score-card .kws-wave1,
.k-water-score-card .kws-wave2,
.k-water-score-card .kws-bubble,
.k-water-score-card .kws-caustic { animation: none; }
.k-water-score-card .kws-water-fill { transition: none; }
}
/* ═══ END SALTWATER FISHING SCORE WATER-FILL CARD ═══ */
/* ═══════════════════════════════════════════════════════════════════════
SALTWATER · MY FISHING PREMIUM OVERHAUL (app.html only)
Applies to body.fk-saltwater #tab-myfishing — freshwater keeps its green
overhaul (body.fk-freshwater). All existing IDs/JS handlers preserved.
═══════════════════════════════════════════════════════════════════════ */
/* ── Local design tokens ── */
body.fk-saltwater #tab-myfishing {
--mf-teal: #2dd4bf;
--mf-teal2: #18B3C5;
--mf-gold: #FCB548;
--mf-panel: #061831;
--mf-panel2: #0a1f3d;
--mf-line: rgba(45,212,191,0.14);
--mf-text: #eaf3f5;
--mf-muted: #7d95a8;
--mf-red: #f2555a;
}
/* ── Section width + soft page glow ── */
body.fk-saltwater #tab-myfishing .section-wrap {
max-width: 720px;
margin: 0 auto;
padding: 0 4px;
}
/* ── Unified premium card shell (report + catch + patterns) ── */
body.fk-saltwater #tab-myfishing > .section-wrap > .report-section,
body.fk-saltwater #tab-myfishing > .section-wrap > .card {
position: relative !important;
background: linear-gradient(180deg, var(--mf-panel2), var(--mf-panel)) !important;
border: 1px solid var(--mf-line) !important;
border-radius: 18px !important;
padding: 26px 24px 28px !important;
margin: 0 0 22px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 20px 40px -20px rgba(0,0,0,0.6) !important;
overflow: hidden !important;
backdrop-filter: none !important;
}
body.fk-saltwater #tab-myfishing > .section-wrap > .report-section::before,
body.fk-saltwater #tab-myfishing > .section-wrap > .card::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important;
height: 2px !important;
background: linear-gradient(90deg, var(--mf-gold), var(--mf-teal) 55%, transparent 100%) !important;
z-index: 3;
pointer-events: none;
}
body.fk-saltwater #tab-myfishing > .section-wrap > .report-section::after,
body.fk-saltwater #tab-myfishing > .section-wrap > .card::after {
content: '';
position: absolute; inset: 0;
border-radius: 18px;
background: radial-gradient(500px 160px at 10% -10%, rgba(45,212,191,0.06), transparent 60%);
pointer-events: none;
z-index: 0;
}
body.fk-saltwater #tab-myfishing > .section-wrap > .report-section > *,
body.fk-saltwater #tab-myfishing > .section-wrap > .card > * { position: relative; z-index: 1; }
/* ═══ 1) DAILY FISHING REPORT ═══ */
body.fk-saltwater #tab-myfishing .report-section {
text-align: center !important;
}
/* Report icon block (built via ::before on the label wrapper — a scoped SVG comes from data-url) */
body.fk-saltwater #tab-myfishing .report-section .report-label {
display: block !important;
position: relative;
margin: 0 auto 18px !important;
color: var(--mf-teal) !important;
font-family: 'IBM Plex Mono', 'Oswald', monospace !important;
font-size: 11px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
}
/* Hide the legacy SVG that used to precede the label text */
body.fk-saltwater #tab-myfishing .report-section .report-label > svg { display: none !important; }
/* Date pill (teal-gold) */
body.fk-saltwater #tab-myfishing .report-section #report-date {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
width: auto !important;
max-width: 92% !important;
margin: 0 auto 22px !important;
padding: 8px 18px !important;
font-family: 'IBM Plex Mono', 'Oswald', monospace !important;
font-size: 12px !important;
letter-spacing: 0.06em !important;
color: var(--mf-gold) !important;
background: rgba(252,181,72,0.08) !important;
border: 1px solid rgba(252,181,72,0.30) !important;
border-radius: 999px !important;
text-transform: none !important;
font-weight: 500 !important;
box-shadow: none !important;
}
body.fk-saltwater #tab-myfishing .report-section #report-date::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: var(--mf-gold);
box-shadow: 0 0 8px var(--mf-gold);
flex-shrink: 0;
}
body.fk-saltwater #tab-myfishing .report-section #report-date:empty {
min-width: 200px; min-height: 1.5em;
color: transparent !important;
animation: k-skeleton 1.6s ease-in-out infinite;
}
/* Generate button — sunlight gold gradient with sheen */
body.fk-saltwater #tab-myfishing .report-section #report-btn {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
padding: 15px 34px !important;
min-height: 48px !important;
border: none !important;
border-radius: 999px !important;
font-family: 'Space Grotesk', 'Oswald', system-ui, sans-serif !important;
font-weight: 700 !important;
font-size: 14.5px !important;
letter-spacing: 0.02em !important;
color: #2a1500 !important;
background: linear-gradient(135deg, #ffd27a, var(--mf-gold) 55%, #f0952f) !important;
box-shadow: 0 10px 28px -10px rgba(252,181,72,0.65), inset 0 1px 0 rgba(255,255,255,0.4) !important;
position: relative;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease !important;
text-transform: none !important;
}
body.fk-saltwater #tab-myfishing .report-section #report-btn::after {
content: '';
position: absolute; inset: 0;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent 60%);
pointer-events: none;
}
body.fk-saltwater #tab-myfishing .report-section #report-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 14px 34px -8px rgba(252,181,72,0.72), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
body.fk-saltwater #tab-myfishing .report-section #report-btn:disabled { opacity: 0.55 !important; }
body.fk-saltwater #tab-myfishing .report-section #report-btn svg {
stroke: #2a1500 !important;
fill: #2a1500 !important;
}
/* Report content body */
body.fk-saltwater #tab-myfishing #report-content {
text-align: left !important;
max-width: 620px !important;
margin: 22px auto 0 !important;
padding: 20px 20px !important;
background: rgba(3,16,28,0.55) !important;
border: 1px solid rgba(45,212,191,0.14) !important;
border-radius: 14px !important;
line-height: 1.72 !important;
color: #dceff3 !important;
font-size: 13.5px !important;
}
body.fk-saltwater #tab-myfishing #report-content:empty { display: none !important; }
/* ═══ 2) CATCH LOGGER ═══ */
/* Card head with teal accent bar */
body.fk-saltwater #tab-myfishing .card > h2 {
position: relative;
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding-left: 12px !important;
font-family: 'Space Grotesk', 'Oswald', system-ui, sans-serif !important;
font-size: 15px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #fff !important;
margin: 0 0 6px 0 !important;
}
body.fk-saltwater #tab-myfishing .card > h2::before {
content: '';
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 3px; height: 16px;
border-radius: 2px;
background: linear-gradient(180deg, var(--mf-teal), var(--mf-teal2));
}
body.fk-saltwater #tab-myfishing .card > h2 .h2-icon {
width: 15px !important; height: 15px !important;
stroke: var(--mf-teal) !important;
}
body.fk-saltwater #tab-myfishing .card .section-tip {
color: var(--mf-muted) !important;
font-size: 12.5px !important;
line-height: 1.5 !important;
margin: 0 0 22px 0 !important;
}
/* Habitat block */
body.fk-saltwater #tab-myfishing .k-habitat-row {
background: rgba(255,255,255,0.02) !important;
border: 1px solid rgba(255,255,255,0.05) !important;
border-radius: 14px !important;
padding: 16px 16px 14px !important;
margin: 0 0 22px !important;
}
body.fk-saltwater #tab-myfishing .k-habitat-label {
display: block !important;
text-align: center !important;
font-family: 'IBM Plex Mono', 'Oswald', monospace !important;
font-size: 10px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: var(--mf-muted) !important;
margin: 0 0 12px !important;
}
body.fk-saltwater #tab-myfishing .k-habitat-chips {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 9px !important;
}
body.fk-saltwater #tab-myfishing .k-habitat-chip {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 8px 15px !important;
border-radius: 999px !important;
font-family: 'Space Grotesk', 'Oswald', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #c9d8de !important;
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
cursor: pointer !important;
transition: all .15s ease !important;
}
body.fk-saltwater #tab-myfishing .k-habitat-chip::before {
content: '';
width: 5px; height: 5px; border-radius: 50%;
background: var(--mf-teal);
opacity: 0;
transition: opacity .15s ease;
}
body.fk-saltwater #tab-myfishing .k-habitat-chip:hover {
background: rgba(255,255,255,0.06) !important;
border-color: rgba(255,255,255,0.14) !important;
}
body.fk-saltwater #tab-myfishing .k-habitat-chip.is-selected,
body.fk-saltwater #tab-myfishing .k-habitat-chip[aria-pressed="true"] {
background: linear-gradient(135deg, rgba(45,212,191,0.22), rgba(24,179,197,0.14)) !important;
border-color: rgba(45,212,191,0.55) !important;
color: #fff !important;
box-shadow: 0 0 0 1px rgba(45,212,191,0.15), 0 4px 14px -4px rgba(45,212,191,0.4) !important;
}
body.fk-saltwater #tab-myfishing .k-habitat-chip.is-selected::before,
body.fk-saltwater #tab-myfishing .k-habitat-chip[aria-pressed="true"]::before {
opacity: 1;
}
/* Field grid — teal mono labels, dark input fields with teal focus ring */
body.fk-saltwater #tab-myfishing .catch-log-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 14px 16px !important;
margin-bottom: 18px !important;
}
body.fk-saltwater #tab-myfishing .catch-log-field {
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
}
body.fk-saltwater #tab-myfishing .catch-log-field label {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-family: 'IBM Plex Mono', 'Oswald', monospace !important;
font-size: 10px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--mf-teal) !important;
margin: 0 !important;
}
body.fk-saltwater #tab-myfishing .catch-log-field label svg { stroke: var(--mf-teal) !important; }
body.fk-saltwater #tab-myfishing .catch-log-field input {
background: rgba(3,16,28,0.65) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 10px !important;
padding: 10px 12px !important;
color: #fff !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 13.5px !important;
outline: none !important;
transition: border-color .15s ease, box-shadow .15s ease !important;
}
body.fk-saltwater #tab-myfishing .catch-log-field input::placeholder { color: #4d6577 !important; }
body.fk-saltwater #tab-myfishing .catch-log-field input:focus {
border-color: rgba(45,212,191,0.55) !important;
box-shadow: 0 0 0 3px rgba(45,212,191,0.12) !important;
}
/* Notes row spans full width */
body.fk-saltwater #tab-myfishing > .section-wrap > .card > .catch-log-field {
margin: 0 0 18px !important;
}
body.fk-saltwater #tab-myfishing > .section-wrap > .card > .catch-log-field label { color: var(--mf-teal) !important; }
body.fk-saltwater #tab-myfishing > .section-wrap > .card > .catch-log-field input {
background: rgba(3,16,28,0.65) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 10px !important;
padding: 10px 12px !important;
color: #fff !important;
font-size: 13.5px !important;
}
/* Photo upload zone kept minimal + teal */
body.fk-saltwater #tab-myfishing .catch-photo-upload-area {
margin: 0 0 18px !important;
padding: 16px !important;
background: rgba(3,16,28,0.45) !important;
border: 1px dashed rgba(45,212,191,0.25) !important;
border-radius: 12px !important;
display: flex !important;
gap: 10px !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
body.fk-saltwater #tab-myfishing .k-photo-btn {
padding: 10px 18px !important;
border-radius: 999px !important;
background: rgba(45,212,191,0.10) !important;
border: 1px solid rgba(45,212,191,0.30) !important;
color: #cbeae4 !important;
font-family: 'Space Grotesk', 'Oswald', system-ui, sans-serif !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
transition: all .18s ease !important;
}
body.fk-saltwater #tab-myfishing .k-photo-btn:hover {
background: rgba(45,212,191,0.18) !important;
border-color: rgba(45,212,191,0.55) !important;
}
/* Save button (Log This Catch!) — right-aligned teal pill */
body.fk-saltwater #tab-myfishing > .section-wrap > .card > div[style*="text-align:center"]:has(> #log-catch-btn) {
text-align: right !important;
}
body.fk-saltwater #tab-myfishing #log-catch-btn {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 11px 22px !important;
min-height: 44px !important;
border: none !important;
border-radius: 999px !important;
font-family: 'Space Grotesk', 'Oswald', system-ui, sans-serif !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.02em !important;
color: #062018 !important;
background: linear-gradient(135deg, var(--mf-teal), var(--mf-teal2)) !important;
box-shadow: 0 8px 20px -8px rgba(45,212,191,0.6) !important;
text-transform: none !important;
transition: transform .18s ease, box-shadow .18s ease !important;
}
body.fk-saltwater #tab-myfishing #log-catch-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px -8px rgba(45,212,191,0.72) !important;
}
body.fk-saltwater #tab-myfishing #log-catch-btn svg {
stroke: #062018 !important;
fill: none !important;
}
/* Catch history divider */
body.fk-saltwater #tab-myfishing #catch-history {
margin-top: 22px !important;
padding-top: 22px !important;
border-top: 1px solid rgba(45,212,191,0.12) !important;
}
/* ═══ 3) MY FISHING PATTERNS ═══ */
body.fk-saltwater #tab-myfishing > .section-wrap > .card > div[style*="justify-content:space-between"] {
padding-left: 12px !important;
position: relative !important;
}
body.fk-saltwater #tab-myfishing > .section-wrap > .card > div[style*="justify-content:space-between"]::before {
content: '';
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 3px; height: 16px;
border-radius: 2px;
background: linear-gradient(180deg, var(--mf-teal), var(--mf-teal2));
}
body.fk-saltwater #tab-myfishing > .section-wrap > .card > div[style*="justify-content:space-between"] > h2 {
padding-left: 0 !important;
}
body.fk-saltwater #tab-myfishing > .section-wrap > .card > div[style*="justify-content:space-between"] > h2::before {
display: none !important;
}
/* Reset All button — subtle red pill */
body.fk-saltwater #tab-myfishing > .section-wrap > .card > div[style*="justify-content:space-between"] > button {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 13px !important;
border-radius: 999px !important;
background: rgba(242,85,90,0.08) !important;
border: 1px solid rgba(242,85,90,0.30) !important;
color: var(--mf-red) !important;
font-family: 'IBM Plex Mono', 'Oswald', monospace !important;
font-size: 10.5px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: all .18s ease !important;
}
body.fk-saltwater #tab-myfishing > .section-wrap > .card > div[style*="justify-content:space-between"] > button:hover {
background: rgba(242,85,90,0.16) !important;
border-color: rgba(242,85,90,0.5) !important;
}
body.fk-saltwater #tab-myfishing > .section-wrap > .card > div[style*="justify-content:space-between"] > button svg {
stroke: currentColor !important;
width: 11px !important; height: 11px !important;
}
/* Empty state ring + copy */
body.fk-saltwater #tab-myfishing #patterns-empty {
display: none;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 26px 10px 10px !important;
}
body.fk-saltwater #tab-myfishing #patterns-empty[style*="display:block"],
body.fk-saltwater #tab-myfishing #patterns-empty[style*="display: block"] {
display: flex !important;
}
body.fk-saltwater #tab-myfishing #patterns-empty > div:first-child {
width: 76px; height: 76px;
border-radius: 50% !important;
margin: 0 auto 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: radial-gradient(circle, rgba(45,212,191,0.14), transparent 70%) !important;
border: 1px dashed rgba(45,212,191,0.30) !important;
position: relative;
}
body.fk-saltwater #tab-myfishing #patterns-empty > div:first-child::before {
content: '';
position: absolute; inset: -8px;
border-radius: 50%;
border: 1px solid rgba(45,212,191,0.10);
}
body.fk-saltwater #tab-myfishing #patterns-empty > div:first-child svg {
width: 26px !important; height: 26px !important;
stroke: var(--mf-teal) !important;
filter: drop-shadow(0 0 8px rgba(45,212,191,0.5));
}
body.fk-saltwater #tab-myfishing #patterns-empty > div:nth-child(2) {
font-family: 'Space Grotesk', 'Oswald', system-ui, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
color: var(--mf-teal) !important;
text-transform: none !important;
margin: 0 0 8px !important;
}
body.fk-saltwater #tab-myfishing #patterns-empty > div:nth-child(3) {
color: #a9c0cc !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 12.5px !important;
line-height: 1.5 !important;
max-width: 380px !important;
margin: 0 auto !important;
}
/* Patterns content — cleaner spacing */
body.fk-saltwater #tab-myfishing #patterns-content .ai-insight-block {
padding: 16px 18px !important;
margin: 4px 0 18px !important;
background: linear-gradient(135deg, rgba(45,212,191,0.10), rgba(24,179,197,0.06)) !important;
border: 1px solid rgba(45,212,191,0.26) !important;
border-left: 3px solid var(--mf-teal) !important;
border-radius: 12px !important;
}
body.fk-saltwater #tab-myfishing .pattern-tab-btn {
padding: 8px 15px !important;
border-radius: 999px !important;
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
color: #c9d8de !important;
font-family: 'Space Grotesk', 'Oswald', system-ui, sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
cursor: pointer !important;
transition: all .18s ease !important;
}
body.fk-saltwater #tab-myfishing .pattern-tab-btn:hover {
background: rgba(255,255,255,0.06) !important;
border-color: rgba(255,255,255,0.14) !important;
}
body.fk-saltwater #tab-myfishing .pattern-tab-btn.active {
background: linear-gradient(135deg, rgba(45,212,191,0.22), rgba(24,179,197,0.14)) !important;
border-color: rgba(45,212,191,0.55) !important;
color: #fff !important;
box-shadow: 0 0 0 1px rgba(45,212,191,0.15), 0 4px 14px -4px rgba(45,212,191,0.4) !important;
}
body.fk-saltwater #tab-myfishing .pb-card {
padding: 14px 12px !important;
background: rgba(3,16,28,0.55) !important;
border: 1px solid rgba(45,212,191,0.18) !important;
border-radius: 12px !important;
text-align: center !important;
transition: transform .18s ease, border-color .18s ease;
}
body.fk-saltwater #tab-myfishing .pb-card:hover {
transform: translateY(-2px);
border-color: rgba(45,212,191,0.4);
}
body.fk-saltwater #tab-myfishing .pb-label {
font-family: 'IBM Plex Mono', 'Oswald', monospace !important;
font-size: 10px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--mf-muted) !important;
margin-bottom: 8px !important;
}
body.fk-saltwater #tab-myfishing .pb-value {
font-family: 'Space Grotesk', 'Oswald', system-ui, sans-serif !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
margin-bottom: 4px !important;
}
body.fk-saltwater #tab-myfishing .pb-sub {
font-size: 11.5px !important;
color: var(--mf-muted) !important;
}
/* ── Mobile (≤520px) ── */
@media (max-width: 520px) {
body.fk-saltwater #tab-myfishing .catch-log-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
body.fk-saltwater #tab-myfishing > .section-wrap > .report-section,
body.fk-saltwater #tab-myfishing > .section-wrap > .card {
padding: 22px 18px 24px !important;
border-radius: 16px !important;
}
body.fk-saltwater #tab-myfishing .report-section #report-btn { padding: 13px 26px !important; font-size: 13.5px !important; }
body.fk-saltwater #tab-myfishing .card > h2 { font-size: 13.5px !important; }
body.fk-saltwater #tab-myfishing .k-habitat-chip { padding: 7px 13px !important; font-size: 12.5px !important; }
body.fk-saltwater #tab-myfishing .catch-log-field input { padding: 10px 11px !important; font-size: 13px !important; }
}
@media (max-width: 380px) {
body.fk-saltwater #tab-myfishing .catch-log-grid { grid-template-columns: 1fr !important; }
}
/* ═══ END SALTWATER MY-FISHING PREMIUM OVERHAUL ═══ */
/* ═══════════════════════════════════════════════════════════════════
MY FISHING → EXACT HOME DESIGN SYSTEM MATCH
Home is the single source of truth. This block transfers Home's
left-aligned eyebrow + teal-gradient card language onto #tab-myfishing
(both Salt & Fresh). No HTML/JS changes. Loaded last → wins cascade.
═══════════════════════════════════════════════════════════════════ */
/* Page intro — left-aligned like Home (not a centered banner) */
#tab-myfishing .tab-header-banner {
text-align: left !important;
max-width: 960px;
margin: 0 auto 6px !important;
padding: 0 4px !important;
}
#tab-myfishing .tab-header-eyebrow {
text-align: left !important;
font-family: 'Oswald', sans-serif !important;
font-size: 0.72rem !important;
letter-spacing: 2.5px !important;
text-transform: uppercase;
color: var(--teal-lt) !important;
}
#tab-myfishing .tab-header-title {
text-align: left !important;
margin: 2px 0 !important;
font-family: 'Oswald', sans-serif !important;
font-size: 1.5rem !important;
letter-spacing: 0.5px !important;
color: var(--white) !important;
}
#tab-myfishing .tab-header-sub {
text-align: left !important;
color: rgba(230, 245, 255, 0.6) !important;
font-size: 0.85rem !important;
}
/* Cards → Home section treatment (teal gradient, 18px radius, left content) */
#tab-myfishing .section-wrap > .card,
#tab-myfishing .section-wrap > .report-section,
#tab-myfishing .section-wrap > [data-fk-slot] > * {
max-width: 960px !important;
margin-left: auto !important;
margin-right: auto !important;
background: linear-gradient(135deg, rgba(26, 159, 181, 0.12), rgba(6, 30, 47, 0.55)) !important;
border: 1px solid rgba(77, 227, 255, 0.22) !important;
border-radius: 18px !important;
box-shadow: none !important;
text-align: left !important;
padding: 20px !important;
}
#tab-myfishing .card,
#tab-myfishing .card *,
#tab-myfishing .report-section,
#tab-myfishing .report-section * {
text-align: left;
}
/* keep the inline-centered button wrappers behaving as full-width CTAs */
#tab-myfishing .card > div[style*="text-align:center"],
#tab-myfishing .report-section > div[style*="text-align:center"] {
text-align: center !important;
}
/* Section headers → Home eyebrow (small, uppercase, left, no accent bar) */
#tab-myfishing .card > h2,
#tab-myfishing .card h2,
#tab-myfishing .report-label {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
border-left: none !important;
padding-left: 0 !important;
margin-bottom: 6px !important;
font-family: 'Oswald', sans-serif !important;
font-size: 0.72rem !important;
letter-spacing: 2.5px !important;
text-transform: uppercase;
color: var(--teal-lt) !important;
text-align: left !important;
}
#tab-myfishing .card h2 svg,
#tab-myfishing .card h2 .h2-icon,
#tab-myfishing .report-label svg {
width: 13px !important;
height: 13px !important;
color: var(--teal-lt) !important;
stroke: var(--teal-lt) !important;
padding: 0 !important;
background: none !important;
border: none !important;
}
/* Sub / helper text → Home sub style, left-aligned */
#tab-myfishing .section-tip {
text-align: left !important;
color: rgba(230, 245, 255, 0.6) !important;
font-size: 0.8rem !important;
margin: 0 0 14px !important;
display: block !important;
max-width: none !important;
}
#tab-myfishing #report-date {
margin-left: 0 !important;
margin-right: auto !important;
}
/* Habitat + pattern label rows → left */
#tab-myfishing .k-habitat-label,
#tab-myfishing .k-angler-label { text-align: left !important; }
#tab-myfishing .k-habitat-chips { justify-content: flex-start !important; }
/* Personal-best tiles → Home cell tokens */
#tab-myfishing .pb-card {
background: rgba(6, 30, 47, 0.7) !important;
border: 1px solid rgba(77, 227, 255, 0.18) !important;
border-radius: 12px !important;
text-align: left !important;
padding: 12px 14px !important;
}
#tab-myfishing .pb-label {
font-family: 'Oswald', sans-serif !important;
font-size: 0.6rem !important;
letter-spacing: 2px !important;
text-transform: uppercase;
color: var(--teal-lt) !important;
text-align: left !important;
}
#tab-myfishing .pb-value { font-family: 'Oswald', sans-serif !important; text-align: left !important; }
#tab-myfishing .pb-sub { color: rgba(230, 245, 255, 0.55) !important; font-size: 0.72rem !important; text-align: left !important; }
/* Pattern filter tabs → Home chip / pill styling */
#tab-myfishing .pattern-tab-btn {
border-radius: 999px !important;
background: rgba(77, 227, 255, 0.08) !important;
border: 1px solid rgba(77, 227, 255, 0.22) !important;
color: var(--teal-lt) !important;
font-family: 'Oswald', sans-serif !important;
font-size: 0.7rem !important;
letter-spacing: 1.4px !important;
text-transform: uppercase;
padding: 7px 14px !important;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
#tab-myfishing .pattern-tab-btn:hover { transform: translateY(-1px); border-color: rgba(77, 227, 255, 0.5) !important; }
#tab-myfishing .pattern-tab-btn.active {
background: linear-gradient(135deg, #16B3C7, #4DE3FF) !important;
color: #04121F !important;
border-color: transparent !important;
}
/* Community feed heading → same left eyebrow as the rest (was center) */
#tab-myfishing .k-social-card > h2 {
justify-content: flex-start !important;
text-align: left !important;
font-size: 0.72rem !important;
letter-spacing: 2.5px !important;
color: var(--teal-lt) !important;
}
#tab-myfishing .k-social-card > .section-tip { text-align: left !important; }
/* ── MY FISHING → HOME match, patch 2: kill orphan accent bar + left-align labels ── */
body.fk-saltwater #tab-myfishing .card > h2::before,
body.fk-freshwater #tab-myfishing .card > h2::before,
#tab-myfishing .card > h2::before { display: none !important; content: none !important; }
body.fk-saltwater #tab-myfishing .catch-log-field label,
body.fk-freshwater #tab-myfishing .catch-log-field label,
#tab-myfishing .catch-log-field label,
#tab-myfishing .catch-log-field,
#tab-myfishing .k-habitat-label,
#tab-myfishing .k-habitat-row {
text-align: left !important;
justify-content: flex-start !important;
}
#tab-myfishing .catch-log-field label { display: inline-flex !important; }
/* salt-specific: left-align habitat label to match Home + freshwater */
body.fk-saltwater #tab-myfishing .k-habitat-label,
body.fk-saltwater #tab-myfishing .k-habitat-row { text-align: left !important; }
/* ═══════════════════════════════════════════════════════════════════
MY FISHING · clean text-only section titles (no "|" accent, no icons)
+ centered species category/confidence tags
═══════════════════════════════════════════════════════════════════ */
#tab-myfishing .card h2,
#tab-myfishing .card > h2 {
border-left: none !important;
padding-left: 0 !important;
justify-content: center !important;
text-align: center !important;
}
#tab-myfishing .card h2::before,
#tab-myfishing .card > h2::before,
body.fk-saltwater #tab-myfishing .card > h2::before,
body.fk-freshwater #tab-myfishing .card > h2::before,
body.fk-saltwater #tab-myfishing > .section-wrap > .card > div[style*="justify-content:space-between"] > h2::before {
display: none !important;
content: none !important;
}
#tab-myfishing .card h2 svg,
#tab-myfishing .card h2 .h2-icon {
display: none !important;
}
/* Centered, spaced species tags in the target list (both apps) */
.k-target-item-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
margin: 2px 0 4px;
}
/* ── Community (Home preview) + water-type pills — 2026-06 ── */
.k-wt-pill{font-family:'Oswald',sans-serif;font-size:0.6rem;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border-radius:20px;font-weight:600;}
.k-wt-saltwater{background:rgba(26,159,181,0.18);color:#4de3ff;border:1px solid rgba(26,159,181,0.5);}
.k-wt-freshwater{background:rgba(233,169,63,0.15);color:#F7C978;border:1px solid rgba(233,169,63,0.45);}
.k-home-community{max-width:960px;margin:0 auto 20px;padding:0 4px;}
.k-comm-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.k-comm-view{background:none;border:none;color:#4de3ff;font-family:'Oswald',sans-serif;font-size:0.7rem;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;padding:4px 2px;transition:color .18s;}
.k-comm-view:hover{color:#fff;}
.k-comm-tagline{font-size:0.82rem;color:rgba(122,179,204,0.8);margin:4px 0 12px;line-height:1.5;}
.k-comm-list{display:flex;flex-direction:column;gap:10px;}
.k-comm-card{display:flex;gap:12px;align-items:center;background:rgba(6,30,47,0.55);border:1px solid rgba(26,159,181,0.22);border-radius:14px;padding:10px;}
.k-comm-photo{width:64px;height:64px;border-radius:10px;overflow:hidden;flex-shrink:0;background:rgba(26,159,181,0.1);}
.k-comm-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.k-comm-noph{background:linear-gradient(135deg,rgba(26,159,181,0.18),rgba(10,47,71,0.6));}
.k-comm-body{flex:1;min-width:0;}
.k-comm-species{font-family:'Oswald',sans-serif;font-size:0.98rem;letter-spacing:0.5px;color:#fff;text-transform:uppercase;}
.k-comm-loc{font-size:0.8rem;color:rgba(122,179,204,0.85);margin:1px 0 6px;}
.k-comm-cardtags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.k-comm-wt{font-family:'Oswald',sans-serif;font-size:0.58rem;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border-radius:20px;font-weight:600;}
.k-comm-wt.salt{background:rgba(26,159,181,0.18);color:#4de3ff;border:1px solid rgba(26,159,181,0.5);}
.k-comm-wt.fresh{background:rgba(233,169,63,0.15);color:#F7C978;border:1px solid rgba(233,169,63,0.45);}
.k-comm-time{font-size:0.72rem;color:rgba(122,179,204,0.6);}
.k-comm-empty{font-size:0.82rem;color:rgba(122,179,204,0.7);padding:14px 0;}
/* Mobile: stack the hero sign-in actions so the email link isn't squeezed
beside the Google button (landing hero). */
@media (max-width: 640px) {
.fk-hero-profile-wrap { flex-direction: column; align-items: center; gap: 2px; }
.fk-hero-profile-wrap .fk-signin-email-link { margin-top: 10px !important; }
}