/* Outdoor Almanacs: one stylesheet for every page on outdooralmanacs.ca. * * Themes. Each page puts one class on : theme-brand (home page, /thanks), theme-hikers or * theme-anglers (each almanac's pages, in the colours those sites had on their own domains). A theme * class also works on a single card, so each product keeps its colours on the home page and in * "More from Outdoor Almanacs". A new almanac adds its token block here. * * Where the two almanacs' old stylesheets disagreed, the shared rule comes first and the difference * follows it, scoped with :where(.theme-…) so specificity is exactly what it was on the old sites. */ :root { color-scheme: light dark; } /* ---- theme tokens ------------------------------------------------------------ */ :root, .theme-brand { --bg: #f4efe4; --surface: #fffdf8; --surface-2: #ece5d5; --ink: #1f2a24; --muted: #5d6b63; --line: #ddd3c0; --accent: #2d5f45; --accent-ink: #ffffff; --accent-soft: #dbe9df; --link: #2d5f45; --pin: #2d5f45; --water: #2f6f8f; --water-soft: #d9e9f0; --trip-bg: #fbe8c4; --trip-line: #c2741a; --trip-ink: #6f3f07; --warn-bg: #fff3d4; --warn-line: #e0b03e; --wrap: 1000px; --radius: 14px; --shadow: 0 1px 2px rgba(25, 40, 35, .06), 0 4px 16px rgba(25, 40, 35, .05); } .theme-hikers { --bg: #f4f1e8; --surface: #fffdf7; --surface-2: #efeadd; --ink: #1d2721; --muted: #5a695f; --line: #ddd5c3; --accent: #2e6a4c; --accent-ink: #ffffff; --accent-soft: #dcebe1; --link: #2e6a4c; --pin: #2e6a4c; --trip-bg: #fdebc8; --trip-line: #c97a1c; --trip-ink: #7a4508; --warn-bg: #fff4d6; --warn-line: #e2b340; --route: #d4460f; --wpt: #1f5fa8; --wrap: 980px; --shadow: 0 1px 2px rgba(30, 40, 30, .06), 0 4px 16px rgba(30, 40, 30, .05); } .theme-anglers { --bg: #f3efe3; --surface: #fffdf6; --surface-2: #ebe5d4; --ink: #1b2621; --muted: #58675f; --line: #dbd2bd; --accent: #2d5f45; --accent-ink: #ffffff; --accent-soft: #dbe9df; --link: #2f6f8f; --pin: #2f6f8f; --water: #2f6f8f; --water-soft: #d9e9f0; --water-deep: #1d4a60; --trip-bg: #fbe8c4; --trip-line: #c2741a; --trip-ink: #6f3f07; --warn-bg: #fff3d4; --warn-line: #e0b03e; --rise: #2d6e4a; --rise-bg: #dcefe2; --fall: #a5431d; --fall-bg: #f8e0d4; --steady: #4d5b54; --steady-bg: #e6e3d8; --night: rgba(29, 74, 96, .16); --wrap: 1000px; --shadow: 0 1px 2px rgba(25, 40, 35, .06), 0 4px 16px rgba(25, 40, 35, .05); } @media (prefers-color-scheme: dark) { :root, .theme-brand { --bg: #0f1614; --surface: #17201d; --surface-2: #212c28; --ink: #e5ece8; --muted: #9aaea4; --line: #2c3934; --accent: #78c79b; --accent-ink: #0d1a12; --accent-soft: #1e3a2b; --link: #78c79b; --pin: #78c79b; --water: #72b8d8; --water-soft: #15303c; --trip-bg: #3a2c13; --trip-line: #e3a44d; --trip-ink: #f5c983; --warn-bg: #342b12; --warn-line: #a88420; --shadow: none; } .theme-hikers { --bg: #111713; --surface: #19211c; --surface-2: #222c26; --ink: #e6ede8; --muted: #9db0a4; --line: #2d3a32; --accent: #78c79b; --accent-ink: #0d1a12; --accent-soft: #203a2b; --link: #78c79b; --pin: #78c79b; --trip-bg: #3b2d14; --trip-line: #e3a44d; --trip-ink: #f5c983; --warn-bg: #352c12; --warn-line: #a88420; --route: #ff7a3d; --wpt: #6fb0ff; --shadow: none; } .theme-anglers { --bg: #0f1614; --surface: #17201d; --surface-2: #212c28; --ink: #e5ece8; --muted: #9aaea4; --line: #2c3934; --accent: #78c79b; --accent-ink: #0d1a12; --accent-soft: #1e3a2b; --link: #72b8d8; --pin: #72b8d8; --water: #72b8d8; --water-soft: #15303c; --water-deep: #0b2230; --trip-bg: #3a2c13; --trip-line: #e3a44d; --trip-ink: #f5c983; --warn-bg: #342b12; --warn-line: #a88420; --rise: #8fd6a9; --rise-bg: #1d3a29; --fall: #ffab85; --fall-bg: #43261a; --steady: #c2cdc7; --steady-bg: #2a3431; --night: rgba(120, 180, 220, .12); --shadow: none; } .leaflet-tile-pane { filter: brightness(.82) contrast(1.05); } } /* ---- base --------------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } a { color: var(--link); } h1, h2, h3 { line-height: 1.2; margin: 0; } h2 { font-size: 1.15rem; letter-spacing: .01em; } h3 { font-size: 1rem; } :where(.theme-anglers, .theme-brand) :is(h1, h2) { font-family: Georgia, "Times New Roman", serif; } :where(.theme-anglers) h2 { font-size: 1.25rem; letter-spacing: .005em; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; } .muted { color: var(--muted); } .small { font-size: .875rem; } .hidden, [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---- top bar + header -------------------------------------------------------- */ .topbar { background: var(--accent); color: var(--accent-ink); } :where(.theme-anglers) .topbar { border-bottom: 3px solid var(--water); } .topbar .wrap { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 4px; font-weight: 600; font-size: .95rem; } :where(.theme-anglers) .topbar .wrap { min-height: 46px; } .topbar a { color: inherit; text-decoration: none; } .topbar-row { justify-content: space-between; } .topbar-link { font-weight: 500; font-size: .9rem; opacity: .9; } .brand-mark { font-size: 1.1rem; } .brand-home { display: inline-flex; align-items: center; gap: 8px; } .brand-logo { display: block; width: 28px; height: 28px; } .topbar-nav { display: flex; gap: 18px; } /* Product and tool pages: "Outdoor Almanacs › The Hiker's Almanac". On phones only the mark shows. */ .crumb { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .crumb-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; opacity: .92; } .crumb-brand img { display: block; width: 24px; height: 24px; flex: none; } .crumb-sep { opacity: .6; font-weight: 400; } @media (max-width: 560px) { .crumb-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } .trail-head { padding: 20px 0 8px; } .trail-head h1 { font-size: clamp(1.5rem, 5.5vw, 2.2rem); overflow-wrap: anywhere; } .spot-head { padding: 22px 0 6px; } .spot-head h1 { font-size: clamp(1.6rem, 5.5vw, 2.3rem); overflow-wrap: anywhere; } .coords { margin-top: 4px; font-variant-numeric: tabular-nums; } .coords a { font-size: .875rem; margin-left: 4px; } .facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } :where(.theme-anglers) .facts { margin-top: 12px; } :where(.theme-anglers) .facts:empty { display: none; } .fact { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .9rem; font-variant-numeric: tabular-nums; } :where(.theme-anglers) .fact { background: var(--trip-bg); color: var(--trip-ink); border-color: var(--trip-line); padding: 5px 12px; } .fact b { font-weight: 600; } :where(.theme-anglers) .fact .muted { color: inherit; opacity: .8; } .privacy-line { margin: 10px 0 0; font-size: .9rem; color: var(--water); font-weight: 500; } .lede-sm { margin: 8px 0 0; max-width: 62ch; color: var(--muted); font-size: 1.02rem; } .banner { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--warn-line); font-size: .92rem; } /* ---- cards --------------------------------------------------------------------- */ main { padding-bottom: 32px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-top: 16px; } @media (min-width: 640px) { :where(.theme-anglers) .card { padding: 20px; } } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } /* ---- forecast (trail and spot) --------------------------------------------------- */ .trip-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: .95rem; } .trip-note.is-trip { background: var(--trip-bg); color: var(--trip-ink); } .pressure-chart { margin: 0 0 14px; padding: 12px 12px 6px; border-radius: 12px; background: var(--water-soft); } .pressure-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } #pressure-svg { width: 100%; overflow: hidden; } #pressure-svg svg { display: block; } .pressure-chart .p-line { fill: none; stroke: var(--water); stroke-width: 2.5; stroke-linejoin: round; } .pressure-chart .p-area { fill: var(--water); opacity: .12; } .pressure-chart .grid { stroke: var(--line); stroke-width: 1; } .pressure-chart .grid-h { stroke-dasharray: 2 4; } .pressure-chart .axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; } .pressure-chart .unit { font-weight: 600; } .pressure-chart .trip-band { fill: var(--trip-bg); opacity: .95; stroke: var(--trip-line); stroke-width: 1; } .pressure-chart .now { stroke: var(--trip-line); stroke-width: 1.5; stroke-dasharray: 3 3; } .days { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } :where(.theme-anglers) .days { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } /* Kept where it was on the Angler's site: the .day rules below still win for padding and emoji size. */ @media (max-width: 420px) { :where(.theme-anglers) .days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } :where(.theme-anglers) .day { padding: 8px 9px 10px; } :where(.theme-anglers) .day.on-trip { padding: 7px 8px 9px; } :where(.theme-anglers) .day-emoji { font-size: 1.6rem; } :where(.theme-anglers) .day-fact { flex-wrap: wrap; } :where(.theme-anglers) .day-fact dd { text-align: left; } :where(.theme-anglers) .trend { white-space: normal; } } .day { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; background: var(--surface); font-variant-numeric: tabular-nums; } :where(.theme-anglers) .day { display: flex; flex-direction: column; min-width: 0; } .day.on-trip { background: var(--trip-bg); border: 2px solid var(--trip-line); padding: 9px 11px 11px; } .day-name { font-weight: 700; } :where(.theme-anglers) .day-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .day-date { color: var(--muted); font-size: .85rem; } .day.on-trip .day-date, .day.on-trip .day-f, .day.on-trip .day-temp .lo, .day.on-trip .muted, .day.on-trip .fact-sub { color: var(--trip-ink); } .day-sym { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; min-height: 44px; } .day-emoji { font-size: 2rem; line-height: 1; } .day-text { font-size: .85rem; line-height: 1.25; } .day-temp { font-size: 1.15rem; font-weight: 700; } .day-temp .lo { font-weight: 500; color: var(--muted); } .day-f { font-size: .8rem; color: var(--muted); } .day-row { display: flex; gap: 12px; margin-top: 6px; font-size: .85rem; } .day-facts { margin: 8px 0 0; display: grid; gap: 2px; font-size: .85rem; } .day-fact { display: flex; justify-content: space-between; gap: 6px; } .day-fact dt { display: flex; gap: 4px; align-items: baseline; } .day-fact dd { margin: 0; text-align: right; font-weight: 600; } .fact-icon { width: 1.3em; display: inline-block; } .fact-sub { font-weight: 400; color: var(--muted); display: block; font-size: .78rem; } .day-pressure { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); margin-top: 10px; font-size: .88rem; } .day.on-trip .day-pressure { border-top-color: var(--trip-line); } .p-trends { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .trend { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-size: .76rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; } .trend-label { font-weight: 500; opacity: .85; } .trend-arrow { font-size: .95em; } .trend-rising { background: var(--rise-bg); color: var(--rise); } .trend-falling { background: var(--fall-bg); color: var(--fall); } .trend-steady { background: var(--steady-bg); color: var(--steady); } .tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 6px; margin-left: 4px; vertical-align: 2px; } :where(.theme-anglers) .tag { font-size: .68rem; margin-left: 0; white-space: nowrap; } .tag-trip { background: var(--trip-line); color: #fff; } @media (prefers-color-scheme: dark) { :where(.theme-anglers) .tag-trip { color: #231703; } } .tag-partial { background: var(--surface-2); color: var(--muted); } .skeleton { height: 150px; border-radius: 12px; background: var(--surface-2); animation: pulse 1.4s ease-in-out infinite; } :where(.theme-anglers) .skeleton { height: 220px; list-style: none; } .skeleton-row { height: 120px; margin-bottom: 10px; } @keyframes pulse { 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } } .updated { margin-top: 12px; } /* ---- sun, moon & solunar (spot) ------------------------------------------------- */ .astro-days { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .astro-day { border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-variant-numeric: tabular-nums; } .astro-day.on-trip { background: var(--trip-bg); border: 2px solid var(--trip-line); padding: 11px; } .astro-day.detached { margin-top: 14px; } .astro-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .astro-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .astro-moon { display: flex; align-items: center; gap: 6px; font-size: .92rem; } .moon-emoji { font-size: 1.4rem; line-height: 1; } .astro-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; font-size: .9rem; } .timeline { margin-top: 10px; } .timeline-svg { display: block; width: 100%; height: 30px; border-radius: 8px; background: var(--surface-2); } .astro-day.on-trip .timeline-svg { background: rgba(255, 255, 255, .45); } @media (prefers-color-scheme: dark) { .astro-day.on-trip .timeline-svg { background: rgba(0, 0, 0, .25); } } .tl-night { fill: var(--night); } .tl-major { fill: var(--water); } .tl-minor { fill: var(--water); opacity: .45; } .tl-tick { stroke: var(--line); stroke-width: 2; vector-effect: non-scaling-stroke; } .timeline-labels { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); margin-top: 2px; } .astro-day.on-trip .timeline-labels { color: var(--trip-ink); } .periods { margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 12px; font-size: .9rem; } .period { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .period-kind { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 6px; background: var(--water); color: #fff; min-width: 3.9em; text-align: center; } @media (prefers-color-scheme: dark) { .period-kind { color: #06202c; } } .period-minor .period-kind { background: var(--water-soft); color: var(--water); } .period-time { font-weight: 600; } .period-why { font-size: .82rem; } .astro-day.on-trip .period-why { color: var(--trip-ink); } .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; color: var(--muted); } .legend-item { display: inline-flex; align-items: center; gap: 6px; } .swatch { width: 18px; height: 10px; border-radius: 3px; display: inline-block; } .swatch-major { background: var(--water); } .swatch-minor { background: var(--water); opacity: .45; } .swatch-night { background: var(--night); border: 1px solid var(--line); } .disclaimer { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--water); background: var(--water-soft); border-radius: 0 8px 8px 0; } /* ---- map ------------------------------------------------------------------------ */ .map-card { padding: 0 !important; overflow: hidden; } .map-card .card-head { padding: 16px 16px 0; } #map { height: min(58vh, 460px); min-height: 280px; background: var(--surface-2); } .map-fallback { padding: 24px 16px; } .leaflet-container { font: inherit; font-size: .85rem; } .leaflet-control-layers-toggle { width: 44px !important; height: 44px !important; } .leaflet-control-layers label { padding: 6px 4px; font-size: .95rem; } .leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; font-size: 20px !important; } .pin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pin); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); } .pin span { transform: rotate(45deg); font-size: 16px; line-height: 1; } .wpt-pin { width: 22px; height: 22px; border-radius: 50%; background: var(--wpt); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); } /* ---- buttons, drop zones ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; background: var(--accent); color: var(--accent-ink); } .btn:focus-visible, select:focus-visible, .profile svg:focus-visible { outline: 3px solid var(--trip-line); outline-offset: 2px; } .btn-ghost { background: transparent; color: var(--link); border-color: var(--line); } .btn-link { background: none; border: 0; color: var(--link); text-decoration: underline; min-height: 44px; padding: 0 8px; font-weight: 500; } .drop { border: 2px dashed var(--line); border-radius: 12px; padding: 16px; text-align: center; transition: background .15s, border-color .15s; } :where(.theme-anglers) .drop { padding: 18px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; } .drop.dragging { border-color: var(--accent); background: var(--accent-soft); } :where(.theme-anglers) .drop.dragging { border-color: var(--water); background: var(--water-soft); } .drop-hint { flex-basis: auto; } :where(.theme-hikers) .drop .btn { width: 100%; max-width: 320px; } @media (max-width: 520px) { :where(.theme-anglers) .drop .btn { width: 100%; } .drop-hint { order: 3; flex-basis: 100%; } } .privacy { display: block; margin-top: 8px; } .gpx-error { color: #b3261e; margin-top: 10px; } .form-error { color: #b3261e; margin: 10px 0 0; } @media (prefers-color-scheme: dark) { .gpx-error, .form-error { color: #ffb4a9; } } /* ---- GPX (trail) --------------------------------------------------------------------- */ .map-card .gpx { padding: 16px; border-top: 1px solid var(--line); } .gpx-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .gpx-name { font-weight: 700; overflow-wrap: anywhere; } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; } :where(.theme-anglers) .stats { margin: 14px 0 0; } @media (min-width: 640px) { :where(.theme-hikers) .stats { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 700px) { :where(.theme-anglers) .stats { grid-template-columns: repeat(4, 1fr); } } .stat { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; } :where(.theme-anglers) .stat { padding: 10px 12px; } .stat-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } :where(.theme-anglers) .stat-label { font-size: .75rem; letter-spacing: .05em; } .stat-value { font-weight: 700; } :where(.theme-anglers) .stat-value { font-size: 1.45rem; font-family: Georgia, "Times New Roman", serif; } .stat-sub { font-size: .82rem; color: var(--muted); } :where(.theme-anglers) .stat-sub { font-size: .8rem; } .profile { margin-top: 4px; } .profile svg { display: block; width: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .profile .area { fill: var(--accent); opacity: .18; } .profile .line { fill: none; stroke: var(--accent); stroke-width: 2; } .profile .grid { stroke: var(--line); stroke-width: 1; } .profile .axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; } .profile .cursor { stroke: var(--route); stroke-width: 1.5; } .profile .cursor-dot { fill: var(--route); stroke: var(--surface); stroke-width: 2; } .readout { min-height: 1.5em; margin-top: 6px; font-variant-numeric: tabular-nums; font-size: .92rem; } .wpts { margin: 12px 0 0; padding: 0; list-style: none; } .wpts li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0 8px; border-top: 1px solid var(--line); } .wpts button { text-align: left; padding: 0; font-size: 1rem; font-weight: 600; } .wpt-dot { flex: none; width: 12px; height: 12px; margin-top: 16px; border-radius: 50%; background: var(--wpt); } /* ---- insights (catch log) ---------------------------------------------------------------- */ .empty h2 { margin-bottom: 4px; } .filters { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 6px 0 0; } .filters label { display: grid; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--muted); flex: 1 1 200px; max-width: 320px; } select { font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-height: 44px; padding: 0 10px; } .table-scroll { overflow-x: auto; margin-top: 10px; } .biggest { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .92rem; } .biggest th, .biggest td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .biggest thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .biggest tbody th { font-weight: 600; white-space: nowrap; } .biggest td { white-space: nowrap; } .biggest td.small { white-space: normal; min-width: 180px; } .num { text-align: right !important; } .charts { display: grid; gap: 0 16px; } @media (min-width: 820px) { .charts { grid-template-columns: 1fr 1fr; } .chart-wide { grid-column: 1 / -1; } } .chart-title { font-size: 1.05rem; margin-bottom: 8px; } .chart-body { width: 100%; overflow: hidden; } .chart-body svg { display: block; } .chart-card .bar { fill: var(--water); } .chart-card .bar-top { fill: var(--accent); } .chart-card .bar-label { fill: var(--ink); font-size: 12.5px; } .chart-card .bar-count { fill: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .chart-card .axis { fill: var(--muted); font-size: 11px; } .chart-card .grid { stroke: var(--line); } .chart-note { margin: 6px 0 0; } /* ---- missing coordinates ----------------------------------------------------------------- */ .steps { padding-left: 1.3em; } .steps li { margin: 8px 0; } kbd, code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88em; background: var(--surface-2); border-radius: 6px; padding: 1px 5px; } .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } /* ---- product pages ------------------------------------------------------------------------ */ .landing .wrap { max-width: 1120px; } .kicker { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--link); } .display { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.1rem, 6.5vw, 3.4rem); line-height: 1.05; margin-top: 10px; letter-spacing: -.01em; } :where(.theme-anglers) .display { font-size: clamp(2.2rem, 7vw, 3.5rem); line-height: 1.04; } .landing h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 3.6vw, 1.8rem); line-height: 1.15; } .landing:where(.theme-anglers) h2 { font-size: clamp(1.3rem, 3.4vw, 1.75rem); } .lede { font-size: 1.1rem; color: var(--muted); max-width: 52ch; margin: 16px 0 0; } .lp-hero { display: grid; gap: 28px; align-items: center; padding: 36px 16px 24px; } :where(.theme-anglers) .lp-hero { padding: 32px 16px 16px; } @media (min-width: 900px) { .lp-hero { grid-template-columns: 1fr 1.15fr; padding-top: 56px; } :where(.theme-anglers) .lp-hero { grid-template-columns: 1fr 1.05fr; } } .lp-shot { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(25, 40, 35, .12); } .btn-buy { background: var(--trip-line); color: #fff; } .btn-buy[aria-disabled="true"] { background: var(--surface-2); color: var(--muted); border-color: var(--line); cursor: default; } /* The Hiker's feature rows */ .lp-features { display: grid; gap: 40px; padding: 32px 16px; } .lp-feature { display: grid; gap: 18px; align-items: center; } .lp-feature p { font-size: 1.02rem; margin: 10px 0 0; max-width: 56ch; } @media (min-width: 900px) { .lp-feature { grid-template-columns: 1.1fr 1fr; gap: 40px; } .lp-feature:nth-child(even) img { order: 2; } } /* The Angler's feature cards */ .lp-grid { display: grid; gap: 14px; padding: 48px 16px 8px; } @media (min-width: 640px) { .lp-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 980px) { .lp-grid { grid-template-columns: repeat(3, 1fr); } } .lp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .lp-card h2 { font-size: 1.28rem; margin-top: 12px; } .lp-card p { margin: 8px 0 0; color: var(--muted); } .lp-card p b { color: var(--ink); } .lp-card-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .lp-card-accent h2 { margin-top: 0; } .lp-card-accent p { color: inherit; opacity: .92; } .lp-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--water-soft); display: grid; place-items: center; } .lp-icon svg { width: 34px; height: 34px; fill: var(--water); } .lp-icon .stroke { fill: none; stroke: var(--water); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .lp-icon .thin { stroke-width: 2; opacity: .5; } .lp-icon .dot { fill: var(--water-soft); } .lp-icon .cut { fill: var(--water-soft); } .lp-icon .soft { opacity: .5; } .lp-icon .block { fill: var(--accent); } .lp-demo { display: grid; gap: 16px; padding: 24px; margin-top: 8px; } :where(.theme-anglers) .lp-demo { margin-top: 32px; border-left: 5px solid var(--water); } .lp-demo h2 { margin-top: 6px; } .lp-demo p { max-width: 60ch; } @media (min-width: 900px) { .lp-demo { grid-template-columns: 1.4fr 1fr; align-items: center; } .lp-demo-cta { justify-content: flex-end; } } .lp-how, .lp-faq { padding-top: 40px; } .lp-steps { font-size: 1.05rem; padding-left: 1.4em; margin: 14px 0; } .lp-steps li { margin: 8px 0; } .lp-faq details { border-bottom: 1px solid var(--line); padding: 4px 0; max-width: 760px; } .lp-faq details:first-of-type { margin-top: 12px; border-top: 1px solid var(--line); } .lp-faq summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; } .lp-faq details p { margin: 0 0 14px; color: var(--muted); max-width: 64ch; } .lp-closing { padding: 40px 16px 8px; } .lp-closing-card { text-align: center; padding: 32px 20px; } .lp-closing-card .cta { justify-content: center; } /* ---- direct sales (Buy now, /thanks) ---------------------------------------------------------- */ .buy-form { display: contents; } .buy-form[hidden], [data-buy][hidden] { display: none !important; } .price-sale b { color: var(--ink); } .also-etsy { font-weight: 600; } .direct-page { padding-block: 24px 48px; } .direct-card { max-width: 720px; margin: 16px auto 0; padding: 28px 22px; } .direct-card .display { font-size: clamp(1.8rem, 6vw, 2.6rem); } .direct-card .lp-steps { margin-top: 22px; } .btn-big { min-height: 56px; padding: 0 28px; font-size: 1.1rem; } @media (max-width: 520px) { .direct-card .btn-big { width: 100%; } } .direct-page .more-from { max-width: 720px; margin: 0 auto; } /* ---- home page -------------------------------------------------------------------------------- */ .home-hero { display: flex; align-items: center; gap: 24px; padding: 52px 16px 8px; } .home-mark { display: block; width: 96px; height: 96px; flex: none; } .home-hero .display { margin-top: 0; } .home-hero .lede { margin-top: 10px; max-width: 60ch; } @media (max-width: 560px) { .home-hero { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 32px; } .home-mark { width: 64px; height: 64px; } } .home-section { padding-top: 44px; } .section-lede { color: var(--muted); max-width: 64ch; margin: 8px 0 0; } .product-grid { display: grid; gap: 18px; margin-top: 18px; } @media (min-width: 760px) { .product-grid { grid-template-columns: 1fr 1fr; } } .product-card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); } .product-shot img { display: block; width: 100%; height: auto; } .product-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 22px; } .product-name { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 3.4vw, 1.7rem); margin-top: 8px; } .product-pitch { font-size: 1.05rem; color: var(--muted); margin: 8px 0 0; } .product-body .cta { margin-top: auto; padding-top: 16px; } .product-body .price-note { margin: 8px 0 0; } .tool-grid { display: grid; gap: 14px; margin-top: 18px; } @media (min-width: 760px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } } .tool-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .tool-card h3 { font-family: Georgia, "Times New Roman", serif; font-size: 1.22rem; } .tool-card p { margin: 0; } .tool-card .tool-text { color: var(--muted); } .tool-card .btn { margin-top: auto; align-self: flex-start; } .privacy-card { background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); padding: 28px 24px; } .privacy-card p { max-width: 66ch; margin: 10px 0 0; opacity: .94; } .footer-contact a { font-weight: 600; } /* ---- More from Outdoor Almanacs ---------------------------------------------------------------- */ .more-from { padding-top: 48px; } .landing .more-title, .more-title { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.3rem, 3.4vw, 1.75rem); } .more-grid { display: grid; gap: 16px; margin-top: 14px; } @media (min-width: 700px) { .more-grid { grid-template-columns: repeat(auto-fill, minmax(460px, 600px)); } } .more-card { display: grid; grid-template-columns: 40% 1fr; overflow: hidden; background: var(--surface); color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); } .more-card img { display: block; width: 100%; height: 100%; object-fit: cover; } .more-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; } .more-name { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.22rem; line-height: 1.2; } .more-pitch { color: var(--muted); } .more-link { color: var(--link); font-weight: 600; margin-top: 4px; } .more-card:hover .more-link { text-decoration: underline; } .more-card:focus-visible { outline: 3px solid var(--trip-line); outline-offset: 2px; } @media (max-width: 480px) { .more-card { grid-template-columns: 1fr; } .more-card img { height: auto; aspect-ratio: 4 / 3; } } /* ---- footer ---------------------------------------------------------------------------------------- */ footer { border-top: 1px solid var(--line); padding: 20px 0 40px; font-size: .85rem; color: var(--muted); } footer p { margin: 6px 0; } .nav-note { font-weight: 700; color: var(--ink); }