/* Event booth / QR capture page (/event-demo). Ported verbatim from the design team's mockup. This page is deliberately self-contained: functions.php DEQUEUES components.css for it, so these generic class names (.hero, .nav, .wrap, .footer, .btn) cannot collide with the global theme styles -- the same approach as the partner-demo pages. Do not add components.css back without scoping all of this under a wrapper. */ /* ========================================================== SHAPE — Request a Demo (CRO landing) dark dot-grid hero (the signature) + floating white form orange = the one signal color ========================================================== */ :root{ --acc:#FF5A15; --acc-dk:#E64A0A; --acc-lt:#FF8A4C; --acc-tint:#FFF1EA; --blue:#2E66F6; --ink:#0B0B0C; --ink-2:#141416; --paper:#FFFFFF; --off:#FAFAF9; --line:#E9E9E7; --tx:#0F0F0F; --mu:#6B6B68; --mu2:#A3A39F; --tx-inv:#F4F4F2; --mu-inv:#9A9A96; --mono:'JetBrains Mono',monospace; --sh:0 30px 80px -40px rgba(10,10,10,.28); --sh-sm:0 12px 36px -18px rgba(10,10,10,.14); } *{margin:0;padding:0;box-sizing:border-box} ::selection{background:var(--acc);color:#fff} html{scroll-behavior:smooth} body{font-family:'Albert Sans',system-ui,sans-serif;color:var(--tx);background:var(--ink);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased} a{color:inherit} .wrap{max-width:1160px;margin:0 auto;padding:0 32px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:16px;border-radius:12px;padding:16px 30px;text-decoration:none;transition:.16s;border:0;font-family:inherit;letter-spacing:-.01em;cursor:pointer} .btn-acc{background:var(--acc);color:#fff;box-shadow:0 10px 26px -10px rgba(255,90,21,.6)} .btn-acc:hover{background:var(--acc-dk);transform:translateY(-1px);box-shadow:0 14px 32px -10px rgba(255,90,21,.7)} .brand{display:inline-flex;align-items:center;gap:6px;color:#fff} .brand img{height:26px;width:auto;display:block} .brand svg{width:13px;height:13px;color:var(--acc)} /* ===================== DARK HERO ===================== */ .hero{position:relative;background:var(--ink);color:var(--tx-inv);overflow:hidden} .hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(1300px 950px at 62% 18%,#000 58%,transparent 96%);mask-image:radial-gradient(1300px 950px at 62% 18%,#000 58%,transparent 96%);pointer-events:none} .hero-glow{position:absolute;right:0;top:2%;width:640px;height:640px;background:radial-gradient(circle,rgba(255,90,21,.20),rgba(255,90,21,0) 62%);pointer-events:none} .hero-inner{position:relative;z-index:1} .nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0} /* Row 2 is 1fr, not auto: the form card spans both rows, and with two intrinsic rows the browser distributes its height across them -- which inflated the min-content head row by ~36px and opened a gap between the sub copy and the benefit list. A flexible second row absorbs the form's extra height instead, leaving only the list's own 20px margin. Do not change back to auto. */ .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;grid-template-rows:min-content 1fr;grid-template-areas:"head form" "bene form";column-gap:60px;row-gap:0;align-items:start;padding:30px 0 96px} .dh-head{grid-area:head;animation:fadeUp .6s ease both} .dh-form{grid-area:form;animation:fadeUp .6s .12s ease both} .dh-bene{grid-area:bene;animation:fadeUp .6s .22s ease both} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-lt);font-weight:700;margin-bottom:20px} .h1{font-size:clamp(40px,4.8vw,60px);font-weight:800;letter-spacing:-.038em;line-height:1.0;color:#fff;margin-bottom:20px} .h1 .hl{color:#fff;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:3px;text-underline-offset:6px} .sub{font-size:18px;line-height:1.55;color:#C4C4C0;max-width:460px} .check-list{list-style:none;margin:20px 0 0;display:flex;flex-direction:column;gap:14px} .check-list li{position:relative;padding-left:32px;font-size:15.5px;color:#E6E6E3;line-height:1.4} .check-list li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCc+PGNpcmNsZSBjeD0nMTAnIGN5PScxMCcgcj0nMTAnIGZpbGw9JyNGRjVBMTUnLz48cGF0aCBkPSdNNS44IDEwLjNsMi42IDIuNiA1LjgtNi4xJyBmaWxsPSdub25lJyBzdHJva2U9JyNmZmYnIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJy8+PC9zdmc+") center/contain no-repeat} .hero-rule{height:1px;background:rgba(255,255,255,.13);margin:34px 0 22px;max-width:440px} .proof{display:flex;align-items:center;gap:16px} .proof-avatars{height:46px;width:auto;display:block;flex-shrink:0} .proof-text{font-size:13.5px;color:var(--mu-inv);line-height:1.5} .proof-text .top{display:block;color:#fff;font-weight:600;margin-bottom:1px} .proof-text b{color:#fff;font-weight:700} .proof-text .star{color:var(--acc-lt)} /* ---- the floating white form (the star) ---- */ .form-card{background:#fff;color:var(--tx);border-radius:22px;padding:34px 32px 30px;box-shadow:0 50px 100px -34px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.05);position:relative} .form-card::before{content:"Free Demo";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--acc);color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 15px;border-radius:999px;box-shadow:0 8px 20px -8px rgba(255,90,21,.6)} .fc-stars{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 14px} .fc-stars .stars{color:var(--acc);font-size:15px;letter-spacing:2px} .fc-stars-txt{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--mu2)} .fc-title{font-size:24px;font-weight:800;letter-spacing:-.025em;text-align:center;margin-bottom:5px} .fc-sub{font-size:13.5px;color:var(--mu);text-align:center;margin-bottom:22px} .fc-form{display:grid;grid-template-columns:1fr 1fr;gap:15px} .field{display:flex;flex-direction:column;gap:7px} .field.full{grid-column:1 / -1} .field label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--tx)} .field .req{color:var(--acc)} .field input{font-family:inherit;font-size:16px;padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--off);color:var(--tx);transition:.14s;width:100%} .field input::placeholder{color:var(--mu2)} .field input:focus{outline:none;border-color:var(--acc);background:#fff;box-shadow:0 0 0 3px var(--acc-tint)} .fc-cta{grid-column:1 / -1;margin-top:5px} .fc-cta .btn{width:100%;padding:17px;font-size:16.5px} .fc-note{grid-column:1 / -1;text-align:center;font-size:12px;color:var(--mu2);margin-top:5px;display:flex;align-items:center;justify-content:center;gap:6px} .fc-note svg{width:13px;height:13px;flex-shrink:0} .fc-success{display:none;text-align:center;padding:26px 6px} .fc-success .fs-check{width:58px;height:58px;border-radius:50%;background:var(--acc-tint);color:var(--acc-dk);display:grid;place-items:center;margin:0 auto 16px} .fc-success .fs-check svg{width:29px;height:29px} .fc-success .fs-title{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px} .fc-success p{font-size:14px;color:var(--mu);line-height:1.55;max-width:290px;margin:0 auto} /* trust strip under the form (on dark) */ .serving{text-align:center;font-size:13px;color:var(--mu-inv);margin:26px 0 16px} .serving b{color:#fff;font-weight:700} .awards{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;align-items:flex-start} .award-badge{height:80px;width:auto;display:block} /* ===================== TESTIMONIALS (light) ===================== */ .tsection{background:var(--paper);color:var(--tx);padding:80px 0 92px} .tsection-head{text-align:center;margin-bottom:44px} .eyebrow-c{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-dk);font-weight:700;margin-bottom:14px} .tsection-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.05} .tcarousel{position:relative} .ttrack{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px;scrollbar-width:none;-ms-overflow-style:none} .ttrack::-webkit-scrollbar{display:none} .tcard{flex:0 0 340px;scroll-snap-align:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;box-shadow:var(--sh-sm)} .tcard-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:12px} .tlogo-img{height:30px;width:auto;max-width:150px;display:block} .tquote-mark{width:48px;height:auto;display:block;flex-shrink:0} .tquote-text{font-size:14px;line-height:1.65;color:var(--tx);margin:0 0 22px;flex:1} .tperson{display:flex;align-items:center;gap:12px;margin-top:auto} .tav{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0} .tname{font-weight:700;font-size:14px;letter-spacing:-.01em} .tsrc{font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--mu2);margin-top:3px} /* ===================== FOOTER (slim, dark) ===================== */ .footer{background:var(--ink);color:var(--tx-inv);padding:26px 0;border-top:1px solid rgba(255,255,255,.08)} .footer-in{display:flex;align-items:center;justify-content:space-between;gap:16px} .brand-sm img{height:22px} .f-links{display:flex;gap:26px} .f-links a{color:var(--mu-inv);text-decoration:none;font-size:13.5px;transition:.14s} .f-links a:hover{color:#fff} /* ===================== RESPONSIVE ===================== */ @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"head" "form" "bene";padding:22px 0 64px} .dh-form{margin:30px 0 8px} .hero-glow{width:420px;height:420px;top:0} .sub,.hero-rule{max-width:none} } @media(max-width:560px){ .wrap{padding:0 20px} .tcard{flex-basis:82vw} .footer-in{flex-direction:column;gap:14px;text-align:center} } @media(max-width:440px){ .fc-form{grid-template-columns:1fr} .field{grid-column:1 / -1} } /* --- mobile polish --- */ html,body{overflow-x:hidden} .btn,.field input{-webkit-tap-highlight-color:rgba(255,90,21,.18)} img{max-width:100%} @media(max-width:560px){ .award-badge{height:54px} .awards{gap:10px} } @media(max-width:400px){ .h1{font-size:34px} .form-card{padding:28px 22px 26px} .award-badge{height:46px} } @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* --- booth / kiosk + giveaway additions --- */ .btn-ghost{background:transparent;color:var(--acc-dk);border:1.5px solid var(--acc-lt)} .btn-ghost:hover{background:var(--acc-tint)} body.ev-giveaway-on .form-card::before{content:"Enter to Win"} .fc-give{display:none;align-items:flex-start;gap:11px;background:var(--acc-tint);border:1px dashed var(--acc-lt);border-radius:12px;padding:12px 14px;margin-bottom:20px} .fc-give svg{width:20px;height:20px;color:var(--acc-dk);flex-shrink:0;margin-top:1px} .fc-give .g-txt{font-size:13px;line-height:1.45;color:#7a3410} .fc-give .g-txt b{color:var(--acc-dk);font-weight:700} body.ev-giveaway-on .fc-give{display:flex} .fc-success .fs-give{display:none;margin-top:16px;font-size:13.5px;color:#7a3410;background:var(--acc-tint);border-radius:10px;padding:10px 14px;line-height:1.45;font-weight:600} body.ev-giveaway-on .fc-success .fs-give{display:block} .fs-next{margin-top:20px} .fs-next .btn{width:100%} .fs-timer{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--mu2)} /* --- Prize-forward hero (Kevin, 2026-08-25): the cooler isn't physically at the booth, so attendees need to see what they're entering to win. The product shots are on white, so the prize sits on a light card -- reads as a product card against the dark hero rather than a stray white rectangle. --- */ .ev-event-logo{display:block;width:auto;height:62px;margin:0 0 20px;border-radius:8px} .ev-prize{display:flex;align-items:center;gap:20px;margin:22px 0 0;padding:16px 20px 16px 16px; background:#fff;border-radius:16px;max-width:460px;box-shadow:0 12px 34px rgba(0,0,0,.34)} .ev-prize-img{flex:0 0 132px;width:132px;height:auto;border-radius:10px;background:#fff} .ev-prize-txt{min-width:0} .ev-prize-label{font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:#8A8A86} .ev-prize-name{font-size:16px;font-weight:800;letter-spacing:-.015em;color:#0B0B0C;margin:3px 0 5px} .ev-prize-txt p{font-size:13px;line-height:1.5;color:#5F5F5C;margin:0} @media(max-width:980px){ .ev-prize{max-width:none} } @media(max-width:440px){ .ev-event-logo{height:52px} .ev-prize{gap:14px;padding:12px 14px 12px 12px} .ev-prize-img{flex-basis:100px;width:100px} .ev-prize-name{font-size:15px} } /* Shape feature bullets hidden 2026-08-25 (Chloe: "try it without these bullet points, maybe hide them for now") -- Kevin wants the page to read as a giveaway registration rather than a Shape pitch. The