/* atlas-design:tokens:start v1.0.0 Generated by ~/repos/atlas-design/sync.mjs. Do not edit by hand. Edit atlas-design/tokens.css and re-run sync. */ :root { /* Surfaces */ --bg: #f4efe6; --bg-paper: #fcfaf5; --bg-card: #ffffff; --stone: #e4ded0; --snow: #fafaf7; /* Text */ --ink: #1a2820; --ink-soft: #4a5548; /* Darkened from #7a8478 on 2026-07-24. The old value was 3.40:1 on --bg and 3.73:1 on --bg-paper, below AA, and it is used on 9px to 12px text in 23 rules. Same hue and saturation, lightness dropped until it cleared 4.5:1 against --bg, --bg-paper, and --bg-card. */ --ink-faint: #676f65; /* Accents */ --rust: #8a3a1a; --rust-soft: #c17354; --pine: #2d4a2b; --pine-soft: #4f6b4c; --gold: #b8863a; --sky: #4a6b7a; --steam: #b8a090; /* Severity ramp for hazard and difficulty scales: flood risk, ACA grade, avalanche danger, fire danger. Low to high is --pine, --gold, --rust, --alert. Only --alert is new; the rest are the existing accents, so a severity scale stays inside the family palette. */ --alert: #a3301f; /* Lines */ --border: #d4cfc2; --border-soft: #e8e3d5; /* Notice cards. Avalanche forecasts, closures, seasonal warnings. Surface only: put --ink or --rust on top, never a light tone. */ --warn-bg: #fff7e6; --warn-border: #e4c88a; /* Print */ --print-paper: #ffffff; --print-ink: #000000; /* Elevation. Reserve for popups and modals, never resting cards in a grid. */ --shadow: 0 1px 2px rgba(26, 40, 32, 0.04), 0 4px 12px rgba(26, 40, 32, 0.04); --shadow-lg: 0 4px 24px rgba(26, 40, 32, 0.08), 0 12px 48px rgba(26, 40, 32, 0.06); /* Geometry. Previously stated in prose in DESIGN.md section 4. */ --radius: 3px; --radius-lg: 4px; /* Density. Default is the family's generous editorial spacing. */ --row-py: 0.7rem; --row-px: 0.9rem; --row-font: 0.85rem; } [data-theme="dark"] { --bg: #1a1513; --bg-paper: #201a16; --bg-card: #281f1a; --stone: #2a221d; --snow: #f0e8dc; --ink: #f0e8dc; --ink-soft: #c8bfb1; --ink-faint: #8a8278; /* --rust and --pine lightened slightly on 2026-07-24. The originals were 4.49:1 and 4.14:1 against --bg-card, below AA. Hue and saturation held, lightness raised to the first value clearing 4.5:1 on every dark surface. hut-atlas never caught these because its linter only knew the light theme. */ --rust: #c37758; --rust-soft: #d78f6f; --pine: #6f915c; --pine-soft: #8aaa76; --gold: #d4a056; --sky: #7a95a6; --steam: #b8a090; --alert: #d97b6c; --border: #3a3028; --border-soft: #302720; /* Deep enough that --rust clears AA on top of it (4.79:1). The first pass at #2b2318 landed on 4.498:1, which reads as 4.50 but fails. */ --warn-bg: #251e14; --warn-border: #5c4a2a; --print-paper: #ffffff; --print-ink: #000000; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.35), 0 12px 48px rgba(0, 0, 0, 0.3); } /* Opt in on for tables in the tens of thousands of rows, where the * default editorial spacing would push the useful columns off screen. */ [data-density="dense"] { --row-py: 0.35rem; --row-px: 0.55rem; --row-font: 0.75rem; } /* Respect the user's preference to avoid animated motion. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* atlas-design:tokens:end */ /* Slot Canyon Atlas styles. Palette and geometry come from the atlas-design token block that sync.mjs injects above this comment. This site runs the family's dark theme site wide: . A canyon atlas reading dark is the point, and the dark palette here is the same one hutatlas.com ships as an opt in, so the two remain siblings. Replaced the Tailwind CDN build in 2026-07. Tailwind's own docs say never to ship the CDN to production, and more importantly design-check.mjs reads :root and component rules but cannot see utility classes, so the site could not be held to the family contract while it was on Tailwind. */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--rust); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } /* ---------- layout ---------- */ .wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; } .wrap-md { max-width: 860px; margin: 0 auto; padding: 0 1.5rem; } .wrap-sm { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; } .section { border-bottom: 1px solid var(--border); } .section-body { padding: 2.5rem 0; } /* ---------- header ---------- */ .site-header { border-bottom: 1px solid var(--border); background: var(--bg-paper); } .site-header .wrap { display: flex; align-items: baseline; gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; flex-wrap: wrap; } .brand { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.25rem; color: var(--ink); letter-spacing: -0.01em; } .brand:hover { text-decoration: none; color: var(--ink); } .brand em { font-style: italic; color: var(--rust); } .site-nav { display: flex; gap: 1.25rem; } .site-nav a { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); } .site-nav a:hover { color: var(--rust); text-decoration: none; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-paper); margin-top: 4rem; } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; padding-top: 2rem; padding-bottom: 2rem; font-size: 0.82rem; color: var(--ink-soft); } .site-footer a { color: var(--ink-soft); } .site-footer a:hover { color: var(--rust); } /* ---------- hero ---------- */ .hero-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 2.5rem; align-items: center; padding: 3.5rem 0; } @media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; } } .hero-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.1; color: var(--ink); } .hero-title em { font-style: italic; color: var(--rust); } .hero-lede { margin-top: 1rem; font-size: 1.12rem; color: var(--ink-soft); } .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .btn { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.6rem 1.1rem; border-radius: var(--radius); background: var(--pine); color: var(--bg-paper); border: 1px solid var(--pine); transition: all 0.15s; } .btn:hover { background: var(--rust); border-color: var(--rust); text-decoration: none; } .btn-secondary { background: transparent; color: var(--ink-soft); border-color: var(--border); } .btn-secondary:hover { background: var(--stone); color: var(--rust); border-color: var(--rust); } .hero-figure figcaption { margin-top: 0.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.04em; color: var(--ink-faint); } .hero-figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .canyon-hero-figure { margin: 1.5rem 0; } .canyon-hero-figure img { width: 100%; max-height: 420px; object-fit: cover; } /* ---------- section headings ---------- */ .section-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.6rem; color: var(--ink); } .section-note { margin-top: 0.5rem; font-size: 0.88rem; color: var(--ink-soft); } .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } /* ---------- map ---------- */ #atlas-map { margin-top: 1.5rem; height: 60vh; border-radius: var(--radius-lg); border: 1px solid var(--border); } .leaflet-container { background: var(--bg); } .leaflet-popup-content-wrapper { background: var(--bg-card); color: var(--ink); border-radius: var(--radius-lg); } .leaflet-popup-content { font-family: 'Outfit', sans-serif; font-size: 13px; margin: 10px 12px; } .leaflet-popup-tip { background: var(--bg-card); } /* Leaflet ships its own link color with enough specificity to win. */ .leaflet-popup-content a { color: var(--rust) !important; background: transparent !important; text-decoration: none !important; } .popup-dim { color: var(--ink-faint); } /* Map pins, colored by ACA numeric grade on the shared severity ramp. g0 is ungraded. Set by atlas-map.js. */ .atlas-pin { width: 16px; height: 16px; border-radius: 50% 50% 50% 0; border: 2px solid var(--bg); transform: rotate(-45deg); box-shadow: var(--shadow); background: var(--ink-faint); } .atlas-pin.g1 { background: var(--pine); } .atlas-pin.g2 { background: var(--gold); } .atlas-pin.g3 { background: var(--rust); } .atlas-pin.g4 { background: var(--alert); } /* ---------- region grid ---------- */ .region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.75rem; list-style: none; } .region-card { display: block; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-paper); padding: 1rem; } .region-card:hover { border-color: var(--rust); text-decoration: none; } .region-name { font-family: 'Fraunces', serif; font-weight: 600; color: var(--ink); } .region-count { margin-top: 0.2rem; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--ink-faint); } /* ---------- canyon list (region pages) ---------- */ .canyon-list { list-style: none; margin-top: 2rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .canyon-row { padding: 1rem 0; border-bottom: 1px solid var(--border); } .canyon-row:last-child { border-bottom: none; } .canyon-row-inner { display: flex; align-items: flex-start; gap: 1rem; } .canyon-grade { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--ink-faint); width: 3.5rem; flex-shrink: 0; padding-top: 0.15rem; } .canyon-name { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 600; color: var(--ink); } .canyon-name:hover { color: var(--rust); text-decoration: none; } .canyon-desc { margin-top: 0.25rem; font-size: 0.88rem; color: var(--ink-soft); } /* ---------- badges ---------- Category scoped: the tone carries the meaning (ACA grade, flood severity), so these are exempt from the palette contrast check by design. Each badge is an outline on the page background, never light text on a mid tone fill. */ .chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; } .badge { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.22rem 0.5rem; border-radius: var(--radius); border: 1px solid var(--border); color: var(--ink-soft); } .badge-sev-1 { color: var(--pine); border-color: var(--pine); } .badge-sev-2 { color: var(--gold); border-color: var(--gold); } .badge-sev-3 { color: var(--rust); border-color: var(--rust); } .badge-sev-4 { color: var(--alert); border-color: var(--alert); } .badge-verified { color: var(--pine); border-color: var(--pine); } .badge-scaffold { color: var(--gold); border-color: var(--gold); } /* ---------- canyon detail ---------- */ .crumbs { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); } .crumbs a { color: var(--ink-soft); } .crumbs a:hover { color: var(--rust); } .page-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 2.5rem; line-height: 1.15; color: var(--ink); margin-top: 0.5rem; } .lead { margin-top: 1.5rem; font-family: 'Fraunces', serif; font-size: 1.1rem; line-height: 1.6; color: var(--ink); border-left: 3px solid var(--rust); padding-left: 1rem; } .body-copy { margin-top: 1rem; color: var(--ink-soft); line-height: 1.65; } .subhead { margin-top: 2.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } .logistics { margin-top: 0.75rem; width: 100%; border-collapse: collapse; } .logistics th { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; text-align: left; vertical-align: top; color: var(--ink-faint); width: 11rem; padding: var(--row-py) var(--row-px) var(--row-py) 0; border-bottom: 1px solid var(--border-soft); } .logistics td { color: var(--ink); padding: var(--row-py) 0; border-bottom: 1px solid var(--border-soft); } .source-list { list-style: none; margin-top: 0.6rem; font-size: 0.85rem; } .source-list li { padding: 0.15rem 0; color: var(--ink-soft); } /* ---------- prose (about) ---------- */ .prose { padding: 3rem 0; } .prose h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 2.4rem; color: var(--ink); line-height: 1.15; } .prose h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.35rem; color: var(--ink); margin-top: 2rem; } .prose p { margin-top: 0.85rem; color: var(--ink-soft); line-height: 1.7; } .prose code { font-family: 'JetBrains Mono', monospace; font-size: 0.85em; background: var(--stone); padding: 0.1rem 0.3rem; border-radius: var(--radius); color: var(--ink); } /* ---- Atlas table (home page) -------------------------------------------- */ /* Matches the Hut Atlas and Hot Springs Atlas shape: map first, then a sortable, filterable table of everything. */ .filters { margin: 0 0 1.25rem; } .filter-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; } .filter-input, .filter-select { font: inherit; font-size: .9rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--ink); } .filter-input { flex: 1 1 15rem; min-width: 0; } .filter-select { flex: 0 0 auto; } .filter-group { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; flex-wrap: wrap; } .filter-label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); flex: 0 0 4.5rem; } .chip-group { display: flex; flex-wrap: wrap; gap: .3rem; } .chip { font: inherit; font-size: .78rem; padding: .22rem .55rem; cursor: pointer; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--ink-soft); } .chip:hover { border-color: var(--ink-faint); color: var(--ink); } .chip.on { background: var(--pine); border-color: var(--pine); color: var(--bg-paper); } .filter-count { font-size: .82rem; color: var(--ink-faint); margin: .5rem 0 0; } .btn-link { font: inherit; font-size: .82rem; background: none; border: 0; padding: 0 0 0 .4rem; color: var(--pine); cursor: pointer; text-decoration: underline; } /* Wide table scrolls inside its own container; the page never scrolls sideways. */ .table-scroll { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius); } .atlas-table { width: 100%; border-collapse: collapse; font-size: var(--row-font, .85rem); } .atlas-table th, .atlas-table td { padding: var(--row-py, .4rem) var(--row-px, .6rem); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border-soft); } .atlas-table thead th { position: sticky; top: 0; z-index: 1; cursor: pointer; user-select: none; background: var(--bg-paper); color: var(--ink-soft); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; } .atlas-table thead th:hover { color: var(--ink); } .sort-arrow { opacity: .45; font-size: .8em; } .atlas-table td.num, .atlas-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .atlas-table tbody tr:hover { background: var(--bg-card); } .atlas-table .col-name { white-space: normal; min-width: 12rem; font-weight: 500; } .atlas-table .col-tags { white-space: normal; max-width: 16rem; } /* A blank cell means unrecorded, not zero. Left visibly empty on purpose. */ .atlas-table td.blank::after { content: ""; } .tag { display: inline-block; font-size: .7rem; padding: .1rem .4rem; margin: 0 .2rem .2rem 0; border: 1px solid var(--border-soft); border-radius: var(--radius); color: var(--ink-faint); } @media (max-width: 720px) { .filter-label { flex-basis: 100%; } .atlas-table { font-size: .78rem; } }