/* ============================================================================ REELCAST — shared design system Mobile-first. Base styles target a 360px phone; breakpoints add density. Order: tokens → base → primitives → chrome → components → responsive ========================================================================== */ /* --- 1. TOKENS ----------------------------------------------------------- */ /* First-light theme. Dark lodge surfaces so the screen still reads at 5 a.m. on the water, photography as the primary visual layer, one warm family: dawn amber leads, a quiet water teal supports — lake, reed and sunrise, never neon. */ :root{ /* surfaces — deep lake-water ink, blue-green charcoal, never pure black */ --bg: oklch(19.5% 0.021 204); --bg-2: oklch(16% 0.018 206); --surface: oklch(24% 0.022 203); --surface-2: oklch(28% 0.024 202); --surface-sunk: oklch(16.5% 0.018 205); --surface-hi: oklch(30% 0.024 202); /* ink — warm bone and cream, never pure white */ --fg: oklch(93.5% 0.013 90); --fg-2: oklch(85% 0.016 88); --muted: oklch(70% 0.020 85); --faint: oklch(55.5% 0.018 82); /* warm-tinted translucent borders read as structure without noise */ --border: oklch(90% 0.03 85 / .10); --border-strong: oklch(90% 0.03 85 / .19); --border-hi: oklch(90% 0.035 85 / .30); /* one action colour — dawn amber */ --accent: oklch(74% 0.130 72); --accent-ink: oklch(85% 0.105 78); --accent-wash: oklch(74% 0.130 72 / .15); --on-accent: oklch(21% 0.045 65); /* attention colour — sunrise amber, reserved for the bite signal */ --signal: oklch(77% 0.155 63); --signal-ink: oklch(87% 0.115 66); --signal-wash: oklch(77% 0.155 63 / .16); --on-signal: oklch(22% 0.05 58); /* supporting colour — muted water teal, quiet secondary details only */ --water: oklch(73% 0.062 200); --water-ink: oklch(81% 0.062 198); --water-wash: oklch(73% 0.062 200 / .16); --on-water: oklch(19% 0.03 205); /* deepest panel — hero and bite card */ --deep: oklch(14.5% 0.021 207); --deep-2: oklch(20% 0.027 203); --on-deep: oklch(93.5% 0.013 90); --on-deep-muted: oklch(72% 0.020 86); /* status — reed green, straw, true red */ --success: oklch(70% 0.100 145); --success-wash: oklch(70% 0.100 145 / .16); --warn: oklch(86% 0.105 96); --warn-wash: oklch(86% 0.105 96 / .14); --danger: oklch(67% 0.180 27); --danger-wash: oklch(67% 0.180 27 / .16); /* type */ --font-display: 'Archivo', 'Avenir Next Condensed', 'Avenir Next', 'Helvetica Neue', -apple-system, system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace; /* rhythm — soft lodge radii, gentle shadows */ --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-card: 18px; --r-pill: 999px; --pad: 16px; --shadow-card: 0 1px 2px oklch(0% 0 0 / .25), 0 12px 32px -16px oklch(0% 0 0 / .45); --shadow-lift: 0 2px 8px oklch(0% 0 0 / .30), 0 26px 54px -24px oklch(0% 0 0 / .60); --tab-h: 62px; } /* --- 2. BASE ------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background: radial-gradient(130% 70% at 50% 0%, var(--deep-2) 0%, var(--bg) 55%, var(--bg-2) 100%) no-repeat, var(--bg); background-attachment: fixed; color:var(--fg); font:400 16px/1.55 var(--font-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; line-height:1.12; letter-spacing:-.015em; } h1{ font-size:clamp(26px,6.4vw,34px); letter-spacing:-.022em; } h2{ font-size:clamp(19px,4.6vw,23px); } h3{ font-size:17px; letter-spacing:-.008em; } p{ margin:0; text-wrap:pretty; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; } img{ max-width:100%; display:block; } :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; } /* --- 3. PRIMITIVES ------------------------------------------------------- */ .eyebrow{ font-family:var(--font-ui); font-size:10.5px; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); font-weight:500; } .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; } .mut{ color:var(--muted); } .sm{ font-size:13px; letter-spacing:.01em; } .xs{ font-size:11.5px; letter-spacing:.018em; } .hide{ display:none !important; } .ic{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .ic-sm{ width:15px; height:15px; } .ic-lg{ width:22px; height:22px; } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:var(--pad); position:relative; } .card-hd{ display:flex; align-items:center; gap:8px; margin-bottom:12px; } .card-hd h2,.card-hd h3{ margin-right:auto; } .card-hd .ic{ color:var(--water); } .pill{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; letter-spacing:.03em; white-space:nowrap; background:var(--surface-sunk); color:var(--fg-2); } .pill.ok{ background:var(--success-wash); color:var(--success); } .pill.warn{ background:var(--warn-wash); color:var(--warn); } .pill.bad{ background:var(--danger-wash); color:var(--danger); } .pill.unk{ background:var(--surface-sunk); color:var(--muted); } .pill.acc{ background:var(--water-wash); color:var(--water-ink); } .pill.sig{ background:var(--signal-wash); color:var(--signal-ink); } /* the FMZ badge — a zone number is the key to the whole regulation book, so it reads as a number, not as another grey chip */ .pill.big{ padding:7px 14px; font-size:16px; font-weight:700; letter-spacing:.01em; font-family:var(--font-mono); background:var(--signal-wash); color:var(--signal-ink); } .pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:46px; padding:0 18px; border-radius:var(--r-pill); border:1px solid transparent; background:var(--accent); color:var(--on-accent); font-weight:650; font-size:15px; letter-spacing:.005em; cursor:pointer; transition:transform .12s ease, filter .15s ease; } .btn:active{ transform:translateY(2px); } .btn:hover{ filter:brightness(1.06); } .btn.ghost{ background:oklch(94% 0.02 90 / .07); color:var(--fg); border-color:var(--border-strong); } .btn.quiet{ background:var(--surface-sunk); color:var(--fg-2); } .btn.full{ width:100%; } .btn.sm{ min-height:38px; font-size:13.5px; padding:0 14px; } .chiprow{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 0 4px; margin:0 calc(var(--pad) * -1); padding-inline:var(--pad); } .chiprow::-webkit-scrollbar{ display:none; } .chip{ flex:none; min-height:38px; padding:0 14px; border-radius:var(--r-pill); border:1px solid var(--border-strong); background:var(--surface); color:var(--fg-2); font-size:13.5px; font-weight:550; cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .chip[aria-pressed="true"],.chip.on{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); } .seg{ display:flex; background:var(--surface-sunk); border-radius:var(--r-pill); padding:3px; gap:2px; } .seg button{ flex:1; min-height:36px; border:0; background:transparent; border-radius:var(--r-pill); font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; letter-spacing:.01em; } .seg button[aria-pressed="true"]{ background:var(--surface-2); color:var(--fg); box-shadow:0 1px 3px oklch(0% 0 0 / .35); } .field{ display:block; margin-bottom:12px; } .field > span{ display:block; font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--muted); margin-bottom:6px; } input,select,textarea{ color-scheme:dark; width:100%; min-height:46px; padding:11px 13px; border-radius:var(--r); border:1px solid var(--border-strong); background:var(--surface); color:var(--fg); font:inherit; font-size:15px; } textarea{ min-height:84px; resize:vertical; } input[type="range"]{ min-height:auto; padding:0; border:0; background:transparent; accent-color:var(--accent); } .stack > * + *{ margin-top:14px; } .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .divider{ height:1px; background:var(--border); margin:14px 0; border:0; } /* --- 4. APP CHROME ------------------------------------------------------- */ .appbar{ position:sticky; top:0; z-index:60; background:oklch(16% 0.018 206 / .85); backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px); border-bottom:1px solid var(--border); padding:calc(env(safe-area-inset-top) + 10px) var(--pad) 10px; } .appbar-row{ display:flex; align-items:center; gap:10px; } .spotbtn{ display:flex; align-items:center; gap:8px; min-height:40px; padding:4px 12px 4px 10px; border-radius:var(--r-pill); border:1px solid var(--border-strong); background:var(--surface); cursor:pointer; max-width:min(62vw,340px); } .spotbtn .ic{ color:var(--water); } .spotbtn b{ font-size:14.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .iconbtn{ width:40px; height:40px; border-radius:var(--r-pill); border:1px solid var(--border-strong); background:var(--surface); display:grid; place-items:center; cursor:pointer; flex:none; } .iconbtn.spin .ic{ animation:spin .9s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .syncline{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:11px; color:var(--muted); font-family:var(--font-ui); letter-spacing:.06em; } .syncline .dot{ width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px var(--success-wash); } .syncline.stale .dot{ background:var(--warn); box-shadow:0 0 0 3px var(--warn-wash); } .syncline.off .dot{ background:var(--danger); box-shadow:0 0 0 3px var(--danger-wash); } .main{ padding:16px var(--pad) calc(var(--tab-h) + env(safe-area-inset-bottom) + 28px); max-width:1180px; margin:0 auto; } /* measured by js/app.js on mount so the map screen can fill exactly what is left; the fallback covers the brandmark row plus the app bar */ :root{ --appbar-h:108px; } .pagehd{ margin-bottom:16px; } .pagehd h1{ margin-top:2px; } .pagehd p{ color:var(--muted); font-size:14px; margin-top:6px; max-width:60ch; } .tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; background:oklch(14.5% 0.019 206 / .90); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-top:1px solid var(--border); padding:6px 4px calc(env(safe-area-inset-bottom) + 6px); } .tabbar a{ flex:1; min-width:0; min-height:50px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.02em; border-radius:12px; padding:4px 2px; } .tabbar a[aria-current="page"]{ color:var(--accent-ink); background:var(--accent-wash); } .tabbar a .ic{ width:21px; height:21px; } .offbanner{ display:none; align-items:center; gap:8px; padding:9px var(--pad); background:var(--warn-wash); color:var(--warn); font-size:12.5px; font-weight:600; border-bottom:1px solid oklch(86% .105 96 / .3); } body.is-offline .offbanner{ display:flex; } /* --- 5. COMPONENTS ------------------------------------------------------- */ /* bite gauge */ .bite{ background:linear-gradient(168deg, var(--deep) 0%, oklch(21% .032 204) 72%, oklch(26% .045 80) 100%); color:var(--on-deep); border-radius:var(--r-lg); padding:20px var(--pad) 18px; border:1px solid var(--border-strong); box-shadow:var(--shadow-lift); overflow:hidden; position:relative; } .bite::after{ content:""; position:absolute; inset:auto -30% -70% -30%; height:150px; border-radius:50%; background:radial-gradient(closest-side, oklch(76% .12 70 / .28), transparent 70%); pointer-events:none; } .bite-top{ display:flex; align-items:center; gap:16px; } .gauge{ width:104px; height:104px; flex:none; position:relative; display:grid; place-items:center; } .gauge svg{ position:absolute; inset:0; transform:rotate(-90deg); } .gauge .track{ stroke:oklch(94% .02 90 / .13); } .gauge .val{ stroke:var(--signal); stroke-linecap:round; transition:stroke-dasharray .7s cubic-bezier(.4,0,.2,1); } .gauge b{ font-family:var(--font-mono); font-size:31px; font-weight:600; line-height:1; letter-spacing:-.03em; } .gauge span{ font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--on-deep-muted); margin-top:3px; } .bite-verdict h2{ font-size:23px; letter-spacing:-.018em; } .bite-verdict p{ color:var(--on-deep-muted); font-size:13.5px; margin-top:5px; } .bite-why{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; } .why{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--r-pill); background:oklch(94% .02 90 / .09); border:1px solid oklch(94% .02 90 / .11); font-size:11.5px; letter-spacing:.01em; } .why b{ font-family:var(--font-mono); font-weight:600; } .why.up{ color:oklch(85% .10 140); } .why.down{ color:oklch(80% .11 40); } /* stat tiles */ .tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .tile{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:12px 13px; box-shadow:var(--shadow-card); } .tile .eyebrow{ display:flex; align-items:center; gap:5px; } .tile .v{ font-family:var(--font-mono); font-size:24px; font-weight:600; letter-spacing:-.03em; margin-top:6px; line-height:1; display:flex; align-items:baseline; gap:3px; } .tile .v i{ font-style:normal; font-size:12px; color:var(--muted); font-weight:500; letter-spacing:0; } .tile .sub{ font-size:11.5px; color:var(--muted); margin-top:5px; letter-spacing:.01em; } .trend{ display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:650; font-family:var(--font-mono); } .trend.up{ color:var(--success); } .trend.down{ color:var(--danger); } .trend.flat{ color:var(--muted); } /* hourly scroller */ .hours{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--pad) * -1); padding:0 var(--pad); } .hours::-webkit-scrollbar{ display:none; } .hour{ flex:none; width:56px; text-align:center; padding:8px 2px; border-radius:12px; } .hour.peak{ background:var(--signal-wash); } .hour .h{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); letter-spacing:.04em; } .hour .t{ font-family:var(--font-mono); font-size:15px; font-weight:600; margin:5px 0 3px; } .hour .arrow{ display:block; margin:4px auto 2px; color:var(--water); } .hour .w{ font-family:var(--font-mono); font-size:11px; color:var(--fg-2); } .hour .g{ font-family:var(--font-mono); font-size:9.5px; color:var(--muted); } .hour .bar{ height:26px; display:flex; align-items:flex-end; justify-content:center; margin-top:6px; } .hour .bar i{ display:block; width:14px; border-radius:3px 3px 0 0; background:var(--water); opacity:.8; } /* generic list rows */ .rows{ display:flex; flex-direction:column; } .row{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--border); text-align:left; background:none; border-left:0; border-right:0; border-top:0; width:100%; cursor:pointer; } .rows .row:last-child{ border-bottom:0; } .row .grow{ min-width:0; flex:1; } .row .name{ display:block; font-weight:600; font-size:15px; letter-spacing:-.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .row .meta{ font-size:12px; color:var(--muted); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; } .row .chev{ color:var(--faint); } /* depth column */ .depthcol{ display:flex; flex-direction:column; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); } /* the band backgrounds are painted light (shallow) to mid (deep) by the page, so the ink must be dark — cream on a 94%-light band was invisible */ .dband{ display:flex; align-items:center; gap:10px; padding:11px 13px; color:oklch(24% 0.03 205); } .dband .d{ font-family:var(--font-mono); font-size:11.5px; width:58px; flex:none; opacity:.85; letter-spacing:.02em; } .dband .t{ font-family:var(--font-mono); font-size:14px; font-weight:600; width:52px; flex:none; } .dband .n{ font-size:12.5px; flex:1; } /* bait cards */ .bait{ border:1px solid var(--border); border-radius:var(--r); padding:13px; background:var(--surface); box-shadow:var(--shadow-card); } .bait-hd{ display:flex; align-items:flex-start; gap:10px; } .bait-hd .rank{ font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--muted); width:20px; padding-top:3px; } .bait h3{ font-size:16px; } .bait .kind{ font-size:11.5px; color:var(--muted); letter-spacing:.02em; margin-top:2px; } .swatches{ display:flex; gap:5px; margin-top:10px; flex-wrap:wrap; } .sw{ display:inline-flex; align-items:center; gap:6px; padding:4px 9px 4px 4px; border-radius:var(--r-pill); background:var(--surface-sunk); font-size:11.5px; font-weight:550; } .sw i{ width:15px; height:15px; border-radius:50%; display:block; border:1px solid oklch(94% .02 90 / .30); } .bait dl{ margin:11px 0 0; display:grid; grid-template-columns:auto 1fr; gap:5px 12px; font-size:12.5px; } .bait dt{ color:var(--muted); font-size:11px; letter-spacing:.07em; text-transform:uppercase; padding-top:2px; } .bait dd{ margin:0; color:var(--fg-2); } .conf{ height:4px; border-radius:2px; background:var(--surface-sunk); overflow:hidden; margin-top:11px; } .conf i{ display:block; height:100%; background:var(--water); border-radius:2px; } /* sheet */ .scrim{ position:fixed; inset:0; background:oklch(24% .03 204 / .5); z-index:200; opacity:0; pointer-events:none; transition:opacity .22s ease; } .scrim.open{ opacity:1; pointer-events:auto; } .sheet{ position:fixed; left:0; right:0; bottom:0; z-index:201; background:var(--surface); border-radius:22px 22px 0 0; max-height:86vh; display:flex; flex-direction:column; transform:translateY(102%); transition:transform .3s cubic-bezier(.32,.72,0,1); box-shadow:0 -12px 44px oklch(0% 0 0 / .6); } .sheet.open{ transform:translateY(0); } .sheet-hd{ padding:14px var(--pad) 10px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; } .sheet-hd h2{ font-size:18px; margin-right:auto; } .sheet-grab{ width:38px; height:4px; border-radius:2px; background:var(--border-strong); margin:8px auto 0; } .sheet-body{ padding:14px var(--pad) calc(env(safe-area-inset-bottom) + 20px); overflow-y:auto; } .toast{ position:fixed; left:50%; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 16px); transform:translate(-50%,14px); z-index:300; background:var(--fg); color:var(--bg); padding:11px 16px; border-radius:var(--r-pill); font-size:13.5px; font-weight:550; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:88vw; text-align:center; } .toast.show{ opacity:1; transform:translate(-50%,0); } .note{ display:flex; gap:9px; padding:11px 13px; border-radius:var(--r); font-size:12.5px; background:var(--surface-2); border:1px solid var(--border); color:var(--fg-2); line-height:1.5; } .note .ic{ color:var(--muted); margin-top:1px; } .note.warn{ background:var(--warn-wash); border-color:oklch(86% .105 96 / .32); color:var(--warn); } .note.warn .ic{ color:var(--warn); } .note b{ font-weight:650; } .src{ font-family:var(--font-mono); font-size:10px; color:var(--faint); letter-spacing:.05em; margin-top:9px; display:block; } .empty{ text-align:center; padding:34px 16px; color:var(--muted); } .empty .ic{ width:30px; height:30px; color:var(--faint); margin:0 auto 10px; } /* --- 6. RESPONSIVE ------------------------------------------------------- */ @media (min-width:560px){ :root{ --pad:22px; } .tiles{ grid-template-columns:repeat(4,1fr); } .sheet{ left:50%; right:auto; width:min(560px,100%); transform:translate(-50%,102%); border-radius:22px 22px 0 0; } .sheet.open{ transform:translate(-50%,0); } } @media (min-width:900px){ .cols{ display:grid; grid-template-columns:1.35fr 1fr; gap:18px; align-items:start; } .cols > .stack{ margin:0; } .main{ padding-top:22px; } } @media (min-width:1024px){ :root{ --tab-h:0px; } body{ padding-left:236px; } .appbar{ padding-inline:28px; } .tabbar{ top:0; right:auto; width:236px; height:100dvh; flex-direction:column; justify-content:flex-start; border-top:0; border-right:1px solid var(--border); padding:78px 14px 20px; gap:3px; background:oklch(15% 0.019 206 / .82); } .tabbar a{ flex:none; flex-direction:row; justify-content:flex-start; gap:12px; font-size:14px; padding:0 14px; min-height:46px; letter-spacing:0; } .tabbar a .ic{ width:19px; height:19px; } .brandmark{ position:fixed; top:0; left:0; width:236px; height:78px; display:flex; align-items:center; gap:9px; padding:0 22px; z-index:71; } .main{ padding-bottom:48px; } .toast{ left:calc(50% + 118px); bottom:26px; } .sheet{ left:calc(50% + 118px); } .sheet.open{ transform:translate(-50%,0); } } @media (max-width:1023px){ .brandmark{ display:none; } } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* nav overflow — Planner + Catch log live in the app bar on phones, and move into the rail once there is room for them */ .only-wide{ display:none !important; } @media (min-width:1024px){ .tabbar a.only-wide{ display:flex !important; } .appbar .only-narrow{ display:none !important; } .tabbar .railgap{ height:14px; } } /* --- 7. SCENE + GLASS (reference-led: photography layer with chips over it) */ .scene{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border-strong); box-shadow:var(--shadow-lift); background:var(--deep); isolation:isolate; } .scene > svg.backdrop{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; } /* The scrim over hero photography. The old ramp fell to 8% opacity across the middle of the frame — which is exactly where the headline sits. Measured against the real hero photos, white text landed at about 2.6:1 contrast on the bright pixels: under the 3:1 WCAG needs for large text, nowhere near the 4.5:1 body copy needs, and unreadable outdoors, which is where this app gets used. These stops were chosen by compositing them over assets/photos/lake.jpg and spot-quinte.jpg and computing the real contrast ratio: the worst 5% of pixels behind the text now sit at 6.6:1, and the single worst pixel at 4.0:1, while the photograph is still clearly a photograph. */ .scene::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, oklch(10% .018 206 / .50) 0%, oklch(10% .018 206 / .44) 25%, oklch(10% .018 206 / .66) 50%, oklch(9% .018 206 / .82) 75%, oklch(9% .018 206 / .94) 100%); } /* Belt and braces for the brightest pixels a photo can throw at the text — a sun glint off water can beat any fixed scrim. */ .scene-body h1, .scene-body .sub, .scene-body .place, .scene-body .callout{ text-shadow:0 1px 14px oklch(8% .018 206 / .55); } .scene-body{ position:relative; z-index:2; padding:18px var(--pad) 16px; display:flex; flex-direction:column; min-height:280px; } .scene-body .spacer{ flex:1; min-height:60px; } .scene h2{ font-size:clamp(22px,5.6vw,29px); letter-spacing:-.022em; color:var(--on-deep); } .scene p{ color:var(--on-deep-muted); font-size:13.5px; margin-top:6px; max-width:44ch; } /* The hero's glass chip row and floating stat strip lived here. Both were removed: every number they showed is repeated in the answer row and the readouts card immediately below the hero. */ /* feeding countdown — the lead readout, as in the reference */ .countdown{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; } .countdown .clockbig{ font-family:var(--font-mono); font-size:clamp(34px,10vw,46px); font-weight:600; letter-spacing:-.045em; line-height:.92; color:var(--on-deep); font-variant-numeric:tabular-nums; } .countdown .cd-meta{ padding-bottom:4px; } .countdown .cd-meta .eyebrow{ color:var(--on-deep-muted); } .countdown .cd-meta b{ display:block; font-family:var(--font-display); font-size:16px; font-weight:600; letter-spacing:-.012em; margin-top:3px; } .pulse{ width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 0 var(--signal); animation:pulse 2.4s ease-out infinite; } @keyframes pulse{ 70%{ box-shadow:0 0 0 9px oklch(77% .155 63 / 0); } 100%{ box-shadow:0 0 0 0 oklch(77% .155 63 / 0); } } /* photo/scene slot inside a normal card */ .scene.sm .scene-body{ min-height:170px; padding:14px; } /* ============================================================================ 8. REFERENCE PASS — serif display, stat strip, waveforms, map pins, search row, lure chips, fish plates, catch cards ========================================================================== */ /* --- 8.1 two-face type system ------------------------------------------- Serif carries place names and page titles (the editorial moments); the condensed sans carries UI labels, buttons and meta. Clear role split, so the two faces never compete for the same job. */ :root{ --font-serif: 'Iowan Old Style', 'Charter', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; --font-ui: 'Archivo', 'Avenir Next Condensed', 'Avenir Next', 'Helvetica Neue', -apple-system, system-ui, sans-serif; } h1, .scene h2, .place{ font-family:var(--font-serif); font-weight:600; letter-spacing:-.018em; } h1{ letter-spacing:-.024em; } .card-hd h2, .card-hd h3, .bait h3, .row .name, .fix h3, .screen h3, h2.ui, h3.ui{ font-family:var(--font-ui); letter-spacing:-.01em; } .place-sub{ font-family:var(--font-ui); font-size:13px; color:var(--muted); letter-spacing:.01em; } /* --- 8.3 waveform sparkline beside a big number (refs 1 + 2) ------------- */ .wavestat{ display:flex; align-items:center; gap:14px; } .wavestat .wv-num{ font-family:var(--font-mono); font-size:27px; font-weight:600; letter-spacing:-.035em; line-height:1; } .wavestat .wv-num i{ font-style:normal; font-size:12px; color:var(--muted); font-weight:500; letter-spacing:0; } .wavestat .wv-lbl{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:6px; } .wavestat svg{ flex:1; min-width:0; height:38px; overflow:visible; } /* --- 8.4 search + filter row (ref 1) ------------------------------------- */ .searchrow{ display:flex; gap:9px; align-items:center; } .searchfield{ flex:1; display:flex; align-items:center; gap:9px; min-height:46px; padding:0 15px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border-strong); } .searchfield .ic{ color:var(--muted); flex:none; } .searchfield input{ border:0; background:none; min-height:auto; padding:0; font-size:15px; color:var(--fg); width:100%; } .searchfield input::placeholder{ color:var(--faint); } .searchfield input:focus{ outline:none; } .greeting{ margin-bottom:14px; } .greeting .hi{ font-family:var(--font-ui); font-size:15px; color:var(--muted); letter-spacing:.005em; } .greeting h1{ font-size:clamp(25px,6.2vw,32px); margin-top:2px; } /* --- 8.6 circular lure chips (ref 3) ------------------------------------- */ .lurechips{ display:flex; gap:10px; flex-wrap:wrap; } .lurechip{ display:flex; flex-direction:column; align-items:center; gap:6px; width:70px; } .lurechip .disc{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--water-wash); border:1px solid oklch(73% .062 200 / .35); color:var(--water-ink); } .lurechip.sig .disc{ background:var(--signal-wash); border-color:oklch(77% .155 63 / .32); color:var(--signal-ink); } .lurechip span{ font-size:10px; text-align:center; color:var(--muted); line-height:1.25; letter-spacing:.01em; } /* --- 8.7 species plates (ref 3 "popular catches") ------------------------ */ .fishplates{ display:flex; gap:16px; flex-wrap:wrap; } .fishplate{ display:flex; flex-direction:column; gap:7px; align-items:flex-start; width:96px; } .fishplate svg{ width:96px; height:44px; color:var(--fg-2); } .fishplate b{ font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600; } .chip .fishmini{ width:26px; height:14px; margin-right:2px; color:currentColor; } /* --- 8.8 catch cards (ref 2 "my fishbox") -------------------------------- */ .catchcard{ display:flex; gap:13px; align-items:center; padding:13px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); } .catchcard .plate{ width:74px; height:52px; flex:none; border-radius:12px; background:var(--surface-sunk); display:grid; place-items:center; color:var(--water); } .catchcard .plate svg{ width:64px; height:34px; } .catchcard .grow{ min-width:0; flex:1; } .catchcard .sp{ display:block; font-family:var(--font-serif); font-size:16.5px; font-weight:600; letter-spacing:-.012em; } .catchcard .mt{ font-size:11.5px; color:var(--muted); margin-top:3px; display:flex; gap:7px; flex-wrap:wrap; } .catchcard .len{ font-family:var(--font-mono); font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--signal-ink); } /* --- 8.9 depth scrubber (ref 2 lbs picker) ------------------------------- */ .scrub{ display:flex; align-items:baseline; justify-content:center; gap:18px; padding:6px 0 2px; } .scrub span{ font-family:var(--font-mono); font-size:13px; color:var(--faint); letter-spacing:-.01em; } .scrub b{ font-family:var(--font-mono); font-size:26px; font-weight:600; letter-spacing:-.035em; color:var(--fg); } .scrub b i{ font-style:normal; font-size:12px; color:var(--muted); margin-left:2px; } /* --- 8.10 mono coordinate readout (ref 2) -------------------------------- */ .coords{ font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; color:var(--water-ink); display:inline-flex; align-items:center; gap:7px; } .coords button{ background:none; border:0; color:var(--muted); cursor:pointer; padding:2px; display:grid; place-items:center; } @media (min-width:560px){ .fishplate, .fishplate svg{ width:112px; } } /* ============================================================================ 9. TRIP PLANNING + ASSISTANT ========================================================================== */ /* --- 9.1 day comparison strip ------------------------------------------- */ /* The "BEST" crown sits 7px above its card, and a 2px top pad meant the overflow scroller sliced the top off it. */ .daystrip{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--pad) * -1); padding:12px var(--pad) 6px; } .daystrip::-webkit-scrollbar{ display:none; } .daycard{ flex:none; width:112px; padding:13px 12px; border-radius:var(--r); cursor:pointer; border:1px solid var(--border); background:var(--surface); text-align:left; color:var(--fg); position:relative; transition:border-color .15s, background .15s; font-family:var(--font-ui); /* buttons do not inherit the page font */ } .daycard[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-wash); } .daycard .dn{ display:block; font-size:13px; font-weight:650; letter-spacing:-.005em; } .daycard .dt{ display:block; font-size:10.5px; color:var(--muted); margin-top:2px; letter-spacing:.02em; } .daycard .pk{ font-family:var(--font-mono); font-size:27px; font-weight:600; letter-spacing:-.04em; margin-top:10px; line-height:1; display:block; } .daycard .pk.hot{ color:var(--signal); } .daycard .pk.ok{ color:var(--water-ink); } .daycard .wd{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-top:7px; letter-spacing:.02em; } .daycard .crown{ position:absolute; top:-7px; right:8px; background:var(--signal); color:var(--on-signal); font-size:9px; font-weight:700; letter-spacing:.07em; padding:2px 7px; border-radius:var(--r-pill); } .daybars{ display:flex; gap:2px; height:22px; align-items:flex-end; margin-top:9px; } .daybars i{ flex:1; border-radius:2px 2px 0 0; background:var(--border-strong); display:block; } .daybars i.on{ background:var(--water); } .daybars i.top{ background:var(--signal); } .reco{ display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:var(--r); background:var(--accent-wash); border:1px solid oklch(74% .13 72 / .30); } .reco .ic{ color:var(--accent-ink); margin-top:2px; } .reco b{ display:block; font-family:var(--font-ui); font-size:14.5px; letter-spacing:-.005em; } .reco p{ font-size:12.5px; color:var(--fg-2); margin-top:4px; } /* --- 9.2 assistant ------------------------------------------------------ */ .chat{ display:flex; flex-direction:column; gap:16px; padding:4px 0 12px; } .msg{ display:flex; gap:10px; align-items:flex-start; } .msg.me{ justify-content:flex-end; } .msg .avatar{ width:32px; height:32px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--deep); color:var(--signal); border:1px solid var(--border-strong); } .bubble{ padding:13px 15px; border-radius:18px; max-width:min(86%, 580px); font-size:14.5px; line-height:1.55; text-wrap:pretty; } .msg.bot .bubble{ background:var(--surface); border:1px solid var(--border); border-bottom-left-radius:6px; color:var(--fg); } .msg.me .bubble{ background:var(--accent); color:var(--on-accent); border-bottom-right-radius:6px; font-weight:550; } .bubble ul{ margin:11px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; } .bubble li{ font-size:12.8px; color:var(--fg-2); padding-left:15px; position:relative; line-height:1.5; } .bubble li::before{ content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--accent); } .bubble .caveat{ display:flex; gap:8px; margin-top:12px; padding:9px 11px; border-radius:10px; background:var(--warn-wash); color:var(--warn); font-size:11.5px; line-height:1.45; } .bubble .golink{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:7px 13px; border-radius:var(--r-pill); background:var(--surface-sunk); color:var(--accent-ink); font-size:12.5px; font-weight:600; border:1px solid var(--border); } .bubble .srcline{ display:block; margin-top:10px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.07em; color:var(--faint); text-transform:uppercase; } .typing{ display:inline-flex; gap:4px; align-items:center; padding:4px 2px; } .typing i{ width:6px; height:6px; border-radius:50%; background:var(--faint); display:block; animation:blink 1.2s infinite ease-in-out; } .typing i:nth-child(2){ animation-delay:.18s; } .typing i:nth-child(3){ animation-delay:.36s; } @keyframes blink{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } } .chatdock{ position:sticky; z-index:50; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px); margin:0 calc(var(--pad) * -1); padding:10px var(--pad) 0; background:linear-gradient(180deg, transparent, var(--bg) 26%); } .chatform{ display:flex; gap:9px; align-items:flex-end; background:var(--surface); border:1px solid var(--border-strong); border-radius:24px; padding:6px 6px 6px 16px; box-shadow:var(--shadow-lift); } .chatform textarea{ flex:1; border:0; background:none; resize:none; min-height:34px; max-height:120px; padding:8px 0; font-size:15px; line-height:1.4; color:var(--fg); } .chatform textarea:focus{ outline:none; } .chatform textarea::placeholder{ color:var(--faint); } .chatsend{ width:42px; height:42px; flex:none; border-radius:50%; border:0; cursor:pointer; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; transition:transform .12s, filter .15s; } .chatsend:active{ transform:translateY(2px); } .chatsend[disabled]{ opacity:.4; cursor:default; } @media (min-width:1024px){ .chatdock{ bottom:14px; } } /* --- 9.3 photographic layer -------------------------------------------- A real photo dropped into assets/photos/ paints over the rendered scene. Both carry .backdrop; the wins on DOM order and removes itself when the file is missing, so the scene shows through instead of a broken icon. */ .scene > img.backdrop{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%; display:block; z-index:0; } .thumbwrap{ width:58px; height:42px; flex:none; border-radius:10px; overflow:hidden; border:1px solid var(--border); display:block; background:var(--deep); } .thumbwrap .scenethumb{ width:100%; height:100%; display:block; } /* ============================================================================ 10. HOME — the flagship screen ========================================================================== */ .homehero{ margin:0 calc(var(--pad) * -1); border-radius:0; border-left:0; border-right:0; } .homehero .scene-body{ min-height:min(72svh, 560px); padding:20px var(--pad) calc(var(--pad) + 4px); } .homehero .place{ font-size:clamp(30px,8.6vw,46px); line-height:1.02; letter-spacing:-.03em; color:var(--on-deep); } .homehero .placemeta{ font-family:var(--font-ui); font-size:12.5px; color:var(--on-deep-muted); letter-spacing:.02em; margin-top:7px; } .verdictline{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:16px; } .verdictline .score{ font-family:var(--font-mono); font-size:clamp(46px,13vw,68px); font-weight:600; letter-spacing:-.05em; line-height:.86; color:var(--signal); } /* A bare number means nothing on its own — say what it is, then let the colour carry how good it is. Thresholds match the band words exactly, so a green number can never sit next to the word "Tough". */ .verdictline .scorelab{ display:block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--on-deep-muted); margin-bottom:3px; } .verdictline.s-prime .score, .verdictline.s-good .score{ color:var(--success); } .verdictline.s-fair .score{ color:var(--signal); } .verdictline.s-slow .score{ color:var(--warn); } .verdictline.s-tough .score{ color:var(--danger); } .verdictline .band{ font-family:var(--font-ui); font-size:clamp(19px,4.8vw,25px); font-weight:600; letter-spacing:-.018em; color:var(--on-deep); } .verdictline .of{ font-family:var(--font-mono); font-size:13px; color:var(--on-deep-muted); } .homehero .callout{ font-size:14px; color:var(--on-deep); margin-top:10px; max-width:40ch; text-wrap:pretty; line-height:1.5; } .homehero .herocta{ display:flex; gap:9px; margin-top:20px; flex-wrap:wrap; } .homehero .herocta .btn{ background:var(--signal); color:var(--on-signal); } .homehero .herocta .btn.ghost{ background:oklch(94% .02 90 / .13); color:var(--on-deep); border-color:oklch(94% .02 90 / .25); } .section-lead{ display:flex; align-items:baseline; gap:10px; margin:26px 0 12px; } .section-lead h2{ font-family:var(--font-ui); font-size:17px; letter-spacing:-.012em; margin-right:auto; } .section-lead a{ font-size:12.5px; font-weight:600; color:var(--accent-ink); } /* a text button that reads as the link it sits beside */ .linkbtn{ background:none; border:0; padding:0; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--accent-ink); font-family:inherit; } .linkbtn:hover{ text-decoration:underline; } .quicktiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .qt{ display:flex; align-items:center; gap:11px; padding:14px 13px; border-radius:var(--r); border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-card); } .qt .ic{ color:var(--water); } .qt b{ font-family:var(--font-ui); font-size:14px; font-weight:600; letter-spacing:-.005em; display:block; } .qt span{ font-size:11.5px; color:var(--muted); display:block; margin-top:2px; } .homefoot{ margin-top:30px; padding-top:18px; border-top:1px solid var(--border); font-size:11.5px; color:var(--muted); line-height:1.6; } .homefoot b{ color:var(--fg-2); } @media (min-width:560px){ .homehero{ margin:0; border-radius:var(--r-lg); border-left:1px solid var(--border-strong); border-right:1px solid var(--border-strong); } .quicktiles{ grid-template-columns:repeat(4,1fr); } } @media (min-width:900px){ .homehero .scene-body{ min-height:min(66svh, 520px); } } /* ============================================================================ 11. LOCATION GATE — the general home state ========================================================================== */ .gate{ position:relative; } .gate .scene-body{ min-height:min(78svh,620px); justify-content:flex-end; } .gate h1{ font-size:clamp(30px,8.4vw,46px); line-height:1.03; letter-spacing:-.03em; color:var(--on-deep); max-width:14ch; } .gate .sub{ color:var(--on-deep-muted); font-size:15px; margin-top:12px; max-width:40ch; line-height:1.5; } .gate .searchfield{ background:oklch(94% .02 90 / .14); border-color:oklch(94% .02 90 / .23); min-height:52px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .gate .searchfield input{ color:var(--on-deep); font-size:16px; } .gate .searchfield input::placeholder{ color:oklch(94% .02 90 / .55); } .gate .searchfield .ic{ color:oklch(94% .02 90 / .7); } .gate .gpsbtn{ min-height:52px; width:52px; border-radius:var(--r-pill); flex:none; background:oklch(94% .02 90 / .14); border:1px solid oklch(94% .02 90 / .23); color:var(--on-deep); display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .gate .gpsbtn.busy .ic{ animation:spin .9s linear infinite; } .locresults{ margin-top:10px; border-radius:var(--r); overflow:hidden; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lift); } .locresults .rows{ padding:0 14px; } .locresults .grouphd{ font-family:var(--font-ui); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding:11px 14px 5px; background:var(--surface-2); } .gatechips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .gatechip{ padding:9px 14px; border-radius:var(--r-pill); cursor:pointer; font-size:13px; font-weight:550; background:oklch(94% .02 90 / .12); border:1px solid oklch(94% .02 90 / .19); color:var(--on-deep); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .gatechip:hover{ background:oklch(94% .02 90 / .20); } /* --- plain-language readouts ------------------------------------------- */ .readout{ display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--border); } .readout:last-child{ border-bottom:0; } .readout .rdic{ width:38px; height:38px; border-radius:12px; flex:none; display:grid; place-items:center; background:var(--surface-sunk); color:var(--water); } .readout .rdic.good{ background:var(--success-wash); color:var(--success); } .readout .rdic.mid{ background:var(--warn-wash); color:var(--warn); } .readout .rdic.bad{ background:var(--danger-wash); color:var(--danger); } .readout .grow{ min-width:0; flex:1; } .readout .rdtop{ display:flex; align-items:baseline; gap:8px; } .readout .rdval{ font-family:var(--font-mono); font-size:17px; font-weight:600; letter-spacing:-.025em; } .readout .rdlabel{ font-size:12px; color:var(--muted); letter-spacing:.02em; } .readout .rdsay{ font-size:12.5px; color:var(--fg-2); margin-top:3px; line-height:1.45; } .readout .meter{ width:56px; height:5px; border-radius:3px; background:var(--surface-sunk); flex:none; overflow:hidden; } .readout .meter i{ display:block; height:100%; border-radius:3px; background:var(--water); } .readout .meter i.good{ background:var(--success); } .readout .meter i.mid{ background:var(--warn); } .readout .meter i.bad{ background:var(--danger); } .legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; } .legend span{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); letter-spacing:.02em; } .legend i{ width:10px; height:10px; border-radius:3px; display:block; } .srcbadge{ display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:var(--r-pill); font-family:var(--font-ui); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; } .srcbadge.live{ background:var(--success-wash); color:var(--success); } .srcbadge.osm{ background:var(--water-wash); color:var(--water-ink); } .srcbadge.you{ background:var(--signal-wash); color:var(--signal-ink); } .srcbadge.calc{ background:var(--surface-sunk); color:var(--muted); } /* ============================================================================ 12. LIVE TILE MAP ========================================================================== */ .lmap{ position:relative; width:100%; aspect-ratio:1/1.02; border-radius:var(--r-lg); overflow:hidden; background:var(--deep); border:1px solid var(--border-strong); touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; } .lmap.grabbing{ cursor:grabbing; } .lmap-canvas{ position:absolute; inset:0; } /* Leaflet owns the pan/zoom now; the app still owns the look. Its own controls and attribution are off, so only these rules apply. */ .leaflet-container{ background:var(--deep); font:inherit; outline:none; } .leaflet-container a{ color:var(--accent-ink); } .lmap .leaflet-control-container{ display:none; } .lmap-tiles, .lmap-pins{ position:absolute; inset:0; } .lmap-pins{ pointer-events:none; } .lmap-tile{ position:absolute; width:256px; height:256px; display:block; } /* label/reference tiles ride above the base regardless of the order the two requests happen to come back in */ .lmap-tile.lmap-over{ z-index:2; pointer-events:none; } /* Deepwater treatment for the Esri dark canvas. The raw tiles are a low-contrast grey-on-grey: the water IS darker than the land, but only just, and on a phone in daylight the shoreline disappears. This pushes the two apart and pulls the whole map toward the app's own blue-grey, so land reads cool and water reads near-black. sepia() is what makes the tint possible at all — the source is effectively greyscale, so there is no hue for hue-rotate() to act on until sepia gives it one. Values were picked by simulating the exact CSS filter matrices from the Filter Effects spec against real tiles over the Bay of Quinte. */ .lmap-tiles.deepwater, .leaflet-tile-pane.deepwater{ filter:contrast(1.15) brightness(1.05) sepia(.35) hue-rotate(166deg) saturate(1.25); } .lmap-here{ position:absolute; width:16px; height:16px; margin:0; border-radius:50%; display:block; border:2px solid var(--signal); background:oklch(77% .155 63 / .28); box-shadow:0 0 0 3px oklch(14% .02 206 / .6); } .leaflet-marker-icon .lmap-pin, .leaflet-marker-icon .lmap-here{ position:static; transform:none; } .leaflet-marker-icon{ background:none; border:0; } /* The marker box is only as wide as the dot plus its label needs; without this the label is clipped to the width of the dot. */ .lmap-pinwrap{ width:auto !important; height:auto !important; white-space:nowrap; } .lmap-pin{ position:absolute; transform:translate(-50%,-50%); pointer-events:auto; background:none; border:0; padding:0; cursor:pointer; display:flex; align-items:center; gap:5px; } .lmap-pin .dotp{ width:13px; height:13px; border-radius:50%; display:block; flex:none; border:2px solid oklch(14% .02 206); box-shadow:0 1px 4px oklch(0% 0 0 / .6); } .lmap-pin.ok .dotp{ background:var(--success); } .lmap-pin.warn .dotp{ background:var(--warn); } .lmap-pin.bad .dotp{ background:var(--danger); } .lmap-pin.unk .dotp{ background:oklch(85% .012 95); } .lmap-pin .lmap-lbl{ font:600 10px var(--font-ui); letter-spacing:.01em; white-space:nowrap; background:oklch(96% .012 92 / .95); color:oklch(25% .03 85); padding:2px 7px; border-radius:5px; box-shadow:0 1px 4px oklch(0% 0 0 / .45); max-width:130px; overflow:hidden; text-overflow:ellipsis; } .lmap-pin:hover .lmap-lbl{ background:oklch(98% .01 95); } .lmap-ctl{ position:absolute; right:10px; top:10px; z-index:900; display:flex; flex-direction:column; gap:6px; } .lmap-ctl button{ width:38px; height:38px; border-radius:11px; border:1px solid var(--border-strong); background:oklch(14.5% .02 206 / .85); color:var(--on-deep); cursor:pointer; font:600 19px/1 var(--font-ui); display:grid; place-items:center; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .lmap-ctl button:hover{ background:oklch(21% .025 204 / .9); } .lmap-ctl button.spin .ic{ animation:spin .9s linear infinite; } .lmap-layers{ position:absolute; left:10px; top:10px; z-index:900; display:flex; gap:2px; padding:3px; border-radius:var(--r-pill); background:oklch(14.5% .02 206 / .85); border:1px solid var(--border-strong); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .lmap-layers button{ border:0; background:none; color:var(--on-deep-muted); cursor:pointer; font:600 11.5px var(--font-ui); letter-spacing:.02em; padding:6px 12px; border-radius:var(--r-pill); } .lmap-layers button[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); } .lmap-attr{ position:absolute; right:8px; bottom:6px; z-index:900; font:500 9.5px var(--font-mono); letter-spacing:.03em; color:oklch(90% .012 90 / .8); background:oklch(11% .018 206 / .62); padding:3px 7px; border-radius:5px; pointer-events:none; } @media (min-width:900px){ .lmap{ aspect-ratio:4/3; } } /* ============================================================================ 13. HOME — fresh start hero Always rendered from static markup so a script failure can never blank the home screen the way it could when both states started hidden. ========================================================================== */ .hero-fresh{ margin:0 calc(var(--pad) * -1); border-radius:0; border-left:0; border-right:0; } .hero-fresh .scene-body{ min-height:min(88svh, 760px); padding:26px var(--pad) calc(var(--pad) + 6px); } .bigtype{ margin-top:6px; } .bigtype .l1{ display:block; font-family:var(--font-serif); font-weight:500; font-size:clamp(22px,6.2vw,40px); letter-spacing:-.02em; line-height:1; color:var(--signal); } .bigtype .l2{ display:block; font-family:var(--font-ui); font-weight:700; font-size:clamp(46px,15.5vw,148px); line-height:.86; letter-spacing:-.045em; text-transform:uppercase; color:var(--on-deep); margin-top:2px; text-wrap:balance; } .hero-fresh .sub{ color:var(--on-deep-muted); font-size:15px; margin-top:16px; max-width:44ch; line-height:1.5; } .herosearch{ display:flex; align-items:center; gap:8px; margin-top:22px; padding:6px 6px 6px 18px; border-radius:var(--r-pill); background:oklch(94% .02 90 / .13); border:1px solid oklch(94% .02 90 / .21); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); max-width:560px; } .herosearch .ic{ color:oklch(94% .02 90 / .65); flex:none; } .herosearch input{ flex:1; min-width:0; border:0; background:none; min-height:auto; padding:12px 0; font-size:16px; color:var(--on-deep); } .herosearch input::placeholder{ color:oklch(94% .02 90 / .55); } .herosearch input:focus{ outline:none; } .herosearch button{ flex:none; min-height:46px; padding:0 22px; border:0; border-radius:var(--r-pill); background:var(--signal); color:var(--on-signal); cursor:pointer; font:700 13px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; } .herosearch button:hover{ filter:brightness(1.06); } .herosearch button .ic{ color:currentColor; } .heroalt{ display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; } .heroalt .gpslink{ display:inline-flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer; color:var(--on-deep); font:600 13.5px var(--font-ui); letter-spacing:.01em; border-bottom:1px solid oklch(94% .02 90 / .38); padding:2px 0; } .heroalt .gpslink.busy .ic{ animation:spin .9s linear infinite; } .heroalt .sep{ color:oklch(94% .02 90 / .32); font-size:12px; } .continuecard{ display:flex; align-items:center; gap:13px; margin-top:20px; padding:13px 16px; border-radius:var(--r); max-width:470px; cursor:pointer; text-align:left; background:oklch(94% .02 90 / .12); border:1px solid oklch(94% .02 90 / .19); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .continuecard:hover{ background:oklch(94% .02 90 / .18); } .continuecard .cscore{ font-family:var(--font-mono); font-size:26px; font-weight:600; letter-spacing:-.04em; color:var(--signal); line-height:1; flex:none; } .continuecard .grow{ min-width:0; flex:1; } .continuecard b{ display:block; font-family:var(--font-ui); font-size:15px; font-weight:650; color:var(--on-deep); } .continuecard span{ display:block; font-size:12px; color:var(--on-deep-muted); margin-top:2px; } .continuecard .ic{ color:var(--on-deep-muted); flex:none; } .scrollcue{ display:flex; align-items:center; gap:10px; margin-top:24px; color:var(--on-deep-muted); font:500 11.5px var(--font-ui); letter-spacing:.14em; text-transform:uppercase; } .scrollcue i{ width:34px; height:34px; border-radius:50%; border:1px solid oklch(94% .02 90 / .30); display:grid; place-items:center; animation:bob 2.4s ease-in-out infinite; } @keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } } .nowater{ text-align:center; padding:44px 20px; color:var(--muted); } .nowater .ic{ width:30px; height:30px; color:var(--faint); margin:0 auto 12px; } @media (min-width:560px){ .hero-fresh{ margin:0; border-radius:var(--r-lg); border-left:1px solid var(--border-strong); border-right:1px solid var(--border-strong); } } @media (min-width:900px){ .hero-fresh .scene-body{ min-height:min(76svh, 660px); padding:40px 44px 36px; } } .bite .verdictline{ margin-top:18px; } .bite .callout{ font-size:14px; color:var(--on-deep); margin-top:10px; max-width:44ch; line-height:1.5; } .bite .placemeta{ font-family:var(--font-ui); font-size:12.5px; color:var(--on-deep-muted); margin-top:7px; } .bite .herocta .btn{ background:var(--signal); color:var(--on-signal); } .bite .herocta .btn.ghost{ background:oklch(94% .02 90 / .13); color:var(--on-deep); border-color:oklch(94% .02 90 / .25); } /* species picker on the home conditions panel */ .speciespick{ margin-top:16px; } .speciespick .eyebrow{ display:block; margin-bottom:8px; } .speciespick .chiprow{ margin:0; padding-inline:0; } .speciespick .chip{ background:oklch(94% .02 90 / .11); border-color:oklch(94% .02 90 / .19); color:var(--on-deep); } .speciespick .chip[aria-pressed="true"]{ background:var(--signal); border-color:var(--signal); color:var(--on-signal); } /* ============================================================================ 14. BRAND ========================================================================== */ .mark{ width:36px; height:36px; display:block; flex:none; } .brandmark{ text-decoration:none; } .brandglyph{ width:26px; height:26px; color:var(--signal); } .brandword{ font-family:var(--font-ui); font-weight:700; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg); } /* brand sheet */ .bsheet{ max-width:1120px; margin:0 auto; padding:0 var(--pad) 64px; } .bsec{ margin-top:52px; } .bsec > .eyebrow{ display:block; margin-bottom:10px; } .bsec > h2{ font-family:var(--font-ui); font-size:clamp(20px,4.6vw,27px); letter-spacing:-.02em; } .bsec > p.lead{ color:var(--muted); font-size:14.5px; margin-top:9px; max-width:60ch; line-height:1.55; } .markwall{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-top:22px; } .markcard{ border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); padding:26px 18px 16px; text-align:center; } .markcard.primary{ border-color:var(--signal); background:var(--signal-wash); } .markcard .mark{ width:64px; height:64px; margin:0 auto 18px; color:var(--signal); } .markcard b{ display:block; font-family:var(--font-ui); font-size:13.5px; letter-spacing:-.005em; } .markcard span{ display:block; font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.45; } .markcard .tag{ display:inline-block; margin-top:10px; padding:3px 9px; border-radius:var(--r-pill); font:700 9.5px var(--font-ui); letter-spacing:.08em; background:var(--signal); color:var(--on-signal); } .lockups{ display:grid; gap:14px; margin-top:22px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); } .lock{ border:1px solid var(--border); border-radius:var(--r-lg); padding:28px 20px; display:flex; align-items:center; justify-content:center; min-height:132px; background:var(--deep); } .lock.light{ background:oklch(96% .01 92); } .lock.light .brandword,.lock.light .lockstack b{ color:oklch(26% .03 85); } .lock.light .mark{ color:oklch(30% .04 210); } .lockrow{ display:flex; align-items:center; gap:13px; color:var(--signal); } .lockrow .brandword{ font-size:21px; color:var(--on-deep); } .lockstack{ text-align:center; color:var(--signal); } .lockstack .mark{ width:52px; height:52px; margin:0 auto 12px; } .lockstack b{ display:block; font-family:var(--font-ui); font-weight:700; font-size:17px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-deep); } .lockstack span{ display:block; font:500 9.5px var(--font-ui); letter-spacing:.19em; color:var(--on-deep-muted); margin-top:7px; } .appicon{ width:92px; height:92px; border-radius:22px; display:grid; place-items:center; background:linear-gradient(160deg, var(--deep) 0%, oklch(26% .04 200) 100%); border:1px solid var(--border-strong); color:var(--signal); } .appicon .mark{ width:50px; height:50px; } .swatches-brand{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px; margin-top:22px; } .bswatch{ border:1px solid var(--border); border-radius:var(--r); overflow:hidden; } .bswatch .chip-c{ height:88px; display:block; } .bswatch .meta{ padding:11px 13px; } .bswatch b{ display:block; font-family:var(--font-ui); font-size:13px; } .bswatch code{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-top:4px; letter-spacing:.02em; } .bswatch span{ display:block; font-size:11px; color:var(--faint); margin-top:6px; line-height:1.4; } .typerow{ border-bottom:1px solid var(--border); padding:20px 0; } .typerow:last-child{ border-bottom:0; } .typerow .lbl{ font:500 10px var(--font-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .dodont{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:20px; } .dd{ border:1px solid var(--border); border-radius:var(--r); padding:15px; font-size:13px; line-height:1.5; } .dd.do{ border-color:oklch(56% .10 145 / .45); } .dd.dont{ border-color:oklch(55% .185 27 / .4); } .dd b{ display:block; font-family:var(--font-ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px; } .dd.do b{ color:var(--success); } .dd.dont b{ color:var(--danger); } /* licensed weather glyph set — solid rounded monoline, inherits currentColor */ .wxi{ width:22px; height:22px; display:block; flex:none; } .wxi-sm{ width:17px; height:17px; } .wxi-lg{ width:30px; height:30px; } .wxi-xl{ width:44px; height:44px; } .hour .wxi{ margin:5px auto 3px; color:var(--fg-2); } .hour.peak .wxi{ color:var(--signal); } .readout .rdic .wxi{ width:21px; height:21px; } .wxcond{ display:flex; align-items:center; gap:8px; } .wxcond .wxi{ color:var(--water); } .wxcond b{ font-family:var(--font-ui); font-size:14px; font-weight:600; } /* licensed fishing/tackle glyph set */ .fgi{ width:24px; height:24px; display:block; flex:none; } .fgi-sm{ width:18px; height:18px; } .fgi-lg{ width:30px; height:30px; } .lurechip .disc .fgi{ width:28px; height:28px; } .gearrow{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); } .gearrow:last-child{ border-bottom:0; } .gearrow .fgi{ color:var(--water); } .gearrow input[type="checkbox"]{ width:20px; height:20px; min-height:auto; flex:none; accent-color:var(--accent); } .gearrow span{ flex:1; font-size:14px; font-weight:550; } /* ---- emblem ------------------------------------------------------------ */ .emblem{ width:200px; height:200px; display:block; flex:none; } .emblem .emtop{ font-family:var(--font-ui); font-weight:700; font-size:17px; letter-spacing:4.6px; } .emblem .embot{ font-family:var(--font-ui); font-weight:700; font-size:8.4px; letter-spacing:2.8px; } .brandglyph{ width:28px; height:28px; color:var(--signal); } /* the fish eye is a knockout — it must take the colour behind the emblem */ .emeye{ fill:var(--deep); } .patch.reverse .emeye, .art.decal .emeye{ fill:var(--signal); } .patch.paper .emeye, .art.sticker .emeye{ fill:oklch(93% .012 92); } /* wordmark with the hook descender under the final T */ .wordmark{ display:inline-flex; align-items:flex-end; gap:0; position:relative; } .wordmark b{ font-family:var(--font-ui); font-weight:700; text-transform:uppercase; letter-spacing:.16em; line-height:1; color:var(--fg); } .wordmark .hookline{ position:absolute; right:-2px; bottom:-13px; width:34px; height:20px; color:var(--signal); } /* patch / application mockups */ .patchwall{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-top:22px; } .patch{ border-radius:var(--r-lg); padding:26px 18px 18px; text-align:center; background:var(--deep); border:1px solid var(--border-strong); } .patch .emblem{ width:132px; height:132px; margin:0 auto; color:var(--signal); } .patch.reverse{ background:var(--signal); border-color:var(--signal); } .patch.reverse .emblem{ color:var(--deep); } .patch.paper{ background:oklch(94% .012 92); border-color:oklch(84% .02 92); } .patch.paper .emblem{ color:oklch(28% .04 215); } .patch b{ display:block; margin-top:16px; font:600 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .patch.reverse b, .patch.paper b{ color:oklch(30% .035 210); } .sizerow{ display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap; margin-top:22px; padding:24px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--deep); } .sizerow .s{ text-align:center; color:var(--signal); } .sizerow .s span{ display:block; margin-top:9px; font:500 10px var(--font-ui); color:var(--muted); letter-spacing:.07em; } .apps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:22px; } .appcard{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); background:var(--surface); } .appcard .art{ height:190px; display:grid; place-items:center; position:relative; overflow:hidden; } .appcard .cap{ padding:12px 15px; font-size:12px; color:var(--muted); } .art.splash{ background:linear-gradient(165deg, var(--deep), oklch(24% .04 200)); color:var(--signal); } .art.splash .emblem{ width:112px; height:112px; } .art.decal{ background:oklch(30% .02 205); color:oklch(94% .012 90); } .art.decal .emblem{ width:104px; height:104px; } .art.sticker{ background:oklch(93% .012 92); } .art.sticker .emblem{ width:104px; height:104px; color:var(--deep); } .art.icon{ background:oklch(16.5% .018 206); } .appiconbig{ width:110px; height:110px; border-radius:26px; display:grid; place-items:center; background:linear-gradient(160deg, var(--deep), oklch(27% .045 200)); border:1px solid var(--border-strong); color:var(--signal); } .appiconbig .emblem{ width:74px; height:74px; } /* wave pattern — supporting graphic */ .wavepattern{ height:120px; border-radius:var(--r-lg); margin-top:22px; border:1px solid var(--border); background-color:var(--deep); background-image:repeating-linear-gradient(0deg, transparent 0 18px, oklch(77% .155 63 / .22) 18px 20px); position:relative; overflow:hidden; } /* ---- brand sheet additions -------------------------------------------- */ .brandhero{ display:flex; gap:32px; align-items:center; flex-wrap:wrap; padding:24px 0 8px; } .brandhero .heroem{ width:196px; height:196px; color:var(--signal); } .bigmark{ font-family:var(--font-ui); font-weight:700; text-transform:uppercase; font-size:clamp(34px,7vw,58px); letter-spacing:.14em; line-height:1; margin-top:6px; } .patch .pnote{ display:block; margin-top:5px; font-size:11.5px; color:var(--muted); line-height:1.45; text-transform:none; letter-spacing:0; font-family:var(--font-body); font-weight:400; } .patch.mono{ background:linear-gradient(160deg, oklch(24% .026 204), oklch(16.5% .018 206)); } .patch.mono .emblem{ color:oklch(94% .013 90); } .patch.mono .emeye{ fill:oklch(20% .022 205); } .sizerow .s .emblem.fill{ width:100%; height:100%; } .lockem{ width:56px; height:56px; } .lockem-lg{ width:118px; height:118px; } .lockrow{ align-items:center; } .tagline{ display:block; font:500 9.5px var(--font-ui); letter-spacing:.17em; text-transform:uppercase; color:var(--on-deep-muted); margin-top:6px; } .lock.light .tagline{ color:oklch(46% .02 88); } .lock.light .emblem{ color:oklch(28% .04 212); } .lock.light .emeye{ fill:oklch(96% .01 92); } /* ---- topographic texture ---------------------------------------------- A contour plate behind everything at very low opacity. It reads as a chart under the interface rather than a pattern on top of it. */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:url("../assets/texture/topo.png"); background-size:1200px auto; background-position:center -80px; background-repeat:repeat; opacity:.055; mix-blend-mode:screen; } body > *{ position:relative; z-index:1; } @media (prefers-reduced-motion:no-preference){ body::before{ transition:opacity .4s ease; } } /* ============================================================================ 15. THE ANSWER ROW Four questions an angler has, answered in order, immediately under the hero. Everything below this is detail for people who want it. ========================================================================== */ /* the hero shrinks once a water is chosen — a returning angler should not scroll a full screen to reach a number they open the app for */ .hero-fresh.located .scene-body{ min-height:min(62svh, 580px); } @media (min-width:900px){ .hero-fresh.located .scene-body{ min-height:min(56svh, 520px); } } .answers{ display:grid; gap:2px; margin-top:14px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); background:var(--border); } .answers a{ display:flex; align-items:center; gap:14px; min-height:64px; padding:12px 16px; background:var(--surface); text-decoration:none; color:var(--fg); transition:background .14s ease; } .answers a:hover{ background:var(--surface-2); } .answers a:active{ background:var(--surface-sunk); } .answers .qicon{ width:38px; height:38px; border-radius:12px; flex:none; display:grid; place-items:center; background:var(--surface-sunk); color:var(--water); } .answers a.go .qicon{ background:var(--signal-wash); color:var(--signal); } .answers .qlabel{ font-family:var(--font-ui); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; } .answers .qval{ font-family:var(--font-ui); font-size:15.5px; font-weight:650; letter-spacing:-.008em; display:block; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .answers .qsub{ font-size:11.5px; color:var(--muted); display:block; margin-top:2px; } .answers .grow{ min-width:0; flex:1; } .answers .chev{ color:var(--faint); flex:none; } @media (min-width:760px){ .answers{ grid-template-columns:1fr 1fr; } } /* ---- species artwork --------------------------------------------------- Licensed illustrations carry their own colour; the three species the sets do not include fall back to the drawn monoline, which needs the stroke attributes the illustrations do not. */ .spart{ display:block; flex:none; } /* Photographic plates are transparent PNGs, so they need to fit their box rather than fill it — a stretched fish is worse than no fish. */ .spart.photo{ object-fit:contain; object-position:center; } .spart.photo.spart-chip{ width:38px; height:26px; } .spart.photo.spart-plate{ width:100%; height:56px; } .spart.drawn{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .spart-chip{ width:38px; height:26px; margin-right:4px; } .chip .spart-chip{ margin-left:-3px; } .spart-plate{ width:100%; height:56px; } .fishplate .spart-plate{ width:104px; height:60px; } .catchcard .plate .spart-plate{ width:64px; height:40px; } /* ---- live cameras ------------------------------------------------------ */ .camgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; } .camcard{ border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--deep); position:relative; } .camcard .shot{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--surface-sunk); } .camcard .shot.dead{ display:none; } .camcard .fallback{ display:none; aspect-ratio:4/3; place-items:center; color:var(--faint); font:500 12px var(--font-ui); letter-spacing:.05em; background:var(--surface-sunk); } .camcard .shot.dead + .fallback{ display:grid; } .camcard .cammeta{ padding:10px 12px; } .camcard b{ display:block; font-family:var(--font-ui); font-size:13px; font-weight:600; letter-spacing:-.005em; } .camcard span{ display:block; font-size:11px; color:var(--muted); margin-top:3px; } .camlive{ position:absolute; top:8px; left:8px; display:inline-flex; align-items:center; gap:5px; background:oklch(11% .018 206 / .8); color:var(--on-deep); border-radius:var(--r-pill); padding:3px 9px; font:600 9.5px var(--font-ui); letter-spacing:.08em; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .camlive i{ width:6px; height:6px; border-radius:50%; background:var(--danger); animation:pulse 2.4s ease-out infinite; } .camdist{ position:absolute; top:8px; right:8px; background:oklch(11% .018 206 / .8); color:var(--on-deep-muted); border-radius:var(--r-pill); padding:3px 9px; font:600 9.5px var(--font-ui); letter-spacing:.05em; } /* ============================================================================ 16. COMMUNITY — crews, reports, the conditions strip The report card is the whole feature in one component: who, what they caught, and — the part no forum post carries — the barometer, wind and bite score at the moment they caught it. ========================================================================== */ .rep{ border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); padding:14px; margin-bottom:12px; } .rep + .rep{ margin-top:0; } .rep-hd{ display:flex; align-items:center; gap:10px; margin-bottom:10px; } .avatar{ width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center; font-family:var(--font-mono); font-size:12.5px; font-weight:700; letter-spacing:.02em; background:var(--water-wash); color:var(--water-ink); border:1px solid oklch(73% .062 200 / .35); } .avatar.sig{ background:var(--signal-wash); color:var(--signal-ink); border-color:oklch(77% 0.155 63 / .32); } .rep-who{ min-width:0; flex:1; } .rep-who b{ display:block; font-size:13.5px; font-weight:650; } .rep-who span{ display:block; font-size:11.5px; color:var(--muted); } .rep-body{ font-size:14px; line-height:1.55; color:var(--fg-2); margin:0 0 10px; } .rep-body em{ color:var(--fg); font-style:normal; font-weight:600; } /* the catch line — species, size, depth, lure */ .rep-catch{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; } .rep-catch .pill{ background:var(--surface-sunk); } .rep-catch .pill.hero{ background:var(--signal-wash); color:var(--signal-ink); font-size:12.5px; } /* conditions at the moment of the catch — the differentiator */ .condstrip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; margin-bottom:10px; } .condstrip div{ background:var(--surface-sunk); padding:7px 6px; text-align:center; } .condstrip b{ display:block; font-family:var(--font-mono); font-size:14px; font-weight:650; color:var(--fg); line-height:1.2; } .condstrip span{ display:block; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .condstrip.unverified b{ color:var(--muted); } .rep-ft{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .reactbtn{ display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:var(--r-pill); border:1px solid var(--border); background:transparent; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; } .reactbtn .ic{ width:15px; height:15px; } .reactbtn:hover{ color:var(--fg-2); border-color:var(--border-hi); } .reactbtn[aria-pressed="true"]{ background:var(--water-wash); color:var(--water-ink); border-color:oklch(73% .062 200 / .35); } .reactbtn.warn[aria-pressed="true"]{ background:var(--signal-wash); color:var(--signal-ink); } .cmt{ border-top:1px solid var(--border); margin-top:10px; padding-top:10px; } .cmt-row{ display:flex; gap:9px; margin-bottom:9px; font-size:13px; line-height:1.5; } .cmt-row .avatar{ width:26px; height:26px; font-size:10.5px; } .cmt-row b{ font-weight:650; } .cmt-row p{ margin:1px 0 0; color:var(--fg-2); } .cmt-row time{ font-size:11px; color:var(--muted); } .cmt-form{ display:flex; gap:8px; } .cmt-form input{ flex:1; min-width:0; } /* crew cards */ .crewgrid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); } .crew{ border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); padding:13px; display:flex; flex-direction:column; gap:7px; text-align:left; cursor:pointer; width:100%; } .crew:hover{ border-color:var(--border-hi); background:var(--surface-hi); } .crew b{ font-size:14.5px; font-weight:650; } .crew p{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.45; } .crew .meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .joincode{ font-family:var(--font-mono); font-size:19px; font-weight:700; letter-spacing:.16em; padding:11px 14px; border-radius:var(--r-sm); text-align:center; background:var(--surface-sunk); border:1px dashed var(--border-hi); color:var(--fg); } .samplebadge{ display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:var(--r-pill); background:var(--surface-sunk); color:var(--muted); font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; } /* the local-only notice — never let this feature imply it is networked */ .localnote{ display:flex; gap:9px; align-items:flex-start; padding:11px 13px; margin-bottom:16px; border:1px dashed var(--border-hi); border-radius:var(--r-card); background:var(--surface-sunk); font-size:12.5px; line-height:1.5; color:var(--fg-2); } .localnote .ic{ flex:none; width:17px; height:17px; margin-top:1px; color:var(--muted); } .localnote b{ color:var(--fg); } .composer{ display:flex; gap:10px; align-items:flex-start; } .composer .avatar{ margin-top:2px; } .composer button{ flex:1; text-align:left; } .fakefield{ width:100%; padding:11px 14px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface-sunk); color:var(--muted); font-size:13.5px; cursor:pointer; } .fakefield:hover{ border-color:var(--border-hi); color:var(--fg-2); } .standrow{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--border); } .standrow:last-child{ border-bottom:0; } .standrow .rank{ width:24px; flex:none; text-align:center; font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--muted); } .standrow .rank.top{ color:var(--signal-ink); } .rep-photo{ display:block; width:100%; height:auto; max-height:420px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-sunk); margin-bottom:10px; } .photopick{ display:flex; align-items:center; justify-content:center; gap:7px; padding:12px; border-radius:var(--r-sm); cursor:pointer; border:1px dashed var(--border-hi); background:var(--surface-sunk); color:var(--fg-2); font-size:13px; font-weight:600; } .photopick:hover{ color:var(--fg); border-color:var(--accent-ink); } /* ============================================================================ 17. DEPTH CONTOURS Ontario's own bathymetry drawn over the basemap — the feature every other fishing app puts behind a subscription. ========================================================================== */ .lmap-depth{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; display:block; overflow:visible; } .lmap-ctl button[data-act="depth"][aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); } .lmap.depth-loading .lmap-ctl button[data-act="depth"]{ opacity:.55; } .lmap-depthlegend{ position:absolute; left:10px; bottom:10px; z-index:901; display:flex; flex-direction:column; gap:1px; padding:7px 11px; border-radius:var(--r-sm); background:oklch(14.5% .02 206 / .86); border:1px solid var(--border-strong); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .lmap-depthlegend b{ font:600 12.5px var(--font-mono); color:var(--on-deep); letter-spacing:-.01em; } .lmap-depthlegend span{ font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-deep-muted); } /* Two honest empty states rather than a layer that silently shows nothing. */ .lmap.depth-on.depth-toofar::before, .lmap.depth-on.depth-empty::before{ content:"Zoom in to load depth"; position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:6; white-space:nowrap; padding:6px 12px; border-radius:var(--r-pill); background:oklch(14.5% .02 206 / .88); border:1px solid var(--border-strong); color:var(--on-deep-muted); font:600 11.5px var(--font-ui); letter-spacing:.01em; } .lmap.depth-on.depth-empty:not(.depth-toofar)::before{ content:"No survey here — most of Ontario is unmapped"; } /* the tap-to-read depth probe */ .lmap-probe{ position:absolute; z-index:902; transform:translate(-50%,calc(-100% - 12px)); pointer-events:none; text-align:center; white-space:nowrap; padding:6px 11px; border-radius:var(--r-sm); background:oklch(14.5% .02 206 / .92); border:1px solid var(--water); box-shadow:0 6px 18px oklch(0% 0 0 / .45); } .lmap-probe b{ display:block; font:600 15px var(--font-mono); color:var(--on-deep); letter-spacing:-.02em; } .lmap-probe span{ display:block; font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--on-deep-muted); margin-top:2px; } /* a saved mark, deliberately a different shape from a launch pin */ .lmap-pin.mark .dotp{ border-radius:3px; transform:rotate(45deg); box-shadow:0 0 0 2px oklch(14% .02 206 / .85); } .lmap-pin.mark.sig .dotp{ background:var(--signal); } .lmap-pin.mark.acc .dotp{ background:var(--water); } .lmap-pin.mark.bad .dotp{ background:var(--danger); } .lmap-pin.mark.unk .dotp{ background:var(--muted); } /* mark ranking cards */ .score-sm{ flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font:700 16px var(--font-mono); letter-spacing:-.03em; } .score-sm.good{ background:var(--signal-wash); color:var(--signal-ink); } .score-sm.fair{ background:var(--water-wash); color:var(--water-ink); } .score-sm.slow{ background:var(--surface-sunk); color:var(--muted); } .whylist{ margin:0; padding-left:17px; } .whylist li{ font-size:12.5px; color:var(--fg-2); line-height:1.5; margin-bottom:2px; } /* ============================================================================ 18. DISCLOSURE Reference material that has to be available and honest, but does not need to occupy a screen's worth of scroll on the way past it. ========================================================================== */ .disclose{ border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); margin-top:26px; } .disclose > summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 16px; cursor:pointer; list-style:none; font-family:var(--font-ui); font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--fg); } .disclose > summary::-webkit-details-marker{ display:none; } .disclose > summary::after{ content:""; flex:none; width:9px; height:9px; margin-right:3px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease; } .disclose[open] > summary::after{ transform:rotate(-135deg) translate(-3px,-3px); } .disclose > summary:hover{ color:var(--accent-ink); } .disclose > div{ padding:0 16px 16px; } /* Map tiles are . Browsers start a native image-drag on mousedown, which eats the pointermove stream and makes the map zoom-only. The draggable=false attribute does the work; these are the belt and braces, including the WebKit-only property that attribute does not cover. */ .lmap img{ -webkit-user-drag:none; user-drag:none; } .lmap-tile{ pointer-events:none; } .lmap-ctl button[data-act="pins"][aria-pressed="false"]{ opacity:.45; } .lmap-ctl button[data-act="pins"][aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); } /* a zoom button with nowhere left to go says so rather than going dead quiet */ .lmap-ctl button:disabled{ opacity:.3; cursor:default; } /* Shown only when localStorage is refused — a sandboxed preview, private browsing, or a full quota. The app keeps working; it just cannot remember. */ .nosavebanner{ display:flex; align-items:flex-start; gap:8px; padding:9px var(--pad); background:var(--danger-wash); color:var(--danger); font-size:12.5px; font-weight:600; line-height:1.45; border-bottom:1px solid oklch(67% .18 27 / .3); } .nosavebanner .ic{ flex:none; margin-top:1px; } /* A Coast Guard camera pointed at the water is a different thing from a highway camera pointed at a road, and the badge says which. */ .camlive.marine{ background:var(--water); color:var(--on-water); } /* The contour overlay lives in its own Leaflet pane. */ /* Leaflet's map pane sits at z-index 400 and its own panes climb to 700, so the app's controls have to clear all of it — they were on z-index 5, written for the old engine where nothing had a stacking context, which buried every button under the tiles. */ .leaflet-pane svg.lmap-depth{ position:absolute; left:0; top:0; display:block; pointer-events:none; overflow:visible; } .lmap-nolib{ display:grid; place-items:center; } /* ============================================================================ 19. THE MAP SCREEN The map is the feature, so on this page it gets the screen. Everything else rides on top of it or lives in a drawer that slides over it — no scrolling past the map to reach the map. ========================================================================== */ .mapscreen{ position:relative; /* fill what is left between the app bar and the tab bar */ height:calc(100dvh - var(--appbar-h, 108px) - var(--tab-h) - env(safe-area-inset-bottom)); min-height:340px; padding:0; margin:0; max-width:none; overflow:hidden; } /* the map fills it, overriding the boxed aspect-ratio used elsewhere */ .lmap.mapfill{ position:absolute; inset:0; width:auto; height:auto; aspect-ratio:auto; border-radius:0; border:0; } /* filters float over the top of the map, scrolling sideways */ /* Clear of the control column on the right, or the chips slide underneath the zoom buttons and neither is tappable. */ .mapchips{ position:absolute; left:0; right:60px; top:0; z-index:905; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:10px 12px 10px 12px; /* clear of the layer switcher, which sits top-left inside the map */ margin-top:52px; -webkit-overflow-scrolling:touch; mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); } .mapchips::-webkit-scrollbar{ display:none; } .mapchips .chip{ flex:none; background:oklch(14.5% .02 206 / .86); border-color:var(--border-strong); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .maperr{ position:absolute; left:12px; right:12px; top:104px; z-index:905; } .maperr:empty{ display:none; } /* --- the drawer -------------------------------------------------------- */ .mapsheet{ position:absolute; left:0; right:0; bottom:0; z-index:910; background:oklch(14.5% .02 206 / .95); backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3); border-top:1px solid var(--border-strong); border-radius:var(--r-lg) var(--r-lg) 0 0; display:flex; flex-direction:column; max-height:72%; transform:translateY(calc(100% - var(--sheet-peek, 62px))); transition:transform .28s cubic-bezier(.4,0,.2,1); box-shadow:0 -10px 34px oklch(0% 0 0 / .4); } .mapsheet.open{ transform:translateY(0); } .mapsheet-handle{ flex:none; display:flex; align-items:center; gap:12px; width:100%; padding:10px 16px 12px; background:none; border:0; cursor:pointer; color:var(--fg); text-align:left; font-family:inherit; } .mapsheet-handle .grabber{ position:absolute; left:50%; top:6px; transform:translateX(-50%); width:36px; height:4px; border-radius:2px; background:var(--border-strong); } .mapsheet-sum{ flex:1; min-width:0; display:flex; align-items:baseline; gap:7px; } .mapsheet-sum b{ font:700 19px var(--font-mono); letter-spacing:-.03em; color:var(--fg); } .mapsheet-sum span{ font-size:12.5px; color:var(--muted); } .mapsheet-chev{ flex:none; width:9px; height:9px; margin-right:4px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-135deg) translate(-2px,-2px); transition:transform .24s ease; } .mapsheet.open .mapsheet-chev{ transform:rotate(45deg) translate(-3px,-3px); } .mapsheet-body{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:2px 14px calc(env(safe-area-inset-bottom) + 18px); } .mapsheet-body .disclose{ margin-top:12px; } /* the controls stack down the right, so give the chips their own lane */ @media (max-width:420px){ .mapchips{ right:56px; margin-top:50px; } } @media (min-width:900px){ /* On a wide screen there is room for the drawer to sit open beside the map instead of over it. */ .mapsheet{ left:auto; right:14px; top:14px; bottom:14px; width:370px; max-height:none; border-radius:var(--r-lg); border:1px solid var(--border-strong); transform:none; } .mapsheet-handle .grabber{ display:none; } .mapsheet-chev{ display:none; } .mapsheet-body{ display:block !important; } .mapchips{ right:400px; } /* the docked drawer would otherwise sit on top of the control column */ .mapscreen .lmap-ctl{ right:400px; } .mapscreen .lmap-attr{ right:400px; } .mapscreen .lmap-depthlegend{ left:14px; } }