/* ace-map-style */ .ace-site-map.leaflet-container{background:var(--ace-bg, #2c2c2e);color:var(--ace-ink, #f5f2ea);font:14px/1.4 "Space Grotesk",sans-serif;isolation:isolate}.ace-site-map.leaflet-container .leaflet-tile-pane{filter:brightness(0.78) contrast(1.28) saturate(0.7)}body[data-ace-theme=light] .ace-site-map.leaflet-container .leaflet-tile-pane{filter:none}.ace-site-map .ace-tiles--dark{filter:none}.ace-site-map .ace-map-labels{opacity:.75;pointer-events:none}.ace-site-map.leaflet-container .leaflet-bar{border:1px solid var(--ace-line, #48514e);box-shadow:0 4px 18px rgba(0,0,0,.2)}.ace-site-map.leaflet-container .leaflet-bar a{background:var(--ace-surface-2, #242b2a);color:var(--ace-ink, #f5f2ea);border-color:var(--ace-line, #48514e)}.ace-site-map.leaflet-container .leaflet-bar a:hover,.ace-site-map.leaflet-container .leaflet-bar a:focus{background:var(--ace-surface, #1d2323);color:var(--ace-orange-2, #efb665)}.ace-site-map.leaflet-container .leaflet-bar a.leaflet-disabled{color:var(--ace-muted, #abb5b1);opacity:.6}.ace-site-map.leaflet-container .leaflet-control a:focus-visible{outline:2px solid var(--ace-orange-2, #efb665);outline-offset:2px}.ace-site-map.leaflet-container .leaflet-control-attribution,.ace-site-map.leaflet-container .leaflet-control-layers{background:color-mix(in srgb, var(--ace-surface-2, #242b2a) 88%, transparent);color:var(--ace-muted, #abb5b1);font-family:inherit}.ace-site-map.leaflet-container .leaflet-control-attribution a{color:var(--ace-ink, #f5f2ea)}.ace-site-map.leaflet-container .leaflet-popup-content-wrapper,.ace-site-map.leaflet-container .leaflet-popup-tip,.ace-site-map.leaflet-container .leaflet-tooltip{background:var(--ace-surface-2, #242b2a);color:var(--ace-ink, #f5f2ea);border:1px solid var(--ace-line, #48514e);box-shadow:0 8px 30px rgba(0,0,0,.3333333333);font-family:inherit}.ace-site-map.leaflet-container .leaflet-popup-content a,.ace-site-map.leaflet-container .leaflet-popup-close-button{color:var(--ace-orange-2, #efb665)}.ace-site-map .marker-cluster{background:color-mix(in srgb, var(--ace-orange-2, #efb665) 30%, transparent)}.ace-site-map .marker-cluster div{background:var(--ace-surface-2, #242b2a);color:var(--ace-ink, #f5f2ea);border:1px solid var(--ace-orange-2, #efb665);font-family:inherit}.ace-site-map .ace-map-job-pin{display:grid;place-items:center;border:2px solid var(--ace-ink, #f5f2ea);border-radius:50%;background:var(--ace-orange-2, #efb665);color:var(--ace-bg, #14120f);box-shadow:0 2px 8px rgba(0,0,0,.4)}.ace-site-map:is(.is-satellite,.is-regular) .leaflet-tile-pane{filter:none}.ace-site-map .ace-map-job-pin svg{display:block;width:16px;height:16px;fill:currentColor} /* ace-live-map */ /* Sheffield Live Map (issue #51). Dark glass on the site's own tokens. */ .alm{--alm-h:calc(100vh - var(--ace-header-h,64px));--alm-bg:var(--ace-bg,#14120f);--alm-surface:rgba(28,24,19,.95);--alm-surface-2:rgba(36,31,24,.97);--alm-ink:var(--ace-ink,#f5f2ea);--alm-muted:var(--ace-muted,#b9b0a0);--alm-line:rgba(255,255,255,.12);--alm-orange:var(--ace-orange,#ff7a18);--alm-orange-2:var(--ace-orange-2,#ff9a45);--alm-teal:#12b3a6;--alm-blue:#4ea1ff;--alm-purple:#a06cff;--alm-red:#ff4d4f;--alm-amber:#ffb020;--alm-green:#3ecf8e;position:relative;width:100%;height:var(--alm-h);min-height:420px;background:var(--alm-bg);color:var(--alm-ink);overflow:hidden;font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;margin-top:0;margin-bottom:0;max-width:none} .alm *{box-sizing:border-box} /* The map is its own stacking context, so Leaflet panes (z 400+) can never climb over the sticky right-now strip or the header. */ .alm{isolation:isolate;z-index:0} .alm__map{position:absolute;inset:0;background:#2c2c2e;z-index:1} .alm{width:100vw;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important} .alm__flags{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden} .alm__flags.is-moving{opacity:.35} .alm__flags .alm-card{position:absolute;left:0;top:0;pointer-events:auto;transform:scale(.82);transform-origin:50% 50%;opacity:.8;will-change:transform;transition:opacity .2s,box-shadow .2s} .alm__flags .alm-card.is-near,.alm__flags .alm-card:hover{opacity:1;box-shadow:0 16px 40px rgba(0,0,0,.7);z-index:2} .alm__flags .alm-card::after{display:none} .alm__leaders{position:absolute;left:0;top:0;z-index:19;pointer-events:none} .alm__leaders line{stroke:rgba(255,154,69,.85);stroke-width:1.5} .alm__leaders circle{fill:#ff9a45} .alm .leaflet-marker-icon.alm-pinwrap,.alm .leaflet-marker-icon.alm-clusterwrap{opacity:.72;transition:opacity .15s} .alm .leaflet-marker-icon.alm-pinwrap:hover,.alm .leaflet-marker-icon.alm-clusterwrap:hover,.alm .leaflet-marker-icon.alm-pinwrap.is-hot,.alm .leaflet-marker-icon.is-lit{opacity:1} .alm-pin.is-hot .alm-pin__dot{background:#fff;box-shadow:0 0 0 3px rgba(255,122,24,.55),0 2px 6px rgba(0,0,0,.6)} .alm .leaflet-container{background:#2c2c2e;font:inherit} .alm .leaflet-tile-pane{filter:brightness(.78) contrast(1.28) saturate(.7)} .alm .ace-tiles--dark{filter:none} .alm .alm-labels{opacity:.75} .alm .leaflet-shadow-pane{z-index:430;pointer-events:none} .alm .leaflet-control-attribution{background:rgba(20,18,15,.75);color:var(--alm-muted);font-size:10px;max-width:min(92vw,720px)} .alm .leaflet-control-attribution a{color:var(--alm-ink)} .alm .leaflet-bar a{background:var(--alm-surface-2);color:var(--alm-ink);border-bottom-color:var(--alm-line)} .alm .leaflet-bar a:hover{background:#2f2921} .alm .leaflet-popup-content-wrapper,.alm .leaflet-popup-tip{background:var(--alm-surface-2);color:var(--alm-ink);box-shadow:0 8px 30px rgba(0,0,0,.5)} .alm .leaflet-popup-content{margin:10px 12px;font-size:13px;line-height:1.35} .alm .leaflet-popup-content a{color:var(--alm-orange-2)} .alm .leaflet-popup-close-button{color:var(--alm-muted)} .alm .alm-tile-wx{mix-blend-mode:screen} .alm .alm-tile-traffic{opacity:.85} .alm__nojs{padding:2rem;text-align:center} /* top bar */ .alm__top{position:absolute;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:8px;padding:8px 10px;pointer-events:none} .alm__top>*{pointer-events:auto} .alm__brand{display:flex;align-items:center;gap:8px;background:var(--alm-surface);border:1px solid var(--alm-line);border-radius:999px;padding:6px 12px 6px 10px;font-weight:700;letter-spacing:.01em;white-space:nowrap} .alm__brand .alm__live{width:8px;height:8px;border-radius:50%;background:var(--alm-red);} @keyframes alm-pulse{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.8);opacity:0}100%{transform:scale(1.8);opacity:0}} .alm__chips{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;background:var(--alm-surface);border:1px solid var(--alm-line);border-radius:999px;padding:4px} .alm__chips::-webkit-scrollbar{display:none} .alm__chip{border:0;background:transparent;color:var(--alm-muted);border-radius:999px;padding:5px 11px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap} .alm__chip:hover{color:var(--alm-ink)} .alm__chip.is-on{background:var(--alm-orange);color:#1a1108} .alm__now{margin-left:auto;display:flex;gap:6px;align-items:center} .alm__pill{display:inline-flex;align-items:center;gap:6px;background:var(--alm-surface);border:1px solid var(--alm-line);border-radius:999px;padding:6px 11px;font-weight:600;white-space:nowrap;color:var(--alm-ink);text-decoration:none} .alm__pill small{color:var(--alm-muted);font-weight:500} .alm__pill.is-warn-yellow{border-color:var(--alm-amber);color:var(--alm-amber)} .alm__pill.is-warn-amber{background:rgba(255,176,32,.2);border-color:var(--alm-amber);color:var(--alm-amber)} .alm__pill.is-warn-red{background:rgba(255,77,79,.25);border-color:var(--alm-red);color:#fff} .alm__layersbtn{display:none} /* warning banner */ .alm__banner{position:absolute;top:56px;left:50%;transform:translateX(-50%);z-index:41;max-width:min(92vw,720px);background:rgba(255,176,32,.16);border:1px solid var(--alm-amber);color:var(--alm-ink);border-radius:12px;padding:8px 12px;font-size:13px} .alm__banner.is-red{background:rgba(255,77,79,.22);border-color:var(--alm-red)} .alm__banner a{color:var(--alm-ink);font-weight:700} /* rail */ .alm__rail{position:absolute;top:56px;right:10px;bottom:52px;z-index:39;width:272px;display:flex;flex-direction:column;gap:8px;overflow:auto;scrollbar-width:thin;padding-bottom:8px} .alm__group{background:var(--alm-surface);border:1px solid var(--alm-line);border-radius:14px;padding:8px 8px 6px} .alm__group h3{margin:0 4px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--alm-muted);font-weight:700;display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;padding:2px 0} .alm__group h3::before{content:"▾";font-size:10px;transition:transform .15s;color:var(--alm-orange-2)} .alm__group.is-collapsed h3::before{transform:rotate(-90deg)} .alm__group.is-collapsed>*:not(h3){display:none!important} .alm__gcount{margin-left:auto;font-weight:600;color:var(--alm-muted);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none} .alm__group.is-collapsed{padding-bottom:4px} .alm__layer{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:var(--alm-ink);padding:6px 6px;border-radius:9px;font:inherit;cursor:pointer;text-align:left} .alm__layer:hover{background:rgba(255,255,255,.06)} .alm__layer .alm__ico{width:22px;text-align:center;font-size:15px;flex:0 0 22px} .alm__layer .alm__lbl{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.08rem;overflow:hidden;text-align:left} .alm__layer .alm__lbl{white-space:normal} /* The row names the thing on the map; the note says what it brings with it. */ .alm__note{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72em;font-weight:400;line-height:1.25;letter-spacing:.01em;color:var(--alm-muted);opacity:.85} .alm__layer.is-on .alm__note{opacity:.9} .alm__layer[disabled] .alm__note,.alm__layer.is-locked .alm__note{opacity:.55} .alm__layer .alm__cnt{font-size:11px;color:var(--alm-muted);font-variant-numeric:tabular-nums} .alm__layer .alm__sw{width:30px;height:16px;border-radius:999px;background:rgba(255,255,255,.14);position:relative;flex:0 0 30px;transition:background .2s} .alm__layer .alm__sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s} .alm__layer.is-on .alm__sw{background:var(--alm-orange)} .alm__layer.is-on .alm__sw::after{transform:translateX(14px)} .alm__layer.is-loading .alm__sw{background:var(--alm-orange-2);opacity:.6} .alm__layer.is-off .alm__lbl{color:var(--alm-muted)} .alm__layer.is-locked{opacity:.55} .alm__layer.is-locked .alm__cnt::before{content:"key ";} .alm__legend{display:flex;flex-wrap:wrap;gap:4px 10px;padding:2px 6px 4px;font-size:11px;color:var(--alm-muted)} .alm__legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:-1px} /* radar scrubber */ .alm__radar{display:none;align-items:center;gap:8px;padding:4px 6px 2px;font-size:12px;color:var(--alm-muted)} .alm__radar.is-on{display:flex} .alm__radar input[type=range]{flex:1;accent-color:var(--alm-orange)} .alm__radar button{border:0;background:rgba(255,255,255,.1);color:var(--alm-ink);border-radius:8px;width:26px;height:26px;cursor:pointer} .alm__radar .alm__rt{min-width:44px;text-align:right;font-variant-numeric:tabular-nums;color:var(--alm-ink)} /* now card */ .alm__nowcard{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:4px 6px 6px;font-size:12px;color:var(--alm-muted)} .alm__nowcard b{color:var(--alm-ink);font-size:20px;line-height:1.1;font-weight:700} .alm__nowcard .alm__sym{font-size:26px;line-height:1;grid-row:span 2;align-self:center} .alm__hours{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:4px 4px 2px} .alm__hours::-webkit-scrollbar{display:none} .alm__hour{flex:0 0 38px;text-align:center;font-size:10px;color:var(--alm-muted);line-height:1.2} .alm__hour b{display:block;color:var(--alm-ink);font-size:12px} .alm__hour span{display:block;font-size:15px;line-height:1.3} .alm__hour.is-wet{color:var(--alm-blue)} /* ticker */ .alm__ticker{position:absolute;left:10px;right:10px;bottom:10px;z-index:39;display:flex;align-items:center;gap:10px;background:var(--alm-surface);border:1px solid var(--alm-line);border-radius:12px;padding:6px 10px;height:36px;overflow:hidden;font-size:13px} .alm__ticker.is-empty{display:none} .alm__ticker .alm__tk{font-weight:700;color:var(--alm-orange-2);flex:0 0 auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase} .alm__ticker .alm__tkin{flex:1;min-width:0;overflow:hidden;white-space:nowrap;position:relative} .alm__ticker .alm__tkin::before,.alm__ticker .alm__tkin::after{content:'';position:absolute;top:0;bottom:0;width:22px;z-index:1;pointer-events:none} .alm__ticker .alm__tkin::before{left:0;background:linear-gradient(90deg,var(--alm-surface),transparent)} .alm__ticker .alm__tkin::after{right:0;background:linear-gradient(270deg,var(--alm-surface),transparent)} .alm__ticker.is-offscreen .alm__tktrack,.als__ticker.is-offscreen .als__tktrack{animation-play-state:paused} .alm__routes{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle} .alm__route{display:inline-block;min-width:22px;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:800;line-height:16px;text-align:center;color:var(--ri,#fff);background:var(--rc,#666);text-shadow:0 1px 1px rgba(0,0,0,.35)} .alm__route.is-more{background:rgba(255,255,255,.18)} .alm__ticker .alm__tktrack{display:inline-block;padding-left:100%;animation:alm-tick var(--alm-tk,60s) linear infinite;will-change:transform} .alm__ticker:hover .alm__tktrack{animation-play-state:paused} .alm__ticker a{color:var(--alm-ink);text-decoration:none;margin-right:34px} .alm__ticker a small{color:var(--alm-muted);margin-left:6px} .alm__ticker a.is-warn{color:var(--alm-amber)} .alm__ticker a.is-road{color:var(--alm-red)} @keyframes alm-tick{to{transform:translateX(-100%)}} @media (prefers-reduced-motion:reduce){.alm__ticker .alm__tktrack{animation:none;padding-left:0}.alm-ico.is-alert::after{animation:none}} /* panel */ .alm__panel{position:absolute;top:56px;left:10px;bottom:52px;z-index:42;width:min(420px,calc(100vw - 20px));background:var(--alm-surface-2);border:1px solid var(--alm-line);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:none;flex-direction:column;overflow:hidden} .alm__panel.is-open{display:flex} .alm__panelhead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--alm-line)} .alm__panelhead h2{margin:0;font-size:15px;line-height:1.25;flex:1;min-width:0} .alm__panelhead .alm__x{border:0;background:rgba(255,255,255,.08);color:var(--alm-ink);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:16px;flex:0 0 30px} .alm__panelbody{overflow:auto;padding:10px 12px 14px;scrollbar-width:thin} .alm__panelbody img{max-width:100%;height:auto;border-radius:10px} .alm__panelbody .ace-emodal__cover{margin:0 0 10px} .alm__panelbody .ace-emodal__coverimg{width:100%;border-radius:10px} .alm__meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px} .alm__meta span{background:rgba(255,255,255,.07);border-radius:999px;padding:3px 9px;font-size:12px} .alm__meta span.is-hot{background:var(--alm-orange);color:#1a1108;font-weight:700} .alm__actions{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0} .alm__btn{display:inline-flex;align-items:center;gap:6px;background:var(--alm-orange);color:#1a1108;border-radius:999px;padding:7px 13px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font:inherit} .alm__btn.is-ghost{background:rgba(255,255,255,.08);color:var(--alm-ink)} .alm__section{margin-top:12px;border-top:1px solid var(--alm-line);padding-top:8px} .alm__section h4{margin:0 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--alm-muted)} .alm__list{list-style:none;margin:0;padding:0;font-size:13px} .alm__list li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.06)} .alm__list li span:last-child{color:var(--alm-muted);white-space:nowrap} .alm__list li b{font-weight:600} .alm__spark{width:100%;height:46px;display:block} .alm__gauge{display:flex;align-items:baseline;gap:8px} .alm__gauge b{font-size:26px} .alm__bar{height:8px;border-radius:4px;background:rgba(255,255,255,.1);position:relative;margin:6px 0 4px;overflow:hidden} .alm__bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--alm-blue)} .alm__bar.is-high i{background:var(--alm-amber)} .alm__bar.is-over i{background:var(--alm-red)} .alm__rating{display:inline-block;min-width:20px;text-align:center;border-radius:5px;background:var(--alm-green);color:#062;font-weight:800;font-size:11px;padding:1px 4px} .alm__rating.is-low{background:var(--alm-amber);color:#420} /* markers */ .alm-pin{position:relative} .alm-pin__dot{width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--alm-orange,#ff7a18);border:2px solid #1a1108;box-shadow:0 2px 6px rgba(0,0,0,.6)} .alm-pin.is-free .alm-pin__dot{background:var(--alm-teal,#12b3a6)} .alm-pin.is-cls .alm-pin__dot{background:#8f8a80} .alm-pin__wx{position:absolute;left:14px;top:-9px;background:rgba(20,18,15,.9);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:1px 6px 1px 4px;font-size:11px;white-space:nowrap;color:#f5f2ea;line-height:1.4;pointer-events:none} .alm-card{width:196px;height:150px;padding:0;text-align:left;text-decoration:none;font:inherit;color:inherit;background:rgba(28,24,19,.96);border:1px solid rgba(255,255,255,.16);border-radius:12px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.55);transform:translate(-50%,-100%);position:relative;cursor:pointer;transition:transform .15s} .alm-card:hover{transform:translate(-50%,-100%) scale(1.03)} .alm-card:focus-visible{outline:3px solid var(--alm-orange-2);outline-offset:3px;opacity:1!important} .alm-card::after{content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;background:inherit;border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);transform:translateX(-50%) rotate(45deg)} .alm-card__img{height:96px;background:#241f18 center/cover no-repeat} .alm-card__body{padding:7px 9px 8px;font-size:12px;line-height:1.3;color:#f5f2ea} .alm-card__body b{display:block;font-size:13px;margin-bottom:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .alm-card__body small{color:#b9b0a0} .alm-card__tag{position:absolute;top:6px;left:6px;background:var(--alm-orange,#ff7a18);color:#1a1108;font-weight:800;font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 7px} .alm-card.is-super .alm-card__tag{background:#fff} .alm-card__wx{position:absolute;top:6px;right:6px;background:rgba(20,18,15,.85);border-radius:999px;padding:2px 7px;font-size:11px;color:#f5f2ea} .alm-cluster{background:rgba(255,122,24,.9);color:#1a1108;border:2px solid #1a1108;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.6)} .alm-bus{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center} .alm-bus__body{width:34px;height:18px;border-radius:5px 9px 9px 5px;background:var(--bus,#2e6bd6);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;position:relative} .alm-bus__body::after{content:"";position:absolute;right:-7px;top:50%;margin-top:-5px;border:5px solid transparent;border-left:6px solid #fff;border-right:0} .alm-bus__lbl{font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);line-height:1;pointer-events:none} .alm-bus.is-stale{opacity:.45} .alm-ico{width:26px;height:26px;border-radius:50%;background:rgba(28,24,19,.95);border:2px solid var(--c,#fff);display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.6);color:#fff} .alm-ico.is-sm{width:20px;height:20px;font-size:11px} .alm-ico.is-alert{--c:var(--alm-red,#ff4d4f);position:relative} .alm-ico.is-alert::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(255,77,79,.7);animation:alm-pulse 1.6s infinite;pointer-events:none} .alm-news{width:22px;height:22px;border-radius:6px;background:#f5f2ea;color:#1a1108;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;border:2px solid #1a1108;box-shadow:0 2px 6px rgba(0,0,0,.6)} .alm-news.is-hot{background:var(--alm-orange,#ff7a18)} .alm-station{background:rgba(20,18,15,.9);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:2px 6px;font-size:11px;font-weight:700;color:#fff;white-space:nowrap} .alm-tramstop{width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #9b4dff} /* mobile */ @media (max-width:820px){ .alm{--alm-h:calc(100vh - var(--ace-header-h,56px));} .alm__top{flex-wrap:wrap;padding:6px} .alm__now{margin-left:0;order:3;width:100%;overflow-x:auto;scrollbar-width:none} .alm__brand{padding:5px 10px 5px 8px;font-size:13px} .alm__layersbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--alm-line);background:var(--alm-surface);color:var(--alm-ink);border-radius:999px;padding:6px 11px;font:inherit;font-weight:700;cursor:pointer;margin-left:auto} .alm__rail{top:auto;left:0;right:0;bottom:0;width:auto;max-height:52vh;background:var(--alm-surface-2);border-radius:16px 16px 0 0;border-top:1px solid var(--alm-line);padding:8px;transform:translateY(105%);transition:transform .25s;z-index:45} .alm__rail.is-open{transform:none} .alm__group{background:transparent;border:0;padding:4px 0} .alm__ticker{bottom:8px;left:8px;right:8px} .alm__panel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:70vh;border-radius:16px 16px 0 0} .alm__banner{top:96px} .alm-card{width:160px} .alm-card__img{height:78px} } .alm .leaflet-bottom.leaflet-left{margin-bottom:54px} .alm .leaflet-marker-icon.alm-buswrap{transition:transform .9s linear} .alm .leaflet-zoom-anim .leaflet-marker-icon{transition:none!important} .alm .leaflet-marker-pane{will-change:transform} .alm .leaflet-marker-icon.alm-cardwrap,.alm .leaflet-marker-icon.alm-stationwrap{overflow:visible} .alm .leaflet-marker-icon.alm-councillor-wrap{overflow:visible;background:none;border:0} .alm-councillor-flag{position:relative;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:3px solid var(--alm-ink);border-radius:50% 50% 50% 8px;transform:rotate(-45deg);overflow:hidden;background:var(--alm-orange);color:#1a1108;font-weight:800;box-shadow:0 4px 16px rgba(0,0,0,.55)} .alm-councillor-flag>*{transform:rotate(45deg)} .alm-councillor-flag img{width:48px;height:48px;object-fit:cover;transform:rotate(45deg) scale(1.18)} .alm-councillor-photo{display:block;width:96px!important;height:112px!important;object-fit:cover;margin:0 auto 10px;border:2px solid var(--alm-orange)} /* app page: nothing but header + map */ body.ace-map-page{overflow:hidden} body.ace-map-page .ace-boosted,body.ace-map-page .ace-explore,body.ace-map-page .ace-explore-fold,body.ace-map-page footer.wp-block-template-part{display:none!important} body.ace-map-page main.wp-block-group{margin:0!important;padding:0!important} .alm__radio{padding:4px 6px 6px;font-size:12px;color:var(--alm-muted)} .alm__sel{width:100%;background:rgba(255,255,255,.07);color:var(--alm-ink);border:1px solid var(--alm-line);border-radius:8px;padding:6px;font:inherit;margin-bottom:6px} .alm__radiobtns{display:flex;gap:6px;margin-bottom:6px} .alm__radiobtns .alm__btn{padding:5px 10px;font-size:12px} .alm__radioout{line-height:1.35} .alm__radioout b{color:var(--alm-ink)} /* home page: right-now strip + news */ .als{margin:14px auto 6px;max-width:1240px;padding:0 10px} .als.alignfull{max-width:none;width:100vw;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important} /* The right-now block: in the page flow under the navigation (ticker line, then the facts), scrolls away. */ .als--ticker,.als--both{margin:0!important;padding:10px 32px 8px;position:relative;z-index:1;background:var(--ace-bg,#14120f);box-sizing:border-box} .als__inner{max-width:none;margin:0;display:flex;flex-direction:column;gap:8px} .als--ticker .als__ticker{border-radius:10px;background:rgba(28,24,19,.92)} .als--ticker .als__chips{margin:0;justify-content:center} .als__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px} .als__chip{display:inline-flex;align-items:center;gap:6px;background:rgba(28,24,19,.86);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 12px;font-weight:700;font-size:14px;color:var(--ace-ink,#f5f2ea);text-decoration:none} .als__chip small{color:var(--ace-muted,#b9b0a0);font-weight:500} .als__chip.is-warn{border-color:#ffb020;color:#ffb020} .als__ticker{display:flex;align-items:center;gap:10px;background:rgba(28,24,19,.86);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:6px 10px;height:36px;overflow:hidden;font-size:13px;color:var(--ace-ink,#f5f2ea)} .als__tk{font-weight:700;color:#ff9a45;font-size:11px;letter-spacing:.06em;text-transform:uppercase;flex:0 0 auto} .als__tkin{flex:1;min-width:0;overflow:hidden;white-space:nowrap;position:relative} .als__tkin::before,.als__tkin::after{content:'';position:absolute;top:0;bottom:0;width:22px;z-index:1;pointer-events:none} .als__tkin::before{left:0;background:linear-gradient(90deg,rgba(28,24,19,.92),transparent)} .als__tkin::after{right:0;background:linear-gradient(270deg,rgba(28,24,19,.92),transparent)} .als__tktrack{display:inline-block;padding-left:100%;animation:alm-tick var(--als-tk,60s) linear infinite;will-change:transform} .als__ticker:hover .als__tktrack{animation-play-state:paused} .als__tktrack a{color:var(--ace-ink,#f5f2ea);text-decoration:none;margin-right:34px} .als__tktrack a small{color:var(--ace-muted,#b9b0a0);margin-left:6px} .als__tktrack a.is-warn{color:#ffb020} .aln{max-width:1240px;margin:24px auto;padding:0 10px} .aln.alignfull{max-width:none;width:100vw;margin:32px calc(50% - 50vw) 48px!important;padding:36px 32px 44px;box-sizing:border-box;background:rgba(255,255,255,.025)} .aln.alignfull{padding-left:0;padding-right:0} .aln.alignfull>*{max-width:min(1640px,96vw);margin-left:auto;margin-right:auto;padding-left:clamp(.8rem,3vw,1.8rem);padding-right:clamp(.8rem,3vw,1.8rem);box-sizing:border-box} @media (max-width:820px){.aln.alignfull{padding:24px 0 32px}.als--ticker,.als--both{padding:8px 12px 6px}.als--ticker .als__chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}.als--ticker .als__chips::-webkit-scrollbar{display:none}.als--ticker .als__chip{flex:0 0 auto;white-space:nowrap}} .aln__grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} .aln__list{columns:1} @media (min-width:1100px){.aln__cols{grid-template-columns:5fr 3fr}} .aln__heading{font-size:1.6rem;margin:0 0 12px} .aln h3{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ace-muted,#b9b0a0);margin:0 0 10px} .aln__cols{display:grid;grid-template-columns:3fr 2fr;gap:24px} .aln__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px} .aln__card{display:block;text-decoration:none;color:inherit;background:rgba(28,24,19,.86);border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden} .aln__img{display:block;height:110px;background:#241f18 center/cover no-repeat} .aln__body{display:block;padding:8px 10px} .aln__body b{display:block;font-size:14px;line-height:1.3} .aln__body small{color:var(--ace-muted,#b9b0a0)} .aln__list{list-style:none;margin:0;padding:0} .aln__list li{padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.1);line-height:1.35} .aln__list a{color:inherit;text-decoration:none;font-weight:600} .aln__list small{display:block;color:var(--ace-muted,#b9b0a0)} .aln__more a{color:#ff9a45;text-decoration:none;font-weight:700} @media (max-width:820px){.aln__cols{grid-template-columns:1fr}} /* map summary (crawlable) */ body.ace-map-page{overflow:auto} .alm__summary{max-width:900px;margin:18px auto 40px;padding:0 16px;color:var(--ace-muted,#b9b0a0);font-size:15px;line-height:1.55} .alm__summary h2{color:var(--ace-ink,#f5f2ea);font-size:1.3rem;margin:0 0 8px} .alm__summary a{color:#ff9a45} .alm__summary-stamp{font-size:12px;opacity:.7} .alm__radiostat{display:flex;gap:8px;align-items:baseline;margin:4px 0 6px} .alm__radiostat b{font-size:24px;color:var(--alm-ink)} .alm__radiolegend{display:flex;flex-wrap:wrap;gap:4px 10px;margin:4px 0 6px;font-size:11px} .alm__radiolegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px} .alm__stations{padding:6px} .alm__stations .alm__btn{width:100%;justify-content:center} /* radio player */ .arp{max-width:520px;margin:20px auto;padding:0 12px;color:var(--ace-ink,#f5f2ea)} .arp.is-pop{margin:0;padding:12px;max-width:none} .arp__now{background:rgba(28,24,19,.95);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 14px;margin-bottom:12px} .arp__title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ace-muted,#b9b0a0)} .arp__station{font-size:18px;font-weight:700;margin:2px 0 8px} .arp__ctl{display:flex;align-items:center;gap:10px} .arp__play{width:44px;height:44px;border-radius:50%;border:0;background:#ff7a18;color:#1a1108;font-size:18px;cursor:pointer;flex:0 0 44px} .arp__vol{flex:1;accent-color:#ff7a18} .arp__pop{border:1px solid rgba(255,255,255,.16);background:transparent;color:inherit;border-radius:999px;padding:6px 10px;font:inherit;cursor:pointer} .arp__list{list-style:none;margin:0;padding:0;display:grid;gap:6px} .arp__st{display:block;width:100%;text-align:left;background:rgba(28,24,19,.86);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:9px 12px;color:inherit;font:inherit;font-weight:600;cursor:pointer;text-decoration:none} .arp__st small{display:block;font-weight:400;color:var(--ace-muted,#b9b0a0);font-size:12px} .arp__st.is-on{border-color:#ff7a18;background:rgba(255,122,24,.16)} .arp__st.is-ext::after{content:" ↗";color:var(--ace-muted,#b9b0a0)} .arp__note{font-size:12px;color:var(--ace-muted,#b9b0a0);margin-top:12px} .arp__note a{color:#ff9a45} .alm__bushead{display:flex;gap:12px;align-items:center;margin-bottom:6px} .alm-busmodel{width:120px;height:60px;flex:0 0 120px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))} .alm__busline{display:inline-block;color:#fff;font-weight:800;border-radius:6px;padding:2px 8px;font-size:15px;text-shadow:0 1px 2px rgba(0,0,0,.6)} .alm__busdest{font-weight:600;margin:4px 0 2px} .alm__share{background:var(--alm-surface);border:1px solid var(--alm-line);color:var(--alm-ink)} .alm-tram .alm-bus__body{width:28px;height:28px;border-radius:50%} .alm-tram .alm-bus__body::after{display:none} .alm-tram .alm-bus__lbl{font-size:14px} .alm__skipbands{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0} .alm__skipbands span{font-size:11px;border-radius:6px;padding:2px 6px;background:rgba(255,255,255,.08)} .alm__skipbands span b{font-weight:700;margin-right:3px} .alm__skipbands .is-good{background:rgba(62,207,142,.25)} .alm__skipbands .is-fair{background:rgba(255,176,32,.25)} .alm__skipbands .is-poor{background:rgba(255,77,79,.22)} .alm-plan{width:28px;height:28px;border-radius:50%;background:#ff9a45;color:#1a1108;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #1a1108;box-shadow:0 2px 8px rgba(0,0,0,.6)} /* Paint cost, not script, made the map page slow: blurred surfaces over a moving map are re-blurred every frame (Firefox especially), and the site header keeps a blur of its own on this page. None of it on a map page. */ body:has(#ace-live-map) .wp-block-template-part,body:has(#ace-live-map) header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .alm__tktrack,.als__tktrack{will-change:transform} .alm__ticker,.alm__group,.alm__panel,.alm__chips{contain:paint} /* follow mode: everything but the followed vehicle and its route steps back */ .alm.is-following .leaflet-marker-icon:not(.is-followed){opacity:.18!important;filter:saturate(.4)} .alm.is-following .leaflet-marker-icon.is-followed{opacity:1!important;z-index:9000!important;filter:drop-shadow(0 0 10px rgba(255,255,255,.9))} .alm.is-following .leaflet-marker-icon.is-followed .alm-bus__body{transform-origin:50% 50%;box-shadow:0 0 0 4px rgba(255,255,255,.55),0 2px 10px rgba(0,0,0,.7)} .alm.is-following .leaflet-almLines-pane path:not(.alm-focus-route),.alm.is-following .leaflet-almPoly-pane path,.alm.is-following .leaflet-overlay-pane path:not(.alm-focus-route){opacity:.15!important} .alm.is-following .leaflet-almLines-pane path.alm-focus-route{opacity:1!important} .alm.is-following .alm__flags,.alm.is-following .alm__leaders{opacity:.15} .alm.is-following .alm-tile-wx,.alm.is-following .alm-tile-traffic{opacity:.25!important} .alm.is-following .leaflet-marker-icon{transition:opacity .35s} /* The map app's locked mode hides every content block but the first; the right-now rows now come first, so keep the block that holds the map visible and hide the rows instead. */ body.ace-locked .wp-block-post-content>*:has(.ace-app){display:block!important} body.ace-locked .wp-block-post-content>.als{display:none!important} /* suggested for you: same gutter as the What's On browser, breathing room either side */ .ace-suggest{box-sizing:border-box;max-width:min(1640px,96vw);padding:0 clamp(.8rem,3vw,1.8rem);margin:24px auto 32px} .ace-suggest-band{padding:0} /* Home page with the right-now rows in flow: the map no longer pulls up under a fixed strip, and the What's On browser starts after the map instead of over its faded tail. */ body:has(.als--ticker) .ace-app{margin-top:0!important;margin-block-start:0!important;padding-top:0} body:has(.als--ticker) .ace-app__map{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%)} body:has(.als--ticker) .ace-events-browser{margin-top:-7.5rem!important;padding-top:1rem;background:linear-gradient(180deg,transparent,var(--ace-bg,#14120f) 5rem);isolation:isolate} body:has(.als--ticker) .ace-app{isolation:isolate;z-index:0} body:has(.als--ticker) .ace-browser__head{margin-bottom:.35rem} body:has(.als--ticker) .ace-grid-heading{color:var(--ace-ink,#f5f2ea)} @media (max-width:820px){.ace-suggest,.ace-suggest-band{padding:0 16px}} /* Optional jobs layer: same filter rail and contextual panel as other map tools. */ .alm__jobs-controls{padding:10px 12px;min-width:0;max-width:100%;font-size:12px;line-height:1.5} .alm__jobs-controls label{display:grid;gap:6px;font-weight:600}.alm__jobs-controls input{width:100%;min-width:0;box-sizing:border-box;padding:10px;border:1px solid var(--shell-line,#44504e);border-radius:8px;background:var(--shell-card,#222b2a);color:var(--shell-ink,#f4f2e9);font:inherit} .alm__jobs-controls button{margin-top:8px;width:100%;white-space:normal}.alm__jobs-controls a{display:block;color:var(--shell-accent,#eeb659);overflow-wrap:anywhere}.alm__jobs-status,.alm__jobs-note{color:var(--shell-muted,#aeb8b5);font-size:12px;line-height:1.55}.alm__jobs-description{white-space:pre-wrap;overflow-wrap:anywhere;margin-block:16px;font-size:14px;line-height:1.65} .alm__food-controls{padding:10px 8px 6px;display:grid;gap:12px;min-width:0;max-width:100%;font-size:12px;line-height:1.45} .alm__food-controls fieldset{min-width:0;margin:0;padding:0;border:0}.alm__food-controls legend,.alm__food-controls label{display:grid;gap:6px;font-weight:700}.alm__food-controls .alm__sel{margin:0;min-width:0}.alm__food-status{margin:2px 0 0;color:var(--shell-muted,#aeb8b5);font-size:11px;line-height:1.45} .alm__filter-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.alm__filter-pills button{min-width:34px;padding:5px 9px;border:1px solid var(--alm-line);border-radius:999px;background:transparent;color:var(--alm-muted);font:inherit;font-weight:700;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s}.alm__filter-pills button:hover{border-color:var(--alm-orange-2);color:var(--alm-ink);transform:translateY(-1px)}.alm__filter-pills button.is-on{border-color:var(--alm-orange);background:var(--alm-orange);color:#17130d} .alm-cluster.is-food{background:rgba(62,207,142,.92);color:#08251a}.alm-food-popup .alm__rating{margin:4px 0}.alm-food-popup a{display:inline-block;margin-top:5px;font-weight:700} .ace-map-results .alm__job-result{display:block;width:100%;text-align:left;white-space:normal} /* Compact, explicit All/None segmented switch for each layer group. */ .alm__gall{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-left:auto;padding:2px;border:1px solid var(--alm-line);border-radius:999px;background:color-mix(in srgb,var(--alm-surface-2) 82%,transparent);font-size:8px;letter-spacing:.05em;text-transform:uppercase} .alm__gall button{min-width:34px;padding:4px 6px;border:0;border-radius:999px;background:transparent;color:var(--alm-muted);font:inherit;font-weight:800;text-transform:inherit;cursor:pointer;transition:background .2s cubic-bezier(.2,.8,.2,1),color .2s,transform .2s} .alm__gall button:hover{color:var(--alm-ink)} .alm__gall button[aria-pressed="true"]{background:var(--alm-orange);color:#17130d;box-shadow:0 1px 5px rgba(0,0,0,.2)} .alm__gall button:active{transform:scale(.94)} .alm__group h3{display:flex;align-items:center;gap:.4rem} /* Merged toggles: colour key under a row while it is on, sub-options indented under their parent, source lines in popups. */ .alm__llegend{padding:0 6px 6px 36px;gap:3px 9px} .alm__llegend span{white-space:nowrap} .alm__llegend em{font-style:normal;margin-right:3px} .alm__layer.is-sub{padding-left:26px;font-size:12.5px;color:var(--alm-muted)} .alm__layer.is-sub.is-on{color:var(--alm-ink)} .alm__layer.is-sub::before{content:"";width:8px;height:8px;margin-right:-4px;border-left:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);border-radius:0 0 0 4px;flex:0 0 8px;align-self:flex-start;margin-top:2px} .alm__src{color:var(--alm-muted);font-size:11px;margin:6px 0 0} .alm__meta span.is-src{background:rgba(255,255,255,.12)} .alm-cluster.is-layer{background:rgba(78,161,255,.9);color:#08192e} .alm-air-citizen{opacity:.85} .alm__busfleet{display:block;color:var(--alm-muted);margin:0 0 8px} /* Gauge panel: the 7 day daily means as a small strip. */ .alm__week{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;font-size:11px;font-variant-numeric:tabular-nums} .alm__week span{flex:1 1 0;min-width:34px;text-align:center;padding:4px 2px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--alm-muted)} .alm__week span b{display:block;font-size:10px;color:var(--alm-ink)} .alm__week span.is-high{background:rgba(78,161,255,.22);color:var(--alm-ink)} /* Planner extras (what the caches know about the way): a few compact sections under the legs. */ .alm__modes{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px} .alm__modes .alm__btn{padding:5px 10px;font-size:12px} .alm__xtra{margin-top:10px} .alm__xtra small{display:block;margin-top:4px;color:var(--alm-muted);font-size:11px} .alm__xtra li.is-amber b{color:#ffb020} .alm__xtra li.is-red b{color:#ff4d4f} .alm__xtra li.is-online b{color:#3ecf8e} .alm__xtra li span:last-child{white-space:normal;text-align:right} /* My Sheffield: the signed-in member's own layer. Marked in the rail so it reads as personal, and never rendered at all for a guest (the row is not built). */ .alm__layer[data-layer="mysheffield"]{border-left:3px solid #ffd166} .alm__layer[data-layer="mysheffield"].is-on{background:rgba(255,209,102,.12)} .alm__layer[data-layer="mysheffield"] .alm__lbl::after{content:"only you";display:inline-block;margin-inline-start:.5em;padding:0 .4em;border-radius:6px;font-size:.7em;letter-spacing:.02em;text-transform:uppercase;background:rgba(255,209,102,.18);color:#ffd166;vertical-align:middle} /* The light mount (ACE_Live_Map::mini): same tokens and credit line as the full plate. */ .ace-minimap--plate{border-radius:var(--ace-radius,12px);overflow:hidden} .ace-minimap__more{margin:.4rem 0 0;font-size:.82rem} .ace-minimap__more a{color:var(--ace-muted,#b9b0a0);text-decoration:underline} .ace-minimap__more a:hover,.ace-minimap__more a:focus{color:var(--ace-orange,#ff7a18)} /* ---------------------------------------------------------------- map key rail The contextual rail's key and result list. It renders inside the shell's own contextual rail (#ace-shell-context), so it inherits the shell tokens there and only needs its own layout; the floating button is the control that brings it back when the rail is tucked away on a narrower screen. */ .alm-key{display:flex;flex-direction:column;gap:2px;padding:0 0 18px;color:var(--shell-ink,var(--alm-ink))} .alm-key__head{display:flex;align-items:center;gap:8px;padding:14px 16px 10px;position:sticky;top:0;z-index:2;background:var(--shell-panel,var(--alm-surface))} .alm-key__head h2{flex:1;margin:0;font-size:15px;letter-spacing:.02em} .alm-key__x{border:0!important;background:none!important;font-size:19px;line-height:1;padding:2px 6px!important;color:inherit} .alm-key__back{display:none;font-size:11px} .alm-key__status{margin:0;padding:0 16px 8px;font-size:11px;color:var(--shell-muted,var(--alm-muted))} .alm-key__layers{display:flex;flex-direction:column;gap:2px;padding:0 10px 6px} .alm-key__layer{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 8px!important;font-size:12px;border:0!important;border-radius:8px!important;background:transparent!important;color:inherit} .alm-key__layer:hover{background:color-mix(in srgb,var(--shell-accent,#ff7a18) 10%,transparent)!important} .alm-key__layer.is-focus{background:color-mix(in srgb,var(--shell-accent,#ff7a18) 16%,transparent)!important;box-shadow:inset 2px 0 0 var(--shell-accent,#ff7a18)} .alm-key__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .alm-key__dot{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;line-height:1;background:color-mix(in srgb,var(--c,#ff7a18) 30%,transparent);box-shadow:inset 0 0 0 1px var(--c,#ff7a18)} .alm-key__cnt{flex:none;font-variant-numeric:tabular-nums;font-size:12px;color:var(--shell-ink,var(--alm-ink))} .alm-key__cnt small{opacity:.6;font-size:10px} .alm-key__cnt.is-none,.alm-key__cnt.is-wait{color:var(--shell-muted,var(--alm-muted));font-size:10.5px;text-transform:uppercase;letter-spacing:.05em} .alm-key__legend{display:flex;flex-wrap:wrap;gap:4px 10px;padding:0 10px 8px 40px;font-size:10.5px;color:var(--shell-muted,var(--alm-muted))} .alm-key__legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:4px;vertical-align:baseline} .alm-key__legend em{font-style:normal;margin-inline-end:4px} .alm-key__fhead{padding:12px 16px 4px;border-top:1px solid var(--shell-line,var(--alm-line))} .alm-key__fhead h3{margin:0;font-size:13px} .alm-key__sort{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 16px} .alm-key__sort label{font-size:11px;color:var(--shell-muted,var(--alm-muted))} .alm-key__sort select{flex:1;min-width:120px;font-size:11px;padding:7px;border-radius:7px;border:1px solid var(--shell-line,var(--alm-line));background:var(--shell-bg,var(--alm-surface-2));color:inherit} .alm-key__dir{font-size:11px;padding:6px 9px!important} .alm-key__where{padding:0 16px 8px} .alm-key__me{font-size:10.5px;padding:5px 8px!important;color:var(--shell-muted,var(--alm-muted))} .alm-key__me[aria-pressed=true]{color:var(--shell-accent,var(--alm-orange));border-color:currentColor!important} .alm-key__list{list-style:none;margin:0;padding:0 10px;display:flex;flex-direction:column;gap:2px} .alm-key__item{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;padding:9px 8px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:inherit;font-size:12px} .alm-key__item:hover{background:color-mix(in srgb,var(--shell-accent,#ff7a18) 12%,transparent)!important} .alm-key__itxt{flex:1;min-width:0} .alm-key__ttl{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .alm-key__itxt small{display:block;font-size:10.5px;color:var(--shell-muted,var(--alm-muted));overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .alm-key__val{flex:none;text-align:right;font-variant-numeric:tabular-nums;font-weight:600} .alm-key__val small{display:block;font-weight:400;font-size:10px;color:var(--shell-muted,var(--alm-muted))} .alm-key__empty,.alm-key__more{margin:0;padding:8px 16px;font-size:11px;color:var(--shell-muted,var(--alm-muted));list-style:none} /* While a detail panel is open the rail shows the detail, with one way back to the key. */ .ace-shell__contextual:has(.alm__panel.is-open) .alm-key__status, .ace-shell__contextual:has(.alm__panel.is-open) .alm-key__layers, .ace-shell__contextual:has(.alm__panel.is-open) .alm-key__focus{display:none} .ace-shell__contextual:has(.alm__panel.is-open) .alm-key__head h2, .ace-shell__contextual:has(.alm__panel.is-open) .alm-key__x{display:none} .ace-shell__contextual:has(.alm__panel.is-open) .alm-key__back{display:block} /* The control that reopens the rail: over the map, clear of the ticker and the attribution. */ .alm-key__btn{position:absolute;top:64px;right:12px;z-index:26;display:flex;align-items:center;gap:7px;padding:8px 12px;font-size:12px;border-radius:999px;border:1px solid var(--alm-line);background:var(--alm-surface);color:var(--alm-ink);box-shadow:0 8px 24px rgba(0,0,0,.35)} .alm-key__btncnt:not(:empty){padding:1px 7px;border-radius:999px;font-size:11px;font-variant-numeric:tabular-nums;background:var(--alm-orange);color:#1b1206} @media(max-width:900px){.alm-key__btn{top:auto;bottom:18px;right:12px}} /* One search for the map. The scopes appear when the input is focused, so the box means one thing, and the clear control sits above it because it undoes everything below. */ .ace-map-clear{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem 0} .ace-map-clear .alm-clear{flex:0 0 auto;padding:.4rem .8rem;border:1px solid var(--ace-line,rgba(255,255,255,.16));border-radius:999px;background:transparent;color:var(--ace-ink,#f5f2ea);font:inherit;font-size:.82rem;cursor:pointer} .ace-map-clear .alm-clear:hover{border-color:var(--ace-orange-2,#efb665);color:var(--ace-orange-2,#efb665)} .ace-map-clear .alm-clear__on{font-size:.78rem;color:var(--ace-muted,#b9b0a0)} .ace-map-scopes{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;padding:.1rem .75rem .5rem} .ace-map-scopes p{flex:0 0 100%;margin:0;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ace-muted,#b9b0a0)} .ace-map-scopes label{display:inline-flex;align-items:center;gap:.35rem;font-size:.84rem;cursor:pointer} @media (prefers-reduced-motion: no-preference){.ace-map-scopes{animation:alm-scopes .16s ease}@keyframes alm-scopes{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}} /* A number set in dark ink needs no shadow; the shadow is there to lift white off a mid tone. */ .alm__route[style*="--ri:#15120d"]{text-shadow:none} /* The answer to the question the list was sorted by, named rather than left to position. */ .alm-key__list li.is-lead .alm-key__item{border-color:var(--ace-orange-2,#efb665);background:color-mix(in srgb,var(--ace-orange-2,#efb665) 10%,transparent)} .alm-key__lead{display:block;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ace-orange-2,#efb665)} /* A key section folds away, and the caret says which way it is. */ .alm-key__fold{display:flex;align-items:center;gap:.45rem;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer} .alm-key__fold h3{margin:0} .alm-key__caret{flex:0 0 auto;width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;opacity:.75;transform:rotate(90deg)} .alm-key__fold[aria-expanded="false"] .alm-key__caret{transform:none} @media (prefers-reduced-motion: no-preference){.alm-key__caret{transition:transform .16s ease}} /* A layer that is not ready: readable, obviously inert, and silent about why. */ .alm__layer.is-locked,.alm__layer[disabled]{cursor:not-allowed;opacity:.48} .alm__layer.is-locked:hover,.alm__layer[disabled]:hover{background:none} .alm__layer.is-locked .alm__sw{opacity:.35} /* ace-matchday */ /* Match day (issue #55): banner on single events, chip in the live strip, fixture list. */ .acemd{margin:0 0 22px;padding:14px 16px;background:var(--ace-surface,#1c1813);border:1px solid rgba(255,176,32,.45);border-left:4px solid #ffb020;border-radius:var(--ace-radius,12px);color:var(--ace-ink,#f5f2ea);box-shadow:0 10px 30px rgba(0,0,0,.25)} .acemd__row{display:flex;align-items:flex-start;gap:12px} .acemd__row+.acemd__row{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.1)} .acemd__icon{flex:0 0 auto;font-size:1.5rem;line-height:1} .acemd__body{flex:1 1 auto;min-width:0} .acemd__title{display:block;font-size:1.05rem;color:#ffb020} .acemd__fix{font-weight:600} .acemd__fix small{color:var(--ace-muted,#b9b0a0);font-weight:500} .acemd__note{margin:6px 0 0;color:var(--ace-muted,#b9b0a0);font-size:.88rem;line-height:1.45} .acemd__map{flex:0 0 auto;align-self:center;background:var(--ace-orange,#ff7a18);color:var(--ace-orange-ink,#1a1108);border-radius:999px;padding:7px 13px;font-weight:700;font-size:.82rem;text-decoration:none;white-space:nowrap} .acemd__map:hover{background:var(--ace-orange-2,#ff9a45);color:var(--ace-orange-ink,#1a1108)} .acemd__credit,.acemdl__credit{margin:10px 0 0;font-size:.72rem;color:var(--ace-muted,#b9b0a0)} .acemd__credit a,.acemdl__credit a{color:inherit} .als__chip.acemd-chip{border-color:#ffb020;color:#ffb020} .acemdl{margin:28px 0;padding:18px 20px 16px;background:var(--ace-surface,#1c1813);border:1px solid rgba(255,255,255,.12);border-radius:var(--ace-radius,12px);color:var(--ace-ink,#f5f2ea)} .acemdl__heading{margin:0 0 12px;font-size:1.25rem;line-height:1.2} .acemdl__list{list-style:none;margin:0;padding:0} .acemdl__item{display:grid;grid-template-columns:auto 92px 1fr auto;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.08);font-size:.92rem} .acemdl__item:last-child{border-bottom:0} .acemdl__item.is-today{background:rgba(255,176,32,.08);margin:0 -10px;padding:9px 10px;border-radius:8px} .acemdl__icon{font-size:1.3rem;line-height:1} .acemdl__when b,.acemdl__what b{display:block} .acemdl__when small,.acemdl__what small{display:block;color:var(--ace-muted,#b9b0a0);font-size:.8rem} .acemdl__map{background:rgba(255,255,255,.08);color:var(--ace-ink,#f5f2ea);border-radius:999px;padding:5px 11px;font-weight:700;font-size:.78rem;text-decoration:none} .acemdl__map:hover{background:var(--ace-orange,#ff7a18);color:var(--ace-orange-ink,#1a1108)} .acemdl__empty{margin:0;color:var(--ace-muted,#b9b0a0)} @media (max-width:520px){.acemdl__item{grid-template-columns:auto 1fr auto}.acemdl__when{display:none}.acemd__row{flex-wrap:wrap}.acemd__map{align-self:flex-start}} /* ace-bus-disruptions */ /* Bus disruptions (issue #56): shortcode list, home-strip chip, map-ticker anchors. */ .acebd{margin:28px 0;padding:18px 20px 16px;background:var(--ace-surface,#1c1813);border:1px solid rgba(255,255,255,.12);border-left:4px solid #ffb020;border-radius:12px;color:var(--ace-ink,#f5f2ea)} .acebd__heading{margin:0 0 12px;font-size:1.25rem;line-height:1.2} .acebd__list{list-style:none;margin:0;padding:0} .acebd__item{padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.1)} .acebd__item:last-child{border-bottom:0} .acebd__sum{display:block;color:#ffb020} .acebd__meta{display:block;margin-top:3px;font-size:.82rem;color:var(--ace-muted,#b9b0a0)} .acebd__text{margin:6px 0 0;font-size:.92rem;line-height:1.45;color:var(--ace-ink,#f5f2ea)} .acebd__empty{margin:0;color:var(--ace-muted,#b9b0a0)} .acebd__credit{margin:12px 0 0;font-size:.72rem;color:var(--ace-muted,#b9b0a0)} .acebd__credit a{color:inherit} .als__chip.acebd-chip{border-color:#ffb020;color:#ffb020} .alm__ticker a.acebd-tk{color:var(--alm-amber,#ffb020)} /* ace-event-weather */ /* Weather at start time (issue #60): forecast chip on single events and map-list cards. */ .aceew{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:18px 0 22px;padding:12px 16px;background:var(--ace-surface,#1c1813);border:1px solid var(--ace-line,rgba(255,255,255,.12));border-radius:var(--ace-radius,12px);color:var(--ace-ink,#f5f2ea);font-size:.92rem} .aceew__chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--ace-line,rgba(255,255,255,.12));font-weight:700;white-space:nowrap;line-height:1.2} .aceew__icon{font-size:1.05em;line-height:1} .aceew__dry{color:var(--ace-muted,#b9b0a0);font-weight:600} .aceew__attr{flex-basis:100%;font-size:.7rem;line-height:1.3;color:var(--ace-muted,#b9b0a0);opacity:.8} /* Card chip appended by event-weather.js under the date line. */ .aceew-card{display:inline-flex;align-items:center;gap:4px;margin:2px 0 4px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);color:var(--ace-ink,#f5f2ea);font-size:.72rem;font-weight:700;line-height:1.3;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} .aceew-card__icon{line-height:1} @media (max-width:480px){.aceew{padding:10px 12px;font-size:.88rem}.aceew__chip{white-space:normal}} /* ace-flood-power */ /* Flood watch and power-cut flags (issue #61). Prefix ace-fp. */ .ace-fp{margin:0 0 18px;display:grid;gap:10px} .ace-fp__banner{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:var(--ace-surface,rgba(255,255,255,.06));color:var(--ace-ink,#f5f2ea);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)} .ace-fp__banner--amber{border-color:rgba(255,170,40,.55);background:linear-gradient(90deg,rgba(255,170,40,.18),var(--ace-surface,rgba(255,255,255,.06)) 70%)} .ace-fp__banner--red{border-color:rgba(255,80,70,.65);background:linear-gradient(90deg,rgba(255,80,70,.22),var(--ace-surface,rgba(255,255,255,.06)) 70%)} .ace-fp__icon{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;line-height:1;background:rgba(255,170,40,.9);color:#1a1409} .ace-fp__banner--red .ace-fp__icon{background:rgba(255,80,70,.95);color:#fff} .ace-fp__text{display:grid;gap:3px;min-width:0} .ace-fp__title{font-size:1rem;font-weight:800;letter-spacing:.2px} .ace-fp__detail{font-size:.85rem;color:var(--ace-ink,#f5f2ea);opacity:.9} .ace-fp__msg{font-size:.85rem;color:var(--ace-muted,#b9b0a0)} .ace-fp__attr{font-size:.72rem;color:var(--ace-muted,#b9b0a0)} .ace-fp__attr a{color:var(--ace-orange,#ff7a18);text-decoration:none} .ace-fp__attr a:hover{text-decoration:underline} /* Card badges appended by flood-power.js */ .ace-fp__badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px} .ace-fp__badge{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 9px;font-size:.72rem;font-weight:700;line-height:1.5;white-space:nowrap;border:1px solid rgba(255,170,40,.6);background:rgba(255,170,40,.18);color:#ffd28a} .ace-fp__badge--red{border-color:rgba(255,80,70,.7);background:rgba(255,80,70,.22);color:#ffb4ae} .ace-fp__badge--power{border-color:rgba(255,170,40,.6);background:rgba(255,170,40,.18);color:#ffd28a} @media (max-width:600px){.ace-fp__banner{padding:10px 12px}.ace-fp__icon{flex-basis:26px;width:26px;height:26px;font-size:13px}} /* ace-context-chips */ /* Context chips (issue #63): bank holidays, term dates, council meetings, elections. */ .acectx{margin:12px 0} .acectx__chips{display:flex;flex-wrap:wrap;gap:8px} .acectx__credit{margin:8px 0 0;font-size:.72rem;color:var(--ace-muted,#b9b0a0)} .als__chip.acectx-chip,.alm__now .acectx-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(28,24,19,.86);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 12px;font-weight:700;font-size:14px;color:var(--ace-ink,#f5f2ea);text-decoration:none;white-space:nowrap} .acectx-chip small{color:var(--ace-muted,#b9b0a0);font-weight:500} .acectx-chip--bank-holiday{border-color:var(--ace-orange,#ff7a18)} .acectx-chip--election{border-color:#7fb3ff} .acectx-chip--council{border-color:rgba(255,255,255,.28)} .acectx-chip--term{border-color:#9be07a} .alm__now .acectx-chip{padding:4px 10px;font-size:12px} .alm__now .acectx-chip small{display:none} /* ace-discovery-preferences */ .ace-discovery-watch,.ace-discovery-manager{box-sizing:border-box;min-width:0;padding:1rem;border-block:1px solid var(--shell-line,#394240);font:inherit;color:inherit}.ace-discovery-watch form{display:grid;gap:.65rem;margin-block:1rem}.ace-discovery-watch input[type=text]{box-sizing:border-box;display:block;width:100%;min-width:0;padding:.7rem;border:1px solid var(--shell-line,#68716e);border-radius:6px;background:var(--shell-card,var(--ace-surface,#fff));color:inherit}.ace-discovery-watch button,.ace-discovery-manager button{font:inherit;color:inherit;white-space:normal;text-align:start;padding:.6rem .7rem;max-width:100%;cursor:pointer}.ace-discovery-watch>button{width:100%;border:1px solid var(--shell-line,#68716e);background:transparent}.ace-discovery-watch p,.ace-discovery-manager p{font-size:.875rem;line-height:1.5;margin:.6rem 0}.ace-discovery-toggle{display:flex!important;gap:.5rem;align-items:center;font-size:.875rem}.ace-discovery-toggle input{width:1.1rem!important;height:1.1rem;flex:none;accent-color:#efb65d}.ace-discovery-list{list-style:none;padding:0;margin:.8rem 0}.ace-discovery-saved{border-block-end:1px solid var(--shell-line,#68716e);padding:.9rem 0;overflow-wrap:anywhere}.ace-discovery-saved-title{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.ace-discovery-saved-title>a{font-weight:650}.ace-discovery-saved-title>span{font-size:.75rem;opacity:.7}.ace-discovery-channels{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0}.ace-discovery-remove{background:transparent;border:0;text-decoration:underline;font-size:.8rem!important;padding:.3rem 0!important}.ace-discovery-summary{opacity:.75}.ace-discovery-watch summary{cursor:pointer;padding-block:.7rem}.ace-discovery-watch a,.ace-discovery-manager a{color:inherit;text-decoration:underline}.ace-discovery-watch button:focus-visible,.ace-discovery-watch input:focus-visible,.ace-discovery-manager a:focus-visible{outline:2px solid #efb65d;outline-offset:3px} /* contact-form-7 */ .wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important; word-break: normal !important; } .wpcf7 .hidden-fields-container { display: none; } .wpcf7 form .wpcf7-response-output { margin: 2em 0.5em 1em; padding: 0.2em 1em; border: 2px solid #00a0d2; /* Blue */ } .wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; } .wpcf7 form.sent .wpcf7-response-output { border-color: #46b450; /* Green */ } .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output { border-color: #dc3232; /* Red */ } .wpcf7 form.spam .wpcf7-response-output { border-color: #f56e28; /* Orange */ } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border-color: #ffb900; /* Yellow */ } .wpcf7-form-control-wrap { position: relative; } .wpcf7-not-valid-tip { color: #dc3232; /* Red */ font-size: 1em; font-weight: normal; display: block; } .use-floating-validation-tip .wpcf7-not-valid-tip { position: relative; top: -2ex; left: 1em; z-index: 100; border: 1px solid #dc3232; background: #fff; padding: .2em .8em; width: 24em; } .wpcf7-list-item { display: inline-block; margin: 0 0 0 1em; } .wpcf7-list-item-label::before, .wpcf7-list-item-label::after { content: " "; } .wpcf7-spinner { visibility: hidden; display: inline-block; background-color: #23282d; /* Dark Gray 800 */ opacity: 0.75; width: 24px; height: 24px; border: none; border-radius: 100%; padding: 0; margin: 0 24px; position: relative; } form.submitting .wpcf7-spinner { visibility: visible; } .wpcf7-spinner::before { content: ''; position: absolute; background-color: #fbfbfc; /* Light Gray 100 */ top: 4px; left: 4px; width: 6px; height: 6px; border: none; border-radius: 100%; transform-origin: 8px 8px; animation-name: spin; animation-duration: 1000ms; animation-timing-function: linear; animation-iteration-count: infinite; } @media (prefers-reduced-motion: reduce) { .wpcf7-spinner::before { animation-name: blink; animation-duration: 2000ms; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes blink { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } } .wpcf7 [inert] { opacity: 0.5; } .wpcf7 input[type="file"] { cursor: pointer; } .wpcf7 input[type="file"]:disabled { cursor: default; } .wpcf7 .wpcf7-submit:disabled { cursor: not-allowed; } .wpcf7 input[type="url"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] { direction: ltr; } .wpcf7-reflection > output { display: list-item; list-style: none; } .wpcf7-reflection > output[hidden] { display: none; } /* iga-footer */ /* * Site footer. Loaded from inc/footer.php, deliberately not from workspace.css: * the footer appears on ordinary pages as well as inside the workspace shell, * so it carries its own tokens and does not depend on the shell being present. * * Dark is the default. Light is the [data-ace-theme=light] branch, set on the * body by the theme switcher. */ .ace-footer { --fo-bg: #14100c; --fo-ink: #f2efe7; --fo-muted: #a49c8d; --fo-line: color-mix(in srgb, #f5f2ea 14%, transparent); --fo-accent: #ff9a45; --fo-gap: clamp(28px, 4vw, 48px); box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; padding: clamp(36px, 5vw, 64px) clamp(18px, 4vw, 56px) clamp(24px, 3vw, 36px); background: var(--fo-bg); color: var(--fo-ink); border-top: 1px solid var(--fo-line); font-size: 15px; line-height: 1.55; overflow-x: clip; } [data-ace-theme=light] .ace-footer { --fo-bg: #e4e2d8; --fo-ink: #23201b; --fo-muted: #5f5a51; --fo-line: color-mix(in srgb, #23201b 16%, transparent); --fo-accent: #a8500f; } .ace-footer * { box-sizing: border-box; } .ace-footer__inner { max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(26px, 3.2vw, 38px) clamp(32px, 4vw, 72px); } /* ------------------------------------------------------------------ brand -- */ .ace-footer__brand { flex: 1 1 100%; max-width: 68ch; min-width: 0; } .ace-footer__mark { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--fo-ink); font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: clamp(20px, 2.4vw, 25px); letter-spacing: -0.01em; line-height: 1.1; } .ace-footer__mark-pin { color: var(--fo-accent); flex: none; } .ace-footer__mark:hover .ace-footer__mark-name, .ace-footer__mark:focus-visible .ace-footer__mark-name { text-decoration: underline; text-underline-offset: 3px; } .ace-footer__blurb { margin: 14px 0 0; color: var(--fo-muted); font-size: 14px; line-height: 1.6; text-wrap: pretty; } .ace-footer__why { margin: 12px 0 0; font-size: 14px; } .ace-footer__why a { color: var(--fo-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent); padding-bottom: 1px; } .ace-footer__why a:hover, .ace-footer__why a:focus-visible { border-bottom-color: currentColor; } .ace-footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; } .ace-footer__social a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; min-height: 32px; border: 1px solid var(--fo-line); border-radius: 999px; color: var(--fo-ink); text-decoration: none; font-size: 13px; line-height: 1.5; transition: border-color .15s, color .15s; } .ace-footer__social a:hover, .ace-footer__social a:focus-visible { border-color: var(--fo-accent); color: var(--fo-accent); } /* -------------------------------------------------------------------- nav -- */ .ace-footer__nav { flex: 1 1 100%; width: 100%; padding-top: clamp(22px, 3vw, 34px); border-top: 1px solid var(--fo-line); display: grid; /* Sized against the space the footer actually has, not the viewport, so the columns behave the same beside the workspace rails as on a plain page. */ grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: clamp(22px, 3vw, 32px) clamp(16px, 2vw, 28px); min-width: 0; } .ace-footer__group { min-width: 0; } /* A column heading here is a heading like any other on the site: sentence case, the same weight, the same tight tracking. The small caps treatment made the footer read as something bolted on from another site. */ .ace-footer__title { margin: 0 0 10px; padding: 0 0 8px; border-bottom: 1px solid var(--fo-line); color: var(--fo-ink); font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: .01em; text-transform: none; line-height: 1.25; text-wrap: balance; /* A two-line heading must not drop its rule below its neighbours', so every title reserves two lines and sits on the same baseline. */ display: flex; align-items: flex-end; min-height: 2.5em; } .ace-footer__links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; } .ace-footer__links a { display: block; padding: 5px 0; color: var(--fo-muted); text-decoration: none; font-size: 14px; line-height: 1.45; overflow-wrap: break-word; hyphens: none; transition: color .15s; } /* Hovering a footer link changes its colour and nothing else. The footer columns are a