/* ─── Fonts ─────────────────────────────────────────────────── */ @font-face { font-family: 'LEMON MILK'; src: url('../assets/fonts/LEMONMILK-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'LEMON MILK'; src: url('../assets/fonts/LEMONMILK-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'LEMON MILK'; src: url('../assets/fonts/LEMONMILK-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'LEMON MILK'; src: url('../assets/fonts/LEMONMILK-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ─── Reset & Base ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Brand colours */ --color-ultrasonic-500: #4F07AF; --color-ultrasonic-800: #2B0460; --color-turquoise-500: #04DDCF; --color-turquoise-800: #027A72; --color-orchid-500: #D93EC7; --color-orchid-800: #BD0DA8; --color-dirt-white: #FFFEFD; --color-white: #FDFDFD; --color-stroke: #59516D; --color-nav-bg: rgba(8, 7, 13, 0.30); --color-body: #010101; --color-text-muted: #B6B5BA; /* Typography */ --font-brand: 'Josefin Sans', sans-serif; --font-display: 'LEMON MILK', 'LEMONMILK', 'Arial Black', sans-serif; --font-size-nav: 16px; --line-height-nav: 1.5; /* Semantic type scale: mobile-first */ --type-h1-size: 40px; --type-h1-lh: 1.02; --type-h1-tracking: 0; --type-h2-size: 32px; --type-h2-lh: 1.05; --type-h2-tracking: 0; --type-h3-size: 22px; --type-h3-lh: 1.12; --type-h4-size: 18px; --type-h4-lh: 1.2; --type-h5-size: 16px; --type-h5-lh: 1.25; --type-h6-size: 14px; --type-h6-lh: 1.3; --type-body-lg-size: 16px; --type-body-lg-lh: 1.6; --type-body-md-size: 14px; --type-body-md-lh: 1.5; --type-body-sm-size: 12px; --type-body-sm-lh: 1.45; --type-label-size: 12px; --type-label-lh: 1.35; --type-label-tracking: 0.06em; --type-meta-size: 13px; --type-meta-lh: 1.4; --type-button-size: 16px; --type-button-lh: 1.5; /* Bootstrap-aligned horizontal padding scale (used by nav + hero body) */ --nav-px: 16px; /* xs < 576 */ /* ── Fluid Hero scale (viewport-proportional) ────────────────── min values = comfortable mobile, max = Figma reference @1920×1080 Sizes scale smoothly with the viewport so they never dominate. */ --hero-headline-size: var(--type-h1-size); --hero-headline-lh: var(--type-h1-lh); --hero-pt: clamp(72px, 30vh, 540px); /* viewport-height driven */ --hero-pb: clamp(40px, 8vh, 100px); --hero-gap: clamp(24px, 3vh, 48px); /* Fluid logo & nav-link type (keeps layout balanced) */ --logo-w: clamp(160px, 16vw, 370px); } .modal-backdrop{ z-index: 999990; } .modal{ z-index: 9999999; } html { scroll-behavior: smooth; } html, body { min-height: 100%; /* grow with content so is the scroll container — required for position:sticky */ background-color: #010101; color: var(--color-white); font-family: var(--font-brand); font-kerning: none; text-rendering: optimizeSpeed; } h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; text-transform: uppercase; font-size: var(--type-h1-size); line-height: var(--type-h1-lh); } h2 { font-family: var(--font-brand); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); font-weight: 400; letter-spacing: 0; } h3, h4, h5, h6 { font-family: var(--font-brand); font-weight: 400; letter-spacing: 0; } h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); } h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); } h5 { font-size: var(--type-h5-size); line-height: var(--type-h5-lh); } h6 { font-size: var(--type-h6-size); line-height: var(--type-h6-lh); } p { font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); } small { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); } .text-highlight-ocean{ color: var(--color-turquoise-500); } .bg__parallax{ height: 120% !important; bottom: 0; will-change: transform; } .type-display-1{ font-family: var(--font-display); font-weight: 400; letter-spacing: 0; text-transform: uppercase; } .type-display-2 { font-family: var(--font-brand); font-weight: 400; letter-spacing: 0; text-transform: uppercase; } .type-display-1 { font-size: var(--type-h1-size); line-height: var(--type-h1-lh); } .type-display-2 { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); } .type-heading-3 { font-family: var(--font-brand); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); } .type-heading-4 { font-family: var(--font-brand); font-size: var(--type-h4-size); line-height: var(--type-h4-lh); } .type-body-lg { font-family: var(--font-brand); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); } .type-body-md { font-family: var(--font-brand); font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); } .type-body-sm { font-family: var(--font-brand); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); } .type-label { font-family: var(--font-brand); font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-tracking); text-transform: uppercase; } .type-meta { font-family: var(--font-brand); font-size: var(--type-meta-size); line-height: var(--type-meta-lh); } .type-button { font-family: var(--font-brand); font-size: var(--type-button-size); line-height: var(--type-button-lh); } .reduced-motion html, html.reduced-motion { scroll-behavior: auto; } /* ═══════════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════════ */ .hero { position: relative; z-index: 0; /* explicit stacking context — keeps composited layers below the nav */ display: flex; flex-direction: column; width: 100%; /* Subtract the sticky nav's measured height so the hero fills exactly the remaining viewport — keeping sponsor in view. */ min-height: calc(100svh - var(--nav-h, 70px)); overflow: hidden; background: var(--color-body); border-bottom: 1px solid var(--color-stroke); } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Gradient overlay on top of the video */ .hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(281deg, rgba(0, 0, 0, 0.00) 18.35%, #000 94.8%); pointer-events: none; } /* Keep hero body above the video */ .hero__body { position: relative; z-index: 2; } /* ── Hero Body ─────────────────────────────────────────────────── */ .hero__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap:clamp(3rem, 2.2083rem + 3.5185vw, 5.375rem); padding: var(--hero-pt) var(--nav-px) var(--hero-pb); } /* Event info — headline + CTA */ .hero__event-info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hero-gap); max-width: 875px; } .hero__headline { font-weight: 400; font-size: clamp(2rem, 1.1505rem + 3.6246vw, 5.5rem); line-height: var(--hero-headline-lh); letter-spacing: var(--type-h1-tracking); color: var(--color-white); margin: 0; text-wrap: balance; text-transform: uppercase; } /* The CTA inside the hero shares .btn-book styling from the nav, but we keep it a consistent comfortable size across breakpoints. */ .hero__cta.btn-book { padding: 16px; font-size: 18px; } .hero__cta .btn-book__icon { width: 40px; height: 40px; } /* Sponsor block */ .hero__sponsor { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .hero__sponsor-label { font-family: var(--font-brand); font-size: var(--type-label-size); font-weight: 400; line-height: var(--type-label-lh); letter-spacing: var(--type-label-tracking); text-transform: capitalize; color: var(--color-text-muted); margin: 0; } .hero__sponsor-logo { width: clamp(160px, 11vw, 215px); height: auto; line-height: 0; } .hero__sponsor-logo img { display: block; width: 100%; height: auto; } /* ═══════════════════════════════════════════════════════════════ TOP NAV — Bootstrap navbar overrides + custom layout ═══════════════════════════════════════════════════════════════ */ .top-nav.navbar { position: fixed; top: 0; z-index: 9999; /* high enough to beat any backdrop-filter composited layer in child sections */ flex-wrap: wrap; /* collapse drops to next row on < xl */ align-items: center; padding:0 var(--nav-px); background: var(--color-nav-bg); border-bottom: 0.5px solid var(--color-stroke); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); width: 100%; /* Smooth transitions for scroll-shrink */ transition: padding 0.3s ease, background 0.3s ease; } /* ── Logo ──────────────────────────────────────────────────────── */ .top-nav__logo.navbar-brand { flex-shrink: 0; padding: clamp(5px, 0.5vw, 10px) 0; margin-right: 0; line-height: 1; } .top-nav__logo img { display: block; width: var(--logo-w); height: auto; transition: width 0.3s ease; } /* ── Hamburger toggler ─────────────────────────────────────────── */ .top-nav__toggler.navbar-toggler { border-color: rgba(253, 253, 253, 0.4); padding: 10px 10px; margin-left: auto; border-radius: 0px; } .top-nav__toggler[aria-expanded="true"] .navbar-toggler-icon{ color: #fff; background-image: url('data:image/svg+xml,'); } .top-nav__toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28253%2C253%2C253%2C0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ── Collapsed mobile menu ─────────────────────────────────────── */ .top-nav .navbar-collapse { flex-basis: 100%; /* drop to next row on mobile */ background: rgba(8, 7, 13, 0.97); margin: 8px calc(-1 * var(--nav-px)) -8px; padding: 16px var(--nav-px) 24px; border-top: 0.5px solid var(--color-stroke); } /* On xl+ the collapse is always visible — reset the mobile overrides */ @media (min-width: 1200px) { .top-nav.navbar { flex-wrap: nowrap; align-items: stretch; } .top-nav .navbar-collapse { flex-basis: auto; flex-grow: 1; background: transparent; margin: 0; padding: 0; border-top: none; display: flex !important; align-items: stretch; } .top-nav__links > *{ padding: 0 !important; gap: 30px; } } /* ── Nav Links ─────────────────────────────────────────────────── */ .top-nav__links { display: flex; flex-direction: column; /* stack on mobile */ position: relative; } .top-nav__links > *{ align-items: stretch; display: flex; position: static; flex-direction: column; } .gfm-nav-link { display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; color: var(--color-dirt-white); font-family: var(--font-brand); font-size: var(--type-button-size); font-weight: 400; line-height: var(--type-button-lh); white-space: nowrap; user-select: none; text-decoration: none; transition: opacity 0.2s ease, font-size 0.3s ease, padding 0.3s ease; position: relative; border-bottom: 4px solid transparent; } .gfm-nav-link::before, .gfm-nav-link::after { content: ''; position: absolute; inset: 0; z-index: -1; transition: all 0.3s ease; width: 1px; height: 0%; background: var(--color-stroke); top: 0; display: block !important; border: 0px !important; transition: height .3s linear; } .gfm-nav-link::before{ left: 0; } .gfm-nav-link::after{ right: 0; left: auto; transition-delay: .15s; } .gfm-nav-link:hover { color: var(--color-dirt-white); } .gfm-nav-link:hover::after, .gfm-nav-link:hover::before { height: 100%; } #visitDropdown:hover{ border-bottom: 4px solid var(--color-turquoise-500) ; } #exhibitDropdown:hover{ border-bottom: 4px solid var(--color-ultrasonic-500) ; } .nav-link__dot { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; } .nav-link__dot--purple { background-color: var(--color-ultrasonic-500); } .nav-link__dot--teal { background-color: var(--color-turquoise-500); } .nav-link__chevron { flex-shrink: 0; display: block; transition: transform 0.3s ease; } .dropdown-toggle::after { display: none; } .gfm-nav-link[aria-expanded="true"] .nav-link__chevron { transform: rotate(180deg); } /* Dropdown Menus */ .top-nav__links .dropdown-menu { margin-top: 0px !important; padding: 0.5rem 0; border-radius: 0px !important; top: 100%; width: 100%; transform: unset !important; right: 0 !important; min-width: 300px; left: 50% !important; transform: translateX(-50%) !important; border: 0px; } #visitDropdown ~ .dropdown-menu, #visitDropdown ~ .dropdown-menu .dropdown-menu { background: var(--color-turquoise-800); } #exhibitDropdown ~ .dropdown-menu, #exhibitDropdown ~ .dropdown-menu .dropdown-menu { background: var(--color-ultrasonic-800); } .top-nav__links .dropdown-item { color: #ccc; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 1.125rem; column-gap: 1rem; border: 0px !important; } .top-nav__links .dropdown-submenu .dropdown-menu .dropdown-item{ font-size: 1rem; } #visitDropdown ~ .dropdown-menu .submenu-trigger[aria-expanded="true"]{ background: var(--color-turquoise-500) !important; color: var(--color-body); } #exhibitDropdown ~ .dropdown-menu .submenu-trigger[aria-expanded="true"]{ background: var(--color-ultrasonic-500) !important; color: var(--color-dirt-white); } #visitDropdown ~ .dropdown-menu .dropdown-item:hover, #visitDropdown ~ .dropdown-menu .dropdown-item:active, #visitDropdown ~ .dropdown-menu .dropdown-item:focus { background: var(--color-turquoise-500); color: var(--color-body); } #exhibitDropdown ~ .dropdown-menu .dropdown-item:hover, #exhibitDropdown ~ .dropdown-menu .dropdown-item:active, #exhibitDropdown ~ .dropdown-menu .dropdown-item:focus { background: var(--color-ultrasonic-500); color: var(--color-text-muted) !important } .top-nav__links .dropdown-submenu .dropdown-item[aria-expanded="true"] svg{ transform: translateY(0px) rotate(90deg) !important; } .top-nav__links .dropdown-submenu .dropdown-menu{ border: 0px; } .top-nav__links .dropdown-submenu .dropdown-menu .dropdown-item{ color: var(--color-dirt-white); text-transform: capitalize !important; } .top-nav__links .dropdown-submenu .dropdown-menu .dropdown-item:hover, .top-nav__links .dropdown-submenu .dropdown-menu .dropdown-item:active, .top-nav__links .dropdown-submenu .dropdown-menu .dropdown-item:focus{ background: var(--color-turquoise-800) !important; color: var(--color-text-muted) !important } #exhibitDropdown ~ .dropdown-menu .dropdown-submenu .dropdown-menu{ border: 0px; /* background: var(--color-ultrasonic-500) !important; color: var(--color-dirt-white) !important; */ } #exhibitDropdown ~ .dropdown-menu .dropdown-submenu .dropdown-menu .dropdown-item{ color: var(--color-dirt-white) !important; text-transform: capitalize !important; } #exhibitDropdown ~ .dropdown-menu .dropdown-submenu .dropdown-menu .dropdown-item:hover, #exhibitDropdown ~ .dropdown-menu .dropdown-submenu .dropdown-menu .dropdown-item:active, #exhibitDropdown ~ .dropdown-menu .dropdown-submenu .dropdown-menu .dropdown-item:focus{ background: var(--color-ultrasonic-800) !important; color: var(--color-text-muted) !important } /* Desktop Dropdown Animation */ @media (min-width: 992px) { .top-nav__links { flex-direction: row; /* Un-stack on desktop */ } /* NOTE: explore-dropdown intentionally excluded from hover — click only */ .top-nav__links .dropdown:not(.explore-dropdown):hover > .gfm-nav-link .nav-link__chevron { transform: rotate(180deg); } .top-nav__links > *{ flex-direction: row ; } .top-nav__links .dropdown-item svg{ transform: translateY(-2px); } .dropdown-menu { display: block; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; } .dropdown:not(.explore-dropdown):hover > .dropdown-menu, .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } /* Second Level Desktop */ .top-nav__links .dropdown-submenu { position: relative; } .top-nav__links .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px !important; margin-left: 0; position: relative; height: 0; padding: 0; transition: ease-in-out .3s all; } .top-nav__links .dropdown-submenu:hover > .dropdown-menu { display: block; opacity: 1; visibility: visible; transform: translateX(0); height: 100%; } .top-nav__links .dropdown-submenu .dropdown-menu { transform: translateX(10px); position: sta; } .chevron-right { transition: transform 0.3s ease; } } /* Mobile Styles & Accordion */ @media (max-width: 991.98px) { .top-nav__links { width: 100%; padding: 1rem 0; } .top-nav__links .dropdown-menu { background-color: #111; border: none; box-shadow: none; width: 100%; margin: 0 !important; position: relative; border-radius: 0px !important; } .top-nav__links .dropdown-submenu .dropdown-menu{ position: relative; } .top-nav__links .dropdown-item { padding-left: 30px; } /* Indent sub-menus on mobile */ .top-nav__links .dropdown-submenu .dropdown-menu { padding-left: 1.5rem; background: transparent; } /* Accordion Trigger Styling */ .submenu-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer; } .submenu-trigger[aria-expanded="true"]{ background:inherit; } .submenu-trigger[aria-expanded="true"] .chevron-right { transform: rotate(90deg); /* Point SVG down on mobile when open */ } .chevron-right { transition: transform 0.3s ease; } .navbar-toggler { border-color: rgba(255,255,255,0.1); } .gfm-nav-link svg{ margin-left: auto; } } /* ── CTA Buttons ───────────────────────────────────────────────── */ .top-nav__cta { display: flex; flex-direction: column; /* stack on mobile */ gap: 8px; margin-top: 16px; position: relative; } .top-nav__cta .btn{ z-index: 4; position: relative; } /* Book Your Stand */ .btn-book { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background-color: var(--color-ultrasonic-800); color: var(--color-white); font-family: var(--font-brand); font-size: var(--type-button-size); font-weight: 400; line-height: var(--type-button-lh); text-decoration: none; white-space: nowrap; cursor: pointer; border: none; transition: background-color 0.2s ease, font-size 0.3s ease, padding 0.3s ease; } .btn-book:hover { background-color: #3a0580; color: var(--color-white); } .btn-book__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background-color: var(--color-ultrasonic-500); flex-shrink: 0; transition: width 0.3s ease, height 0.3s ease; } .btn-book__icon img { display: block; } .top-nav__cta .btn-primary-p__icon{ width: 36px; height: 36px; } /* btn-primary */ .btn{ display: flex; align-items: center; gap: 16px; padding: clamp(12px, 1vw, 16px); font-family: var(--font-brand); /* font-size: var(--type-button-size); */ font-size: clamp(16px, 1.15vw, 20px); font-weight: 400; line-height: var(--type-button-lh); text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; border: none; transition: background-color 0.2s ease, font-size 0.3s ease, padding 0.3s ease; border-radius: 0px; } .btn:hover { color: var(--color-white); } .btn *{ z-index: 2; font-size: clamp(16px, 1.15vw, 20px); } .btn:before{ content: ''; position: absolute; inset: 0; width: clamp(2.25rem, 2.1667rem + 0.3704vw, 2.5rem); height: clamp(2.25rem, 2.1667rem + 0.3704vw, 2.5rem); left: auto; right: clamp(12px, 1vw, 16px); transform: translateY(-50%); top: 50%; z-index: 0; transition: all 0.3s ease; } .btn:hover:before{ width: 100%; height: 100%; right: 0px; } .btn__icon { display: flex; align-items: center; justify-content: center; width:clamp(2.25rem, 2.1667rem + 0.3704vw, 2.5rem); height:clamp(2.25rem, 2.1667rem + 0.3704vw, 2.5rem); flex: 0 0 auto; flex-shrink: 0; transition: width 0.3s ease, height 0.3s ease; margin-left: auto; } .btn__icon img { display: block; } .btn-primary-g { background-color: var(--color-turquoise-800) !important; color: var(--color-white); } .btn-primary-g:before{ background-color: var(--color-turquoise-500); } .btn-primary-g:hover { color: var(--color-white); } .btn-primary-g__icon { background-color: var(--color-turquoise-500); } .btn-primary-p { background-color: var(--color-ultrasonic-800) !important; color: var(--color-white); } .btn-primary-p:before{ background-color: var(--color-ultrasonic-500); } .btn-primary-p__icon { background-color: var(--color-ultrasonic-500); } .btn-primary-o { background-color: var(--color-orchid-800) !important; color: var(--color-white); } .btn-primary-o:before{ background-color: var(--color-orchid-500); } .btn-primary-o__icon { background-color: var(--color-orchid-500); } .btn-secondary { background: transparent !important; border: 1px solid #fff; } .btn-secondary-g:hover{ border-color: var(--color-turquoise-500); } .btn-secondary-g::before{ background: var(--color-turquoise-500); } .btn-secondary-g__icon{ background: var(--color-turquoise-500); } .btn-secondary-p:hover{ border-color: var(--color-ultrasonic-500); } .btn-secondary-p::before{ background: var(--color-ultrasonic-500); } .btn-secondary-p__icon{ background: var(--color-ultrasonic-500); } .btn-secondary-o:hover{ border-color: var(--color-orchid-500); } .btn-secondary-o::before{ background: var(--color-orchid-500); } .btn-secondary-o__icon{ background: var(--color-orchid-500); } /* Explore */ .btn-explore { position: relative; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 12px 16px; background-color: var(--color-turquoise-800); color: var(--color-white); font-family: var(--font-brand); font-size: var(--type-button-size); font-weight: 400; line-height: var(--type-button-lh); white-space: nowrap; cursor: pointer; border: none; transition: background-color 0.2s ease, font-size 0.3s ease, padding 0.3s ease; } .btn-explore:hover { background-color: #03958a; } /* ═══════════════════════════════════════════════════════════════ ABOUT GFM ═══════════════════════════════════════════════════════════════ */ .about { position: relative; z-index: 0; /* explicit stacking context — keeps composited layers below the nav */ background-color: #08070D; border-top: 1px solid var(--color-stroke); border-bottom: 1px solid var(--color-stroke); overflow: hidden; } /* ── Two-column inner wrapper ────────────────────────────────── */ .about__inner { display: flex; min-height: clamp(520px, 75vh, 850px); } /* ── Left column: image fills the column ─────────────────────── */ .about__left { position: relative; flex: 0 0 50%; overflow: hidden; } /* Swiper fills the column */ .about__swiper { position: absolute; inset: 0; } .about__swiper .swiper-slide { height: 100%; } .about__swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Gradient fades the right edge of the image into the right column bg */ .about__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient( to right, rgba(0, 0, 0, 0) 40%, #08070D 100% ); pointer-events: none; } /* ── Carousel indicator — bottom-left, over the image ────────── */ .about__carousel { z-index: 2; position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; padding: clamp(20px, 2.5vw, 40px) clamp(24px, 3vw, 48px); -webkit-backdrop-filter: blur(6px); } .about__carousel-indicator { display: flex; align-items: center; gap: 4px; height: 32px; } .about__carousel-indicator.swiper-pagination { position: static; width: auto; } .about__carousel-indicator .swiper-pagination-bullet { display: inline-block; width: 1.935px; height: 9.59px; background-color: var(--color-white); border-radius: 0; opacity: 0.7; flex-shrink: 0; cursor: pointer; transition: opacity 0.2s ease; margin: 0; } .about__carousel-indicator .swiper-pagination-bullet-active { width: 9.59px; height: 9.59px; background-color: var(--color-turquoise-500); opacity: 1; } .about__carousel-indicator .swiper-pagination-bullet:hover { opacity: 1; } /* ── Right column: text + CTA ────────────────────────────────── */ .about__right { flex: 1; min-width: 0; display: flex; align-items: center; padding: clamp(48px, 6vh, 100px) var(--nav-px) clamp(48px, 6vh, 100px) clamp(32px, 3vw, 48px); background: #08070D; } /* ── Event info block ────────────────────────────────────────── */ .about__headline { /* font-family: var(--font-display); */ /* font-size: clamp(22px, 2.8vw, 40px); */ font-weight: 600; line-height: 1.05; color: var(--color-white); text-transform: uppercase; margin: 0; } .about__event-info { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); /* max-width: 580px; */ width: 100%; } .about__description { font-family: var(--font-brand); font-size: var(--type-body-lg-size); font-weight: 400; line-height: var(--type-body-lg-lh); color: var(--color-dirt-white); margin: 0; max-width: 100%; overflow-wrap: anywhere; } .about__description-highlight { color: var(--color-turquoise-500); } .about__headline-highlight { color: #D00EB9; } .about__number-highlight { color: var(--color-turquoise-500); } .about__cta.btn-book { align-self: flex-start; padding: clamp(12px, 1vw, 16px); font-size: clamp(15px, 1.1vw, 20px); } .about__cta .btn-book__icon { width: clamp(32px, 2.5vw, 40px); height: clamp(32px, 2.5vw, 40px); } @media (max-width: 1399px) and (min-width: 992px) { .about__left { flex-basis: 50%; } .about__right { padding-left: clamp(32px, 3vw, 48px); padding-right: clamp(32px, 3vw, 48px); } .about__event-info { /* max-width: 500px; */ } .about__description { /* max-width: 31ch; */ } } /* ── Mobile: stack columns ───────────────────────────────────── */ @media (max-width: 991px) { .about__inner { flex-direction: column; } .about__description { max-width: 100%; } .about__left { flex: none; height: clamp(260px, 45vw, 480px); } .about__overlay { background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 40%, #08070D 100% ); } .about__right { padding: 40px var(--nav-px) 60px; } } /* ═══════════════════════════════════════════════════════════════ STATS SECTION ═══════════════════════════════════════════════════════════════ */ .stats { position: relative; z-index: 0; /* explicit stacking context — keeps composited layers below the nav */ overflow: hidden; background: var(--color-body); border-bottom: 1px solid var(--color-stroke); } .stats__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .stats__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.50); pointer-events: none; } /* ── Content wrapper ─────────────────────────────────────────── */ .stats__content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 96px); padding: clamp(60px, 8vh, 120px) 0; } /* ── Headline ─────────────────────────────────────────────────── */ .stats__headline { /* font-family: var(--font-display); */ font-weight: 600; font-size: var(--type-h2-size); line-height: calc(var(--type-h2-lh) + 0.1); color: #d9d9d9; max-width: clamp(560px, 68vw, 1169px); margin: 0; text-wrap: balance; text-transform: uppercase; } .stats__headline-highlight { color: var(--color-turquoise-500); } .stats__intro { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 28px); padding: 0 var(--nav-px); } .stats__description { font-family: var(--font-brand); font-size: var(--type-body-lg-size); font-weight: 400; line-height: var(--type-body-lg-lh); color: var(--color-white); margin: 0; max-width: clamp(480px, 56vw, 860px); } /* ── Stat cards grid ─────────────────────────────────────────── */ .stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); padding: 0 clamp(1.25rem, 0.6667rem + 2.5926vw, 3rem); } .stats__card { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(20px, 2.2vw, 32px); border-left: 1px solid var(--color-stroke); min-height: clamp(160px, 18vw, 200px); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); position: relative; overflow: visible; } /* 12px colored square dots — top-left and bottom-left of each card */ .stats__card-dot { display: block; position: absolute; width: 12px; height: 12px; background: var(--card-dot, #7239BF); pointer-events: none; } .stats__card-dot--top { top: -6px; left: -6px; } .stats__card-dot--bottom { bottom: -6px; left: -6px; } .stats__label { font-family: var(--font-brand); font-size: var(--type-label-size); font-weight: 400; line-height: var(--type-label-lh); color: var(--color-white); text-transform: uppercase; letter-spacing: var(--type-label-tracking); } .stats__number { /* font-family: var(--font-display); */ font-weight: 400; /* font-size: clamp(24px, 3vw, 64px); */ font-size: clamp(1.5rem, 0.7112rem + 3.3657vw, 4.75rem); line-height: 1.1; color: var(--color-white); white-space: nowrap; display: block; /* always occupies full card width — prevents reflow */ width: 100%; font-variant-numeric: tabular-nums; /* equal digit widths — prevents per-digit wobble */ } @media (max-width: 991px) { .stats__headline{ max-width: 100%; } } /* ── Mobile: 2-col then 1-col grid ──────────────────────────── */ @media (max-width: 767px) { .btn-book, .btn-explore, .btn-orchid, .launches__btn, .footer__btn { display: inline-flex; align-items: center; gap: 16px; padding: 12px 16px; font-size: 15px; line-height: 1.5; min-height: 56px; } .btn-book__icon, .btn-orchid__icon, .launches__btn-icon, .footer__btn-icon { width: 32px; height: 32px; min-width: 32px; min-height: 32px; } .btn-explore__chevron { width: 16px; height: 16px; flex-shrink: 0; } .btn-book__label, .btn-explore__label, .btn-orchid__label, .footer__btn-label, .launches__btn > span:first-child, .launches__bar-label { font-size: 15px; line-height: 1.5; } .launches__bar { display: inline-flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; min-height: 56px; } .launches__bar-label { font-size: 15px; line-height: 1.5; } .launches__bar-icon { width: 32px; height: 32px; min-width: 32px; min-height: 32px; } .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; } .stats__card { justify-content: flex-start; gap: 10px; } /* Layout: 2 / 2 / 1 full-width */ .stats__card:nth-child(5) { grid-column: 1 / -1; } .stats__number { font-size: clamp(30px, 8vw, 44px); line-height: 1; } /* Exhibitors mobile overrides */ .exhibitors__grid { grid-template-columns: repeat(2, 1fr); } .exhibitors__cell:nth-child(n+7) { border-bottom: none; } .exhibitors__cell:nth-child(n+3) { border-bottom: 1px solid #EAE9ED; } .exhibitors__header { flex-direction: column; align-items: flex-start; gap: 24px; } } /* ═══════════════════════════════════════════════════════════════ EXHIBITORS SECTION ═══════════════════════════════════════════════════════════════ */ .exhibitors { position: relative; z-index: 0; background: #FDFDFD; } /* ── Header bar ─────────────────────────────────────────────── */ .exhibitors__header { display: flex; align-items: center; justify-content: space-between; padding: clamp(48px, 6vh, 80px) var(--nav-px); background: #FDFDFD; } /* ── Headline ────────────────────────────────────────────────── */ .exhibitors__headline { /* font-family: var(--font-display); */ font-weight: 600; font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: #08070D; margin: 0; text-wrap: balance; text-transform: uppercase; } .exhibitors__headline-highlight { color: #D00EB9; } /* ── View All Exhibitors button ──────────────────────────────── */ .btn-orchid { display: flex; align-items: center; gap: 16px; padding: 16px; background-color: #BD0DA8; color: #FDFDFD; font-family: var(--font-brand); font-size: var(--type-button-size); font-weight: 400; line-height: var(--type-button-lh); text-decoration: none; white-space: nowrap; cursor: pointer; border: none; flex-shrink: 0; transition: background-color 0.2s ease; } .btn-orchid:hover { background: #D00EB9; color: #FDFDFD; } .btn-orchid__label { /* inherits from .btn-orchid */ } .btn-orchid__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background-color: #D93EC7; flex-shrink: 0; } .btn-orchid__icon img { display: block; } .exhibitors__mobile-swiper { display: none; } .exhibitors__mobile-pagination { display: none; } /* ── Carousel ────────────────────────────────────────────────── */ .exhibitors__swiper { overflow: hidden; background: #FDFDFD; position: relative; /* Height = 2 rows × cell height; drives Swiper Grid row sizing */ height: clamp(280px, 30vw, 480px); border-right: 1px solid #EAE9ED; border-bottom: 1px solid #EAE9ED; } .exhibitors__cell { display: flex; align-items: center; justify-content: center; background: #FFFFFF; height: 100%; border-left: 1px solid #EAE9ED; border-top: 1px solid #EAE9ED; padding: 24px; } .exhibitors__cell img { display: block; max-width:90%; max-height:90%; object-fit: contain; } /* ── Pagination bar ──────────────────────────────────────────── */ .exhibitors__pagination { display: flex; align-items: center; justify-content: center; padding: 24px var(--nav-px); background: #FDFDFD; border-bottom: 1px solid #59516D; } .exhibitors__indicator { display: flex; align-items: center; gap: 8px; height: 32px; justify-content: center; } .exhibitors__dot { display: inline-block; width: 9.59px !important; height: 9.59px !important; background: #D00EB9 !important; cursor: pointer; border: none; padding: 0; appearance: none; -webkit-appearance: none; flex-shrink: 0; } .exhibitors__tick { display: inline-block; width: 1.935px; height: 9.59px; background: #59516D; cursor: pointer; border: none; padding: 0; appearance: none; -webkit-appearance: none; opacity: 0.7; flex-shrink: 0; transition: opacity 0.2s; } .exhibitors__tick:hover { opacity: 1; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — Bootstrap breakpoints xs < 576 (default above) sm ≥ 576 md ≥ 768 lg ≥ 992 xl ≥ 1200 ← hamburger hidden, full nav shown xxl ≥ 1400 ═══════════════════════════════════════════════════════════════ */ /* ── sm ≥ 576px ─────────────────────────────────────────────── */ @media (min-width: 576px) { :root { --nav-px: 24px; --type-h1-size: 52px; --type-h2-size: 32px; --type-h3-size: 24px; --type-h4-size: 20px; --type-h5-size: 17px; --type-h6-size: 14px; --type-body-lg-size: 16px; --type-body-md-size: 15px; --type-body-sm-size: 13px; --type-label-size: 12px; --type-meta-size: 14px; --type-button-size: 16px; } } /* ── md ≥ 768px ─────────────────────────────────────────────── */ @media (min-width: 768px) { :root { --nav-px: 40px; --type-h1-size: 64px; --type-h2-size: 36px; --type-h3-size: 26px; --type-h4-size: 21px; --type-h5-size: 18px; --type-h6-size: 15px; --type-body-lg-size: 16px; --type-body-md-size: 15px; --type-body-sm-size: 13px; --type-label-size: 13px; --type-meta-size: 15px; --type-button-size: 17px; } .top-nav__links { flex-direction: row; } .top-nav__cta { flex-direction: row; margin-top: 12px; } .gfm-nav-link { font-size: 17px; } .btn-book { font-size: 17px; } .btn-explore { font-size: 17px; } .hero__cta.btn-book { font-size: 20px; } } /* ── lg ≥ 992px ─────────────────────────────────────────────── */ @media (min-width: 992px) { :root { --nav-px: 60px; --type-h1-size: 64px; --type-h2-size: 36px; --type-h3-size: 32px; --type-h4-size: 22px; --type-h5-size: 18px; --type-h6-size: 15px; --type-body-lg-size: 18px; --type-body-md-size: 16px; --type-body-sm-size: 13px; --type-label-size: 13px; --type-meta-size: 16px; --type-button-size: 18px; } .top-nav__cta { margin-top: 16px; } } /* ── xl ≥ 1200px (hamburger hidden, full horizontal layout) ── */ @media (min-width: 1200px) { :root { --nav-px: 80px; --type-h1-size: 76px; --type-h2-size: 38px; --type-h3-size: 36px; --type-h4-size: 20px; --type-h5-size: 18px; --type-h6-size: 16px; --type-body-lg-size: 16px; --type-body-md-size: 16px; --type-body-sm-size: 14px; --type-label-size: 14px; --type-meta-size: 16px; --type-button-size: 20px; } /* Fluid icon box — scales between 1200 and 1920 wide */ .btn-book__icon { width: clamp(30px, 2.2vw, 40px); height: clamp(30px, 2.2vw, 40px); } .top-nav__links { flex-direction: row; align-items: stretch; } .top-nav__cta { flex-direction: row; align-items: stretch; /* both buttons grow to the same height */ gap: 8px; max-height: 70px; margin: auto 0; } .gfm-nav-link { font-size: clamp(15px, 1.15vw, 20px); padding: 0px clamp(24px, 1vw, 32px); gap: 12px; } .btn-book { font-size: clamp(15px, 1.15vw, 20px); padding: clamp(10px, 0.9vw, 16px) clamp(12px, 1vw, 16px); } .btn-explore { font-size: clamp(16px, 1.15vw, 20px); padding: clamp(10px, 0.9vw, 16px) clamp(12px, 1vw, 16px); } } /* ── xxl ≥ 1400px (Figma reference size) ───────────────────── */ @media (min-width: 1400px) { :root { --nav-px: clamp(80px, 10.4vw, 100px); --type-h2-size: 48px; } } @media (min-width: 1520px) { :root { --nav-px: clamp(80px, 10.4vw, 200px); } } /* ═══════════════════════════════════════════════════════════════ STICKY NAV — scrolled (shrunk) state JS adds .top-nav--scrolled once scrollY > 60px ═══════════════════════════════════════════════════════════════ */ .top-nav--scrolled.navbar { background: rgba(8, 7, 13, 0.85); } /* Shrink the logo */ .top-nav--scrolled .top-nav__logo{ padding-top: 4px; padding-bottom: 4px; } .top-nav--scrolled .top-nav__logo img { width: clamp(120px, 11vw, 210px); } /* Shrink buttons + links on desktop */ @media (min-width: 1200px) { .top-nav--scrolled .gfm-nav-link { font-size: clamp(13px, 1vw, 16px); padding: 6px 12px; } .top-nav--scrolled .btn-primary { font-size: clamp(13px, 1vw, 16px); padding: clamp(7px, 0.6vw, 10px) clamp(10px, 0.9vw, 14px); } .top-nav--scrolled .btn-explore { /* font-size: clamp(13px, 1vw, 16px); */ padding: clamp(7px, 0.6vw, 10px) clamp(10px, 0.9vw, 14px); } .top-nav--scrolled .btn-primary__icon { width: clamp(24px, 1.8vw, 30px); height: clamp(24px, 1.8vw, 30px); } .top-nav--scrolled .btn-primary:before { width: 30px; height: 30px; } .top-nav--scrolled .btn-primary:hover:before { width: 100%; height: 100%; } } /* ═══════════════════════════════════════════════════════════════ SERVICES SECTION ═══════════════════════════════════════════════════════════════ */ :root { --services-slide-h: clamp(300px, 30vw, 537px); } .services { position: relative; z-index: 0; background: #08070D; overflow: hidden; } /* ── Header ── */ .services__header { padding: clamp(32px, 4vw, 88px) clamp(24px, 8vw, 200px); text-align: center; } .services__headline { /* font-family: var(--font-display); */ font-weight: 600; font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--color-dirt-white); margin: 0; letter-spacing: 0; text-transform: uppercase; } .services__headline-highlight { color: var(--color-turquoise-500); } /* ── Slider ── */ .services__swiper { width:calc( 100% - (var(--nav-px) * 2)); overflow: hidden; overflow: visible; } /* ── Individual slide ── */ .services__slide { display: flex; height: auto; overflow: hidden; } .services__swiper .swiper-slide { opacity: 0.2; /* transform: scale(0.95); */ transition: opacity 0.7s ease, transform 0.7s ease; } .services__swiper .swiper-slide-active { opacity: 1; } /* ── Text panel (left 50%) ── */ .services__panel-text { flex: 0 0 50%; background: #151515; display: flex; flex-direction: column; justify-content: center; padding: clamp(16px, 1.6vw, 24px); overflow: hidden; background-size: cover; background-position: center; row-gap: 2rem; border: 1px solid #59516D; } .services__swiper.swiper-initialized .services__panel-text { background-image: url('../assets/images/about-section/shutterstock_2485030753_1.webp'); } .services__title { font-family: var(--font-brand); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: #EAE9ED; margin: 0; letter-spacing: 0; text-transform: uppercase; } .services__desc { font-family: var(--font-brand); font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); color: #BFBCC7; margin: 0; } .services__tagline { font-family: var(--font-brand); font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); color: var(--color-white); margin: 0; font-weight: 400; } /* All extended slides — center content as a group */ .services__slide--processing .services__panel-text, .services__slide--packaging .services__panel-text, .services__slide--ingredients .services__panel-text, .services__slide--automation .services__panel-text, .services__slide--supply-chain .services__panel-text { justify-content: space-between; gap: clamp(10px, 1vw, 16px); overflow-y: auto; } .services__slide--processing .services__desc, .services__slide--packaging .services__desc, .services__slide--ingredients .services__desc, .services__slide--automation .services__desc, .services__slide--supply-chain .services__desc { color: var(--color-white); } .services__cta { align-self: flex-start; margin-top: 4px; } /* ── Video panel (right 50%) ── */ .services__panel-video { flex: 0 0 50%; position: relative; overflow: hidden; } .services__video { width: 100%; height: 100%; object-fit: cover; display: block; } .services__video-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%); pointer-events: none; } /* ── Pagination bar ── */ .services__nav { display: flex; align-items: center; justify-content: space-between; padding: clamp(20px, 2.6vw, 40px) var(--nav-px); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); gap: 24px; } /* ── Prev / Next arrows ── */ .services__arrow { width: 48px; height: 48px; border: 1px solid var(--color-stroke); background: rgba(8, 7, 13, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: border-color 0.2s ease, background 0.2s ease; } .services__arrow--prev { } .services__arrow--next { } .services__arrow--prev img { transform: rotate(180deg); } .services__arrow:hover { border-color: var(--color-turquoise-500); background: rgba(4, 221, 207, 0.1); } /* Mobile arrows — always visible inside the nav bar */ .services__arrow--mobile { position: static; opacity: 1; pointer-events: auto; display: flex; } .services__indicators { display: flex; align-items: center; justify-content: center; gap: 8px; } .services__dot, .services__tick { display: block; cursor: pointer; border: none; padding: 0; flex-shrink: 0; transition: background 0.3s ease, width 0.3s ease; } .services__dot { width: 9.59px !important; height: 9.59px !important; background: var(--color-turquoise-500) !important; } .services__tick { width: 1.935px; height: 9.59px; background: var(--color-stroke); } /* ═══════════════════════════════════════════════════════════════ SUMMIT SECTION Two-column layout: left = image carousel, right = content. Same structural approach as the About section. ═══════════════════════════════════════════════════════════════ */ .summit { position: relative; z-index: 0; background: #08070D; } .summit__inner { display: flex; align-items: stretch; width: 100%; min-height: clamp(480px, 50vw, 800px); } /* ── Left column ── */ .summit__left { position: relative; flex: 0 0 50%; overflow: hidden; } .summit__swiper { position: absolute; inset: 0; } .summit__swiper .swiper-slide { height: 100%; } .summit__swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Gradient: transparent on left → #08070D on right — blends into right column */ .summit__overlay { position: absolute; z-index: 3; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(8, 7, 13, 0.45) 50%, #08070D 100%); pointer-events: none; width: 50%; left: auto; right: 0; } /* Frosted bar pinned to the bottom of the image — mirrors .about__carousel */ .summit__carousel { position: absolute; z-index: 4; bottom: 0; left: 0; right: 0; display: flex; align-items: center; padding: clamp(20px, 2.5vw, 40px) clamp(24px, 3vw, 48px); -webkit-backdrop-filter: blur(6px); } .summit__carousel-indicator { display: flex; align-items: center; gap: 8px; height: 32px; } .summit__dot, .summit__tick { display: block; cursor: pointer; border: none; padding: 0; flex-shrink: 0; transition: background 0.3s ease, width 0.3s ease; } .summit__dot { width: 9.59px !important; height: 9.59px; background: var(--color-turquoise-500) !important; } .summit__tick { width: 1.935px; height: 9.59px; background: var(--color-white); /* white ticks per Figma */ } /* ── Right column ── */ .summit__right { flex: 1; background: #08070D; display: flex; align-items: center; } .summit__content { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 32px); padding: clamp(40px, 6vw, 120px) var(--nav-px) clamp(40px, 6vw, 120px) clamp(16px, 2.5vw, 40px); } .summit__logo { display: block; width: clamp(140px, 14vw, 264px); height: auto; } .summit__headline { /* font-family: var(--font-display); */ font-weight: 600; font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--color-dirt-white); margin: 0; letter-spacing: 0; text-transform: uppercase; } .summit__headline-highlight { color: #D00EB9; } .summit__desc { font-family: var(--font-brand); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); color: var(--color-dirt-white); margin: 0; max-width: 100%; } /* ═══════════════════════════════════════════════════════════════ SPEAKERS SECTION ═══════════════════════════════════════════════════════════════ */ .speakers { position: relative; z-index: 0; /* background: #08070D url('../assets/images/speakers-section/speakers-bg-img.webp') center center / cover no-repeat; */ padding-top: clamp(40px, 5.5vw, 80px); } /* ── Header ── */ .speakers__header { text-align: center; padding: 0 clamp(24px, 10vw, 200px) clamp(32px, 5vw, 80px); } .speakers__headline { /* font-family: var(--font-display); */ font-weight: 600; font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--color-dirt-white); margin: 0; letter-spacing: 0; text-transform: uppercase; } .speakers__headline-highlight { color: #D00EB9; } .speakers__mobile { display: none; } /* ── Swiper ── */ .speakers__swiper { overflow: hidden; width: 100%; } .speakers__slide { width: 100%; } /* ── 3-column staggered grid ── */ .speakers__grid { display: flex; gap: clamp(8px, 1.1vw, 16px); justify-content: center; padding: 0 clamp(24px, 10vw, 200px) clamp(32px, 5vw, 80px); } .speakers__col { display: flex; flex-direction: column; gap: clamp(16px, 2.6vw, 40px); } /* Left & right columns drop down to create the stagger */ .speakers__col--offset { padding-top: clamp(48px, 8vw, 120px); } .speakers__col--center { align-items: center; } /* ── Card wrapper — outer shell allowing corner dots to overflow ── */ .speakers__card-wrap { position: relative; } /* ── Card ── */ .speakers__card { position: relative; overflow: hidden; /* clips the hover overlay */ width: clamp(200px, 24vw, 458px); background: rgba(8, 7, 13, 0.9); border: 1px solid var(--color-stroke); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: clamp(10px, 1.2vw, 19px); cursor: pointer; } /* ── Diagonal decorative line — top-left → bottom-right, behind the photo ── */ .speakers__card::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom left, transparent calc(50% - 0.5px), #59516D calc(50% - 0.5px), #59516D calc(50% + 0.5px), transparent calc(50% + 0.5px) ); pointer-events: none; } /* ── Photo wrapper — scales toward top-left on hover ── */ .speakers__card-photo-wrap { position: relative; overflow: hidden; border: 1px solid var(--color-stroke); border-radius: 2.4px; aspect-ratio: 420 / 424; transform: scale(1); transform-origin: top left; transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .speakers__card-wrap:hover .speakers__card-photo-wrap { transform: scale(0.78); } .speakers__card-photo-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; } /* ── Info icon — top-right, fades in on hover ── */ .speakers__card-icon { position: absolute; top: clamp(10px, 1.2vw, 19px); right: clamp(10px, 1.2vw, 19px); width: clamp(32px, 3.1vw, 48px); height: clamp(32px, 3.1vw, 48px); background: #08070D; border: 1px solid #59516D; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease 0.1s; } .speakers__card-wrap:hover .speakers__card-icon { opacity: 1; } /* ── Text info — bottom-left, fades in on hover ── */ .speakers__card-info { position: absolute; bottom: clamp(10px, 1.2vw, 19px); left: clamp(10px, 1.2vw, 19px); right: clamp(10px, 1.2vw, 19px); opacity: 0; transition: opacity 0.3s ease 0.15s; } .speakers__card-wrap:hover .speakers__card-info { opacity: 1; } .speakers__card-name { font-family: var(--font-brand); font-size: var(--type-h4-size); line-height: var(--type-h4-lh); color: var(--color-dirt-white); margin: 0 0 4px; text-shadow: 0px 1px 20px rgba(0, 0, 0, 0.2); text-transform: uppercase; } .speakers__card-role { font-family: var(--font-brand); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--color-dirt-white); margin: 0; } /* ── Corner magenta accent squares ── */ .speakers__corner { position: absolute; width: 9.59px; height: 9.59px; background: #D00EB9; pointer-events: none; } .speakers__corner--tl { top: -5px; left: -5px; } .speakers__corner--br { bottom: -5px; right: -5px; } /* ── "View All Speakers" CTA inside center column ── */ .speakers__cta { margin-top: clamp(4px, 0.5vw, 8px); } /* ── Bottom nav bar ── */ .speakers__nav { display: flex; align-items: center; justify-content: center; padding: clamp(20px, 2.6vw, 40px) clamp(60px, 6.25vw, 120px); background: rgba(2, 0, 43, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-top: 1px solid var(--color-stroke); } .speakers__nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } /* Prev / Next arrows — match Figma: 48×48 border square */ .speakers__arrows { display: flex; align-items: center; } .speakers__arrow { width: 48px; height: 48px; border: 1px solid var(--color-stroke); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: border-color 0.2s ease, background 0.2s ease; } .speakers__arrow:hover { border-color: #D00EB9; background: rgba(208, 14, 185, 0.12); } .speakers__arrow--prev img { transform: rotate(180deg); } .speakers__indicators { display: flex; align-items: center; justify-content: center; gap: 8px; } .speakers__dot, .speakers__tick { display: block; cursor: pointer; border: none; padding: 0; flex-shrink: 0; transition: background 0.3s ease, width 0.3s ease; } .speakers__dot { width: 9.59px !important; height: 9.59px; background: #D00EB9 !important; /* magenta active dot */ } .speakers__tick { width: 1.935px; height: 9.59px; background: var(--color-white); /* white ticks */ } /* ═══════════════════════════════════════════════════════════════ INNOVATION TOURS SECTION ═══════════════════════════════════════════════════════════════ */ .innovation { position: relative; z-index: 0; } /* ── Main panel ── */ .innovation__main { position: relative; min-height: clamp(480px, 52vw, 900px); overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .innovation__media { position: absolute; inset: 0; } /* ── Background swiper ── */ .innovation__swiper { position: absolute; inset: 0; left: auto; right: 0; width: 60%; } .innovation__swiper .swiper-slide { height: 100%; } .innovation__swiper .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center right; } /* ── Gradient overlay: solid dark left → semi-transparent right ── */ .innovation__overlay { position: absolute; z-index: 2; inset: 0; background: linear-gradient( to right, #010101 0%, rgba(1, 1, 1, 0.5) 50%, rgba(1, 1, 1, 0) 100% ); pointer-events: none; width: 60%; left: auto; right: 0; } /* ── Text content ── */ .innovation__content { position: relative; z-index: 3; display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 32px); padding: clamp(48px, 6vw, 96px) clamp(16px, 2.5vw, 20px) clamp(48px, 6vw, 96px) var(--nav-px); padding-bottom: clamp(80px, 10vw, 160px); /* clear the bottom bar */ max-width: 50%; } .innovation__event-logo { display: block; width: clamp(140px, 14vw, 264px); height: auto; } .innovation__text { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 32px); } .innovation__headline { /* font-family: var(--font-display); */ font-weight: 600; font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--color-dirt-white); margin: 0; text-transform: uppercase; letter-spacing: 0; } .innovation__headline-hl { color: #8959C9; } .innovation__body { font-family: var(--font-brand); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); color: var(--color-dirt-white); margin: 0; max-width: clamp(400px, 37vw, 711px); } /* ── Bottom frosted bar — indicators only, no border, no bg ── */ .innovation__bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 2vw, 32px); padding: clamp(16px, 3.3vw, 48px) clamp(24px, 6.25vw, 120px); } /* ── 2025 Participants wrapper: title + logos + nav ── */ .innovation__participants-wrap { display: flex; flex-direction: column; background: #010101; position: relative; z-index: 4; } /* Title bar — full-width, centred, LEMON MILK 48px */ .innovation__participants-title { position: absolute; top: auto; bottom: 100%; left: 0; right: 0; padding: clamp(32px, 4.2vw, 64px) clamp(24px, 10.4vw, 200px); display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(1, 1, 1, 0.00) 7.91%, #010101 81.72%); z-index: 1; } @media (min-width: 992px) { .innovation__main { padding-bottom: 150px; } .innovation__bar { bottom: 150px; } } @media (max-width: 991px) { .innovation__participants-title { position: static; top: auto; background: none; padding: 24px var(--nav-px); } .innovation__participants { text-align: center; } } .innovation__participants { /* font-family: var(--font-display); */ font-weight: 400; font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--color-dirt-white); margin: 0; text-transform: uppercase; text-align: center; white-space: nowrap; } /* ── Turquoise indicators (inside the bar) ── */ .innovation__bar-indicators { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; margin-left: auto; } .innovation__dot { display: block; width: 9.59px !important; height: 9.59px !important; background: #04DDCF !important; cursor: pointer; border: none; padding: 0; transition: background 0.3s ease; } .innovation__tick { display: block; width: 1.935px; height: 9.59px; background: var(--color-dirt-white); cursor: pointer; border: none; padding: 0; transition: background 0.3s ease; } /* ── Participant logo strip: Swiper free-scroll ── */ .innovation__logos-swiper { background: #010101; height: clamp(120px, 12vw, 190px); overflow: hidden; width: 100%; } .innovation__logos-swiper .swiper-wrapper { transition-timing-function: linear !important; } .innovation__logos-swiper .innovation__logo-cell { width: calc(100vw / 6); display: flex; align-items: center; justify-content: center; height: 100%; } .innovation__logo-cell img { display: block; /* max-width: 100%; max-height: clamp(4.125rem, 1.6667rem + 6.4815vw, 7.5rem); */ max-width: 210px; max-height:95px; margin: 0 auto; width: 100%; height: 100%; object-fit: contain; transform: translate(-50%, -50%); left: 50%; top: 50%; } /* ── Nav bar below logos: backdrop-blur, centered indicators ── */ .innovation__nav { display: flex; align-items: center; justify-content: center; padding: clamp(20px, 2.6vw, 40px) clamp(60px, 6.25vw, 120px); background: #010101; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .innovation__nav-indicators { display: flex; align-items: center; justify-content: center; gap: 8px; } .innovation__nav-dot { display: block; width: 9.59px !important; height: 9.59px !important ; background: #D00EB9 !important; cursor: pointer; border: none; padding: 0; } .innovation__nav-tick { display: block; transition: .5s all ease-in-out; width: 1.935px; height: 9.59px; background: #59516D; cursor: pointer; border: none; padding: 0; } /* ═══════════════════════════════════════════════════════════════ NEW LAUNCHES ═══════════════════════════════════════════════════════════════ */ .launches { position: relative; background: #08070D; border-top: 1px solid var(--color-stroke); overflow: hidden; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; } /* ── Background image ── */ .launches__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .launches__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ── Inner content ── */ .launches__inner { position: relative; z-index: 1; padding: clamp(60px, 8vh, 120px) var(--nav-px); display: flex; flex-direction: column; gap: clamp(40px, 5.2vw, 80px); } /* ── Headline ── */ .launches__headline { /* font-family: var(--font-display); */ font-weight: 600; font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--color-dirt-white); max-width: 640px; text-transform: uppercase; } .launches__headline-hl { color: var(--color-turquoise-500); } .launches__header { display: flex; flex-direction: row; align-items: flex-end; gap: clamp(32px, 4vw, 80px); } .launches__header-right { display: flex; flex-direction: column; gap: clamp(16px, 1.56vw, 24px); align-items: flex-start; flex-shrink: 0; } .launches__cta { align-self: flex-start; background-color: var(--color-turquoise-800); } .launches__desc { font-family: var(--font-brand); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); color: var(--color-white); margin: 0; /* max-width: 380px; */ } .launches__mobile-indicators { display: none; } /* ── Swiper ── */ .launches__swiper { width: 100%; overflow: visible; } /* ── Individual card ── */ .launches__card { position: relative; display: flex; flex-direction: column; gap: clamp(16px, 1.56vw, 24px); padding: clamp(16px, 1.56vw, 24px); background: rgba(8, 7, 13, 0.8); border: 1px solid var(--color-stroke); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ── Logo area ── */ .launches__logo-area { height: 68px; display: flex; align-items: center; overflow: hidden; } .launches__logo-area img { display: block; max-height: 50px; max-width: 100%; width: auto; height: auto; object-fit: contain; } /* ── Image frame ── */ .launches__img-frame { position: relative; border: 1px solid var(--color-stroke); overflow: hidden; flex-shrink: 0; height: clamp(200px, 23.4vw, 360px); } .launches__img-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .launches__img-inner img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ── Corner accent dots — positioned at card corners ── */ .launches__corner { position: absolute; width: 12px; height: 12px; background: var(--dot); display: block; z-index: 2; } .launches__corner--tl { top: -6px; left: -6px; } .launches__corner--br { bottom: -6px; right: -6px; } /* ── Product name ── */ .launches__name { font-family: var(--font-brand); font-weight: 400; font-size: var(--type-h4-size); line-height: var(--type-h4-lh); color: var(--color-white); margin: 0; text-transform: uppercase; } /* ── Details button ── */ .launches__btn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 16px; border: 1px solid var(--color-stroke); text-decoration: none; color: var(--color-white); font-family: var(--font-brand); font-weight: 400; font-size: var(--type-button-size); line-height: var(--type-button-lh); transition: border-color 0.35s ease; margin-top: auto; } /* Sliding fill — expands left → right on hover */ .launches__btn::before { content: ''; position: absolute; inset: 0; background: var(--btn); transform: scaleX(0); transform-origin: left center; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; } .launches__btn:hover::before { transform: scaleX(1); } .launches__btn:hover { border-color: var(--btn); color: var(--color-white); } /* Keep text + icon above the fill layer */ .launches__btn > span { position: relative; z-index: 1; } .launches__btn-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--btn); flex-shrink: 0; } .launches__btn-icon img { display: block; width: 16px; height: 16px; } /* ── "View more launches" bottom bar ── */ .launches__bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 1.56vw, 24px); padding: clamp(24px, 2.6vw, 40px) clamp(60px, 6.25vw, 120px); background: rgba(8, 7, 13, 0.5); border-top: 1px solid var(--color-stroke); border-bottom: 1px solid var(--color-stroke); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-decoration: none; color: var(--color-white); transition: background 0.25s ease; } .launches__bar:hover { background: rgba(8, 7, 13, 0.7); color: var(--color-white); } .launches__bar-label { font-family: var(--font-brand); font-weight: 400; font-size: var(--type-h4-size); line-height: var(--type-h4-lh); } .launches__bar-icon { display: flex; align-items: center; justify-content: center; width: clamp(40px, 3.1vw, 48px); height: clamp(40px, 3.1vw, 48px); border: 1px solid var(--color-stroke); flex-shrink: 0; } .launches__bar-icon img { display: block; width: 16px; height: 16px; transform: rotate(90deg); } .launches__dot, .launches__tick { display: block; border: none; padding: 0; cursor: pointer; flex-shrink: 0; } .launches__dot { width: 9.59px !important; height: 9.59px !important; background: var(--color-turquoise-500) !important; } .launches__tick { width: 1.935px; height: 9.59px; background: var(--color-stroke); transition: .5s ease all; } /* ═══════════════════════════════════════════════════════════════ FLOOR PLAN ═══════════════════════════════════════════════════════════════ */ .floorplan { background: #08070D; display: flex; flex-direction: column; } /* ── Part 1: headline — clean dark strip, no overlap with grid ── */ .floorplan__headline-wrap { padding: clamp(48px, 7.8vw, 120px) clamp(24px, 6.25vw, 120px) 0; text-align: center; background: #08070D; } .floorplan__headline { /* font-family: var(--font-display); */ font-weight: 600; font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--color-dirt-white); text-align: center; text-transform: uppercase; letter-spacing: 0; } .floorplan__headline-hl { color: #7239BF; } /* ── Part 2: 3D map with grid background ── */ .floorplan__visual { position: relative; overflow: hidden; min-height: clamp(380px, 58vw, 900px); } /* Background SVG grid */ .floorplan__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .floorplan__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* 3D map image — centred, anchored to bottom */ .floorplan__map { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; } .floorplan__map img { width: clamp(700px, 110vw, 1400px); height: auto; } .floorplan__map-hint { display: none; } /* ── Part 2: legend bar ── */ .floorplan__legend { display: flex; align-items: start; justify-content: center; gap: clamp(40px, 9.1vw, 140px); padding: clamp(40px, 5.2vw, 80px) clamp(24px, 6.25vw, 120px); border-top: 1px solid var(--color-stroke); border-bottom: 1px solid var(--color-stroke); } .floorplan__legend-col { display: flex; flex-direction: column; gap: clamp(16px, 1.56vw, 24px); flex-shrink: 0; } .floorplan__legend-event { font-family: var(--font-brand); font-weight: 700; font-size: var(--type-label-size); line-height: var(--type-label-lh); color: var(--color-dirt-white); text-transform: uppercase; letter-spacing: var(--type-label-tracking); margin: 0; } .floorplan__legend-items { display: flex; gap: clamp(20px, 1.56vw, 24px); align-items: flex-start; } .floorplan__legend-item { display: flex; gap: 16px; align-items: flex-start; } .floorplan__legend-dot { display: block; width: 40px; height: 40px; flex-shrink: 0; } .floorplan__legend-text { display: flex; flex-direction: column; gap: 8px; } .floorplan__legend-name { font-family: var(--font-brand); font-weight: 700; font-size: var(--type-h5-size); line-height: var(--type-h5-lh); color: var(--color-dirt-white); margin: 0; white-space: nowrap; } .floorplan__legend-halls { font-family: var(--font-brand); font-weight: 400; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--color-dirt-white); margin: 0; text-transform: uppercase; white-space: nowrap; } /* Vertical divider between columns */ .floorplan__legend-divider { width: 1px; height: clamp(80px, 8.6vw, 132px); background: var(--color-stroke); flex-shrink: 0; align-self: center; } /* ═══════════════════════════════════════════════════════════════ NEWS & INSIGHTS ═══════════════════════════════════════════════════════════════ */ .news { position: relative; background: #08070D; border-top: 1px solid var(--color-stroke); overflow: hidden; } /* ── Background image — no transform ── */ .news__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .news__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ── Inner wrapper ── */ .news__inner { position: relative; z-index: 1; padding: clamp(48px, 7.8vw, 120px) 0 0; display: flex; flex-direction: column; } /* ── Inner spacing ── */ /* ── Header row ── */ .news__header { display: flex; align-items: start; justify-content: space-between; padding: 0 clamp(24px, 13vw, 200px); margin-bottom: clamp(12px, 1.3vw, 20px); } .news__headline { /* font-family: var(--font-display); */ font-weight: 600; font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--color-dirt-white); text-transform: uppercase; } .news__headline-hl { color: var(--color-turquoise-500); } /* ── Toggle filter (replaces pill filters + arrow controls) ── */ .news__toggle { display: flex; align-items: flex-start; gap: 16px; padding: 8px; border: 1px solid var(--color-stroke); flex-shrink: 0; } .news__toggle-btn { display: flex; align-items: center; justify-content: center; padding: 16px; min-width: 100px; font-family: var(--font-brand); font-size: var(--type-body-lg-size); font-weight: 400; line-height: 1.5; color: #FDFDFD; background: transparent; border: none; cursor: pointer; white-space: nowrap; transition: background 0.2s; } .news__toggle-btn--active[data-filter="all"] { background: #FF6E2F; } .news__toggle-btn--active[data-filter="insights"] { background: #2B0460; } .news__toggle-btn--active[data-filter="news"] { background: #720866; } .news__toggle-btn--active[data-filter="articles"] { background: #027A72; } .news__toggle-btn:not(.news__toggle-btn--active):hover { background: rgba(255,255,255,0.06); } /* ── Pagination bar ── */ .news__pagination, .news__indicators{ display: flex; align-items: center; justify-content: center; width: 100%; padding: clamp(20px, 2.6vw, 40px) clamp(60px, 6.25vw, 120px); margin: 0 calc(-1 * clamp(24px, 10.4vw, 200px)); width: calc(100% + (clamp(24px, 10.4vw, 200px) * 2)); } .news__indicators { display: flex; align-items: center; gap: 8px; width: auto !important; } .news__indicators--mobile { display: none; } .news__dot { display: block; width: 9.59px !important; height: 9.59px; background: var(--color-turquoise-500) !important; border: none; padding: 0; cursor: pointer; } .news__tick { display: block; width: 1.935px; height: 9.59px; background: var(--color-stroke); border: none; padding: 0; cursor: pointer; } /* ── Viewport & track ── */ .news__viewport { overflow: hidden; padding: clamp(2.5rem, 1.6667rem + 3.7037vw, 5rem) var(--nav-px) clamp(2.5rem, 1.6667rem + 3.7037vw, 5rem) var(--nav-px); width: 100%; } .news__track { display: flex; width: 100%; will-change: transform; } /* ── Individual card ── */ .news__card { position: relative; flex: 0 0 auto; width: 33%; display: flex; flex-direction: column; gap: clamp(16px, 1.56vw, 24px); padding: clamp(16px, 1.56vw, 24px); background: rgba(8, 7, 13, 0.8); border: 1px solid var(--color-stroke); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Corner accent dots at card corners */ .news__corner { position: absolute; width: 12px; height: 12px; background: var(--corner, var(--dot, #4F07AF)); display: block; z-index: 2; } .news__corner--tl { top: -6px; left: -6px; } .news__corner--br { bottom: -6px; right: -6px; } /* ── Image frame ── */ .news__img-frame { position: relative; border: 1px solid var(--color-stroke); overflow: hidden; height: clamp(200px, 23.4vw, 360px); flex-shrink: 0; } .news__img-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ── Card body ── */ .news__card-body { display: flex; flex-direction: column; gap: 24px; } .news__card-meta { display: flex; align-items: center; justify-content: space-between; } .news__tag { display: inline-flex; align-items: center; padding:10px 14px 8px; font-family: var(--font-brand); font-weight: 400; font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-tracking); color: var(--color-white); white-space: nowrap; text-transform: uppercase; } .news__date { font-family: var(--font-brand); font-weight: 400; font-size: var(--type-meta-size); line-height: var(--type-meta-lh); color: var(--color-dirt-white); white-space: nowrap; } .news__card-title { font-family: var(--font-brand); font-weight: 400; font-size: var(--type-h4-size); line-height: var(--type-h4-lh); color: var(--color-white); margin: 0; } /* ── Read more link ── */ .news__read-more { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; font-family: var(--font-brand); font-weight: 400; font-size: var(--type-button-size); line-height: var(--type-button-lh); color: var(--color-white); text-decoration: none; margin-top: auto; transition: color 0.2s ease; } .news__read-more:hover { color: var(--color-turquoise-500); } /* ── Filter toggle mobile ── */ @media (max-width: 991px) { .news__toggle{ max-width: 100%; width: 100%; justify-content: center; } .news__toggle-btn { flex: 1; } } @media (max-width: 767px) { .news__toggle { width: 100%; justify-content: space-between; } .news__toggle-btn { flex: 1; min-width: 0; padding: 12px 8px; font-size: 15px; } } /* ── News Swiper overrides ── */ #newsSwiper { overflow: visible; } #newsSwiper .swiper-slide { height: auto; } @media (max-width: 767px) { #newsSwiper .swiper-slide { width: 90%; } } /* Suppress Swiper default bullet styles */ #newsPagination .swiper-pagination-bullet, #newsPaginationMobile .swiper-pagination-bullet { all: unset; } .awards { position: relative; background: #08070D; border-top: 1px solid var(--color-stroke); overflow: hidden; } /* Figma background: shutterstock image with mix-blend-mode saturation + dark gradient */ .awards__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: #08070D; } .awards__bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(192.261deg, rgb(0, 0, 0) 12.699%, rgba(0, 0, 0, 0) 62.141%); z-index: 1; } .awards__bg img { position: absolute; inset: 0; width: 100%; /* height: 100%; */ object-fit: cover; object-position: center; mix-blend-mode: saturation; display: block; } .awards__inner { position: relative; z-index: 1; padding: clamp(60px, 8vh, 120px) var(--nav-px); display: flex; flex-direction: column; gap: clamp(40px, 5.2vw, 80px); } .awards__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .awards__headline { /* font-family: var(--font-display); */ font-weight: 600; font-size: var(--type-h2-size); line-height: 1.05; color: #FFFEFD; margin: 0; max-width: 920px; text-transform: uppercase; } .awards__headline-hl { color: #D93EC7; } .awards__nav-indicators { display: flex; align-items: center; gap: 8px; flex-shrink: 0; width: auto !important; } .awards__tick { display: block; width: 1.935px; height: 9.59px; background: #59516D !important; border: none; padding: 0; cursor: pointer; flex-shrink: 0; } .awards__dot { display: block; width: 9.59px; height: 9.59px; background: #D00EB9 !important; border: none; padding: 0; cursor: pointer; flex-shrink: 0; } .awards__grid { position: relative; overflow: visible; } .awards__track { will-change: transform; } .awards__card { position: relative; background: rgba(8,7,13,0.8); border: 1px solid var(--color-stroke); display: flex; flex-direction: column; gap: 24px; padding: 24px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); height: auto; flex: 0 0 auto; width: 33%; } .awards__corner { position: absolute; width: 12px; height: 12px; background: var(--dot-color, #4F07AF); } .awards__corner--tl { top: -6px; left: -6px; } .awards__corner--tr { top: -6px; right: -6px; } .awards__corner--bl { bottom: -6px; left: -6px; } .awards__corner--br { bottom: -6px; right: -6px; } .awards__card-img { height: clamp(180px, 22vw, 360px); overflow: hidden; border: 1px solid var(--color-stroke); flex-shrink: 0; } .awards__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .awards__card-body { display: flex; flex-direction: column; gap: 16px; flex: 1; } .awards__card-title { font-family: var(--font-brand); font-weight: 400; font-size: var(--type-body-lg-size); line-height: 1; color: #FDFDFD; margin: 0; text-transform: uppercase; } .awards__card-sponsor { display: flex; align-items: center; margin-top: auto; } .awards__card-sponsor img { height: clamp(2.5rem, 2.2917rem + 0.9259vw, 3.125rem); width: auto; max-width: 200px; opacity: 0.6; object-fit: contain; } .awards__mobile-indicators { display: none; align-items: center; justify-content: center; gap: 8px; } /* ── Awards Swiper overrides ── */ #awardsSwiper { overflow: visible; } #awardsSwiper .swiper-slide { width: 33%; height: auto; } @media (max-width: 991px) { #awardsSwiper .swiper-slide { width: 80%; } .news__card-meta{ flex-direction: column; row-gap: 10px; align-items: flex-start; } } /* Suppress Swiper's default bullet styles — our BEM classes handle all styling */ #awardsPagination .swiper-pagination-bullet, #awardsPaginationMobile .swiper-pagination-bullet { all: unset; } @media (max-width: 767px) { .awards__header { flex-direction: column; gap: 16px; } .awards__nav-indicators { display: none; } .awards__mobile-indicators { display: flex; } .awards__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px; scrollbar-width: none; padding: 4px; justify-content: start; } .awards__grid::-webkit-scrollbar { display: none; } .awards__card { flex: 0 0 80vw; scroll-snap-align: start; } .awards__card-img { height: 220px; } } /* ════════════════════════════════════════════════════════ TESTIMONIALS SECTION ════════════════════════════════════════════════════════ */ .testimonials { position: relative; background: #08070D; border-top: 1px solid var(--color-stroke); overflow: hidden; } .testimonials__inner { position: relative; z-index: 1; padding: clamp(48px, 7.8vw, 120px) clamp(24px, 10.4vw, 200px) clamp(48px, 7.8vw, 120px); display: flex; flex-direction: column; gap: clamp(40px, 5.2vw, 80px); } /* ── Header ── */ .testimonials__header { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .testimonials__headline { /* font-family: var(--font-display); */ font-weight: 600; font-size: var(--type-h2-size); line-height: 1.05; color: #FFFEFD; margin: 0; text-transform: uppercase; } .testimonials__headline-hl { color: var(--color-ultrasonic-500); } .testimonials__nav { display: flex; align-items: center; gap: 24px; } .testimonials__arrow { width: 48px; height: 48px; border: 1px solid var(--color-stroke); background: #08070D; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: border-color 0.2s; } .testimonials__arrow:hover { border-color: #04DDCF; } .testimonials__arrow--prev img { transform: rotate(180deg); } .testimonials__indicators { display: flex; align-items: center; gap: 8px; } .testimonials__dot { display: block; width: 9.59px; height: 9.59px; background: #04DDCF; border: none; padding: 0; cursor: pointer; flex-shrink: 0; } .testimonials__tick { display: block; width: 1.935px; height: 9.59px; background: #59516D; border: none; padding: 0; cursor: pointer; flex-shrink: 0; } /* ── Viewport: overflow visible so next card peeks ── */ .testimonials__viewport { overflow: visible; width: 100%; } /* ── Track: cards side by side with 48px gap ── */ .testimonials__track { will-change: transform; } /* ── Card ── */ .testimonials__card { position: relative; flex: 0 0 auto; background: #08070D; border: 1px solid var(--color-stroke); display: flex; gap: 47px; padding: 32px; align-items: center; min-height: clamp(400px, 40vw, 570px); } /* ── Photo panel — bg #14101F, border, diagonal lines, photo, corner dots ── */ .testimonials__photo-panel { flex-shrink: 0; width: clamp(180px, 30vw, 422px); background: #14101F; border: 1px solid var(--color-stroke); position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; overflow: visible; } /* Diagonal X lines filling the panel */ .testimonials__photo-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; } .testimonials__photo-lines svg { display: block; width: 100%; height: 100%; } /* Photo inner container — 12.5% inset from panel edges */ .testimonials__photo-inner { position: absolute; inset: 12.5%; } .testimonials__photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 2.4px; display: block; } /* Semi-transparent border overlay on top of photo */ .testimonials__photo-border { position: absolute; inset: 0; border: 1px solid var(--color-stroke); border-radius: 2.4px; opacity: 0.5; pointer-events: none; } /* Play button centered over photo */ .testimonials__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border: 1px solid #FDFDFD; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; z-index: 1; } .testimonials__play:hover { background: rgba(255,255,255,0.1); } /* 4 corner dots on the photo panel — #7239BF, 9.59px */ .testimonials__photo-dot { position: absolute; width: 9.59px; height: 9.59px; background: #7239BF; display: block; pointer-events: none; z-index: 2; } .testimonials__photo-dot--tl { top: -4.8px; left: -4.8px; } .testimonials__photo-dot--tr { top: -4.8px; right: -4.8px; } .testimonials__photo-dot--bl { bottom: -4.8px; left: -4.8px; } .testimonials__photo-dot--br { bottom: -4.8px; right: -4.8px; } /* ── Content ── */ .testimonials__content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; align-self: stretch; } .testimonials__quote { font-family: var(--font-brand); font-weight: 400; font-size: clamp(15px, 1.46vw, 28px); line-height: 1.2; color: #EAE9ED; margin: 0; font-style: normal; } .testimonials__author-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .testimonials__author { display: flex; flex-direction: column; gap: 9.59px; } .testimonials__author-name { /* font-family: var(--font-display); */ font-weight: 400; font-size: clamp(20px, 1.875vw, 36px); line-height: 1; color: #FDFDFD; margin: 0; text-transform: uppercase; white-space: nowrap; } .testimonials__author-role { font-family: var(--font-brand); font-weight: 400; font-size: clamp(14px, 1.04vw, 20px); line-height: 1.5; color: #EAE9ED; margin: 0; white-space: nowrap; } .testimonials__sponsor-logo { height: 80px; width: 192px; display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; } .testimonials__sponsor-logo img { max-height: 60px; width: auto; object-fit: contain; opacity: 0.6; } .testimonials__mobile-indicators { display: none; align-items: center; justify-content: center; gap: 8px; } /* ── Override Swiper defaults for testimonials ── */ #testimonialsSwiper { overflow: visible; } #testimonialsSwiper .swiper-slide { height: auto; } @media (max-width: 767px) { #testimonialsSwiper .swiper-slide { width: 90%; flex-shrink: unset; } } @media (max-width: 991px) { #testimonialsSwiper .swiper-slide { width: calc(100% - 24px); } } @media (max-width: 767px) { #testimonialsSwiper .swiper-slide { width: 90%; flex: 0 0 auto; } } /* ── Responsive ── */ @media (max-width: 991px) { .testimonials__card { flex: 0 0 calc(100% - 24px); flex-direction: column; align-items: stretch; gap: 24px; padding: 24px; } .testimonials__photo-panel { width: 100%; min-height: 280px; align-self: auto; } .testimonials__content { min-height: auto; } .testimonials__author-name { white-space: normal; } .testimonials__author-role { white-space: normal; } .testimonials__header{ justify-content: center; } } @media (max-width: 767px) { .testimonials__inner { padding-left: var(--nav-px); padding-right: var(--nav-px); } .testimonials__header { flex-direction: column; gap: 16px; } .testimonials__nav { display: none; } .testimonials__mobile-indicators { display: flex; } .testimonials__quote { font-size: clamp(14px, 4vw, 18px); } .testimonials__card { flex: 0 0 calc(100vw - (var(--nav-px) * 2)); } } /* ════════════════════════════════════════════════════════ WE ARE SOCIAL ════════════════════════════════════════════════════════ */ .social { position: relative; background: #08070D; border-top: 1px solid var(--color-stroke); overflow: hidden; } .social__inner { position: relative; z-index: 1; padding: clamp(60px, 8vh, 120px) var(--nav-px); display: flex; flex-direction: column; gap: clamp(32px, 3.9vw, 60px); } /* ── Headline ── */ .social__headline { /* font-family: var(--font-display); */ font-weight: 600; font-size: var(--type-h2-size); line-height: var(--type-h2-lh); color: var(--color-dirt-white); margin: 0; text-transform: uppercase; } .social__headline-hl { color: var(--color-turquoise-500); } /* ── Let the Elfsight widget take full width ── */ .social__inner .elfsight-app-c2b54c1a-6b8a-48a2-906d-1692908ab3c7 { width: 100%; } /* ════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════ */ .footer { position: relative; background: #08070D; border-top: 1px solid var(--color-stroke); overflow: hidden; } /* ── Background image ── */ .footer__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .footer__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ── Additional accent image — bottom right ── */ .footer__bg-accent { position: absolute; bottom: 0; right: 0; width: clamp(280px, 40vw, 620px); pointer-events: none; z-index: 0; } .footer__bg-accent img { display: block; width: 100%; height: auto; } /* ── Inner ── */ .footer__inner { position: relative; z-index: 1; padding: clamp(48px, 5.2vw, 80px) clamp(24px, 6.25vw, 120px); display: flex; flex-direction: column; gap: clamp(40px, 4.2vw, 64px); } /* ── Main 4-col grid ── */ .footer__main { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto minmax(0, 1.4fr); gap: clamp(32px, 4.7vw, 72px); align-items: start; } /* ── Col 1: Event Info ── */ .footer__info { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 40px); } .footer__logo-link { display: inline-block; } .footer__logo-img { width: clamp(120px, 13vw, 200px); height: auto; } .footer__desc { font-family: var(--font-brand); font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); color: #EAE9ED; margin: 0; max-width: 441px; } .footer__nav { display: flex; flex-wrap: wrap; align-items: center; } .footer__nav-link { font-family: var(--font-brand); font-size: var(--type-h4-size); font-weight: 400; line-height: var(--type-h4-lh); color: #FDFDFD; text-decoration: none; white-space: nowrap; transition: color 0.2s ease; } .footer__nav-link:hover { color: var(--color-turquoise-500); } .footer__nav-sep { font-family: var(--font-brand); font-size: var(--type-h4-size); color: #59516D; margin: 0 clamp(8px, 0.8vw, 16px); line-height: var(--type-h4-lh); } /* ── Col 2: Schedule ── */ .footer__schedule { display: flex; flex-direction: column; gap: 8px; white-space: nowrap; } .footer__label { font-family: var(--font-brand); font-size: var(--type-label-size); line-height: var(--type-label-lh); color: #59516D; margin: 0; letter-spacing: var(--type-label-tracking); text-transform: uppercase; } .footer__schedule-body { font-family: var(--font-brand); font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); color: #FDFDFD; } .footer__schedule-body p { margin: 0; } .footer__schedule-gap { display: block; height: 0.6em; } /* ── Col 3: Location + Social ── */ .footer__location { display: flex; flex-direction: column; gap: clamp(20px, 2.1vw, 33px); } .footer__location-details { display: flex; flex-direction: column; gap: 8px; } .footer__address { font-family: var(--font-brand); font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); color: #FDFDFD; font-style: normal; margin: 0; white-space: nowrap; } .footer__social { display: flex; flex-direction: column; gap: 16px; } .footer__social-icons { display: flex; gap: 8px; } .footer__social-icons a:hover{ background-color: var(--color-orchid-500); } .footer__social-icons a:hover img{ mix-blend-mode: multiply; } /* ── Col 4: CTAs ── */ .footer__cta { display: flex; flex-direction: column; gap: 16px; } .footer__cta-headline { /* font-family: var(--font-display); */ font-size: clamp(16px, 1.6vw, 24px); font-weight: 400; line-height: 1.1; color: var(--color-white); text-transform: uppercase; margin: 0 0 8px; } .footer__cta-buttons { display: flex; flex-direction: column; gap: 16px; } .footer__btn { display: inline-flex; align-items: center; gap: 16px; padding: clamp(12px, 1vw, 16px); text-decoration: none; transition: filter 0.2s ease; align-self: flex-start; } .footer__btn:hover { filter: brightness(1.1); } .footer__btn--stand { background: #2B0460; } .footer__btn--visit { background: #027A72; } .footer__btn--contact { background: transparent;border: 1px solid #FFF; } .footer__btn-label { font-family: var(--font-brand); font-size: var(--type-button-size); font-weight: 400; line-height: var(--type-button-lh); color: #FDFDFD; white-space: nowrap; } .footer__btn-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; } .footer__btn-icon--purple { background: #4F07AF; } .footer__btn-icon--teal { background: #04DDCF; } .footer__btn-icon--orchid { background: #D93EC7; } .footer__contact { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; font-family: var(--font-brand); font-size: var(--type-button-size); font-weight: 400; line-height: var(--type-button-lh); color: #FDFDFD; text-decoration: none; transition: color 0.2s ease; white-space: nowrap; } .footer__contact:hover { color: var(--color-turquoise-500); } /* ── Divider ── */ .footer__divider { height: 1px; background: var(--color-stroke); width: 100%; } /* ── Bottom bar ── */ .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 2vw, 32px); flex-wrap: wrap; } .footer__legal { display: flex; align-items: center; gap: clamp(4px, 0.5vw, 8px); flex-wrap: wrap; } .footer__legal-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px; font-family: var(--font-brand); font-size: var(--type-button-size); font-weight: 400; line-height: var(--type-button-lh); color: #FFFEFD; text-decoration: none; white-space: nowrap; transition: color 0.2s ease; } .footer__legal-link:hover { color: var(--color-turquoise-500); } .footer__legal-dot { display: inline-block; width: 12px; height: 12px; background: #4F07AF; flex-shrink: 0; } .footer__copyright-row { display: flex; align-items: center; gap: 16px; } .footer__cta-buttons-list{ width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .footer__copyright { font-family: var(--font-brand); font-size: var(--type-meta-size); line-height: var(--type-meta-lh); color: #FDFDFD; margin: 0; white-space: nowrap; } .footer__back-top { background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; opacity: 0.85; transition: opacity 0.2s ease; } .footer__back-top:hover { opacity: 1; } /* ── Responsive: tablet ── */ @media (max-width: 1900px) { .footer__main{ grid-template-columns: minmax(0, 1.4fr) auto auto minmax(0, 1.4fr); } .footer__cta-buttons-list{ grid-template-columns: 1fr; } } @media (max-width: 1023px) { .footer__main { grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 48px); } .footer__cta-buttons-list{ grid-template-columns: 1fr 1fr; } .footer__schedule { grid-column: 1 / 2; } .footer__location { grid-column: 2 / 2; } .footer__cta { grid-column: 1 / -1; } } @media (max-width: 991px) and (min-width: 768px) { .footer__cta-buttons{ flex-direction: row; } } @media (max-width: 767px) { .footer__cta-buttons-list{ grid-template-columns: 1fr; } .footer__schedule { grid-column: 1 / 1; } .footer__location { grid-column: 2 / 1; } } /* ── Responsive: mobile ── */ @media (max-width: 639px) { .footer__main { grid-template-columns: 1fr; } .footer__cta-buttons { flex-direction: row; flex-wrap: wrap; } .footer__bottom { flex-direction: column; align-items: flex-start; } } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE REFLOW — tablet and mobile Rebuild desktop-heavy sections for smaller screens instead of only shrinking them. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1280px) { .news__card { width: 50%; } } @media (max-width: 991px) { .services__header, .speakers__header, .innovation__content, .launches__inner, .floorplan__headline-wrap, .news__header, .news__filters, .news__viewport, .social__inner, .footer__inner { padding-left: var(--nav-px); padding-right: var(--nav-px); } .services__slide { width: min(86vw, 640px); height: auto; min-height: 0; flex-direction: column; } .services__panel-text, .services__panel-video { flex: none; width: 100%; } .services__panel-text { gap: 16px; padding: 20px; } .services__panel-video { min-height: 220px; } .services__nav, .speakers__nav, .innovation__nav, .launches__bar { padding-left: var(--nav-px); padding-right: var(--nav-px); } .summit__inner { flex-direction: column; min-height: 0; } .summit__left { flex: none; min-height: clamp(280px, 52vw, 420px); } .summit__overlay { width: 100%; background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 36%, rgba(8, 7, 13, 0.78) 72%, #08070D 100% ); } .summit__content { padding: 32px var(--nav-px) 48px; } .speakers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-left: var(--nav-px); padding-right: var(--nav-px); } .speakers__col { display: contents; } .speakers__col--offset { padding-top: 0; } .speakers__col--center { align-items: stretch; } .speakers__card { width: 100%; } .speakers__cta { grid-column: 1 / -1; margin-top: 0; width: 100%; justify-content: space-between; order: 999; } .innovation__main { min-height: 0; } .innovation__overlay { background: linear-gradient( to bottom, rgba(1, 1, 1, 0.2) 0%, rgba(1, 1, 1, 0.6) 42%, #010101 100% ); } .innovation__content { max-width: none; padding-top: 72px; padding-bottom: 136px; } .innovation__body { max-width: 56ch; } .innovation__media{ min-height: clamp(280px, 52vw, 420px); position: relative; } .innovation__bar { justify-content: flex-end; padding: 20px var(--nav-px); } .innovation__logo-cell { flex-basis: calc(100vw / 2); } /* launches uses Swiper breakpoints for layout — no override needed */ .floorplan__visual { min-height: clamp(300px, 68vw, 520px); } .floorplan__map img { width: clamp(520px, 120vw, 980px); } .floorplan__legend { gap: 24px; padding: 32px var(--nav-px); flex-wrap: wrap; justify-content: flex-start; } .floorplan__legend-divider { display: none; } .news__header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; } .news__controls { width: 100%; justify-content: space-between; padding: 0; } .news__filters { flex-wrap: wrap; } .news__card { width: 50%; } .footer__bg-accent { opacity: 0.45; } .footer__copyright-row { width: 100%; justify-content: space-between; } .innovation__swiper { position: absolute; inset: 0; width: 100%; } .innovation__content{ padding-top: 30px !important; padding-bottom: 70px !important; } .innovation__overlay{ width: 100%; } } @media (max-width: 767px) { .exhibitors__header { align-items: flex-start; padding-bottom: 20px; } .exhibitors__mobile-swiper { display: block; padding: 0 var(--nav-px); background: #FDFDFD; overflow: hidden; } .exhibitors__mobile-card { min-height: 168px; display: flex; align-items: center; justify-content: center; padding: 28px; background: #FFFFFF; border-top: 1px solid #EAE9ED; border-bottom: 1px solid #EAE9ED; border-left: 1px solid #EAE9ED; } .exhibitors__mobile-card:last-child { border-right: 1px solid #EAE9ED; } .exhibitors__mobile-card img { display: block; width: 100%; max-width: 190px; max-height: 92px; object-fit: contain; } .exhibitors__mobile-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px var(--nav-px) 28px; background: #FDFDFD; } .services__header { padding-top: 28px; padding-bottom: 24px; text-align: left; } .services__headline { text-wrap: pretty; display: flex; flex-direction: column; } .services__slide { width: min(84vw, 420px); } .services__panel-text { flex: 1 1 auto; min-height: 0; justify-content: flex-start; gap: 14px; } .services__panel-video { flex: 0 0 180px; min-height: 180px; } .services__desc { font-size: 15px; line-height: 1.45; } .summit__left { min-height: 260px; } .summit__carousel { padding: 16px 20px; } .summit__content { gap: 20px; padding-top: 24px; } .speakers__header { text-align: left; padding-bottom: 24px; } .speakers__swiper, .speakers__nav { display: none; } .speakers__mobile { display: flex; flex-direction: column; gap: 16px; padding: 0 0 28px; } .speakers__mobile-swiper { overflow: hidden; width: 100%; } .speakers__mobile-card { width: 100%; } .speakers__mobile-card .speakers__card { width: 100%; } .speakers__mobile-card.is-revealed .speakers__card-icon, .speakers__mobile-card.is-revealed .speakers__card-info { opacity: 1; } .speakers__mobile-card.is-revealed .speakers__card-photo-wrap { transform: scale(0.78); } .speakers__mobile-cta { align-self: center; } .speakers__mobile-indicators { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 var(--nav-px); } .innovation__content { gap: 18px; padding-top: 56px; padding-bottom: 124px; } .innovation__headline { max-width: 12ch; } .innovation__main { min-height: 0; overflow: visible; display: block; } .innovation__media { position: relative; height: 320px; overflow: hidden; } .innovation__swiper { position: relative; width: 100%; height: 320px; } .innovation__overlay, .innovation__nav { /* display: none; */ } .innovation__bar { display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; align-items: center; justify-content: flex-end; padding: 16px 20px; } .innovation__bar-indicators { margin-left: 0; } .innovation__content { position: relative; max-width: none; padding: 24px var(--nav-px) 28px; background: #010101; } .innovation__headline { max-width: none; } .innovation__body { max-width: none; } .innovation__logos-swiper { height: clamp(100px, 30vw, 180px); } .innovation__logos-swiper .swiper-slide { width: clamp(180px, 62vw, 300px); } .innovation__logo-cell { height: 100%; padding: 0 20px; background: #08070D; border: 1px solid var(--color-stroke); } .launches__inner { gap: 28px; } .launches__card { gap: 14px; } .launches__img-frame { height: 240px; } .launches__mobile-indicators { display: flex; align-items: center; justify-content: center; gap: 8px; } .launches__bar { justify-content: space-between; } .launches__bar-label { font-size: 20px; } .floorplan__headline-wrap { padding-bottom: 24px; } .floorplan__visual { min-height: 0; padding-bottom: 12px; } .floorplan__bg { inset: 0 0 12px; } .floorplan__bg img { object-position: center top; } .floorplan__map { position: relative; pointer-events: auto; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; } .floorplan__map::-webkit-scrollbar { display: none; } .floorplan__map img { position: relative; display: block; bottom: auto; left: auto; transform: none; width: max(760px, 190vw); max-width: none; min-width: 100%; margin: 0 auto; } .floorplan__map-hint { position: absolute; right: 16px; bottom: 20px; z-index: 2; display: inline-flex; align-items: center; padding: 8px 12px; margin: 0; background: rgba(8, 7, 13, 0.42); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--color-dirt-white); font-family: 'Josefin Sans', sans-serif; font-size: 11px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; } .floorplan__legend { flex-direction: column; align-items: stretch; gap: 16px; padding-top: 24px; padding-bottom: 24px; } .floorplan__legend-col { gap: 12px; padding: 18px 16px; border: 1px solid var(--color-stroke); background: rgba(255, 255, 255, 0.02); } .floorplan__legend-event { font-size: 12px; line-height: 1; letter-spacing: 0.08em; } .floorplan__legend-items { flex-direction: column; gap: 14px; } .floorplan__legend-item { gap: 12px; } .floorplan__legend-dot { width: 28px; height: 28px; } .floorplan__legend-text { gap: 6px; } .floorplan__legend-name { font-size: 14px; white-space: normal; } .floorplan__legend-halls { font-size: 13px; line-height: 1.28; white-space: normal; } .news__headline { max-width: none; } .news__controls { display: none; } .news__filters { gap: 10px; margin-bottom: 20px; } .news__filter { padding: 10px 14px; font-size: 12px; } .news__viewport { overflow: visible; } .news__card { width: 90%; } .news__img-frame { height: 220px; } .news__indicators--desktop { display: none; } .news__indicators--mobile { display: flex; justify-content: center; padding: 1.5rem var(--nav-px); } .social__inner { gap: 24px; overflow: hidden; } .footer__inner { gap: 28px; } .footer__nav { row-gap: 8px; } .footer__schedule, .footer__address, .footer__contact, .footer__copyright { white-space: normal; } .footer__cta-buttons { flex-direction: column; } .footer__copyright-row { width: 100%; justify-content: space-between; } } /* ══════════════════════════════════════════════════════════ INGREDIENTS MODAL ══════════════════════════════════════════════════════════ */ /* ── Bootstrap modal overrides for sector modals ────────────── */ .modal-backdrop.show { background: rgba(1, 1, 1, 0.82); opacity: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .sector-modal .modal-dialog { max-width: 1200px; } /* Suppress Bootstrap's slide-down; our content does a subtle slide-up */ .sector-modal.fade .modal-dialog { transform: none; transition: none; } .sector-modal.show .ing-modal__box { animation: ing-modal-in 0.25s ease; } .ing-modal__box { background: #08070D; border: 1px solid #59516D95; border-radius: 0; overflow: visible; width: 100%; } .ing-modal__inner { max-height: 78vh; overflow-y: auto; padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 24px; } /* Corner accent squares */ .ing-modal__corner { position: absolute; width: 14px; height: 14px; pointer-events: none; display: none; } .ing-modal__corner--tl { top: -7px; left: -7px; background: var(--color-turquoise-500); } .ing-modal__corner--br { bottom: -7px; right: -7px; background: #D00EB9; } @keyframes ing-modal-in { from { transform: translateY(12px); } to { transform: translateY(0); } } .ing-modal__close { position: absolute; top: 16px; right: 16px; background: none; border: 1px solid var(--color-stroke); color: var(--color-white); width: 48px; height: 48px; border-radius: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .ing-modal__close svg{ width: 16px; height: 16px; } .ing-modal__close:hover { border-color: var(--color-turquoise-500); color: var(--color-turquoise-500); } .ing-modal__intro { font-family: var(--font-brand); font-size: clamp(20px, 1vw, 24px); line-height: var(--type-body-md-lh); color: var(--color-white); margin: 0; padding-right: 32px; } .ing-modal__list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(10px, 1vw, 16px); flex-wrap: wrap; } .ing-modal__list li { font-family: var(--font-brand); font-size: clamp(14px, 1vw, 16px); line-height: var(--type-body-md-lh); padding: 12px 16px; border: 1px solid var(--color-stroke); display: flex; align-items: flex-start; transition: color 0.2s; gap: 16px; font-weight: 400; line-height: 1.4; color: var(--color-white); flex: 0 0 auto; } /* The Figma "line" prefix — 32px wide dash in orchid colour */ .ing-modal__list li::before { content: ''; display: block; width: 32px; height: 1px; background: var(--color-orchid-500); flex-shrink: 0; margin-top: 0.7em; /* vertically centre against first line of text */ } /* ── Hotel modal extras ─────────────────────────────────────── */ .ing-modal__title { /* font-family: var(--font-display); */ font-weight: 400; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; color: var(--color-dirt-white); margin: 0; text-transform: uppercase; padding-right: 40px; /* clear the close button */ } .ing-modal__subtitle { font-family: var(--font-brand); font-size: var(--type-label-size); font-weight: 400; line-height: var(--type-label-lh); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--color-text-muted); margin: 0; } .ing-modal__body { font-family: var(--font-brand); font-size: clamp(14px, 1vw, 16px); line-height: 1.6; color: var(--color-white); } .ing-modal__body p, .ing-modal__body ul, .ing-modal__body ol { margin: 0 0 12px; } .ing-modal__body ul, .ing-modal__body ol { padding-left: 20px; } .ing-modal__body strong { color: var(--color-dirt-white); } .ing-modal__book-btn { align-self: flex-start; margin-top: 8px; } .ing-modal__book-btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ════════════════════════════════════════════════════════ EXPLORE DROPDOWN — nav menu inside the Explore button Figma: teal (#027A72) panel anchored to the right of the nav. Structure: explore-menu (l1) → explore-submenu (l2) → explore-submenu--l3 (l3) ════════════════════════════════════════════════════════ */ /* ── Hamburger icon inside Explore button ── */ .btn-explore__hamburger { flex-shrink: 0; display: block; width: 24px; height: 24px; transition: opacity 0.2s ease; position: relative; } .btn-explore__hamburger-line { height: 2px; width: 24px; background: var(--color-dirt-white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: ease-in-out .3s all; } .btn-explore__hamburger-line:first-child { transform: translate(-50%, -8px); } .btn-explore__hamburger-line:last-child { transform: translate(-50%, 6px); } .btn-explore.show .btn-explore__hamburger-line:first-child { transform: translate(-50%, -50%) rotate(45deg); } .btn-explore.show .btn-explore__hamburger-line:nth-child(2) { opacity: 0; } .btn-explore.show .btn-explore__hamburger-line:last-child { transform: translate(-50%, -50%) rotate(-45deg); } /* Hide the old chevron if it's still in DOM */ .btn-explore__chevron { display: none; } /* ── Explore dropdown wrapper ── */ .explore-dropdown { position: relative; } /* ── Level-1 menu panel ── */ .explore-menu.dropdown-menu { background: var(--color-turquoise-800) !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; min-width: 280px; right: 0 !important; left: auto !important; transform: none !important; top: 100%; z-index: 1; width: 100%; } /* ── Level-1 items (Exhibit / Visit rows) ── */ .explore-menu__item.dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; font-family: var(--font-brand); font-size: var(--type-button-size); font-weight: 400; color: var(--color-dirt-white); border-bottom: 0.5px solid rgba(255,255,255,0.15); cursor: pointer; transition: background 0.15s ease; } .explore-menu__item:last-child { border-bottom: none; } .explore-menu__item:hover, .explore-menu__item:focus, .explore-menu__item[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1) !important; color: var(--color-dirt-white); } /* Row with dot + label */ .explore-menu__row { display: flex; align-items: center; gap: 10px; flex: 1; } .explore-menu__label { font-family: var(--font-brand); font-size: var(--type-button-size); font-weight: 400; color: inherit; /* text-transform: uppercase; */ letter-spacing: 0.04em; } /* Chevron rotates when open */ .explore-menu__item[aria-expanded="true"] .chevron-right { transform: rotate(90deg); } /* ── Level-2 submenu ── */ .explore-submenu.dropdown-menu { background: rgba(2, 106, 99, 0.95) !important; /* slightly darker teal */ border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; position: static !important; width: 100% !important; transform: none !important; /* Bootstrap collapse handles show/hide */ } .explore-submenu__item.dropdown-item .chevron-right{ margin-left: auto; } .explore-submenu__item.dropdown-item { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 16px 24px; font-family: var(--font-brand); font-size: calc(var(--type-button-size) - 1px); font-weight: 400; color: var(--color-dirt-white); border-bottom: 0.5px solid rgba(255,255,255,0.1); /* text-transform: uppercase; */ letter-spacing: 0.03em; transition: background 0.15s ease; } .explore-submenu__item:last-child { border-bottom: none; } .explore-submenu__item:hover, .explore-submenu__item:focus, .explore-submenu__item[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1) !important; color: var(--color-dirt-white) !important; } .explore-submenu__item[aria-expanded="true"] .chevron-right { transform: rotate(90deg); } /* ── Level-3 submenu ── */ .explore-submenu--l3.dropdown-menu { background: rgba(1, 80, 74, 0.98) !important; /* even darker */ padding: 0 !important; } .explore-submenu--l3 .explore-submenu__item { padding-left: 24px; text-transform: none; font-size: calc(var(--type-button-size) - 2px); opacity: 0.9; } /* ── Desktop: right-align the panel ── */ @media (min-width: 1200px) { .explore-menu.dropdown-menu { /* right: 0 !important; left: auto !important; */ position: absolute !important; top: -1rem; right: -1rem !important; width: calc(100% + 2rem); padding: 100px 1rem 1rem 1rem !important; } .explore-dropdown{ position: static !important; align-items: stretch; display: flex; } /* Bootstrap collapse on desktop: keep always-expanded look via show */ .explore-submenu.dropdown-menu, .explore-submenu--l3.dropdown-menu { position: static !important; } } /* ── Mobile / tablet (< 1200px) ── */ @media (max-width: 1199px) { /* 1. Reverse the CTA stack so Explore sits on top */ .top-nav__cta { flex-direction: column-reverse; margin-top: 0; gap: 0; row-gap: 1rem; } /* 2. Hide the Explore trigger button — the menu shows directly */ .explore-dropdown > .btn-explore { display: none; } /* 3. Force the dropdown panel open and fully visible inline */ .explore-dropdown .explore-menu.dropdown-menu { display: block !important; position: static !important; visibility: visible !important; opacity: 1 !important; transform: none !important; width: 100% !important; min-width: unset !important; right: auto !important; left: auto !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; } /* 4. Also force any already-open collapse submenus to stay static */ .explore-dropdown .explore-submenu.dropdown-menu, .explore-dropdown .explore-submenu--l3.dropdown-menu { position: static !important; } } /* ── 404 Not Found ──────────────────────────────────────────── */ .notfound { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: #010101; } .notfound__bg { position: absolute; inset: 0; pointer-events: none; } .notfound__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .notfound__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 32%), linear-gradient(281deg, rgba(0,0,0,0) 18.35%, #000 94.8%); pointer-events: none; } .notfound__inner { position: relative; z-index: 1; padding: var(--nav-px); } .notfound__code { font-family: var(--font-display); font-size: clamp(100px, 18vw, 260px); line-height: 1; color: var(--color-ultrasonic-500); margin: 0 0 clamp(12px, 1.5vw, 24px); letter-spacing: -0.02em; } .notfound__heading { font-family: var(--font-display); font-size: clamp(28px, 5vw, 72px); line-height: 1.02; color: var(--color-white); text-transform: uppercase; margin: 0 0 clamp(16px, 2vw, 24px); } .notfound__body { font-size: clamp(14px, 1.2vw, 18px); color: var(--color-text-muted); line-height: 1.6; margin: 0 0 clamp(32px, 4vw, 48px); } .notfound__cta { display: inline-flex; } /* ── Preloader ──────────────────────────────────────────────── */ .preloader { position: fixed; inset: 0; z-index: 99999; background: #08070D; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: clamp(20px, 3vw, 36px); transition: opacity 0.7s ease, visibility 0.7s ease; } .preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; } /* — Corner brackets — */ .preloader__bracket { position: absolute; width: 36px; height: 36px; } .preloader__bracket::before, .preloader__bracket::after { content: ''; position: absolute; background: rgba(4, 221, 207, 0.4); } .preloader__bracket::before { width: 100%; height: 1px; top: 0; left: 0; } .preloader__bracket::after { width: 1px; height: 100%; top: 0; left: 0; } .preloader__bracket--tl { top: 28px; left: 28px; } .preloader__bracket--tr { top: 28px; right: 28px; transform: scaleX(-1); } .preloader__bracket--bl { bottom: 28px; left: 28px; transform: scaleY(-1); } .preloader__bracket--br { bottom: 28px; right: 28px; transform: scale(-1, -1); } /* — Wordmark — */ .preloader__wordmark { font-family: var(--font-display); font-size: clamp(3.2rem, 12vw, 7rem); letter-spacing: 0.15em; color: transparent; -webkit-text-stroke: 1px rgba(253, 253, 253, 0.10); position: relative; line-height: 1; user-select: none; } .preloader__wordmark-fill { position: absolute; top: 0; left: 0; font-family: var(--font-display); font-size: inherit; letter-spacing: inherit; line-height: inherit; color: var(--color-white); white-space: nowrap; clip-path: inset(100% 0 0 0); transition: clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1); } .preloader__wordmark-fill.reveal { clip-path: inset(0% 0 0 0); } /* — Spinning ring — */ .preloader__ring { position: relative; width: 72px; height: 72px; } .preloader__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: preloader-spin 2s linear infinite; } .preloader__ring-track { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 2; } .preloader__ring-arc { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 180 226; stroke-dashoffset: 0; animation: preloader-arc 2s ease-in-out infinite; } .preloader__ring-arc--bright { stroke: var(--color-turquoise-500); filter: drop-shadow(0 0 5px var(--color-turquoise-500)); } .preloader__ring-arc--dim { stroke: rgba(4, 221, 207, 0.3); stroke-dasharray: 60 346; animation: preloader-arc2 2s ease-in-out infinite; } .preloader__ring-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background: var(--color-turquoise-500); border-radius: 50%; box-shadow: 0 0 14px var(--color-turquoise-500), 0 0 28px rgba(4, 221, 207, 0.3); animation: preloader-dot 2s ease-in-out infinite; } @keyframes preloader-spin { to { transform: rotate(360deg); } } @keyframes preloader-arc { 0% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: -180; } 100% { stroke-dashoffset: -406; } } @keyframes preloader-arc2 { 0% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: -80; } 100% { stroke-dashoffset: -406; } } @keyframes preloader-dot { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; } 50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; } } /* — Counter — */ .preloader__counter { font-family: var(--font-brand); font-size: 0.7rem; letter-spacing: 0.3em; color: rgba(253, 253, 253, 0.2); text-transform: uppercase; } .preloader__counter span { color: var(--color-turquoise-500); font-weight: 600; } /* — Bottom progress bar — */ .preloader__bar-wrap { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: rgba(253, 253, 253, 0.06); overflow: hidden; } .preloader__bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--color-ultrasonic-500), var(--color-turquoise-500)); transition: width 0.1s linear; }