/* SeatLayer 3D seat map page * ------------------------------------------------------------------ * One page owns this file. Its whole job is the stage: the released * buyer picker, full-bleed, in the first viewport, with every other * surface on the page deliberately quiet so the venue is the only * thing asking for attention. * * The `.sl3d-proof--stage` block is a variant of the shared proof * shell in buyer-3d-proof.css. It is additive and scoped: nothing here * can reach the homepage or features proof, which keep the framed, * click-to-load, chrome-on shell exactly as they were. */ /* The page body stays on the site's paper. Painting midnight looked right until the translucent header sampled it and dropped the nav links to ~2:1, and the cream sections — which have no background of their own — rendered dark ink on midnight. Sections paint themselves instead. */ .d3-page .footer{border-top:1px solid #212c40} /* ---------------- 1 · the stage ---------------- */ .d3-stage{ position:relative; overflow:hidden; padding:0 0 30px; background:#0b111b; color:#e6ecf7 } .d3-stage:before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(58% 52% at 76% 0,rgba(91,109,190,.22),transparent 72%), radial-gradient(44% 46% at 6% 8%,rgba(244,183,64,.1),transparent 74%) } .d3-stage .wrap{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px} /* The copy band is deliberately short. Every pixel it spends is a pixel the venue does not get in the first viewport, and the venue is the argument. */ .d3-stage-copy{max-width:62ch;padding-top:26px} .d3-stage-copy h1{ margin:0; font-size:var(--sl-title-page); line-height:1.02; letter-spacing:-.045em; text-wrap:balance } .d3-stage-copy p{ max-width:60ch; margin:14px 0 0; color:#b3bdcd; font-size:16.5px; line-height:1.6 } .d3-stage-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:16px} .d3-text-link{ display:inline-flex; min-height:44px; align-items:center; color:#e6ecf7; font-weight:700; font-size:14px; border-bottom:1px solid #5d6b84 } .d3-text-link:hover{color:#f4c75b;border-bottom-color:currentColor} /* One CTA element, two labels: on a phone the same link is the only way to reach the venue, so it says what it does there. */ .d3-only-narrow{display:none} @media(max-width:640px){.d3-only-wide{display:none}.d3-only-narrow{display:inline}} @media(min-width:980px){ .d3-stage{min-height:calc(100vh - 72px);display:flex;align-items:stretch} .d3-stage .wrap{flex:1;justify-content:flex-start} .d3-stage-copy{padding-top:30px} } /* ---------------- the stage variant of the proof shell ---------------- */ .sl3d-proof.sl3d-proof--stage{ display:flex; flex-direction:column; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible } /* No title bar, no provenance strip, no interaction note: the head is reused as the status line UNDER the stage, where a caption belongs. */ .sl3d-proof--stage .sl3d-proof-stage{ order:1; min-height:clamp(400px,62vw,560px); border:1px solid #24304a; border-radius:18px; background:#0d1420; box-shadow:0 42px 110px -60px #000 } .sl3d-proof--stage .sl3d-proof-guides{ order:2; gap:10px; padding:14px 0 0; border-top:0; background:transparent } .sl3d-proof--stage .sl3d-proof-head{ order:3; min-height:0; align-items:center; gap:12px; padding:12px 0 0; border-bottom:0; background:transparent } .sl3d-proof--stage .sl3d-proof-title{ font:600 11.5px/1.5 var(--mono,monospace); letter-spacing:.02em; color:#b3bdcd; text-transform:none } .sl3d-proof--stage .sl3d-proof-status{ font:600 11.5px/1.5 var(--mono,monospace); letter-spacing:.02em; color:#b3bdcd } .sl3d-proof--stage .sl3d-proof-poster{align-items:stretch} .sl3d-proof--stage .sl3d-proof-rest{position:absolute;inset:0;z-index:-2;border-radius:17px} .sl3d-proof--stage .sl3d-proof-rest canvas{height:100%!important} .sl3d-proof--stage[data-state="idle"] .sl3d-proof-poster{cursor:pointer} .sl3d-proof--stage:has(.sl3d-proof-rest) .sl3d-proof-poster:after{background:none} .sl3d-proof--stage:has(.sl3d-proof-rest) .sl3d-proof-poster-copy{ margin:0; border:0; border-radius:0; background:none; backdrop-filter:none } .sl3d-proof--stage .sl3d-proof-poster-copy{ display:flex; align-items:flex-end; justify-content:center; width:100%; padding:0 20px 22px } .sl3d-proof--stage .sl3d-proof-actions{margin-top:0;justify-content:center} /* The load button exists only for a browser that ran the script and did not autoload. Without JavaScript there is no data-state, so it stays hidden and the full-page link is the honest path. */ .sl3d-proof--stage .sl3d-load{display:none} .sl3d-proof--stage[data-state="idle"] .sl3d-load, .sl3d-proof--stage[data-state="loading"] .sl3d-load, .sl3d-proof--stage[data-state="failed"] .sl3d-load{display:inline-flex} .sl3d-proof--stage:not([data-state="ready"]) .sl3d-guide{display:none} .sl3d-proof--stage:not([data-state="ready"]) .sl3d-proof-guides{display:none} .sl3d-proof--stage .sl3d-guide, .sl3d-proof--stage .sl3d-load{min-height:44px!important} .sl3d-proof--stage .sl3d-guide{min-width:44px;padding:0 15px} .sl3d-proof--stage .sl3d-guide-lead{ border-color:#ffd166; background:var(--sl3d-amber); color:#1a1408; font-weight:750 } .sl3d-proof--stage .sl3d-guide-lead:hover:not([disabled]){background:#ffc958;border-color:#ffd166;color:#1a1408} .sl3d-proof--stage .sl3d-guide-quiet{border-color:transparent;background:transparent;color:#b3bdcd} .sl3d-proof--stage .sl3d-guide-quiet:hover:not([disabled]){border-color:#41506b;background:#161f30;color:#fff} .sl3d-proof--stage .sl3d-guide-end{margin-left:auto} @media(min-width:980px){ /* Owner call 2026-08-19: the stage stays inside the page container (same measure as the copy above it), just taller than the shared default. */ .sl3d-proof--stage .sl3d-proof-stage{min-height:clamp(430px,68vh,620px)} } /* Phones never mount the venue inline — a desktop canvas squeezed into 375px is worse than no canvas. The resting frame becomes a still, the whole frame is one amber play affordance, and the venue opens full screen where it has room to be good. */ @media(max-width:640px){ .sl3d-proof--stage .sl3d-load{display:none!important} .sl3d-proof--stage .sl3d-proof-guides{display:none} .sl3d-proof--stage .sl3d-proof-poster-copy{align-items:center;padding:0} .sl3d-proof--stage .sl3d-proof-stage{min-height:clamp(210px,62vw,320px)} .sl3d-proof--stage .d3-stage-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; min-height:0; padding:0; border:0; border-radius:17px; background:none } .sl3d-proof--stage .d3-stage-play span{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--amber,#f4b740); box-shadow:0 14px 34px rgba(9,13,22,.55) } .sl3d-proof--stage .d3-stage-play svg{width:22px;height:22px;margin-left:3px;fill:#1a1408} .sl3d-proof--stage .d3-stage-play:hover span{background:#ffc958} } /* ---------------- shared section furniture ---------------- */ .d3-section{padding:88px 0;background:var(--paper);color:var(--ink)} .d3-section.d3-dark{background:#0d1420;color:#e6ecf7;border-top:1px solid #1c2536} .d3-head{max-width:760px} .d3-head h2{ margin:0; font-size:var(--sl-title-section); line-height:1.05; letter-spacing:-.04em; text-wrap:balance } .d3-head p{margin:16px 0 0;color:var(--muted);font-size:16px;line-height:1.68} .d3-dark .d3-head p{color:#b3bdcd} .d3-anchor{display:block;position:relative;top:-90px;height:0;visibility:hidden} /* ---------------- 2 · fly to any seat ---------------- */ .d3-seatview{display:grid;grid-template-columns:1fr;gap:22px;margin-top:40px} .d3-seatview .home-dia{margin:0} .d3-pano{position:relative} .d3-pano-chip{ position:absolute; top:12px; left:12px; z-index:2; padding:6px 10px; border:1px solid #33405c; border-radius:8px; background:rgba(9,13,22,.82); color:#e6ecf7; font:700 10px/1.3 var(--mono,monospace); letter-spacing:.1em } .d3-honesty{ max-width:70ch; margin:16px 0 0; color:#b3bdcd; font-size:13px; line-height:1.65 } .d3-seatview .dg-pills{gap:8px;padding:14px 14px 8px} .d3-seatview .dg-pills button{min-height:38px;padding:0 15px;font-size:12.5px;border-radius:999px;color:#b3bdcd;cursor:pointer} .d3-seatview .dg-pills button.on{background:var(--amber);border-color:var(--amber);color:#0c1220;font-weight:700} @media(min-width:900px){ .d3-seatview{grid-template-columns:1fr 1fr;align-items:start;gap:24px} } /* Stacked, the panorama leads: it is the only panel here that responds to a finger without the SDK, so it earns the first screen. */ @media(max-width:899px){ .d3-seatview-pano{order:1} .d3-seatview>.home-dia{order:2} } /* ---------------- 3 · one chart ---------------- */ .d3-how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;margin-top:36px} .d3-how-flow{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:d3step} .d3-how-flow li{position:relative;padding:16px 0 16px 46px;border-top:1px solid var(--line);color:var(--muted);font-size:14.5px;line-height:1.6;counter-increment:d3step} .d3-how-flow li:last-child{border-bottom:1px solid var(--line)} .d3-how-flow li::before{content:counter(d3step);position:absolute;left:0;top:16px;width:30px;height:30px;border-radius:50%;background:var(--amber);color:#0c1220;font:800 13px/30px var(--mono);text-align:center} .d3-how-flow b{display:block;color:var(--ink);font-size:16px;font-weight:750;margin-bottom:4px} .d3-how-dia{margin:0;border:1px solid #26324a;border-radius:16px;overflow:hidden;background:#0b0f18}.d3-how-dia .dgw{border:0;border-radius:0;box-shadow:none}.d3-how-dia .dgw-cap{color:#a9b2c3}.d3-how-dia figcaption{padding:10px 16px 12px;color:#9aa6ba;font-size:12px;border-top:1px solid #1c2536} .d3-how-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:44px; padding:0; list-style:none } .d3-how-list li{ padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:15px; line-height:1.62 } .d3-how-list b{display:block;color:var(--ink);font-size:16px;font-weight:750;margin-bottom:7px} .d3-how a{ display:inline-flex; min-height:44px; align-items:center; margin-top:28px; color:var(--amber-text); font-weight:750; border-bottom:1px solid currentColor } @media(max-width:900px){.d3-how-grid{grid-template-columns:1fr}} @media(max-width:760px){.d3-how-list{grid-template-columns:1fr;gap:22px}} /* ---------------- 4 · six venues ---------------- */ .d3-venues{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:44px } .d3-venue{ display:flex; flex-direction:column; min-height:210px; border:1px solid #24304a; border-radius:16px; overflow:hidden; background:#0b1019; color:#e6ecf7 } .d3-venue-art{flex:1;min-height:120px;overflow:hidden} .d3-venue-art .dg-canvas{height:100%;padding:0} .d3-venue-art .dgw-cap,.d3-venue-art .dg-pills,.d3-venue-art .dg-meter{display:none} .d3-venue-type{ display:grid; place-items:center; flex:1; min-height:120px; background:radial-gradient(120% 100% at 50% 0,#121826,#0a0e16 72%); color:#7f8ca3; font:700 34px/1 var(--mono,monospace); letter-spacing:-.02em } .d3-venue b{ display:block; padding:16px 16px 0; font-size:16px; font-weight:750 } .d3-venue span{display:block;padding:4px 16px 0;color:#b3bdcd;font:600 11px/1.5 var(--mono,monospace)} .d3-venue-open{ display:inline-flex; min-height:44px; align-items:center; margin-top:auto; padding:0 16px 14px; color:#f4c75b; font-weight:700; font-size:13.5px } .d3-venue-open:hover{color:#fff} .d3-venue--wide{grid-column:1/-1;flex-direction:row;align-items:center;min-height:0} .d3-venue--wide .d3-venue-type{flex:0 0 200px;min-height:96px;font-size:26px} .d3-venue--wide .d3-venue-copy{display:flex;flex:1;align-items:center;gap:16px;flex-wrap:wrap;padding:16px} .d3-venue--wide b,.d3-venue--wide span{padding:0} .d3-venue--wide .d3-venue-open{margin-left:auto;padding:0} @media(max-width:900px){.d3-venues{grid-template-columns:1fr 1fr}} @media(max-width:620px){ .d3-venues{grid-template-columns:1fr} .d3-venue--wide{flex-direction:column;align-items:stretch} .d3-venue--wide .d3-venue-type{flex:0 0 auto;min-height:96px} .d3-venue--wide .d3-venue-open{margin-left:0} } /* ---------------- 5 · developers ---------------- */ .d3-dev{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.8fr);gap:28px;margin-top:42px;align-items:start} .d3-code{border:1px solid #2a3650;border-radius:16px;overflow:hidden;background:#09101a;box-shadow:0 28px 75px -50px #000} .d3-code pre{margin:0;padding:24px;overflow:auto;color:#dce5f2;font:12.5px/1.8 var(--mono);tab-size:2} .d3-code .k{color:#ffcf66}.d3-code .s{color:#7ee0b0}.d3-code .c{color:#93a1b8} .d3-dev ul{display:grid;gap:14px;margin:0;padding:0;list-style:none} .d3-dev li{color:var(--muted);font-size:14.5px;line-height:1.6} .d3-dark .d3-dev li{color:#b3bdcd} .d3-dev-meta{margin:22px 0 0;color:#b3bdcd;font:600 11.5px/1.6 var(--mono)} .d3-dev-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px} .d3-dev-links a{display:inline-flex;min-height:44px;align-items:center;color:#f4c75b;font-weight:700;font-size:14px;border-bottom:1px solid currentColor} .d3-dev-links a:hover{color:#fff} .d3-code pre:focus-visible{outline:3px solid #f4b740;outline-offset:3px} @media(max-width:900px){.d3-dev{grid-template-columns:1fr}} /* ---------------- 6 · FAQ + final ---------------- */ .d3-faq{display:grid;gap:10px;margin-top:38px;max-width:900px} .d3-faq details{border:1px solid var(--line);border-radius:13px;background:var(--card);overflow:hidden} .d3-faq summary{cursor:pointer;padding:20px 22px;font-weight:750;font-size:14.5px;list-style:none} .d3-faq summary::-webkit-details-marker{display:none} .d3-faq summary:after{content:"+";float:right;color:var(--amber-text);font:700 18px var(--mono)} .d3-faq details[open] summary:after{content:"−"} .d3-faq p{padding:0 22px 21px;color:var(--muted);font-size:13.5px;line-height:1.7} .d3-final{padding:90px 0;background:#0b111b;color:#e6ecf7;text-align:center} .d3-final h2{max-width:20ch;margin:0 auto;font-size:var(--sl-title-final);line-height:1.02;letter-spacing:-.045em;text-wrap:balance} .d3-ctas{display:flex;gap:12px;flex-wrap:wrap} .d3-final .d3-ctas{justify-content:center;margin-top:26px} .d3-final .btn-ghost{border-color:#59677e;background:#1d2634;color:#e6ecf7} .d3-final .btn-ghost:hover{border-color:#f4b740;color:#f4c75b} .d3-final-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:24px;font-size:13px;font-weight:700} .d3-final-links a{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;color:#b3bdcd;border-bottom:1px solid transparent} .d3-final-links a:hover{color:#f4c75b;border-bottom-color:currentColor} @media(max-width:700px){ .d3-page .nav{position:relative;background:#0b111b;border-bottom-color:#263248;backdrop-filter:none} .d3-page .nav .logo{color:#e6ecf7} .d3-page .sl-burger span{background:#e6ecf7} .d3-page .nav-links a{color:#b3bdcd} .d3-page .nav-links a:hover,.d3-page .nav-links a[aria-current]{color:#fff} .d3-section{padding:66px 0} .d3-final{padding:70px 0} } @media(prefers-reduced-motion:reduce){ .d3-stage *{animation:none!important;transition:none!important} }