.hbot-sessions {
--hbot-cyan: #20b9e8;
--hbot-red: #ff1000;
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(4rem, 8vw, 7rem) 0 3rem;
background:
linear-gradient(180deg, rgba(6, 6, 7, 0.82), #08090b 32%, #101010),
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 8px);
color: #fff;
}
.hbot-sessions__glow {
position: absolute;
z-index: -1;
width: 34rem;
height: 34rem;
border-radius: 50%;
filter: blur(90px);
opacity: 0.16;
pointer-events: none;
}
.hbot-sessions__glow--red {
top: 8rem;
left: -20rem;
background: var(--hbot-red);
}
.hbot-sessions__glow--cyan {
right: -22rem;
bottom: 4rem;
background: var(--hbot-cyan);
}
.hbot-sessions__header {
max-width: 70rem;
margin: 0 auto clamp(2.5rem, 6vw, 5rem);
}
.hbot-sessions__eyebrow {
margin-bottom: 0.7rem;
color: #fff;
font-size: clamp(0.85rem, 2vw, 1.05rem);
font-variation-settings: "wght" 740, "wdth" 92;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.hbot-sessions__title {
margin: 0;
color: #fff;
font-size: clamp(4rem, 13vw, 9.5rem);
font-variation-settings: "wght" 850, "wdth" 72;
line-height: 0.82;
letter-spacing: -0.045em;
text-transform: uppercase;
text-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.65);
}
.hbot-sessions__title::after {
content: "";
display: block;
width: min(18rem, 58vw);
height: 0.28rem;
margin: 1.4rem auto 1.2rem;
background: linear-gradient(90deg, var(--hbot-red) 0 48%, transparent 48% 52%, var(--hbot-cyan) 52%);
box-shadow: 0 0 1rem rgba(32, 185, 232, 0.35);
}
.hbot-sessions__claim {
margin: 0;
color: #d9d9d9;
font-size: clamp(1rem, 2.8vw, 1.55rem);
font-style: italic;
font-variation-settings: "wght" 680, "wdth" 82;
letter-spacing: 0.035em;
text-transform: uppercase;
}
.hbot-sessions__feature {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
gap: clamp(2rem, 6vw, 5.5rem);
align-items: center;
}
.hbot-sessions__visual {
position: relative;
overflow: hidden;
min-height: 32rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.4rem 2.5rem 0.4rem 2.5rem;
background: #090a0c;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.4);
}
.hbot-sessions__visual::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 0.22rem;
background: linear-gradient(90deg, var(--hbot-red), var(--hbot-cyan));
box-shadow:
-10rem 0 2rem var(--hbot-red),
10rem 0 2rem var(--hbot-cyan);
}
.hbot-sessions__visual img {
width: 100%;
height: 100%;
min-height: 32rem;
object-fit: cover;
object-position: center;
filter: saturate(0.88) contrast(1.04);
}
.hbot-sessions__content {
padding-block: 1rem;
}
.hbot-sessions__kicker {
margin-bottom: 1rem;
color: #fff;
font-size: clamp(1.75rem, 4vw, 2.7rem);
font-variation-settings: "wght" 760, "wdth" 82;
line-height: 1.02;
}
.hbot-sessions__intro {
max-width: 38rem;
margin-bottom: 2rem;
color: #c7c7c7;
font-size: clamp(1.05rem, 2vw, 1.3rem);
line-height: 1.55;
}
.hbot-sessions__benefits {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
margin: 0 0 2.5rem;
padding: 0;
list-style: none;
border-top: 1px solid rgba(255, 255, 255, 0.14);
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.hbot-sessions__benefit {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 0.85rem;
align-items: center;
min-height: 7rem;
padding: 1rem;
border-right: 1px solid rgba(255, 255, 255, 0.14);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
color: #f2f2f2;
font-size: 0.96rem;
font-variation-settings: "wght" 650, "wdth" 88;
line-height: 1.25;
text-transform: uppercase;
}
.hbot-sessions__benefit-icon {
display: grid;
width: 3rem;
height: 3rem;
place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
color: var(--hbot-red);
font-size: 1.35rem;
}
.hbot-sessions__benefit:nth-child(even) .hbot-sessions__benefit-icon {
color: var(--hbot-cyan);
}
.hbot-sessions__actions {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.4rem;
align-items: center;
}
.hbot-sessions__cta {
min-height: 3.5rem;
font-variation-settings: "wght" 720, "wdth" 88;
text-transform: uppercase;
}
.hbot-sessions__reception {
flex: 1 1 14rem;
margin: 0;
color: #bcbcbc;
font-size: 0.95rem;
line-height: 1.35;
}
.hbot-sessions__legal {
max-width: 72rem;
margin: clamp(3rem, 6vw, 5rem) auto 0;
padding-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.13);
color: #9d9d9d;
font-size: 0.82rem;
line-height: 1.55;
text-align: center;
}
.hbot-booking-modal {
--bs-modal-bg: #111315;
--bs-modal-border-color: rgba(255, 255, 255, 0.12);
}
.hbot-booking-open #global-sticky-cta,
.hbot-booking-open #stickyCta {
display: none !important;
}
.hbot-booking-modal .modal-content {
overflow: hidden;
min-height: min(88vh, 58rem);
border: 1px solid rgba(255, 255, 255, 0.12);
background: #111315;
}
.hbot-booking-modal .modal-header {
border-bottom-color: rgba(255, 255, 255, 0.12);
}
.hbot-booking-modal .modal-title {
color: #fff;
font-variation-settings: "wght" 740, "wdth" 82;
text-transform: uppercase;
}
.hbot-booking-modal .modal-body {
position: relative;
display: grid;
min-height: 34rem;
padding: 0;
background: #fff;
}
.hbot-booking-modal__frame {
display: none;
width: 100%;
min-height: 34rem;
}
.hbot-booking-modal__frame.is-loaded {
display: block;
}
.hbot-booking-modal__frame iframe {
display: block;
width: 100%;
height: min(72vh, 52rem);
min-height: 34rem;
border: 0;
background: #fff;
}
.hbot-booking-modal__consent {
display: grid;
align-content: center;
justify-items: center;
min-height: 34rem;
padding: clamp(2rem, 6vw, 5rem);
background:
radial-gradient(circle at 20% 20%, rgba(255, 16, 0, 0.15), transparent 38%),
radial-gradient(circle at 80% 80%, rgba(32, 185, 232, 0.14), transparent 38%),
#111315;
color: #ddd;
text-align: center;
}
.hbot-booking-modal__consent p {
max-width: 44rem;
margin: 1rem auto 1.5rem;
font-size: 1rem;
line-height: 1.6;
}
.hbot-booking-modal__consent-icon {
color: var(--hbot-cyan);
font-size: 3rem;
}
.hbot-booking-modal .modal-footer {
justify-content: space-between;
border-top-color: rgba(255, 255, 255, 0.12);
}
@media (max-width: 991.98px) {
.hbot-sessions__feature {
grid-template-columns: 1fr;
}
.hbot-sessions__visual,
.hbot-sessions__visual img {
min-height: min(70vw, 35rem);
}
}
@media (max-width: 575.98px) {
.hbot-sessions {
padding-top: 3.5rem;
}
.hbot-sessions__benefits {
grid-template-columns: 1fr;
}
.hbot-sessions__benefit {
min-height: 5.5rem;
}
.hbot-sessions__actions,
.hbot-sessions__cta {
width: 100%;
}
.hbot-booking-modal .modal-content {
min-height: 100%;
}
.hbot-booking-modal .modal-body,
.hbot-booking-modal__frame,
.hbot-booking-modal__consent {
min-height: 0;
}
.hbot-booking-modal__frame iframe {
height: calc(100dvh - 11.5rem);
min-height: 30rem;
}
.hbot-booking-modal .modal-footer {
flex-wrap: nowrap;
gap: 0.5rem;
padding: 0.65rem 0.75rem;
}
.hbot-booking-modal .modal-footer .btn {
margin: 0;
padding-inline: 0.7rem;
font-size: 0.78rem;
white-space: normal;
}
}
@media (prefers-reduced-motion: reduce) {
.hbot-sessions *,
.hbot-sessions *::before,
.hbot-sessions *::after {
scroll-behavior: auto !important;
animation: none !important;
transition: none !important;
}
}