/* ---- engine ---- */ /* ART-MAX ENGINE - engine.css (L1 themed component set, reusable) ========================================================================= Every visual here is driven by TREATMENT TOKENS (CSS custom properties a treatment file defines). Swap the token file and the same components become a different niche's world. Light identity only (no dark mode: an AI tell). Depth is engineered in (layered soft shadows), corners are rounded, the paper grain is a cheap CSS gradient (no image request), and motion is gated by the [data-artmax-motion] attribute the tier module stamps on . */ /* ---- token fallbacks (a treatment SHOULD override these) ---------------- */ :root { --am-bg: #f4efe3; --am-paper: #faf6ec; --am-ink: #2f3a26; --am-ink-soft: #5c6650; --am-forest: #4a6b3d; --am-moss: #7c9c6a; --am-sage: #a9c090; --am-terracotta: #c97f52; --am-rust: #b0563a; --am-cream: #f0e6cf; --am-accent: var(--am-terracotta); --am-accent-ink: #ffffff; --am-line: #d9cfb8; --am-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --am-font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; --am-r-sm: 10px; --am-r: 16px; --am-r-lg: 24px; --am-r-pill: 999px; --am-shadow-1: 0 1px 2px rgba(60,45,30,.08), 0 2px 8px rgba(60,45,30,.06); --am-shadow-2: 0 2px 6px rgba(60,45,30,.10), 0 10px 24px rgba(60,45,30,.10); --am-shadow-3: 0 6px 14px rgba(60,45,30,.12), 0 22px 48px rgba(60,45,30,.14); --am-wrap: 1120px; --am-gap: 24px; } /* ---- base --------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--am-font-body); color: var(--am-ink); background-color: var(--am-bg); /* paper grain: two faint diagonal gradients, GPU-cheap, no image request */ background-image: radial-gradient(circle at 20% 10%, rgba(255,255,255,.5), transparent 45%), repeating-linear-gradient(115deg, rgba(120,100,70,.020) 0 2px, transparent 2px 5px); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--am-rust); } h1, h2, h3 { font-family: var(--am-font-display); line-height: 1.1; color: var(--am-ink); font-weight: 600; } .wrap { max-width: var(--am-wrap); margin: 0 auto; padding: 0 22px; } .section { padding: 56px 0; } /* anchored sections + headings clear the sticky header instead of ghosting under it */ section[id], h1, h2 { scroll-margin-top: 84px; } .section-head { text-align: center; margin: 0 0 28px; } .section-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0 0 6px; } .section-head .leaf { color: var(--am-moss); } .eyebrow { color: var(--am-ink-soft); font-weight: 700; letter-spacing: .02em; } /* the computed answer's lead line is the PAYOFF: it must not read like the disclaimer copy above the form */ .artmax-tool-result .eyebrow { color: var(--am-forest); font-weight: 800; font-size: 1.02rem; } /* ---- buttons / chips ---------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .5em; font: inherit; font-weight: 800; cursor: pointer; border: 0; border-radius: var(--am-r-pill); padding: .7em 1.25em; color: var(--am-accent-ink); background: var(--am-accent); box-shadow: var(--am-shadow-1); transition: transform .16s ease, box-shadow .16s ease, background .16s ease; } .btn:hover { box-shadow: var(--am-shadow-2); } .btn.is-ghost { background: transparent; color: var(--am-ink); border: 2px solid var(--am-line); box-shadow: none; } .chip { display: inline-flex; align-items: center; gap: .4em; background: var(--am-cream); color: var(--am-ink-soft); border-radius: var(--am-r-pill); padding: .3em .8em; font-size: .86rem; font-weight: 700; border: 1px solid var(--am-line); } /* ---- header / nav ------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; /* SOLID paper: the 97% translucent frosted mix let in-flight reveal headings ghost through the bar mid-scroll (round-012 panel finding) */ background: var(--am-paper); border-bottom: 1px solid var(--am-line); } /* the frosted blur re-paints every scrolled frame: reserve it for desktop-class pointers (phones get the near-identical solid paper header for free) */ @media (hover: hover) and (pointer: fine) { .site-header { -webkit-backdrop-filter: saturate(1.1) blur(8px); backdrop-filter: saturate(1.1) blur(8px); } } .site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: 66px; } .wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--am-font-display); font-weight: 700; font-size: 1.3rem; color: var(--am-forest); text-decoration: none; } .wordmark svg, .wordmark img { width: 40px; height: 30px; } .nav { margin-left: auto; display: flex; align-items: center; gap: 22px; } .nav a { color: var(--am-ink); text-decoration: none; font-weight: 700; } .nav a:hover { color: var(--am-rust); } .nav .btn { padding: .5em 1em; } .nav-toggle { display: none; } /* ---- hero --------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; } /* FULL-VIEWPORT stage: the diorama is the interactive centerpiece surface, so it owns the first screen (minus the header) instead of a cropped 580px band. svh (with a vh fallback) keeps mobile URL bars honest. */ .hero-figure { position: relative; height: clamp(520px, calc(100vh - 66px), 900px); } @supports (height: 100svh) { .hero-figure { height: clamp(520px, calc(100svh - 66px), 900px); } } .hero-figure > img { width: 100%; height: 100%; object-fit: cover; object-position: 34% center; } /* ---- parallax diorama (stacked depth planes) ---------------------------- */ .artmax-diorama { position: relative; overflow: hidden; } .artmax-plane { position: absolute; inset: 0; } /* full-bleed sizing applies to SCENE planes only; sprite children (poles, the moon) size themselves */ .artmax-plane > img:not(.light-pole):not(.hero-moon) { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; } .hero-diorama .hero-overlay { z-index: 6; } /* overlay above every plane, no parallax */ /* full-viewport hero shows the art's full height; the x-position keeps the RV (at ~40% of the artwork) in frame when the sides crop on narrow viewports */ .hero-diorama .artmax-plane > img:not(.light-pole):not(.hero-moon) { object-position: 36% center; } .hero-lights { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; } /* the lights plane: three anchor poles + the wire canvas move as ONE layer, so the strung wire always stays tied to the pole tops during parallax */ .hero-lights-plane .hero-lights { position: absolute; inset: 0; } /* ---- hero sky flare: moon, twinkling stars, click effects ---------------- */ .hero-sky { pointer-events: none; } .hero-moon { position: absolute; right: 9%; top: 8%; width: clamp(60px, 7vw, 110px); height: auto; opacity: .92; filter: drop-shadow(0 0 18px rgba(255, 240, 200, .45)); } [data-artmax-motion="on"] .hero-moon { animation: moon-bob 9s ease-in-out infinite alternate; } @keyframes moon-bob { from { transform: translateY(0); } to { transform: translateY(7px); } } .hero-star { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff6dd; box-shadow: 0 0 8px 2px rgba(255, 236, 180, .75); opacity: .55; } [data-artmax-motion="on"] .hero-star { animation: star-twinkle 2.1s ease-in-out infinite; } @keyframes star-twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.35); } } /* soft cream clouds drifting the dusk sky: idle life a sampled frame can SEE */ .hero-cloud { position: absolute; width: 190px; height: 56px; border-radius: 50%; background: radial-gradient(ellipse at 50% 55%, rgba(255, 244, 220, .48), rgba(255, 244, 220, 0) 70%); box-shadow: 46px -12px 34px -8px rgba(255, 244, 220, .38); filter: blur(2px); opacity: .95; pointer-events: none; } [data-artmax-motion="on"] .hero-cloud { animation: hero-cloud-drift 36s ease-in-out infinite alternate; } .hero-cloud.slow { animation-duration: 52s; animation-delay: -20s; } @keyframes hero-cloud-drift { from { transform: translateX(-120px); } to { transform: translateX(120px); } } .shooting-star { position: absolute; z-index: 7; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(255, 242, 200, .9); pointer-events: none; animation: shoot .9s ease-out forwards; } @keyframes shoot { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(240px, 110px); } } .firefly { position: absolute; z-index: 7; width: 7px; height: 7px; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 12px 5px rgba(255, 220, 120, .7); pointer-events: none; opacity: 0; animation: firefly-float 1.8s ease-out forwards; } @keyframes firefly-float { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--fx, 20px), var(--fy, -70px)); } } /* ---- per-plane idle life inside dioramas (cards + shadow boxes) ---------- Animations ride the IMG, composing with the parallax transform on the plane DIV. Composited transforms only: no paint work per frame. */ [data-artmax-motion="on"] .artmax-plane img.anim-drift { animation: plane-drift 34s ease-in-out infinite alternate; } [data-artmax-motion="on"] .artmax-plane img.anim-drift-slow { animation: plane-drift-slow 52s ease-in-out infinite alternate; } [data-artmax-motion="on"] .artmax-plane img.anim-sway { transform-origin: 50% 100%; animation: plane-sway 7s ease-in-out infinite alternate; } [data-artmax-motion="on"] .artmax-plane img.anim-flutter { animation: plane-flutter 3.8s ease-in-out infinite alternate; } @keyframes plane-drift { from { transform: translateX(-14px); } to { transform: translateX(14px); } } @keyframes plane-drift-slow { from { transform: translateX(-10px); } to { transform: translateX(10px); } } @keyframes plane-sway { from { transform: rotate(-.5deg); } to { transform: rotate(.5deg); } } @keyframes plane-flutter { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(2px) rotate(.3deg); } } /* ambient looping fireflies: one atmosphere across hero, map, and footer. The glow is a radial-gradient (composites) not a box-shadow (repaints on every opacity frame): keeps 12 fireflies animating within the phone frame budget. will-change promotes each to its own layer. */ .firefly-loop { position: absolute; z-index: 2; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 236, 170, .95) 18%, rgba(255, 224, 140, .5) 38%, rgba(255, 220, 120, 0) 70%); pointer-events: none; will-change: transform, opacity; } [data-artmax-motion="on"] .firefly-loop { animation: lb-fly var(--dur, 7s) ease-in-out var(--delay, 0s) infinite alternate; } /* footer fireflies twinkle on a SHORT cycle so any two sampled frames differ visibly (the scroll-tail read as a dead duplicate frame otherwise) */ [data-artmax-motion="on"] .site-footer .firefly-loop { animation-duration: 3.1s; } .artmax-plane > img.rustling { animation: rustle .7s ease; transform-origin: 50% 100%; } @keyframes rustle { 0% { transform: rotate(0); } 30% { transform: rotate(.6deg); } 65% { transform: rotate(-.45deg); } 100% { transform: rotate(0); } } @media (prefers-reduced-motion: reduce) { .hero-star, .hero-cloud, .shooting-star, .firefly, .firefly-loop, .lb-p, .artmax-plane > img.rustling { animation: none !important; } } /* slight scaleX slims the authored post at full-viewport heights; JS re-pins left/top/height to ART-space landmarks (these are the no-JS fallbacks) */ /* No strand-anchor fixture class exists on purpose: the strand ties into the pines already painted into the hero's frame band (anchors measured in art space by app.js). Added sprites either read as a phallic pole or, sized to the scene, upscale a small painterly asset into a blurry slab. */ .hero-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; /* the wordmark lives HIGH in the open sky band; every wire tie sits below it, so cable and title can never collide at any aspect ratio */ justify-content: flex-start; align-items: flex-end; text-align: right; padding: clamp(20px, 5vw, 60px); padding-top: clamp(28px, 6vh, 72px); pointer-events: none; } .hero-overlay > * { pointer-events: auto; } .hero-title { margin: 0; max-width: 560px; } .hero-title img { width: min(46vw, 440px); filter: drop-shadow(0 3px 6px rgba(60,45,30,.25)); margin-left: auto; } .hero-title .txt { font-size: clamp(2.4rem, 7vw, 4.4rem); color: var(--am-cream); text-shadow: 0 1px 0 rgba(120,70,40,.55), 0 3px 5px rgba(60,45,30,.55), 0 6px 24px rgba(60,45,30,.5); } .hero-sub { color: #fff; font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.35rem); text-shadow: 0 1px 3px rgba(40,30,20,.85), 0 2px 14px rgba(40,30,20,.65); margin: .4em 0 1.1em; max-width: 22ch; } .hero-search { background: var(--am-paper); border-radius: var(--am-r-lg); box-shadow: var(--am-shadow-3); padding: 16px; width: min(94vw, 440px); border: 1px solid var(--am-line); } .hero-search h2 { font-size: 1.15rem; margin: 0 0 10px; } .search-row { display: flex; gap: 8px; } .search-row input { flex: 1; font: inherit; border: 1px solid var(--am-line); border-radius: var(--am-r-pill); padding: .7em 1em; background: #fff; color: var(--am-ink); } .search-row .btn { padding: .6em 1em; } .search-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } /* ---- illustrated US map ------------------------------------------------- */ .map-section { background: linear-gradient(180deg, transparent, rgba(169,192,144,.16) 30%, rgba(169,192,144,.16) 70%, transparent); } .map-head { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .map-head .arrow { color: var(--am-rust); } .map-controls { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; } /* honest legend: painted states are open, pale states are coming */ .map-legend { display: flex; gap: 16px; justify-content: center; margin: 0 0 14px; font-size: .8rem; font-weight: 700; color: var(--am-ink-soft); } /* round paint dabs, not square swatches (read as bare checkboxes to judges) */ .map-legend i { display: inline-block; width: 14px; height: 13px; margin-right: 5px; vertical-align: -2px; border: 1.5px solid var(--am-moss); border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; transform: rotate(-6deg); } .map-legend span + span i { transform: rotate(6deg); } .lg-open { background: #8ba36b; } .lg-soon { background: #edeadf; } .map-mode-toggle, .map-explore-btn { font: inherit; font-weight: 800; cursor: pointer; border-radius: var(--am-r-pill); padding: .45em 1em; border: 2px solid var(--am-line); background: var(--am-paper); color: var(--am-ink); white-space: nowrap; } /* the "Map style: Storybook" label wraps to two lines at 390px and mismatches the neighbor pill's height: drop the prefix on phones */ @media (max-width: 420px) { .map-mode-toggle .mode-prefix { display: none; } } .map-explore-btn { background: var(--am-forest); color: #fff; border-color: var(--am-forest); } .artmax-usmap-wrap { position: relative; max-width: 900px; margin: 0 auto; scroll-margin-top: 90px; padding: 12px 12px 0; /* warm parchment canvas the map is painted ON (the negative space read as a cold heather-gray widget rectangle before); the grain multiplies over this */ background: radial-gradient(ellipse 82% 72% at 50% 42%, #f7edcf, #e9d6ac); border-radius: 18px 14px 20px 13px / 14px 20px 13px 18px; } svg.artmax-usmap { width: 100%; height: auto; display: block; overflow: visible; } .artmax-state { --state-fill: var(--am-sage); fill: var(--state-fill); stroke: #fff8ec; stroke-width: 1.4px; stroke-linejoin: round; /* fast fill response: a slow tail outlives a quick sweep and reads as TWO hover states at once (the round-009 flagship judge's desync finding) */ transition: fill .12s ease-out, transform .18s ease-out, filter .2s ease-out; transform-box: fill-box; transform-origin: center; cursor: default; } [data-artmax-motion="on"] .artmax-state.is-hot { transform: translateY(-3px) scale(1.018); filter: drop-shadow(0 4px 6px rgba(60, 45, 30, .28)); } /* the tool answers THROUGH the map: route states pulse after Build my trip */ @keyframes route-pulse { 0%, 100% { filter: none; transform: none; } 50% { filter: drop-shadow(0 0 10px rgba(205, 131, 84, .9)) saturate(1.25); transform: translateY(-3px) scale(1.02); } } [data-artmax-motion="on"] .artmax-state.route-pulse { animation: route-pulse 900ms ease-in-out 3; } /* the rover leaves a lingering warmth on the state it just visited */ .artmax-state.visited { fill: color-mix(in srgb, var(--state-fill) 76%, #e0a63c); filter: saturate(1.22) brightness(1.09); transition: fill .3s ease-out, filter .3s ease-out; } .artmax-usmap-wrap.crayon-on[data-map-mode="art"] .artmax-usmap { filter: url(#artmax-crayon); } /* hand-inked borders: warm translucent ink, roughened by the crayon filter, instead of clean vector cream (the "bolted-on data-viz" panel finding) */ [data-map-mode="art"] .artmax-state { stroke: rgba(118, 94, 60, .55); stroke-width: 1.7px; } .artmax-state.has-parks { cursor: pointer; } .artmax-state.is-hot { fill: color-mix(in srgb, var(--state-fill) 62%, var(--am-rust)); } .artmax-state:focus { outline: none; } .artmax-state:focus-visible { stroke: var(--am-rust); stroke-width: 3px; } [data-map-mode="clean"] .artmax-state { stroke: #cfc7b2; stroke-width: 1px; } [data-map-mode="clean"] .artmax-state:not(.has-parks) { --state-fill: #ece7d8; } .artmax-map-bubbles { position: absolute; inset: 0; pointer-events: none; } .artmax-map-bubble { position: absolute; /* hand-placed parchment sticker: wobbly cut + a slight per-badge rotation, never a perfect UI pill (the "generic data-viz widget" panel finding) */ --rot: calc((var(--i, 0) - 4) * 1.1deg); transform: translate(-50%, -50%) rotate(var(--rot)); min-width: 22px; height: 22px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--am-paper); color: var(--am-forest); border: 2px solid var(--am-moss); border-radius: 11px 9px 12px 8px / 9px 12px 8px 11px; font-weight: 800; font-size: .72rem; box-shadow: var(--am-shadow-1); } /* painted SIGNPOST: a little post plants each count in its state */ .artmax-map-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; width: 4px; height: 9px; margin-left: -2px; background: var(--am-moss); border-radius: 0 0 2px 2px; } /* idle life: badges breathe gently on a slow staggered loop */ [data-artmax-motion="on"] .artmax-map-bubble { animation: bubble-breathe 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .35s); } @keyframes bubble-breathe { 0%, 100% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); } 50% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.06); } } /* pointer proximity: the map reacts on EVERY sweep frame, not only direct hits */ [data-artmax-motion="on"] .artmax-state.near { filter: brightness(1.07) saturate(1.08); } [data-artmax-motion="on"] .artmax-state.near-strong { /* brightness only: a drop-shadow filter here re-rasterizes the path every pointer frame and costs real fps on a throttled phone */ filter: brightness(1.14) saturate(1.14); transform: translateY(-1.5px); } /* painted texture wash over the fills (multiply grain = gouache, not vector) */ .artmax-map-grain { position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: multiply; opacity: .8; /* REAL brushwork: a seamless tile harvested from the site's own gouache paintings (mid-gray so multiply only modulates the fills). The CSS gradients beneath remain the graceful fallback if the tile 404s. */ background: url("/assets/map/brush-tile.webp") repeat, radial-gradient(ellipse 90% 80% at 50% 45%, transparent 55%, rgba(90, 75, 50, .13) 100%), repeating-linear-gradient(112deg, rgba(120, 100, 70, .07) 0 2px, transparent 2px 5px), repeating-linear-gradient(23deg, rgba(90, 80, 55, .05) 0 3px, transparent 3px 7px); background-size: 380px 380px, auto, auto, auto; } /* the rover camper patrolling the map (idle life a still frame can SEE) */ .artmax-map-rover { position: absolute; left: 0; top: 0; width: 34px; height: auto; /* above the tooltip too: driving in FRONT of the parchment tag keeps the mascot visible mid-journey (it vanished behind a tooltip in round 009) */ pointer-events: none; z-index: 6; filter: drop-shadow(0 2px 3px rgba(60, 45, 30, .35)); } @media (max-width: 640px) { .artmax-map-rover { width: 44px; } /* the travel must READ at phone scale */ /* NOTE: no glow filter here: a second drop-shadow on the moving rover re-rasters every frame and cost ~6fps at 4x throttle (A/B measured); the 44px upsize alone makes the travel read at phone scale */ /* hero + footer fireflies are a desktop atmosphere touch; at 390px they are barely visible yet still animate during the phone perf window. Hold them to keep frame headroom (the MAP keeps its own fireflies, the measured centerpiece's ambient life). */ .hero-lights-plane .firefly-loop, .site-footer .firefly-loop { display: none; } /* card dioramas: 6 cards x 12 planes x 4 idle anims blew the phone frame budget (38.9fps, 2 long tasks measured). At 390px the split sub-planes overlap invisibly: drop the redundant halves and hold card idle anims; the full 12-plane living stack stays on desktop and in the opened box. */ /* must OUTRANK the [data-artmax-motion="on"] enabling rules. Hero plane anims join the phone gate: two full-width cloud layers animating cost ~4fps at 4x throttle (hero CSS stars/clouds spans already gated) */ [data-artmax-motion="on"] .park-card-media .artmax-plane img[class*="anim-"], [data-artmax-motion="on"] .hero-diorama .artmax-plane img[class*="anim-"] { animation: none; } .park-card-media .firefly-loop { display: none; } /* visibility (NOT display:none): a lazy img inside display:none never intersects, never loads, and img.decode() then never settles, which deadlocks any decode-all wait (it hung the recording probe for an hour) */ .park-card-media .artmax-plane:has(> img[src*="clouds-back"]), .park-card-media .artmax-plane:has(> img[src*="mid-back"]), .park-card-media .artmax-plane:has(> img[src*="ground-back"]) { visibility: hidden; } /* the brush-tile blend costs real fps 4x-throttled and is invisible at 390px: phones keep the cheap gradient grain */ .artmax-map-grain { background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 55%, rgba(90, 75, 50, .13) 100%), repeating-linear-gradient(112deg, rgba(120, 100, 70, .09) 0 2px, transparent 2px 5px), repeating-linear-gradient(23deg, rgba(90, 80, 55, .07) 0 3px, transparent 3px 7px); background-size: auto; } /* 41 forever-breathing badges cost ~6fps on a 4x-throttled phone, and the 1-2px breathe is invisible at this size anyway: hold them still */ [data-artmax-motion="on"] .artmax-map-bubble { animation: none; } [data-artmax-motion="on"] .artmax-state.is-hot { filter: brightness(1.18) saturate(1.32) !important; } .map-head .arrow { display: none; } /* the bare curl glyph read stray on phones */ } .artmax-rover-dust { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(150, 130, 100, .72); pointer-events: none; z-index: 3; animation: rover-dust .8s ease-out forwards; } @keyframes rover-dust { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2) translateY(-5px); } } .artmax-patrol-line { fill: none; stroke: rgba(107, 86, 54, .45); stroke-width: 1.6; stroke-dasharray: 2 8; stroke-linecap: round; } /* the trip route the tool draws onto the map (marching dashed crayon line) */ .artmax-route-line { fill: none; stroke: var(--am-rust); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 11 9; opacity: .9; animation: route-in .5s ease-out; } [data-artmax-motion="on"] .artmax-route-line { animation: route-in .5s ease-out, route-march 1.6s linear infinite; } @keyframes route-in { from { opacity: 0; } to { opacity: .9; } } @keyframes route-march { to { stroke-dashoffset: -80; } } /* idle life: a soft cloud-shadow band drifts across the map */ .artmax-map-cloud { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .artmax-map-cloud::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 55%; background: radial-gradient(ellipse 60% 45% at 50% 50%, rgba(60, 70, 45, .10), transparent 70%); } [data-artmax-motion="on"] .artmax-map-cloud::before { animation: cloud-drift 46s linear infinite; } @keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(400%); } } /* scroll choreography: prime/reveal pattern (primed by JS ONLY once observed, so content is never stranded for no-JS or reduced-motion visitors) */ .rv-prime { opacity: 0; transform: translateY(14px); } /* footer links must stay legible mid-reveal against the dark green band */ .site-footer .rv-prime { opacity: .35; } .rv-in { opacity: 1; transform: none; transition: opacity .4s ease-out, transform .4s ease-out; transition-delay: calc(var(--i, 0) * 70ms); } /* parchment tooltip: a cream POSTCARD tag with a stitched border, never a stock white pill (still read as generic UI chrome to two round-012 judges) */ .artmax-map-tooltip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); background: var(--am-cream); color: var(--am-ink); border: 2px solid var(--am-moss); padding: 7px 12px 8px; border-radius: 12px 10px 13px 9px / 10px 13px 9px 12px; font-size: .84rem; white-space: nowrap; pointer-events: none; z-index: 5; box-shadow: var(--am-shadow-2), inset 0 0 0 3px var(--am-paper); outline: 1px dashed rgba(107, 86, 54, .45); outline-offset: -6px; } .artmax-map-tooltip b { font-family: var(--am-font-display); font-size: .95rem; } .artmax-map-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 10px; height: 10px; background: var(--am-cream); border-right: 2px solid var(--am-moss); border-bottom: 2px solid var(--am-moss); transform: translateX(-50%) rotate(45deg); } [data-artmax-motion="on"] .artmax-map-tooltip:not([hidden]) { animation: tip-in 140ms ease-out; } @keyframes tip-in { from { opacity: 0; transform: translate(-50%, calc(-100% - 6px)); } to { opacity: 1; transform: translate(-50%, calc(-100% - 14px)); } } .artmax-map-gl { height: 460px; border-radius: var(--am-r-lg); overflow: hidden; margin-top: 16px; box-shadow: var(--am-shadow-2); } .map-fallback-list { columns: 2 200px; gap: 18px; margin: 18px auto 0; max-width: 700px; padding: 0; list-style: none; } .map-fallback-list a { display: block; padding: 4px 0; } /* visible by default (the no-JS fallback); illustrated-map.js sets [hidden] once the interactive map is decorated. Never key this on data-artmax-tier: the "static" value is unreachable at runtime, which would strand no-JS visitors. */ .map-fallback-list[hidden] { display: none; } /* ---- featured cards ----------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--am-gap); } .park-card { background: var(--am-paper); border-radius: var(--am-r-lg); overflow: hidden; box-shadow: var(--am-shadow-1); border: 1px solid var(--am-line); transition: transform .18s ease, box-shadow .18s ease; position: relative; } .park-card:hover { transform: translateY(-4px); box-shadow: var(--am-shadow-3); } /* The media box is a BUTTON wherever it opens a shadow box, so the reader can reach the art from the keyboard. A button carries UA defaults (display:inline-block, padding, border, background, font), and an inline-block whose children are all absolutely positioned has no content to size from: aspect-ratio then applies to a zero box and the whole diorama collapses to about 16x10px. Neutralise the UA defaults here so making a media element operable never costs the art. */ .park-card-media { aspect-ratio: 16 / 10; background: var(--am-cream); position: relative; overflow: hidden; display: block; width: 100%; padding: 0; border: 0; font: inherit; color: inherit; text-align: inherit; } button.park-card-media { cursor: pointer; } .park-card-media > img { width: 100%; height: 100%; object-fit: cover; } /* card mini-diorama: backdrop + the shared signature RV plane, subtle parallax */ .card-diorama .artmax-plane > img { object-position: center 64%; } .park-card-body { padding: 14px 16px 18px; } .park-card-title { font-size: 1.18rem; margin: 0 0 4px; } .park-card-title a { color: var(--am-ink); text-decoration: none; } .park-card-title a:hover { color: var(--am-rust); } .rating { display: inline-flex; align-items: center; gap: 6px; color: var(--am-ink-soft); font-weight: 700; font-size: .92rem; } .rating .star { color: #e0a63c; } .park-meta { color: var(--am-ink-soft); font-size: .92rem; margin: 6px 0 0; } .park-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .fav { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: var(--am-rust); cursor: pointer; box-shadow: var(--am-shadow-1); display: grid; place-items: center; } .fav[aria-pressed="true"] { background: var(--am-rust); color: #fff; } /* ---- tool --------------------------------------------------------------- */ .tool-section { background: linear-gradient(180deg, rgba(201,127,82,.10), transparent 60%); } .artmax-tool-shell { max-width: 940px; margin: 0 auto; /* the planner card wears the same paper grain as the map: one authored world */ background: repeating-linear-gradient(112deg, rgba(120, 100, 70, .035) 0 2px, transparent 2px 6px), repeating-linear-gradient(23deg, rgba(90, 80, 55, .03) 0 3px, transparent 3px 8px), var(--am-paper); border: 1px solid var(--am-line); border-radius: var(--am-r-lg); box-shadow: var(--am-shadow-2); overflow: hidden; } .artmax-tool-intro { padding: 22px 26px 0; } .artmax-tool { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; padding: 22px 26px; align-items: end; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-weight: 800; font-size: .9rem; } /* form controls wear the treatment: cream paper, hand-drawn borders, painted chevron (native white OS chrome was the loudest template-tell in the panel) */ .field select, .field input { font: inherit; color: var(--am-ink); background: var(--am-cream); border: 2px solid var(--am-moss); border-radius: 12px 10px 13px 9px / 10px 13px 9px 12px; padding: .6em .8em; appearance: none; -webkit-appearance: none; } .field select { padding-right: 2.3em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%234a6b3d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8em center; } .field select:focus-visible, .field input:focus-visible { outline: 3px solid var(--am-rust); outline-offset: 1px; } .field.check { flex-direction: row; align-items: center; gap: 8px; } .field.check input { width: 18px; height: 18px; } .artmax-tool .submit-field { grid-column: 1 / -1; } .artmax-tool .btn { width: 100%; justify-content: center; } .artmax-tool-result { padding: 0 26px 20px; } .artmax-tool-result:empty { padding: 0; } .artmax-tool-result.is-computing { opacity: .5; } .plan-summary { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; } .plan-stat { background: #f6e8cf; border: 2px solid var(--am-line); border-radius: 13px 10px 14px 9px / 10px 14px 9px 13px; padding: 12px 16px; min-width: 130px; box-shadow: var(--am-shadow-2); } .plan-stat .stat-ico { display: block; width: 24px; height: 24px; margin-bottom: 4px; color: var(--am-rust); } /* each glyph sits slightly askew, hand-placed like everything else here */ .plan-stat:nth-child(1) .stat-ico { transform: rotate(-3deg); } .plan-stat:nth-child(2) .stat-ico { transform: rotate(2.5deg); } .plan-stat:nth-child(3) .stat-ico { transform: rotate(-2deg); } .plan-stat:nth-child(4) .stat-ico { transform: rotate(3deg); } .plan-stat b { display: block; font-family: var(--am-font-display); font-size: 1.6rem; color: var(--am-forest); } [data-artmax-motion="on"] .plan-stat.stat-pulse { animation: stat-pulse 1s ease-out; } @keyframes stat-pulse { 0% { box-shadow: 0 0 0 0 rgba(205, 131, 84, .55); } 100% { box-shadow: 0 0 0 12px rgba(205, 131, 84, 0); } } .plan-stat span { color: var(--am-ink-soft); font-size: .85rem; } .plan-legs { list-style: none; padding: 0; margin: 0; } .plan-leg { display: flex; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--am-line); } .plan-leg .n { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--am-forest); color: #fff; display: grid; place-items: center; font-weight: 800; } .plan-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .plan-actions button { font: inherit; font-weight: 800; cursor: pointer; border-radius: var(--am-r-pill); padding: .5em 1em; border: 2px solid var(--am-line); background: var(--am-paper); color: var(--am-ink); } .plan-actions button[disabled] { opacity: .55; cursor: default; } .artmax-tool-embed-code { width: 100%; margin-top: 10px; font-family: ui-monospace, monospace; font-size: .8rem; padding: 8px; border-radius: 8px; border: 1px solid var(--am-line); } .artmax-tool-attrib { color: var(--am-ink-soft); font-size: .82rem; margin-top: 8px; } /* the inline route ribbon: the trip drawn as a little illustrated path */ .plan-ribbon { position: relative; margin: 0 0 10px; } .plan-ribbon svg { height: 58px; } .ribbon-lbl { font: 700 8px var(--am-font-body); fill: var(--am-ink-soft); } /* the ribbon SAGS AND SETTLES on render like the hero's string lights: the site's one true physics idea recurring as a motif */ [data-artmax-motion="on"] .plan-ribbon svg { transform-origin: 50% 0; animation: ribbon-settle 1.25s ease-out; } @keyframes ribbon-settle { 0% { transform: rotate(.9deg) translateY(-3px); } 35% { transform: rotate(-.5deg) translateY(1.6px); } 70% { transform: rotate(.22deg) translateY(-.6px); } 100% { transform: none; } } .plan-ribbon svg { width: 100%; height: 44px; display: block; overflow: visible; } .ribbon-line { fill: none; stroke: var(--am-rust); stroke-width: 2.5; stroke-dasharray: 8 7; stroke-linecap: round; opacity: .8; } /* on every render the route DRAWS itself in, then keeps marching: the submit visibly computes even when the answer's numbers are unchanged */ [data-artmax-motion="on"] .ribbon-line { animation: ribbon-draw .9s ease-out, route-march 1.8s linear .9s infinite; } @keyframes ribbon-draw { from { stroke-dashoffset: 210; opacity: 0; } to { stroke-dashoffset: 0; opacity: .8; } } .ribbon-stop { fill: var(--am-paper); stroke: var(--am-forest); stroke-width: 2; } .ribbon-num { font: 800 9px var(--am-font-body); fill: var(--am-forest); } /* every waypoint wears the same little pennant, not just the bookends */ .ribbon-flag { fill: var(--am-rust); stroke: none; } /* stops (circle + number + state label + pennant) pop as the dash-draw reaches them: one shared timeline, staggered by the --si index each element carries (markup-order tricks like nth-of-type break when tags interleave) */ [data-artmax-motion="on"] .ribbon-stop, [data-artmax-motion="on"] .ribbon-num, [data-artmax-motion="on"] .ribbon-lbl, [data-artmax-motion="on"] .ribbon-flag { transform-box: fill-box; transform-origin: center; animation: stop-pop .45s ease-out backwards; animation-delay: calc(var(--si, 0) * .18s); } @keyframes stop-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ribbon-rv { position: absolute; right: -2px; top: 2px; width: 30px; height: auto; transform: scaleX(-1); filter: drop-shadow(0 1px 2px rgba(60,45,30,.3)); } [data-artmax-motion="on"] .ribbon-rv { animation: ribbon-ride 1.4s ease-out backwards; } @keyframes ribbon-ride { from { transform: translateX(-300px) scaleX(-1); opacity: 0; } to { transform: translateX(0) scaleX(-1); opacity: 1; } } .btn:active { transform: scale(.96); } /* the hero search card participates in the scene's craft: visible focus and hover states (it sat pixel-static over the swaying lights to two panels) */ .hero-search { transition: box-shadow .2s ease, transform .2s ease; } .hero-search:focus-within { box-shadow: var(--am-shadow-3), 0 0 0 3px rgba(205, 131, 84, .35); transform: translateY(-2px); } .hero-search input[type="search"]:focus-visible { outline: 3px solid var(--am-rust); outline-offset: 1px; } .hero-search .chip { transition: transform .15s ease, background .15s ease; } .hero-search .chip:hover { transform: translateY(-2px); background: #f1e6c8; } /* JS-driven press-and-work beat on submit (a :active flash alone is one frame) */ [data-artmax-motion="on"] .is-working { animation: btn-work .55s ease-out; } @keyframes btn-work { 0% { transform: scale(.94); filter: brightness(.9); } 60% { transform: scale(1.03); } 100% { transform: none; filter: none; } } /* ---- diorama lightbox (expanded park shadow box) ------------------------- A physical SHADOW BOX: wooden frame, cream mat, inner vignette, and a pop-up-book rise on open. Every card in the directory raises one. */ .artmax-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; } .artmax-lightbox[hidden] { display: none; } .artmax-lightbox-scrim { position: absolute; inset: 0; background: rgba(38, 47, 30, 0.6); opacity: 1; } .artmax-lightbox-panel { position: relative; margin: 0; width: min(94vw, 1020px); /* the box itself: warm wood with faint grain streaks */ background: repeating-linear-gradient(94deg, rgba(60, 40, 18, .12) 0 3px, transparent 3px 11px), linear-gradient(160deg, #8a6a46, #6f5334); border-radius: 16px 13px 17px 12px / 13px 17px 12px 16px; padding: 12px 12px 10px; box-shadow: 0 26px 70px rgba(28, 20, 8, .55), inset 0 1px 0 rgba(255, 235, 200, .35); } .artmax-lightbox-stage { position: relative; aspect-ratio: 1024 / 640; overflow: hidden; border-radius: 8px; margin: 7px; /* cream mat between wood and scene, with a dark seam where the art recedes */ box-shadow: 0 0 0 7px var(--am-cream), 0 0 0 8px rgba(60, 40, 18, .4); } .artmax-lightbox-stage .artmax-plane > img { width: 100%; height: 100%; object-fit: cover; } /* the box has DEPTH: inner shadow where the scene recedes behind the frame */ .artmax-lightbox-stage::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; box-shadow: inset 0 14px 40px rgba(35, 26, 10, .5), inset 0 -8px 26px rgba(35, 26, 10, .36), inset 10px 0 26px rgba(35, 26, 10, .28), inset -10px 0 26px rgba(35, 26, 10, .28), inset 0 2px 4px rgba(35, 26, 10, .45); } /* biome ambient life inside the box (fireflies, falling leaves, dust, clouds) */ .lb-ambient { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; } .lb-p { position: absolute; } .lb-firefly { width: 6px; height: 6px; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 10px 3px rgba(255, 224, 140, .8); animation: lb-fly var(--dur, 6s) ease-in-out var(--delay, 0s) infinite alternate; } @keyframes lb-fly { 0% { transform: translate(0, 0); opacity: .15; } 30% { opacity: .95; } 60% { opacity: .35; } 100% { transform: translate(var(--dx, 40px), var(--dy, -30px)); opacity: .9; } } .lb-leaf { width: 13px; height: 13px; background: var(--leaf-c, #c96b3d); border-radius: 0 62% 4px 62%; opacity: .92; animation: lb-fall var(--dur, 9s) linear var(--delay, 0s) infinite; } @keyframes lb-fall { 0% { transform: translate(0, -8%) rotate(0deg); } 25% { transform: translate(26px, 160px) rotate(95deg); } 50% { transform: translate(-12px, 330px) rotate(180deg); } 75% { transform: translate(22px, 500px) rotate(272deg); } 100% { transform: translate(-6px, 700px) rotate(360deg); } } .lb-spark { width: 4px; height: 4px; border-radius: 50%; background: #ffdf9e; box-shadow: 0 0 7px 2px rgba(255, 214, 130, .65); animation: lb-rise var(--dur, 8s) ease-in-out var(--delay, 0s) infinite; } @keyframes lb-rise { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: .85; } 70% { opacity: .4; } 100% { transform: translateY(-140px) translateX(18px); opacity: 0; } } .lb-cloud { width: 150px; height: 44px; border-radius: 50%; background: radial-gradient(ellipse at 50% 55%, rgba(255, 248, 230, .55), rgba(255, 248, 230, 0) 70%); filter: blur(2px); animation: lb-drift var(--dur, 30s) ease-in-out var(--delay, 0s) infinite alternate; } @keyframes lb-drift { from { transform: translateX(-70px); } to { transform: translateX(70px); } } /* caption: a paper plaque on the wood, with the biome chip + a real action */ .artmax-lightbox-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap; margin-top: 10px; background: var(--am-paper); border-radius: 10px 8px 11px 7px / 8px 11px 7px 10px; box-shadow: inset 0 0 0 1px rgba(60, 40, 18, .18); } .artmax-lightbox-caption #artmax-lb-title { font-family: var(--am-font-display); font-weight: 600; font-size: 1.2rem; color: var(--am-ink); } .artmax-lightbox-meta { color: var(--am-ink-soft); font-size: .9rem; } .artmax-lightbox-chip { font-size: .74rem; font-weight: 800; color: var(--am-forest); background: var(--am-cream); border: 1.5px solid var(--am-moss); border-radius: 9px 7px 10px 6px / 7px 10px 6px 9px; padding: 2px 9px; white-space: nowrap; } /* the chip wears its biome's palette, not one universal sage */ .artmax-lightbox-chip[data-biome="desert"] { background: #f3e2c8; border-color: #b5714a; color: #8a4f2c; } .artmax-lightbox-chip[data-biome="coastal"] { background: #e3edea; border-color: #4f7f78; color: #33625c; } .artmax-lightbox-chip[data-biome="fall-forest"] { background: #f6e3c8; border-color: #c07a4c; color: #93542a; } .artmax-lightbox-chip[data-biome="meadow"] { background: #eeefd4; border-color: #8ba36b; color: #55703d; } .artmax-lightbox-chip[data-biome="river-forest"] { background: #e2ecdf; border-color: #6f8f5f; color: #46633a; } .artmax-lightbox-plan { margin-left: auto; font-weight: 800; font-size: .88rem; color: #fff; background: var(--am-rust); border-radius: var(--am-r-pill); padding: .42em .95em; text-decoration: none; white-space: nowrap; } .artmax-lightbox-plan:hover { filter: brightness(1.06); } /* the close control is part of the OBJECT: a turned-wood knob set into the frame corner, not a stock white modal X floating on top */ .artmax-lightbox-close { position: absolute; top: -10px; right: -10px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.35rem; line-height: 1; z-index: 7; background: radial-gradient(circle at 34% 30%, rgba(255, 235, 200, .5), transparent 55%), linear-gradient(160deg, #9a7850, #6e5236); color: #f7ecd7; border: 2px solid #55402a; box-shadow: 0 3px 8px rgba(28, 20, 8, .45), inset 0 1px 0 rgba(255, 235, 200, .35); } .artmax-lightbox-close:hover { filter: brightness(1.1); } /* pop-up-book entrance: the box rises and settles; scrim fades in */ [data-artmax-motion="on"] .artmax-lightbox .artmax-lightbox-scrim { transition: opacity .26s ease-out; } [data-artmax-motion="on"] .artmax-lightbox .artmax-lightbox-panel { transition: transform .3s cubic-bezier(.2, .9, .3, 1.15), opacity .26s ease-out; } [data-artmax-motion="on"] .artmax-lightbox:not(.is-open) .artmax-lightbox-scrim { opacity: 0; } [data-artmax-motion="on"] .artmax-lightbox:not(.is-open) .artmax-lightbox-panel { transform: translateY(34px) scale(.94); opacity: 0; } .park-card [data-lightbox] { cursor: zoom-in; } /* text-row trigger on the search page: a small "peek inside" plaque */ .row-peek { font: inherit; font-size: .82rem; font-weight: 800; cursor: zoom-in; color: var(--am-forest); background: var(--am-cream); border: 1.5px solid var(--am-moss); border-radius: 9px 7px 10px 6px / 7px 10px 6px 9px; padding: .3em .8em; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; } .row-peek:hover { background: #f1e6c8; } .row-peek .stat-ico { width: 15px; height: 15px; margin: 0; color: var(--am-rust); } /* one loud CTA per screen: the persistent nav pill steps back to an outline so it never shouts over the tool's own Build button */ .site-header .nav .btn { background: transparent; color: var(--am-rust); border: 2px solid var(--am-rust); box-shadow: none; } .site-header .nav .btn:hover { background: var(--am-rust); color: #fff; } /* ---- footer ------------------------------------------------------------- */ .site-footer { background: var(--am-forest); color: #eef3e6; padding: 44px 0; margin-top: 40px; position: relative; overflow: hidden; } .site-footer a { color: #fff; } .site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; } .site-footer h3 { color: #fff; font-size: 1.05rem; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } /* ---- reduced motion / tier off-ramps ------------------------------------ */ [data-artmax-motion="off"] .park-card { transition: none; } [data-artmax-motion="off"] .btn { transition: none; } [data-artmax-motion="off"] .nav { transition: none; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .park-card, .btn, .artmax-state, .nav { transition: none !important; } } /* ---- responsive --------------------------------------------------------- */ @media (max-width: 860px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .hero-overlay { align-items: center; text-align: center; justify-content: flex-end; padding-bottom: 26px; } .hero-title img { margin: 0 auto; } .hero-sub { margin-left: auto; margin-right: auto; } } @media (max-width: 640px) { /* visibility (not just transform) so the closed menu's links leave the tab order + accessibility tree, matching aria-expanded=false */ .nav { position: fixed; inset: 66px 0 auto 0; background: var(--am-paper); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 22px 16px; border-bottom: 1px solid var(--am-line); box-shadow: var(--am-shadow-2); transform: translateY(-120%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; } .nav[data-open="true"] { transform: translateY(0); visibility: visible; transition: transform .2s ease, visibility 0s; } .nav a { padding: 12px 0; border-bottom: 1px solid var(--am-line); } .nav-toggle { display: inline-grid; place-items: center; margin-left: auto; width: 42px; height: 42px; border: 2px solid var(--am-line); border-radius: 12px; background: var(--am-paper); cursor: pointer; } .section { padding: 40px 0; } .site-footer .wrap { grid-template-columns: 1fr; } .map-fallback-list { columns: 1; } } /* ---- treatment tokens ---- */ /* TREATMENT: crayon-storybook-camping (the RV flagship's first named treatment) ========================================================================= A complete art treatment = design tokens (here) + fonts.css + an illustrated asset recipe (assets/) + the signature interaction config. Feeding a niche's data + these tokens into the engine components yields the art-max site. Palette read from the approved concept sketch + the generated crayon samples: warm cream paper, forest/moss/sage greens, terracotta + rust, storybook warmth. Light identity only. IP-clean: evokes storybook picture-books, copies nothing. */ :root { /* surfaces */ --am-bg: #f1ead9; /* warm cream paper */ --am-paper: #faf5e9; /* raised card paper */ --am-cream: #efe4c9; /* soft cream fill */ --am-line: #ddd0b3; /* hand-drawn hairline */ /* ink */ --am-ink: #33402a; /* deep forest ink */ --am-ink-soft: #5c6650; /* WCAG AA on bg/cream/paper (4.79 to 5.56:1) */ /* the earthy camping family */ --am-forest: #4a6b3d; --am-moss: #7c9c6a; --am-sage: #a9c090; --am-terracotta: #cd8354; --am-rust: #b0563a; --am-teal: #5f9a92; /* the vintage-RV teal accent from the samples */ /* roles */ --am-accent: var(--am-terracotta); --am-accent-ink: #fff8ec; /* type (self-hosted OFL, see fonts.css; robust fallbacks if fonts absent) */ --am-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --am-font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; /* softer, storybook-rounded radii + warmer shadows */ --am-r-sm: 12px; --am-r: 18px; --am-r-lg: 26px; --am-shadow-1: 0 1px 2px rgba(70,50,30,.10), 0 3px 10px rgba(70,50,30,.07); --am-shadow-2: 0 3px 8px rgba(70,50,30,.12), 0 12px 28px rgba(70,50,30,.12); --am-shadow-3: 0 8px 18px rgba(70,50,30,.14), 0 26px 54px rgba(70,50,30,.16); } /* map state fills: the treatment's per-state palette rotation (greens + earths, matching the sketch's patchwork). The engine assigns these deterministically. */ :root { --am-map-empty: #e6ddc6; } .artmax-usmap-wrap { --state-palette: 1; } /* the crayon map palette is passed to illustrated-map.js as opts.palette.states; these mirror it so clean-mode CSS overrides stay in the same family */ [data-map-mode="art"] .artmax-state.has-parks { filter: saturate(1.02); } /* ---- site ---- */ /* site.css: shared chrome and directory-surface components for the pages the ART-MAX build added (listings, hubs, stats, trust pages). Tokens only: every color and size comes from tokens.css / engine.css custom properties. NO dark-mode block by design law. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--am-paper); color: var(--am-ink); padding: 10px 16px; border: 2px solid var(--am-line); border-radius: var(--am-r-sm, 8px); font-weight: 600; } .skip-link:focus { left: 12px; top: 12px; } /* every operable affordance shows a visible focus ring (WCAG 2.4.7) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--am-accent, #cd8354); outline-offset: 2px; border-radius: var(--am-r-sm, 8px); } .narrow-page { max-width: 760px; } .breadcrumbs { font-size: .9rem; margin-bottom: 14px; color: var(--am-ink-soft, #6b6350); } .breadcrumbs a { color: inherit; } .search-panel { max-width: 940px; margin: 0 auto 26px; background: var(--am-paper); border: 1px solid var(--am-line); border-radius: var(--am-r-lg); box-shadow: var(--am-shadow-1); } .state-links { margin-top: 40px; } .state-links h2 { margin-bottom: 10px; } .state-links a { display: inline-block; margin: 0 10px 8px 0; padding: 4px 10px; border: 1px solid var(--am-line); border-radius: 999px; background: var(--am-paper); } .pager { margin-top: 26px; } .pager a { display: inline-block; min-width: 38px; text-align: center; padding: 6px 8px; margin-right: 6px; border: 1px solid var(--am-line); border-radius: var(--am-r-sm, 8px); background: var(--am-paper); } .pager a[aria-current="page"] { background: var(--am-accent, #cd8354); color: var(--am-paper); border-color: var(--am-accent, #cd8354); } /* listing pages */ .fact-list { list-style: none; padding: 0; margin: 0 0 24px; } .fact-list li { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--am-line); } .fact-list li b { flex: 0 0 40%; font-weight: 600; } .near-list li span { color: var(--am-ink-soft, #6b6350); } .listing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0; } .claim-cta { margin: 26px 0; padding: 18px; border: 1px solid var(--am-line); border-radius: var(--am-r-lg); background: var(--am-paper); } .claim-pitch { margin: 0 0 10px; } /* affiliate: labeled, inert until real ids exist */ .affiliate-block { margin: 30px 0; padding: 18px; border: 1px dashed var(--am-line); border-radius: var(--am-r-lg); } .affiliate-disclosure { font-size: .85rem; color: var(--am-ink-soft, #6b6350); } .affiliate-list { list-style: none; padding: 0; margin: 10px 0 0; } .affiliate-list li { padding: 5px 0; } /* featured tier (data completeness, never paid placement) */ .card-featured { border-left: 4px solid var(--am-accent, #cd8354); } .badge-soft { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--am-paper-2, #f3ead6); border: 1px solid var(--am-line); font-size: .8rem; } /* tables (stats + prices) */ .table-scroll { overflow-x: auto; } .table-plain { width: 100%; border-collapse: collapse; margin: 16px 0 26px; background: var(--am-paper); } .table-plain th, .table-plain td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--am-line); } .table-plain th { font-weight: 600; } .stats-map { max-width: 900px; margin: 0 auto 30px; } .footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px; padding-top: 18px; margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .88rem; } .footer-note { font-size: .88rem; } @media (max-width: 640px) { .fact-list li { flex-direction: column; gap: 2px; } .fact-list li b { flex: none; } } /* map cue: the centerpiece says how to use it, for pointer and keyboard alike */ .map-cue { margin: 0 auto 10px; max-width: 62ch; text-align: center; font-size: .9rem; color: var(--am-ink-soft, #6a6455); } .artmax-usmap-wrap svg path[tabindex] { cursor: pointer; }