/* ============================================================
DELIVERZEN — POWERED BY SHIPHERO
Bizzabo Event Site — Custom CSS
Styled to match ShipHero Webflow event template
Last updated: May 2026
============================================================ */
/* ============================================================
1. GLOBAL — FONTS & COLOR TOKENS
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Space+Grotesk:wght@300;400;500;600;700&family=Young+Serif&family=DM+Sans:wght@400;500;600&display=swap');
html, html *, body, body * {
font-family: 'Space Grotesk', Arial, sans-serif !important;
}
[class*=" icon-"], [class^="icon-"] {
font-family: bizzafont !important;
}
.fa, [class*="fa-"] {
font-family: 'FontAwesome' !important;
}
/* Bizzabo agenda icons carry both .fa AND .icon-* — bizzafont must win */
.fa[class*=" icon-"],
.fa[class^="icon-"] {
font-family: bizzafont !important;
}
/* All color-1 icons → dark, not red */
.custom-color.color-1,
i.color-1,
.icon.color-1 {
color: var(--heading) !important;
}
:root {
/* Webflow template exact colors */
--cream: #f8f2e9; /* Main page background */
--forest: #1e3c33; /* Dark sections: About, Map, Footer */
--sh-red: #ef5252; /* CTA buttons, App download section */
--heading: #262e39; /* All headings */
--sh-blue: #3281fd; /* Interactive elements */
--sh-gray: #c0ccdb; /* Secondary text, borders */
--sh-white: #ffffff;
}
/* Page background — white default; cream set explicitly per section */
body,
.main-view,
.main-app-container,
.home-custom-css,
.speakers-custom-css {
background-color: var(--sh-white) !important;
}
/* ============================================================
2. NAVIGATION
============================================================ */
/* Nav bar — white background like Webflow template */
.template-nav,
.navbar,
.nav-bar,
[class*="navbar"] {
background-color: #000000 !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* Nav links — dark heading color */
.nav-menu-btn,
#bs-example-navbar-collapse-1 a,
#bs-example-navbar-collapse-1 {
color: var(--heading) !important;
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 500 !important;
text-transform: capitalize !important;
}
.nav-menu-btn:hover {
color: var(--sh-red) !important;
}
/* Hamburger toggle bars — dark so visible on white nav */
.navbar-toggle .icon-bar {
background-color: var(--heading) !important;
}
.navbar-toggle {
border-color: var(--sh-gray) !important;
}
/* ── Global mobile horizontal gutter — all sections uniform 20px ── */
/* Sections with their own inner padding (accordion, custom-hero, agenda_experience,
about_event) are excluded below so they don't get double-padded. */
@media (max-width: 768px) {
.main-app-container {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Exceptions: these sections apply padding on their inner content wrappers,
not on main-app-container, so we cancel the global rule here */
.accordion .main-app-container,
.agenda_experience .main-app-container,
.about_event .main-app-container,
.custom-hero .main-app-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* Mobile nav — keep the open drawer inside the navbar, above hero */
@media (max-width: 768px) {
.navbar-collapse,
#bs-example-navbar-collapse-1 {
background-color: var(--sh-white) !important;
overflow: hidden !important;
max-height: none !important;
position: relative !important;
z-index: 9999 !important;
border-top: 1px solid var(--sh-gray) !important;
}
/* Push the whole navbar above page content when menu is open */
.template-nav,
.navbar {
position: relative !important;
z-index: 9999 !important;
}
/* Ensure nav items don't bleed outside the drawer */
.navbar-nav {
margin: 0 !important;
padding: 8px 0 !important;
width: 100% !important;
}
.navbar-nav > li > a {
padding: 12px 20px !important;
border-bottom: 1px solid rgba(192, 204, 219, 0.3) !important;
}
}
/* Nav profile/avatar chevron — dark on white nav */
.me-btn-holder .fa.inherit-custom-color,
.me-avatar .fa-chevron-down {
color: var(--heading) !important;
}
/* Register / CTA button — black (uniform across all sections) */
.btn-register,
button.atom-main.btn.btn-success.btn-register {
background-color: #000000 !important;
border: 2px solid #000000 !important;
color: var(--sh-white) !important;
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 700 !important;
border-radius: 4px !important;
}
.btn-register:hover,
button.atom-main.btn.btn-success.btn-register:hover {
background-color: #333333 !important;
border-color: #333333 !important;
}
/* Unified CTA sizing — all register buttons same size */
.btn-register,
a.btn-register,
button.btn-register {
padding: 14px 48px !important;
font-size: 16px !important;
line-height: 1.25 !important;
display: inline-block !important;
width: auto !important;
min-width: 180px !important;
text-align: center !important;
letter-spacing: 0.01em !important;
}
/* ============================================================
3. HEADER
============================================================ */
/* Header section background — cream (trade-template removed; it matches ALL sections) */
.event-header,
[class*="header-section"] {
background-color: var(--cream) !important;
}
/* Event title — Dela Gothic One, large */
.trade-template h1,
.event-header h1,
.event-title {
font-family: 'Dela Gothic One', serif !important;
font-weight: 400 !important;
font-size: clamp(36px, 5vw, 64px) !important;
color: var(--heading) !important;
text-transform: none !important;
line-height: 1.1 !important;
}
/* Breadcrumb / eyebrow text */
.event-header .eyebrow,
.event-header .breadcrumb,
.event-label,
.event-meta {
font-family: 'DM Sans', sans-serif !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--heading) !important;
}
/* Make event logo bigger */
.trade-template .event-image-holder {
height: 120px;
}
/* Hero — old Bizzabo section hidden; replaced by .hz-hero custom code element */
#section-8152945,
.hero_custom {
display: none !important;
}
/* Event Venue — reduce double-stacked 80px padding to standard 45px */
.section-eventVenue .rowHolder,
.section-7719481 .rowHolder {
padding-top: 45px !important;
padding-bottom: 45px !important;
}
.section-eventVenue .main-app-container,
.section-7719481 .main-app-container {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ── Custom code hero (.hz-hero) ── */
.hz-hero {
position: relative !important;
width: 100% !important;
overflow: hidden !important;
display: block !important;
}
.hz-hero-bg {
display: block !important;
width: 100% !important;
height: auto !important;
pointer-events: none !important;
}
.hz-hero-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
width: 55% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 48px 60px !important;
}
.hz-hero-title {
font-family: 'Dela Gothic One', sans-serif !important;
font-size: clamp(36px, 4.5vw, 68px) !important;
color: #ffffff !important;
line-height: 1.0 !important;
letter-spacing: -1px !important;
text-transform: none !important;
margin: 0 0 24px !important;
padding: 0 !important;
}
.hz-hero-date {
font-family: 'Space Grotesk', sans-serif !important;
font-size: 18px !important;
font-weight: 600 !important;
color: #ffffff !important;
margin: 0 0 12px !important;
}
.hz-hero-body {
font-family: 'Space Grotesk', sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
color: rgba(255,255,255,0.8) !important;
line-height: 1.65 !important;
margin: 0 0 32px !important;
}
.hz-hero-cta {
display: inline-block !important;
padding: 14px 32px !important;
background-color: #ffffff !important;
color: #221f20 !important;
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
text-decoration: none !important;
border-radius: 4px !important;
letter-spacing: -0.01em !important;
width: fit-content !important;
align-self: flex-start !important;
transition: background-color 0.2s !important;
}
.hz-hero-cta:hover {
background-color: #f0ebe3 !important;
color: #221f20 !important;
text-decoration: none !important;
}
@media (max-width: 768px) {
.hz-hero-overlay {
width: 92% !important;
padding: 32px 24px !important;
justify-content: flex-end !important;
padding-bottom: 40px !important;
}
.hz-hero-title {
font-size: 36px !important;
}
.hz-hero-date { font-size: 15px !important; }
.hz-hero-body { font-size: 14px !important; }
}
/* Trim padding on countdown section — two stacked layers */
.section-countdownClock .rowHolder,
.section-7744773 .rowHolder {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.section-countdownClock .main-app-container,
.section-7744773 .main-app-container {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* Event date — Dela Gothic One */
.event-date,
.event-dates,
[class*="date-display"] {
font-family: 'Dela Gothic One', serif !important;
font-size: clamp(18px, 2vw, 26px) !important;
color: var(--heading) !important;
font-weight: 400 !important;
}
/* Date/venue band in header — override the [class*="venue"] forest rule */
.date-venue-holder,
.date-venue-wrapper,
.virtual-venue-banner--trade,
span.atom-main.date-venue-holder {
background-color: transparent !important;
background: transparent !important;
color: var(--heading) !important;
}
.date-venue-holder *,
.date-venue-wrapper * {
color: var(--heading) !important;
}
/* Section headings throughout — Dela Gothic One */
h1, h2, h3 {
font-family: 'Dela Gothic One', serif !important;
font-weight: 400 !important;
color: var(--heading) !important;
}
/* ============================================================
4. CONTENT — LOCATION / INFO SECTIONS
============================================================ */
/* Override Bizzabo orange primary color everywhere */
.color-1 {
color: var(--sh-red) !important;
}
.color-1-background {
background-color: var(--sh-red) !important;
border-color: var(--sh-red) !important;
}
.color-1-border {
border-color: var(--sh-red) !important;
}
/* ---- DOWNLOAD APP SECTION ---- */
/* Section outer: pure black */
#section-7719482,
.section-downloadApp,
[class*="event-app"],
.download-app-section {
background-color: #000000 !important;
}
/* rowHolder — pure black */
.rowHolder.downloadapp {
background-color: #000000 !important;
padding: 45px 120px !important;
box-sizing: border-box !important;
}
/* Inner container — transparent so section bg shows */
#section-7719482 .main-app-container,
.section-downloadApp .main-app-container,
.rowHolder.downloadapp .main-app-container {
background-color: transparent !important;
padding: 0 !important;
}
/* Heading — hide all-caps source text, inject title-case via ::after */
#section-7719482 h2,
#section-7719482 h2.atom-text,
#section-7719482 h2 span,
.rowHolder.downloadapp h2,
.rowHolder.downloadapp h2 span {
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
text-shadow: none !important;
}
#section-7719482 h2::after,
.rowHolder.downloadapp h2::after {
content: "Download Our Event App" !important;
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: clamp(28px, 3.5vw, 48px) !important;
font-weight: 400 !important;
letter-spacing: -0.96px !important;
line-height: 1.1 !important;
color: #000000 !important;
display: block !important;
text-align: center !important;
margin-bottom: 48px !important;
text-transform: none !important;
}
/* Two-column flex card layout */
.download-buttons-holder {
display: flex !important;
flex-direction: row !important;
gap: 16px !important;
justify-content: center !important;
max-width: 1200px !important;
margin: 0 auto !important;
text-align: left !important;
}
/* White download cards with subtle border & shadow */
.download-buttons-holder a {
flex: 1 !important;
background-color: #ffffff !important;
border-radius: 8px !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0px 10px 10px rgba(220, 220, 220, 0.1) !important;
padding: 32px 32px 24px 32px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-height: 300px !important;
text-decoration: none !important;
transition: box-shadow 0.2s !important;
}
.download-buttons-holder a:hover {
box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.08) !important;
}
/* Apple icon — inline SVG data URI (CDN URL blocked cross-origin) */
.js-download-ios::before {
content: '' !important;
display: block !important;
width: 40px !important;
height: 40px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='white'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-16.9 75.2-16.9 31.8 0 48.3 16.9 76.4 16.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.1-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: left center !important;
flex-shrink: 0 !important;
margin-bottom: 16px !important;
order: 1 !important;
}
/* Google Play icon — CDN */
.js-download-android::before {
content: '' !important;
display: block !important;
width: 40px !important;
height: 40px !important;
background-image: url("https://cdn.prod.website-files.com/6915f01ece943af094239ff7/698484768016c6e37648b726_image%20714664650%20(1).svg") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: left center !important;
flex-shrink: 0 !important;
margin-bottom: 16px !important;
order: 1 !important;
}
/* Card heading text — Dela Gothic One, black, 36px */
.js-download-ios::after {
content: "Download from App Store" !important;
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: clamp(20px, 2.5vw, 36px) !important;
color: #000000 !important;
display: block !important;
line-height: 0.94 !important;
letter-spacing: -0.72px !important;
margin-bottom: 32px !important;
order: 2 !important;
}
.js-download-android::after {
content: "Download from Google Play" !important;
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: clamp(20px, 2.5vw, 36px) !important;
color: #000000 !important;
display: block !important;
line-height: 0.94 !important;
letter-spacing: -0.72px !important;
margin-bottom: 32px !important;
order: 2 !important;
}
/* Replace badge img with black "Download" button — order: 3 */
.download-buttons-holder a img {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='34'%3E%3Crect rx='4' ry='4' width='98' height='34' fill='black'/%3E%3Ctext x='49' y='23' font-size='13' font-family='Space%20Grotesk%2C sans-serif' fill='white' text-anchor='middle' font-weight='900' letter-spacing='-0.14'%3EDownload%3C%2Ftext%3E%3C%2Fsvg%3E") !important;
height: 34px !important;
width: 98px !important;
display: block !important;
border-radius: 0 !important;
flex-shrink: 0 !important;
order: 3 !important;
}
/* Responsive: stack on mobile */
@media (max-width: 768px) {
.rowHolder.downloadapp {
padding: 60px 5% !important;
}
.download-buttons-holder {
display: grid !important;
grid-template-columns: 1fr !important;
}
.download-buttons-holder a {
width: 100% !important;
min-height: auto !important;
padding: 24px !important;
}
}
/* Location section — white background matching Figma */
.location-section,
[class*="location"],
[class*="venue"]:not(.date-venue-holder):not(.date-venue-wrapper):not(.virtual-venue-banner--trade) {
background-color: #ffffff !important;
}
[class*="location"] h1,
[class*="location"] h2,
[class*="location"] h3,
[class*="location"] p,
[class*="venue"]:not(.date-venue-holder):not(.date-venue-wrapper) h2,
[class*="venue"]:not(.date-venue-holder):not(.date-venue-wrapper) p {
color: #000000 !important;
}
/* ============================================================
5. AGENDA PAGE
============================================================ */
/* Background — white */
.agenda-custom-css,
.agenda-view {
background-color: #ffffff !important;
}
/* Override Bizzabo color-1 (brand color) → black */
.color-1-background,
.tab-button-border.custom-color.color-1-background,
.full-agenda-btn.color-1-background {
background-color: #000000 !important;
border-color: #000000 !important;
}
.color-1-hover-opacity-outline {
color: #000000 !important;
border-color: #000000 !important;
}
/* Active tab indicator — black underline */
.tab-button-border {
border-bottom: 3px solid #000000 !important;
}
/* Tab icon — dark */
.tab-button .icon.color-1,
.icon.custom-color.color-1 {
color: var(--heading) !important;
}
/* View Full Agenda + CTA buttons — black */
.btn.full-agenda-btn,
.cta-button.cta-button-medium {
background-color: #000000 !important;
border-color: #000000 !important;
color: #ffffff !important;
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 700 !important;
text-transform: capitalize !important;
border-radius: 4px !important;
}
.btn.full-agenda-btn:hover,
.cta-button.cta-button-medium:hover {
background-color: #333333 !important;
border-color: #333333 !important;
}
/* Search bar */
.agenda-search .search-input input {
font-family: 'Space Grotesk', sans-serif !important;
border-color: var(--sh-gray) !important;
color: var(--heading) !important;
background-color: var(--sh-white) !important;
}
/* Filter toolbar text — Space Grotesk */
.agenda-view .tab-button span,
.agenda-view .tab-buttons-container,
.agenda-view .agenda-search-container,
.agenda-view .agenda-view-selector,
.agenda-view select,
.agenda-view option {
font-family: 'Space Grotesk', sans-serif !important;
color: var(--heading) !important;
}
/* Session title — Space Grotesk, semibold */
.agenda-view .session-list-container .session-day-container .time-row
.session-elem .session-container .session-name a,
.agenda-view .session-list-container .session-day-container .time-row
.session-elem .session-container .session-name span {
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 600 !important;
color: var(--heading) !important;
text-decoration: none;
}
/* Session time — dark */
.session-info-text .session-time {
font-weight: 600 !important;
display: inline-block;
color: var(--heading) !important;
font-family: 'Space Grotesk', sans-serif !important;
}
/* Expand session description */
.agenda-view .session-list-container .session-day-container .time-row
.session-elem .session-container .preview-session-description {
overflow: hidden;
max-height: max-content;
margin-bottom: 10px;
cursor: default;
}
.agenda-view .session-list-container .session-day-container .time-row
.session-elem .session-container .preview-session-description.faddedAway {
-webkit-mask-image: none;
}
/* Hide My Interests tab + ghost border */
.agenda-view .tab-buttons-container .tab-button-wrapper .tab-button.my-interests-button {
display: none;
}
body > div.react-main.footer-padding-confirmation > div > div >
div.agenda-view.session-list-view.top-agenda-margin-single.agenda-custom-css.agenda-day-selector.row >
div.tab-buttons-container.margin-bottom-small > div:nth-child(2) >
div.tab-button-border.background-color-gray {
display: none;
}
/* ============================================================
6. SPEAKERS PAGE
============================================================ */
.speakers-custom-css .speaker-name,
.speaker-view .speaker-name {
font-family: 'Young Serif', Arial, serif !important;
font-weight: 400 !important;
color: var(--heading) !important;
}
.speakers-custom-css .speaker-title,
.speakers-custom-css .speaker-company,
.speaker-view .speaker-title {
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 500 !important;
color: var(--sh-red) !important;
}
/* Speaker card title + company on home & /speakers list pages */
.attendee-title,
.attendee-company {
font-size: 14px !important;
font-weight: 400 !important;
color: #000000 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
.speaker-view .speaker-bio,
.speaker-view .speaker-description {
font-family: 'Space Grotesk', sans-serif !important;
color: var(--heading) !important;
line-height: 1.6;
}
.speaker-view .speaker-photo img,
.speaker-photo {
border: 3px solid var(--sh-red) !important;
border-radius: 50%;
}
/* Hide Like, Share, Twitter */
.speaker-view .speaker-container .speaker-profile
.speaker-community-like-wrapper span {
display: none;
}
.speaker-share-button {
display: none;
}
.speaker-view .speaker-container .speaker-sessions-twitter-wrapper
.speaker-twitter {
display: none;
}
.speaker-view .speaker-sessions a {
color: var(--sh-red) !important;
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 600 !important;
}
.speaker-view .speaker-sessions a:hover {
color: var(--heading) !important;
}
/* ============================================================
7. MAP — Two-column layout matching Webflow
============================================================ */
/* Turn venue row into flexbox: text left, map right */
.rowHolder.eventvenue {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
gap: 32px !important;
padding: 80px 120px !important;
min-height: 492px !important;
box-sizing: border-box !important;
background-color: #ffffff !important;
}
/* Left column — location text */
.map-address {
flex: 0 0 419px !important;
max-width: 419px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
padding-top: 16px !important;
}
/* Left-align location text */
.map-address .venue-information,
.map-address .venue-name,
.map-address .venue-information * {
text-align: left !important;
}
/* Map section heading — show Bizzabo native title, styled */
.rowHolder.eventvenue h2,
.rowHolder.eventvenue h2.atom-main,
.rowHolder.eventvenue h2.custom-font,
.map-address h2.atom-main {
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: 32px !important;
font-weight: 400 !important;
letter-spacing: -0.32px !important;
line-height: 1 !important;
color: #000000 !important;
text-transform: none !important;
margin-bottom: 24px !important;
}
/* Venue name + address — gray body text */
.map-address .venue-information,
.map-address .venue-name,
.map-address .venue-information p,
.map-address p,
.rowHolder.eventvenue .atom-main,
.rowHolder.eventvenue [class*="element-"],
[class*="venue"]:not(.date-venue-holder):not(.date-venue-wrapper) p {
color: #5d5d5d !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
}
/* Right column — map with Figma styling */
.google-map-holder {
flex: 1 1 auto !important;
background-color: #f0f6fe !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 8px !important;
box-shadow: 0px 0.8px 2.4px 0.8px rgba(7, 8, 8, 0.08) !important;
overflow: hidden !important;
min-height: 492px !important;
}
.google-map {
width: 100% !important;
height: 100% !important;
min-height: 492px !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.google-map iframe {
border-radius: 8px !important;
}
/* Responsive: stack on mobile */
@media (max-width: 768px) {
.rowHolder.eventvenue {
flex-direction: column !important;
padding: 48px 24px !important;
gap: 24px !important;
}
.map-address {
flex: none !important;
max-width: 100% !important;
}
.google-map-holder,
.google-map {
min-height: 280px !important;
}
}
/* ============================================================
7b. COUNTDOWN TIMER
============================================================ */
/* Section background — true black */
.section-countdownClock,
.section-countdownClock .rowHolder,
.section-countdownClock .atom-sectionSecondary,
#section-7744773,
#section-7744773 .rowHolder,
#section-7744773 .atom-sectionSecondary {
background-color: #000000 !important;
}
/* Section padding — compact */
.section-countdownClock .rowHolder,
.section-countdownClock .atom-sectionSecondary {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
/* Heading "We Are Live In" — tighten spacing */
.section-countdownClock h2.atom-main {
letter-spacing: -0.02em !important;
margin-bottom: 16px !important;
}
/* Numbers — reduced size */
.section-countdownClock .count-number {
font-size: 52px !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
color: var(--heading) !important;
}
/* Unit labels */
.section-countdownClock .count-unit {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
color: var(--sh-gray) !important;
margin-top: 4px !important;
}
/* Dividers — replace gradient fade with solid line */
.section-countdownClock .count-container::before,
.section-countdownClock .count-container::after {
background: var(--sh-gray) !important;
}
/* Hide bottom horizontal rule */
.section-countdownClock .business-border {
display: none !important;
}
/* ============================================================
7c. SPONSORS & EXHIBITORS — heading only
============================================================ */
.rowHolder.sponsors h2.atom-main,
.rowHolder.sponsors h2.custom-font,
.rowHolder.exhibitors h2.atom-main,
.rowHolder.exhibitors h2.custom-font {
text-transform: none !important;
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: clamp(32px, 4vw, 48px) !important;
font-weight: 400 !important;
letter-spacing: -0.02em !important;
color: var(--heading) !important;
line-height: 1.1 !important;
}
/* ============================================================
8. SPEAKERS — Home page widget (.rowHolder.speakers)
============================================================ */
/* Section background */
.section-speakers,
.section-speakers,
.section-speakers .main-app-container,
.section-speakers .attendees-faces,
.section-speakers .main-app-container {
background-color: #000000 !important;
}
/* Heading — remove all-caps transform, apply Dela Gothic One */
.rowHolder.speakers h2.atom-main,
.rowHolder.speakers h2.custom-font {
text-transform: none !important;
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: 48px !important;
font-weight: 400 !important;
letter-spacing: -0.96px !important;
line-height: 0.94 !important;
color: #000000 !important;
margin-bottom: 48px !important;
display: block !important;
}
/* Row — Flexbox, centered so any partial last row stays centered */
.rowHolder.speakers .row {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 32px !important;
margin: 0 !important;
}
/* Hide Bootstrap clearfix pseudo-elements — they become grid items otherwise */
.rowHolder.speakers .row::before,
.rowHolder.speakers .row::after {
display: none !important;
}
/* Speaker card — open style, no border/background */
.rowHolder.speakers .entity-photo-holder {
flex: 0 0 210px !important;
width: 210px !important;
max-width: 210px !important;
padding: 0 !important;
float: none !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
overflow: visible !important;
margin-bottom: 0 !important;
}
/* Photo — container masked to exact ShipHero logo hexagon shape (SVG path for smooth bezier edges) */
.rowHolder.speakers .object-trade-thumbnail {
display: block !important;
width: 100% !important;
aspect-ratio: 1331.35 / 1474.68 !important;
height: auto !important;
border-radius: 0 !important;
margin: 0 0 8px 0 !important;
object-fit: cover !important;
object-position: center center !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1474.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v491.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-491.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1474.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v491.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-491.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") !important;
mask-size: 100% 100% !important;
-webkit-mask-size: 100% 100% !important;
mask-repeat: no-repeat !important;
-webkit-mask-repeat: no-repeat !important;
background-color: #e8e8e8 !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.rowHolder.speakers .object-trade-thumbnail img {
display: block !important;
width: 100% !important;
aspect-ratio: 1331.35 / 1474.68 !important;
object-fit: cover !important;
object-position: center center !important;
}
/* Hide the inline name label inside the photo object */
.rowHolder.speakers .object-trade-thumbnail .user-credentials,
.rowHolder.speakers .entity-photo-holder > a > .user-credentials {
display: none !important;
}
/* Speakers without a photo upload — mask the wrapper the same way */
.rowHolder.speakers .entity-photo-holder > a {
display: block !important;
width: 100% !important;
aspect-ratio: 1331.35 / 1474.68 !important;
margin: 0 0 8px 0 !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1474.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v491.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-491.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1474.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v491.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-491.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") !important;
mask-size: 100% 100% !important;
-webkit-mask-size: 100% 100% !important;
mask-repeat: no-repeat !important;
-webkit-mask-repeat: no-repeat !important;
background-color: #e8e8e8 !important;
}
.rowHolder.speakers .entity-photo-holder > a > img.center-block {
display: block !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
object-fit: cover !important;
object-position: center center !important;
}
/* Inner text — left-aligned below the hexagon */
.rowHolder.speakers .speaker-text {
padding: 0 4px 24px !important;
text-align: left !important;
}
/* Speaker name — Dela Gothic One serif */
.rowHolder.speakers .atom-fullname,
.rowHolder.speakers .attendee-name {
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: 30px !important;
font-weight: 400 !important;
color: #000000 !important;
letter-spacing: -0.48px !important;
line-height: 1.1 !important;
margin-bottom: 2px !important;
text-transform: none !important;
}
/* Speaker title — inline so it sits on same line as company */
.rowHolder.speakers .atom-text1,
.rowHolder.speakers .attendee-title {
display: inline !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #000000 !important;
letter-spacing: 0.08em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
/* Inject " @ " between title and company */
.rowHolder.speakers .atom-text1::after,
.rowHolder.speakers .attendee-title::after {
content: ' @ ' !important;
font-weight: 400 !important;
color: #000000 !important;
}
/* Speaker company — inline */
.rowHolder.speakers .atom-text2,
.rowHolder.speakers .attendee-company {
display: inline !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #000000 !important;
letter-spacing: 0.08em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
/* Responsive: smaller cards on tablet */
@media (max-width: 992px) {
.rowHolder.speakers .row {
gap: 24px !important;
}
.rowHolder.speakers .entity-photo-holder {
flex: 0 0 180px !important;
width: 180px !important;
max-width: 180px !important;
}
}
/* Responsive: compact on mobile */
@media (max-width: 576px) {
.rowHolder.speakers {
padding-left: 16px !important;
padding-right: 16px !important;
padding-top: 40px !important;
}
.rowHolder.speakers .row {
gap: 24px !important;
}
.rowHolder.speakers .entity-photo-holder {
flex: 0 0 150px !important;
width: 150px !important;
max-width: 150px !important;
}
.rowHolder.speakers h2.atom-main,
.rowHolder.speakers h2.custom-font {
font-size: 36px !important;
margin-bottom: 32px !important;
}
}
/* ============================================================
9. ABOUT THE EVENT (.about_event / section-7736069)
============================================================ */
/* Heading — title-case, Dela Gothic One, matching Speakers section */
#section-7736069 h2,
.about_event h2.atom-main,
.about_event h2.custom-font {
font-family: 'Dela Gothic One', Georgia, serif !important;
text-transform: none !important;
text-align: left !important;
font-size: 48px !important;
font-weight: 400 !important;
letter-spacing: -0.96px !important;
color: var(--heading) !important;
margin-bottom: 32px !important;
line-height: 0.94 !important;
padding-left: 30px !important;
}
/* Sub-heading h3 — "What to Expect" — smaller, upright (no italic) */
#section-7736069 h3,
.about_event h3 {
font-family: 'Dela Gothic One', Georgia, serif !important;
font-style: normal !important;
text-transform: none !important;
text-align: left !important;
font-size: clamp(20px, 2vw, 28px) !important;
font-weight: 400 !important;
letter-spacing: -0.01em !important;
color: var(--heading) !important;
margin-bottom: 16px !important;
margin-left: 0 !important;
padding-left: 0 !important;
line-height: 1.2 !important;
}
/* Body text — correct color to match heading token */
#section-7736069 p,
.about_event p {
font-family: 'Space Grotesk', sans-serif !important;
color: var(--heading) !important;
line-height: 1.65 !important;
}
/* Image — 8px radius matching ShipHero design system */
.about_event img.bz-image,
.about_event img.atom-main,
#section-7736069 img.bz-image,
#section-7736069 img.atom-main {
border-radius: 8px !important;
}
/* Clip parent column so corners are actually rounded */
.about_event .col-sm-6.overflow-hidden {
border-radius: 8px !important;
}
/* ============================================================
10. REQUEST AN INVITE (section-7736135 / .rowHolder.submission-form)
============================================================ */
/* Section outer background — light gray matching Download App section */
.section-7736135,
.trade-template.section-7736135,
.section-7736135 > div,
.rowHolder.submission-form,
.rowHolder.submission-form .atom-sectionSecondary,
.rowHolder.submission-form .main-app-container {
background-color: #f9f9f9 !important;
}
/* Heading — title-case, Dela Gothic One */
.rowHolder.submission-form h2,
#section-7736135 h2 {
font-family: 'Dela Gothic One', Georgia, serif !important;
text-transform: none !important;
font-size: 48px !important;
font-weight: 400 !important;
letter-spacing: -0.96px !important;
color: var(--heading) !important;
margin-bottom: 32px !important;
line-height: 0.94 !important;
}
/* Form inputs */
.rowHolder.submission-form input[type="text"],
.rowHolder.submission-form input[type="email"],
.rowHolder.submission-form input[type="tel"],
.rowHolder.submission-form select,
.rowHolder.submission-form textarea {
font-family: 'Space Grotesk', sans-serif !important;
border: 1px solid var(--sh-gray) !important;
border-radius: 4px !important;
color: var(--heading) !important;
background-color: var(--sh-white) !important;
font-size: 15px !important;
}
.rowHolder.submission-form input[type="text"]:focus,
.rowHolder.submission-form input[type="email"]:focus {
border-color: var(--sh-blue) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(50, 129, 253, 0.12) !important;
}
/* Field labels */
.rowHolder.submission-form .field-label,
.rowHolder.submission-form .form-group > label,
.rowHolder.submission-form .control-label {
font-family: 'Space Grotesk', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--heading) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
/* Privacy / terms text */
.rowHolder.submission-form .terms-text,
.rowHolder.submission-form .gdpr-text,
.rowHolder.submission-form .form-check-label,
.rowHolder.submission-form .legal-terms,
.rowHolder.submission-form .js-legal-terms {
font-family: 'Space Grotesk', sans-serif !important;
font-size: 13px !important;
color: var(--heading) !important;
}
.rowHolder.submission-form .legal-terms > div,
.rowHolder.submission-form .js-legal-terms > div {
color: inherit !important;
}
/* CTA submit button — black (exclude dropdown toggles) */
.rowHolder.submission-form button[type="submit"],
.rowHolder.submission-form .btn-submit,
.rowHolder.submission-form .cta-button,
.rowHolder.submission-form input[type="submit"],
#section-7736135 .btn:not(.btn-form-dropdown):not(.dropdown-toggle),
#section-7736135 button:not(.btn-form-dropdown):not(.dropdown-toggle) {
background-color: #000000 !important;
border-color: #000000 !important;
color: #ffffff !important;
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 700 !important;
border-radius: 4px !important;
}
.rowHolder.submission-form button[type="submit"]:hover,
.rowHolder.submission-form .btn-submit:hover,
#section-7736135 .btn:not(.btn-form-dropdown):not(.dropdown-toggle):hover,
#section-7736135 button:not(.btn-form-dropdown):not(.dropdown-toggle):hover {
background-color: #333333 !important;
border-color: #333333 !important;
}
/* Remove excess margin below the CTA button */
.rowHolder.submission-form .btn-register,
#section-7736135 .btn-register {
margin-bottom: 8px !important;
}
/* Form dropdown toggles — look like text inputs, not CTAs */
#section-7736135 .btn.btn-form-dropdown,
#section-7736135 .btn.dropdown-toggle.form-control,
.rowHolder.submission-form .btn.btn-form-dropdown,
.rowHolder.submission-form .btn.dropdown-toggle.form-control {
background-color: var(--sh-white) !important;
border: 1px solid var(--sh-gray) !important;
color: var(--heading) !important;
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 400 !important;
text-align: left !important;
border-radius: 4px !important;
box-shadow: none !important;
}
#section-7736135 .btn.btn-form-dropdown:hover,
#section-7736135 .btn.dropdown-toggle.form-control:hover,
#section-7736135 .btn.btn-form-dropdown:focus,
#section-7736135 .btn.dropdown-toggle.form-control:focus {
background-color: var(--sh-white) !important;
border-color: var(--sh-blue) !important;
box-shadow: 0 0 0 3px rgba(50, 129, 253, 0.12) !important;
color: var(--heading) !important;
}
/* Form inline links (End User Terms, Privacy Policy) — dark text, consistent hover */
#section-7736135 a:not(.btn):not(.btn-register),
.rowHolder.submission-form a:not(.btn):not(.btn-register) {
color: var(--heading) !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
text-decoration-color: rgba(38, 46, 57, 0.35) !important;
transition: text-decoration-color 0.15s ease !important;
}
#section-7736135 a:not(.btn):not(.btn-register):hover,
.rowHolder.submission-form a:not(.btn):not(.btn-register):hover {
color: var(--heading) !important;
text-decoration-color: var(--heading) !important;
}
/* Force Join Us button — same size as hero Register, centered */
/* .rowHolder.submission-form covers Titans (section-8458528) and any other page */
#section-7736135 .btn-register,
.rowHolder.submission-form .btn-register {
font-size: 16px !important;
padding: 14px 48px !important;
line-height: 1.25 !important;
border-radius: 4px !important;
float: none !important;
display: table !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
letter-spacing: 0.01em !important;
}
/* ============================================================
10b. GOOGLE MAP — reduce height by ~43%
============================================================ */
.google-map-holder,
.google-map {
height: 280px !important;
min-height: 280px !important;
}
.google-map-holder iframe,
.google-map iframe {
height: 280px !important;
}
.map-address {
height: auto !important;
min-height: 0 !important;
}
.rowHolder.eventvenue {
height: auto !important;
min-height: 0 !important;
}
/* ============================================================
11. AGENDA OVERVIEW SECTION (.agenda_overview)
============================================================ */
/* Section background — transparent so background image shows through */
.agenda_overview,
.agenda_overview .main-app-container,
.agenda_overview .main-view,
.agenda_overview .rowHolder {
background-color: transparent !important;
}
/* Section heading — override Bizzabo's uppercase transform, match Speakers 48px */
.agenda_overview h2.atom-main,
.agenda_overview h2.custom-font {
text-transform: none !important;
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: 48px !important;
font-weight: 400 !important;
font-style: normal !important;
color: #000000 !important;
letter-spacing: -0.96px !important;
line-height: 0.94 !important;
margin-bottom: 48px !important;
}
/* Table — clean collapse, full width */
.agenda_overview table {
width: 100% !important;
border-collapse: collapse !important;
border: none !important;
}
/* Rows — subtle bottom divider */
.agenda_overview tr {
border-bottom: 1px solid #e0e0e0 !important;
}
.agenda_overview tr:last-child {
border-bottom: none !important;
}
/* All cells — generous padding, top-aligned */
.agenda_overview td {
vertical-align: top !important;
padding: 28px 24px !important;
border: none !important;
background-color: transparent !important;
}
/* Left column — date, narrower fixed width */
.agenda_overview td:first-child {
width: 220px !important;
padding-right: 32px !important;
}
/* Date heading (h3) — Dela Gothic One, large, pure black for contrast */
.agenda_overview td:first-child h3 {
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: 30px !important;
font-weight: 400 !important;
font-style: normal !important;
color: #000000 !important;
margin: 0 !important;
line-height: 1.2 !important;
text-transform: none !important;
letter-spacing: -0.02em !important;
}
/* Right column — event descriptions */
.agenda_overview td:last-child {
padding-left: 32px !important;
border-left: 1px solid #e0e0e0 !important;
}
/* Paragraphs in right column */
.agenda_overview td:last-child p {
font-family: 'Space Grotesk', sans-serif !important;
font-size: 15px !important;
line-height: 1.65 !important;
color: #5d5d5d !important;
margin: 0 0 12px 0 !important;
}
.agenda_overview td:last-child p:last-child {
margin-bottom: 0 !important;
}
/* Bold event names — slightly darker, Space Grotesk semibold */
.agenda_overview td:last-child strong {
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 600 !important;
color: var(--heading) !important;
}
/* Standalone bold (no wrapping p — e.g. September 18) */
.agenda_overview td:last-child > strong {
display: block !important;
font-size: 15px !important;
line-height: 1.65 !important;
color: var(--heading) !important;
}
/* Responsive: stack on mobile */
@media (max-width: 640px) {
.agenda_overview table,
.agenda_overview tbody,
.agenda_overview tr,
.agenda_overview td {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
.agenda_overview tr {
border-bottom: 1px solid #e0e0e0 !important;
padding: 20px 0 !important;
}
.agenda_overview tr:last-child {
border-bottom: none !important;
}
.agenda_overview td {
padding: 0 20px !important;
border: none !important;
}
.agenda_overview td:first-child,
.agenda_overview td:last-child {
border: none !important;
padding-bottom: 8px !important;
}
.agenda_overview td:first-child h3 {
font-size: 22px !important;
white-space: nowrap !important;
}
.agenda_overview td:last-child {
padding-top: 0 !important;
}
}
/* ============================================================
12. EXPERIENCE SECTION (.agenda_experience)
============================================================ */
/* Section background — light gray, same as Agenda Overview */
.agenda_experience,
.agenda_experience .main-app-container,
.agenda_experience .main-view,
.agenda_experience .rowHolder {
background-color: #f9f9f9 !important;
}
/* Two-column flex layout: heading left, table right */
.agenda_experience .main-app-container {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 48px !important;
}
/* Heading column — left, ~1/3 width */
.agenda_experience .main-app-container > div:first-child {
flex: 0 0 33% !important;
max-width: 33% !important;
text-align: left !important;
}
/* Table column — right, fills remaining space */
.agenda_experience .element-groups {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.agenda_experience .element-groups .col-sm-12 {
width: 100% !important;
float: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Section heading — display type in left column, matches 48px system */
.agenda_experience h2.atom-main,
.agenda_experience h2.custom-font {
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: 48px !important;
font-weight: 400 !important;
color: #000000 !important;
line-height: 1.05 !important;
letter-spacing: -0.03em !important;
text-transform: none !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
max-width: 100% !important;
}
/* Table — clean collapse, full width */
.agenda_experience table {
width: 100% !important;
border-collapse: collapse !important;
border: none !important;
}
/* Row dividers */
.agenda_experience tr {
border-bottom: 1px solid #e0e0e0 !important;
}
.agenda_experience tr:last-child {
border-bottom: none !important;
}
/* All cells — top-aligned, generous padding */
.agenda_experience td {
vertical-align: top !important;
padding: 18px 12px !important;
border: none !important;
background-color: transparent !important;
}
/* Left column — category title, narrower to give description more room */
.agenda_experience td:first-child {
width: 25% !important;
padding-right: 4px !important;
}
/* Category heading (h3) — Dela Gothic One, larger to match Agenda Overview dates */
.agenda_experience td:first-child h3 {
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: 30px !important;
font-weight: 400 !important;
font-style: normal !important;
color: #000000 !important;
margin: 0 !important;
line-height: 1.2 !important;
text-transform: none !important;
letter-spacing: -0.02em !important;
}
/* Hide empty paragraphs Bizzabo injects after h3 */
.agenda_experience td:first-child p,
.agenda_experience td:first-child br {
display: none !important;
}
/* Right column — description, no divider */
.agenda_experience td:last-child {
padding-left: 4px !important;
border-left: none !important;
}
/* Description paragraphs */
.agenda_experience td:last-child p {
font-family: 'Space Grotesk', sans-serif !important;
font-size: 15px !important;
line-height: 1.65 !important;
color: #5d5d5d !important;
margin: 0 0 12px 0 !important;
}
.agenda_experience td:last-child p:last-child {
margin-bottom: 0 !important;
}
/* Also hide stray
tags in right column */
.agenda_experience td:last-child br {
display: none !important;
}
/* Responsive: stack on mobile */
@media (max-width: 768px) {
/* Stack flex layout vertically */
.agenda_experience .main-app-container {
flex-direction: column !important;
gap: 0 !important;
}
.agenda_experience .main-app-container > div:first-child {
flex: none !important;
max-width: 100% !important;
padding: 0 20px !important;
}
/* Reduce section heading on mobile */
.agenda_experience h2.atom-main,
.agenda_experience h2.custom-font {
font-size: 32px !important;
margin-bottom: 24px !important;
}
/* Convert table to stacked blocks */
.agenda_experience table,
.agenda_experience tbody,
.agenda_experience tr,
.agenda_experience td {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
.agenda_experience tr {
border-bottom: 1px solid #e0e0e0 !important;
padding: 20px 0 !important;
}
.agenda_experience tr:last-child {
border-bottom: none !important;
}
.agenda_experience td {
padding: 0 20px !important;
border: none !important;
}
.agenda_experience td:first-child,
.agenda_experience td:last-child {
border: none !important;
width: 100% !important;
}
.agenda_experience td:first-child {
padding-bottom: 8px !important;
}
.agenda_experience td:last-child {
padding-top: 0 !important;
}
/* Reduce category heading font size; allow wrapping for long names */
.agenda_experience td:first-child h3 {
font-size: 20px !important;
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}
/* element-groups (table wrapper) needs its own horizontal gutter since
main-app-container has padding: 0 on this section */
.agenda_experience .element-groups {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
width: 100% !important;
}
}
/* ============================================================
13. FOOTER
============================================================ */
/* Footer — dark forest green like Webflow */
.footer {
background-color: var(--forest) !important;
font-family: 'Space Grotesk', sans-serif !important;
}
/* Hide native Bizzabo footer — replaced by custom ShipHero footer */
.footer:not(.section-2) {
display: none !important;
}
footer.footer-with-confirmation-link {
display: none !important;
}
/* Remove the padding-bottom Bizzabo reserves for its native footer */
.main-view.footer-padding-confirmation,
.main-view.footer-padding,
.editor-home-page.footer-padding-confirmation,
.editor-home-page.footer-padding {
padding-bottom: 0 !important;
}
.add-to-calendar span,
.footer-text-color {
color: var(--sh-gray) !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 13px;
}
.add-to-calendar a:hover .footer-text-color {
color: var(--sh-white) !important;
}
/* Looking for your ticket — updated text */
.looking-ticket-link span {
display: none !important;
}
.looking-ticket-link:after {
color: var(--sh-gray);
font-family: 'Space Grotesk', sans-serif !important;
font-size: 13px;
content: "Need help? Contact the organizer";
}
.looking-ticket-link:hover:after {
color: var(--sh-white) !important;
}
/* Hide duplicate Contact the organizer link */
.footer .contact-organizer-link,
.footer a[href*="contact"]:not(.looking-ticket-link) {
display: none;
}
/* ============================================================
12. CUSTOM SHIPHERO FOOTER (section.footer.section-2)
============================================================ */
/* Override the forest green from rule 11 — this footer is white */
.section.footer.section-2 {
background-color: white !important;
padding-bottom: 1.5rem !important;
}
/* Hide "Do Not Sell" w-embed link (JS-driven, not needed) */
.section.footer .w-embed {
display: none;
}
/* Hide CTA band (Book a Demo) — event page doesn't need it */
.section.footer .footer_cta {
display: none;
}
/* Main content grid: logo column + links column */
.section.footer .footer_content {
grid-column-gap: 0;
grid-row-gap: 0;
grid-template-rows: auto;
grid-template-columns: .5fr 1fr;
grid-auto-columns: 1fr;
padding-top: 4.5rem;
display: grid;
}
/* Left column: logo + email + AICPA */
.section.footer .footer_content-left {
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
padding-top: 0;
display: flex;
}
/* Right column: 3-col link blocks */
.section.footer .footer_content-right {
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
}
.section.footer .footer-logo {
height: 44px;
vertical-align: middle;
max-width: 100%;
display: inline-block;
}
.section.footer .footer-item {
grid-column-gap: 14px;
grid-row-gap: 14px;
flex-flow: column;
display: flex;
}
.section.footer .footer_label {
text-transform: uppercase;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 12px;
line-height: 110%;
color: #888 !important;
}
.section.footer .footer_link {
grid-column-gap: 8px;
grid-row-gap: 8px;
color: #5d5d5d !important;
cursor: pointer;
justify-content: flex-start;
align-items: center;
line-height: 115%;
text-decoration: none;
transition: all .2s;
display: flex;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 1rem;
font-weight: 300 !important;
}
.section.footer .footer_link:hover,
.section.footer .footer_link.black {
color: #000 !important;
}
/* Social icons */
.section.footer .footer_link-icon {
width: 16px;
height: 16px;
}
.section.footer .aicpa-logo {
vertical-align: middle;
max-width: 100%;
display: inline-block;
}
.section.footer .footer-block {
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
flex-flow: column;
display: flex;
}
.section.footer .footer_links {
grid-column-gap: 1rem;
grid-row-gap: 1rem;
flex-flow: column;
display: flex;
}
/* Bottom band: copyright + legal links */
.section.footer .footer_bottom {
grid-column-gap: 4rem;
grid-row-gap: 4rem;
flex-flow: column;
display: flex;
}
.section.footer .footer_last {
border-top: 1px solid #e5e5e5;
justify-content: space-between;
align-items: flex-start;
padding-top: 1rem;
margin-top: 2rem;
display: flex;
}
.section.footer .footer-copyright {
color: #5d5d5d;
font-size: .875rem;
text-decoration: none;
transition: all .2s;
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 300;
}
.section.footer .footer_last-right {
grid-column-gap: 1rem;
grid-row-gap: 1rem;
display: flex;
}
/* Responsive: collapse to single column on mobile */
@media screen and (max-width: 767px) {
.section.footer.section-2,
.section.footer.section-2 .rowHolder,
.section.footer.section-2 .atom-sectionSecondary,
.section.footer.section-2 .main-app-container,
.section.footer.section-2 .main-view {
padding-top: 0 !important;
margin-top: 0 !important;
}
.section.footer.section-2 {
padding-bottom: 1rem !important;
}
.section.footer .footer_content {
grid-column-gap: 2rem !important;
grid-row-gap: 2rem !important;
grid-template-columns: 1fr !important;
padding-top: 2rem !important;
}
.section.footer .footer_content-right {
grid-column-gap: 3rem !important;
grid-row-gap: 3rem !important;
grid-template-columns: 1fr !important;
}
.section.footer .footer_last {
grid-column-gap: 1rem;
grid-row-gap: 1rem;
flex-flow: column-reverse;
}
.section.footer .footer_last-right {
grid-column-gap: 1rem;
grid-row-gap: 1rem;
flex-flow: wrap;
}
}
/* ============================================================
14. SPEAKER DETAIL PAGE (.speaker-view)
============================================================ */
/* Page background */
.speaker-view {
background-color: var(--sh-white) !important;
}
/* Header band — cream instead of brand color */
.speaker-view .speaker-background,
.speaker-view .speaker-background.custom-color,
.speaker-view .speaker-background.short-background,
.speaker-background.full-width {
background-color: var(--cream) !important;
height: 180px !important;
}
/* Back button — black, matches other CTAs */
.speaker-view .speaker-back-button {
background-color: #000000 !important;
border: 2px solid #000000 !important;
color: #ffffff !important;
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 700 !important;
font-size: 11px !important;
letter-spacing: 0.08em !important;
border-radius: 4px !important;
text-transform: uppercase !important;
}
.speaker-view .speaker-back-button:hover {
background-color: #333333 !important;
border-color: #333333 !important;
}
/* Hide back arrow icon — text only */
.speaker-view .speaker-back-arrow {
display: none !important;
}
/* Hide share button, like widget, Twitter link */
.speaker-view .speaker-share-button,
.speaker-view .speaker-community-like-wrapper,
.speaker-view .speaker-sessions-twitter-wrapper .speaker-twitter {
display: none !important;
}
/* Photo wrapper — allow hexagon overflow, center the image */
.speaker-view .speaker-image-wrapper {
overflow: visible !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
padding-top: 0 !important;
}
/* Photo — hexagon mask (same SVG path as home page cards) */
.speaker-view img.speaker-image-stub {
display: block !important;
width: 240px !important;
height: auto !important;
aspect-ratio: 1331.35 / 1474.68 !important;
object-fit: cover !important;
object-position: center top !important;
border-radius: 0 !important;
border: none !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1474.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v491.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-491.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1474.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v491.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-491.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") !important;
mask-size: 100% 100% !important;
-webkit-mask-size: 100% 100% !important;
mask-repeat: no-repeat !important;
-webkit-mask-repeat: no-repeat !important;
}
/* Speaker name — Dela Gothic One display size */
.speaker-view .speaker-name,
.speaker-view h1.speaker-name {
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: 48px !important;
font-weight: 400 !important;
color: #000000 !important;
letter-spacing: -0.96px !important;
line-height: 1.0 !important;
margin-bottom: 8px !important;
text-transform: none !important;
}
/* Title — inline so "Title @ Company" sits on one line */
.speaker-view .speaker-position {
display: inline !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #000000 !important;
text-transform: none !important;
}
.speaker-view .speaker-position::after {
content: ' @ ' !important;
font-weight: 600 !important;
color: #000000 !important;
}
/* Company — inline, matches title */
.speaker-view .speaker-company {
display: inline !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #000000 !important;
text-transform: none !important;
}
/* Bio text */
.speaker-view .speaker-description,
.speaker-view .speaker-bio,
.speaker-view .preview-speaker-description {
font-family: 'Space Grotesk', sans-serif !important;
font-size: 15px !important;
line-height: 1.65 !important;
color: var(--heading) !important;
margin-top: 20px !important;
}
/* Sessions section heading */
.speaker-view .speaker-sessions h3,
.speaker-view .speaker-sessions-title {
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: 22px !important;
font-weight: 400 !important;
color: var(--heading) !important;
margin-bottom: 12px !important;
text-transform: none !important;
}
/* Session links */
.speaker-view .speaker-sessions a {
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 600 !important;
color: var(--heading) !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
text-decoration-color: rgba(38,46,57,0.35) !important;
}
.speaker-view .speaker-sessions a:hover {
color: var(--sh-red) !important;
text-decoration-color: var(--sh-red) !important;
}
/* Mobile */
@media (max-width: 768px) {
.speaker-view .speaker-name,
.speaker-view h1.speaker-name {
font-size: 36px !important;
}
.speaker-view img.speaker-image-stub {
width: 180px !important;
}
}
/* ============================================================
15. ACCORDION SECTION (.accordion)
============================================================ */
/* Section background — blue to black gradient */
.accordion,
.accordion .rowHolder {
background: linear-gradient(to top right, #000000 0%, #324F80 60%, #4287FF 100%) !important;
}
/* Inner containers transparent so gradient shows through */
.accordion .main-app-container,
.accordion .atom-sectionSecondary,
.accordion .container,
.accordion .row,
.accordion > div {
background: transparent !important;
background-color: transparent !important;
}
.accordion .main-app-container {
padding-left: 40px !important;
padding-right: 40px !important;
}
/* Section title */
.accordion h2.atom-main,
.accordion h2.custom-font {
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: 56px !important;
font-weight: 400 !important;
color: #ffffff !important;
text-align: center !important;
text-transform: none !important;
letter-spacing: -1px !important;
margin-bottom: 48px !important;
padding: 0 !important;
}
/* Stack the 3 columns into full-width rows */
.accordion .element-groups {
display: block !important;
max-width: 860px !important;
margin: 0 auto !important;
}
.accordion .element-groups .col-sm-4 {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
border-top: 1px solid rgba(255,255,255,0.3) !important;
overflow: visible !important;
}
.accordion .element-groups .col-sm-4:last-child {
border-bottom: 1px solid rgba(255,255,255,0.3) !important;
}
/* Inner content wrapper */
.accordion .element-groups .col-sm-4 > div {
padding: 28px 0 !important;
}
/* Clickable header row (injected by JS) */
.accordion .hz-row-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
cursor: pointer !important;
padding: 28px 0 !important;
user-select: none !important;
-webkit-user-select: none !important;
}
/* Remove default col padding when header is present */
.accordion .element-groups .col-sm-4:has(.hz-row-header) > div {
padding: 0 !important;
}
/* Row heading (H1 inside each col) */
.accordion .element-groups .col-sm-4 h1 {
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: 30px !important;
font-weight: 400 !important;
color: #ffffff !important;
text-transform: none !important;
text-align: left !important;
letter-spacing: -0.4px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
flex: 1 !important;
}
/* Toggle +/− button */
.accordion .hz-toggle {
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
border: 1.5px solid rgba(255,255,255,0.5) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
color: #ffffff !important;
font-size: 22px !important;
font-weight: 300 !important;
line-height: 1 !important;
font-family: 'Space Grotesk', sans-serif !important;
transition: transform 0.25s ease, border-color 0.15s !important;
}
.accordion .col-sm-4.hz-open .hz-toggle {
transform: rotate(45deg) !important;
border-color: rgba(255,255,255,0.9) !important;
}
/* Body paragraph — hidden by default, shown when open */
.accordion .element-groups .col-sm-4 p {
font-family: 'Space Grotesk', sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
color: rgba(255,255,255,0.82) !important;
line-height: 1.75 !important;
text-align: left !important;
margin: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
transition: max-height 0.35s ease, padding-bottom 0.35s ease !important;
padding-bottom: 0 !important;
}
.accordion .element-groups .col-sm-4 span {
color: rgba(255,255,255,0.82) !important;
}
.accordion .col-sm-4.hz-open p {
max-height: 400px !important;
padding-bottom: 28px !important;
}
@media (max-width: 768px) {
.accordion .main-app-container {
padding-left: 20px !important;
padding-right: 20px !important;
}
.accordion h2.atom-main,
.accordion h2.custom-font {
font-size: 36px !important;
margin-bottom: 32px !important;
}
.accordion .element-groups .col-sm-4 h1 {
font-size: 22px !important;
}
.accordion .element-groups .col-sm-4 p,
.accordion .element-groups .col-sm-4 span {
font-size: 15px !important;
}
}
/* ============================================================
16. DARK MODE — Base: #221f20
All white/light backgrounds flip to dark.
Text tokens updated via :root so var(--heading) propagates.
Accordion (red) and brand blue stay untouched.
============================================================ */
/* ── Token overrides ── */
:root {
--cream: #221f20; /* Main page background — dark base */
--heading: #f0ebe3; /* All headings + primary text — warm off-white */
--sh-gray: #4a4547; /* Borders, dividers */
--bg-surface: #2d2a2b; /* Sections that were #f9f9f9 */
--bg-card: #332f30; /* Cards that were #ffffff */
}
/* ── Page & structural backgrounds ── */
body,
.main-view,
.react-main,
.main-app-container,
.home-custom-css,
.speakers-custom-css,
.main-view.footer-padding-confirmation,
.editor-home-page {
background-color: #221f20 !important;
}
/* ── Navigation bar ── */
.template-nav,
.navbar,
.nav-bar,
[class*="navbar"] {
background-color: #000000 !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.navbar-collapse,
#bs-example-navbar-collapse-1 {
background-color: #000000 !important;
border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.navbar-toggle .icon-bar {
background-color: #f0ebe3 !important;
}
.navbar-toggle {
border-color: rgba(255,255,255,0.2) !important;
}
/* ── CTA / Register buttons — white on dark ── */
.btn-register,
button.atom-main.btn.btn-success.btn-register {
background-color: #ffffff !important;
border: 2px solid #ffffff !important;
color: #221f20 !important;
}
.btn-register:hover,
button.atom-main.btn.btn-success.btn-register:hover {
background-color: #f0ebe3 !important;
border-color: #f0ebe3 !important;
color: #221f20 !important;
}
/* ── Event header ── */
.event-header,
[class*="header-section"] {
background-color: #221f20 !important;
}
/* ── Speaker section (home page) ── */
/* Gradient on outer wrappers: #221f20 at the bottom fades up to true black */
.section-speakers,
.section-speakers,
.rowHolder.speakers {
background: linear-gradient(to top, #221f20 0%, #000000 60%) !important;
}
/* Inner containers transparent so gradient shows through */
.section-speakers .main-app-container,
.section-speakers .attendees-faces,
.section-speakers .main-app-container,
.rowHolder.speakers .main-app-container,
.rowHolder.speakers .attendees-faces {
background: transparent !important;
background-color: transparent !important;
}
.rowHolder.speakers h2.atom-main,
.rowHolder.speakers h2.custom-font {
color: #f0ebe3 !important;
}
.rowHolder.speakers .atom-fullname,
.rowHolder.speakers .attendee-name {
color: #f0ebe3 !important;
}
.rowHolder.speakers .atom-text1,
.rowHolder.speakers .attendee-title {
color: #b8b0aa !important;
}
.rowHolder.speakers .atom-text1::after,
.rowHolder.speakers .attendee-title::after {
color: #b8b0aa !important;
}
.rowHolder.speakers .atom-text2,
.rowHolder.speakers .attendee-company {
color: #b8b0aa !important;
}
/* Speaker photo backdrop.
* Not all speaker photos are opaque — some are cut-out PNGs with transparent
* backgrounds (currently Aaron Rubin and Nabil Malouli; the other eight are
* opaque JPGs). The old flat #3d3839 showed through those as a dead gray box.
* A subtle dark brand gradient instead reads as a deliberate studio backdrop,
* stays aligned to the hex, and is completely hidden behind opaque photos.
* Also doubles as the placeholder for speakers with no photo uploaded. */
.rowHolder.speakers .object-trade-thumbnail,
.rowHolder.speakers .entity-photo-holder > a {
background-color: transparent !important;
background-image: linear-gradient(160deg, #2c3f63 0%, #221f20 55%, #3a2a2c 100%) !important;
background-size: 100% 100% !important;
background-repeat: no-repeat !important;
}
/* ── Location / Map / Venue section ── */
.location-section,
[class*="location"],
[class*="venue"]:not(.date-venue-holder):not(.date-venue-wrapper):not(.virtual-venue-banner--trade),
.rowHolder.eventvenue {
background-color: #221f20 !important;
}
[class*="location"] h1,
[class*="location"] h2,
[class*="location"] h3,
[class*="location"] p,
[class*="venue"]:not(.date-venue-holder):not(.date-venue-wrapper) h2,
[class*="venue"]:not(.date-venue-holder):not(.date-venue-wrapper) p {
color: #f0ebe3 !important;
}
.rowHolder.eventvenue h2,
.rowHolder.eventvenue h2.atom-main,
.rowHolder.eventvenue h2.custom-font,
.map-address h2.atom-main {
color: #f0ebe3 !important;
}
.map-address .venue-information,
.map-address .venue-name,
.map-address .venue-information p,
.map-address p,
.rowHolder.eventvenue .atom-main,
.rowHolder.eventvenue [class*="element-"],
[class*="venue"]:not(.date-venue-holder):not(.date-venue-wrapper) p {
color: #b8b0aa !important;
}
.google-map-holder {
background-color: #2d2a2b !important;
border: 1px solid rgba(255,255,255,0.1) !important;
box-shadow: none !important;
}
/* ── Countdown ── */
.section-countdownClock .count-number {
color: #f0ebe3 !important;
}
.section-countdownClock .count-unit {
color: #7a7470 !important;
}
.section-countdownClock .count-container::before,
.section-countdownClock .count-container::after {
background: rgba(255,255,255,0.12) !important;
}
/* ── Download App — pure black section ── */
#section-7719482,
.section-downloadApp,
[class*="event-app"],
.download-app-section {
background-color: #000000 !important;
}
.rowHolder.downloadapp {
background-color: #000000 !important;
}
#section-7719482 h2::after,
.rowHolder.downloadapp h2::after {
color: #f0ebe3 !important;
}
.download-buttons-holder a {
background-color: #332f30 !important;
border: 1px solid rgba(255,255,255,0.1) !important;
box-shadow: none !important;
}
.download-buttons-holder a:hover {
border-color: rgba(255,255,255,0.25) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
.js-download-ios::after,
.js-download-android::after {
color: #f0ebe3 !important;
}
/* Download badge — white pill on dark card */
.download-buttons-holder a img {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='34'%3E%3Crect rx='4' ry='4' width='98' height='34' fill='white'/%3E%3Ctext x='49' y='23' font-size='13' font-family='Space%20Grotesk%2C sans-serif' fill='%23221f20' text-anchor='middle' font-weight='900' letter-spacing='-0.14'%3EDownload%3C%2Ftext%3E%3C/svg%3E") !important;
}
/* ── Agenda Overview — transparent (background image set in Bizzabo) ── */
.agenda_overview,
.agenda_overview .main-app-container,
.agenda_overview .main-view,
.agenda_overview .rowHolder {
background-color: transparent !important;
}
/* ── Agenda Experience — dark surface ── */
.agenda_experience,
.agenda_experience .main-app-container,
.agenda_experience .main-view,
.agenda_experience .rowHolder {
background-color: transparent !important;
}
.agenda_overview h2.atom-main,
.agenda_overview h2.custom-font,
.agenda_experience h2.atom-main,
.agenda_experience h2.custom-font {
color: #f0ebe3 !important;
}
.agenda_overview td:first-child h3,
.agenda_experience td:first-child h3 {
color: #f0ebe3 !important;
}
.agenda_overview td:last-child p,
.agenda_experience td:last-child p {
color: #b8b0aa !important;
}
.agenda_overview td:last-child strong,
.agenda_experience td:last-child strong,
.agenda_overview td:last-child > strong,
.agenda_experience td:last-child > strong {
color: #f0ebe3 !important;
}
.agenda_overview tr,
.agenda_experience tr {
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.agenda_experience td:last-child {
border-left: none !important;
}
/* ── Agenda Overview — gradient vertical divider ── */
/* Remove the old solid border-left on td:last-child */
.agenda_overview td:last-child {
border-left: none !important;
}
/* The pseudo-element goes on the classless div that wraps the table,
* NOT on a or | — avoids table formatting context issues.
* top:0 / bottom:0 stretches it the full table height automatically. */
#section-8152946 .element-38538142 > div,
.agenda_overview .element-38538142 > div {
position: relative !important;
}
#section-8152946 .element-38538142 > div::after,
.agenda_overview .element-38538142 > div::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 303px !important;
width: 4px !important;
background: linear-gradient(
to bottom,
#4287ff 0%,
#324f80 25%,
#000000 50%,
#ef5c59 75%,
#f6b808 100%
) !important;
pointer-events: none !important;
}
/* Hide the divider on mobile when table stacks vertically */
@media (max-width: 640px) {
#section-8152946 .element-38538142 > div::after,
.agenda_overview .element-38538142 > div::after {
display: none !important;
}
}
/* ── Request an Invite form ── */
.section-7736135,
.trade-template.section-7736135,
.section-7736135 > div,
.rowHolder.submission-form,
.rowHolder.submission-form .atom-sectionSecondary,
.rowHolder.submission-form .main-app-container {
background-color: #000000 !important;
}
.rowHolder.submission-form h2,
#section-7736135 h2 {
color: #f0ebe3 !important;
}
.rowHolder.submission-form input[type="text"],
.rowHolder.submission-form input[type="email"],
.rowHolder.submission-form input[type="tel"],
.rowHolder.submission-form select,
.rowHolder.submission-form textarea {
background-color: #1a1a1a !important;
color: #f0ebe3 !important;
border: 1px solid rgba(255,255,255,0.2) !important;
}
.rowHolder.submission-form input::placeholder,
.rowHolder.submission-form textarea::placeholder {
color: #7a7470 !important;
}
#section-7736135 .btn.btn-form-dropdown,
#section-7736135 .btn.dropdown-toggle.form-control,
.rowHolder.submission-form .btn.btn-form-dropdown,
.rowHolder.submission-form .btn.dropdown-toggle.form-control {
background-color: #1a1a1a !important;
border: 1px solid rgba(255,255,255,0.2) !important;
color: #f0ebe3 !important;
}
#section-7736135 .btn.btn-form-dropdown:hover,
#section-7736135 .btn.btn-form-dropdown:focus,
#section-7736135 .btn.dropdown-toggle.form-control:hover,
#section-7736135 .btn.dropdown-toggle.form-control:focus {
background-color: #332f30 !important;
border-color: var(--sh-blue) !important;
color: #f0ebe3 !important;
}
/* Submit button — white on dark */
/* Bizzabo renders the CTA as type="button" + color-1-background class (not type="submit") */
/* Need (0,4,0) specificity to beat color-1-background at (0,1,0) since Bizzabo loads after */
.rowHolder.submission-form button[type="submit"],
.rowHolder.submission-form .btn-submit,
.rowHolder.submission-form .cta-button,
.rowHolder.submission-form input[type="submit"],
.rowHolder.submission-form .btn.btn-success.btn-register,
.rowHolder.submission-form button.btn.btn-register,
#section-7736135 .btn:not(.btn-form-dropdown):not(.dropdown-toggle),
#section-7736135 button:not(.btn-form-dropdown):not(.dropdown-toggle) {
background-color: #ffffff !important;
border-color: #ffffff !important;
color: #221f20 !important;
}
.rowHolder.submission-form button[type="submit"]:hover,
.rowHolder.submission-form .btn-submit:hover,
.rowHolder.submission-form .btn.btn-success.btn-register:hover,
.rowHolder.submission-form button.btn.btn-register:hover,
#section-7736135 .btn:not(.btn-form-dropdown):not(.dropdown-toggle):hover,
#section-7736135 button:not(.btn-form-dropdown):not(.dropdown-toggle):hover {
background-color: #f0ebe3 !important;
border-color: #f0ebe3 !important;
}
#section-7736135 a:not(.btn):not(.btn-register),
.rowHolder.submission-form a:not(.btn):not(.btn-register) {
color: #f0ebe3 !important;
text-decoration-color: rgba(240,235,227,0.35) !important;
}
#section-7736135 a:not(.btn):not(.btn-register):hover,
.rowHolder.submission-form a:not(.btn):not(.btn-register):hover {
color: #f0ebe3 !important;
text-decoration-color: #f0ebe3 !important;
}
/* ── Agenda page ── */
.agenda-custom-css,
.agenda-view {
background-color: #221f20 !important;
}
.agenda-search .search-input input,
.agenda-view input,
.agenda-view select {
background-color: #2d2a2b !important;
color: #f0ebe3 !important;
border-color: rgba(255,255,255,0.2) !important;
}
.session-container {
background-color: #2d2a2b !important;
border-color: rgba(255,255,255,0.1) !important;
}
.session-title,
.agenda-view .session-list-container .session-day-container .time-row
.session-elem .session-container .session-name a {
color: #f0ebe3 !important;
}
.event-day-part,
.session-info-text-light {
color: #b8b0aa !important;
}
/* Active tab — swap black underline to brand red */
.tab-button-border {
border-bottom: 3px solid var(--sh-red) !important;
}
.color-1-background,
.tab-button-border.custom-color.color-1-background,
.full-agenda-btn.color-1-background,
.day-elem-border.selected {
background-color: var(--sh-red) !important;
}
/* Day tab active indicator — brand orange (higher specificity than rule above) */
.agenda-view .day-elem-border.selected,
.agenda-view .day-elem-border.color-1-background {
background-color: #f5893c !important;
}
/* Speaker info on session cards — dark text needs to be light on dark bg */
.agenda-view .speaker-name,
.agenda-view .speaker-title,
.agenda-view .speaker-company {
color: #f0ebe3 !important;
}
/* Speaker slide link — remove Bizzabo accent blue */
.agenda-view a.speaker-slide,
.agenda-view a.speaker-slide .speaker-info,
.agenda-view a.speaker-slide .speaker-name,
.agenda-view a.speaker-slide .speaker-title,
.agenda-view a.speaker-slide .speaker-company {
color: #f0ebe3 !important;
text-decoration: none !important;
}
/* Sessions filter dropdown button — white bg on dark page needs dark treatment */
.agenda-view .bz-hoc-filter .btn,
.agenda-view .bz-hoc-filter button {
background-color: #2d2a2b !important;
color: #f0ebe3 !important;
border: 1px solid rgba(255,255,255,0.2) !important;
}
.agenda-view .bz-hoc-filter .btn:hover,
.agenda-view .bz-hoc-filter button:hover {
background-color: #3a3637 !important;
border-color: rgba(255,255,255,0.35) !important;
}
/* Dropdown caret inside filter button */
.agenda-view .bz-hoc-filter .caret,
.agenda-view .bz-hoc-filter .fa-caret-down {
color: #f0ebe3 !important;
border-top-color: #f0ebe3 !important;
}
/* Logout / CTA buttons in the agenda header — dark with light text */
.agenda-view .cta-button.cta-button-medium {
background-color: #2d2a2b !important;
border: 1px solid rgba(255,255,255,0.2) !important;
color: #f0ebe3 !important;
}
.agenda-view .cta-button.cta-button-medium:hover {
background-color: #3a3637 !important;
border-color: rgba(255,255,255,0.35) !important;
}
/* ── Sponsors / Exhibitors headings ── */
.rowHolder.sponsors h2.atom-main,
.rowHolder.sponsors h2.custom-font,
.rowHolder.exhibitors h2.atom-main,
.rowHolder.exhibitors h2.custom-font {
color: #f0ebe3 !important;
}
/* ── Speaker detail page ── */
.speaker-view {
background-color: #221f20 !important;
}
.speaker-view .speaker-background,
.speaker-view .speaker-background.custom-color,
.speaker-view .speaker-background.short-background,
.speaker-background.full-width {
background-color: #2d2a2b !important;
}
.speaker-view .speaker-name,
.speaker-view h1.speaker-name {
color: #f0ebe3 !important;
}
.speaker-view .speaker-position,
.speaker-view .speaker-position::after,
.speaker-view .speaker-company {
color: #b8b0aa !important;
}
.speaker-view .speaker-description,
.speaker-view .speaker-bio,
.speaker-view .preview-speaker-description {
color: #b8b0aa !important;
}
.speaker-view .speaker-sessions h3,
.speaker-view .speaker-sessions-title {
color: #f0ebe3 !important;
}
.speaker-view .speaker-sessions a {
color: #f0ebe3 !important;
text-decoration-color: rgba(240,235,227,0.35) !important;
}
.speaker-view .speaker-back-button {
background-color: #ffffff !important;
border: 2px solid #ffffff !important;
color: #221f20 !important;
}
.speaker-view .speaker-back-button:hover {
background-color: #f0ebe3 !important;
border-color: #f0ebe3 !important;
}
/* ── Checkbox (iCheck widget) — dark mode ── */
.rowHolder.submission-form .icheckbox_square-grey,
#section-7736135 .icheckbox_square-grey {
background-image: none !important;
background-color: transparent !important;
border: 1.5px solid rgba(255,255,255,0.35) !important;
border-radius: 3px !important;
width: 18px !important;
height: 18px !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
cursor: pointer !important;
transition: border-color 0.15s, background-color 0.15s !important;
}
.rowHolder.submission-form .icheckbox_square-grey:hover,
#section-7736135 .icheckbox_square-grey:hover {
border-color: rgba(255,255,255,0.65) !important;
}
.rowHolder.submission-form .icheckbox_square-grey.checked,
#section-7736135 .icheckbox_square-grey.checked {
background-color: var(--sh-red) !important;
border-color: var(--sh-red) !important;
}
/* Checkmark via ::after */
.rowHolder.submission-form .icheckbox_square-grey.checked::after,
#section-7736135 .icheckbox_square-grey.checked::after {
content: '' !important;
display: block !important;
width: 5px !important;
height: 9px !important;
border-right: 2px solid #fff !important;
border-bottom: 2px solid #fff !important;
transform: rotate(45deg) translateY(-1px) !important;
}
/* Hide iCheck's internal overlay */
.rowHolder.submission-form .icheckbox_square-grey ins,
#section-7736135 .icheckbox_square-grey ins {
display: none !important;
}
/* Legal label text — fix dark color on dark bg */
.rowHolder.submission-form .legal-terms,
.rowHolder.submission-form .js-legal-terms,
#section-7736135 .legal-terms,
#section-7736135 .js-legal-terms {
color: #b8b0aa !important;
}
.rowHolder.submission-form .legal-terms > div,
.rowHolder.submission-form .js-legal-terms > div,
#section-7736135 .legal-terms > div {
color: #b8b0aa !important;
}
/* ── Custom ShipHero footer ── */
.section.footer.section-2 {
background-color: #221f20 !important;
}
.section.footer .footer_label {
color: #7a7470 !important;
}
.section.footer .footer_link {
color: #b8b0aa !important;
}
.section.footer .footer_link:hover,
.section.footer .footer_link.black {
color: #f0ebe3 !important;
}
.section.footer .footer_last {
border-top: 1px solid rgba(255,255,255,0.1) !important;
}
.section.footer .footer-copyright {
color: #7a7470 !important;
}
/* ── About the Event — warm gradient background (full bleed) ── */
/* Gradient lives on the outermost wrapper only */
/* .about_event class sits on the section-ID wrapper, which has no rowHolder class */
/* Negative margins break out of the sections-holder 15px gutter for true full-bleed */
#section-7736069,
.about_event {
background: linear-gradient(to top right, #f5893c 0%, #ef5050 100%) !important;
margin-left: -15px !important;
margin-right: -15px !important;
width: calc(100% + 30px) !important;
box-sizing: border-box !important;
}
/* All inner containers must be transparent so gradient shows through */
#section-7736069 .main-app-container,
#section-7736069 .atom-sectionSecondary,
#section-7736069 .container,
#section-7736069 .row,
#section-7736069 > div,
.about_event .main-app-container,
.about_event .atom-sectionSecondary,
.about_event .container,
.about_event .row,
.about_event > div {
background: transparent !important;
background-color: transparent !important;
}
/* Text on gradient — pure white for contrast */
#section-7736069 h2,
#section-7736069 h3,
#section-7736069 p,
.about_event h2.atom-main,
.about_event h2.custom-font,
.about_event h3,
.about_event p {
color: #ffffff !important;
}
/* ── Custom Hero section (section-8245012 / .custom-hero) ── */
/*
* Simplified layout: all copy is now in col-sm-6:first-child alongside the logo.
* element-groups becomes a flex row — left 60% text, right 40% logo.
* align-items: stretch makes the logo column the same height as the text automatically.
*/
/* Strip all backgrounds — bg-image lives on the rowHolder inline style */
#section-8245012 .rowHolder,
#section-8245012 .html-container,
#section-8245012 .main-app-container,
#section-8245012 .element-groups,
.custom-hero .rowHolder,
.custom-hero .html-container,
.custom-hero .main-app-container,
.custom-hero .element-groups {
background-color: transparent !important;
}
/* rowHolder: let Bootstrap's -15px negative margins fill the full viewport width.
* Do NOT set width/max-width — that would lock it to the section width and
* leave a 30px gap on the right where the background image won't reach. */
#section-8245012 .rowHolder,
.custom-hero .rowHolder {
box-sizing: border-box !important;
padding: 60px 0 !important;
}
/* main-app-container: constrained to 1090px (matches all other sections) and centered */
#section-8245012 .main-app-container,
.custom-hero .main-app-container {
width: 100% !important;
max-width: 1090px !important;
margin: 0 auto !important;
padding: 0 45px !important;
box-sizing: border-box !important;
}
/* element-groups: 60/40 flex row, columns same height */
#section-8245012 .element-groups,
.custom-hero .element-groups {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
width: 100% !important;
margin: 0 !important; /* kill Bootstrap row negative margin */
}
/* Kill Bootstrap clearfix pseudo-elements */
#section-8245012 .element-groups::before,
#section-8245012 .element-groups::after,
.custom-hero .element-groups::before,
.custom-hero .element-groups::after {
display: none !important;
}
/* Left column — text (60%) */
#section-8245012 .element-groups .col-sm-6:first-child,
.custom-hero .element-groups .col-sm-6:first-child {
flex: 0 0 60% !important;
width: 60% !important;
max-width: 60% !important;
float: none !important;
padding: 0 48px 0 0 !important; /* right gap separating text from logo */
box-sizing: border-box !important;
background-color: transparent !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* Right column — logo (40%) */
#section-8245012 .element-groups .col-sm-6:last-child,
.custom-hero .element-groups .col-sm-6:last-child {
flex: 1 1 auto !important;
width: 40% !important;
float: none !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: transparent !important;
}
/* Logo img: fill column height, proportional width */
#section-8245012 .element-groups .col-sm-6:last-child img,
.custom-hero .element-groups .col-sm-6:last-child img {
height: 100% !important;
width: auto !important;
max-width: 100% !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
}
/* ── Typography ── */
#section-8245012 h1, #section-8245012 h2,
.custom-hero h1, .custom-hero h2 {
font-family: 'Dela Gothic One', sans-serif !important;
font-size: clamp(32px, 4vw, 64px) !important;
font-weight: 400 !important;
color: #ffffff !important;
line-height: 1.05 !important;
letter-spacing: -1px !important;
text-transform: none !important;
text-align: left !important;
margin: 0 0 20px !important;
padding: 0 !important;
}
#section-8245012 p:first-of-type,
.custom-hero p:first-of-type {
font-family: 'Space Grotesk', sans-serif !important;
font-size: 17px !important;
font-weight: 600 !important;
color: #ffffff !important;
text-align: left !important;
margin: 0 0 10px !important;
}
#section-8245012 p,
.custom-hero p {
font-family: 'Space Grotesk', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: rgba(255,255,255,0.75) !important;
line-height: 1.6 !important;
text-align: left !important;
margin: 0 !important;
}
/* ── Mobile: stack vertically ── */
@media (max-width: 768px) {
#section-8245012 .rowHolder,
.custom-hero .rowHolder {
padding: 40px 0 !important;
}
#section-8245012 .main-app-container,
.custom-hero .main-app-container {
padding: 0 20px !important;
}
#section-8245012 .element-groups,
.custom-hero .element-groups {
flex-direction: column !important;
align-items: flex-start !important;
}
#section-8245012 .element-groups .col-sm-6:first-child,
.custom-hero .element-groups .col-sm-6:first-child {
flex: none !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 0 32px 0 !important;
}
#section-8245012 .element-groups .col-sm-6:last-child,
.custom-hero .element-groups .col-sm-6:last-child {
width: 60% !important;
align-self: center !important;
}
#section-8245012 .element-groups .col-sm-6:last-child img,
.custom-hero .element-groups .col-sm-6:last-child img {
height: auto !important;
width: 100% !important;
}
#section-8245012 h1, #section-8245012 h2,
.custom-hero h1, .custom-hero h2 {
font-size: 32px !important;
}
}
/* All inner wrappers must be transparent so image shows through */
#section-8152945 .main-app-container,
#section-8152945 .main-view,
#section-8152945 .atom-sectionSecondary,
#section-8152945 > div,
.hero_custom .main-app-container,
.hero_custom .main-view,
.hero_custom .atom-sectionSecondary,
.hero_custom > div {
background: transparent !important;
background-color: transparent !important;
}
/* Text on image — white for legibility */
#section-8152945 h1,
#section-8152945 h2,
#section-8152945 h3,
#section-8152945 p,
#section-8152945 span,
.hero_custom h1,
.hero_custom h2,
.hero_custom h3,
.hero_custom p,
.hero_custom span {
color: #ffffff !important;
text-shadow: none !important;
}
/* ── Agenda Experience decorative images ──────────────────────────────────
* Robot (.element-38538141): absolute, bottom-left (heading column area)
* HORIZON logo (.element-38538147): absolute, right side, rotated 90° CW
* Feature table (.element-38538145 col): expands to fill full width
* ──────────────────────────────────────────────────────────────────────── */
/* main-app-container becomes the positioning context — constrained to a
max-width and centered, same pattern Bizzabo uses for all other sections */
.agenda_experience .main-app-container {
position: relative !important;
overflow: visible !important;
max-width: 1200px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
gap: 24px !important;
}
/* element-groups must be static so absolute children bubble up to
main-app-container rather than stopping here */
.agenda_experience .element-groups {
position: static !important;
overflow: visible !important;
}
/* Bizzabo regrouped to col-sm-6 (2 cols) after logo was removed.
col-sm-6:nth-child(1) = robot, col-sm-6:nth-child(2) = feature table */
/* Feature table col — full width now that robot is out of flow */
.agenda_experience .element-groups > .col-sm-6:nth-child(2) {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
float: none !important;
}
/* ── Robot: absolute, bottom-left of the constrained content area ── */
.agenda_experience .element-groups > .col-sm-6:nth-child(1) {
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 38% !important;
padding: 0 !important;
pointer-events: none !important;
overflow: visible !important;
}
.agenda_experience img.element-38538141 {
width: 100% !important;
height: auto !important;
display: block !important;
}
/* Mobile: robot drops into normal flow below the table content */
@media (max-width: 768px) {
.agenda_experience .element-groups {
display: flex !important;
flex-direction: column !important;
}
.agenda_experience .element-groups > .col-sm-6:nth-child(1) {
position: relative !important;
left: auto !important;
bottom: auto !important;
width: 80% !important;
margin: 0 auto !important;
order: 2 !important;
}
.agenda_experience .element-groups > .col-sm-6:nth-child(2) {
order: 1 !important;
width: 100% !important;
}
}
/* ── Speaker card mask — taller version ──────────────────────────────────
* Original viewBox: 1331.35 × 1474.68, straight vertical segments: v491.41
* Modified: +300px to straight segments only → v791.41, height → 1774.68
* All curves (top angles, bottom angles, corner beziers) are unchanged.
* ──────────────────────────────────────────────────────────────────────── */
/* Disable speaker image links — no click, no hand cursor */
.section-speakers a {
pointer-events: none !important;
cursor: default !important;
}
/* Mask ONLY on the anchor — tall viewBox hex.
Bizzabo's .rowHolder.speakers .entity-photo-holder > a (0,2,1) applies the old
short hex mask and loads AFTER our custom CSS, so matching specificity isn't
enough — we need to beat it. (0,4,1) via the full ancestor chain wins cleanly. */
.section-speakers .rowHolder.speakers .entity-photo-holder > a {
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1774.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v791.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-791.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1774.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v791.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-791.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
height: 293px !important;
width: 220px !important;
aspect-ratio: auto !important;
display: block !important;
}
/* Remove mask from inner image. Shift left 20px to center the hardcoded
260px image within the 220px anchor — the hex mask clips the overflow.
We use a 5-class selector (0,5,0) to beat Bizzabo's platform CSS now that
we're no longer using an ID selector. min-height/max-height lock the height
independently in case a competing rule wins the `height` property itself. */
.section-speakers .rowHolder.speakers .entity-photo-holder .object-trade-thumbnail {
mask: none !important;
-webkit-mask: none !important;
mask-image: none !important;
-webkit-mask-image: none !important;
aspect-ratio: auto !important;
height: 293px !important;
min-height: 293px !important;
max-height: 293px !important;
width: 260px !important;
margin-left: -20px !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
}
/* ── Speaker hex tilts ───────────────────────────────────────────────────
* Rotate the element to tilt the hex mask shape.
* Counter-rotate the image inside so the photo stays upright.
* Hover smoothly straightens the card back to 0deg.
* A ::before on the holder provides a red hex shadow, same tilt, offset.
* ──────────────────────────────────────────────────────────────────────── */
/* Holder needs relative positioning for the shadow pseudo-element */
.section-speakers .entity-photo-holder {
position: relative !important;
}
/* Photo anchor sits above the shadow */
.section-speakers a {
position: relative !important;
z-index: 1 !important;
}
/* Red hex shadow — lives on the holder so it isn't clipped by the 's mask */
.section-speakers .entity-photo-holder::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 220px !important;
height: 293px !important;
background: linear-gradient(160deg, #4287FF 0%, #324F80 28%, #000000 50%, #EF5C59 75%, #F6B808 100%) !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1774.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v791.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-791.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1774.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v791.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-791.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
z-index: 0 !important;
transform-origin: center center !important;
pointer-events: none !important;
transition: transform 0.35s ease !important;
}
.section-speakers .entity-photo-holder a {
transition: transform 0.35s ease !important;
transform-origin: center center !important;
}
.section-speakers .entity-photo-holder .object-trade-thumbnail {
transition: transform 0.35s ease !important;
transform-origin: center center !important;
}
/* Hover: straighten both card and shadow */
.section-speakers .entity-photo-holder:hover a {
transform: rotate(0deg) !important;
}
.section-speakers .entity-photo-holder:hover a .object-trade-thumbnail {
transform: rotate(0deg) !important;
}
.section-speakers .entity-photo-holder:hover::before {
transform: rotate(0deg) !important;
}
/* Per-card: rotate , counter-rotate image, offset shadow behind */
/* Shadow transform = same rotation as card + translate to peek out */
.section-speakers .entity-photo-holder:nth-child(1) a { transform: rotate(-3deg) !important; }
.section-speakers .entity-photo-holder:nth-child(1) .object-trade-thumbnail { transform: rotate(3deg) !important; }
.section-speakers .entity-photo-holder:nth-child(1)::before { transform: translate(-7px, 8px) rotate(-3deg) !important; }
.section-speakers .entity-photo-holder:nth-child(2) a { transform: rotate(2.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(2) .object-trade-thumbnail { transform: rotate(-2.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(2)::before { transform: translate(8px, 7px) rotate(2.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(3) a { transform: rotate(-1.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(3) .object-trade-thumbnail { transform: rotate(1.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(3)::before { transform: translate(-5px, 9px) rotate(-1.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(4) a { transform: rotate(3.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(4) .object-trade-thumbnail { transform: rotate(-3.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(4)::before { transform: translate(9px, 6px) rotate(3.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(5) a { transform: rotate(-2deg) !important; }
.section-speakers .entity-photo-holder:nth-child(5) .object-trade-thumbnail { transform: rotate(2deg) !important; }
.section-speakers .entity-photo-holder:nth-child(5)::before { transform: translate(-6px, 8px) rotate(-2deg) !important; }
.section-speakers .entity-photo-holder:nth-child(6) a { transform: rotate(1.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(6) .object-trade-thumbnail { transform: rotate(-1.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(6)::before { transform: translate(7px, 9px) rotate(1.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(7) a { transform: rotate(-4deg) !important; }
.section-speakers .entity-photo-holder:nth-child(7) .object-trade-thumbnail { transform: rotate(4deg) !important; }
.section-speakers .entity-photo-holder:nth-child(7)::before { transform: translate(-8px, 7px) rotate(-4deg) !important; }
.section-speakers .entity-photo-holder:nth-child(8) a { transform: rotate(2deg) !important; }
.section-speakers .entity-photo-holder:nth-child(8) .object-trade-thumbnail { transform: rotate(-2deg) !important; }
.section-speakers .entity-photo-holder:nth-child(8)::before { transform: translate(6px, 8px) rotate(2deg) !important; }
.section-speakers .entity-photo-holder:nth-child(9) a { transform: rotate(-1deg) !important; }
.section-speakers .entity-photo-holder:nth-child(9) .object-trade-thumbnail { transform: rotate(1deg) !important; }
.section-speakers .entity-photo-holder:nth-child(9)::before { transform: translate(-4px, 9px) rotate(-1deg) !important; }
.section-speakers .entity-photo-holder:nth-child(10) a { transform: rotate(3deg) !important; }
.section-speakers .entity-photo-holder:nth-child(10) .object-trade-thumbnail { transform: rotate(-3deg) !important; }
.section-speakers .entity-photo-holder:nth-child(10)::before { transform: translate(8px, 7px) rotate(3deg) !important; }
.section-speakers .entity-photo-holder:nth-child(11) a { transform: rotate(-2.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(11) .object-trade-thumbnail { transform: rotate(2.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(11)::before { transform: translate(-7px, 8px) rotate(-2.5deg) !important; }
.section-speakers .entity-photo-holder:nth-child(12) a { transform: rotate(1deg) !important; }
.section-speakers .entity-photo-holder:nth-child(12) .object-trade-thumbnail { transform: rotate(-1deg) !important; }
.section-speakers .entity-photo-holder:nth-child(12)::before { transform: translate(5px, 9px) rotate(1deg) !important; }
/* ============================================================
SPEAKER DETAIL PAGE — img.speaker-image-stub
Standard image — no hex mask, no tilt, no shadow
============================================================ */
/* Explicitly clear any mask Bizzabo may apply, restore natural rendering */
img.speaker-image-stub {
mask: none !important;
-webkit-mask: none !important;
transform: none !important;
}
/* ── Speaker detail page — dark theme ───────────────────────────────────── */
/* Body on speaker page has Bizzabo's color-1-background-opacity (#221f20) — force black */
body.color-1-background-opacity {
background-color: #000000 !important;
background: #000000 !important;
}
.speaker-view,
.speaker-background,
.speaker-container,
.speaker-profile {
background-color: #000000 !important;
background: #000000 !important;
}
/* Hero strip at top of speaker page — black, full opacity.
Bizzabo's .custom-color rule beats 2-class selectors, so use 3+ classes for specificity */
.custom-color.speaker-background.short-background,
.custom-color.speaker-background.full-width,
.speaker-view .speaker-background.short-background,
.speaker-view .speaker-background {
background-color: #000000 !important;
background: #000000 !important;
opacity: 1 !important;
}
/* Text — white on black */
.speaker-profile h1,
.speaker-profile h2,
.speaker-profile h3,
.speaker-profile p,
.speaker-profile span,
.speaker-profile a,
.speaker-bio-wrapper h1,
.speaker-bio-wrapper h2,
.speaker-bio-wrapper h3,
.speaker-bio-wrapper p,
.speaker-bio-wrapper span {
color: #ffffff !important;
}
/* Speaker name — keep Dela Gothic One styling */
.speaker-profile .speaker-name,
.speaker-profile [class*="speaker-name"],
.speaker-profile h1 {
font-family: 'Dela Gothic One', Georgia, serif !important;
color: #ffffff !important;
}
/* Back button — Bizzabo applies color-1-background (white) which makes the text invisible.
Override to a dark pill with white text/icon. */
.speaker-back-button,
.speaker-back-button.color-1-background {
background-color: rgba(255,255,255,0.12) !important;
border: 1px solid rgba(255,255,255,0.3) !important;
border-radius: 4px !important;
}
.speaker-back-button .speaker-back-button-label,
.speaker-back-button-label {
color: #ffffff !important;
}
.speaker-back-arrow,
.speaker-back-button .fa,
.speaker-back-button [class*="icon-"] {
color: #ffffff !important;
}
/* Share button — similar issue */
.speaker-share-button,
.speaker-share-button.color-5-background {
background-color: rgba(255,255,255,0.12) !important;
border: 1px solid rgba(255,255,255,0.3) !important;
border-radius: 4px !important;
color: #ffffff !important;
}
.speaker-share-button span,
.speaker-share-button .fa,
.speaker-share-button [class*="icon-"] {
color: #ffffff !important;
}
/* ============================================================
CUSTOM APP STORE SECTION (.custom-appstore)
============================================================ */
/* Black background — section + all wrappers */
.custom-appstore,
.custom-appstore .rowHolder,
.custom-appstore .main-app-container,
.custom-appstore .atom-sectionMain {
background-color: #000000 !important;
background: #000000 !important;
}
/* Heading — white, no all-caps */
.custom-appstore h2 {
color: #ffffff !important;
text-transform: none !important;
}
/* App icon image — rounded corners, centred */
.custom-appstore img {
max-width: 160px !important;
width: 160px !important;
height: 160px !important;
border-radius: 28px !important;
display: block !important;
margin: 0 auto !important;
object-fit: cover !important;
}
/* Layout — flex row, all three columns vertically centred, no wrapping
Original order: [image col1] [App Store col2] [Google Play col3]
Desired order: [App Store col2] [image col1] [Google Play col3] */
.custom-appstore .element-groups {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: nowrap !important;
gap: 40px !important;
}
/* Override Bootstrap col-sm-4 widths — let flex sizing take over */
.custom-appstore .element-groups > .col-sm-4 {
width: auto !important;
float: none !important;
padding: 0 !important;
}
.custom-appstore .element-groups > .col-sm-4:nth-child(1) { order: 2 !important; } /* image → middle */
.custom-appstore .element-groups > .col-sm-4:nth-child(2) { order: 1 !important; } /* App Store → left */
.custom-appstore .element-groups > .col-sm-4:nth-child(3) { order: 3 !important; } /* Google Play → right */
/* Button links — remove default anchor styling */
.custom-appstore .element-groups a {
text-decoration: none !important;
display: block !important;
}
/* Store buttons — dark pill with white text */
.custom-appstore .btn-custom-element {
background-color: #111111 !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,0.2) !important;
border-radius: 50px !important;
font-family: 'Space Grotesk', Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
padding: 13px 28px 13px 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 200px !important;
margin: 0 auto !important;
transition: background-color 0.25s ease, border-color 0.25s ease !important;
cursor: pointer !important;
}
.custom-appstore .element-groups a:hover .btn-custom-element {
background-color: #222222 !important;
border-color: rgba(255,255,255,0.4) !important;
}
/* Apple logo — exact same SVG as .js-download-ios::before */
.custom-appstore .element-groups > .col-sm-4:nth-child(2) .btn-custom-element::before {
content: '' !important;
display: inline-block !important;
flex-shrink: 0 !important;
width: 20px !important;
height: 20px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='white'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-16.9 75.2-16.9 31.8 0 48.3 16.9 76.4 16.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.1-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
/* Mobile — stack vertically */
@media (max-width: 767px) {
.custom-appstore .element-groups {
flex-direction: column !important;
align-items: center !important;
gap: 24px !important;
}
}
/* Google Play logo — exact same CDN URL as .js-download-android::before */
.custom-appstore .element-groups > .col-sm-4:nth-child(3) .btn-custom-element::before {
content: '' !important;
display: inline-block !important;
flex-shrink: 0 !important;
width: 20px !important;
height: 20px !important;
background-image: url("https://cdn.prod.website-files.com/6915f01ece943af094239ff7/698484768016c6e37648b726_image%20714664650%20(1).svg") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
/* ============================================================
17. AGENDA PAGE — SESSION LIST POLISH
Must load after section 16 (dark mode) to win the cascade.
============================================================ */
/* ── Day group headers ("Wed Sep 16" / "Thu Sep 17") ──
* Were rgb(50,51,60) — near-invisible on the dark background.
* NOTE: Bizzabo emits the inner spans with class "event-day-part$" — a literal
* trailing "$" — so a plain `.event-day-part` selector matches ZERO elements.
* Target .day-title / .day-title-row and use a substring match for the spans. */
.agenda-view .day-title-row,
.agenda-view .day-title,
.agenda-view .day-title span,
.agenda-view [class*="event-day-part"] {
color: #f0ebe3 !important;
font-family: 'Dela Gothic One', Georgia, serif !important;
font-size: 22px !important;
font-weight: 400 !important;
letter-spacing: -0.02em !important;
}
/* ── Remove the dark stripe under session titles ──
* .location-wrapper renders empty but our own global dark-mode rule
* `[class*="location"] { background-color: #221f20 }` painted it, producing a
* 10px dark band across every card. Scope (0,2,0) beats that rule's (0,1,0). */
.agenda-view .location-wrapper {
background-color: transparent !important;
background: transparent !important;
}
.agenda-view .location-wrapper:empty,
.agenda-view .description-container:empty {
display: none !important;
}
/* ── Collapse empty speaker blocks ──
* Bizzabo keeps the .has-speakers class even with no speakers attached, so
* sessions like "Early Bird Badge Pickup" reserved 70px of dead space. */
.agenda-view .speakers-container:empty {
display: none !important;
min-height: 0 !important;
height: 0 !important;
}
/* ── List / grid view toggle ──
* Bizzabo gives both .view-button elements a WHITE background, while the icons
* inside are cream (the active one picks up our own
* `.custom-color.color-1 { color: var(--heading) }` rule, which assumes a dark
* backdrop) and light gray. Cream-on-white and gray-on-white left both icons
* effectively invisible — the control read as a blank white panel.
* Restyled as a dark segmented control matching the search / filter / Logout. */
.agenda-view .view-buttons-container {
display: inline-flex !important;
border: 1px solid rgba(255,255,255,0.2) !important;
border-radius: 4px !important;
overflow: hidden !important;
}
.agenda-view .view-buttons-container .view-button {
background-color: #2d2a2b !important;
border: none !important;
border-radius: 0 !important;
width: 38px !important;
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
transition: background-color 0.15s !important;
}
.agenda-view .view-buttons-container .view-button + .view-button {
border-left: 1px solid rgba(255,255,255,0.2) !important;
}
.agenda-view .view-buttons-container .view-button:hover {
background-color: #3a3637 !important;
}
/* Selected segment reads slightly lighter */
.agenda-view .view-buttons-container .view-button.view-button-active {
background-color: #3a3637 !important;
}
/* Icons: muted when inactive, brand orange when selected */
.agenda-view .view-buttons-container .view-button .icon {
color: #b8b0aa !important;
font-size: 15px !important;
}
.agenda-view .view-buttons-container .view-button.view-button-active .icon,
.agenda-view .view-buttons-container .view-button.view-button-active .icon.custom-color.color-1 {
color: #f5893c !important;
}
/* ── "Sponsored By:" label ──
* Was rgb(50,51,60), same near-invisible slate as the day headers. */
.agenda-view .sponsored-by {
color: #b8b0aa !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
/* ── Hex speaker avatars — matches the home page treatment ──────────────────
* Same tall hex SVG path used by .section-speakers, scaled down to list size
* (46 × 61px keeps the 1331.35 : 1774.68 ratio), plus the brand gradient hex
* offset behind it.
*
* IMPORTANT — two rules elsewhere in this file fight the mask and must be
* neutralised inside .agenda-view or the avatar renders as a red-ringed circle:
* 1. Section 6: `.speaker-photo { border: 3px solid var(--sh-red);
* border-radius: 50% }` → draws a red circle over the hex.
* 2. The old circular-avatar rule that used to live here set
* `border-radius: 50% + overflow: hidden` on .image-holder, clipping the
* image to an ellipse BEFORE the mask, so the hex only revealed the
* gradient in the leftover corners.
* ────────────────────────────────────────────────────────────────────────── */
/* Kill the inherited red ring + circle crop */
.agenda-view .speaker-photo,
.agenda-view .speaker-photo.image-wrapper.round {
border: none !important;
border-radius: 0 !important;
background: transparent !important;
position: relative !important;
width: 46px !important;
min-width: 46px !important;
height: 61px !important;
overflow: visible !important;
margin-right: 14px !important;
}
/* Hex mask on the image holder */
.agenda-view .image-holder.round,
.agenda-view .speaker-photo .image-holder {
position: relative !important;
z-index: 1 !important;
width: 46px !important;
height: 61px !important;
border-radius: 0 !important;
overflow: visible !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1774.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v791.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-791.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1774.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v791.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-791.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
/* Photo fills the hex — no radius, no ring */
.agenda-view .image-holder.round img,
.agenda-view img.round {
width: 46px !important;
height: 61px !important;
border: none !important;
border-radius: 0 !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
}
/* Brand gradient hex peeking out behind, same as the home page cards */
.agenda-view .speaker-photo::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 46px !important;
height: 61px !important;
background: linear-gradient(160deg, #4287FF 0%, #324F80 28%, #000000 50%, #EF5C59 75%, #F6B808 100%) !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1774.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v791.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-791.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1331.35 1774.68'%3E%3Cpath fill='white' d='M541.69,34L119.12,284.56C45.28,328.34,0,407.82,0,493.67v791.41c0,86.46,45.93,166.42,120.61,209.99l422.57,246.5c75.69,44.15,169.29,44.15,244.99,0l422.57-246.5c74.69-43.57,120.61-123.52,120.61-209.99v-791.41c0-85.85-45.28-165.33-119.12-209.11L789.67,34c-76.45-45.33-171.53-45.33-247.98,0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
transform: translate(-4px, 4px) !important;
z-index: 0 !important;
pointer-events: none !important;
}
/* ── Time chips — brand orange, not Bizzabo's salmon rgb(252,139,98) ── */
.agenda-view .time-elem > div {
background-color: #f5893c !important;
color: #ffffff !important;
border-radius: 4px !important;
padding: 5px 10px !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
}
/* ── Card spacing ──
* .session-name carries margin-bottom:-5px which jams the speaker row into
* the session title. Zero it out and add a deliberate gap instead. */
.agenda-view .session-name.custom-font {
margin-bottom: 0 !important;
}
.agenda-view .speakers-container:not(:empty) {
margin-top: 10px !important;
}
.agenda-view .session-container {
padding-bottom: 4px !important;
}
/* ── Agenda page — mobile ─────────────────────────────────────────────────
* Two Bizzabo layout bugs surface below 768px.
* ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* 1. The Logout button and the list/grid toggle live in absolutely
* positioned containers. On desktop the toolbar row is tall enough that
* they land inside it; once the row reflows on mobile they drop out of
* it and sit ON TOP of the first session cards. Return both to normal
* flow so they stack above the day tabs. */
.agenda-view .login-buttons-container,
.agenda-view .view-buttons-container {
position: static !important;
float: none !important;
}
.agenda-view .view-buttons-container.is-pull-left {
display: inline-flex !important;
vertical-align: middle !important;
margin: 12px 10px 0 0 !important;
}
.agenda-view .login-buttons-container {
display: inline-flex !important;
vertical-align: middle !important;
margin-top: 12px !important;
}
/* 2. Sessions with multiple speakers use a Slick carousel. Its track is
* ~735px inside a ~294px viewport and .slick-list doesn't clip, so
* speakers 2+ spill outside the card — and there are no arrows or dots
* at this width to reach them. Unroll the track into a vertical stack. */
.agenda-view .slick-list {
overflow: visible !important;
height: auto !important;
}
.agenda-view .slick-track {
width: 100% !important;
transform: none !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
.agenda-view .slick-slide {
width: 100% !important;
float: none !important;
}
}