/* =========================================================================== AI Exhibitor Visibility Program — design system Subject world: trade-show floor. Signature: credential badge + ticket-stub slots. --accent is set per-exhibitor inline on . ========================================================================== */ :root{ --ink:#14161c; --ink-2:#3a3f4b; --muted:#6b7280; --line:#e6e8ee; --line-2:#eef0f5; --canvas:#f6f7f9; --paper:#ffffff; --success:#0e9f6e; --accent:#2f6bff; /* overridden per exhibitor */ --accent-soft:color-mix(in srgb, var(--accent) 10%, white); --accent-line:color-mix(in srgb, var(--accent) 28%, white); --shadow:0 1px 2px rgba(20,22,28,.04), 0 8px 28px rgba(20,22,28,.06); --radius:14px; --maxw:1080px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--canvas); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit} h1,h2,h3{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:600;letter-spacing:-.01em;margin:0} .mono{font-family:"Space Mono",ui-monospace,monospace} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} .eyebrow{ font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--muted); } /* ---- top bar ---------------------------------------------------------- */ .topbar{ background:var(--paper);border-bottom:1px solid var(--line); } .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:58px} .brandmark{display:flex;align-items:center;gap:9px;font-family:"Space Grotesk";font-weight:600;font-size:15px} .brandmark .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} .topbar .prog{font-family:"Space Mono";font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} /* ---- exhibitor hero --------------------------------------------------- */ .hero{background:var(--paper);border-bottom:1px solid var(--line);position:relative;overflow:hidden} .hero::before{ /* subtle floor-plan grid, themed */ content:"";position:absolute;inset:0;opacity:.5;pointer-events:none; background: linear-gradient(var(--line-2) 1px,transparent 1px) 0 0/26px 26px, linear-gradient(90deg,var(--line-2) 1px,transparent 1px) 0 0/26px 26px; mask-image:radial-gradient(120% 90% at 88% 0%,#000,transparent 72%); } .hero .wrap{position:relative;padding:30px 20px 34px} .hero .event-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px} .hero .event-line .sep{color:var(--line);} .logo-row{display:flex;align-items:center;gap:16px} .logomark{ width:60px;height:60px;border-radius:15px;flex:none;display:grid;place-items:center; font-family:"Space Grotesk";font-weight:700;font-size:27px;color:#fff; background:var(--accent);box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 32%,transparent); } .company{font-size:30px;line-height:1.12} .tagline{color:var(--ink-2);font-size:16px;margin-top:3px} /* credential badge — the signature element */ .badge{ --pad:14px; display:inline-flex;align-items:stretch;gap:0;margin-top:22px; background:var(--ink);color:#fff;border-radius:12px;overflow:hidden; box-shadow:0 10px 26px rgba(20,22,28,.18); } .badge .b-tag{ display:flex;align-items:center;padding:0 13px;background:var(--accent); font-family:"Space Mono";font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; } .badge .b-main{padding:11px 18px 11px 15px;display:flex;flex-direction:column;justify-content:center} .badge .b-main .lbl{font-family:"Space Mono";font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#9aa1ad} .badge .b-main .num{font-family:"Space Grotesk";font-weight:700;font-size:22px;letter-spacing:.04em;line-height:1.05} .launch-pill{ display:inline-flex;align-items:center;gap:8px;margin-top:18px;margin-left:0; padding:7px 13px 7px 11px;border:1px solid var(--accent-line);background:var(--accent-soft); color:color-mix(in srgb,var(--accent) 78%,black);border-radius:999px;font-size:13px;font-weight:500; } .launch-pill .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);position:relative} .launch-pill .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);animation:pulse 2.2s ease-out infinite} @keyframes pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.7);opacity:0}} .hero-cta{margin-top:24px} /* ---- layout columns --------------------------------------------------- */ .layout{display:grid;grid-template-columns:1fr;gap:22px;padding:26px 0 60px} @media(min-width:900px){ .layout{grid-template-columns:1fr 392px;gap:34px;align-items:start;padding:34px 0 80px} .booking-col{position:sticky;top:18px} } .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .section-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px} .section-h h2{font-size:19px} .block{padding:22px} .block + .block{margin-top:18px} .about p{margin:.2em 0 0;color:var(--ink-2);font-size:15.5px} /* preview video */ .preview{ position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden; background:linear-gradient(135deg,var(--ink),#23262f);display:grid;place-items:center; border:1px solid var(--line); } .preview .grain{position:absolute;inset:0;opacity:.16; background:radial-gradient(circle at 30% 20%,var(--accent),transparent 60%)} .preview .play{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.16); backdrop-filter:blur(4px);display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);z-index:1} .preview .play svg{margin-left:3px} .preview .vlabel{position:absolute;left:14px;bottom:12px;color:#fff;z-index:1} .preview .vlabel .t{font-family:"Space Grotesk";font-weight:600;font-size:14px} .preview .vlabel .s{font-family:"Space Mono";font-size:10px;letter-spacing:.1em;color:#b9bdc7;text-transform:uppercase} /* highlights */ .hl{display:flex;gap:13px;padding:14px 0;border-top:1px solid var(--line-2)} .hl:first-child{border-top:0;padding-top:2px} .hl .n{flex:none;width:26px;height:26px;border-radius:8px;background:var(--accent-soft); color:color-mix(in srgb,var(--accent) 80%,black);display:grid;place-items:center; font-family:"Space Mono";font-size:12px;font-weight:700;margin-top:1px} .hl .x{font-size:15px;color:var(--ink)} /* contact */ .contact{display:flex;align-items:center;gap:13px} .contact .av{width:42px;height:42px;border-radius:50%;background:var(--accent-soft); color:color-mix(in srgb,var(--accent) 80%,black);display:grid;place-items:center; font-family:"Space Grotesk";font-weight:600;font-size:16px;flex:none} .contact .nm{font-weight:600;font-size:15px} .contact .rl{color:var(--muted);font-size:13px} /* ---- booking widget --------------------------------------------------- */ .booking{padding:20px 20px 22px} .booking .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px} .booking h2{font-size:19px} .booking .sub{color:var(--muted);font-size:13.5px;margin-bottom:16px} .open-chip{font-family:"Space Mono";font-size:11px;letter-spacing:.04em;color:var(--success); background:color-mix(in srgb,var(--success) 9%,white);border:1px solid color-mix(in srgb,var(--success) 22%,white); padding:3px 9px;border-radius:999px;white-space:nowrap} .daytabs{display:flex;gap:7px;margin-bottom:16px} .daytab{flex:1;border:1px solid var(--line);background:var(--paper);border-radius:11px; padding:9px 4px;text-align:center;cursor:pointer;transition:.15s;line-height:1.15} .daytab .d{font-family:"Space Mono";font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .daytab .n{font-family:"Space Grotesk";font-weight:600;font-size:15px;margin-top:1px} .daytab[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft)} .daytab[aria-selected="true"] .d{color:color-mix(in srgb,var(--accent) 75%,black)} .slotgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px} .daypane{display:none} .daypane.active{display:grid;grid-template-columns:1fr 1fr;gap:9px} /* ticket-stub slot */ .slot{ position:relative;text-align:left;cursor:pointer;background:var(--paper); border:1px solid var(--line);border-radius:10px;padding:11px 12px 11px 18px;transition:.14s; } .slot::before{ /* perforation rail */ content:"";position:absolute;left:9px;top:8px;bottom:8px;width:0; border-left:1.5px dashed var(--line); } .slot .tm{font-family:"Space Mono";font-weight:700;font-size:14px;letter-spacing:.01em} .slot .dur{font-size:11px;color:var(--muted);margin-top:1px} .slot:hover:not(.booked){border-color:var(--accent-line);transform:translateY(-1px)} .slot[aria-pressed="true"]{ border-color:var(--accent);background:var(--accent);color:#fff; box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 32%,transparent); } .slot[aria-pressed="true"]::before{border-color:rgba(255,255,255,.5)} .slot[aria-pressed="true"] .dur{color:rgba(255,255,255,.85)} .slot[aria-pressed="true"]::after{ content:"✓";position:absolute;right:10px;top:9px;font-size:12px;font-weight:700;color:#fff} .slot.booked{cursor:default;background:var(--canvas);color:var(--muted);border-style:dashed} .slot.booked .tm{text-decoration:line-through;font-weight:400} .slot.booked::after{content:"Booked";position:absolute;right:9px;top:10px; font-family:"Space Mono";font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} /* booking form */ .bform{margin-top:18px;border-top:1px solid var(--line-2);padding-top:18px;display:none} .bform.show{display:block;animation:rise .22s ease} @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .bform .picked{display:flex;align-items:center;gap:9px;font-size:13.5px;margin-bottom:14px;color:var(--ink-2)} .bform .picked b{color:var(--ink)} .field{margin-bottom:11px} .field label{display:block;font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:5px} .field input,.field textarea{ width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;font-size:14.5px; background:var(--paper);transition:.14s;color:var(--ink)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} .field textarea{resize:vertical;min-height:60px} .two{display:grid;grid-template-columns:1fr 1fr;gap:10px} .formerr{color:#c0392b;font-size:13px;margin:2px 0 10px;display:none} .formerr.show{display:block} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer; font-family:"Space Grotesk";font-weight:600;font-size:15px;border-radius:11px;border:1px solid transparent; padding:13px 20px;transition:.15s;text-decoration:none} .btn-primary{background:var(--accent);color:#fff;width:100%; box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 30%,transparent)} .btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)} .btn-primary:disabled{opacity:.55;cursor:default;transform:none;filter:none} .btn-ghost{background:var(--paper);border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--accent-line)} .btn-arrow svg{transition:transform .15s} .btn-arrow:hover svg{transform:translateY(3px)} /* confirmation */ .confirm{display:none;text-align:center;padding:10px 4px 6px} .confirm.show{display:block;animation:rise .26s ease} .confirm .check{width:58px;height:58px;margin:6px auto 14px;border-radius:50%; background:color-mix(in srgb,var(--success) 12%,white);display:grid;place-items:center} .confirm .check svg{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .5s .1s ease forwards} @keyframes draw{to{stroke-dashoffset:0}} .confirm h3{font-size:20px;margin-bottom:6px} .confirm .ctext{color:var(--muted);font-size:14px;margin-bottom:16px} .ticket{border:1px solid var(--line);border-radius:12px;overflow:hidden;text-align:left;margin-bottom:16px} .ticket .tt{background:var(--ink);color:#fff;padding:11px 16px;display:flex;justify-content:space-between;align-items:center} .ticket .tt .co{font-family:"Space Grotesk";font-weight:600} .ticket .tt .bo{font-family:"Space Mono";font-size:11px;letter-spacing:.1em;background:var(--accent);padding:3px 8px;border-radius:6px} .ticket .tb{padding:13px 16px;display:flex;justify-content:space-between;align-items:center} .ticket .tb .when{font-family:"Space Mono";font-weight:700;font-size:15px} .ticket .tb .who{font-size:13px;color:var(--muted)} /* ---- directory -------------------------------------------------------- */ .dir-hero{background:var(--paper);border-bottom:1px solid var(--line);padding:38px 0 30px;text-align:center} .dir-hero h1{font-size:32px} .dir-hero .lede{color:var(--ink-2);max-width:560px;margin:10px auto 0;font-size:16px} .grid3{display:grid;grid-template-columns:1fr;gap:18px;padding:30px 0 64px} @media(min-width:720px){.grid3{grid-template-columns:repeat(3,1fr)}} .exh-card{padding:20px;display:flex;flex-direction:column;text-decoration:none;transition:.16s} .exh-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(20,22,28,.05),0 16px 38px rgba(20,22,28,.10)} .exh-card .ec-top{display:flex;align-items:center;gap:13px;margin-bottom:14px} .exh-card .lm{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;color:#fff; font-family:"Space Grotesk";font-weight:700;font-size:20px} .exh-card .co{font-family:"Space Grotesk";font-weight:600;font-size:18px;line-height:1.1} .exh-card .bt{font-family:"Space Mono";font-size:11px;letter-spacing:.08em;color:var(--muted);margin-top:2px} .exh-card .tag{color:var(--ink-2);font-size:14px;flex:1} .exh-card .ec-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px; padding-top:14px;border-top:1px solid var(--line-2)} .exh-card .mtg{font-size:12.5px;color:var(--muted)} .exh-card .mtg b{color:var(--ink)} .exh-card .go{font-family:"Space Grotesk";font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:5px} /* ---- poster ----------------------------------------------------------- */ .poster-page{min-height:100vh;display:grid;place-items:center;padding:30px 16px;background:var(--canvas)} .poster{ width:min(460px,100%);background:var(--paper);border-radius:24px;overflow:hidden; box-shadow:0 30px 80px rgba(20,22,28,.22);position:relative} .poster .p-top{padding:30px 32px 0;position:relative} .poster .p-grid{position:absolute;inset:0;opacity:.5; background:linear-gradient(var(--line-2) 1px,transparent 1px) 0 0/24px 24px, linear-gradient(90deg,var(--line-2) 1px,transparent 1px) 0 0/24px 24px; mask-image:radial-gradient(120% 80% at 90% 0,#000,transparent 70%)} .poster .p-event{position:relative;font-family:"Space Mono";font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--muted)} .poster .p-lm{position:relative;width:64px;height:64px;border-radius:16px;display:grid;place-items:center; color:#fff;font-family:"Space Grotesk";font-weight:700;font-size:28px;margin:22px 0 16px; background:var(--accent);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 34%,transparent)} .poster .p-co{position:relative;font-family:"Space Grotesk";font-weight:700;font-size:30px;letter-spacing:-.01em;line-height:1.08} .poster .p-launch{position:relative;margin-top:14px;font-size:16px;color:var(--ink-2)} .poster .p-launch b{color:color-mix(in srgb,var(--accent) 75%,black)} .poster .p-badge{position:relative;display:inline-flex;margin-top:20px;background:var(--ink);color:#fff;border-radius:11px;overflow:hidden} .poster .p-badge .t{background:var(--accent);padding:0 12px;display:flex;align-items:center; font-family:"Space Mono";font-size:10px;letter-spacing:.16em;text-transform:uppercase} .poster .p-badge .m{padding:9px 16px} .poster .p-badge .m .l{font-family:"Space Mono";font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#9aa1ad} .poster .p-badge .m .v{font-family:"Space Grotesk";font-weight:700;font-size:22px;letter-spacing:.04em} .poster .p-scan{margin-top:26px;background:var(--ink);color:#fff;padding:26px 32px 30px; display:flex;align-items:center;gap:20px;position:relative} .poster .p-scan .qbox{width:128px;height:128px;background:#fff;border-radius:14px;padding:10px;flex:none} .poster .p-scan .qbox img{width:100%;height:100%;display:block} .poster .p-scan .stext .big{font-family:"Space Grotesk";font-weight:700;font-size:21px;line-height:1.15} .poster .p-scan .stext .sm{color:#aeb3bd;font-size:13.5px;margin-top:6px} .poster .p-scan .stext .meet{display:inline-flex;align-items:center;gap:7px;margin-top:12px; font-family:"Space Mono";font-size:11px;letter-spacing:.04em;color:var(--accent)} .poster-meta{width:min(460px,100%);margin:16px auto 0;text-align:center;color:var(--muted);font-size:12.5px} .poster-meta a{color:var(--accent);text-decoration:none} /* ---- dashboard -------------------------------------------------------- */ .dash-hero{background:var(--ink);color:#fff;padding:30px 0 26px} .dash-hero .wrap{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px} .dash-hero h1{color:#fff;font-size:25px} .dash-hero .role{font-family:"Space Mono";font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9aa1ad} .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:-30px 0 0;padding:0 0 6px} @media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}} .stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)} .stat .v{font-family:"Space Grotesk";font-weight:700;font-size:30px;letter-spacing:-.01em} .stat .k{font-size:12.5px;color:var(--muted);margin-top:2px} .stat .v.acc{color:var(--accent)} .stat .v.grn{color:var(--success)} .mtable{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;margin:22px 0 64px;box-shadow:var(--shadow)} .mtable th{font-family:"Space Mono";font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--canvas)} .mtable td{padding:13px 16px;border-bottom:1px solid var(--line-2);font-size:14px;vertical-align:middle} .mtable tr:last-child td{border-bottom:0} .mtable .co-cell{display:flex;align-items:center;gap:9px;font-weight:600} .mtable .bdot{width:9px;height:9px;border-radius:3px;flex:none} .mtable .bo{font-family:"Space Mono";font-size:11px;color:var(--muted)} .mtable .wh{font-family:"Space Mono";font-weight:700;font-size:13px} .mtable .vt{color:var(--muted);font-size:12.5px} .hide-sm{display:none} @media(min-width:760px){.hide-sm{display:table-cell}} /* footer */ .foot{border-top:1px solid var(--line);background:var(--paper);padding:22px 0;margin-top:auto} .foot .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px; color:var(--muted);font-size:12.5px} .foot .pwr{display:flex;align-items:center;gap:8px;font-family:"Space Grotesk";font-weight:600;color:var(--ink)} .foot .pwr .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)} .foot a{color:var(--muted);text-decoration:none} .foot a:hover{color:var(--ink)} .page{min-height:100vh;display:flex;flex-direction:column} @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} } /* ---- exhibitor console (per-exhibitor meetings) ----------------------- */ .ex-hero{background:var(--paper);border-bottom:1px solid var(--line);padding:28px 0 30px} .ex-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 6px} .day-group{margin-top:26px} .day-head{display:flex;align-items:center;gap:9px;font-family:"Space Grotesk";font-weight:600; font-size:15px;margin-bottom:11px} .day-head .day-dot{width:9px;height:9px;border-radius:50%;background:var(--accent)} .day-head .day-count{font-family:"Space Mono";font-size:11px;letter-spacing:.04em;color:var(--muted); font-weight:400;margin-left:auto} .mt-card{overflow:hidden} .mt-row{display:flex;gap:16px;padding:15px 18px;border-top:1px solid var(--line-2)} .mt-row:first-child{border-top:0} .mt-time{flex:none;width:108px;font-weight:700;font-size:13.5px;color:var(--ink);padding-top:1px; border-right:1.5px dashed var(--line);} .mt-who{flex:1} .mt-name{font-weight:600;font-size:15px} .mt-name .mt-role{font-weight:400;color:var(--muted);font-size:13.5px} .mt-co{color:var(--ink-2);font-size:13.5px;margin-top:1px} .mt-co .mt-mail{color:var(--muted)} .mt-msg{margin-top:7px;font-size:13.5px;color:var(--ink-2);font-style:italic; border-left:2px solid var(--accent-line);padding-left:10px} .empty{text-align:center;padding:46px 24px;margin-top:24px} .empty-ic{width:56px;height:56px;border-radius:50%;background:var(--accent-soft); display:grid;place-items:center;margin:0 auto 14px} .empty h3{font-size:19px;margin-bottom:6px} .empty p{color:var(--muted);max-width:380px;margin:0 auto 18px;font-size:14.5px} @media(max-width:560px){ .mt-row{flex-direction:column;gap:6px} .mt-time{width:auto;border-right:0;border-bottom:1.5px dashed var(--line);padding-bottom:6px} } /* company logo image in the hero logomark (when a logo asset is set) */ .logomark.has-img{background:#fff;padding:8px;} .logomark.has-img img{width:100%;height:100%;object-fit:contain;display:block;} /* brand wordmark inside a white logo plate (option B) */ .brand-stack{display:flex;flex-direction:column} .brand-plate{display:inline-flex;align-self:flex-start;background:#fff; border:1px solid var(--line);border-radius:14px;padding:14px 22px; box-shadow:0 6px 18px rgba(20,22,28,.06);margin-bottom:14px} .brand-plate img{height:30px;width:auto;display:block} @media(max-width:560px){ .brand-plate{padding:12px 18px} .brand-plate img{height:26px} }