/** * Styling for elements whose class names / ids are load-bearing for * assets/js/route-app.js (docs/legacy-dom-contract.md). These class names * (.dchip, .opt, .tab, .fchip, .dcard, .step, .modal, .pop, .numpin, etc.) * cannot be renamed without editing the preserved JS, so instead of * introducing a parallel class scheme for JS-generated markup, this file * restyles the exact class names route-app.js already reads/writes, * bringing them in line with the new design system look. * * Hand-authored controls in the templates carry BOTH the required legacy * class and a companion .nac-* class (see plan-panel.php, explore.php, * etc.) — those .nac-* companion classes are defined in planner.css / * cards.css and layer on top of the rules below. */ /* ---------- District chips (#dchips, JS-generated .dchip) ---------- */ .dchips { display: flex; flex-wrap: wrap; gap: var(--nac-space-2); } .dchip { display: inline-flex; align-items: center; gap: var(--nac-space-2); font-family: var(--nac-font-body); /* H-D2V: reference chips are compact pills. */ font-size: var(--nac-fs-micro); font-weight: var(--nac-fw-bold); padding: 5px 10px; border-radius: var(--nac-radius-pill); border: 1px solid var(--nac-glass-border); background: rgba(255,255,255,0.06); color: var(--nac-white); cursor: pointer; transition: background var(--nac-duration-fast) var(--nac-ease-standard), border-color var(--nac-duration-fast) var(--nac-ease-standard); } .dchip:hover { border-color: rgba(255,255,255,0.35); } /* V2 (approved-homepage parity): selected chips read as filled colored * pills (Reference/approved-homepage.png) rather than a teal-only tint. * The per-district color is carried by the JS-generated dot (.dchip i, * inline background) — the chip surface itself brightens neutrally so * every district color keeps AA text contrast. */ .dchip.active { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.16); color: var(--nac-white); } .dchip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; } .dchip .n { font-size: var(--nac-fs-micro); color: var(--nac-muted); font-weight: var(--nac-fw-medium); } /* ---------- Segmented option groups (#dayparts, #modes: .oprow / .opt) ---------- */ .oprow { display: flex; gap: var(--nac-space-2); flex-wrap: wrap; } .opt { font-family: var(--nac-font-body); font-size: var(--nac-fs-small); font-weight: var(--nac-fw-bold); text-transform: uppercase; letter-spacing: 0.03em; padding: var(--nac-space-2) var(--nac-space-4); border-radius: var(--nac-radius-pill); border: 1px solid var(--nac-glass-border); background: rgba(255,255,255,0.06); color: var(--nac-muted); cursor: pointer; transition: box-shadow var(--nac-duration-fast) var(--nac-ease-standard), color var(--nac-duration-fast) var(--nac-ease-standard); } .opt.active { box-shadow: 0 0 0 2px var(--nac-orange) inset; color: var(--nac-white); } /* H-D2V-R4A (A3): the planner's daypart icon tiles use the compact tile metrics from planner.css (.nac-daypart-tile). This later-loading file's generic .opt padding/radius above was winning the cascade at equal specificity (0-1-0) and silently inflating each tile ~24px wider — the real reason the panel couldn't shrink below ~355px. Values mirror planner.css's .nac-daypart-tile exactly; scoped to the combined class so every other .opt (route style, explore filters) is untouched. */ .opt.nac-daypart-tile { padding: var(--nac-space-2) var(--nac-space-1); border-radius: var(--nac-radius-md); } .timewrap { display: flex; align-items: center; gap: var(--nac-space-4); flex-wrap: wrap; } .nac-time-field { font-size: var(--nac-fs-small); color: var(--nac-muted); font-weight: var(--nac-fw-bold); display: flex; align-items: center; gap: var(--nac-space-2); } input[type=time] { min-width: 110px; } /* Safari collapses unconstrained time inputs */ input[type=time], input[type=date], input[type=text], input[type=search] { background: rgba(255,255,255,0.06); border: 1px solid var(--nac-glass-border); color: var(--nac-white); border-radius: var(--nac-radius-sm); padding: var(--nac-space-2) var(--nac-space-3); font-family: var(--nac-font-body); font-weight: var(--nac-fw-bold); font-size: 0.9rem; color-scheme: dark; } .gen-row { display: flex; gap: var(--nac-space-2); margin-top: var(--nac-space-3); flex-wrap: wrap; align-items: center; } .sunhint { font-size: var(--nac-fs-small); color: var(--nac-gold); font-weight: var(--nac-fw-bold); } /* * PHASE 2.2 FIX (docs/phase-2-2-visual-parity-report.md): `.nac-builder` * (dark background, docs/design-system.md) and `.nac-builder__grid`/`.grid` * (the actual two-column map+itinerary layout) had zero CSS anywhere in the * theme -- the map and itinerary were stacking as plain full-width blocks * with no side-by-side layout at all. See the matching note in base.css. */ .nac-builder { background: var(--nac-ink); } .nac-builder__grid.grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--nac-space-6); align-items: start; } @media (max-width: 1023px) { .nac-builder__grid.grid { grid-template-columns: 1fr; } /* NOTE: the .map-frame un-stick override that used to live here was dead code — the base `.map-frame { position: sticky }` rule is declared LATER in this file, so at equal specificity it always won and the map stayed sticky on mobile (the Phase 2.4.1 stacking bug). The working override now lives AFTER the base rule — see "PHASE 2.4.1" block below. */ } /* * PHASE 2.2 (docs/phase-2-2-visual-parity-report.md §B): the real Leaflet * map and generated itinerary must not dominate the homepage before the * user has explicitly asked for a route. `#builder` now renders in a * "pending" state by default (see template-parts/builder.php) -- the real * grid is hidden and a short placeholder message shows instead. Revealing * is handled by assets/js/route-results-reveal.js, which only ever adds/ * removes this one class; it never touches build(), the map, or any * preserved route-app.js function. */ .nac-builder--pending .nac-builder__grid { display: none; } /* H-D2V-R2 §8: the route placeholder box was removed (builder.php). While * pending, the grid is hidden (above) and the section collapses to zero * padding, so no empty band or dashed placeholder renders before a route is * built. route-results-reveal.js reveals the real map + itinerary on the * first build. */ .nac-builder--pending.nac-section { padding: 0; } /* ---------- Map + itinerary (#map, .map-frame, .iti) ---------- */ .map-frame { border: 1px solid var(--nac-glass-border); border-radius: var(--nac-radius-md); overflow: hidden; position: sticky; top: 82px; } #map { height: 620px; z-index: 1; background: #12121a; } /* PHASE 2.4.1 — mobile route-results stacking fix. Root cause: the old * ≤1023px `.map-frame { position: static }` override was declared BEFORE * the base sticky rule above, so the base rule always won and the map * stayed pinned (top: 82px) while the one-column itinerary scrolled * underneath it. This block sits AFTER the base rule, so it actually * applies: the map becomes a normal in-flow block (rendered first by grid * order), the itinerary starts entirely below it, and the map gets a * responsive height instead of the 620px desktop height. Desktop (≥1024px) * is untouched. */ @media (max-width: 1023px) { .map-frame { position: relative; top: auto; overflow: hidden; border-radius: var(--nac-radius-md); } #map { height: 430px; } .iti { position: relative; z-index: auto; } } @media (max-width: 480px) { #map { height: 360px; } } .iti { background: var(--nac-ink); border: 1px solid var(--nac-glass-border); border-radius: var(--nac-radius-md); overflow: hidden; } .iti-head { padding: var(--nac-space-5) var(--nac-space-6); border-bottom: 1px solid var(--nac-glass-border); } .iti-head h2 { font-size: 1.05rem; text-transform: uppercase; color: var(--nac-white); } .iti-stats { font-size: var(--nac-fs-micro); color: var(--nac-muted); margin-top: 4px; } .iti-stats b { color: var(--nac-teal); } .steps { max-height: 470px; overflow-y: auto; } .step { display: flex; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--nac-glass-border); color: var(--nac-white); } .step:hover { background: rgba(255,255,255,0.04); } .step .num { flex-shrink: 0; width: 27px; height: 27px; border-radius: 50%; background: var(--nac-teal); color: #06231f; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; } .step .th { flex-shrink: 0; width: 56px; height: 56px; border-radius: 9px; background: #232a3a center/cover no-repeat; cursor: pointer; } .step .in { min-width: 0; flex: 1; cursor: pointer; } .step h3 { font-size: 0.88rem; margin-bottom: 1px; color: var(--nac-white); } .step .m { font-size: 0.7rem; color: var(--nac-muted); } .step .m b { color: var(--nac-teal); } .step .eta { font-size: 0.7rem; font-weight: 700; margin-top: 2px; } .step .eta.ok { color: var(--nac-gold); } .step .eta.off { color: var(--nac-muted); } /* PHASE 2.1 FIX (docs/phase-2-1-remediation-report.md): axe-core measured --nac-purple (#8b5cf6) against this row's actual rendered background (#12121a) at 4.40:1 -- just under the 4.5:1 WCAG AA threshold for normal- size text. #a78bfa is the same hue lightened, measured at 6.85:1 against the same background. Scoped to .step .walk/.dirlink only, so it doesn't touch --nac-purple's other (already-passing) uses elsewhere. */ .step .walk { font-size: 0.66rem; color: #a78bfa; font-weight: 700; } .step .ctl { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; } .step .ctl button { background: rgba(255,255,255,0.06); border: 1.5px solid var(--nac-glass-border); color: var(--nac-muted); width: 24px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 0.68rem; } .step .ctl button:hover { border-color: var(--nac-teal); color: var(--nac-teal); } .step .dirlink { font-size: 0.66rem; color: #a78bfa; text-decoration: none; font-weight: 700; } .iti-foot { padding: var(--nac-space-4); display: flex; gap: var(--nac-space-2); flex-wrap: wrap; } /* ---------- Explore directory (#tabs, .filterbar, .fchip, #cards, .dcard) ---------- */ .tabs { display: flex; gap: var(--nac-space-2); flex-wrap: wrap; margin-bottom: var(--nac-space-4); } /* PHASE 2.1 FIX (docs/phase-2-1-remediation-report.md): axe-core measured --nac-muted (#9a97a6) on this section's rendered background (#ffffff) at 2.85:1 -- same failing combo as .fchip below; #6b687a is the same hue darkened, measured at 5.40:1 against that background. */ .tab { font-family: var(--nac-font-body); font-size: var(--nac-fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: var(--nac-space-2) var(--nac-space-4); border-radius: var(--nac-radius-sm); border: 1px solid var(--nac-glass-border); cursor: pointer; background: transparent; color: #6b687a; } /* PHASE 2.1 FIX (docs/phase-2-1-remediation-report.md): axe-core measured this element's actual rendered foreground/background (#17b8a6 on the #dff5f3 this section renders against) at 2.19:1 -- #0b6a5f is the same teal hue darkened, measured at 5.71:1 against that same background. */ .tab.active { border-color: var(--nac-teal); color: #0b6a5f; background: rgba(23,184,166,0.14); } .filterbar { display: flex; gap: var(--nac-space-2); flex-wrap: wrap; align-items: center; background: rgba(255,255,255,0.04); border: 1px solid var(--nac-glass-border); border-radius: var(--nac-radius-md); padding: var(--nac-space-3); margin-bottom: var(--nac-space-5); } .filterbar input[type=text] { flex: 1; min-width: 160px; } /* PHASE 2.1 FIX (docs/phase-2-1-remediation-report.md): axe-core measured --nac-muted (#9a97a6) on this section's actual rendered background (#ffffff) at 2.85:1 -- #6b687a is the same hue darkened, measured at 5.40:1 against that same background. */ .fchip { font-size: var(--nac-fs-micro); font-weight: var(--nac-fw-medium); text-transform: uppercase; padding: var(--nac-space-2) var(--nac-space-3); border-radius: var(--nac-radius-pill); border: 1.5px solid var(--nac-glass-border); cursor: pointer; background: transparent; color: #6b687a; font-family: var(--nac-font-body); } .fchip.active { border-color: var(--nac-gold); color: var(--nac-gold); } .cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--nac-space-4); } .dcard { background: var(--nac-ink); border: 1px solid var(--nac-glass-border); border-radius: var(--nac-radius-md); overflow: hidden; cursor: pointer; transition: transform 0.16s, border-color 0.16s; } .dcard:hover { transform: translateY(-4px); border-color: var(--nac-teal); } .dcard .ph { height: 150px; background: #20263a center/cover no-repeat; position: relative; } .dcard .ph .cat { position: absolute; top: 9px; left: 9px; background: rgba(15,17,23,.82); padding: 4px 10px; border-radius: 999px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--nac-teal); } .dcard .ph .flag { position: absolute; top: 9px; right: 9px; background: rgba(15,17,23,.82); padding: 4px 8px; border-radius: 999px; font-size: 0.6rem; color: var(--nac-gold); font-weight: 700; } .dcard .bd { padding: 13px 14px 15px; } .dcard h3 { font-size: 0.95rem; margin-bottom: 2px; color: var(--nac-white); } .dcard .d { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .dcard .a { font-size: 0.74rem; color: var(--nac-muted); margin-top: 3px; } .dcard .bt { display: inline-block; margin-top: 7px; font-size: 0.66rem; background: #241d10; color: var(--nac-gold); border: 1px solid #4a3a1a; padding: 3px 9px; border-radius: 999px; font-weight: 700; } .empty { color: var(--nac-muted); padding: 30px 6px; font-size: 0.9rem; } .kcard { cursor: default; } .kidsph { background-size: 84px !important; background-repeat: no-repeat; background-position: center; background-color: #20263a; } .kph { display: flex; align-items: center; justify-content: center; background: #20263a; } .kph svg { width: 86px; height: 86px; } .krow { display: flex; gap: var(--nac-space-2); margin-top: 11px; } .krow select { flex: 1; min-width: 0; } /* ---------- PHASE 2.4 — Kids & community printables restyle ---------- * The kids cards carry BOTH the legacy .dcard/.ph classes AND the new * .nac-card class; cards.css's generic .nac-card padding and 56px * .nac-card__icon sizing were fighting the legacy .ph block, producing the * narrow vertical icon strip visible in the preview screenshots. These * kids-scoped rules restore a full-width, color-blocked media header per * card (matching the approved mockup's playful activity-card look) without * touching any select/onclick/id the preserved printSheet() flow needs. */ .nac-kids .nac-card { padding: 0; overflow: hidden; } .nac-kids .nac-card__icon, .nac-kids .dcard .ph { width: 100%; height: 150px; margin: 0; display: flex; align-items: center; justify-content: center; } .nac-kids .nac-card__icon svg { width: 86px; height: 86px; display: block; } .nac-kids .bd { padding: 16px 18px 20px; } /* Distinct, on-palette panel tint per activity card */ .nac-kids__grid > .nac-card:nth-child(1) .ph { background: linear-gradient(135deg, #46306b, #241b3a); } .nac-kids__grid > .nac-card:nth-child(2) .ph { background: linear-gradient(135deg, #0e5f55, #122f33); } .nac-kids__grid > .nac-card:nth-child(3) .ph { background: linear-gradient(135deg, #7a4050, #341f31); } .nac-kids__grid > .nac-card:nth-child(4) .ph { background: linear-gradient(135deg, #24548f, #16233d); } .nac-kids__grid > .nac-card:nth-child(5) .ph { background: linear-gradient(135deg, #6b4a12, #241b0a); } .nac-kids__grid > .nac-card:nth-child(6) .ph { background: linear-gradient(135deg, #0f4f3f, #0d2018); } .nac-kids .dcard:hover { border-color: var(--nac-gold); } /* ---------- PHASE 2.4 — Sponsor tier cards ---------- */ .nac-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nac-space-4); margin-top: var(--nac-space-6); } .nac-tier { border: 1px solid var(--nac-glass-border); border-radius: var(--nac-radius-md); /* Solid dark card — this strip renders on the page's white background, outside the dark .band, so a translucent white tint would leave the white price text invisible. */ background: var(--nac-ink); padding: var(--nac-space-5) var(--nac-space-6); text-align: center; } .nac-tier__name { display: block; font: var(--nac-fw-bold) var(--nac-fs-micro) var(--nac-font-display); text-transform: uppercase; letter-spacing: var(--nac-tracking-eyebrow); color: var(--nac-muted); margin-bottom: var(--nac-space-2); } .nac-tier__price { font-family: var(--nac-font-display); font-weight: 900; font-size: 1.6rem; color: var(--nac-white); } .nac-tier__per { font-size: var(--nac-fs-small); color: var(--nac-muted); font-weight: 700; } .nac-tier--featured { border-color: var(--nac-teal); background: rgba(23,184,166,0.08); } .nac-tier--featured .nac-tier__name { color: var(--nac-teal); } @media (max-width: 767px) { .nac-tiers { grid-template-columns: 1fr; } } /* ---------- Modal ---------- */ /* PHASE 2.4 Safari hardening: -webkit-backdrop-filter prefix + a vh fallback declared before the svh value (older Safari ignores svh). */ .modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(5,6,10,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .modal.open { display: flex; } .mbox { background: var(--nac-ink); border: 1px solid var(--nac-glass-border); border-radius: var(--nac-radius-lg); max-width: 660px; width: 100%; max-height: 92vh; max-height: 92svh; overflow-y: auto; } .mph { height: 280px; background: #20263a center/cover no-repeat; border-radius: var(--nac-radius-lg) var(--nac-radius-lg) 0 0; position: relative; } .mph .x { position: absolute; top: 12px; right: 12px; background: rgba(15,17,23,.85); border: 1px solid var(--nac-glass-border); color: var(--nac-white); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; } .mbd { padding: 22px 24px 26px; } .mbd h3 { font-size: 1.4rem; text-transform: uppercase; color: var(--nac-white); } .meta { display: flex; gap: var(--nac-space-2); flex-wrap: wrap; margin: 9px 0 13px; } .meta span { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--nac-glass-border); color: var(--nac-muted); } .meta span.hl { border-color: var(--nac-gold); color: var(--nac-gold); } .mbd p { font-size: 0.9rem; color: #c6cdde; margin-bottom: 10px; } .mbd p b { color: var(--nac-white); } .mrow { display: flex; gap: var(--nac-space-2); flex-wrap: wrap; margin-top: 14px; } /* ---------- Legacy buttons still referenced directly (inline onclick markup) ---------- */ .btn { display: inline-block; padding: 12px 24px; border-radius: var(--nac-radius-sm); font-weight: var(--nac-fw-medium); text-decoration: none; cursor: pointer; border: none; font-family: var(--nac-font-display); font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.04em; transition: transform 0.12s; } .btn:hover { transform: translateY(-2px); } /* H-D2V: the reference "Build My Crawl" CTA is the brand pink->orange * gradient — the old teal fill was overriding .nac-btn--primary because * this file loads later. */ .btn-lime { background: var(--nac-gradient-primary); color: #fff; } /* PHASE 2.1 FIX (docs/phase-2-1-remediation-report.md): axe-core measured white text on --nac-purple (#8b5cf6) at 4.23:1 -- just under 4.5:1 for this button's font size/weight. #7c4eef is the same hue darkened, measured at 5.01:1. Scoped to .btn-vio only. */ .btn-vio { background: #7c4eef; color: #fff; } .btn-line { border: 2px solid var(--nac-glass-border); color: var(--nac-white); background: transparent; } .btn-line:hover { border-color: var(--nac-teal); color: var(--nac-teal); } .btn-sm { padding: 6px 12px; font-size: 0.68rem; } /* ---------- Leaflet marker/popup styling (CSS only, no ids) ---------- */ .leaflet-popup-content-wrapper { background: var(--nac-ink); color: var(--nac-white); border-radius: 12px; border: 1px solid var(--nac-glass-border); } .leaflet-popup-tip { background: var(--nac-ink); } .pop { width: 230px; } .pop .pp-ph { height: 120px; border-radius: 9px; background: #232a3a center/cover no-repeat; margin-bottom: 8px; } .pop b { font-weight: 900; } .pop .best { color: var(--nac-gold); font-size: 0.74rem; font-weight: 700; display: block; margin: 4px 0 3px; } .pop p { font-size: 0.77rem; line-height: 1.4; color: var(--nac-muted); margin-bottom: 7px; } .pop a { color: var(--nac-purple); font-size: 0.74rem; font-weight: 700; margin-right: 9px; } .pop button { background: var(--nac-teal); color: #06231f; border: none; border-radius: 8px; font-family: var(--nac-font-display); font-weight: 900; font-size: 0.7rem; padding: 6px 11px; cursor: pointer; } .numpin { width: 27px; height: 27px; border-radius: 50%; background: var(--nac-teal); color: #06231f; font-weight: 900; font-family: var(--nac-font-display); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; border: 2.5px solid #0f1117; box-shadow: 0 2px 10px rgba(0,0,0,.5); } .numpin.sun { background: var(--nac-gold); } .dotpin { width: 11px; height: 11px; border-radius: 50%; display: block; border: 2px solid #0f1117; opacity: 0.55; } .sqpin { width: 11px; height: 11px; display: block; border: 2px solid #0f1117; opacity: 0.8; border-radius: 2px; } /* ---------- Rotating mural gallery frame (#gal) ---------- */ .frame { position: relative; background: #0a0c11; box-shadow: 0 28px 64px rgba(0,0,0,.5); border-radius: var(--nac-radius-md); padding: clamp(14px, 2vw, 24px); } .frame-liner { border: 4px solid rgba(255,255,255,0.08); box-shadow: inset 0 0 22px rgba(0,0,0,.6); background: #0a0c11; border-radius: var(--nac-radius-sm); overflow: hidden; } .gal { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); gap: 0; aspect-ratio: 13/5; width: 100%; } .gtile { position: relative; overflow: hidden; background: #141821; } .gtile .ly { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.15s ease; } .gtile .ly.on { opacity: 1; } .g1 { grid-area: 1/1/3/3; } .g2 { grid-area: 1/3/2/4; } .g3 { grid-area: 1/4/2/7; } .g4 { grid-area: 2/3/4/4; } .g5 { grid-area: 2/4/4/6; } .g6 { grid-area: 2/6/5/7; } .g7 { grid-area: 3/1/6/2; } .g8 { grid-area: 3/2/4/3; } .gLa { grid-area: 4/2/5/4; } .gLb { grid-area: 5/2/6/3; } .g9 { grid-area: 5/3/6/4; } .g10 { grid-area: 4/4/6/6; } .g11 { grid-area: 5/6/6/7; } @media (prefers-reduced-motion: reduce) { .gtile .ly { transition: none; } } /* ---------- Print sheets (#ps-crawl, #ps-bingo, #ps-hunt, #ps-coloring, #ps-checklist, #ps-challenge) ---------- * PHASE 2 REGRESSION FIX (found during full regression pass, see * docs/phase-2-regression-report.md): the original art-crawl.html's main * (non-print)