/* =============================================================
HEAT Elements — style.css v2.1.0
Geroscience Congress 2027 · heat-academy.com
=============================================================
STRUCTURE
1. Design tokens (:root vars)
2. Google Fonts import
3. Shared utilities (buttons, badges, labels)
4. Gold Stats Strip (.hgs__*)
5. Hero Main (#hmh-* scoped — in PHP)
6. Congress Highlight (#hch-* scoped — in PHP)
7. About / Mission (#hvm-* scoped — in PHP)
8. Tracks (#htk-* / .heat-tracks)
9. Speakers Cards (#hsc-* scoped — in PHP)
10. Upcoming Events (#hue-* scoped — in PHP)
11. Who Should Attend (#hwsa-* scoped — in PHP)
12. Sponsor Exhibitor CTA (#hsec-* scoped — in PHP)
13. Pricing Table (#hpt-* scoped — in PHP)
14. Location (#hloc-* scoped — in PHP)
15. Accommodation (#hacc-* scoped — in PHP)
16. Airline Partner (#hap-* scoped — in PHP)
17. Contact Strip (.heat-contact-strip)
18. Header (.heat-header)
19. Footer (.heat-footer)
20. Elementor wrapper resets
21. Original plugin CSS (all existing widgets)
============================================================= */
/* ─────────────────────────────────────────────────────────────
1. DESIGN TOKENS
───────────────────────────────────────────────────────────── */
:root {
/* Brand colours */
--heat-navy: var(--heat-navy);
--heat-teal: var(--heat-teal);
--heat-teal-mid: var(--heat-teal-mid);
--heat-teal-light: var(--heat-teal-light);
--heat-gold: var(--heat-gold);
--heat-gold-light: var(--heat-gold-light);
--heat-gold-pale: var(--heat-gold-pale);
--heat-cream: var(--heat-cream);
--heat-muted: var(--heat-muted);
--heat-muted-dark: var(--heat-muted-dark);
--heat-line: rgba(255,255,255,0.12);
--heat-line-dark: rgba(11,43,36,0.12);
/* Elementor global colour hooks — fallback to HEAT palette */
--he-color-primary: var(--e-global-color-primary, var(--heat-navy));
--he-color-secondary: var(--e-global-color-secondary, var(--heat-teal));
--he-color-accent: var(--e-global-color-accent, var(--heat-gold));
/* Typography */
--heat-display: "Playfair Display", Georgia, serif;
--heat-body: "Inter", system-ui, sans-serif;
/* Sizing */
--heat-r: 6px;
--heat-r2: 12px;
--heat-shadow: 0 4px 24px rgba(7,39,42,.10);
--heat-shadow-lg: 0 8px 40px rgba(7,39,42,.16);
}
/* ─────────────────────────────────────────────────────────────
2. GOOGLE FONTS
───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');
/* ─────────────────────────────────────────────────────────────
3. SHARED UTILITIES
───────────────────────────────────────────────────────────── */
.heat-label {
font-family: var(--heat-body);
font-size: 13px; font-weight: 700;
letter-spacing: .10em; text-transform: uppercase;
color: var(--heat-gold); display: block; margin-bottom: 14px;
}
.heat-badge {
display: inline-block; font-size: 11px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
padding: 5px 13px; border-radius: 20px;
}
.heat-badge--gold { background: var(--heat-gold-pale); color: #7A5F10; }
.heat-badge--teal { background: var(--heat-teal); color: #fff; }
.heat-badge--navy { background: var(--heat-navy); color: #fff; }
.heat-badge--white { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.2); }
/* Buttons */
.heat-btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--heat-body); font-weight: 600;
font-size: 15px; padding: 14px 28px;
border-radius: var(--heat-r); border: 2px solid transparent;
cursor: pointer; transition: .18s; text-decoration: none;
letter-spacing: .01em; line-height: 1;
}
.heat-btn--gold { background: var(--heat-gold); color: #fff; border-color: var(--heat-gold); }
.heat-btn--gold:hover { background: #A07F1A; border-color: #A07F1A; }
.heat-btn--outline { background: transparent; color: var(--heat-navy); border-color: var(--heat-navy); }
.heat-btn--outline:hover{ background: var(--heat-navy); color: #fff; }
.heat-btn--outline-w { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.heat-btn--outline-w:hover { background: rgba(255,255,255,.1); }
.heat-btn--lg { font-size: 18px; padding: 20px 40px; }
.heat-btn--sm { font-size: 14px; padding: 11px 22px; }
/* ─────────────────────────────────────────────────────────────
4. GOLD STATS STRIP (.hgs__*)
───────────────────────────────────────────────────────────── */
.hgs__wrap {
background: var(--heat-gold, var(--heat-gold));
padding: 18px 0;
}
.hgs__inner {
max-width: 1200px; margin: 0 auto; padding: 0 48px;
display: flex; align-items: center;
justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.hgs__item { display: flex; align-items: center; gap: 10px; color: #fff; }
.hgs__num { font-family: var(--heat-display); font-size: 26px; font-weight: 700; line-height: 1; }
.hgs__lbl { font-size: 12px; font-weight: 500; opacity: .85; line-height: 1.3; }
.hgs__div { width: 1px; height: 36px; background: rgba(255,255,255,.3); flex-shrink: 0; }
@media(max-width:768px) {
.hgs__inner { justify-content: center; }
.hgs__div { display: none; }
.hgs__inner { padding: 0 20px; }
}
/* ─────────────────────────────────────────────────────────────
5. HERO MAIN — scoped CSS injected by PHP widget
(.hmh__*) — see class-heat-widget-hero-main.php
───────────────────────────────────────────────────────────── */
/* Shared Elementor reset — injected per-instance in PHP, but
also set here as fallback */
.elementor-widget-heat_hero_main > .elementor-widget-container {
padding: 0 !important; margin: 0 !important;
}
/* ─────────────────────────────────────────────────────────────
6. CONGRESS HIGHLIGHT — scoped in PHP (.hch__*)
───────────────────────────────────────────────────────────── */
.elementor-widget-heat_congress_highlight > .elementor-widget-container {
padding: 0 !important; margin: 0 !important;
}
/* ─────────────────────────────────────────────────────────────
7. ABOUT / MISSION — scoped in PHP (.hvm__*)
───────────────────────────────────────────────────────────── */
.elementor-widget-heat_vision_mission > .elementor-widget-container {
padding: 0 !important; margin: 0 !important;
}
/* ─────────────────────────────────────────────────────────────
8. TRACKS / TOPICS (.heat-tracks__*)
───────────────────────────────────────────────────────────── */
.heat-tracks { padding: 96px 0; }
.heat-tracks__head {
max-width: 1200px; margin: 0 auto; padding: 0 48px;
text-align: center; margin-bottom: 56px;
}
.heat-tracks__heading {
font-family: var(--heat-display);
font-size: 52px; line-height: 1.1;
color: var(--heat-navy); margin: 0 0 18px;
}
.heat-tracks__sub {
font-size: 18px; line-height: 1.7;
color: var(--heat-muted); max-width: 640px; margin: 0 auto;
}
.heat-tracks__grid {
max-width: 1200px; margin: 0 auto; padding: 0 48px;
display: grid; grid-template-columns: repeat(4,1fr); gap: 24px;
}
.heat-tracks__card {
background: #fff; border-radius: 12px; padding: 32px;
border: 1px solid rgba(196,154,40,.15);
border-top: 4px solid var(--heat-gold);
display: flex; flex-direction: column; gap: 14px;
}
.heat-tracks__num { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--heat-gold); }
.heat-tracks__title { font-family: var(--heat-display); font-size: 22px; line-height: 1.2; color: var(--heat-navy); }
.heat-tracks__desc { font-size: 15px; line-height: 1.7; color: var(--heat-muted-dark); flex: 1; }
.heat-tracks__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.heat-tracks__tags span { font-size: 12px; background: var(--heat-gold-pale); color: #7A5F10; padding: 4px 11px; border-radius: 20px; font-weight: 500; }
.elementor-widget-heat_tracks > .elementor-widget-container { padding: 0 !important; }
@media(max-width:1024px) {
.heat-tracks__grid { grid-template-columns: repeat(2,1fr); padding: 0 24px; }
.heat-tracks__head { padding: 0 24px; }
.heat-tracks__heading { font-size: 36px; }
}
@media(max-width:640px) {
.heat-tracks__grid { grid-template-columns: 1fr; }
.heat-tracks__heading { font-size: 28px; }
.heat-tracks { padding: 64px 0; }
}
/* ─────────────────────────────────────────────────────────────
9-16. Widget sections — all use scoped ID-based CSS
injected directly in each widget's render() method.
(.hsc__*, .hue__*, .hwsa__*, .hsec__*,
.hpt__*, .hloc__*, .hacc__*, .hap__*)
─────────────────────────────────────────────────────────────
Only Elementor wrapper resets are global here: */
.elementor-widget-heat_speakers_cards > .elementor-widget-container,
.elementor-widget-heat_highlight_events > .elementor-widget-container,
.elementor-widget-heat_who_should_attend > .elementor-widget-container,
.elementor-widget-heat_sponsor_exhibitor_cta > .elementor-widget-container,
.elementor-widget-heat_pricing_table > .elementor-widget-container,
.elementor-widget-heat_location > .elementor-widget-container,
.elementor-widget-heat_accommodation > .elementor-widget-container,
.elementor-widget-heat_airline_partner > .elementor-widget-container {
padding: 0 !important;
margin: 0 !important;
}
/* ─────────────────────────────────────────────────────────────
17. CONTACT STRIP (.heat-contact-strip)
───────────────────────────────────────────────────────────── */
.heat-contact-strip { background: var(--heat-teal, var(--heat-teal)); padding: 28px 0; }
.heat-contact-strip__inner {
max-width: 1200px; margin: 0 auto; padding: 0 48px;
display: flex; gap: 40px; align-items: center;
justify-content: center; flex-wrap: wrap;
}
.heat-contact-item {
display: flex; align-items: center; gap: 12px;
color: rgba(255,255,255,.85); font-size: 14px;
}
.heat-contact-item__ic {
width: 40px; height: 40px; border-radius: 50%;
background: rgba(196,154,40,.18); border: 1px solid rgba(196,154,40,.3);
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0;
}
.heat-contact-item strong { display: block; color: #fff; }
@media(max-width:768px) {
.heat-contact-strip__inner { gap: 20px; padding: 0 20px; }
}
/* ─────────────────────────────────────────────────────────────
18. HEADER WIDGET (.heat-header)
───────────────────────────────────────────────────────────── */
.heat-header {
position: sticky; top: 0; z-index: 1000;
background: rgba(7,39,42,.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,.12);
}
.heat-header__inner {
max-width: 1200px; margin: 0 auto; padding: 0 48px;
display: flex; align-items: center;
justify-content: space-between; height: 76px; gap: 24px;
}
/* Logo */
.heat-header__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.heat-header__logo-img { height: 44px; width: auto; }
.heat-header__logo-ic {
width: 44px; height: 44px; border-radius: 50%; background: var(--heat-gold, var(--heat-gold));
display: flex; align-items: center; justify-content: center;
font-family: var(--heat-display); font-weight: 700; font-size: 13px;
color: #fff; flex-shrink: 0;
}
.heat-header__logo-tx { font-family: var(--heat-display); font-size: 20px; color: #fff; font-weight: 700; line-height: 1.1; }
.heat-header__logo-tx span { display: block; font-family: var(--heat-body); font-size: 10px; font-weight: 500; color: var(--heat-gold-light, var(--heat-gold-light)); letter-spacing: .08em; text-transform: uppercase; }
/* Nav links */
.heat-header__nav { display: flex; gap: 28px; align-items: center; }
.heat-header__link { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.7); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: .15s; }
/* Dropdown wrapper */
.heat-header__dropdown { position: relative; display: flex; align-items: center; }
.heat-header__link--has-drop { display: flex; align-items: center; gap: 5px; padding-bottom: 3px; }
.heat-header__caret { transition: transform .2s ease; flex-shrink: 0; }
.heat-header__dropdown:hover .heat-header__caret { transform: rotate(180deg); }
/* Submenu */
.heat-header__submenu {
position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
background: var(--heat-navy); border: 1px solid rgba(196,154,40,.3);
border-radius: 8px; padding: 8px 0; min-width: 220px;
box-shadow: 0 8px 32px rgba(0,0,0,.4);
opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
z-index: 99999;
}
.heat-header__dropdown:hover .heat-header__submenu {
opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.heat-header__submenu-link {
display: block; padding: 10px 20px;
font-size: 13px; font-weight: 500; color: rgba(255,255,255,.85);
text-decoration: none; transition: background .15s, color .15s;
white-space: nowrap;
}
.heat-header__submenu-link:hover { background: rgba(196,154,40,.15); color: var(--heat-gold); }
/* Mobile drawer child links */
.heat-header__drawer-link--child { padding-left: 24px !important; font-size: 14px !important; opacity: .75; border-bottom-color: rgba(255,255,255,.06) !important; }
.heat-header .heat-header__link:hover,
.heat-header .heat-header__link--on { color: #ffffff !important; border-color: var(--heat-gold, var(--heat-gold)) !important; }
/* CTA */
.heat-header__cta { display: flex; gap: 10px; align-items: center; }
/* Burger */
.heat-header__burger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 4px; width: 32px; height: 32px; position: relative; }
.heat-header__burger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease; }
.heat-header--open .heat-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.heat-header--open .heat-header__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.heat-header--open .heat-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Drawer */
.heat-header__drawer {
display: flex; flex-direction: column; gap: 4px; padding: 0 24px;
background: rgba(7,39,42,.98); border-top: 0 solid rgba(255,255,255,.12);
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height .38s cubic-bezier(.4,0,.2,1), opacity .28s ease, padding .38s ease, border-top-width .38s ease;
}
.heat-header--open .heat-header__drawer {
max-height: 720px; opacity: 1; padding: 16px 24px 20px; border-top-width: 1px;
}
.heat-header__drawer-link { font-size: 16px; font-weight: 500; color: rgba(255,255,255,.8); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); text-decoration: none; }
.elementor-widget-heat_header > .elementor-widget-container { padding: 0 !important; }
@media(max-width:1024px) {
.heat-header__nav { display: none; }
.heat-header__burger { display: flex; }
.heat-header__inner { padding: 0 20px; height: 68px; }
.heat-header__cta .heat-btn--outline-w { display: none; }
/* Account avatar/login trigger already duplicated as text links inside the drawer (My Account / Log Out / Log In),
so hide the icon-only version from the persistent top bar to avoid redundancy. */
.heat-header__cta .sithu-user-menu,
.heat-header__cta .sithu-login-wrapper { display: none; }
}
/* ─────────────────────────────────────────────────────────────
19. FOOTER WIDGET (.heat-footer)
───────────────────────────────────────────────────────────── */
.heat-footer { background: var(--heat-navy, var(--heat-navy)); padding: 80px 0 32px; }
.heat-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.heat-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 56px; }
/* Brand column */
.heat-footer__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.heat-footer__logo-tx { font-family: var(--heat-display); font-size: 20px; color: #fff; font-weight: 700; line-height: 1.1; }
.heat-footer__logo-tx span { display: block; font-family: var(--heat-body); font-size: 10px; font-weight: 500; color: var(--heat-gold-light, var(--heat-gold-light)); letter-spacing: .08em; text-transform: uppercase; }
.heat-footer__brand p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.45); max-width: 220px; margin-bottom: 20px; }
.heat-footer__socials { display: flex; gap: 10px; margin-top: 16px; }
.heat-footer__soc { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.6); text-decoration: none; transition: .18s; flex-shrink: 0; }
.heat-footer__soc i, .heat-footer__soc svg { font-size: 15px; width: 15px; height: 15px; }
.heat-footer__soc:hover { background: var(--heat-gold); border-color: var(--heat-gold); color: #fff; }
/* Link columns */
.heat-footer__col h5 { font-family: var(--heat-body); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.35); margin-bottom: 18px; }
.heat-footer__col a { display: block; font-size: 14px; padding: 6px 0; color: rgba(255,255,255,.55); text-decoration: none; transition: .15s; }
.heat-footer__col a:hover { color: var(--heat-gold-light, var(--heat-gold-light)); }
/* Bottom bar */
.heat-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.3); }
.elementor-widget-heat_footer > .elementor-widget-container { padding: 0 !important; }
@media(max-width:1024px) { .heat-footer__grid { grid-template-columns: 1fr 1fr; } .heat-footer__inner { padding: 0 24px; } }
@media(max-width:640px) { .heat-footer__grid { grid-template-columns: 1fr; } .heat-footer__bottom { flex-direction: column; gap: 8px; } }
/* ─────────────────────────────────────────────────────────────
20. ELEMENTOR GLOBAL RESETS
───────────────────────────────────────────────────────────── */
/* Remove default Elementor widget container padding for full-bleed widgets */
.elementor-widget-heat_hero_stats > .elementor-widget-container,
.elementor-widget-heat_contact_strip > .elementor-widget-container {
padding: 0 !important;
margin: 0 !important;
}
/* Hello Elementor theme body padding reset */
.heat-header,
.heat-footer,
.hgs__wrap,
.hch__wrap,
.hwsa__wrap,
.heat-contact-strip {
width: 100%;
box-sizing: border-box;
}
/* ─────────────────────────────────────────────────────────────
21. ORIGINAL PLUGIN CSS — all existing widgets unchanged
───────────────────────────────────────────────────────────── */
/* ---------- CTA ---------- */
.heat-cta, .heat-about, .heat-speakers, .heat-testimonials, .heat-sponsors, .heat-hero { position:relative; overflow:hidden; }
.heat-cta__inner, .heat-about__inner, .heat-speakers__inner, .heat-testimonials__inner { padding: 15px; }
.heat-cta .heat-cta__grid { display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; }
.heat-cta.layout-left .heat-cta__grid { grid-template-columns:1fr 1.2fr; }
.heat-cta__media img { width:100%; height:auto; border-radius:16px; display:block; }
.heat-cta__eyebrow { letter-spacing:.12em; text-transform:uppercase; font-weight:600; opacity:.85; margin-bottom:8px; color:var(--he-color-secondary); }
.heat-cta__title { font-size:clamp(28px,3vw,40px); line-height:1.15; margin:6px 0 12px; font-weight:700; color:var(--he-color-primary); }
.heat-cta__desc { font-size:16px; line-height:1.7; opacity:.95; margin-bottom:18px; }
.heat-cta__actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.heat-cta__btn { display:inline-block; padding:12px 20px; background:var(--he-color-primary); color:#fff; border-radius:999px; text-decoration:none; font-weight:600; transition:transform .2s ease, opacity .2s ease; }
.heat-cta__btn:hover { transform:translateY(-1px); opacity:.95; }
.heat-cta__link { font-weight:600; text-decoration:underline; }
.heat-pointer-label__link { text-decoration: none; }
.heat-pointer-label__link .heat-pointer-label__text { cursor: pointer; }
/* ---------- Sponsors (Home) ---------- */
.heat-sponsors-home {
text-align:center;
padding:80px 0;
}
.heat-sponsors-home__title {
font-size:clamp(24px,2.8vw,36px);
font-weight:700;
margin-bottom:8px;
}
.heat-sponsors-home__subtitle {
font-size:16px;
opacity:.85;
margin-bottom:40px;
}
.heat-sponsors-home__group {
font-weight:700;
text-transform:uppercase;
letter-spacing:.05em;
margin:24px 0 16px;
}
.heat-sponsors-home__main-logo img {
max-width:180px;
margin:auto;
display:block;
}
.heat-sponsors-home__grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:32px;
justify-items:center;
align-items:center;
margin-top:20px;
}
.heat-sponsors-home__item img {
width:auto;
height:auto;
max-width:140px;
opacity:.9;
transition:opacity .3s ease;
}
.heat-sponsors-home__item img:hover {
opacity:1;
}
/* ---------- About ---------- */
.heat-about .heat-about__grid{
display:grid;
grid-template-columns:1.05fr 1fr;
gap:28px;
align-items:center;
}
/* when image on the right */
.heat-about.image-right .heat-about__grid{
grid-template-columns:1fr 1.05fr;
}
/* when there is NO image => single column, full width */
.heat-about.no-image .heat-about__grid{
grid-template-columns:1fr;
}
/* hide the media column spacing when no image (just in case) */
.heat-about.no-image .heat-about__media{ display:none; }
.heat-about__media img{ width:100%; height:auto; border-radius:16px; display:block; }
.heat-about__label{ text-transform:uppercase; letter-spacing:.14em; font-weight:700; opacity:.8; margin-bottom:8px; color:var(--he-color-secondary); }
.heat-about__title{ font-size:clamp(24px,2.6vw,34px); line-height:1.2; margin:6px 0 14px; font-weight:700; color:var(--he-color-primary); }
.heat-about__desc{ font-size:16px; line-height:1.75; opacity:.95; }
.heat-about__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; }
.heat-about__stat{ background:#f8fafc; border:1px solid #e5e7eb; border-radius:14px; padding:14px; text-align:center; }
.heat-about__stat .num{ font-size:24px; font-weight:800; line-height:1.1; color:var(--he-color-primary); }
.heat-about__stat .lab{ font-size:12px; opacity:.8; }
/* 1) Base: two columns, image left by default */
.heat-about .heat-about__grid{
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 28px;
align-items: center;
}
/* 2) When Image Position = Right, actually swap the columns */
.heat-about.image-right .heat-about__grid{
grid-template-columns: 1fr 1.05fr; /* widths */
}
.heat-about.image-right .heat-about__media{ /* put image in the 2nd column */
grid-column: 2;
}
.heat-about.image-right .heat-about__content{ /* put text in the 1st column */
grid-column: 1;
}
/* 3) Mobile: single column. Force the order: image first, content second */
@media (max-width: 768px){
.heat-about .heat-about__grid{
grid-template-columns: 1fr; /* stack */
}
/* reset any column placement from desktop */
.heat-about__media,
.heat-about__content{
grid-column: auto !important;
}
/* make sure image is on top, text below */
.heat-about__media{ order: 1; }
.heat-about__content{ order: 2; }
/* optional: tighten spacing on phones */
.heat-about__title{ margin: 8px 0 12px; }
.heat-about__stats{ grid-template-columns: 1fr 1fr; }
}
/* (keep your existing typography/color rules) */
/* =========================================================
HEAT – Speakers (FINAL FULL WORKING CSS)
- Desktop columns via class: heat-speakers__grid--1..4
- Mobile always 1 column
- Photo: rounded only TOP corners
- Gradient fill at bottom (visible)
- Name pill fixed same size (short/long)
- Reduce empty space if no link/topics
========================================================= */
/* =======================
Grid
======================= */
.heat-speakers .heat-speakers__grid{
display:grid;
gap:23px;
/* ❌ DON'T set grid-template-columns here */
}
/* ✅ Desktop columns via class */
.heat-speakers .heat-speakers__grid.heat-speakers__grid--1{ grid-template-columns:repeat(1, minmax(0,1fr)); }
.heat-speakers .heat-speakers__grid.heat-speakers__grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.heat-speakers .heat-speakers__grid.heat-speakers__grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.heat-speakers .heat-speakers__grid.heat-speakers__grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
/* ✅ Tablet default (optional safety) */
@media (max-width: 1024px){
.heat-speakers .heat-speakers__grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:22px;
}
}
/* ✅ Mobile ALWAYS 1 column */
@media (max-width: 767px){
.heat-speakers .heat-speakers__grid{
grid-template-columns:1fr !important;
gap:18px;
}
}
/* =======================
Wrapper
======================= */
.heat-speaker{
display:flex;
flex-direction:column;
align-items:center;
text-align:left;
}
/* =======================
Card
======================= */
.heat-speaker__card{
position:relative;
width:100%;
overflow:visible; /* allow pill + link outside */
background:transparent;
transform:translateZ(0);
}
/* =======================
Media (photo holder)
======================= */
.heat-speaker__media{
position:relative;
overflow:hidden;
background:#1f2937; /* ✅ white base */
border-radius:22px 22px 0 0; /* ✅ only top corners */
}
/* Photo */
.heat-speaker__photo{
display:block;
width:100%;
aspect-ratio:4/5;
object-fit:cover;
position:relative;
z-index:1;
}
/* =======================
Bottom Gradient Fill
======================= */
.heat-speaker__media::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:26%; /* ✅ reduced height (adjust 22%–32%) */
background: var(--spk-grad, linear-gradient(135deg, #f59e0b, #ef4444));
/* fade upward nicely */
-webkit-mask-image: linear-gradient(to top,
rgba(0,0,0,1) 0%,
rgba(0,0,0,.85) 55%,
rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to top,
rgba(0,0,0,1) 0%,
rgba(0,0,0,.85) 55%,
rgba(0,0,0,0) 100%);
opacity:.95;
mix-blend-mode:normal;
z-index:2;
pointer-events:none;
}
/* ✅ optional soft shadow at bottom for depth */
.heat-speaker__media::before{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:30%;
background: linear-gradient(to top, rgba(0,0,0,.28), transparent 80%);
z-index:3;
pointer-events:none;
}
/* =======================
Gradient Palette (8 colors)
======================= */
.heat-speaker--1 { --spk-grad: linear-gradient(135deg,#f59e0b,#ef4444); }
.heat-speaker--2 { --spk-grad: linear-gradient(135deg,#22c55e,#06b6d4); }
.heat-speaker--3 { --spk-grad: linear-gradient(135deg,#3b82f6,#a855f7); }
.heat-speaker--4 { --spk-grad: linear-gradient(135deg,#ec4899,#f97316); }
.heat-speaker--5 { --spk-grad: linear-gradient(180deg,#9ca3af 0%,#6b7280 60%,#374151 100%); } /* gray */
.heat-speaker--6 { --spk-grad: linear-gradient(135deg,#14b8a6,#6366f1); }
.heat-speaker--7 { --spk-grad: linear-gradient(135deg,#84cc16,#22c55e); }
.heat-speaker--8 { --spk-grad: linear-gradient(180deg,#e5e7eb 0%,#9ca3af 60%,#4b5563 100%); } /* light gray */
/* =======================
Name Pill (same size always)
======================= */
.heat-speaker__name-pill{
position:absolute;
left:50%;
bottom:-26px;
transform:translateX(-50%);
z-index:4;
background:var(--he-color-accent);
color:#111827;
font-weight:900;
font-size:15px;
letter-spacing:.08em;
text-transform:uppercase;
width:78%;
max-width:92%;
height:74px; /* ✅ fixed height (same for all) */
padding:10px 16px;
border-radius:22px;
box-shadow:0 10px 26px rgba(0,0,0,.18);
display:flex; /* ✅ perfect center */
align-items:center;
justify-content:center;
text-align:center;
line-height:1.2;
/* ✅ wrap + clamp */
white-space:normal;
word-break:break-word;
overflow:hidden;
}
/* =======================
Link Icon
======================= */
.heat-speaker__link{
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:-66px;
z-index:5;
background:#0f172a;
color:#fff;
width:38px;
height:38px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
border:3px solid #e5e7eb;
text-decoration:none;
pointer-events:auto;
}
/* =======================
Meta spacing
======================= */
.heat-speaker__meta{
padding-top:106px; /* space for pill + link */
}
/* ✅ If no link, reduce top padding */
.heat-speaker.no-link .heat-speaker__meta{
padding-top:38px;
}
/* ✅ If no topics, remove extra spacing */
.heat-speaker.no-topics .heat-speaker__topics-title,
.heat-speaker.no-topics .heat-speaker__topics{
display:none !important;
}
/* ✅ If no link AND no topics, even tighter */
.heat-speaker.no-link.no-topics .heat-speaker__meta{
padding-top:72px;
}
/* =======================
Role + Topics
======================= */
.heat-speaker__role{
font-size:13px;
opacity:.8;
margin-bottom:4px;
}
.heat-speaker__topics-title{
font-weight:800;
margin:6px 0 8px;
color:var(--he-color-primary);
}
.heat-speaker__topics{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:6px;
}
.heat-speaker__topics li{
position:relative;
padding-left:20px;
font-size:15px;
line-height:1.6;
}
.heat-speaker__topics li:before{
content:'\2022';
position:absolute;
left:6px;
top:0;
color:var(--he-color-primary);
font-weight:900;
}
/* =======================
Mobile tweaks
======================= */
@media (max-width: 767px){
.heat-speaker__name-pill{
width:84%;
height:72px;
font-size:14px;
letter-spacing:.06em;
bottom:-24px;
}
.heat-speaker__link{
width:36px;
height:36px;
bottom:-56px;
}
.heat-speaker__meta{
padding-top:94px;
}
.heat-speaker__media::after{
height:24%;
}
}
/* ==========================================
PRO TOPIC UI (Make it more premium + aligned)
========================================== */
/* ✅ Make meta always full width (fix floating right issue) */
.heat-speaker__meta{
width:100%;
box-sizing:border-box;
/* keep your spacing for pill/link but make it nicer */
padding:72px 18px 18px;
}
/* ✅ Optional: if no link tighten a bit (keep your logic) */
.heat-speaker.no-link .heat-speaker__meta{
padding-top:38px;
}
.heat-speaker.no-link.no-topics .heat-speaker__meta{
padding-top:72px;
}
/* ✅ Topic title becomes small label */
.heat-speaker__topics-title{
display:inline-flex;
align-items:center;
gap:8px;
font-weight:800;
font-size:12px;
letter-spacing:.14em;
text-transform:uppercase;
color:#0f172a;
margin:10px 0 10px;
/* label look */
background:#f8fafc;
border:1px solid #e5e7eb;
padding:2px 10px;
border-radius:999px;
}
/* ✅ Topic list becomes a neat "mini card" block */
.heat-speaker__topics{
list-style:none;
padding:12px;
margin:0;
display:grid;
gap:10px;
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:16px;
box-shadow:0 12px 30px rgba(15, 23, 42, .06);
}
/* ✅ Each topic row */
.heat-speaker__topics li{
position:relative;
padding:6px 12px 5px 40px;
font-size:14px;
line-height:1.55;
color:#334155;
background:#f8fafc;
border:1px solid #eef2f7;
border-radius:12px;
}
/* ✅ Replace old bullet with modern dot */
.heat-speaker__topics li:before{
content:"";
position:absolute;
left:14px;
top:14px;
width:10px;
height:10px;
border-radius:999px;
background: var(--he-color-primary);
box-shadow:0 0 0 4px rgba(59,130,246,.12);
}
/* ✅ Mobile polish */
@media (max-width: 767px){
.heat-speaker__meta{
padding:94px 14px 16px;
}
.heat-speaker__topics{
padding:10px;
border-radius:14px;
}
.heat-speaker__topics li{
font-size:14px;
padding:10px 12px 10px 38px;
}
.heat-speaker__topics li:before{
left:12px;
top:14px;
}
}
/* ==========================================
CLEAN TOPIC LIST (NO BG / NO BORDER)
========================================== */
/* topic list – no box */
.heat-speaker__topics{
background:none !important;
border:none !important;
box-shadow:none !important;
padding:0 !important;
margin:0;
gap:8px;
}
/* each topic row */
.heat-speaker__topics li{
background:none !important;
border:none !important;
padding-left:28px;
font-size:14px; /* 🔽 smaller */
line-height:1.55;
color:#6b7280; /* soft professional gray */
display:flex;
align-items:flex-start; /* ✅ perfect vertical alignment */
}
/* check icon aligned */
.heat-speaker__topics li:before{
content:"✓";
position:absolute;
left:0;
top:13px;
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
font-weight:800;
border-radius:999px;
background:#e5e7eb;
color:#6b7280;
}
/* topic title smaller & tighter */
.heat-speaker__topics-title{
font-size:13px;
letter-spacing:.06em;
margin-bottom:8px;
}
/* mobile tuning */
@media (max-width: 767px){
.heat-speaker__topics li{
font-size:13px;
padding-left:26px;
}
.heat-speaker__topics li:before{
width:16px;
height:16px;
font-size:10px;
}
}
/* ===== Testimonials Bubble Slider (with modal) ===== */
.heat-testi{
position:relative;
overflow:hidden;
padding-bottom:24px;
--testi-gap: 20px;
}
/* track */
.heat-testi__track{
display:flex;
gap:var(--testi-gap);
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-ms-overflow-style:none;
scrollbar-width:none;
}
.heat-testi__track::-webkit-scrollbar{ display:none; }
/* slide (width is set by JS) */
.heat-testi__slide{
flex:0 0 auto;
scroll-snap-align:start;
}
/* card button */
.heat-testi__bubble{
width:100%;
text-align:left;
border:1px solid #e5e7eb;
background:#ffffff !important;
color:#0f172a;
cursor:pointer;
border-radius:18px;
padding:16px 18px 18px 18px;
position:relative;
box-shadow:0 12px 28px rgba(2,6,23,.10);
min-height:110px;
transition:transform .15s ease, box-shadow .15s ease;
}
.heat-testi__bubble::before,
.heat-testi__bubble::after{ display:none !important; }
.heat-testi__bubble:hover{
transform: translateY(-3px);
box-shadow:0 16px 36px rgba(2,6,23,.12);
}
/* header inside card */
.heat-testi__head{
display:flex; align-items:center; gap:12px;
margin-bottom:10px;
}
.heat-testi__avatar{
width:44px; height:44px; border-radius:50%; object-fit:cover;
box-shadow:0 0 0 2px #fff, 0 2px 10px rgba(2,6,23,.15);
}
.heat-testi__meta{ display:flex; flex-direction:column; }
.heat-testi__name{ font-weight:800; font-size:16px; line-height:1.2; color:#0f172a; }
.heat-testi__role{ font-size:13px; color:#64748b; margin-top:2px; }
.heat-testi__date{
margin-left:auto;
font-size:12px; color:#94a3b8; white-space:nowrap;
}
/* message */
.heat-testi__message{
font-size:16px; line-height:1.65; color:#0f172a;
white-space:normal; overflow-wrap:anywhere; word-break:break-word;
}
/* arrows */
.heat-testi__arrow{
position:absolute; top:40%; transform:translateY(-50%);
background:#fff; color:#111827;
border:0; width:36px; height:36px; border-radius:50%;
box-shadow:0 6px 18px rgba(0,0,0,.15);
cursor:pointer; display:flex; align-items:center; justify-content:center;
transition:all .2s ease; z-index:2;
}
.heat-testi__arrow:hover{ background:#111827; color:#fff; }
.heat-testi__prev{ left:-14px; } .heat-testi__next{ right:-14px; }
@media (max-width:768px){ .heat-testi__arrow{ width:32px; height:32px; } }
/* ===== Modal ===== */
.heat-testi__modal{ position:fixed; inset:0; display:none; z-index:9999; }
.heat-testi__modal[aria-hidden="false"]{ display:block; }
.heat-testi__modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.heat-testi__modal-dialog{ position:relative; max-width:720px; margin:6vh auto; background:#fff; border-radius:16px; box-shadow:0 30px 60px rgba(0,0,0,.35); padding:20px 22px; outline:0; }
@media (max-width:780px){ .heat-testi__modal-dialog{ margin:8vh 16px; } }
.heat-testi__modal-close{ position:absolute; top:10px; right:12px; width:36px; height:36px; border-radius:50%; border:0; background:#f3f4f6; color:#111; font-size:20px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.heat-testi__modal-close:hover{ background:#111; color:#fff; }
.heat-testi__modal-head{ display:flex; gap:14px; align-items:center; margin-bottom:10px; }
.heat-testi__modal-photo{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.heat-testi__modal-title{ font-weight:800; font-size:14px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.heat-testi__modal-name{ font-weight:800; font-size:18px; }
.heat-testi__modal-role, .heat-testi__modal-date{ font-size:13px; opacity:.75; }
.heat-testi__modal-body{ margin-top:8px; font-size:16px; line-height:1.75; color:#374151; }
@media (max-width:680px){
.heat-testi__avatar{ width:40px; height:40px; }
.heat-testi__name{ font-size:15px; }
.heat-testi__message{ font-size:15px; }
}
.heat-testi__bubble {
overflow: hidden;
}
.heat-testi__head {
flex-wrap: wrap; /* allow name/date to wrap properly */
}
.heat-testi__meta {
min-width: 0; /* allows flexbox to shrink text */
flex: 1; /* take available width */
overflow: hidden;
}
.heat-testi__name {
font-weight: 800;
font-size: 16px;
line-height: 1.3;
color: #0f172a;
white-space: normal; /* allow wrapping */
overflow-wrap: anywhere; /* break long names */
word-break: break-word;
}
.heat-testi__role {
font-size: 13px;
color: #64748b;
white-space: normal;
overflow-wrap: anywhere;
}
@media (max-width: 600px) {
.heat-testi__head {
flex-direction: column;
align-items: flex-start;
}
.heat-testi__date {
margin-left: 0;
margin-top: 4px;
}
}
/* ---------- Sponsors ---------- */
.heat-sponsors{ padding:20px 0; }
.heat-sponsors__head{ text-align:center; margin-bottom:28px; }
.heat-sponsors__overline{ color: var(--he-color-accent); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:12px; }
.heat-sponsors__title{ font-size:clamp(24px,3vw,36px); margin:6px 0; color:var(--he-color-primary); }
.heat-sponsors__divider{ display:flex; justify-content:center; margin-top:8px; }
.heat-sponsors__divider span{ width:72px; height:3px; background:var(--he-color-accent); border-radius:999px; display:block; }
.heat-sponsors__package{ border-radius:18px; padding:24px; margin:30px 0; }
.heat-sponsors__pkg-title{ margin:0 0 16px; font-size:18px; font-weight:800; letter-spacing:.04em; }
.heat-sponsors__grid{ display:grid; grid-template-columns:repeat(var(--he-sp-cols,4), minmax(0,1fr)); gap:var(--he-sp-gap,24px); }
.heat-sponsor__square{ position:relative; display:block; width:100%; border-radius:12px; overflow:hidden; background:#f1f5f9; }
.heat-sponsor__square::before{ content:""; display:block; padding-top:100%; }
.heat-sponsor__square img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.heat-sponsor__link:hover .heat-sponsor__square img{ transform:scale(1.04); }
/* ---------- Hero Stats (power look) ---------- */
.heat-hero{
position: relative;
padding: 22px;
border: 0 solid rgba(255,255,255,.25);
border-radius: 12px;
width: 100%;
background: transparent;
--he-hero-number: var(--e-global-color-accent,#f43f5e);
--he-hero-accent: #F4B000; /* overridden by control */
color: #fff;
}
/* alignment */
.heat-hero__content{
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.align-center .heat-hero__content{ align-items: center; text-align: center; }
.align-right .heat-hero__content{ align-items: flex-end; text-align: right; }
.heat-hero.has-border{ border-width: 2px; }
/* Headline (HEAT line) */
.heat-hero__headline{
font-size: clamp(28px, 4.3vw, 66px);
line-height: 1.05;
font-weight: 900;
letter-spacing: -0.01em;
margin: 6px 0 10px;
text-shadow: 0 1px 12px rgba(0,0,0,.25);
}
.heat-hero__headline .heat-accent{
color: var(--he-hero-accent);
font-weight: 900;
margin-right: .04em;
display: inline-block;
transform: translateY(1px);
}
/* Stats row/column */
.heat-hero__stats{
display: flex;
flex-direction: column;
gap: 6px;
margin: 6px 0 14px;
}
.heat-hero.is-horizontal .heat-hero__stats{
flex-direction: row;
gap: 22px;
flex-wrap: wrap;
align-items: baseline;
}
.heat-hero__stat strong{
font-size: clamp(36px, 3.8vw, 58px);
font-weight: 800;
color: var(--he-hero-number);
line-height: 1;
}
.heat-hero__stat span{
font-size: clamp(18px, 1.6vw, 26px);
font-weight: 600;
margin-left: .15em;
opacity: .95;
}
/* Subtitle / desc */
.heat-hero__subtitle{
margin-top: 4px;
margin-bottom: 10px;
font-weight: 700;
letter-spacing: .01em;
}
.heat-hero__desc{
font-size: clamp(14px, 1.05vw, 18px);
line-height: 1.7;
max-width: 760px;
margin-bottom: 18px;
opacity: .92;
}
/* ===================== Buttons (Elementor color-ready) ===================== */
.heat-hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }
/* base */
.heat-hero__btn{
display:inline-block;
font-weight:700;
line-height:1;
text-decoration:none;
padding:10px 18px;
border-radius:999px;
border:2px solid transparent;
transition:transform .25s ease,opacity .25s ease,
background-color .25s ease,color .25s ease,border-color .25s ease;
will-change:transform;
}
.heat-hero__btn:hover{ transform:translateY(-2px); opacity:.95; }
/* sizes */
.btnsize-sm .heat-hero__btn{ font-size:14px; padding:.55rem .8rem; }
.btnsize-md .heat-hero__btn{ font-size:16px; padding:.75rem 1rem; }
.btnsize-lg .heat-hero__btn{ font-size:18px; padding:1rem 1.25rem; }
/* variants */
.heat-hero__btn.is-solid{
/* Elementor BG control will override this inline automatically */
background:#6d28d9;
color:#fff;
border-color:transparent;
}
.heat-hero__btn.is-outline{
background:transparent;
color:#fff;
border:2px solid currentColor; /* border color control applies */
}
.heat-hero__btn.is-ghost{
background:rgba(255,255,255,.07);
color:#fff;
border:2px solid currentColor;
}
.heat-hero__btn.is-link{
background:transparent !important;
border-color:transparent !important;
padding:0;
text-decoration:underline;
}
/* allow Elementor background picker to override */
.heat-hero__btn--primary,
.heat-hero__btn--secondary{
background:var(--e-global-color-primary,inherit);
}
/* Mobile tweaks */
@media (max-width: 768px){
.heat-hero{ padding: 18px; }
.heat-hero__headline{ font-size: clamp(26px, 7.4vw, 44px); }
.heat-hero__stat strong{ font-size: clamp(30px, 7vw, 40px); }
.heat-hero__stat span{ font-size: clamp(16px, 4.5vw, 20px); }
}
/* Quote Block */
.heat-quote {
position: relative;
display: block;
text-align: center;
font-style: normal;
margin: 40px auto;
}
.heat-quote__icon {
font-size: 64px;
line-height: 1;
font-weight: 700;
opacity: 0.25;
color: var(--e-global-color-accent, #f59e0b);
}
.heat-quote__text {
font-size: 28px;
font-weight: 600;
margin: 15px 0;
color: #fff;
}
.heat-quote__author {
display: block;
margin-top: 8px;
font-size: 16px;
opacity: 0.8;
color: #ddd;
}
/* ==== Highlight Events (Side-by-Side Version) ==== */
.heat-events--side {
display: flex;
flex-direction: column;
gap: var(--he-ev-gap, 40px);
}
.heat-event--side {
display: flex;
flex-wrap: wrap;
align-items: stretch;
background: #0b1220;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,.2);
transition: transform .3s ease;
}
.heat-event--side:hover { transform: translateY(-4px); }
.heat-event__poster {
flex: 0 0 40%;
position: relative;
background: #111827;
min-height: 500px;
}
.heat-event__poster img {
position: absolute;
inset: 0;
width: 85%;
height: 100%;
object-fit: cover;
}
.heat-event__badge {
position: absolute;
left: 16px;
top: 16px;
background: var(--e-global-color-accent, #f59e0b);
color: #0b1220;
font-weight: 700;
padding: 6px 12px;
border-radius: 30px;
font-size: 13px;
}
.heat-event__body {
flex: 1;
padding: 40px 32px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
color: #f3f4f6;
}
.heat-event__title {
font-size: clamp(24px, 3vw, 28px);
font-weight: 800;
color: var(--e-global-color-primary, #fff);
margin: 0;
}
.heat-event__meta {
font-size: 15px;
color: #cbd5e1;
}
.heat-event__excerpt {
font-size: 16px;
line-height: 1.6;
color: #d1d5db;
margin: 0;
max-width: 90%;
}
.heat-event__actions {
display: flex;
gap: 14px;
margin-top: 20px;
flex-wrap: wrap;
}
.heat-event__btn {
padding: 12px 22px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all .2s ease;
}
.heat-event__btn--primary {
background: var(--e-global-color-accent, #f59e0b);
color: #111827;
}
.heat-event__btn--ghost {
border: 2px solid rgba(255,255,255,.3);
color: #fff;
background: transparent;
}
.heat-event__btn:hover { transform: translateY(-2px); }
/* Mobile Stack */
@media (max-width: 768px) {
.heat-event__poster img{
width: 100%;
}
.heat-event--side { flex-direction: column; }
.heat-event__poster { flex: 0 0 auto; min-height: 280px; }
.heat-event__body { padding: 24px; }
}
/* === Slider shell (1 per slide) === */
.heat-events--slider{ position:relative }
.heat-events--slider .heat-events__track{
display:flex;
gap:var(--he-ev-gap, 40px);
overflow:hidden; /* hide overflow for slider */
scroll-behavior:smooth;
will-change: scroll-position;
}
.heat-events--slider .heat-events__slide{
flex:0 0 100%; /* 1 per view */
max-width:100%;
}
/* Arrows */
.heat-events__arrow{
position:absolute; top:50%; transform:translateY(-50%);
border:0; width:38px; height:38px; border-radius:999px; cursor:pointer;
background:#111827; color:#fff; opacity:.9; box-shadow:0 6px 18px rgba(0,0,0,.25);
display:flex; align-items:center; justify-content:center; z-index:2;
}
.heat-events__prev{ left:8px; }
.heat-events__next{ right:8px; }
.heat-events__arrow:hover{ background:#f59e0b; color:#111827 }
/* ===== Upcoming Events Slider (Perfected Version) ===== */
.heat-evs {
--evs-per: var(--evs-per-desktop, 3);
--evs-gap: 16px;
position: relative;
overflow: hidden;
}
@media (max-width: 1024px) { .heat-evs { --evs-per: var(--evs-per-tablet, 2); } }
@media (max-width: 680px) { .heat-evs { --evs-per: var(--evs-per-mobile, 1); } }
/* === Track === */
.heat-evs__track {
display: flex;
gap: var(--evs-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 0; /* remove space below */
-ms-overflow-style: none; /* hide scrollbar IE/Edge */
scrollbar-width: none; /* hide scrollbar Firefox */
}
.heat-evs__track::-webkit-scrollbar { display: none; } /* hide scrollbar Chrome/Safari */
/* === Each Slide === */
.heat-evs__slide {
flex: 0 0 calc((100% - (var(--evs-per) - 1) * var(--evs-gap)) / var(--evs-per));
scroll-snap-align: start;
background: transparent;
position: relative;
transition: transform .25s ease;
}
.heat-evs__slide:hover { transform: translateY(-4px); }
/* === Poster (Image Rounded Only) === */
.heat-evs__poster {
width: 100%;
/*aspect-ratio: 3/4;*/
background: transparent;
position: relative;
}
.heat-evs__poster img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
border-radius: 18px; /* image only rounded */
background: #000; /* subtle matte if letterboxed */
}
/* === Overlay (Buttons on Hover) === */
.heat-evs__slide-overlay {
position: absolute;
inset: 0;
border-radius: 18px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 14px 12px 16px;
background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
opacity: 0;
transition: opacity .3s ease;
}
.heat-evs__slide:hover .heat-evs__slide-overlay { opacity: 1; }
/* Always visible on mobile (no hover there) */
@media (hover: none) {
.heat-evs__slide-overlay { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.05)); }
}
@media (max-width: 767px){
.heat-evs__arrow--hide-mobile {
display: none !important;
}
}
/* === Title === */
.heat-evs__title {
color: #F1BA58;
font-weight: 700;
font-size: 16px;
margin-bottom: 10px;
text-align: center;
text-shadow: 0 2px 6px rgba(0,0,0,.4);
}
/* === Buttons (side by side bottom) === */
.heat-evs__actions {
display: flex;
gap: 10px;
justify-content: center;
}
.heat-evs__btn {
padding: 6px 14px;
font-size: 13px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: all .2s ease;
}
.heat-evs__btn--primary {
background: var(--e-global-color-accent, #10b981);
color: #fff;
}
.heat-evs__btn--ghost {
background: transparent;
border: 1.5px solid rgba(255,255,255,.8);
color: #fff;
}
.heat-evs__btn:hover { transform: translateY(-2px); }
/* === Arrows (Minimal Clean Look) === */
.heat-evs__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,.95);
color: #333;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 10px rgba(0,0,0,.2);
z-index: 2;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.heat-evs__arrow:hover {
background: var(--e-global-color-accent, #10b981);
color: #fff;
transform: translateY(-50%) scale(1.1);
}
.heat-evs__prev { left: -14px; }
.heat-evs__next { right: -14px; }
@media (max-width: 768px) { .heat-evs__arrow { display: none; } }
/* === Dots (Clean Compact) === */
.heat-evs__dots {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 14px;
}
.heat-evs__dots button {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: #d1d5db;
opacity: 0.7;
cursor: pointer;
transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}
.heat-evs__dots button.is-active {
background: var(--e-global-color-accent, #10b981);
opacity: 1;
transform: scale(1.3);
}
/* === Responsive touch tweaks === */
@media (max-width: 680px) {
.heat-evs__slide { transform: none !important; }
.heat-evs__poster img { border-radius: 14px; }
.heat-evs__arrow { display: none; }
}
/* Always show overlay/buttons on mobile (no hover there) */
@media (hover: none) {
.heat-evs__slide-overlay{
opacity: 1;
background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.06));
}
}
/* Mobile swipe hint: small, see-through chevrons */
@media (max-width: 680px) {
.heat-evs__arrow{
display: block; /* show on mobile */
opacity: .35; /* faint */
pointer-events: none; /* indicator only, doesn’t block swipe */
width: 28px; height: 28px;
background: rgba(255,255,255,.9);
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.heat-evs__prev{ left: 6px; }
.heat-evs__next{ right: 6px; }
}
/* ===== Pointer Label: Gold + Mobile Centering ===== */
/* gold palette */
.heat-pointer-label{
--gold1: #fff2c1;
--gold2: #f6cc6a;
--gold3: #d89a2a;
--gold4: #f2d38a;
--gold-arrow: #d9a241;
}
.heat-pointer-label{ position:relative; width:fit-content; }
.heat-pointer-wrap.align-center .heat-pointer-label{ margin-left:auto; margin-right:auto; }
.heat-pointer-wrap.align-right .heat-pointer-label{ margin-left:auto; margin-right:0; }
.heat-pointer-label__inner{ display:flex; flex-direction:column; align-items:flex-start; }
.heat-pointer-wrap.align-center .heat-pointer-label__inner{ align-items:center; text-align:center; }
/* Gold gradient for text + arrow color */
.heat-pointer-label.is-gold .heat-pointer-label__text{
background: linear-gradient(180deg,var(--gold1) 0%, var(--gold2) 35%, var(--gold3) 70%, var(--gold4) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 12px rgba(0,0,0,.18);
letter-spacing: .04em;
font-weight: 800;
}
.heat-pointer-label.is-gold .heat-pointer-label__svg{ color: var(--gold-arrow); }
/* Arrow wrapper is positioned via Elementor controls (left/top).
We’ll center it automatically on small screens. */
.heat-pointer-label__svg-wrap{ position:absolute; left:50%; top:calc(100% + 26px); transform:translateX(0); }
.heat-pointer-label__svg{ display:block; }
/* (optional) small wobble animation when enabled */
.hp-jitter { animation: hpJ 2.6s ease-in-out infinite; }
@keyframes hpJ {
0%,100% { transform: translateY(0) }
50% { transform: translateY(1px) }
}
/* ===== Mobile niceness ===== */
@media (max-width: 767px){
.heat-pointer-wrap .heat-pointer-label{ max-width: 90vw; margin-left:auto; margin-right:auto; }
.heat-pointer-wrap .heat-pointer-label__inner{ align-items:center; text-align:center; }
.heat-pointer-wrap .heat-pointer-label__svg-wrap{
left:50% !important;
transform: translateX(-50%) !important;
top: calc(100% + 12px) !important;
}
.heat-pointer-wrap .heat-pointer-label__svg{
transform: rotate(0deg) !important; /* keep it clean above the quote */
}
}
/* === Dual Highlight Events === */
.heat-dual-events{
display:flex;
flex-wrap:wrap;
gap:0;
}
.heat-dual-event{
position:relative;
flex:0 0 50%;
height:100% !important;
overflow:hidden;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
text-align:center;
}
.heat-dual-event__bg{
position:absolute;
inset:0;
width:100%; height:100%;
object-fit:cover;
transition:transform .5s ease;
}
.heat-dual-event__overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
transition:background .4s ease;
}
.heat-dual-event:hover .heat-dual-event__bg{ transform:scale(1.05); }
.heat-dual-event:hover .heat-dual-event__overlay{ background:rgba(0,0,0,.6); }
.heat-dual-event__content{
position:relative;
z-index:2;
max-width:80%;
transition:all .4s ease;
}
.heat-dual-event__title{
font-size:clamp(22px,2vw,32px);
font-weight:800;
margin:0;
}
.heat-dual-event__subtitle{
font-size:clamp(16px,1.3vw,18px);
opacity:.9;
margin:8px 0 0 0;
}
.heat-dual-event__actions{
margin-top:24px;
display:flex;
gap:14px;
justify-content:center;
opacity:0;
transform:translateY(15px);
transition:all .35s ease;
}
.heat-dual-event:hover .heat-dual-event__actions{
opacity:1;
transform:translateY(0);
}
/* Buttons */
.heat-dual-event__btn{
display:inline-block;
padding:12px 22px;
border-radius:8px;
text-decoration:none;
font-weight:600;
font-size:15px;
transition:all .25s ease;
}
.heat-dual-event__btn--primary{
background:#f59e0b;
color:#111827;
}
.heat-dual-event__btn--ghost{
background:transparent;
border:2px solid #fff;
color:#fff;
}
.heat-dual-event__btn:hover{ transform:translateY(-2px); }
.heat-dual-event__btn--primary:hover{
background:#fff; color:#111;
}
/* Mobile stack */
@media (max-width:768px){
.heat-dual-event{ flex:0 0 100%; height:320px; }
}
/* 1) Make the card height match the image — no fixed min-height */
.heat-dual-event{
min-height: 0 !important; /* kill the old 480px */
aspect-ratio: 16 / 9; /* keeps both sides even; change to 4/3 or 21/9 if you prefer */
}
/* Ensure the image always fills the card */
.heat-dual-event__bg{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; /* crop to fill */
}
/* 2) Overlay + content appear from bottom on hover (keeps same height as image) */
.heat-dual-event__overlay{
opacity: 0;
background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%);
transition: opacity .35s ease;
}
.heat-dual-event__content{
/*position: absolute; */
left: 0; right: 0; bottom: 0;
padding: 16px 20px;
opacity: 0; transform: translateY(12px);
transition: opacity .35s ease, transform .35s ease;
}
.heat-dual-event:hover .heat-dual-event__overlay{ opacity: 1; }
.heat-dual-event:hover .heat-dual-event__content{ opacity: 1; transform: translateY(0); }
/* 3) Smaller title + subtitle */
.heat-dual-event__title{
font-size: clamp(18px, 1.6vw, 28px) !important; /* smaller than before */
font-weight: 800; margin: 0;
}
.heat-dual-event__subtitle{
font-size: clamp(12px, 1.1vw, 16px) !important;
margin: 6px 0 0 0;
}
/* 4) Smaller buttons */
.heat-dual-event__actions{ gap: 10px; margin-top: 10px; }
.heat-dual-event__btn{
padding: 7px 12px; /* smaller */
font-size: .9rem;
border-radius: 6px;
}
.heat-dual-event__btn--ghost{ border-width: 1.5px; }
/* Mobile */
@media (max-width: 768px){
.heat-dual-event{ aspect-ratio: 4 / 3; } /* a bit taller on phones */
.heat-dual-event__btn{ padding: 6px 10px; font-size: .88rem; }
}
/* ===== Single Bundle Package ===== */
.heat-bundle{
position: relative;
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
border: 1px solid rgba(255,255,255,.14);
border-radius: 18px;
overflow: hidden;
backdrop-filter: blur(6px);
color: #0f172a; /* overwritten by style controls if needed */
}
.heat-bundle__inner{ padding: 24px; }
.heat-bundle__badge{
display:inline-block;
background: linear-gradient(90deg,#f59e0b,#fbbf24);
color:#111827;
font-weight:800;
padding:6px 12px;
border-radius:999px;
font-size:.82rem;
margin-bottom:14px;
}
.heat-bundle__media{
width:100%;
margin-bottom:14px;
border-radius:14px;
overflow:hidden;
}
.heat-bundle__media img{ width:100%; height:auto; display:block; }
.heat-bundle__eyebrow{
text-transform:uppercase;
letter-spacing:.14em;
font-weight:700;
opacity:.8;
margin-bottom:6px;
}
.heat-bundle__title{
font-size: clamp(22px, 2.4vw, 36px);
font-weight: 800;
line-height: 1.15;
margin: 0 0 4px;
}
.heat-bundle__subtitle{
font-size: clamp(14px, 1.2vw, 18px);
opacity: .9;
margin-bottom: 12px;
}
.heat-bundle__price{
display:flex; align-items:flex-end; gap: 6px;
margin: 6px 0 2px;
}
.heat-bundle__price-cur{
font-weight:700; font-size: clamp(16px, 1.4vw, 20px);
transform: translateY(-3px);
opacity:.9;
}
.heat-bundle__price-main{
font-size: clamp(34px, 4vw, 56px);
font-weight: 900;
line-height: 1;
}
.heat-bundle__price-suf{
font-size: clamp(12px, 1vw, 16px);
margin-left: 2px;
opacity:.85;
}
.heat-bundle__price-note{
font-size: .9rem;
opacity: .75;
margin-bottom: 10px;
}
.heat-bundle__features{
list-style:none; padding:0; margin: 10px 0 16px;
display:grid; gap:10px;
}
.heat-bundle__feature{
display:flex; align-items:center; gap:10px;
}
.heat-bundle__feature .icon{
width:22px; height:22px; min-width:22px;
display:inline-flex; align-items:center; justify-content:center;
color:#10b981; /* overwritten by "check_color" control */
background: rgba(16,185,129,.12);
border-radius: 6px;
}
.heat-bundle__feature .txt{ line-height:1.5; }
.heat-bundle__actions{ margin-top: 10px; }
.heat-bundle__btn{
display:inline-block;
padding: 12px 22px;
font-weight:700;
text-decoration:none;
color:#111827;
background: linear-gradient(90deg,#7c3aed,#9333ea);
color:#fff;
border-radius: 999px;
transition: transform .2s ease, opacity .2s ease;
}
.heat-bundle__btn:hover{ transform: translateY(-2px); opacity:.95; }
.heat-bundle__footnote{
margin-top:14px;
font-size:.88rem;
opacity:.8;
}
/* compact on phones */
@media (max-width: 768px){
.heat-bundle__inner{ padding:18px; }
.heat-bundle__btn{ padding:10px 18px; }
}
/* ===== Pricing Table ===== */
.heat-pricing{ --pricing-cols:3; }
.heat-pricing__grid{
display:grid;
grid-template-columns: repeat(var(--pricing-cols), minmax(0,1fr));
gap:20px;
}
/* Toggle */
.heat-pricing__toggle{
display:flex; align-items:center; gap:12px;
margin-bottom:16px; color:#fff;
}
.heat-pricing__toggle .lab{ font-weight:700; opacity:.9; }
.heat-pricing__toggle .switch{ position:relative; width:56px; height:30px; display:inline-block; }
.heat-pricing__toggle-input{ display:none; }
.heat-pricing__toggle .track{
position:absolute; inset:0; background:rgba(255,255,255,.25); border-radius:999px;
}
.heat-pricing__toggle .thumb{
position:absolute; top:3px; left:3px; width:24px; height:24px; background:#fff; border-radius:999px; transition:transform .25s;
}
.heat-pricing[data-billing="yearly"] .heat-pricing__toggle .thumb{ transform: translateX(26px); }
/* Card */
.heat-plan{
background: linear-gradient(180deg, rgba(255,255,255,.9), #fff);
border:1px solid #e5e7eb; border-radius:16px; overflow:hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.heat-plan:hover{ transform: translateY(-4px); box-shadow: 0 18px 45px rgba(2,6,23,.08); border-color:#d1d5db; }
.heat-plan.is-featured{ background: linear-gradient(180deg, #0f172a, #111827); color:#fff; border-color: rgba(255,255,255,.18); box-shadow: 0 20px 50px rgba(17,24,39,.35); transform: translateY(-6px); }
.heat-plan__inner{ padding:24px; }
.heat-plan__badge{
display:inline-block; margin-bottom:12px;
background: linear-gradient(90deg,#f59e0b,#fbbf24); color:#111827;
font-weight:800; padding:6px 12px; border-radius:999px; font-size:.82rem;
}
.is-featured .heat-plan__badge{ background:linear-gradient(90deg,#22c55e,#10b981); color:#052e1f; }
.heat-plan__title{ font-size: clamp(18px,1.8vw,26px); font-weight:800; margin:0; color:#0f172a; }
.heat-plan__subtitle{ font-size:14px; opacity:.85; margin-top:6px; color:#334155; }
.is-featured .heat-plan__title{ color:#fff; }
.is-featured .heat-plan__subtitle{ color:#d1d5db; }
.heat-plan__price{ display:flex; align-items:flex-end; gap:6px; margin:16px 0 4px; }
.heat-plan__price-cur{ font-weight:800; transform: translateY(-4px); opacity:.9; }
.heat-plan__price-main{ font-weight:900; line-height:1; font-size: clamp(34px,4vw,56px); display:none; }
.heat-plan__price-suf{ font-size:14px; opacity:.8; }
.heat-plan__note{ font-size:12px; opacity:.7; margin-bottom:8px; }
.heat-plan__features{ list-style:none; padding:0; margin:12px 0 18px; display:grid; gap:10px; }
.heat-plan__feature{ display:flex; align-items:center; gap:10px; color:#0f172a; }
.heat-plan__feature .icon{ width:22px; height:22px; display:inline-grid; place-items:center; border-radius:6px; background:#ecfdf5; color:#10b981; }
.is-featured .heat-plan__feature{ color:#e5e7eb; }
.is-featured .heat-plan__feature .icon{ background:rgba(16,185,129,.16); color:#34d399; }
.heat-plan__actions{ margin-top:8px; }
.heat-plan__btn{
display:inline-block; padding:12px 22px; border-radius:999px; font-weight:800; text-decoration:none;
background:linear-gradient(90deg,#7c3aed,#9333ea); color:#fff; transition:transform .2s, opacity .2s;
}
.heat-plan__btn:hover{ transform:translateY(-2px); opacity:.95; }
.is-featured .heat-plan__btn{ background:linear-gradient(90deg,#22c55e,#10b981); color:#052e1f; }
.heat-plan__footnote{ margin-top:10px; font-size:12px; opacity:.75; }
/* show the right price based on billing mode */
.heat-pricing[data-billing="monthly"] .price--m{ display:inline; }
.heat-pricing[data-billing="monthly"] .price--y{ display:none; }
.heat-pricing[data-billing="yearly"] .price--m{ display:none; }
.heat-pricing[data-billing="yearly"] .price--y{ display:inline; }
/* Responsive */
@media (max-width: 1024px){ .heat-pricing{ --pricing-cols:2; } }
@media (max-width: 640px){ .heat-pricing{ --pricing-cols:1; } .heat-plan__inner{ padding:18px; } }
/* ===== Mobile slider mode for Pricing ===== */
.heat-pricing__shell {
position: relative;
}
/* Track becomes horizontal scroller on small screens */
@media (max-width: 640px){
.heat-pricing__track {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 8px; /* room for dots */
}
/* Turn grid into a row of slides */
.heat-pricing__grid {
display: flex;
gap: 14px; /* spacing between slides */
width: max-content; /* allow horizontal growth */
}
/* Each card = a slide */
.heat-pricing__slide {
flex: 0 0 calc(88vw - 24px); /* ~88vw minus some padding/margins */
max-width: 420px;
scroll-snap-align: start;
}
/* Dots */
.heat-pricing__dots {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 10px;
}
.heat-pricing__dots button{
width: 8px; height: 8px; border-radius: 50%; border: 0;
background:#d1d5db; opacity:.7; transition: transform .2s, opacity .2s, background-color .2s;
}
.heat-pricing__dots button.is-active{ background:#10b981; opacity:1; transform:scale(1.25); }
/* Arrows for mobile only (optional) */
.heat-pricing__arrow{
position:absolute; top: 40%;
transform: translateY(-50%);
width: 34px; height: 34px; border:0; border-radius:999px;
background:#fff; color:#111; box-shadow:0 6px 16px rgba(0,0,0,.15);
display:flex; align-items:center; justify-content:center;
}
.heat-pricing__prev{ left: 6px; }
.heat-pricing__next{ right: 6px; }
/* Hide desktop grid variables on mobile slider (just in case) */
.heat-pricing{ --pricing-cols:1; }
}
/* ===== Hero Spotlight ===== */
.heat-spotlight{
position: relative;
color:#fff;
overflow:hidden;
}
.heat-spotlight.has-stars::before{
content:"";
position:absolute; inset:0;
pointer-events:none; z-index:0;
/* star field */
background:
radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.6) 50%, transparent 51%) repeat,
radial-gradient(1.2px 1.2px at 70% 60%, rgba(255,255,255,.5) 50%, transparent 51%) repeat,
radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.4) 50%, transparent 51%) repeat;
background-size: 700px 700px, 900px 900px, 1100px 1100px;
animation: heatStars 60s linear infinite;
}
@keyframes heatStars{ to{ background-position: -700px -400px, -400px -900px, -900px -700px; } }
.heat-spotlight__inner{ position:relative; z-index:1; padding: clamp(20px, 4vw, 48px); }
.heat-spotlight__grid{
display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 60px);
align-items:center;
}
@media (max-width: 980px){
.heat-spotlight__grid{ grid-template-columns: 1fr; }
}
/* Left text */
.heat-spotlight__eyebrow{
text-transform:uppercase; letter-spacing:.16em; font-weight:800; opacity:.9;
margin-bottom: clamp(4px, .8vw, 8px);
}
.heat-spotlight__title{
margin:0;
line-height:1.05;
}
.heat-spotlight__title--big{
font-size: clamp(38px, 6vw, 96px);
font-weight: 900;
}
.heat-spotlight__title--outline{
font-size: clamp(36px, 5.2vw, 84px);
font-weight: 900;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
color: transparent; /* can be changed via control */
}
.heat-spotlight__meta{ margin-top: clamp(14px, 2vw, 24px); }
.heat-spotlight__date strong{ font-size: clamp(22px, 2.6vw, 36px); display:block; }
.heat-spotlight__date em{ font-style: normal; display:block; margin-top: 4px; }
.heat-spotlight__location{ font-weight:700; margin-top: 6px; }
.heat-spotlight__actions{ margin-top: clamp(16px, 2.4vw, 26px); }
.heat-spotlight__btn{
display:inline-block; padding: 14px 26px; font-weight:800; text-decoration:none;
background: #3cead2; color:#111827; border-radius:999px;
transition: transform .2s ease, opacity .2s ease;
}
.heat-spotlight__btn:hover{ transform: translateY(-2px); opacity:.95; }
/* Right art */
.heat-spotlight__col--art{
position: relative; min-height: 380px;
}
.heat-spotlight__blob{
position: absolute;
right: 0; top: 50%; transform: translateY(-50%);
width: 620px; height: calc(620px * .82);
border-radius: 50% / 42% 58% 58% 42%;
background: var(--blob-fill, #2ee5d1);
z-index: 0;
}
.heat-spotlight__blob::after{
content:""; position:absolute; inset:-16px;
border-radius: inherit; border: 22px solid var(--blob-ring, #1dd9c4);
opacity:.92; z-index:-1;
}
.heat-spotlight__img{
position: relative; z-index: 2;
width: min(520px, 100%); height: auto; display:block;
margin: 0 auto;
filter: drop-shadow(0 20px 60px rgba(0,0,0,.35));
}
/* Mobile tweaks */
@media (max-width: 980px){
.heat-spotlight__col--art{ order:-1; min-height: 320px; }
.heat-spotlight__blob{ left: 50%; transform: translate(-30%, -50%); }
}
/* ===== Mini Pointer Label (v2) ===== */
.heat-pointer-label{ position:relative; width:100%; }
.heat-pointer-label__inner{
position:relative;
display:flex;
flex-direction:column;
align-items:flex-start; /* overridden by text_align control */
gap:8px;
}
.heat-pointer-label__text{
font-weight:900;
letter-spacing:.02em;
line-height:1.05;
}
/* arrow wrapper sits beneath the label; positionable via controls */
.heat-pointer-label__svg-wrap{
position:absolute;
left:50%;
top: calc(100% + 26px);
width:120px;
height:90px;
pointer-events:none;
transform-origin:50% 50%;
}
.heat-pointer-label__svg{
position:absolute; inset:0;
color:#111; /* overridden */
transform-origin:50% 50%;
}
/* optional hand-drawn wobble */
@keyframes hp-scribble {
0%,100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-0.6px) rotate(-0.25deg); }
}
.hp-jitter { animation: hp-scribble 2.8s ease-in-out infinite; }
/* helpers for block align (set by widget wrapper classes) */
.elementor-element.align-center .heat-pointer-label { margin-left:auto; margin-right:auto; }
.elementor-element.align-right .heat-pointer-label { margin-left:auto; margin-right:0; }
/* ===== HEAT Hero Slider ===== */
.heat-hero-slider{ position:relative; width:100%; overflow:hidden; }
.heat-hero-slide{
position:relative;
min-height: var(--minh, 560px);
display:flex;
align-items: stretch;
isolation:isolate; /* keep overlay under content */
}
.heat-hero-slide__bg{
position:absolute; inset:0;
background-size:cover;
background-position:center;
transform: scale(1.02);
z-index:0;
}
.heat-hero-slide__overlay{
position:absolute; inset:0;
z-index:1;
/* overlay gets painted by group control per slide */
background: linear-gradient(0deg, rgba(0,0,0,.48), rgba(0,0,0,.48));
}
.heat-hero-slide__inner{
position:relative; z-index:2;
width:100%;
display:flex;
padding: clamp(20px, 4vw, 60px) 0;
}
.heat-hero-slide__inner.is-boxed{ max-width:1200px; margin:0 auto; padding-left:24px; padding-right:24px; }
.heat-hero-slide__inner.is-full{ max-width:none; }
/* vertical align choices */
.heat-hero-slide__inner.v-start{ align-items:flex-start; }
.heat-hero-slide__inner.v-center{ align-items:center; }
.heat-hero-slide__inner.v-end{ align-items:flex-end; }
/* swiper nav */
.heat-hero-slider .swiper-button-prev,
.heat-hero-slider .swiper-button-next{
color:#fff; width:44px; height:44px;
background:rgba(0,0,0,.35);
border-radius:999px;
transition:opacity .2s ease;
}
.heat-hero-slider .swiper-button-prev:hover,
.heat-hero-slider .swiper-button-next:hover{ background:rgba(0,0,0,.55); }
.heat-hero-slider .swiper-pagination-bullet{ background:#fff; opacity:.55; }
.heat-hero-slider .swiper-pagination-bullet-active{ opacity:1; }
@media (max-width: 768px){
.heat-hero-slide{ min-height: 420px; }
}
/* ===== Events Grid ===== */
.heat-events-grid{
--cols: 2;
display:grid;
grid-template-columns: repeat(var(--cols), minmax(0,1fr));
gap: 24px;
}
.heat-event{
background:#fff;
border-radius:12px;
border:1px solid #e5e7eb;
overflow:hidden;
box-shadow: 0 10px 30px rgba(2,6,23,.06);
transition: transform .25s ease, box-shadow .25s ease;
}
.heat-event:hover{
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(2,6,23,.12);
}
.heat-event__media{
width:100%;
aspect-ratio:16/9; /* overridable by control */
background:#f1f5f9;
position: relative; /* needed for badge positioning */
}
.heat-event__media img{
width:100%; height:100%; object-fit:cover; display:block;
}
/* --- CME badge styled like sample --- */
.heat-event__cme-badge{
position:absolute;
right:20px;
bottom:-18px;
display:flex;
align-items:center;
gap:10px;
padding:6px 14px;
background:linear-gradient(90deg,#0b1b3b,#031023); /* dark navy blue */
border-radius:6px;
box-shadow:0 6px 16px rgba(0,0,0,.35);
transform:skewX(-8deg); /* slanted shape */
}
.heat-event__cme-badge > *{
transform:skewX(8deg); /* un-slant text */
}
.heat-cme__label{
font-size:10px;
line-height:1.1;
font-weight:800;
color:#ffffff;
text-transform:uppercase;
}
.heat-cme__value{
font-size:22px;
line-height:1;
font-weight:800;
color:#facc15; /* yellow */
margin:0 4px;
}
.heat-cme__unit{
font-size:10px;
line-height:1.1;
font-weight:600;
color:#ffffff;
text-align:left;
}
/* Body + rest same as before */
.heat-event__body{
padding:20px;
}
.heat-event__title{
font-size: clamp(18px, 2vw, 22px);
line-height:1.25;
margin:0 0 8px 0;
font-weight:800;
}
.heat-event__title a{
color:#0f172a; text-decoration:none;
}
.heat-event__title a:hover{ text-decoration:underline; }
.heat-event__tag{
color:#0ea5b7;
font-weight:700;
margin-bottom:6px;
}
.heat-event__date{
color:#0f172a;
opacity:.85;
}
/* buttons */
.heat-event__actions{
display:flex; gap:10px; align-items:center; flex-wrap:wrap;
margin-top:14px;
}
.heat-event__btn{
display:inline-block;
font-weight:700; text-decoration:none;
padding:10px 14px; border-radius:8px;
transition:transform .2s ease, opacity .2s ease,
background-color .2s ease, color .2s ease, border-color .2s ease;
border:2px solid transparent;
line-height:1;
font-size:14px;
}
.heat-event__btn:hover{ transform:translateY(-2px); opacity:.95; }
/* default button skins */
.heat-event__btn--primary{
background:#fbbf24; color:#111827;
box-shadow:0 10px 24px rgba(251,191,36,.25);
}
.heat-event__btn--ghost{
background:transparent; color:#0f172a; border-color:#0f172a;
}
/* Responsive columns */
@media (max-width: 1024px){
.heat-events-grid{
grid-template-columns: repeat(2, minmax(0,1fr));
}
}
@media (max-width: 767px){
.heat-events-grid{
grid-template-columns: repeat(1, minmax(0,1fr));
}
}
/* ===== Related Upcoming Slider ===== */
.heat-rus{
--rus-per: var(--rus-per-desktop, 4);
--rus-gap: var(--rus-gap, 22px);
position: relative;
overflow: hidden;
}
@media (max-width: 1024px){ .heat-rus{ --rus-per: var(--rus-per-tablet, 2); } }
@media (max-width: 680px) { .heat-rus{ --rus-per: var(--rus-per-mobile, 1); } }
/* track */
.heat-rus__track{
display:flex; gap:var(--rus-gap);
overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
-ms-overflow-style:none; scrollbar-width:none;
position: relative;
z-index: 1;
}
.heat-rus__track::-webkit-scrollbar{ display:none; }
/* slide width calc */
.heat-rus__slide{
flex:0 0 calc((100% - (var(--rus-per) - 1) * var(--rus-gap)) / var(--rus-per));
scroll-snap-align:start;
}
/* card */
.heat-rus__card{
background:#fff; border-radius:14px;
box-shadow:0 10px 30px rgba(2,6,23,.10);
height:auto; display:flex; flex-direction:column; overflow:hidden;
border:1px solid #e5e7eb;
}
.heat-rus__media{ width:100%; aspect-ratio: 16/9; background:#0b0b0b; }
.heat-rus__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.heat-rus__body{ padding:18px; display:flex; flex-direction:column; gap:6px; }
/* text */
.heat-rus__loc{ font-weight:800; font-size:20px; line-height:1.2; }
.heat-rus__date{ font-weight:700; opacity:.9; margin-bottom:4px; }
.heat-rus__title{ font-weight:800; margin:6px 0 8px; font-size:18px; line-height:1.3; }
.heat-rus__list{ margin:6px 0 0; padding-left:18px; }
.heat-rus__list li{ margin:4px 0; }
/* actions */
.heat-rus__actions{ display:flex; gap:10px; margin-top:auto; padding-top:10px; flex-wrap:wrap; }
.heat-rus__btn{
display:inline-block; font-weight:700; text-decoration:none; line-height:1;
padding:10px 14px; border-radius:8px; border:2px solid transparent;
transition:transform .2s ease, opacity .2s ease;
font-size:14px;
}
.heat-rus__btn:hover{ transform:translateY(-2px); }
.heat-rus__btn--primary{ background:#fbbf24; color:#111827; box-shadow:0 10px 20px rgba(251,191,36,.25); }
.heat-rus__btn--ghost{ background:transparent; border-color:#0f172a; color:#0f172a; }
/* arrows */
.heat-rus__arrow{
position:absolute; top:50%; transform:translateY(-50%);
width:44px; height:44px; /* bigger hit area */
border-radius:999px; border:0; cursor:pointer;
background:#0f172a; color:#fff; /* match your UI */
box-shadow:0 6px 18px rgba(0,0,0,.25);
z-index: 10; /* <- above cards/track */
display:flex; align-items:center; justify-content:center; /* center FA or glyph */
line-height:1; /* center the entity glyphs too */
pointer-events:auto; /* ensure clickable */
}
.heat-rus__prev{ left: 6px; } /* keep inside container so it’s fully clickable */
.heat-rus__next{ right: 6px; }
.heat-rus__arrow:hover{ background:#111827; }
.heat-rus::before,
.heat-rus::after { pointer-events:none; }
/*@media (max-width:768px){ .heat-rus__arrow{ display:block; } }*/
/* dots */
.heat-rus__dots{ display:flex; gap:8px; justify-content:center; margin-top:14px; }
.heat-rus__dots button{
width:8px; height:8px; border-radius:50%; border:0; background:#d1d5db; opacity:.7; cursor:pointer;
transition:transform .2s ease, opacity .2s ease, background-color .2s ease;
}
.heat-rus__dots button.is-active{ background:#111827; opacity:1; transform:scale(1.3); }
/* Force all cards in a row to equal height */
.heat-rus__track {
align-items: stretch;
}
.heat-rus__slide {
display: flex;
}
.heat-rus__card {
display: flex;
flex-direction: column;
height: 100%;
}
/* ===== Who Should Attend ===== */
.heat-who{ --who-cols-d:3; --who-cols-t:2; --who-cols-m:1; --who-gap:18px; }
.heat-who__head{ max-width:900px; margin:0 auto 18px; text-align:center; }
.heat-who__eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-weight:800; opacity:.85; margin-bottom:6px; color:var(--he-color-secondary, #f59e0b); }
.heat-who__title{ font-weight:800; font-size:clamp(22px, 2.4vw, 34px); line-height:1.2; color:var(--he-color-primary,#0f172a); margin:0 0 8px; }
.heat-who__desc{ color:#475569; margin:0 auto 6px; }
.heat-who__grid{
display:grid;
gap:var(--who-gap);
grid-template-columns:repeat(var(--who-cols-d), minmax(0,1fr));
}
@media (max-width:1024px){
.heat-who__grid{ grid-template-columns:repeat(var(--who-cols-t), minmax(0,1fr)); }
}
@media (max-width:680px){
.heat-who__grid{ grid-template-columns:repeat(var(--who-cols-m), minmax(0,1fr)); }
}
/* Card style */
.heat-who__item--card{
background:#fff; border-radius:16px; border:1px solid #e5e7eb;
box-shadow:0 8px 26px rgba(2,6,23,.07);
transition:transform .25s ease, box-shadow .25s ease;
}
.heat-who__item--card:hover{
transform:translateY(-4px);
box-shadow:0 12px 32px rgba(2,6,23,.10);
}
.heat-who__item--card .heat-who__item-inner{ padding:16px; }
/* Badge style (compact) */
.heat-who__item--badge{
background:linear-gradient(180deg, #f8fafc, #ffffff);
border:1px dashed #cbd5e1; border-radius:14px;
}
.heat-who__item--badge .heat-who__item-inner{ padding:14px; }
/* Icon / emoji */
.heat-who__icon{
width:52px; height:52px; border-radius:12px;
display:flex; align-items:center; justify-content:center;
background:#f1f5f9; color:#0f172a; margin-bottom:10px;
}
.heat-who__icon img{ width:60%; height:60%; object-fit:contain; display:block; }
.heat-who__emoji{ font-size:28px; line-height:1; }
/* Text */
.heat-who__label{ font-weight:800; margin:0 0 4px; color:#0f172a; font-size:18px; }
.heat-who__text{ margin:0; color:#475569; font-size:14px; line-height:1.55; }
/* ===== Event Highlight ===== */
.heat-eh{
position:relative;
background:#0f2342;
padding:25px 0 48px;
color:#e6eef8;
}
.heat-eh__heading{
max-width:1280px; margin:0 auto 22px; padding:0 20px;
font-weight:900; letter-spacing:-.01em;
font-size: clamp(26px, 4.2vw, 56px);
color:#e6eef8;
}
/* shell keeps content inside page gutter */
.heat-eh__shell{
position:relative;
max-width:1280px; margin:0 auto; padding:0 20px;
}
/* slider track */
.heat-eh__track{
display:flex; gap:22px;
overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
-ms-overflow-style:none; scrollbar-width:none;
position:relative; z-index:1;
}
.heat-eh__track::-webkit-scrollbar{ display:none; }
.heat-eh__slide{ flex:0 0 100%; scroll-snap-align:start; }
/* square card */
.heat-eh__card{
position:relative;
display:grid; grid-template-columns: 420px 1fr; align-items:center;
gap:28px; width:100%;
border:0 solid rgba(255,255,255,.08);
border-radius:0; overflow:hidden;
}
.heat-eh__media{ background:#0b0b0b; border-radius:24px;}
.heat-eh__media img{ width:100%; height:100%; object-fit:cover; display:block;border-radius:24px; }
.heat-eh__body{ padding:26px 26px 26px 0; }
.heat-eh__eyebrow{ font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.9; color:#c9d7ea; }
.heat-eh__title{ margin:.15em 0 .2em; font-weight:900; font-size: clamp(22px, 2.4vw, 36px); color:#fff; }
.heat-eh__subtitle{ font-weight:800; text-transform:uppercase; opacity:.9; color:#9fb6d5; margin-bottom:.4em; }
.heat-eh__excerpt{ color:#c9d7ea; max-width:900px; line-height:1.7; }
/* CTA buttons */
.heat-eh__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.heat-eh__btn{
display:inline-flex; align-items:center; gap:.45em;
padding:12px 20px; border-radius:26px;
background:#eef2f5; color:#0d1b2a; text-decoration:none; font-weight:800;
box-shadow:0 10px 24px rgba(0,0,0,.18);
transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.heat-eh__btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.24); }
/* Ghost (Button 2) */
.heat-eh__btn--ghost{
background:transparent; color:#e6eef8; border:2px solid rgba(230,238,248,.35);
box-shadow:none;
}
.heat-eh__btn--ghost:hover{
border-color:#e6eef8; transform:translateY(-2px);
}
/* arrows */
.heat-eh__arrow{
position:absolute; top:50%; transform:translateY(-50%);
width:44px; height:44px; border-radius:999px; border:0; cursor:pointer;
background:#F4B000; color:#0d1b2a; font-weight:900; font-size:20px; line-height:1;
display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 18px rgba(0,0,0,.25);
z-index:30; pointer-events:auto;
}
.heat-eh__prev{ left:0; }
.heat-eh__next{ right:0; }
.heat-eh__arrow:hover{ filter:brightness(.95); }
/* dots */
.heat-eh__dots{ display:flex; gap:8px; justify-content:center; margin-top:18px; }
.heat-eh__dots button{
width:8px; height:8px; border-radius:50%; border:0; background:#5d7593; opacity:.7; cursor:pointer;
transition:transform .2s ease, opacity .2s ease, background-color .2s ease;
}
.heat-eh__dots button.is-active{ background:#e6eef8; opacity:1; transform:scale(1.25); }
/* responsive */
@media (max-width:1024px){
.heat-eh__card{ grid-template-columns: 360px 1fr; }
}
@media (max-width:800px){
.heat-eh__card{ grid-template-columns: 1fr; }
.heat-eh__body{ padding:18px; }
}
/* ===== Vision & Mission (pro) ===== */
.heat-vim{
--vim-accent:#F4B000;
--vim-bullet:8px;
--vim-ratio:16/10;
padding:48px 0;
background:#0F2342;
}
.heat-vim__heading{
max-width:1280px; margin:0 auto 22px; padding:0 20px;
font-weight:900; letter-spacing:-.01em;
font-size: clamp(26px, 4.2vw, 56px);
color:#E6EEF8;
}
/* grid */
.heat-vim__grid{
max-width:1280px; margin:0 auto; padding:0 20px;
display:grid; gap:24px;
}
.heat-vim.is-two .heat-vim__grid{ grid-template-columns: 1fr 1fr; }
.heat-vim.is-one .heat-vim__grid{ grid-template-columns: 1fr; }
@media (max-width:900px){ .heat-vim__grid{ grid-template-columns: 1fr; } }
/* card box */
.heat-vim__card{
display:grid;
grid-template-columns: var(--vim-media-col,44%) 1fr; /* left variant default */
align-items:center;
gap:22px;
background:#102945; border:1px solid rgba(255,255,255,.08);
border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.25);
padding:24px;
}
.heat-vim__card.is-img-right{ grid-template-columns: 1fr var(--vim-media-col,44%); }
@media (max-width:780px){
.heat-vim__card{ grid-template-columns: 1fr; }
}
/* media */
.heat-vim__media{
width:100%;
aspect-ratio: var(--vim-ratio);
overflow:hidden; position:relative;
border-radius:16px; /* overridden by control */
}
.heat-vim__media::after{
content:""; position:absolute; inset:0; pointer-events:none;
background: transparent; /* overridden when overlay enabled */
}
.heat-vim__media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* shape shortcuts (you can still override radius via control) */
.shape-rounded .heat-vim__media{ border-radius:16px; }
.shape-circle .heat-vim__media{ border-radius:999px; }
.shape-square .heat-vim__media{ border-radius:0; }
/* body & text */
.heat-vim__subtitle{
text-transform:uppercase; letter-spacing:.08em; font-weight:800;
color:#9FB6D5; margin-bottom:6px;
}
.heat-vim__title{
margin:.15em 0 8px; font-weight:900;
font-size: clamp(22px, 2.4vw, 36px); color:#fff;
}
.heat-vim__text{
color:#C9D7EA; line-height:1.7; margin:10px 0;
}
/* bullets */
.heat-vim__list{
list-style:none; padding:0; margin:.5em 0 0;
display:grid; gap:8px; color:#C9D7EA;
}
.heat-vim__list li{ position:relative; padding-left: calc(var(--vim-bullet) + 10px); }
.heat-vim__list li::before{
content:""; position:absolute; left:0; top:.55em;
width:var(--vim-bullet); height:var(--vim-bullet); border-radius:50%;
background: var(--vim-accent);
}
/* ===== Pricing mobile slider scaffolding ===== */
.heat-pricing__track{ position:relative; }
/* arrows: hidden by default (desktop) */
.heat-pricing__arrow{ display:none; }
/* dots baseline */
.heat-pricing__dots{ display:none; }
/* make Safari stop at each slide; prevents overshoot chaining */
.heat-pricing__track { scroll-snap-type: x mandatory; }
.heat-pricing__slide { scroll-snap-align: start; scroll-snap-stop: always; }
/* --- Mobile (≤640px) --- */
@media (max-width:640px){
/* turn the grid into a horizontal track */
.heat-pricing__track .heat-pricing__grid{
display:flex;
overflow-x:auto;
gap:16px;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-ms-overflow-style:none;
scrollbar-width:none;
padding: 6px 0 12px;
}
.heat-pricing__track .heat-pricing__grid::-webkit-scrollbar{ display:none; }
/* each card is a “slide”, centered */
.heat-pricing__slide{
flex:0 0 86%;
scroll-snap-align:center;
}
/* show arrows on mobile; center them vertically */
.heat-pricing__arrow{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
top:50%;
transform:translateY(-50%);
width:36px; height:36px;
border-radius:999px; border:0;
background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.15);
color:#111; cursor:pointer; z-index:5;
}
.heat-pricing__prev{ left:6px; }
.heat-pricing__next{ right:6px; }
/* dots on mobile (only if JS decides to show them) */
.heat-pricing__dots{
display:flex;
gap:8px;
justify-content:center;
margin-top:10px;
}
.heat-pricing__dots button{
width:8px; height:8px; border-radius:50%; border:0;
background:#d1d5db; opacity:.7; cursor:pointer;
transition:transform .2s, opacity .2s, background-color .2s;
}
.heat-pricing__dots button.is-active{
background:var(--e-global-color-accent, #10b981);
opacity:1; transform:scale(1.25);
}
}
/* ================================
HEAT Agenda Table (YOUR CSS)
+ Speaker Position/Company box
================================ */
.heat-agenda { width:100%; border-collapse:collapse; }
.heat-agenda td, .heat-agenda th { border:1px solid #d9e1ea; padding:12px; vertical-align:top; }
/* ✅ FIX: your markup uses .heat-agenda__head on the | itself (not on | ) */
.heat-agenda__head { background:#5f7f34; color:#fff; font-weight:800; text-align:center; }
/* Subhead + row colors */
.heat-agenda__subhead th { background:#a7c8d3; font-weight:700; }
.heat-agenda__row--break td { background:#f6f7f9; }
.heat-agenda__row--section td { background:#eef5ff; }
.heat-agenda__time { white-space:nowrap; width:120px; }
/* ✅ Your previous link selectors didn't match your output markup.
Your output is: .heat-agenda a (inside table). */
.heat-agenda a { color:#0b63ce; text-decoration:none; }
.heat-agenda a:hover { text-decoration:underline; }
/* Keep this (duplicate removed) */
.heat-agenda__section-note .heat-agenda__role{
font-weight:700; color:#334155; margin-right:.25em;
}
.heat-agenda__section-note a { color:#0b63ce; text-decoration:none; }
.heat-agenda__section-note a:hover { text-decoration:underline; }
/* ==========================================
✅ NEW: Speaker blocks (name + meta box)
Works for Talk speakers + Section people
========================================== */
.heat-agenda__sp{
margin-bottom:10px;
}
.heat-agenda__sp:last-child{
margin-bottom:0;
}
.heat-agenda__sp-name{
font-weight:700;
display:inline-block;
line-height:1.25;
}
/* Position/Company box under name */
.heat-agenda__sp-meta{
margin-top:4px;
display:inline-block;
font-size:12.5px;
line-height:1.25;
padding:4px 8px;
border-radius:6px;
background:rgba(0,0,0,0.06);
color:#334155;
opacity:.95;
}
/* Mobile tighten */
@media (max-width: 767px){
.heat-agenda td, .heat-agenda th{ padding:10px; }
.heat-agenda__sp-meta{ font-size:12px; padding:3px 7px; }
}
/* ===== Speakers Cards ===== */
.heat-spk{
--spk-cols: 4;
--spk-gap: 24px;
display:grid;
grid-template-columns: repeat(var(--spk-cols), minmax(0,1fr));
gap: var(--spk-gap);
}
.heat-spk__item{ position:relative; }
.heat-spk__card{
background:#151515;
border:1px solid rgba(255,255,255,.06);
border-radius:16px;
padding:20px;
min-height:100%;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:14px;
text-decoration:none;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
outline:0;
}
.heat-spk__card.is-lift:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.heat-spk__card.is-featured{ box-shadow: 0 10px 24px rgba(34,211,238,.25); border-color: rgba(34,211,238,.35); }
.heat-spk__photo{
width:var(--spk-photo,220px);
height:var(--spk-photo,220px);
margin-inline:auto;
overflow:hidden;
background:#0f0f10;
display:grid; place-items:center;
}
.heat-spk__photo.is-circle{ border-radius: 999px; }
.heat-spk__photo.is-square{ border-radius: 16px; }
.heat-spk__photo img{
width:100%; height:100%; object-fit:cover; display:block;
filter: grayscale(0);
transition: filter .3s ease, transform .3s ease;
}
.heat-spk__card.is-gray .heat-spk__photo img{ filter: grayscale(1); }
.heat-spk__card.is-gray:hover .heat-spk__photo img{ filter: grayscale(0); transform: scale(1.02); }
.heat-spk__line{
width:44px; height:2px; background:#e5e7eb; opacity:.9;
margin-top:6px; margin-bottom:6px;
}
.heat-spk__name{
margin:0;
font-weight:800;
letter-spacing:.02em;
color:#fff;
text-transform:uppercase;
font-size: clamp(12px, 1.2vw, 13px);
}
.heat-spk__role{
color:#cbd5e1;
font-size: clamp(12px, 1.3vw, 14px);
line-height:1.4;
}
.heat-spk__cta a{ color:#22d3ee; text-decoration:none; font-weight:700; }
.heat-spk__card:hover .heat-spk__cta a{ text-decoration:underline; }
/* Small screens: if Elementor responsive sets cols via CSS var, this is not needed.
But we keep a safe default for tiny screens. */
@media (max-width: 640px){
.heat-spk{ --spk-cols: 2; --spk-gap: 16px; }
}
/* ===== Sponsorship Packages ===== */
.heat-spkpk__wrap{ width:100%; overflow:auto; }
.heat-spkpk__table{
width:100%;
border-collapse: separate;
border-spacing: 0;
}
.heat-spkpk__table th,
.heat-spkpk__table td{
border:1px solid #d1d5db;
padding:12px 14px;
vertical-align: middle;
text-align:left;
background:#fff;
}
.heat-spkpk__table thead th{
position:sticky; top:0; z-index:2;
font-weight:800; letter-spacing:.02em;
}
.heat-spkpk__table th.is-fixed{ background:#e5e7eb; }
.heat-spkpk__thname{ text-transform:uppercase; font-weight:900; }
.heat-spkpk__thbadge{ font-size:12px; opacity:.85; }
.heat-spkpk__no{ width:72px; text-align:center; font-weight:700; background:#f6f7f9; }
.heat-spkpk__desc{ min-width:260px; }
.heat-spkpk__cell{ text-align:center; font-weight:700; }
.heat-spkpk__cell--check{ color:#10b981; }
.heat-spkpk__cell--x{ color:#ef4444; }
.heat-spkpk__table tfoot td{
text-align:center; font-weight:900;
background:#f3c25f;
}
.heat-spkpk__price-lab{
text-align:right; font-weight:800; background:#f3c25f;
}
.heat-spkpk__price{ font-size:16px; }
.heat-spkpk__legend{
font-size:12px; opacity:.75; margin-top:10px;
}
/* Sponsors */
.heat-spkpk__sponsors{ margin-top:32px; }
.heat-spkpk__sheading{ margin:0 0 14px; font-weight:900; }
.heat-spkpk__sgrid{
--scols: 4;
display:grid;
grid-template-columns: repeat(var(--scols), minmax(0,1fr));
gap:18px;
}
.heat-spkpk__scard{
background:#fff; border:1px solid #e5e7eb; border-radius:12px;
padding:14px; text-align:center;
display:flex; flex-direction:column; gap:8px;
}
.heat-spkpk__slogo img{ max-width:160px; max-height:80px; object-fit:contain; width:auto; height:auto; }
.heat-spkpk__sname{ font-weight:800; }
.heat-spkpk__slinks{ display:flex; gap:10px; justify-content:center; font-weight:800; }
.heat-spkpk__slinks a{ text-decoration:none; color:#0f172a; opacity:.85; }
.heat-spkpk__slinks a:hover{ opacity:1; }
@media (max-width: 768px){
.heat-spkpk__sgrid{ --scols: 2; }
}
/* Groups wrapper */
.heat-spkpkg__groups{ margin-top:26px; display:grid; gap:28px; }
/* Group header with badge */
.heat-spkpkg__group-head{ margin-bottom:12px; }
.heat-spkpkg__group-badge{
display:inline-block;
padding:8px 14px;
border-radius:999px;
font-weight:800;
letter-spacing:.02em;
background: var(--head-bg, #F1B74E);
color: var(--head-color, #111827);
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
/* Logos grid (reuses your style controls) */
.heat-spkpkg__logos{
display:grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap:16px;
}
/* Card (nicer) */
.heat-spkpkg__logo{
background:#fff;
border:1px solid #e5e7eb;
border-radius:16px;
padding:18px 16px;
text-align:center;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
box-shadow: 0 4px 16px rgba(2,6,23,.04);
}
.heat-spkpkg__logo:hover{
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(2,6,23,.10);
border-color:#d1d5db;
}
.heat-spkpkg__logo img{
max-width:100%;
height:auto;
display:block;
margin:0 auto 12px;
border-radius:10px;
}
.heat-spkpkg__logo .name{ font-weight:800; font-size:15px; }
.heat-spkpkg__logo .name a{ text-decoration:none; }
.heat-spkpkg__logo .soc{
margin-top:8px; display:flex; gap:10px; justify-content:center;
}
.heat-spkpkg__logo .soc__link{
width:20px; height:20px; display:inline-block; background:#e5e7eb; border-radius:6px;
transition: filter .15s linear, transform .15s ease;
}
.heat-spkpkg__logo .soc__link:hover{ filter:brightness(.92); transform: translateY(-1px); }
/* Responsive */
@media (max-width: 980px){ .heat-spkpkg__logos{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 720px){ .heat-spkpkg__logos{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
/* ===== Centered, premium-looking group badges ===== */
.heat-spkpkg__group-head{
position: relative;
text-align: center; /* center the badge */
margin: 8px 0 18px;
}
/* thin divider lines left/right of the badge */
.heat-spkpkg__group-head::before,
.heat-spkpkg__group-head::after{
content:"";
position:absolute;
top:50%;
width:clamp(60px, 20vw, 160px);
height:2px;
background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06));
transform:translateY(-50%);
}
.heat-spkpkg__group-head::before{ left: min(4vw, 40px); }
.heat-spkpkg__group-head::after { right:min(4vw, 40px); }
/* pill badge look */
.heat-spkpkg__group-badge{
position: relative;
display:inline-flex;
align-items:center;
gap:.5rem;
padding:10px 18px;
border-radius:999px;
text-transform:uppercase;
letter-spacing:.04em;
font-weight:800;
font-size:14px;
background: linear-gradient(180deg, #F8D57A 0%, #F1B74E 100%); /* keep your brand gold */
color:#111827; /* readable text */
border:1px solid rgba(17,24,39,.15);
box-shadow:0 8px 18px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.35);
}
/* nice breathing room between groups + consistent max width */
.heat-spkpkg__groups{ gap: 36px; }
.heat-spkpkg__group{ max-width: 1200px; margin: 0 auto; }
/* Pro logo grid: auto-fit columns, always centered & even */
.heat-spkpkg__logos{
max-width: 1060px; /* keeps the row nicely centered */
margin: 0 auto;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 18px;
}
/* card polish */
.heat-spkpkg__logo{
border-radius:16px;
border:1px solid #e5e7eb;
background:#fff;
box-shadow: 0 3px 14px rgba(2,6,23,.06);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.heat-spkpkg__logo:hover{
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(2,6,23,.10);
border-color:#d1d5db;
}
/* image sizing tidy */
.heat-spkpkg__logo img{
max-width: 160px;
max-height: 90px;
object-fit: contain;
width: auto;
height: auto;
margin: 0 auto 10px;
display:block;
}
/* mobile tweaks: shorten lines so they don’t collide with edges */
@media (max-width: 640px){
.heat-spkpkg__group-head::before,
.heat-spkpkg__group-head::after{ width: 70px; }
.heat-spkpkg__logos{ grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:14px; }
}
/* ===== Sponsor & Exhibitor CTA (scoped, high specificity) ===== */
.heat-cta-wrap.heat-cta-wrap {
--gold:#E0A340; --panel:#0F2439; --panelSoft:#122B46; --text:#EAF2F9; --muted:#C9D4E0;
position:relative; border-radius:18px; overflow:hidden;
background:linear-gradient(135deg, rgba(15,36,57,.96), rgba(14,34,55,.96));
padding:40px 24px; isolation:isolate;
}
.heat-cta-wrap .heat-cta-inner{max-width:1200px;margin:0 auto}
.heat-cta-wrap .heat-cta-eyebrow{
color:var(--gold) !important; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
font-size:12px; margin-bottom:6px; display:inline-block;
}
.heat-cta-wrap .heat-cta-title{
color:var(--text) !important; font-weight:900; margin:0 0 8px;
font-size:clamp(26px,3vw,40px); line-height:1.15;
}
.heat-cta-wrap .heat-cta-sub{
color:var(--muted) !important; margin:0 0 22px; max-width:900px;
font-size:16px; line-height:1.65;
}
/* Cards */
.heat-cta-wrap .heat-cta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:860px){ .heat-cta-wrap .heat-cta-grid{grid-template-columns:1fr} }
.heat-cta-wrap .heat-card{
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15);
border-radius:16px; padding:18px; display:flex; align-items:center; justify-content:space-between; gap:16px;
transition:transform .18s ease, box-shadow .18s ease;
}
.heat-cta-wrap .heat-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.25); }
.heat-cta-wrap .heat-card-left{display:flex; align-items:center; gap:14px}
.heat-cta-wrap .heat-icon{
width:44px; height:44px; border-radius:10px; display:grid; place-items:center;
background:rgba(224,163,64,.18); border:1px solid rgba(224,163,64,.4); color:var(--gold);
}
.heat-cta-wrap .heat-icon svg{ width:22px; height:22px; fill:currentColor }
.heat-cta-wrap .heat-card-title{ color:var(--text) !important; margin:0; font-weight:800; font-size:20px }
.heat-cta-wrap .heat-card-sub{ color:var(--muted) !important; font-size:13px; margin-top:3px }
/* Buttons */
.heat-cta-wrap .heat-btn{
appearance:none; border:none; cursor:pointer; border-radius:999px;
background:var(--gold); color:#1A1A1A !important; font-weight:900;
padding:12px 18px; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
transition:filter .15s ease, transform .15s ease;
}
.heat-cta-wrap .heat-btn:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.heat-cta-wrap .heat-btn.ghost{ background:transparent; color:var(--text) !important; border:1px solid rgba(255,255,255,.28) }
.heat-cta-wrap .heat-cta-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
/* ===== Heat Celmed CTA button (equal-height columns) ===== */
.heat-celmed .container{max-width:1200px;margin:0 auto;padding:0 20px;}
/* use flex instead of grid */
.heat-celmed__inner{
display:flex;
flex-direction:row; /* image left by default */
gap:48px;
background:#fff;
align-items:stretch; /* make both columns same height */
border-radius:12px; /* if you were adding radius via control keep it */
overflow:hidden;
}
.heat-celmed__inner.is-right{ flex-direction:row-reverse; }
/* columns */
.heat-celmed__media{ flex:1.1 1 0; position:relative; }
.heat-celmed__content{
flex:1 1 0;
padding:36px 36px 36px 0;
display:flex;
flex-direction:column;
justify-content:center; /* vertically center text */
}
.heat-celmed__inner.is-right .heat-celmed__content{ padding:36px 0 36px 36px; }
/* image fills column height */
.heat-celmed__media img{
position:absolute;
inset:0; /* top/right/bottom/left:0 */
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* typography etc. (unchanged) */
.heat-celmed__logo{height:42px;margin-bottom:16px;opacity:.95}
.heat-celmed__kicker{font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.heat-celmed__title{font-size:38px;line-height:1.15;margin:0 0 14px}
.heat-celmed__desc{font-size:18px;line-height:1.65;margin:0 0 26px}
.heat-celmed__btn{display:inline-block;padding:14px 28px;font-weight:600;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;box-shadow:0 8px 20px rgba(14,165,233,.25)}
.heat-celmed__btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(14,165,233,.35)}
/* --- fix logo size --- */
.heat-celmed__logo{
width:140px; /* cap width */
height:auto; /* keep aspect ratio */
display:block;
}
/* --- prevent full-width button in flex column --- */
.heat-celmed__btn{
display:inline-flex; /* keep intrinsic width */
align-self:flex-start; /* stop flex column from stretching it */
white-space:nowrap; /* keep arrow on one line */
}
/* responsive */
@media (max-width: 992px){
.heat-celmed__inner{ flex-direction:column; gap:24px; }
.heat-celmed__media{ min-height:260px; } /* nice hero height on mobile */
.heat-celmed__content{ padding:0; }
.heat-celmed__inner.is-right .heat-celmed__content{ padding:0; }
.heat-celmed__title{ font-size:32px; }
}
/* =========================================
HEAT – Accommodation (PRO LOOK)
========================================= */
.heat-acc{ width:100%; }
.heat-acc__head{ margin:0 0 18px; }
.heat-acc__title{
margin:0 0 6px;
font-weight:900;
letter-spacing:-.02em;
line-height:1.05;
font-size: clamp(34px, 3.2vw, 56px);
color:#1f2d3d;
}
.heat-acc__sub{
max-width: 820px;
color:#667085;
line-height:1.55;
font-size: 15px;
}
/* Grid */
.heat-acc-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 18px;
margin-top: 14px;
}
/* Card */
.heat-acc-card{
background:#fff;
border:1px solid #e8edf3;
border-radius: 18px;
overflow:hidden;
box-shadow: 0 8px 24px rgba(16,24,40,.06);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
position: relative;
display:flex;
flex-direction: column; /* ✅ helps button push bottom */
}
.heat-acc-card:hover{
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(16,24,40,.12);
border-color:#dbe6f2;
}
/* Image (top) */
.heat-acc-card__img{
height: 170px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.heat-acc-card__img::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(180deg, rgba(0,0,0,.00) 35%, rgba(0,0,0,.28) 100%);
}
/* Body */
.heat-acc-card__body{
padding: 14px 14px 14px;
display:flex;
flex-direction: column;
height: 100%;
}
/* Title row */
.heat-acc-card__top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 10px;
margin-bottom: 10px;
}
.heat-acc-card__name{
/* legacy rule — overridden by new redesigned rule below */
line-height: 1.25;
}
/* Meta block */
.heat-acc-card__meta{
margin: 0 0 10px;
padding: 10px 10px;
border-radius: 14px;
background: #f7f9fc;
border: 1px solid #eef2f7;
color:#475467;
font-size: 13px;
line-height: 1.35;
}
.heat-acc-card__meta-line{ margin: 0 0 4px; }
.heat-acc-card__meta-line:last-child{ margin-bottom:0; }
.heat-acc-card__price{
margin-top: 8px;
font-weight: 900;
color:#0f172a;
}
/* Features list */
.heat-acc-card__features{
list-style:none;
margin: 0 0 12px;
padding: 0;
color:#475467;
font-size: 13px;
line-height: 1.5;
}
.heat-acc-card__features li{
display:flex;
gap: 8px;
margin: 0 0 6px;
}
.heat-acc-card__features li:last-child{ margin-bottom:0; }
/* simple check bullet */
.heat-acc-card__features li::before{
content:"✓";
font-weight: 900;
color:#1b7a2a;
margin-top: 1px;
}
/* Button */
.heat-acc-card__btn{
margin-top: auto; /* ✅ push to bottom */
display:flex;
width:100%;
align-items:center;
justify-content:center;
gap: 8px;
padding: 11px 12px;
border-radius: 14px;
font-weight: 900;
text-decoration:none !important;
border: 1px solid #1f2d3d;
background: #1f2d3d;
color: #fff !important;
transition: opacity .15s ease, transform .15s ease, background .15s ease;
position:relative;
}
.heat-acc-card__btn:hover{
opacity:.95;
transform: translateY(-1px);
}
/*.heat-acc-card__btn::after{
content:"→";
font-weight:900;
margin-left: 6px;
}*/
/* Responsive */
@media (max-width: 1024px){
.heat-acc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px){
.heat-acc-grid{ grid-template-columns: 1fr; }
.heat-acc-card__img{ height: 185px; }
.heat-acc-card__btn{ margin-top: 16px; } /* ensure gap above button on mobile */
}
/* =========================================
HEAT – Accommodation Featured First Card
========================================= */
/* Desktop & tablet */
@media (min-width: 768px) {
.heat-acc-grid > .heat-acc-card:first-child {
grid-column: 1 / -1; /* FULL WIDTH */
display: grid;
grid-template-columns: 1.2fr 1fr; /* image | content */
align-items: stretch;
}
/* ✅ Make first card respect perfect round corners */
.heat-acc-grid > .heat-acc-card:first-child{
border-radius: 18px;
overflow:hidden;
}
/* Image becomes left column */
.heat-acc-grid > .heat-acc-card:first-child .heat-acc-card__img {
height: auto;
min-height: 260px;
border-radius: 0; /* ✅ IMPORTANT: remove inner radius */
}
/* Body on right */
.heat-acc-grid > .heat-acc-card:first-child .heat-acc-card__body {
padding: 20px 22px;
}
/* Bigger title (legacy — disabled, new design handles sizing) */
.heat-acc-grid > .heat-acc-card:first-child .heat-acc-card__name {
/* font-size: 22px; */
}
/* Meta looks stronger */
.heat-acc-grid > .heat-acc-card:first-child .heat-acc-card__meta {
font-size: 14px;
}
/* ✅ FIX: center the Book Now button in first big card */
.heat-acc-grid > .heat-acc-card:first-child .heat-acc-card__btn {
max-width: 280px;
margin-left: auto;
margin-right: auto;
}
}
/* Fix: subtitle not centered when header is centered */
.heat-acc__head--center .heat-acc__sub{
margin-left: auto;
margin-right: auto;
text-align: center;
}
.heat-acc__head--right .heat-acc__sub{
margin-left: auto;
margin-right: 0;
text-align: right;
}
.heat-acc__head--left .heat-acc__sub{
margin-left: 0;
margin-right: auto;
text-align: left;
}
/* Mobile – keep normal stack */
@media (max-width: 767px) {
.heat-acc-grid > .heat-acc-card:first-child {
grid-column: auto;
display: flex; /* keep flex so margin-top:auto on button still works */
}
}
/* ✅ FORCE 1 column on tablet + mobile (fix "still 2 columns") */
@media (max-width: 1024px){
.elementor-widget-heat_accommodation .heat-acc-grid,
.heat-acc .heat-acc-grid{
display: grid !important;
grid-template-columns: 1fr !important;
}
.elementor-widget-heat_accommodation .heat-acc-card,
.heat-acc .heat-acc-card{
width: 100% !important;
max-width: 100% !important;
}
}
/* =========================================================
HEAT – Video Slider (Professional)
========================================================= */
.heat-video{
position:relative;
width:100%;
}
.heat-video__viewport{
overflow:hidden;
}
.heat-video__track{
display:flex;
gap:18px;
scroll-behavior:smooth;
overflow:auto;
padding:6px 2px 18px;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
}
.heat-video__track::-webkit-scrollbar{ height:10px; }
.heat-video__track::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.15); border-radius:999px; }
.heat-video__slide{
flex:0 0 calc((100% - 18px) / 2); /* default 2 per view; JS will override */
scroll-snap-align:start;
}
.heat-video__card{
border-radius:22px;
box-shadow:0 14px 40px rgba(15,23,42,.10);
overflow:hidden;
border:1px solid rgba(226,232,240,.9);
}
.heat-video__media{
position:relative;
background:#0b1220;
}
.heat-video__media--16by9{ aspect-ratio:16/9; }
.heat-video__media--4by3{ aspect-ratio:4/3; }
.heat-video__media--1by1{ aspect-ratio:1/1; }
.heat-video__iframe,
.heat-video__video{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
display:block;
}
.heat-video__content{
padding:18px 18px 16px;
}
.heat-video__title{
margin:0 0 6px;
font-size:18px;
font-weight:800;
color:#0f172a;
line-height:1.25;
}
.heat-video__desc{
font-size:14px;
line-height:1.65;
color:#64748b;
margin:0 0 12px;
}
.heat-video__btn{
display:inline-flex;
align-items:center;
gap:10px;
text-decoration:none;
font-weight:800;
font-size:14px;
color:#0f172a;
background:#f1f5f9;
border:1px solid #e2e8f0;
padding:10px 14px;
border-radius:999px;
}
.heat-video__btn:hover{
background:#0f172a;
color:#fff;
}
.heat-video__btn-ico{
font-size:16px;
line-height:1;
}
/* Arrows */
.heat-video__nav{
position:absolute;
top:38%;
transform:translateY(-50%);
width:44px;
height:44px;
border-radius:999px;
border:1px solid rgba(226,232,240,.9);
background:#fff;
box-shadow:0 12px 30px rgba(15,23,42,.12);
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
font-weight:900;
color:#0f172a;
cursor:pointer;
z-index:5;
}
.heat-video__nav--prev{ left:-10px; }
.heat-video__nav--next{ right:-10px; }
.heat-video__nav:hover{ background:#0f172a; color:#fff; }
/* Dots */
.heat-video__dots{
display:flex;
justify-content:center;
gap:8px;
margin-top:12px;
}
.heat-video__dot{
width:8px;
height:8px;
border-radius:999px;
border:0;
background:rgba(15,23,42,.18);
cursor:pointer;
}
.heat-video__dot.is-active{
width:22px;
background:rgba(15,23,42,.75);
}
/* Responsive (JS also adjusts widths) */
@media (max-width: 1024px){
.heat-video__slide{ flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 767px){
.heat-video__slide{ flex-basis: 100%; }
.heat-video__nav{ display:none; }
}
/* ==============================
* HEAT Action Button (Default)
* ============================== */
.heat-action-btn {
display: inline-block;
background: #F2BC57;
color: #000;
font-weight: 600;
font-size: 16px;
line-height: 1;
padding: 14px 28px;
border-radius: 999px;
text-decoration: none;
transition: all .25s ease;
}
.heat-action-btn:hover {
background: #e3ab3f;
color: #000;
transform: translateY(-1px);
}
/* ===================================================== */
/* ===== Pricing — Scarcity / Urgency (HEAT) ==== */
/* ===================================================== */
.heat-plan__scarcity{
margin: 10px 0 6px;
padding: 10px 12px;
border-radius: 10px;
background: #f8fafc;
border: 1px solid #e5e7eb;
transition: background-color .2s, border-color .2s;
}
.heat-plan__scarcity-row{
display:flex; align-items:center; gap:8px;
font-size: 13px; font-weight: 700; line-height: 1.2;
color:#0f172a;
}
.heat-plan__scarcity-dot{
width: 8px; height: 8px; border-radius: 50%;
background:#10b981;
box-shadow: 0 0 0 4px rgba(16,185,129,.15);
flex: 0 0 8px;
}
.heat-plan__scarcity-label{ letter-spacing:.01em; }
.heat-plan__scarcity-bar{
margin-top: 8px;
height: 6px; width: 100%;
background: #e5e7eb;
border-radius: 999px;
overflow: hidden;
}
.heat-plan__scarcity-fill{
height: 100%;
background: linear-gradient(90deg, #22c55e, #10b981);
border-radius: 999px;
transition: width .4s ease;
}
/* --- State: low (< 30%) — amber --- */
.heat-plan__scarcity.is-low{
background: #fff7ed;
border-color: #fed7aa;
}
.heat-plan__scarcity.is-low .heat-plan__scarcity-dot{
background:#f59e0b;
box-shadow: 0 0 0 4px rgba(245,158,11,.18);
animation: heatPulse 1.8s ease-in-out infinite;
}
.heat-plan__scarcity.is-low .heat-plan__scarcity-label{ color:#9a3412; }
.heat-plan__scarcity.is-low .heat-plan__scarcity-fill{
background: linear-gradient(90deg, #f59e0b, #f97316);
}
/* --- State: critical (< 10%) — red --- */
.heat-plan__scarcity.is-critical{
background: #fef2f2;
border-color: #fecaca;
}
.heat-plan__scarcity.is-critical .heat-plan__scarcity-dot{
background:#ef4444;
box-shadow: 0 0 0 4px rgba(239,68,68,.18);
animation: heatPulse 1.2s ease-in-out infinite;
}
.heat-plan__scarcity.is-critical .heat-plan__scarcity-label{ color:#991b1b; }
.heat-plan__scarcity.is-critical .heat-plan__scarcity-fill{
background: linear-gradient(90deg, #ef4444, #dc2626);
}
/* --- State: sold out --- */
.heat-plan__scarcity.is-soldout{
background:#1f2937;
border-color:#1f2937;
}
.heat-plan__scarcity.is-soldout .heat-plan__scarcity-row{ color:#fff; justify-content:center; }
.heat-plan__scarcity.is-soldout .heat-plan__scarcity-label{
letter-spacing:.1em; font-weight:800; text-transform:uppercase;
}
.heat-plan__scarcity.is-soldout .heat-plan__scarcity-dot{
background:#f87171;
box-shadow: 0 0 0 4px rgba(248,113,113,.2);
}
/* Featured card variants (dark bg) */
.is-featured .heat-plan__scarcity{
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.12);
}
.is-featured .heat-plan__scarcity-row{ color:#fff; }
.is-featured .heat-plan__scarcity-bar{ background: rgba(255,255,255,.12); }
.is-featured .heat-plan__scarcity.is-low{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
.is-featured .heat-plan__scarcity.is-low .heat-plan__scarcity-label{ color:#fde68a; }
.is-featured .heat-plan__scarcity.is-critical{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
.is-featured .heat-plan__scarcity.is-critical .heat-plan__scarcity-label{ color:#fecaca; }
/* Pulse animation */
@keyframes heatPulse{
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: .85; }
}
@media (prefers-reduced-motion: reduce){
.heat-plan__scarcity-dot{ animation: none !important; }
.heat-plan__scarcity-fill{ transition: none !important; }
}
/* Early bird deadline line */
.heat-plan__deadline{
display:flex; align-items:center; gap:6px;
margin-top: 8px;
font-size: 12px; font-weight:600;
color:#475569;
}
.heat-plan__deadline svg{ color:#f59e0b; }
.is-featured .heat-plan__deadline{ color:#cbd5e1; }
/* Sold-out button */
.heat-plan__btn.is-soldout{
background:#9ca3af !important;
color:#fff !important;
pointer-events: none;
cursor: not-allowed;
opacity: .85;
}
/* Position tweaks for scarcity block placement */
.heat-plan__scarcity.pos-below_subtitle{ margin-top: 14px; margin-bottom: 14px; }
.heat-plan__scarcity.pos-above_price{ margin-bottom: 12px; }
.heat-plan__scarcity.pos-below_price{ margin-top: 6px; margin-bottom: 14px; }
/* ===================================================== */
/* ===== Countdown Band (HEAT) ==== */
/* ===================================================== */
.heat-cdband-wrap{
width: 100%;
text-align: center; /* default; overridden by alignment control */
}
.heat-cdband{
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
padding: 12px 20px;
background: rgba(15, 23, 42, 0.92);
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
line-height: 1;
max-width: 100%;
}
.heat-cdband__prefix{
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fbbf24;
white-space: nowrap;
}
.heat-cdband__divider{
width: 1px;
height: 22px;
background: rgba(255, 255, 255, 0.18);
flex-shrink: 0;
}
.heat-cdband__timer{
display: inline-flex;
align-items: baseline;
gap: 8px;
color: #fff;
}
.heat-cdband__unit-group{
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.heat-cdband__num{
font-size: 20px;
font-weight: 800;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
min-width: 1.6em;
text-align: center;
color: #fff;
letter-spacing: -0.01em;
transition: color 0.3s ease;
}
.heat-cdband__unit{
font-size: 11px;
font-weight: 600;
text-transform: lowercase;
letter-spacing: 0.04em;
color: #cbd5e1;
}
.heat-cdband__sep{
font-size: 18px;
font-weight: 700;
color: rgba(255, 255, 255, 0.35);
margin: 0 -2px;
}
.heat-cdband__cta{
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: #fbbf24;
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease, transform 0.2s ease;
}
.heat-cdband__cta:hover{
color: #fde68a;
transform: translateX(2px);
}
.heat-cdband__cta:focus-visible{
outline: 2px solid #fbbf24;
outline-offset: 3px;
border-radius: 4px;
}
.heat-cdband__arrow{
display: inline-block;
font-size: 14px;
transition: transform 0.2s ease;
}
.heat-cdband__cta:hover .heat-cdband__arrow{
transform: translateX(3px);
}
/* Urgent state — final 24 hours */
.heat-cdband.is-urgent .heat-cdband__num{
color: #ef4444;
animation: heatCdPulse 1.4s ease-in-out infinite;
}
.heat-cdband.is-urgent .heat-cdband__prefix{
color: #fca5a5;
}
@keyframes heatCdPulse{
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
.heat-cdband.is-urgent .heat-cdband__num{ animation: none; }
.heat-cdband__cta, .heat-cdband__cta:hover, .heat-cdband__arrow{ transition: none; transform: none; }
}
/* Expired state */
.heat-cdband.is-expired .heat-cdband__expired-msg{
color: #cbd5e1;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
}
.heat-cdband.is-expired .heat-cdband__prefix,
.heat-cdband.is-expired .heat-cdband__cta,
.heat-cdband.is-expired .heat-cdband__divider:nth-of-type(1){
display: none;
}
/* Responsive — tablet */
@media (max-width: 768px){
.heat-cdband{
padding: 10px 16px;
gap: 10px;
border-radius: 14px;
}
.heat-cdband__num{ font-size: 18px; }
.heat-cdband__prefix{ font-size: 11px; letter-spacing: 0.08em; }
.heat-cdband__cta{ font-size: 12px; }
}
/* Responsive — mobile: stack vertically */
@media (max-width: 480px){
.heat-cdband{
flex-direction: column;
gap: 8px;
padding: 14px 18px;
width: 100%;
text-align: center;
}
.heat-cdband__divider{
width: 60%;
height: 1px;
}
.heat-cdband__timer{
justify-content: center;
}
}
/* ===================================================== */
/* ===== UNIFIED HEAT Slider Nav Buttons ==== */
/* ===== Applies to all .heat-* slider arrows === */
/* ===================================================== */
/* Target every nav/arrow button across all HEAT slider widgets */
.heat-video__nav,
.heat-eh__arrow,
.heat-evs__arrow,
.heat-events__arrow,
.heat-pricing__arrow,
.heat-rus__arrow,
.heat-testi__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px !important;
height: 48px !important;
min-width: 48px;
min-height: 48px;
padding: 0 !important;
border-radius: 50% !important;
border: 1px solid rgba(15, 23, 42, 0.08) !important;
background: #ffffff !important;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 8px 24px rgba(15, 23, 42, 0.12) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: background-color .25s ease,
border-color .25s ease,
box-shadow .25s ease,
transform .25s ease;
/* Hide the original ‹ › or ❮ characters */
font-size: 0 !important;
color: transparent !important;
line-height: 0 !important;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
}
/* Hide the inner or icons from older markup */
.heat-video__nav > *,
.heat-eh__arrow > *,
.heat-evs__arrow > *,
.heat-events__arrow > *,
.heat-pricing__arrow > *,
.heat-rus__arrow > *,
.heat-testi__arrow > * {
display: none !important;
}
/* Inject crisp SVG chevron via ::before */
.heat-video__nav::before,
.heat-eh__arrow::before,
.heat-evs__arrow::before,
.heat-events__arrow::before,
.heat-pricing__arrow::before,
.heat-rus__arrow::before,
.heat-testi__arrow::before {
content: "";
display: block;
width: 18px;
height: 18px;
background-color: #0f172a;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
transition: background-color .25s ease, transform .25s ease;
}
/* PREV arrow (chevron-left) — inline SVG mask */
.heat-video__nav--prev::before,
.heat-eh__prev::before,
.heat-evs__prev::before,
.heat-events__prev::before,
.heat-pricing__prev::before,
.heat-rus__prev::before,
.heat-testi__prev::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* NEXT arrow (chevron-right) */
.heat-video__nav--next::before,
.heat-eh__next::before,
.heat-evs__next::before,
.heat-events__next::before,
.heat-pricing__next::before,
.heat-rus__next::before,
.heat-testi__next::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Hover — fill with brand gold */
.heat-video__nav:hover,
.heat-eh__arrow:hover,
.heat-evs__arrow:hover,
.heat-events__arrow:hover,
.heat-pricing__arrow:hover,
.heat-rus__arrow:hover,
.heat-testi__arrow:hover {
background: #f59e0b !important;
border-color: #f59e0b !important;
box-shadow:
0 2px 4px rgba(245, 158, 11, 0.18),
0 12px 28px rgba(245, 158, 11, 0.28) !important;
transform: translateY(-50%) scale(1.06);
}
.heat-video__nav:hover::before,
.heat-eh__arrow:hover::before,
.heat-evs__arrow:hover::before,
.heat-events__arrow:hover::before,
.heat-pricing__arrow:hover::before,
.heat-rus__arrow:hover::before,
.heat-testi__arrow:hover::before {
background-color: #ffffff;
}
/* Slight nudge on hover for directional feedback */
.heat-video__nav--prev:hover::before,
.heat-eh__prev:hover::before,
.heat-evs__prev:hover::before,
.heat-events__prev:hover::before,
.heat-pricing__prev:hover::before,
.heat-rus__prev:hover::before,
.heat-testi__prev:hover::before { transform: translateX(-2px); }
.heat-video__nav--next:hover::before,
.heat-eh__next:hover::before,
.heat-evs__next:hover::before,
.heat-events__next:hover::before,
.heat-pricing__next:hover::before,
.heat-rus__next:hover::before,
.heat-testi__next:hover::before { transform: translateX(2px); }
/* Active/pressed state */
.heat-video__nav:active,
.heat-eh__arrow:active,
.heat-evs__arrow:active,
.heat-events__arrow:active,
.heat-pricing__arrow:active,
.heat-rus__arrow:active,
.heat-testi__arrow:active {
transform: translateY(-50%) scale(0.96);
}
/* Disabled state (when slider can't go further) */
.heat-video__nav[disabled],
.heat-video__nav.is-disabled,
.heat-eh__arrow[disabled],
.heat-evs__arrow[disabled],
.heat-events__arrow[disabled],
.heat-pricing__arrow[disabled],
.heat-rus__arrow[disabled],
.heat-testi__arrow[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Focus-visible — accessibility */
.heat-video__nav:focus-visible,
.heat-eh__arrow:focus-visible,
.heat-evs__arrow:focus-visible,
.heat-events__arrow:focus-visible,
.heat-pricing__arrow:focus-visible,
.heat-rus__arrow:focus-visible,
.heat-testi__arrow:focus-visible {
outline: 2px solid #f59e0b !important;
outline-offset: 3px;
}
/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce){
.heat-video__nav,
.heat-eh__arrow,
.heat-evs__arrow,
.heat-events__arrow,
.heat-pricing__arrow,
.heat-rus__arrow,
.heat-testi__arrow,
.heat-video__nav::before,
.heat-eh__arrow::before,
.heat-evs__arrow::before,
.heat-events__arrow::before,
.heat-pricing__arrow::before,
.heat-rus__arrow::before,
.heat-testi__arrow::before {
transition: none !important;
}
.heat-video__nav:hover,
.heat-eh__arrow:hover,
.heat-evs__arrow:hover,
.heat-events__arrow:hover,
.heat-pricing__arrow:hover,
.heat-rus__arrow:hover,
.heat-testi__arrow:hover {
transform: translateY(-50%) !important;
}
}
/* Mobile sizing */
@media (max-width: 768px){
.heat-video__nav,
.heat-eh__arrow,
.heat-evs__arrow,
.heat-events__arrow,
.heat-pricing__arrow,
.heat-rus__arrow,
.heat-testi__arrow {
width: 40px !important;
height: 40px !important;
min-width: 40px;
min-height: 40px;
}
.heat-video__nav::before,
.heat-eh__arrow::before,
.heat-evs__arrow::before,
.heat-events__arrow::before,
.heat-pricing__arrow::before,
.heat-rus__arrow::before,
.heat-testi__arrow::before {
width: 15px;
height: 15px;
}
}
/* ===================================================== */
/* ===== ACCOMMODATION (HEAT) — REDESIGNED == */
/* ===================================================== */
.heat-acc__head { margin-bottom: 40px; }
.heat-acc__title {
font-size: 36px;
font-weight: 700;
color: #0f172a;
margin: 0 0 12px;
line-height: 1.15;
}
.heat-acc__sub {
font-size: 16px;
color: #475569;
max-width: 640px;
margin: 0 auto;
line-height: 1.55;
}
.heat-acc__head--center .heat-acc__sub { margin-left:auto; margin-right:auto; }
/* Grid auto-adjusts: never more cols than items, never empty slots */
.heat-acc-grid {
--heat-acc-cols: 3;
--heat-acc-cols-eff: 3;
display: grid;
grid-template-columns: repeat(var(--heat-acc-cols-eff), minmax(0, 1fr));
gap: 28px;
max-width: 1200px;
margin: 0 auto;
}
/* Card */
.heat-acc-card {
background: #ffffff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 12px 32px rgba(15,23,42,.08);
display: flex;
flex-direction: column;
transition: transform .3s ease, box-shadow .3s ease;
}
.heat-acc-card:hover {
transform: translateY(-4px);
box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 24px 48px rgba(15,23,42,.14);
}
/* Hotel image */
.heat-acc-card__img {
width: 100%;
aspect-ratio: 16 / 10;
background-color: #e2e8f0;
background-size: cover;
background-position: center;
}
/* Body */
.heat-acc-card__body {
padding: 28px 28px 32px;
display: flex;
flex-direction: column;
gap: 22px;
flex: 1;
}
.heat-acc-card .heat-acc-card__name {
font-size: 20px !important;
font-weight: 700 !important;
color: #0f172a !important;
line-height: 1.25 !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
font-family: inherit !important;
text-transform: none !important;
}
/* Info block — location + event + dates */
.heat-acc-card__info {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
.heat-acc-card__info-row {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
color: #334155;
line-height: 1.45;
}
.heat-acc-card__info-row--dates {
padding-top: 8px;
margin-top: 4px;
border-top: 1px dashed #cbd5e1;
}
.heat-acc-card__info-row--event {
padding-left: 30px; /* align with text under location icon */
margin-top: -4px;
font-size: 13px;
color: #64748b;
}
.heat-acc-card__info-row--event .heat-acc-card__info-icon { display:none; }
.heat-acc-card__info-icon {
flex: 0 0 18px;
width: 18px;
height: 18px;
color: #0f172a;
display: inline-flex;
align-items: center;
justify-content: center;
}
.heat-acc-card__info-icon svg { width: 100%; height: 100%; display: block; }
.heat-acc-card__info-text { flex: 1; }
.heat-acc-card__info-text--strong { font-weight: 600; color: #0f172a; }
/* Feature icons row */
.heat-acc-card__features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 8px;
padding: 4px 0;
position: relative;
}
.heat-acc-card__feature {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
padding: 4px;
position: relative;
}
.heat-acc-card__feature + .heat-acc-card__feature::before {
content: '';
position: absolute;
left: -4px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 36px;
background: #e2e8f0;
}
.heat-acc-card__feature-icon {
width: 28px;
height: 28px;
color: #15803d; /* green-700 for wellness/medical feel */
display: inline-flex;
}
.heat-acc-card__feature-icon svg { width: 100%; height: 100%; }
.heat-acc-card__feature-label {
font-size: 12px;
color: #334155;
font-weight: 500;
line-height: 1.3;
}
/* Room rates section */
.heat-acc-card__rates { display: flex; flex-direction: column; gap: 8px; }
.heat-acc-card__rates-head {
display: flex;
align-items: center;
gap: 14px;
margin-top: 4px;
}
.heat-acc-card__rates-line {
flex: 1;
height: 2px;
background: linear-gradient(90deg, transparent, #c8924a, transparent);
}
.heat-acc-card__rates-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
color: #0f172a;
white-space: nowrap;
}
.heat-acc-card__rates-sub {
font-size: 13px;
color: #64748b;
text-align: center;
margin: 0 0 6px;
}
.heat-acc-card__rate-tiles {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 4px;
}
.heat-acc-rate {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 14px;
border-radius: 14px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
}
.heat-acc-rate--single {
background: #eff6ff;
border-color: #dbeafe;
}
.heat-acc-rate--double {
background: #fffbeb;
border-color: #fde68a;
}
.heat-acc-rate__icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
color: #fff;
}
.heat-acc-rate--single .heat-acc-rate__icon { background: #1e3a8a; }
.heat-acc-rate--double .heat-acc-rate__icon { background: #c8924a; }
.heat-acc-rate__icon svg { width: 20px; height: 20px; }
.heat-acc-rate__body { flex: 1; min-width: 0; }
.heat-acc-rate__label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
color: #64748b;
margin-bottom: 2px;
}
.heat-acc-rate__price {
font-size: 18px;
font-weight: 800;
color: #0f172a;
line-height: 1.1;
letter-spacing: -0.01em;
}
.heat-acc-rate__unit {
font-size: 11px;
color: #94a3b8;
margin-top: 2px;
}
/* Book Now button */
.heat-acc-card__btn {
margin-top: auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 16px 20px;
background: #0f172a;
color: #ffffff !important;
border: none;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
text-decoration: none !important;
transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
font-family: inherit;
}
.heat-acc-card__btn:hover {
background: #c8924a;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(200,146,74,.32);
}
.heat-acc-card__btn-arrow {
display: inline-block;
transition: transform .2s ease;
}
.heat-acc-card__btn:hover .heat-acc-card__btn-arrow {
transform: translateX(4px);
}
/* Responsive */
@media (max-width: 1024px) {
.heat-acc-grid { grid-template-columns: repeat(min(2, var(--heat-acc-cols-eff)), 1fr) !important; }
}
@media (max-width: 640px) {
.heat-acc-grid { grid-template-columns: 1fr !important; gap: 20px; }
.heat-acc-card__body { padding: 22px 20px 26px; gap: 18px; }
.heat-acc-card .heat-acc-card__name { font-size: 19px !important; }
.heat-acc-card__rate-tiles { grid-template-columns: 1fr; }
.heat-acc__title { font-size: 28px; }
}
/* ===================================================== */
/* ===== ACCOMMODATION — BOOKING MODAL == */
/* ===================================================== */
.heat-acc-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: flex-start;
justify-content: center;
padding: 40px 20px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.heat-acc-modal.is-open { display: flex; animation: heatAccFadeIn .25s ease; }
@keyframes heatAccFadeIn { from { opacity: 0; } to { opacity: 1; } }
.heat-acc-modal__overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.heat-acc-modal__dialog {
position: relative;
width: 100%;
max-width: 580px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35);
overflow: hidden;
margin: auto 0;
animation: heatAccSlideUp .35s cubic-bezier(.16,1,.3,1);
}
@keyframes heatAccSlideUp {
from { transform: translateY(30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.heat-acc-modal__close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background-color .2s;
}
.heat-acc-modal__close:hover { background: rgba(255, 255, 255, 0.22); }
.heat-acc-modal__header {
background: linear-gradient(135deg, #0f172a, #1e3a5f);
color: #ffffff;
padding: 28px 32px 24px;
}
.heat-acc-modal__eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #fbbf24;
margin-bottom: 8px;
}
.heat-acc-modal__title {
font-size: 22px;
font-weight: 700;
margin: 0 0 6px;
line-height: 1.25;
color: #ffffff;
}
.heat-acc-modal__subtitle {
font-size: 14px;
color: rgba(255, 255, 255, 0.75);
font-weight: 500;
}
.heat-acc-modal__form {
padding: 26px 32px 28px;
display: flex;
flex-direction: column;
gap: 16px;
}
.heat-acc-modal__row { display: flex; gap: 14px; }
.heat-acc-modal__row--2 { gap: 14px; }
.heat-acc-modal__row--2 .heat-acc-modal__field { flex: 1; min-width: 0; }
.heat-acc-modal__field { display: flex; flex-direction: column; gap: 6px; }
.heat-acc-modal__field--full { width: 100%; }
.heat-acc-modal__label {
font-size: 12px;
font-weight: 600;
color: #475569;
letter-spacing: 0.02em;
}
.heat-acc-modal__label em {
color: #dc2626;
font-style: normal;
margin-left: 2px;
}
.heat-acc-modal__form input[type="text"],
.heat-acc-modal__form input[type="email"],
.heat-acc-modal__form input[type="tel"],
.heat-acc-modal__form input[type="number"],
.heat-acc-modal__form input[type="date"],
.heat-acc-modal__form select,
.heat-acc-modal__form textarea {
width: 100%;
padding: 11px 14px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-size: 14px;
color: #0f172a;
font-family: inherit;
transition: border-color .15s, background-color .15s, box-shadow .15s;
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
}
.heat-acc-modal__form input:focus,
.heat-acc-modal__form select:focus,
.heat-acc-modal__form textarea:focus {
outline: none;
background: #ffffff;
border-color: #c8924a;
box-shadow: 0 0 0 3px rgba(200, 146, 74, 0.15);
}
.heat-acc-modal__form select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.heat-acc-modal__form textarea { resize: vertical; min-height: 70px; }
.heat-acc-modal__feedback {
padding: 12px 14px;
border-radius: 10px;
font-size: 13px;
line-height: 1.5;
font-weight: 500;
}
.heat-acc-modal__feedback.is-success {
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #065f46;
}
.heat-acc-modal__feedback.is-error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
}
.heat-acc-modal__actions {
display: flex;
gap: 10px;
margin-top: 6px;
}
.heat-acc-modal__btn {
flex: 1;
padding: 13px 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
border: none;
transition: all .2s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.heat-acc-modal__btn--ghost {
background: #f1f5f9;
color: #475569;
flex: 0 0 auto;
padding-left: 26px;
padding-right: 26px;
}
.heat-acc-modal__btn--ghost:hover { background: #e2e8f0; }
.heat-acc-modal__btn--primary {
background: #0f172a;
color: #ffffff;
}
.heat-acc-modal__btn--primary:hover { background: #c8924a; }
.heat-acc-modal__btn--primary:disabled { opacity: 0.7; cursor: not-allowed; }
.heat-acc-modal__btn-spinner {
display: none;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #ffffff;
border-radius: 50%;
animation: heatAccSpin 0.7s linear infinite;
}
.heat-acc-modal__btn.is-loading .heat-acc-modal__btn-spinner { display: inline-block; }
.heat-acc-modal__btn.is-loading .heat-acc-modal__btn-label { opacity: 0.85; }
@keyframes heatAccSpin { to { transform: rotate(360deg); } }
.heat-acc-modal__legal {
font-size: 11px;
color: #94a3b8;
text-align: center;
margin: 6px 0 0;
line-height: 1.5;
}
/* Mobile modal */
@media (max-width: 640px) {
.heat-acc-modal { padding: 20px 12px; align-items: stretch; }
.heat-acc-modal__dialog { border-radius: 16px; }
.heat-acc-modal__header { padding: 22px 22px 18px; }
.heat-acc-modal__form { padding: 22px 22px 24px; gap: 14px; }
.heat-acc-modal__row--2 { flex-direction: column; gap: 14px; }
.heat-acc-modal__title { font-size: 19px; }
.heat-acc-modal__actions { flex-direction: column-reverse; }
.heat-acc-modal__btn--ghost { flex: 1; }
}
/* ── Heat Events Grid: Stock Badge ── */
.heat-event__stock {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 600;
padding: 4px 10px;
border-radius: 6px;
margin-top: 8px;
background-color: #f0fdf4;
color: #15803d;
}
.heat-event__stock--low {
background-color: #fef2f2;
color: #dc2626;
}
.heat-event__stock--soldout {
background-color: #f1f5f9;
color: #64748b;
}
.heat-event__btn--disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Fix Account button to match HEAT nav style */
.sithu-login-btn {
background: transparent !important;
color: #fff !important;
border: 1.5px solid rgba(255,255,255,0.35) !important;
border-radius: 6px !important;
font-size: 14px !important;
font-weight: 600 !important;
padding: 8px 18px !important;
box-shadow: none !important;
transition: border-color .18s, background .18s !important;
}
.sithu-login-btn:hover,
.sithu-login-btn:focus {
background: rgba(196,154,40,0.15) !important;
border-color: #C49A28 !important;
color: #fff !important;
}
.sithu-login-btn:active {
background: rgba(196,154,40,0.25) !important;
}