/* Leon's Lair Explore viewer stylesheet (LL common fly-through r8, ledger row 2464). Provenance: the :root palette, .ev-3d-*, .ev-pop-*, .ll-stop-card, .ll-caption and .ll-cesium-credits rules are the r8 Things to Do page rules the overlay was styled with (worker/src/pages/events-hub.js in LL-FLY-THROUGH-r8.zip 9f6db321), in the same cascade order. MapLibre, .ll-pin and .ll-mode rules are not here because the Venue tour mode is not in this document. .ll-landing is new (this page's own chrome). */ *{margin:0;padding:0;box-sizing:border-box} :root{--bg:#1A1A2E;--bg2:#16213E;--card:#0F3460;--amber:#F5A623;--cream:#F5F0E8;--dim:#BDB5A8;--radius:12px} body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--cream);line-height:1.6;min-height:100vh} a{color:var(--amber);text-decoration:none} a:hover{text-decoration:underline} /* Landing (behind the overlay: replay and the way back) */ .ll-landing{max-width:640px;margin:0 auto;padding:3rem 1.5rem;text-align:center} .ll-kicker{font-size:1.25rem;font-weight:800;color:var(--cream)} .ll-kicker span{color:var(--amber)} .ll-landing h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;margin:1rem 0 .5rem;line-height:1.2} .ll-landing h1 span{color:var(--amber)} .ll-landing p{color:var(--dim);font-size:1.05rem} .ll-actions{margin:1.5rem 0 1rem} .ll-back{font-weight:700} .ll-actions .ev-3d-btn{min-height:44px;padding:.6rem 1.4rem;font-size:1rem} .ev-3d-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem 1rem;border-radius:50px;border:1.5px solid var(--amber);background:transparent;color:var(--amber);font-weight:700;font-size:.85rem;cursor:pointer;font-family:inherit;transition:background .15s,color .15s} .ev-3d-btn:hover{background:var(--amber);color:var(--bg)} /* Venue popup content (the stop card) */ .ev-pop-v{display:block;font-weight:700;font-size:.95rem;color:var(--amber)} .ev-pop-a{display:block;font-size:.78rem;color:var(--dim);margin-bottom:.35rem} .ev-pop ul{list-style:none;margin:0;padding:0} .ev-pop li{padding:.3rem 0;border-top:1px solid rgba(245,166,35,.1);font-size:.82rem;line-height:1.35} .ev-pop-d{display:block;font-weight:700;color:var(--dim);font-size:.72rem} .ev-pop a{color:var(--cream);font-weight:600} .ev-pop-more{display:block;margin-top:.35rem;font-size:.75rem;color:var(--dim)} /* 3D explore overlay */ .ev-3d{position:fixed;inset:0;z-index:1000;background:var(--bg)} .ev-3d[hidden],.ev-3d-bar[hidden],.ev-3d-status[hidden],.ev-3d-tbtn[hidden]{display:none} .ev-3d .ev-3d-view{position:absolute;inset:0;width:100%;height:100%} .ev-3d-close{position:absolute;top:12px;right:12px;z-index:3;width:44px;height:44px;border-radius:50%;border:2px solid var(--amber);background:rgba(26,26,46,.9);color:var(--amber);cursor:pointer;display:flex;align-items:center;justify-content:center} .ev-3d-status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:min(420px,calc(100% - 32px));font-weight:700;color:var(--amber);text-align:center;padding:1rem;background:rgba(26,26,46,.92);border-radius:var(--radius)} .ev-3d-status a{display:inline-block;min-height:44px;line-height:44px;color:var(--cream);text-decoration:underline} .ev-3d-bar{position:absolute;left:12px;right:12px;bottom:34px;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px} .ev-3d-tbtn{min-width:44px;min-height:44px;padding:0 1.1rem;border-radius:50px;border:2px solid var(--amber);background:var(--amber);color:var(--bg);font-weight:700;font-size:.95rem;font-family:inherit;cursor:pointer} .ev-3d-tbtn.ev-3d-alt{background:rgba(26,26,46,.92);color:var(--amber)} /* The failure view's "Back to Things to Do" is a link styled as a pill (gate r1 F1); .ev-3d-status a above would otherwise give it the cream underlined text of a plain status link. 40px line + 2px borders = 44px. */ .ev-3d-status a.ev-3d-tbtn{color:var(--bg);text-decoration:none;line-height:40px;min-height:0} .ev-3d-info{flex:1 1 140px;min-width:0;font-weight:700;font-size:.85rem;color:var(--cream);background:rgba(26,26,46,.85);border-radius:50px;padding:.45rem .9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ev-3d-info:empty{display:none} .ev-3d .ev-pop{padding-right:30px} /* Overlay chrome geometry (ledger row 2480): three custom properties on #ev-3d, measured by viewer.mjs with a ResizeObserver, place the chrome so no two pieces overlap at 320-480 px, portrait or landscape: --ll-top bottom edge of the caption or the close button, whichever is lower (default: close, 12+44) --ll-bar the control bar's rendered height (0 while hidden) --ll-credits the credit line's rendered height (0 until the adapter attaches it; capped at 96 px inline) The stop card starts below --ll-top and is capped to the room left above the bar and the credit line; the bar sits above the credit line. Measured before (443x896, real-length Esri credits): the 82 px credit line rose 2 px into the bar fixed at bottom:80px; at 320 px the 3-line caption ran 16 px into the card at top:64px. */ .ll-stop-card{position:absolute;right:16px;top:calc(var(--ll-top,56px) + 8px);width:min(320px,calc(100% - 32px));max-height:min(45vh,calc(100% - var(--ll-top,56px) - var(--ll-bar,0px) - var(--ll-credits,0px) - 28px));overflow:auto;background:#1a1a2ef5;color:#fff8e7;padding:18px;border-radius:12px;z-index:3;box-shadow:0 4px 20px #0004} .ll-stop-card[hidden]{display:none}.ll-stop-card a{color:#f5a623}.ll-stop-card ul{padding-left:16px}.ll-stop-card li{margin:12px 0}.ll-stop-card .ev-pop-d{display:block;color:#94a3b8;font-size:13px} .ll-caption{position:absolute;top:12px;left:64px;right:70px;background:#1a1a2ee8;color:#fff8e7;padding:5px 12px;border-radius:6px;z-index:3;font-size:12px;pointer-events:none}.ll-caption:empty{display:none} .ll-cesium-credits .cesium-widget-credits{position:static;display:block;color:#111;text-shadow:none;max-width:100%} .ll-cesium-credits .cesium-credit-textContainer{white-space:normal} .ll-cesium-credits a{color:#242424!important;text-shadow:none} .ev-3d-tbtn:disabled{opacity:.5;cursor:default}.ev-3d button:focus-visible,.ev-3d select:focus-visible,.ev-3d a:focus-visible{outline:3px solid #fff;outline-offset:3px} .ev-3d-bar{bottom:calc(var(--ll-credits,0px) + 10px);background:#1a1a2edd;padding:10px;border-radius:12px} @media(max-width:600px){.ll-stop-card{max-height:min(28vh,calc(100% - var(--ll-top,56px) - var(--ll-bar,0px) - var(--ll-credits,0px) - 28px));font-size:13px;width:calc(100% - 32px)}.ev-3d-bar{gap:6px;padding:8px}.ev-3d-tbtn{padding:0 12px}.ev-3d-info{flex-basis:100%}} /* Credit lightbox open (ledger row 2488): viewer.mjs sets ll-credits-open on #ev-3d while Cesium's "Data attribution" dialog is displayed. The caption and the close button are hidden for that span (they sat on top of the dialog at z-index 3: at 443x896 the caption covered the "Data provided by:" heading and our X sat beside the dialog's own X) and come back when it closes. The overlay itself is lifted above the rest of the chrome (the bar, the stop card and the credit line, z-index 3 and 4) so the dialog's backdrop covers them as a modal backdrop should; Cesium's own value is 1. */ .ev-3d.ll-credits-open .ll-caption,.ev-3d.ll-credits-open .ev-3d-close{display:none} .ev-3d .cesium-credit-lightbox-overlay{z-index:5} .ev-3d .cesium-credit-lightbox:focus-visible{outline:3px solid #fff;outline-offset:-3px} /* CesiumJS 1.138 CreditDisplay lightbox stylesheet (the attribution dialog behind the credit line's "Data attribution" link). Cesium.js:11607 injects these rules as an inline