:root { --bg: #0c1420; --card: #131f2e; --card-edge: #1e3048; --text: #dce8f5; --dim: #7e93ab; --accent: #ffb340; --accent-dim: #b97f2a; --good: #3ddc84; --bad: #ff5d5d; } /* ---- alternate skins (Style 2/3): repaint the palette + tint the fish art. * Style 1 is the :root defaults above. Set on . ---- */ :root[data-style="2"] { /* Slate & Teal — cool, low-key */ --bg: #0e1518; --card: #14201f; --card-edge: #21392f; --text: #e2efe9; --dim: #7f9a92; --accent: #2fd0ad; --accent-dim: #1d8f77; --good: #3ddc84; --bad: #ff6b6b; } :root[data-style="3"] { /* Sunset Pop — warm, vivid */ --bg: #190f1f; --card: #241634; --card-edge: #3a2456; --text: #f4e9ff; --dim: #a892c0; --accent: #ff7ac8; --accent-dim: #c44f97; --good: #5ce0a0; --bad: #ff5d7a; } /* the alt packs draw in currentColor — Style 2 is ink line-art (text tone), * Style 3 is a solid stamp silhouette (accent tone) */ :root[data-style="2"] .fish svg, :root[data-style="2"] .fish-label svg, :root[data-style="2"] .species-lane svg, :root[data-style="2"] .bait-board svg { color: var(--text); } :root[data-style="3"] .fish svg, :root[data-style="3"] .fish-label svg, :root[data-style="3"] .species-lane svg, :root[data-style="3"] .bait-board svg { color: var(--accent); } /* the skin switch bar at the top */ .style-switch { display: flex; justify-content: flex-end; margin: 0 0 8px; } .style-pill { padding: 4px 10px; font-size: .78rem; font-weight: 600; background: var(--card); color: var(--dim); border: 1px solid var(--card-edge); cursor: pointer; } .style-pill:first-child { border-radius: 99px 0 0 99px; } .style-pill:last-child { border-radius: 0 99px 99px 0; } .style-pill + .style-pill { border-left: none; } .style-pill.on { background: var(--accent); color: #14202e; border-color: var(--accent); } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0 auto; max-width: 760px; /* safe-area insets so the installed (standalone) app clears the notch and * home indicator — black-translucent status bar draws content edge-to-edge. * env() is 0 in a normal tab, so this is a no-op in the browser. */ padding: calc(16px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; } header { text-align: center; margin-bottom: 12px; } h1 { margin: 0; font-size: 2.4rem; letter-spacing: -1px; color: var(--accent); } .masthead { display: flex; justify-content: center; align-items: center; gap: 18px; min-height: 64px; } .masthead h1 { white-space: nowrap; } .masthead .flip { display: inline-block; transform: scaleX(-1); } .masthead .fish svg { height: auto; } .masthead .fish { position: relative; display: inline-block; } .fish-acc { position: absolute; top: -15px; z-index: 2; line-height: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); transform: rotate(-8deg); } .fish-acc.on-right { right: 4%; transform: rotate(8deg); } .fish-acc.on-left { left: 4%; } .fish { filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .5)); } .fish.snook { animation: swim 5.5s ease-in-out infinite alternate; } .fish.pompano { animation: swim 6.5s ease-in-out -3s infinite alternate; } @keyframes swim { from { transform: translateY(-3px) rotate(-1.5deg); } to { transform: translateY(3px) rotate(1.5deg); } } .quip { margin: 6px 0 0; color: var(--dim); font-size: .9rem; transition: opacity .4s; min-height: 1.3em; } .quip.fade-out { opacity: 0; } h2 { font-size: 1.05rem; margin: 0 0 10px; color: var(--text); } h2 .sub { color: var(--dim); font-weight: normal; font-size: .85rem; } .inlet-toggle { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; } .inlet-toggle button { flex: 1; max-width: 200px; padding: 10px 0; font-size: 1.05rem; font-weight: 600; background: var(--card); color: var(--dim); border: 1px solid var(--card-edge); border-radius: 10px; cursor: pointer; } .inlet-toggle button.active { background: var(--accent); color: #14202e; border-color: var(--accent); } /* one control row on desktop: search · mode · date — wraps on phones */ .controls { display: flex; flex-wrap: wrap; gap: 8px 9px; justify-content: center; align-items: center; margin: 2px 0 10px; } .inlet-search { position: relative; display: flex; gap: 6px; flex: 1 1 180px; max-width: 234px; margin: 0; } .inlet-search input { flex: 1; min-width: 0; padding: 8px 12px; font-size: .95rem; background: var(--card); color: var(--text); border: 1px solid var(--card-edge); border-radius: 10px; } .inlet-search input::placeholder { color: var(--dim); } .inlet-search button { background: var(--card); border: 1px solid var(--card-edge); border-radius: 10px; padding: 0 12px; cursor: pointer; font-size: 1rem; } .search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: var(--card); border: 1px solid var(--card-edge); border-radius: 10px; margin-top: 4px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } .search-results div { padding: 8px 12px; cursor: pointer; font-size: .92rem; } .search-results div:hover { background: var(--bg); } .search-results .st { color: var(--dim); margin-left: 6px; } .mode-toggle { display: flex; gap: 8px; justify-content: center; margin: 0; } .mode-toggle button { padding: 6px 12px; font-size: .92rem; font-weight: 600; background: var(--card); color: var(--dim); border: 1px solid var(--card-edge); border-radius: 99px; cursor: pointer; } .mode-toggle button.active { background: #1d4e6e; color: var(--text); border-color: #2d6e96; } #seaState table { margin-top: 8px; } #seaState a { color: var(--accent); text-decoration: none; } #seaState a:hover { text-decoration: underline; } #streamLine b { color: var(--accent); } .bait-board .off-season { opacity: .55; } .date-nav { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 0; } .date-nav button { background: var(--card); color: var(--text); border: 1px solid var(--card-edge); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: .92rem; } #dateLabel { font-weight: 600; min-width: 104px; text-align: center; font-size: .95rem; } .cams { text-align: center; margin: -4px 0 12px; font-size: .9rem; color: var(--dim); } .cams .linkgroup { display: inline-block; margin: 0 10px 2px; } .cams a { color: var(--accent); text-decoration: none; margin: 0 6px; } .cams a:hover { text-decoration: underline; } .card { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 14px; margin-bottom: 14px; } .error { background: #3a1820; border: 1px solid var(--bad); color: #ffb9b9; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; } /* now card */ .now-card { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .now-score { font-size: 2.6rem; font-weight: 800; line-height: 1; min-width: 110px; text-align: center; } .now-score small { display: block; font-size: .85rem; font-weight: 600; margin-top: 4px; } .now-facts { flex: 1; min-width: 220px; font-size: .95rem; } .now-facts div { margin: 2px 0; } .now-facts .k { color: var(--dim); } /* species lane: who should show up, and when */ .species-lane { position: relative; min-height: 40px; margin: 0 0 2px; } .species-lane:empty { display: none; } .species-lane .sp { position: absolute; transform: translateX(-50%); cursor: default; line-height: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); } .species-lane .sp:hover { z-index: 2; transform: translateX(-50%) scale(1.35); } .lane-info { font-size: .85rem; color: var(--dim); margin-top: 6px; min-height: 1.3em; } .sp-strip { display: flex; gap: 1px; height: 13px; max-width: 460px; border-radius: 4px; overflow: hidden; margin-top: 5px; } .sp-strip i { flex: 1; } .lane-info b { color: var(--accent); } .lane-info .menu { color: var(--text); } /* "right now" readout, absorbed into the meter (old now-tile retired) */ .now-line { margin: 7px 0 2px; font-size: .92rem; color: var(--dim); } .now-line b { color: var(--text); } .now-badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-weight: 800; color: #0c1420; margin-right: 7px; font-size: .85rem; } /* meter h2 is now just title + "right now" summary — plain block like every * other tile, so the collapse chevron (h2::after float:right) lands right */ /* meter controls live in the body now — useless when the tile is closed */ .meter-controls { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; } /* meter mode: best bite vs just the meat */ .meter-mode { display: flex; gap: 0; margin: 0; } .meter-mode:empty { display: none; } .mode-pill { flex: 0 0 auto; padding: 5px 12px; font-size: .8rem; font-weight: 600; background: var(--card); color: var(--dim); border: 1px solid var(--card-edge); cursor: pointer; } .mode-pill:first-child { border-radius: 99px 0 0 99px; } .mode-pill:last-child { border-radius: 0 99px 99px 0; border-left: none; } .mode-pill.on { background: #1d4e6e; color: var(--text); border-color: #2d6e96; } /* your-species filter */ .gear { background: none; border: none; cursor: pointer; padding: 0 4px; vertical-align: middle; line-height: 0; color: var(--accent-dim); } .gear svg { display: block; } .gear:hover { color: var(--accent); } .gear.active { color: var(--accent); } .species-tune:empty { display: none; } .tune-hint { color: var(--dim); font-size: .8rem; } .tune-head { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; } .tune-head-btns { display: flex; gap: 10px; align-items: center; } .tune-head #tuneDone { text-decoration: none; font-weight: 700; color: var(--accent); } .tune-toggle { background: none; border: none; color: var(--dim); font-size: .8rem; cursor: pointer; padding: 2px 4px; text-decoration: underline; } .tune-panel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; } .sp-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--card-edge); color: var(--dim); cursor: pointer; user-select: none; } .sp-chip.on { color: var(--text); border-color: #2d6e96; } .sp-chip.off { opacity: .5; text-decoration: line-through; } .sp-chip input { display: none; } .sp-chip svg { width: 22px; height: 13px; } .persist-row { flex-basis: 100%; margin-top: 6px; font-size: .76rem; color: var(--dim); } .persist-pill { background: none; border: 1px solid var(--card-edge); border-radius: 99px; color: var(--dim); font-size: .76rem; padding: 2px 9px; margin-left: 4px; cursor: pointer; } .persist-pill.on { color: var(--text); border-color: #2d6e96; } /* Dave's Fish for Dinner */ .daves-bet { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--accent-dim); border-radius: 10px; background: rgba(255, 179, 64, .06); font-size: .95rem; } .daves-bet:empty { display: none; } .daves-bet b { color: var(--accent); } .daves-bet a { color: var(--accent); } /* bait board */ .bait-board { margin-top: 12px; border-top: 1px solid var(--card-edge); padding-top: 10px; font-size: .92rem; } .bait-board h3 { font-size: .95rem; margin: 0 0 6px; color: var(--accent); } /* one collapsed line per bait — icon + name + the fish that eat it; tap the * name to expand into how-to-get + how-to-fish */ .bait-board .bait { margin: 6px 0; } .bait-head { cursor: pointer; } .bait-head .bait-name { border-bottom: 1px dotted var(--card-edge); } .bait-head:hover .bait-name { color: var(--accent); } .bait-head .eaters { margin-left: 5px; } .bait-fire { margin-left: 4px; font-size: .9em; } .bait-thick { margin-left: 5px; padding: 1px 5px; border-radius: 5px; background: var(--accent); color: #14202e; font-size: .66rem; font-weight: 800; letter-spacing: .03em; vertical-align: middle; } .off-note { color: var(--dim); font-size: .82em; font-style: italic; } .bait-detail { display: none; margin: 3px 0 5px 26px; color: var(--dim); } .bait.expanded .bait-detail { display: block; } .bait-label { color: var(--accent-dim); } .bait-hint { margin-top: 8px; font-size: .85rem; } .bait-toggle { float: right; display: inline-flex; } .bait-board .bicon svg { vertical-align: middle; margin-right: 6px; } .bait-board .how { color: var(--dim); } .reportbadge { font-size: .72rem; color: var(--accent); white-space: nowrap; } .bait-chatter { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--card-edge); } .bait-chatter .bicon svg { vertical-align: middle; margin: 0 3px 0 6px; } /* heatmap */ /* ---- the per-fish hook-up grid ---- */ /* shared left gutter so the heat strips, sun marks and hour labels all align */ :root { --grid-gutter: 36px; --why-gutter: 22px; } .heatmap.fish-grid { display: block; height: auto; } .grid-empty { color: var(--dim); font-size: .9rem; padding: 8px 0; } .fish-row { display: flex; align-items: center; height: 16px; margin-bottom: 2px; cursor: pointer; } .fish-label { flex: 0 0 var(--grid-gutter); width: var(--grid-gutter); text-align: center; line-height: 0; } .fish-label svg { width: 24px; height: auto; vertical-align: middle; transition: transform .1s; } .fish-row:hover .fish-label svg { transform: scale(1.25); } .fish-strip { flex: 1; display: flex; gap: 1px; height: 13px; border-radius: 4px; overflow: hidden; } .fish-strip i { flex: 1; position: relative; } .fish-strip i.now::after { content: ""; position: absolute; inset: 0; border-left: 2px solid #fff; } .fish-why { flex: 0 0 var(--why-gutter); width: var(--why-gutter); text-align: center; line-height: 1; font-size: 12px; color: var(--dim); cursor: pointer; } .fish-why:hover { transform: scale(1.2); } .grid-rgutter { flex: 0 0 var(--why-gutter); width: var(--why-gutter); } /* the water row — slim tide curve under the fish, same time axis */ .tide-row { display: flex; align-items: center; height: 22px; margin-top: 4px; } .tide-row .tide-label { line-height: 1; font-size: 14px; } .tide-track { position: relative; flex: 1; height: 20px; } .tide-track svg { width: 100%; height: 100%; display: block; } /* tide-strength arrows + barometer gauge riding the water row */ .tide-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); line-height: 0; cursor: help; } .tide-mark.baro-steady { left: auto; right: 1px; transform: translateY(-50%); } .tide-mark svg { display: block; } .grid-gutter { flex: 0 0 var(--grid-gutter); width: var(--grid-gutter); } .sun-row { display: flex; height: 16px; margin-top: 3px; } .sun-track { position: relative; flex: 1; height: 100%; } .sun-track .sun-mark { position: absolute; top: 0; transform: translateX(-50%); line-height: 0; pointer-events: none; } .sun-track .sun-mark svg { display: block; } /* solunar feed marks on the offshore timing axis: a tall amber tick (major) * and a fainter one (minor), under the sun icons */ .sun-track .sol-tick { position: absolute; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); border-radius: 1px; pointer-events: none; } .sun-track .sol-tick.major { background: var(--accent); } .sun-track .sol-tick.minor { background: var(--accent); opacity: .42; } /* the offshore 'When to go' board — wider label gutter (text labels, not a * single fish icon) propagates to the tide/sun/hour rows so they stay aligned */ #offshoreTiming { --grid-gutter: 64px; margin-bottom: 12px; } .timing-head { font-size: .9rem; color: var(--accent); margin: 0 0 6px; } .fish-row.timing-row { cursor: default; height: 30px; margin-bottom: 3px; } .timing-row .fish-strip { height: 26px; border-radius: 5px; } .timing-label { display: flex; align-items: center; gap: 4px; text-align: left; line-height: 1; font-size: .8rem; color: var(--dim); white-space: nowrap; } .timing-cap { margin-top: 6px; } .off-bite { margin-top: 6px; } .ment-pill { font-size: .66rem; font-weight: 800; color: var(--accent); white-space: nowrap; vertical-align: middle; } .timing-row .grid-rgutter { display: flex; align-items: center; justify-content: center; } .timing-why { font-size: 13px; color: var(--dim); cursor: pointer; line-height: 1; } .timing-why:hover { transform: scale(1.2); color: var(--accent); } .timing-info { margin-top: 4px; } .off-bait-toggle { display: flex; margin-bottom: 8px; } /* satellite tile */ .sat-img { display: block; width: 100%; max-width: 480px; margin: 0 auto; border-radius: 10px; border: 1px solid var(--card-edge); background: var(--bg); } .sat-cap { margin: 6px 0 2px; } .sat-links a { color: var(--accent); text-decoration: none; } .sat-links a:hover { text-decoration: underline; } .timing-cap .sol-key { display: inline-block; width: 2px; height: .8em; vertical-align: -1px; margin: 0 1px; background: var(--accent); border-radius: 1px; } .timing-cap .sol-key.minor { opacity: .42; } .heatmap-hours { display: flex; height: 14px; color: var(--dim); font-size: .75rem; margin-top: 3px; } .hour-track { position: relative; flex: 1; height: 100%; } /* each label centered on its true hour position (i/8 of the day strip) */ .hour-track span { position: absolute; transform: translateX(-50%); white-space: nowrap; } .hour-track span:nth-child(1) { left: 0; transform: none; } .hour-track span:nth-child(2) { left: 12.5%; } .hour-track span:nth-child(3) { left: 25%; } .hour-track span:nth-child(4) { left: 37.5%; } .hour-track span:nth-child(5) { left: 50%; } .hour-track span:nth-child(6) { left: 62.5%; } .hour-track span:nth-child(7) { left: 75%; } .hour-track span:nth-child(8) { left: 87.5%; } .hour-track span:nth-child(9) { display: none; } /* tide */ #tideChart svg { width: 100%; height: auto; display: block; } .tide-list { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: .92rem; } .tide-list .ev b { color: var(--accent); } .tide-list .ev span { color: var(--dim); } /* solunar + weather tables */ table { width: 100%; border-collapse: collapse; font-size: .93rem; } td, th { padding: 4px 6px; text-align: left; } th { color: var(--dim); font-weight: 600; } tr + tr td { border-top: 1px solid var(--card-edge); } /* the current hour in the hourly weather table */ #weatherInfo tr.now td { background: rgba(255, 179, 64, .12); } #weatherInfo tr.now td:first-child { color: var(--accent); font-weight: 600; } /* 3h/1h toggle + a scroll box so the hourly list doesn't stretch the card */ .wx-step { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .wx-group { display: inline-flex; flex: 0 0 auto; } .wx-toggle { margin-left: auto; } .wx-scroll { max-height: 320px; overflow-y: auto; } .wx-scroll th { position: sticky; top: 0; z-index: 1; background: var(--card); /* keep the header readable over scrolling rows */ } .pill { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: .8rem; font-weight: 600; } .pill.major { background: var(--accent); color: #14202e; } .pill.minor { background: var(--accent-dim); color: #14202e; } .pill.open { background: var(--good); color: #0d2417; } .pill.closed { background: var(--bad); color: #2e0d0d; } .pill.cr { background: transparent; border: 1px solid var(--accent); color: var(--accent); } .pill.frank { background: linear-gradient(100deg, #d23636 45%, #2d5bd1 55%); color: #fff; } .catfish-row td { transition: opacity .4s; color: var(--dim); font-style: italic; } .catfish-row.fade-out td { opacity: 0; } .fine-print { color: var(--dim); font-size: .8rem; margin: 8px 0 0; } .fine-print a, #regsInfo a { color: var(--accent); text-decoration: none; } #regsInfo p { margin: 4px 0; } .fine-print a:hover, #regsInfo a:hover { text-decoration: underline; } .bait-board .eaters svg { width: 20px; height: 12px; vertical-align: middle; margin-left: 1px; } .bait-board .eaters { white-space: nowrap; color: var(--dim); } .bait-board:empty { display: none; } .bait-watch { margin: 8px 0 2px; font-size: .9rem; color: var(--text); } .bait-watch b { color: var(--accent); } .chip { display: inline-block; background: var(--bg); border: 1px solid var(--card-edge); border-radius: 99px; padding: 1px 9px; margin: 2px 4px 2px 0; font-size: .85rem; } .adv-line { margin: 2px 0 8px; font-size: .9rem; } .chip.adv { border-color: var(--accent-dim); color: var(--accent); } /* per-day filter: uniform single-letter chips */ .mode-pill.day-pill { min-width: 2.1em; padding: 4px 6px; text-align: center; } /* swimming safety */ .swim-row { display: flex; gap: 9px; align-items: baseline; margin: 6px 0; font-size: .95rem; } .swim-ico { flex: none; width: 1.3em; text-align: center; } .swim-row.swim-bad { color: #ffb9b9; } .swim-row.swim-warn { color: var(--accent); } .sub.swim-good { color: var(--good); } .sub.swim-warn { color: var(--accent); } .sub.swim-bad { color: var(--bad); } .bait-board .via { color: var(--accent); text-decoration: none; font-size: .85rem; margin-left: 4px; } .bait-board .via:hover { text-decoration: underline; } .install-line { text-align: center; margin: 24px 0 0; } .install-btn { background: var(--accent); color: #14202e; border: none; border-radius: 99px; padding: 9px 18px; font-size: .95rem; font-weight: 700; cursor: pointer; } .install-btn:hover { filter: brightness(1.08); } .install-tip { display: block; margin-top: 8px; color: var(--dim); font-size: .85rem; } .install-tip b { color: var(--text); } footer { text-align: center; color: var(--dim); font-size: .8rem; margin-top: 24px; } footer a { color: var(--dim); } /* ad slots stay invisible until real ad code lands in them */ .ad-slot { margin: 0 0 14px; text-align: center; } .ad-slot:not(:has(ins, iframe, script)) { display: none; } /* phones — this is where the site actually lives */ @media (max-width: 540px) { h1 { font-size: 1.9rem; } .masthead { gap: 8px; } .masthead .fish svg { max-width: 21vw; } .controls .inlet-search { flex-basis: 100%; max-width: none; } .inlet-toggle button { font-size: .92rem; padding: 9px 0; } td, th { padding: 3px 4px; font-size: .85rem; } .card { padding: 11px; } .species-lane .sp svg { width: 28px; } .now-score { font-size: 2.1rem; min-width: 86px; } } /* ---- bite alerts ---- */ .alert-status { margin: 4px 0 8px; font-size: .92rem; } .alert-status .ok { color: #7fd98f; } .tpl-list { margin-bottom: 8px; } .tpl-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); flex-wrap: wrap; } .tpl-row:last-child { border-bottom: none; } .tpl-name { font-weight: 600; } .tpl-status { font-size: .82rem; color: var(--muted); margin-left: auto; } .tpl-toggle input { accent-color: #2d8a4e; } .builder { margin-top: 8px; padding: 10px; border: 1px dashed rgba(255,255,255,.15); border-radius: 10px; } .b-step { margin: 7px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .b-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); min-width: 118px; } .b-step .mode-pill { border-radius: 99px; border-left: 1px solid #234; margin: 1px; } .b-name { background: rgba(0,0,0,.25); border: 1px solid #234; border-radius: 8px; color: var(--text); padding: 6px 10px; font: inherit; flex: 1 1 140px; min-width: 0; } .install-btn.small { font-size: .85rem; padding: 6px 12px; } .tpl-detail { flex-basis: 100%; display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 4px 0 4px 28px; padding: 8px 10px; font-size: .85rem; background: rgba(0,0,0,.18); border-radius: 8px; } .tpl-detail .d-key { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; } .install-btn.muted { background: #2c3b49; color: var(--text); } /* ---- collapsible cards ---- */ body.app main .card > h2 { cursor: pointer; } body.app main .card > h2::after { content: '▾'; float: right; color: var(--muted); font-size: .75em; padding: 2px 0 0 10px; } body.app main .card.collapsed > h2::after { content: '▸'; } main .card.collapsed > h2 { margin-bottom: 0; } main .card.collapsed > *:not(h2) { display: none !important; } #davesCard .daves-bet { margin-top: 0; } /* ---- headline variants ---- */ .headline-body { margin-top: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--card-edge); font-size: .95rem; } .headline-body.daves-bet { margin-top: 0; } .headline-warn { border-color: #a8392b; background: rgba(220, 70, 50, .08); } .headline-warn b { color: #ff8d7a; } .headline-warn a { color: #ff8d7a; } .headline-season { border-color: #2d6e96; background: rgba(70, 140, 220, .08); } .headline-season b { color: #7fc4ff; } .headline-beach { border-color: #b08c2e; background: rgba(255, 214, 90, .08); } .headline-beach b { color: #ffd66e; } .headline-pub { border-color: #8a6f2e; background: rgba(255, 200, 80, .07); } .headline-pub b { color: var(--accent); } .headline-pub a { color: var(--accent); } /* ---- personal report card ---- */ .report-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); flex-wrap: wrap; } .report-row:last-of-type { border-bottom: none; } .report-row svg { width: 26px; height: 15px; flex: none; } .report-meta { margin-top: 8px; font-size: .9rem; color: var(--muted); } #reportCard { border-color: var(--accent-dim); } .water-now { color: #7fc4ff; }