/* Ski Touring Routes — front-end styles * * Everything is scoped under .skr so it cannot leak into the Astra theme. * Fonts and link colour are inherited from the theme on purpose. * * DARK MODE IS OPT-IN. Astra sites are light-only by default, so following * prefers-color-scheme here would put dark cards on a light page. Add * data-skr-theme="dark" (or class skr-dark) to or to enable it. */ .skr{ --skr-surface-1:#fcfcfb; --skr-surface-2:#f2f1ed; --skr-text-1:#0b0b0b; --skr-text-2:#52514e; --skr-text-3:#7d7b76; --skr-rule:#e4e3de; --skr-grid:#e8e7e3; --skr-accent:#2a78d6; /* ordinal slope ramp — validated: single hue family (37° spread), monotone lightness, ΔL ≥ 0.06, light end 2.44:1 on the surface */ --skr-slope-0:#a8ada4; /* under 30° — null category, off the ramp */ --skr-slope-1:#d9963c; /* 30–34° */ --skr-slope-2:#bf5a24; /* 35–39° */ --skr-slope-3:#8c2a14; /* 40°+ */ --skr-wash:rgba(11,11,11,.055); --skr-note-bg:#fbf6e9; --skr-note-edge:#e3d3a4; --skr-note-ink:#6b5518; margin:0 0 26px; color:var(--skr-text-1); } [data-skr-theme="dark"] .skr, .skr-dark .skr{ --skr-surface-1:#1a1a19; --skr-surface-2:#232322; --skr-text-1:#fff; --skr-text-2:#c3c2b7; --skr-text-3:#918f86; --skr-rule:#2e2e2c; --skr-grid:#2b2b29; --skr-accent:#3987e5; --skr-slope-0:#6b706a; --skr-slope-1:#f0b56a; --skr-slope-2:#e07a42; --skr-slope-3:#c1462c; --skr-wash:rgba(255,255,255,.07); --skr-note-bg:#241f12; --skr-note-edge:#4d422a; --skr-note-ink:#d8c48a; } .skr *{box-sizing:border-box} .skr p.skr-p{margin:0 0 14px;color:var(--skr-text-2)} .skr h3.skr-h3{margin:26px 0 8px;font-size:16px;font-weight:620;line-height:1.25} /* stat tiles ------------------------------------------------------------ */ .skr-tiles{ display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px; background:var(--skr-rule);border:1px solid var(--skr-rule); border-radius:12px;overflow:hidden; } .skr-tile{background:var(--skr-surface-1);padding:15px 17px} .skr-k{font-size:12px;color:var(--skr-text-3);letter-spacing:.02em;line-height:1.35} .skr-v{font-size:25px;font-weight:640;margin-top:3px;letter-spacing:-.02em;line-height:1.2} .skr-v small{font-size:13px;font-weight:500;color:var(--skr-text-2);margin-left:2px} /* card ------------------------------------------------------------------ */ .skr-card{ background:var(--skr-surface-1);border:1px solid var(--skr-rule); border-radius:12px;padding:20px; } .skr-figcap{font-size:13px;color:var(--skr-text-3);margin:10px 0 0} .skr-chart-head{display:flex;justify-content:space-between;align-items:baseline; gap:12px;flex-wrap:wrap;margin-bottom:14px} .skr-chart-title{font-size:15px;font-weight:620;line-height:1.3} .skr-chart-sub{font-size:13px;color:var(--skr-text-3);line-height:1.4} /* legend ---------------------------------------------------------------- */ .skr-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px; color:var(--skr-text-2);margin-top:12px} .skr-legend i{display:inline-block;width:11px;height:11px;border-radius:3px; margin-right:6px;vertical-align:-1px} /* elevation profile ------------------------------------------------------ */ .skr-plot-wrap{position:relative} .skr-profile{display:block;width:100%;height:auto;touch-action:pan-y} .skr-profile:focus-visible{outline:2px solid var(--skr-accent);outline-offset:3px;border-radius:6px} .skr-profile .skr-gridline{stroke:var(--skr-grid)} .skr-profile .skr-ax{fill:var(--skr-text-3)} .skr-profile .skr-wash{fill:var(--skr-wash)} .skr-profile .skr-s0{stroke:var(--skr-slope-0)} .skr-profile .skr-s1{stroke:var(--skr-slope-1)} .skr-profile .skr-s2{stroke:var(--skr-slope-2)} .skr-profile .skr-s3{stroke:var(--skr-slope-3)} .skr-profile .skr-peak{fill:var(--skr-text-1);stroke:var(--skr-surface-1)} .skr-profile .skr-peak-txt{fill:var(--skr-text-1);transition:opacity .12s} .skr-profile .skr-cross{stroke:var(--skr-text-3)} .skr-tip{ position:absolute;pointer-events:none;opacity:0;transition:opacity .1s; background:var(--skr-surface-1);border:1px solid var(--skr-rule); border-radius:8px;padding:8px 11px;font-size:12.5px;line-height:1.5; color:var(--skr-text-1);box-shadow:0 6px 22px rgba(0,0,0,.13); white-space:nowrap;z-index:5; } .skr-tip b{font-weight:620} .skr-tip .skr-r{color:var(--skr-text-2)} /* slope distribution ----------------------------------------------------- */ .skr-dist{display:flex;height:34px;border-radius:6px;overflow:hidden;gap:2px; background:var(--skr-surface-1)} .skr-dist>div{display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:600;min-width:2px} .skr-dist>div:first-child{border-radius:6px 0 0 6px} .skr-dist>div:last-child{border-radius:0 6px 6px 0} /* tables ----------------------------------------------------------------- */ .skr-tv{margin-top:14px} .skr-tv summary{cursor:pointer;font-size:13px;color:var(--skr-text-2); list-style:none;display:inline-flex;align-items:center;gap:6px} .skr-tv summary::-webkit-details-marker{display:none} .skr-tv summary::before{content:"\25B8";color:var(--skr-text-3)} .skr-tv[open] summary::before{content:"\25BE"} .skr-scroll{max-height:340px;overflow:auto;margin-top:10px; border:1px solid var(--skr-rule);border-radius:8px} .skr-scroll.skr-tall{max-height:none} .skr table{border-collapse:collapse;width:100%;font-size:13.5px;margin:0} .skr th,.skr td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--skr-rule)} .skr th{font-weight:620;color:var(--skr-text-2);background:var(--skr-surface-2); position:sticky;top:0;font-size:12.5px;z-index:1} .skr td.skr-num,.skr th.skr-num{text-align:right;font-variant-numeric:tabular-nums} .skr tr:last-child td{border-bottom:0} /* block wrappers carry no styling of their own — they only scope the tokens and the data-route id. Named skr-block-* so they can never collide with a component class such as .skr-map or .skr-profile. */ .skr-block{display:block} /* map -------------------------------------------------------------------- */ .skr-map{border-radius:12px;border:1px solid var(--skr-rule);z-index:0} .skr-map-fallback{ height:100%;display:flex;align-items:center;justify-content:center; text-align:center;padding:24px;color:var(--skr-text-3);font-size:14px;line-height:1.6; } /* download + provenance --------------------------------------------------- */ .skr-dl{ display:inline-flex;align-items:center;gap:10px; background:var(--skr-accent);color:#fff!important;text-decoration:none!important; font-weight:620;font-size:15px;padding:13px 22px;border-radius:10px; } .skr-dl:hover{filter:brightness(1.07)} .skr-prov{font-size:13px;color:var(--skr-text-3);margin:12px 0 0;line-height:1.6} /* callout ----------------------------------------------------------------- */ .skr-warn{ border-left:3px solid var(--skr-slope-2);background:var(--skr-surface-1); border-radius:0 10px 10px 0;padding:16px 20px;margin:18px 0; } .skr-warn strong{color:var(--skr-text-1)} .skr-warn p{margin:6px 0 0;color:var(--skr-text-2);font-size:14.5px;line-height:1.6} /* editor-only notice ------------------------------------------------------ */ .skr-admin-note{ border:1.5px dashed var(--skr-note-edge);background:var(--skr-note-bg); color:var(--skr-note-ink);border-radius:10px;padding:14px 18px;font-size:14px; } @media (max-width:600px){ .skr-card{padding:15px} .skr-v{font-size:22px} .skr-legend{gap:11px;font-size:12px} }