/* OR Bass Waters — "Sonar" design, shared by the home and lake pages. Two themes on : dark (night) and light (day). The server picks one from Oregon sunrise/sunset; the toggle overrides it for the rest of the browser session. */ :root, [data-theme="dark"] { --bg: #03111a; --panel: #061c28; --line: #0e3342; --accent: #4fe3f0; --accent-dim: #2a8d99; --amber: #ffb547; --green: #5cf29a; --red: #ff6b6b; --text: #cfe9ee; --muted: #5f8793; --head: #e8fbff; --on-accent: #03111a; --glow: rgba(79, 227, 240, .45); --glow-head: rgba(79, 227, 240, .35); --glow-big: rgba(79, 227, 240, .5); --halo: rgba(79, 227, 240, .13); --ring: rgba(79, 227, 240, .045); --scan: rgba(79, 227, 240, .025); --spark-fill: rgba(79, 227, 240, .14); --shadow: none; --cta-from: #4fe3f0; --cta-to: #2bb8d4; --cta-text: #03111a; --cta-sub: rgba(3, 17, 26, .7); --cta-icon-bg: rgba(3, 17, 26, .14); --cta-shadow: 0 0 0 1px rgba(79, 227, 240, .5), 0 0 28px rgba(79, 227, 240, .35); --cta-shadow-hover: 0 0 0 1px rgba(79, 227, 240, .7), 0 0 36px rgba(79, 227, 240, .5); --chart-grid: rgba(79, 227, 240, .08); --chart-tip-bg: #0b2b38; --chart-tip-text: #e8fbff; --chart-fill: .3; color-scheme: dark; } [data-theme="light"] { --bg: #eaf4f7; --panel: #ffffff; --line: #cfe2e8; --accent: #0a8fa3; --accent-dim: #5b9aa8; --amber: #c77700; --green: #0f8f55; --red: #d6433a; --text: #23434f; --muted: #6f8e98; --head: #0b2a36; --on-accent: #ffffff; --glow: transparent; --glow-head: transparent; --glow-big: transparent; --halo: rgba(10, 143, 163, .12); --ring: rgba(10, 143, 163, .07); --scan: rgba(10, 143, 163, .03); --spark-fill: rgba(10, 143, 163, .12); --shadow: 0 6px 18px -12px rgba(11, 42, 54, .35); --cta-from: #0a8fa3; --cta-to: #0b6f8a; --cta-text: #ffffff; --cta-sub: rgba(255, 255, 255, .8); --cta-icon-bg: rgba(255, 255, 255, .18); --cta-shadow: 0 10px 24px -10px rgba(10, 111, 138, .7); --cta-shadow-hover: 0 14px 28px -10px rgba(10, 111, 138, .85); --chart-grid: rgba(11, 42, 54, .07); --chart-tip-bg: #0b2a36; --chart-tip-text: #ffffff; --chart-fill: .18; color-scheme: light; } :root { --chart-level: var(--accent); --chart-temp: var(--amber); --chart-text: var(--muted); --chart-font: "IBM Plex Mono", monospace; --chart-tension: 0; --chart-width: 2; --chart-radius: 3; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font: 14px/1.4 "IBM Plex Mono", ui-monospace, monospace; min-height: 100vh; -webkit-font-smoothing: antialiased; background-image: radial-gradient(circle at 50% -20%, var(--halo), transparent 55%), repeating-radial-gradient(circle at 50% -20%, transparent 0 38px, var(--ring) 38px 39px), linear-gradient(var(--scan) 1px, transparent 1px); background-size: auto, auto, 100% 4px; background-attachment: fixed; transition: background-color .3s ease, color .3s ease; } a { color: inherit; text-decoration: none; } .icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; } .wrap { max-width: 740px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 24px max(14px, env(safe-area-inset-left)); } /* ---------- Header ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; } .tag { font-size: 11px; letter-spacing: .22em; color: var(--accent-dim); text-transform: uppercase; } .theme-toggle { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--accent); font: 600 11px "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: var(--shadow); transition: border-color .15s ease; } .theme-toggle:hover { border-color: var(--accent-dim); } .theme-toggle .icon { width: 15px; height: 15px; } [data-theme="dark"] .theme-toggle .to-dark, [data-theme="light"] .theme-toggle .to-light { display: none; } h1 { /* Sized so "OREGON BASS WATERS" stays on one line: the text is ~11.4× its font size wide, and the space is the viewport minus 28px of padding. */ font: 700 clamp(22px, calc(8.4vw - 2.5px), 46px)/1 "Chakra Petch", sans-serif; letter-spacing: .02em; text-transform: uppercase; margin: 6px 0 10px; color: var(--head); text-shadow: 0 0 24px var(--glow-head); } h1 b { color: var(--accent); font-weight: 700; } .status { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; } .status .live { color: var(--green); } .status .live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 7px; box-shadow: 0 0 10px var(--green); animation: blink 1.6s steps(2) infinite; } @keyframes blink { 50% { opacity: .25; } } .cta { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; margin: 18px 0 26px; padding: 14px 16px; border-radius: 6px; background: linear-gradient(120deg, var(--cta-from), var(--cta-to)); color: var(--cta-text); box-shadow: var(--cta-shadow); transition: transform .15s ease, box-shadow .15s ease; } /* slow light sweep across the button */ .cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 5s ease-in-out 1.2s infinite; pointer-events: none; } @keyframes sheen { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } } .cta:hover { transform: translateY(-1px); box-shadow: var(--cta-shadow-hover); } .cta:active { transform: translateY(0); } .cta .icon { width: 22px; height: 22px; } .cta > .icon:first-child { padding: 7px; width: 36px; height: 36px; border-radius: 6px; background: var(--cta-icon-bg); } .cta strong { font: 700 16px/1.15 "Chakra Petch", sans-serif; letter-spacing: .06em; text-transform: uppercase; display: block; } .cta small { color: var(--cta-sub); font-size: 11px; } .cta .go { margin-left: auto; } /* ---------- Home: water cards ---------- */ section { margin-bottom: 24px; } h2 { display: flex; align-items: center; gap: 10px; font: 600 13px/1 "Chakra Petch", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-dim); margin: 0 2px 10px; } h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); } h2 .n { color: var(--muted); } .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 6px; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; } .row:hover { border-color: var(--accent-dim); } .row:active { transform: scale(.99); } .name { font: 600 17px/1.2 "Chakra Petch", sans-serif; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .meta { font-size: 11.5px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; } .meta .t { color: var(--amber); } .meta .stale { color: var(--red); } .info { min-width: 0; } .val { text-align: right; } .lvl { font: 600 clamp(30px, 9vw, 36px)/1 "IBM Plex Mono", monospace; color: var(--accent); text-shadow: 0 0 14px var(--glow); letter-spacing: -.03em; } .lvl small { font-size: 12px; color: var(--accent-dim); margin-left: 3px; letter-spacing: .04em; text-shadow: none; } .chg { font-size: 12px; font-weight: 600; display: inline-block; margin-top: 6px; } .chg .arr { font-size: 8px; margin-right: 4px; } .val .chg { font-size: 15px; margin-top: 8px; } .val .chg .arr { font-size: 10px; } .chg.up { color: var(--green); } .chg.down { color: var(--red); } .chg.flat { color: var(--muted); } .trend { margin-top: 8px; width: 100%; max-width: 180px; } .spark { display: block; width: 100%; height: auto; overflow: visible; } .spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .spark-fill { fill: var(--spark-fill); } .spark-dot { fill: var(--accent); } [data-theme="dark"] .spark-line { filter: drop-shadow(0 0 3px rgba(79, 227, 240, .5)); } .trend-lbl { font-size: 10px; letter-spacing: .06em; color: var(--muted); margin-top: 2px; } .row.is-stale { opacity: .55; } footer { text-align: center; color: var(--muted); font-size: 11px; letter-spacing: .06em; padding: 10px 0 20px; } /* ---------- Lake page ---------- */ .back { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-dim); font-size: 12px; letter-spacing: .12em; min-height: 36px; } .back .icon { width: 14px; height: 14px; } .lake h1 { font-size: clamp(32px, 10vw, 52px); margin: 4px 0 6px; } .stamp { font-size: 12px; color: var(--muted); } .readout { position: relative; margin: 18px 0 12px; padding: 18px; border: 1px solid var(--line); background: var(--panel); border-radius: 4px; box-shadow: var(--shadow); } .readout::before, .readout::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent); } .readout::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .readout::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .readout .k { font-size: 11px; letter-spacing: .2em; color: var(--accent-dim); } .big { font: 600 clamp(54px, 18vw, 86px)/1 "IBM Plex Mono", monospace; color: var(--accent); text-shadow: 0 0 28px var(--glow-big); letter-spacing: -.04em; margin: 6px 0; } .big small { font-size: 16px; color: var(--accent-dim); letter-spacing: .1em; margin-left: 6px; text-shadow: none; } .readout .chg { font-size: 13px; margin-top: 0; } .track { position: relative; height: 6px; margin: 16px 0 6px; background: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 6px); } .track i { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform: translate(-50%, -50%); } .track-lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; } .tile { padding: 12px 14px; border: 1px solid var(--line); background: var(--panel); border-radius: 4px; box-shadow: var(--shadow); } .tile .k { font-size: 10.5px; letter-spacing: .18em; color: var(--muted); } .tile .v { font: 600 26px/1.1 "IBM Plex Mono", monospace; margin-top: 4px; } .tile .v small { font-size: 11px; color: var(--muted); margin-left: 3px; } .tile.temp .v { color: var(--amber); } .panel { border: 1px solid var(--line); background: var(--panel); border-radius: 4px; padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow); } .panel h2 { margin: 0 0 12px; } .panel h2::after { display: none; } .ranges { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; } .ranges::-webkit-scrollbar { display: none; } .ranges button { flex: none; font: 600 11px "IBM Plex Mono", monospace; letter-spacing: .1em; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 3px; min-height: 32px; padding: 0 10px; cursor: pointer; } .ranges button.is-active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } .js-custom { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; font-size: 11px; color: var(--muted); } .js-custom[hidden] { display: none; } .js-custom label { display: grid; gap: 4px; flex: 1 1 130px; } .js-custom input { font: 14px "IBM Plex Mono", monospace; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 3px; min-height: 38px; padding: 0 8px; } .js-apply { font: 600 12px "IBM Plex Mono", monospace; color: var(--on-accent); background: var(--accent); border: 0; border-radius: 3px; min-height: 38px; padding: 0 16px; cursor: pointer; } .chart { position: relative; height: 240px; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { padding: 9px 4px; text-align: right; border-bottom: 1px dashed var(--line); } th:first-child, td:first-child { text-align: left; } thead th { font-size: 10.5px; letter-spacing: .16em; color: var(--muted); font-weight: 500; } td.l { color: var(--accent); } td.t { color: var(--amber); } td.e { color: var(--muted); } tr.day th { text-align: left; color: var(--accent-dim); font-size: 11px; letter-spacing: .12em; padding-top: 14px; font-weight: 600; } .lake .cta { margin: 16px 0 8px; } @media (max-width: 599px) { .tiles { grid-template-columns: 1fr 1fr; } .tile:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (min-width: 600px) { .lvl { font-size: 40px; } .val .chg { font-size: 16px; } .row { padding: 14px 18px; } .chart { height: 290px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- /panel ---------- */ .panel-page .wrap { max-width: 900px; } .panel-page h1 { font-size: clamp(28px, 8vw, 44px); } .notice { margin: 14px 0; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent-dim); border-radius: 4px; background: var(--panel); font-size: 12.5px; color: var(--text); } .notice.warn { border-left-color: var(--amber); } .notice.good { border-left-color: var(--green); } .notice code, .panel-page code { font: 600 12px "IBM Plex Mono", monospace; color: var(--accent); } .health { margin: 16px 0; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 4px; background: var(--panel); box-shadow: var(--shadow); } .health.warn { border-left-color: var(--amber); } .health.bad { border-left-color: var(--red); } .health-label { font: 700 24px/1.1 "Chakra Petch", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--green); } .health.warn .health-label { color: var(--amber); } .health.bad .health-label { color: var(--red); } .health-detail { margin-top: 4px; font-size: 13px; } .health-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 12px; color: var(--muted); } .health-meta b { color: var(--text); font-weight: 600; } .panel-page .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile.bad .v { color: var(--red); } .tile .v small { font-size: 11px; } .src { padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 4px; background: var(--panel); box-shadow: var(--shadow); } .src.bad { border-left-color: var(--red); } .src.never { border-left-color: var(--muted); } .src-head { display: flex; align-items: center; gap: 10px; } .src .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); flex: none; } .src.bad .dot { background: var(--red); box-shadow: 0 0 8px var(--red); } .src.never .dot { background: var(--muted); box-shadow: none; } .src-name { font: 600 15px "IBM Plex Mono", monospace; color: var(--head); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .src-state { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--green); } .src.bad .src-state { color: var(--red); } .src.never .src-state { color: var(--muted); } .src-waters { font-size: 12px; color: var(--muted); margin: 2px 0 0 19px; } .strip { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; margin: 10px 0 2px; max-width: 360px; } .strip i { height: 14px; border-radius: 2px; background: var(--green); opacity: .85; } .strip i.bad { background: var(--red); opacity: 1; } .src-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; margin-top: 10px; } .src-stats dt { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .src-stats dd { font-size: 13px; color: var(--text); } .src-error { margin-top: 10px; padding: 8px 10px; border-radius: 3px; background: rgba(214, 67, 58, .1); color: var(--red); font-size: 12px; overflow-wrap: anywhere; } .src-error b { font-weight: 600; } .panel-page td.good { color: var(--green); } .panel-page td.bad, .panel-page span.bad { color: var(--red); } .panel-page td .sub { display: block; font-size: 11px; color: var(--amber); } .panel-page tr.stale-row td:first-child { color: var(--red); } .panel-page table td, .panel-page table th { text-align: left; } .panel-page table td:not(:first-child), .panel-page table th:not(:first-child) { padding-left: 10px; } .failures { list-style: none; font-size: 12.5px; } .failures li { padding: 8px 0; border-bottom: 1px dashed var(--line); overflow-wrap: anywhere; } .failures li:last-child { border-bottom: 0; } .failures .when { color: var(--muted); margin-right: 6px; } .failures b { color: var(--head); font-weight: 600; } .failures .err { display: block; color: var(--red); margin-top: 2px; } @media (max-width: 599px) { .runs th:nth-child(4), .runs td:nth-child(4) { display: none; } } @media (min-width: 700px) { .panel-page .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .src-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }