/* Jay Group Transit Map — component styles. Everything is scoped under .jgtm (the shortcode root) so theme styles and ours cannot collide. The ONLY theming surface is the variable block below — generated choropleth CSS (tnt/*) references these vars and contains no literal colors. Palette source: Figma node 584:6233. */ .jgtm{ --jg-d1:#012033; /* 1 Day */ --jg-d2:#034062; /* 2 Days */ --jg-d3:#015C90; /* 3 Days */ --jg-d4:#0282CA; /* 4 Days */ --jg-d5:#00A3FF; /* 5+ Days */ --jg-ns:#BBC5CD; /* No Service (designer-approved 2026-06-07) */ --jg-base:#dde6f2; /* pre-choropleth neutral */ --jg-stroke:#ffffff; /* state borders */ --jg-ink:#5A6771; /* body text gray */ --jg-accent1:#0082CB; --jg-accent2:#0C96E4; --jg-shadow:0 4px 8.3px rgba(90,103,113,.16); font-family:'Futura PT','Jost',system-ui,sans-serif; color:var(--jg-ink); } /* Optional section background (matches the Figma band the map sits on). Apply .jgtm-section to the page section that CONTAINS the shortcode, or skip it if your page band already has the pattern. */ .jgtm-section{ background: linear-gradient(180deg, #fff 0%, rgba(238,250,255,.51) 51%, #fff 100%), url('../img/section-bg.png') center/cover; } .jgtm *{box-sizing:border-box} .jgtm-layout{display:grid;grid-template-columns:1fr 470px;gap:28px;align-items:start} @media (max-width: 1100px){ .jgtm-layout{grid-template-columns:1fr} } .jgtm-card{background:transparent;border-radius:17px;padding:8px} #jgtm-map{width:100%;height:72vh;min-height:520px} /* map internals — selectors the library generates inside our container. Base .feature stays at low specificity so .c-{combo} .feature-{id} rules from tnt/*.css (0,2,0) win the cascade. */ .jgtm .feature{ fill:var(--jg-base); stroke:var(--jg-stroke); stroke-width:1; } .jgtm .jg-map .feature.active{ stroke:var(--jg-accent1); stroke-width:2; } /* origin badges (rendered by the library's label system) */ .jgtm .jg-map .state-label{ filter:drop-shadow(0 2px 5px rgba(1,32,51,.35)); } .jgtm .jg-map .state-label circle{ fill:#33414E; stroke:#fff; stroke-width:3px; } .jgtm .jg-map .state-label text{ fill:#fff; font-weight:700; letter-spacing:.03em; } /* tooltip — the library appends it to , NOT inside .jgtm, so this is the one deliberately global selector in the package. */ .d3map-tooltip{ background:#fff; color:#012033; font:600 14px/1.2 'Futura PT','Jost',system-ui,sans-serif; letter-spacing:.02em; padding:9px 14px; border:1px solid #e3e9f0; border-left:4px solid #0082CB; border-radius:10px; box-shadow:0 8px 20px rgba(1,32,51,.18); white-space:nowrap; z-index:99; transition:opacity .12s ease; } /* controls */ .jgtm-controls{display:flex;flex-direction:column;gap:18px;padding-top:24px} .jgtm-field{display:grid;grid-template-columns:150px 1fr;height:56px;border-radius:14px; background:#fff;box-shadow:var(--jg-shadow);overflow:hidden} .jgtm-field>label{display:flex;align-items:center;padding-left:18px;font-weight:600; color:var(--jg-d1);font-size:17px;background:#fff;margin:0} .jgtm-value{position:relative;background:#E9EDF2;display:flex;align-items:center} .jgtm-value select{appearance:none;width:100%;height:100%;border:0;background:transparent; padding:0 44px 0 16px;font:500 17px 'Futura PT','Jost',system-ui,sans-serif; color:var(--jg-ink);cursor:pointer} .jgtm-chev{position:absolute;right:16px;pointer-events:none;color:var(--jg-ink);font-size:13px} .jgtm-cbx-row{gap:18px;padding:0 16px} .jgtm-cbx{display:flex;align-items:center;gap:7px;font:500 17px 'Futura PT','Jost',system-ui,sans-serif; color:var(--jg-ink);cursor:pointer;user-select:none;margin:0} .jgtm-cbx input{width:18px;height:18px;accent-color:var(--jg-accent1);cursor:pointer;margin:0} .jgtm-legend{display:flex;flex-wrap:wrap;gap:14px 18px;justify-content:center;padding:2px 4px} .jgtm-li{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:500} .jgtm-dot{width:20px;height:20px;border-radius:50%;display:inline-block} .jgtm-backlink{display:none;font-size:14px;font-weight:600;color:var(--jg-accent1);cursor:pointer; background:none;border:none;padding:2px 4px;text-align:left} .jgtm-backlink.show{display:block}